1.5 CSS布局的基本思路(2)


1.5 CSS布局的基本思路(2)


CSS禅意花园帮助我们最终认识到CSS的强大力量。若是网页设计师正被一个布局问题所困扰,去那儿获取灵感是个不错的选择,同时你也可以利用这个平台展示个人的天赋,以CSS会友。


当然,你还应该知道,网页不仅仅只为电脑屏幕显示,标准网页能够适应不同的显示设备,如PDA(掌上屏幕设备,如手机)、触摸屏、电视、打印机等。用Photoshop精心设计的网页图像不可能同时显示在PDA、触摸屏、电视、打印机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,会显示在任何地方,以及任何网络设备上。


在CSS布局中,结构和语义具有相同的内涵,它意味着网页设计师首先必须清楚自己设计的页面要显示的信息,并根据这些信息把一个网页分成不同的内容块,以及每块内容的目的,然后再根据这些内容的目的用不同语义元素建立相应的HTML结构。例如,假设我们正要设计的页面模块包括:


Logo(站点名称或标志)


Banner(广告条)


导航条(主菜单)


子菜单


搜索框


功能面板(如调查表、公告牌)


页脚(网页版权信息)


主页面内容


然后,使用div元素来将这些结构定义出来,例如:





<!--[结构化网页模块]-->
<div id="header"></div>
<div id="globalnav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="board"></div>
<div id="footer"></div>
<div id="content"></div>

上面HTML代码不是布局,而是页面结构。这是一个对内容块的语义说明。当理解了这些结构,就可以在div上定义对应的id属性。div元素可以包含任何内容块,也可以嵌套另一个div。内容块可以包含任意的HTML元素,如标题元素(h1~h6)、段落元素(p)、图片元素(img)、表格元素(table)、列表元素(ul、ol或dl)等。


好了,清楚了HTML的结构,现在就可以进行布局了,即定义CSS样式。CSS样式可以包括指定每个内容块应显示在页面上什么地方,定义内容块显示的背景颜色、字体、边框以及对齐属性等。


实际上结构化的HTML页面是非常简单的,每一个元素都被用于结构目的。当想缩进一个段落,就不需要使用<blockquote>标签,只要使用<p>标签,并给<p>加一个CSS的margin属性就可以实现缩进目的。其中p是结构化标签,而margin是表现的属性,前者属于HTML,后者属于CSS。这样就实现了网页结构与内容表现的分离。


良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,<table width="100%" cellpadding="2" border="2" align="center">代码现在就可以在HTML中简写为<table>,所有网页信息的控制与表现都在CSS中实现。在结构化的HTML中,table就是数据结构的表格,而不是被用来布局和定位的。


上面的设计思路只是最简单的HTML框架结构,实际应用中,会根据需要来调整内容块,而且常会出现结构层叠嵌套的情况,例如:





<!--[结构层叠嵌套]-->
<div id="navcontainer"><!-- 一级结构,导航外套 -->
<div id="globalnav"><!-- 二级结构,导航内套 -->
<ul><!-- 三级结构,导航列表 -->
<li></li><!-- 四级结构,导航列表项 -->
<li></li><!-- 四级结构,导航列表项 -->
<li></li><!-- 四级结构,导航列表项 -->
</ul>
</div>
<div id="content"><!-- 二级结构,内容内套 -->
<table><!-- 三级结构,数据表格 -->
<tr><!-- 四级结构,数据行 -->
<td></td><!-- 五级结构,数据单元格 -->
<td></td><!-- 五级结构,数据单元格 -->
</tr>
<tr><!-- 四级结构,数据行 -->
<td></td><!-- 五级结构,数据单元格 -->
<td></td><!-- 五级结构,数据单元格 -->
</tr>
</table>
</div>
</div>
更详细的说明和应用我们在后面章节中会逐步展开。




标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2