特别致谢 ![]() 本教程选自清华大学出版社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标签”对话框 |