计算机网页div怎么划分,DIVCSS在计算机网页设计中运用.docx

精品文档

精品文档

PAGE

PAGE3

精品文档

PAGE

DIV+CSS在计算机网页设计中的运用

【纲要】互联网发展至今，网络已经成为人们生活的重要部分，各色网站层见迭出，众多网页平分秋色。本文从计算机网页设计中的布局下手，剖析了传统网页布局的局

限性，介绍了计算机网页中典型的“DIV+CSS”布局方式。经过对DIV和CSS技术的研究，介绍了DIV+CSS布局方法及其优势，为计算机网页设计提供思路。

【重点词】DIV；CSS；计算机网页；布局一、序言

传统的计算机网页布局的方法主要有框架布局和表格

布局。框架布局比较灵活，若有效运用，则能使网页更整洁、清晰。可是，关于内容多、布局复杂的网站，不宜采用框架

布局，因为，过多的框架会影响网页下载所需的时间，影响网页的读取速度，而且浏览器对框架构造的兼容性也不是很好。

表格是计算机网页设计制作中的一个重要网页元素，用

来对网页进行排版，使页面的信息布局合理、简短。可是表

格排版也存在以下的问题：

1.用表格排版的页面很难再改正或升级。当页面制作完

成后，如果要将其中的某些位置对换，那么表格排版的工作

量相当于从头制作一个页面。而CSS排版利用position和float

属性能够轻松地移动和从头定位各个块，实现让用户动向选

择界面的功能。2.用表格排版的页面在下载时必须等整个表格的内容都

下载完成后才会一次性显示出来，而利用DIV+CSS排版的页

面在下载时，各个子块能够分别下载显示，进而提高了页面

的下载速度。

3.复杂的表格设计使得设计极为不易，改正更为复杂，

最后生成的网页代码除了表格本身的代码，还有很多没有任

何意义的图像占位符及其他元素，文件量庞大，最终致使浏

览器下载及解析速度变慢，网站的维护和更新困难。

二、DIV和CSS的详细内容

DIV元素是用来为HTML文档内大块的内容提供布局的

构造和背景。它是HTML中的一个标签，此标签的作用就是

定位网页内容中的图片、文字、视频等有关信息。一般我们

也叫为DIV层定位。

CSS(cascadingstylesheet)，层叠样式表，是用于控制

网页样式并允许将样式信息与网页分别的一种表记性语言。

CSS是1996由W3C审核经过，并且介绍使用的。CSS的引入就是为了使HTML语言更好的适应页面的美工设计。它以

HTML语言为基础，提供了丰富的格式化功能，如字体、颜

色、背景和整体排版等，并且网页设计者能够针对各样可视

化浏览器(包括显示器、打印机、打字机、投影仪和PDA等)

来设置不同的样式风格。CSS的引入引发了网页设计一个又

一个的新热潮。使用CSS设计的优异页面层见迭出。

DIV+CSS布局方式使网页构造和外观相分别，极大地简化了代码，而且使站点加载的速度变得快捷、维护也更为方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV+CSS布局方式的使用，使传统的网页布局的不足得到很好的填补，目前国内多半比较著名的网站都利用此类方式方法进布局，给用户带来了全新的体验模式。

三、DIV+CSS设计计算机网页布局

采取DIV和CSS的网页布局构造，首先需要用DIV来分

块，定义语义构造；然后用CSS来定位和增添样式，如浮动、

位置、对齐属性、加入背景等；最后在这个CSS定义的各个

块中增添相应的样式，如文字、图片等。下面经过一个布局实例介绍使用DIV+CSS布局网页的基本方法。

首先，把网页划分红不同的三个区块，包括header、

content(其中有main主体地区，并将main主体部分分为两个地区lside和rside)、footer三个地区，分别作为网页的头部、内容和版权地区。编写HTML部分文档代码如下：