特别致谢  本教程由课件吧(http://www.cai8.net)开发，并由本书作者寒蓝老师提供在“闪客起航”开设专栏进行在线学习，以帮助大家快速掌握CSS的知识。本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用，深受广大读者的欢迎，目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。 朋友们可以在全国各新华书店购买此书，或者在当当网、互动出版网邮购此书。 第九课 DIV＋CSS布局上一节用表格＋CSS进行网页布局，虽然在某种程度上提高了网站开发和维护的效率，但是这种方法毕竟还是传统的网页布局技术，没有跳出表格布局的模式。如果网页布局比较复杂，那么必然会使用大小不一的表格和表格嵌套来定位排版网页内容。这时<table> 标签、<tr>标签、<td>标签交织在一起，它们之间的关系变得晦涩难懂。这样的网页代码结构给网站的开发和维护带来了不便。 利用DIV＋CSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以越来越受到网页开发者的欢迎。 9.1 理解CSS盒子模型网页中的表格或者其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也都具备这些属性。如图9-1所示是一个CSS盒子的示意图。
图9-1 一个CSS盒子 在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图9-2所示是一个网站首页的CSS盒子布局示意图。
图9-2 CSS布局示意图 从图9-2可以看出，这个网页一共设计了7个盒子。最大的盒子是body{}，这是一个HTML元素，是HTML网页的主体标签。在body{}盒子中嵌套一个#container{}盒子（这里的#container是一个CSS样式定义，是一个标识选择符），可以称这个盒子为页面容器。在#container{}盒子中有嵌套3个盒子#header{}、#main{}、#bottom{}，这3个盒子分别是网页的头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#main{}盒子中嵌套两个盒子#left{}、#right{}，这是一个两栏的页面布局，这两个盒子分别用来容纳左栏和右栏的内容。 9.2 DIV标签的应用XHTML是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。 在网页文档中，利用DIV标签定义XHTML代码进行网页布局。在Dreamweaver中将“插入”工具栏切换到“布局”工具栏，可以看到一个“插入Div标签”按钮，如图9-3所示。
图9-3 “插入Div标签”按钮 下面利用DIV＋CSS具体创建一个盒子。 （1）新建一个网页文档，切换到“代码”视图下。可以看到<head>标签前的几行代码是用来定义网页文档XHTML类型的。当我们使用DIV＋CSS布局页面时，这几行代码是不能缺少的。如图9-4所示。
图9-4 新建网页文档的代码视图 （2）将光标定位在<body>标签下面一行，单击“布局”工具栏上的“插入Div标签”按钮
图9-5 “插入Div标签”对话框 |
