DIV+CSS网页布局的设计.doc

DIV+CSS网页布局的设计传统布局的方法主要包含框架布局和表格布局。利用框架布局时，样式死板，多个网页容易混淆不清；利用表格布局虽然快捷方便，但出于对版式的要求，一般需要插入许多的表格，甚至有时还要对表格进行多层嵌套，这不仅延长了页面打开的时间，而且降低了网页中代码的可读性。而目前广泛流行的DIV+CSS布局方式使网页结构和外观相分离，不但极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV+ CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补。 一、DIV+CSS网页布局概述 DIV即指区块，DIV一般用于定义HTML网页上的区块，是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的。DIV的作用就是把内容标识在一个区域内。其中所包含元素的特性均由CSS样式来完成。 CSS是Cascading Style Sheets的缩写。也称为层叠样式表.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。只需制定定义样式的CSS文件，同时让所有的HTML文件调用已经定义的样式，当需要更改HTML文件中任何部分的风格时，只需要将CSS文件打开进行样式的更改就可以了，即可使相同的HTML内容显现出不同的形式，这样使网站更新与维护变得更为简易。 2DIV+CSS网页布局优点： （1）维持网站风格和视觉的一致性。使用DIV + CSS技术可以让页面变得更加灵敏，并且不同的浏览器可以达到一致的显示效果。即CSS代码和HTML代码相分离，CSS可以把样式的部分单独的置于独立的样式文件中，而在HTML的文件中只放置网页需要显示的内容，而网页的内容表现的形式则可以完全通过CSS文件来实现，消除了大量的冗余代码，解决页面表现和结构混合在一起的问题。 （2）改版方便，不需改动页面内容，只需改动样式即可实现不同外观，用户还可以用过样式选择定制自己的表现界面，人性化的同时提高了用户体验的快乐。 （3）更容易被搜索引擎搜索到。目前的搜索引擎只是对页面的代码进行分析，因此页面代码更小而且有语意页面，搜索引擎的效能会更高，用户的文字信息会更容易被搜索引擎进行收集，对于web 网站来说被将会更容易被搜索引擎所引用。 二、DIV+CSS网页布局设置 在网页布局时往往使用表格或CSS将大块的内容放进网页的不同区域中。有了CSS最常组织内容的元素就是标签。首先使用将页面整体划分为几个板块，然后对各个板块进行CSS定位，最后在各个板块中添加相应的内容。 （1）将页面用DIV分块 首先将整个页面分成模块，搞清各个模块之间的父子关系。以最简单的框架为例，页面由banner、主体内容content、菜单导航links和脚注foot几个部分组成，各部分用自己的id来标识，如图1所示。 （2）确定各个模块的位置 页面中的内容已经确定后，可以设计整体的页面布局类型。图2是一个较为简单的页面框架container，banner位于整体框架的最上方，content与links位于页面的中部，其中content占页面的大部分，最下方是页面的脚注foot。 （3）使用CSS定位各个模块 可以使用CSS对页面中的各个板块进行定位，实现对页面的整体规则，然后再往各个板块中添加内容。尤其需要注意中间的两个模块content与links的布局，将content移动到页面的左侧，links移动到右侧，分别设置它们的浮动属性，并设置了这两个板块的宽度和高度，如图2所示。 由于content和links对象都设置了浮动属性，因此footer需要设置clear属性，使其不浮动的影响，代码如下： 三、结束语 运用DIV+ CSS 的网页设计的流程与方法，真正做到了行为、表现和结构的分离，提高页面加载的速度与网页开发的效率，对网站更新和维护的效率也有很大的提升。传统的表格布局模式正在被基于DIV+ CSS的网页设计方式逐渐取代， DIV+ CSS 的网页布局方式正成为WEB开发的方向。