DIVCSS在计算机网页设计中的运用.docxVIP

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（ cascading style sheet），层叠样式表，是用于控制 网页样式并允许将样式信息与网页分离的一种标识性语言。 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 部分文档代码如下：