15.3. 页面结构设计

最新推荐文章于 2023-04-19 18:44:01 发布
最新推荐文章于 2023-04-19 18:44:01 发布
阅读量169 收藏
点赞数
文章标签： xhtml
原文链接：https://yq.aliyun.com/articles/323375
版权

页面结构从上到下依次是

  • header 主要包括导航，登录，Logo, Banner

  • body 网站主要内容，并且还可以分为左右两栏，左中右三栏。

  • footer 导航，版权

header,footer将显示在所有页面，一般很少改动。

15.3.1. Home page (首页)

			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>

<body>

<div id="header">
	<div id="logo"></div>
    <div id="banner"></div>
    <div id="nav"></div>
</div>

<div id="page1">
 	<div class="left_nav"></div>
    <div class="right"></div>
</div>

<div id="page2">

</div>

<div id="page3">

</div>

<div id="footer">
  <div id="footer_nav"></div>
  <div id="copyright"></div>
</div>

</body>
</html>

page1 打开首页看到的第一屏页面，page2，page3需要按翻页键

不要将 page1，page2，page3 放到一个DIV中

15.3.2. 导航烂

				
<table>
	<tr>
		<td>Home</td>
		<td>News</td>
		<td>About</td>
		<td>Contact</td>
	</tr>
</table>
				
				
				
<div id="nav">
	<ul>
		<li><a href="#"> Home </a></li>
		<li><a href="#"> News </a></li>
		<li><a href="#"> Person </a></li>
		<li><a href="#"> Group </a></li>
		<li><a href="#"> Network </a></li>
	</ul>
</div>

15.3.3. Left Bar

				
	<div id="left">
		<div class="box">
			<h2>title</h2>
			<a href="#"> link </a>
			<a href="#"> link </a>
			<a href="#"> link </a>
		</div>

		<div class="box">
			<h2>title</h2>
			<a href="#"> link </a>
			<a href="#"> link </a>
			<a href="#"> link </a>
		</div>
	</div>

15.3.4. 区块设计 Block

网站经常用一些方块规划版面。

  • 一种是矩形方框

  • 另一种是有标题，标题下方是矩形方框

  • 现在流行的是标题栏有多个选项卡，标题下方是矩形方框，当选择不同标题时，矩形方框中的内容随之改变。

传统方法如下：

例 15.3.  例子

table block example

				
<table>
	<tr>
		<td>
			内容
		</td>
	</tr>
</table>

div+css block example

				
<div class="simple_box">
			内容
</table>

例 15.4.  例子

table title block example

				
<table>
	<tr>
		<td>Top 10</td>
	</tr>
	<tr>
		<td>
			<table>
				<tr>
					<td>No.1</td>
				</tr>
				<tr>
					<td>No.2</td>
				</tr>
				<tr>
					<td>No.3</td>
				</tr>
				<tr>
					<td>No.n</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

div+css title block example

				
<div class="title_block">
	<h2>
		Title
	<h2>
	<div>
		Content
	</div>
</div>

使用dl标记实现

				
<dl class="title_block">
	<dt>Title<dt>
	<dd>
		Content
	</dd>
</dl>




原文出处：Netkiller 系列 手札
本文作者：陈景峯
转载请与作者联系，同时请务必标明文章原始出处和作者信息及本声明。

