Dreamweaver网页制作LGY_CH08_CSS网页布局和XML基础研讨.ppt

第8章 CSS网页布局和XML基础 数学与计算机学院 第8章 CSS网页布局和XML基础 8.1 利用表格和CSS布局网页 8.2 DIV和CSS布局 8.3 XML基础 8.1 利用表格和CSS布局网页8.1.1 认识表格和CSS布局 传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格和CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制。 8.1.2 课堂实例——表格和CSS布局实例 1．创建CSS文件 2．创建网页文档 8.2 DIV和CSS布局8.2.1 理解CSS盒子模型 网页中的表格或者其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也都具备这些属性。 DIV＋CSS布局 上一节用表格＋CSS进行网页布局，虽然在某种程度上提高了网站开发和维护的效率，但是这种方法毕竟还是传统的网页布局技术，没有跳出表格布局的模式。如果网页布局比较复杂，那么必然会使用大小不一的表格和表格嵌套来定位排版网页内容。这时table 标签、tr标签、td标签交织在一起，它们之间的关系变得晦涩难懂。这样的网页代码结构给网站的开发和维护带来了不便。 利用DIV＋CSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以越来越受到网页开发者的欢迎。 在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图所示是一个网站首页的CSS盒子布局示意图。 从图可以看出，这个网页一共设计了7个盒子。最大的盒子是body{}，这是一个HTML元素，是HTML网页的主体标签。在body{}盒子中嵌套一个#container{}盒子（这里的#container是一个CSS样式定义，是一个标识选择符），可以称这个盒子为页面容器。在#container{}盒子中有嵌套3个盒子#header{}、#main{}、#bottom{}，这3个盒子分别是网页的头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#main{}盒子中嵌套两个盒子#left{}、#right{}，这是一个两栏的页面布局，这两个盒子分别用来容纳左栏和右栏的内容。 8.2.2 DIV标签的应用 DIV标签的应用 XHTML是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。 在网页文档中，利用DIV标签定义XHTML代码进行网页布局。在Dreamweaver中将“插入”工具栏切换到“布局”工具栏，可以看到一个“插入Div标签”按钮，如图所示。 8.2.3 课堂实例——DIV和CSS布局网站首页 1．实例效果 2．制作步骤 8.3 XML基础8.3.1 认识XML 1．什么是XML XML是一种元语言，它可以建造其它任意种类的标记语言。XML实现了W3C最初设定的所有目标，轻量级、易于理解、扩展性好、平台中立、兼顾文档和数据等。 2．XML的应用领域 3．XML基本语法 4．创建XML文档的基本准则 8.3.2 课堂实例 ――在Dreamweaver中设计XML网页 1．创建XML文档 2．用CSS显示XML文档 本章习题上机练习 练习1 利用表格和CSS布局网页 传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格和CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制。创建如下网页，命名为lianxi001.htm,利用表格和CSS布局。 练习2 利用DIV＋CSS布局网页 从图可以看出，这个网页一共设计了7个盒子。最大的盒子是body{}，这是一个HTML元素，是HTML网页的主体标签。在body{}盒子中有一个#main盒子，可以称这个盒子为页面容器。在#main{}盒子中有嵌套3个盒子#top{}、#mid{}、#end{}，这3个盒子分别是网页的头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#mid{}盒子中嵌套两个盒子#left{}、#right{}，这是一个两栏的页面布局，这两个盒子分别用来容纳左栏和右栏的内容。 本章结束！ * * 如图7-103所示是一个网站首页的CSS盒子布局规划。本实例将网页布局分成网页顶部（Logo、Ba