网页设计技术有哪些【基于DIV+CSS的网页设计技术】
摘要：本文首先介绍了DIV和CSS技术的特点，然后对CSS盒子模型进行了分析，最后通过具体的实例讲解了DIV+CSS网页布局技术的方法和实现流程，实例表明，该技术具有代码简洁、表现和内容相分离等优势。
关键词：DIV CSS 网页设计
0 引言
HTML[1](HyperText Mark-up Language)，即超文本标记语言，是当前网络上应用最为广泛的语言，也是组成网页文档的基本语言。HTML主要包括头部（Head）、主体（Body）两大部分，头部是描述浏览器所需要的信息，主体则包含所要说明的具体内容。在一般网页设计中，我们需要设计的内容就体现在主体中。
DIV元素是用来为HTML文档内大块的内容提供布局的结构和背景。它是HTML中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。一般我们也叫为DIV层定位。CSS(cascading style sheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS 是 1996由W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使 HTML语言更好的适应页面的美工设计。它以 HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA 等）来设置不同的样式风格。CSS的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。
1 CSS盒子模型[2]
盒子模型是CSS控制页面时一个很重要的概念，只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。
所有页面中的元素都可以看成是盒子，占据着一定的页面空间，一般说来这些被占据的空间往往要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间的相互关系。
在CSS中，一个独立的盒子模型由 cotent内容，border 边框，padding内边距和margin外边距4 个部分组成。如图1所示。
图1 盒子模型
一个盒子实际所占有的宽度或高度是由内容+内边距+边框+外边框组成的。在css中，可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定 4 条边各自的 boder、padding 与margin。因此只要利用好这些属性就很够实现各种各样的排版效果。
2 DIV+CSS的基本设计
若采取DIV和CSS的网页布局结构，首先需要用DIV来分块，定义语义结构；然后用CSS来定位和添加样式，如浮动、位置、对齐属性、加入背景等；最后在这个CSS定义的各个块中添加相应的样式，如文字、图片等。下面通过最常用的三栏式自适应宽度布局实例介绍使用DIV+CSS布局网页的基本方法。
用标记把网页区分成不同的区块,包括header、content（其中有sidebar边栏区域和main主体区域）、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML文档代码如下：
头部
边栏
主要内容
版权
var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-22575914-1"]);_gaq.push(["_setDomainName", ".省略"]);_gaq.push(["_trackPageview"]);(function () {var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;ga.src = ("https:" == document.location.protocol ? "https://ssl" : "https://www") + ".省略/ga.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.省略";var _siteid =691;var _istoken = 1;var _model = "Model01"; WebPageSpeed =359; UrchinTrack();
设置其CSS样式文件代码如下：
#container{margin:0 auto;width:90%;}
#header{height:200px;margin-top:20px;border:2px solid;}
#content{height:500px;width:100%;margin-bottom:10px;}
#sidebar{float:right;width:30%;height:500px;border:1px solid;}
#main{float:left;width:70%;height:400px;border:2px solid;}
#footer{height:60px;border:1px solid;}
其中，width属性设置为百分比形式，表示当窗口大小发生变化时，页面的宽度也随之变化。container的margin属性为0 auto，表示上下边距为0像素，auto表示左右边距为自动，实现网页的居中显示。sidebar的float属性为right，标识靠右对齐，main的float属性为left，表示靠左对齐，实现中间两列竖栏的显示效果。border属性为2px solid，表示2个像素宽的实线边框。
3 总结
基于DIV+CSS方法实现了网页的布局定位，具有表现和内容相分离等优势，已经成为一种网页设计的趋势和标准。通过对DIV和CSS技术的研究，介绍网页布局应用实例和使用该技术布局网页的方法和流程。在实际操作过程中还须要根据不同的风格和内容灵活应用各布局元素及CSS样式。
本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文