weixin_34277853
关注
系统架构设计师【第15章】: 面向服务架构设计理论与实践 (核心总结)
数据知道的博客
06-03 6075
在面向服务的体系结构(Service-Oriented Architecture，SOA)中，服务的概念有了延伸，泛 指系统对外提供的功能集。
c#语言程序设计pdf,C#程序设计及应用教程(第2版)
weixin_42300574的博客
05-19 1318
C#程序设计及应用教程(第2版)是一本C#语言程序设计和应用开发教程，由马骏编著。本书内容丰富简洁、对一些初学者比较难以理解的知识点，尽量用简洁、形象而又浅显易懂的语言来表达。比如泛型、接口、组件、特性、纹理、图形图像用法等。但书中的某些重点章节则会以图文并茂的形式，将重点内容展现出来。同时，也会适当地介绍了一些比较新的编程技术，如LlNO等，使读者能够根据介绍的内容，很快对所学知识举一反三、灵活...
功能结构和页面结构的设计
bjhaowang的专栏
04-07 818
曾经有一个丝毫不懂网站设计的朋友问我：设计一个网站到底有多少活，一个普通的网站制作具体需要设计多少个页面？ 我回答：一般情况下不会超过30个页面；事实上一切的设计工作只是为了设计好这不足30个的页面，这些几乎是整个网站的所有。 我没有骗他，事实确实可以这么说。 针对于这30个页面，我们在设计之前需要搞清楚：这些页面是给什么样人看的？他们有什么样的特征？我们需要给这些人什么样
网页设计基础——网页布局结构
Geek_HotZe的博客
07-27 1万+
几大常用网页布局结构 作为网页设计初学者，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。 一、 国子型（大型网站常用类型） 如图所示，我们可以看出，国子型页面结构主要分为五个部分。 头部: 该部分包括网站的标题以及横幅广告条； 左侧: 该部分包括一些导航等信息； 右侧: 该部分包括菜单或者导航的组件； 中部: 该部分为页面的主要内容； 底部: 该部分包括一...
seo-扁平化网页结构设计
luojianbinfen的专栏
03-09 1697
扁平化网页结构设计方法与扁平化解决方案 |浏览：149|更新：2014-07-31 17:56 1 2 3 4 5 6 7 分步阅读 扁平化网页结构是指将网站的链接深度尽量降低，使用户用较少的点击就能访问到信息页面，以及利于网页搜索引擎排名权重的传递，利于搜索引擎排名的一种网页结构形式。 图示为非扁平化和扁平
常见的网页布局结构
qq_73599840的博客
11-19 1万+
整理了一些适合网页设计初学者的网页布局结构，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。
复习：前台页面设计——网页设计的布局、HTML常用的布局结构
热门推荐
Mr_zhaoz的博客
09-11 1万+
1.网页设计的布局 “国”字型布局： 国型布局也称为同型布局，布局结构与“国”字相似而得名 是一些大型网站所喜欢的类型 页面最上部分一般放置网站的标志和导航栏或Banner广告， 接下来是网站的主要内寄，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底， 最下部分一般放置网站的版权信息和联系方式等 其主要优点是页面容纳内容很多，信息量大。 T型布局 T型结构也称拐角型
struts2 2.3.15.3
07-12
Struts2是一个基于MVC（Model-View-Controller）设计模式的开源Java Web框架，它由Apache软件基金会维护。在Web开发中，Struts2提供了一种组织应用程序的方式，简化了开发过程，使得代码结构更加清晰，提高了可维护...
【HTML】掌握 HTML 5 标签搭建页面结构
ITLearnNote—-聚焦互联网的技术革新
04-19 649
HTML基础介绍
ssh.zip_ssh.jar
09-19
1. Struts2：Struts2 是一个基于MVC设计模式的Web应用框架，用于简化Java Web应用的开发。它通过Action类处理请求，并通过配置文件定义请求与Action的映射。Struts2-struts2-core-2.3.15.3.jar是Struts2的核心库，...
HTML网页设计：一、HTML的基本结构
xfjssaw的博客
03-17 8260
HTML的基本结构 1.HTML文档的组成 HTML文档主要由3部分组成。 ●HTML部分：HTML部分以<HTML>标签开始，以</HTML>标签结束。<HTML>标签用来告诉浏览器这两个标签中间的内容是HTML文档。 ●头部：头部以<HEAD>标签开始，以</HEAD>标签结束。这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息。标题包含在<TITLE>和</TITLE>标签之间。 ●主体部分：主体部分包含在
浅析网页界面设计——首页设计
weixin_33692284的博客
09-23 287
杨科宇曾发表过一篇文章《浅析网页界面设计——首页设计》，文中为我们分享了如何进行首页的界面设计。现转载于此，供大家借鉴学习。全文如下：首页设计，需开宗明义突出主题开宗明义，无论是对于一篇文章、一场会议或一部专题片，还是对于一个网站来说，都是必不可少的。那么能为一个网站开宗明义的地方（标签）就是Title（标题）和Description（描述、副标题），而能够为Title和Description提供...
h5中的结构元素header、nav、article、aside、section、footer介绍
09-13 2060
结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <header> <h1>网页主题</h1> &lt...
移动端重构系列3——整体布局
StarsInSun的专栏
07-23 780
移动端和pc端一样整体上布局也可以分为上中下三部分，如图： 一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。 fixed布局 常规的结构如下： ... 因为移动端单页面特性，所以每个page为一个页面，然后整体使用wrap-page包裹。考虑到可滚动的为page内容，所以我们得给wrap-page一个具体的高
HTML5/CSS3系列教程：HTML5基本标签使用header，nav和footer
GBin1.com
01-17 1783
日期：2013-1-15  来源：GBin1.com 大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{
web 网页设计规范介绍
xiaoweids的博客
06-05 2807
转自：微点阅读 https://www.weidianyuedu.com一、网页尺寸制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。但是并不代表我们可以在整个画布上作图。网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。1、左右布局灵活性强， UI的限制小，左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；右侧为内容版块范围，是网站内容的展示区域。2、居中布局中间的黄色部分为有效的显示局域，用于网站内容的展示；换句话说，两
《 HTML5 》— HTML入门详解+语法详解
69小石头的博客
03-05 3930
使用Dreamweaver CS6来创建一个HTML5页面。具体步骤如下： (1)打开Dreamweaver CS6，选择菜单栏中的“文件”→“新建”命令，弹出“新建文档”对话框，如图1-2所示。在“页面类型”列表中选择“HTML”选项，并在右下角的“文档类型”下拉菜单中选择“HTML5”。 (2)点击“创建”按钮，将会新建一个HTML5默认文档。切换到“代码”视图，这时在文档窗口中会出现Dr...
熟悉页面架构和布局，对Web标准和标签语义化有深入理解，到底应该说点啥
古语静水流深
02-20 6061
最近看到网上的很多公司要求面试者，熟悉页面架构和布局，对Web标准和标签语义化有深入理解，对这样的要求，很多面试者不知道，到底应该说些什么。其实这个问题对很多面试者，我觉得更多的是对于语言的表达。前提是，你要对这些最基础的计算机知识有一定的理解。说白了，就是对前端的基础知识要有。 1.Web标准 Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。对应的标准也分
一个简单的小项目博客园（4）个人博客页面结构，侧边栏筛选功能
番茄炒蛋君的博客
09-23 522
目录： url设计 个人博客视图函数 前端页面渲染 url设计 在urls.py中添加# 个人博客路由 url(r'^(?P<username>\w+)/(?P<condition>category|tag|archive)/(?P<param>.*)/', views.site), # 侧边栏筛选传递关键字参数至views.py url(r'^(?...
IP地址15.3.3.1与其子网掩码255.255.0.0进行“与”运算得出的网络地址是15.3.0.0
最新发布
06-12
IP地址15.3.3.1与子网掩码255.255.0.0进行“与”运算得出的网络地址是15.3.0.0，而不是15.3.3.0。这是因为子网掩码255.255.0.0表示该IP地址段的前两个数字是网络地址，后两个数字是主机地址。在这种情况下，15.3.3.1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值