第4章 DIV和页面布局技术

第4章页面布局

目标 了解层的概念及应用 熟练使用<DIV>标签 掌握表格布局技术及优缺点

掌握框架布局及其优缺点 熟练使用Dreamweaver来创建框架 熟练使用Dreamweaver设置框架属性并保存框架

掌握DIV+CSS布局技术

-2-

页面布局页面布局，就是将网页中的各个版 块有效组织并放置在合适的位置。

页面布局一般分为以下几种 ： 表格布局 框架布局 DIV+CSS布局

表格布局和DIV+CSS布局 是目前最常用的布局方式

-3-

表格布局 表格布局 表格在网页中更多的是用于网页的布局，其优势在于可以有效地定位网 页中不同的元素，结构清晰。 Dreamweaver8提供了“布局”模式。在“布局”模式中，可以使用表 格作为基础布局结构来设计网页。

表格布局有以下原则 ： 不要把整个网页当成一个大表格，尽可能使用多个表格进行分块。 使用嵌套表格。 表格的边框设置。

表格布局步骤：1. 2. 3. 4. 5. 使用布局视图； 绘制布局表格 ； 绘制布局单元格； 设置单元格属性； 预览网页。

示例：4.D.2 通过Dreamweaver8演示表格布局的实现过程-4-

框架布局 框架布局 框架是另一种常用的网页布局排版工具。 框架结构就是把浏览器窗口划分为多个区域，每个区域都可以 分别显示不同的网页。 使用框架最常见的用途就是导航，在使用了框架以后，用户的 浏览器不需要为每个页面重新加载与导航相关的图。

框架布局步骤：1. 2. 3. 4. 5. 建立框架； 设置框架模板； 设置框架的属性； 保存框架； 设置嵌套框架属性。

示例：4.D.3 通过Dreamweaver8演示框架布局的实现过程-5-

DIV+CSS布局 DIV+CSS布局 一个完整的网页通常包含以下几个部分：标志和站点名称、主 页面内容、站点导航、子菜单、搜索区域、功能区、页脚(版 权和法律声明) ,如下图：banner Head globallink left Container Main middle right Footer

示例：4.D.4 演示DIV+CSS布局的实现过程

-6-

CSS盒模式 p+css布局通过由CSS定义的大小不一的盒子和盒子嵌 套来编排网页。 CSS定义的盒子由内容、填充(padding)、边框(border) 和 外边距(margin)组成。 背景应用于由内容和填充、边框组成的区域。 css样式中width和height所定义的宽度和高度仅仅是内容 部分的宽度和高度。 整个盒模型在页面中所占的宽度是由左边界+左边框+左填 充+内容+右填充+右边框+右边界组成。 填充、边框和外边距都是可选的；内边距、边框和外边距 可以应用于一个元素的所有边，也可以应用于单独的边。

-7-

CSS盒模式示意图

-8-

-9-

float浮动属性 float属性可以

使元素脱离原始的文档流，使其浮 动于原始的文档流之上。 浮动元素会向左或向右靠在包含该元素的容器一 边。 浮动元素不再占用原来的位置，因此位于文档流 中的其他元素(未被设置为浮动的元素)会填补 该元素原来的位置。

-10-

clear属性 clear 属性元素清除周围的浮动元素。 值 left right both none 描述 清除元素周围向左浮动的元素 清除元素周围向右浮动的元素 同时清除元素周围向左和向右浮动 的元素 默认值，不清除浮动元素

-11-

DIV+CSS布局 DIV+CSS布局 使用DIV+CSS布局，可先不考虑外观，首先需要将 页面内容的语义或结构确定下来。 使用DIV+CSS布局，外观不是最重要的，一个结构 良好的HTML页面可以通过CSS以任意外观表现出来。

引入CSS布局的目的就是为了实现真正意义上的结构 和外观的分离，这也是DIV+CSS布局最大的特色。

-12-

小结 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素 <p>标签可用于定义HTML文档中的分区或节，将HTML文档划分为独立的、不同的部分 布局一般分为表格布局、框架布局和DIV+CSS布局模式 在Dreamweaver8中提供了3种布局视图：标准、布局和扩展 表格布局的优点是：布局容易、快捷而且兼容性好 表格布局的缺点是：改动不方便，彼此之间容易受影响，一旦需要调整工作量会很大 框架由框架和框架集两部分组成 框架是一种常用的网页布局排版工具。框架结构就是把浏览器窗口划分为多个区域，每个区域都可 以分别显示不同的网页 Web网页标准构成包括结构、外观和行为三部分

用CSS布局外观不是最重要的，一个结构良好的HTML页面可以通过CSS以任何外观表现出来DIV布局的优点是：网页代码精简、提高页面下载速度、表现和内容相分离等；缺点则是：过于灵 活，比较难控制

-13-

谢 谢！