3章网页的排版和布局.pptVIP

第3章 网页的排版和布局 本章学习目标 通过学习表格、框架和层等方面的知识，掌握网页的排版和布局。表格通常用于以行列形式来组织文字、图像、数字等数据，方便用户浏览。为了简化使用表格进行页面布局的过程，Macromedia Dreamweaver MX 2004还提供了“布局”模式。在“布局”模式中，可以使用布局表格和布局单元格来设计网页。框架和层也是网页布局的工具。 3.1 页面布局概述 所谓“网页布局”，就是给将要出现在网页中的所有元素进行定位。 网页的具体布局还与网页内容、网页风格、网页大小等因素有关。 3.2 表格的应用 3．2．1 标准模式、扩展模式和布局模式 “标准模式”是基本按浏览器预览结果来显示网页 “扩展模式”下，表格被强制以双线形式显示，方便了对表格的操作 “布局模式”中，可以在添加内容前使用布局单元格和表格来对页面进行布局 3.2 表格的应用 3．2．2 新建表格 1．插入表格(新建表格) 2．插入嵌入表格,即在一个已有的单元格中再插入另外一个表格 （1）如果一个单元格中的元素（如文字、数字、图像等）比较多，为了很好安排这些元素位置，可以在该单元格中再插入一个单元格。 （2）把表格用于网页布局的情况下，每个单元格都有可能安排多个元素，使用嵌入表格能使得这些元素排列整齐。 3.2 表格的应用 3）把表格用于网页布局的情况下，在一个单元格需要用表格来组织数据。 3．导入表格式数据 注意:当导出表格时，将导出整个表格，不能选择导出部分表格。 4．表格的HTML语言表达 表格的标签：table 表格行：tr 表格列：td 3.2 表格的应用 3．2．3 表格结构的修改 1．选择表格元素 （1）在首选参数中更改高亮颜色 （2）选取表格 （3）选择行或列 （4）选择单元格 2．添加表格的行或列 3．删除表格的行或列 4．拆分和合并单元格 3.2 表格的应用 5．复制和粘贴单元格 （1）选择要粘贴单元格的位置 （2）选择“编辑”/“粘贴” 3．2．4 设置表格属性 3.2 表格的应用 3．2．5 设置单元格、行和列属性 水平 垂直 宽和高 背景 背景颜色 边框 合并单元格按钮 拆分单元格按钮 不换行按钮 标题 3.2 表格的应用 3．2．6 表格用于布局 3.3 布局表格的应用 3．3．1 绘制布局表格和布局单元格 1．绘制布局表格 ① 把表格视图切换到“布局”模式中 ② 在“插入”栏的“布局”类别中，单击“绘制布局表格”按钮，或单击“插入”/“布局对象”/“布局表格” 2．绘制布局单元格 ① 把表格视图切换到“布局”模式中 ② 在“插入”栏的“布局”类别中，单击“绘制布局单元格”按钮，或单击“插入”/“布局对象”/“布局单元格” 3.3 布局表格的应用 3．布局单元格与布局表格的区别 布局表格仅仅用于对网页进行布局,布局表格只是布局单元格的容器 网页的内容是添加在布局单元格中 4．将内容添加到布局单元格中 将文本添加到布局单元格 将图像添加到布局单元格中 3．3．2 使用辅助设计手段 1．显示标尺 2．显示和编辑网格 3．跟踪图像 3.3 布局表格的应用 所谓“跟踪图像”是在设计网页之前Dreamweaver导入的草图。它的作用就相当于红本上的文字。设计者可以根据草图的设计进行布局，如下图所示。  3.3 布局表格的应用 跟踪图像与背景图像的区别 : 在 Dreamweaver中只显示跟踪图像，页面的实际背景图像和颜色在“文档”窗口中是不可见的 ; 在浏览器中查看页面时，背景图像和颜色是可见的，跟踪图像不会被用户下载，所以是不可见的。 3．3．3 调整布局表格和布局单元格 1．调整和移动布局单元格 （1）调整布局单元格的大小以及移动它们 （2）若要移动布局单元格，可执行以下操作： 2．调整和移动布局表格 3.3 布局表格的应用 3．3．4 设置布局单元格和表格的格式 （1）设置布局单元格属性 3.3 布局表格的应用 （2）设置布局表格属性 3.3 布局表格的应用 3．3．5 设置列宽 （1）列自动伸展 （2）将某个列设置为固定宽度 （3）列自动伸展的应用 3．4 建立框架网页 框架集结构图 3．4 建立框架网页 3．4．1 使用框架的优、缺点 优点： （1）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 （2）每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。 （3）各个页面之间的逻辑关系可以很好的表示出来。 缺点： （1）可能难以实现不同框架中各元素的精确图形对齐。 （2）有些浏览器可能不支持框架。 3．4 建立框架网页 3．4．2 创建框架和框架集 1．选择预定义