项目八 Dreamweaver 用表格布局网页

中文版Dreamweaver 8基础与上机实训
使用间隔图像
间隔图像(也称为间隔GIF)是透明的图像，用来控制自动伸展表格中 的间距。间隔图像由一个单像素的透明 GIF 图像组成，向外伸展到指定 像素数的宽度。浏览器绘制的表格列不能窄于该列的单元格中所包含的 最宽图像，因此在表格列中放置间隔图像要求浏览器至少应该保持该列 与该图像一样的宽度。 当用户设置某列自动伸展时，Dreamweaver 8将自动添加间隔图像， 除非用户指定不使用任何间隔图像。此外，还可以在每个列中手动插入 和删除间隔图像。 要在布局模式中添加间隔图像，可在布局表格上单击标尺上的向下 箭头，从弹出的菜单中选择“添加间隔图像”命令。
中文版Dreamweaver 8基础与上机实训
8.2 设置布局单元格和表格的格式
在Dreamweaver 8中，可以使用属性检查器来改变布局模式中布局 单元格和布局表格的外观，如背景、元素对齐方式等。 设置布局单元格的格式 设置布局表格的格式 设置布局模式参数
中文版Dreamweaver 8基础与上机实训
中文版Dreamweaver 8基础与上机实训
8.3 表格布局综合实例
本节通过使用Dreamwerver 8的布局表格和布局单元格来创建一个 简单网页，通过该综合示例来复习布局模式的相关内容。
中文版Dreamweaver 8基础与上机实训
8.4 思考与练习
填空题
1.在Dreamweaver 8中，表格有3种使用模式，分别是 、 、 。 2.当在页面中创建布局单元格时，Dreamweaver 8会自动创建 局单元格增大时，会影响 ，原因是 。 ，用来放置布局单元格；布
中文版Dreamweaver 8基础与上机实训
设置布局宽度

8.单元格的拆分
• 方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择 “表格”→“拆分单元格”对话框,选择“行”或“列”,并 在下面文本框中输入具体的行数或列数,点击“确定”即可。
• 方法二:选中要拆分的目标单元格,在属性面板左下角选择 “拆分单元格为行或列”按钮,即可拆分所选单元格。
任务实施
• (7)在第六行第一个单元格中输入文本“获奖情况”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色为#FFFF99(黄色);相应的第二列单元格拆分为8行, 分别输入获奖情况的主要内容 。
• (8)在第七行至第九行的单元格中分别输入文本“爱好”、 “特长”、“性格特点”及其相应内容。选中第七行至第九 行的第一列单元格,设置居中显示,背景颜色设置为 #FFFF99(黄色) 。
页面的整体布局,创作出精美的网页。同时,表格也是 Dreamweaver CS5中常用的网页布局工具。 2.插入表格 • 单击“插入”→“表格”,在该对话框中,“行”、“列”和 “表格宽度”分别用于设置表格的行数、列数和宽度;“边框 精细”用于设置表格边框的宽度;“单元格边距”用于设置单 元格边框与单元格内容之间的距离;“单元格间距”用于设置 相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅 助功能”可以输入表格的标题,以及选择标题的对齐位置。 3.设置表格属性 • 选中已插入的表格,在“属性”面板中就会显示该表格的相关 属性。
• (1)新建一个空白文档,标题栏内输入“个人简历”,保存为 “index.html”。
• (2)选择“插入”→“表格”菜单项,打开表格对话框,行数设置为10, 列数设置为2,表格宽度设置为75%,点击“确定”。选中该表格,在 属性面板里设置对齐为居中对齐,边框为4,间距为2,背景颜色为 #FFFFCC(浅黄色),边框颜色为默认颜色 。

图 3-1-5 通过标签选取表格
（2）选取单元格 将鼠标指针移动到某个单元格上，按住 Ctrl 键不放，再单击，就可以选中这个单元格。 按住 Ctrl 键，再逐个单击要选取的单元格，就可以选中不连续的多个单元格。 通过鼠标拖动的方式可以选取连续的多个单元格。
（3）选取行或列 将鼠标指针移动到选取行的左边或者列的上面，光标变成箭头形状时单击鼠标左键就可以
z
：表格的对齐方式，可以将表格居左、居中或居右。
z
：代表表格边框的粗细，如果设“0”则代表没有边框，注意网页中表格的
内边框和外边框粗细是一样的。
z
：设置表格的背景颜色。
z
：设置表格边框的颜色。
z
：设置表格的背景图像，如果设置了背景图像，背景
颜色就失效。 z ：消除列的宽度设置。 z ：消除行的高度设置。 z ：将表格宽度的设置由百分比转换为像素。
z ：合并单元格（操作之前要先选择需要合并的单元格）。
z ：拆分单元格，拆分为多行或多列。
z
：单元格内部的水平对齐方式，作用与
类似。
z
：单元格内部的垂直对齐方式。
z
：设置单元格的背景图像。
z
：设置单元格的背景颜色。
z
：设置单元格的边框颜色。
3.1 表格布局技术章8章1章
表格的操作
（1）选取整个表格 在 Dreamweaver 8 中选取表格方法有很多种，最简单的就是将鼠标指针移动到表格的边框
选中一整行或整列。按住鼠标左键不放上下拖动还可以选取多行或多列。 错误！
提示 将光标移至单元格中，可用键盘上的方向键和 Tab 键在单元格之间移动，如果在表格 最后一个单元格按下 Tab 键，表格会自动添加一行。

2021/10/10
6
9.2 框架和框架集的基本操作
9.2.1 选择框架和框架集 1．在文档编辑窗口中选择
在文档编辑窗口中选择框架的方法为：按住【Alt】 键的同时在要选择的框架内单击，被选中的框架 边框变为虚线。 如要选择框架集，则单击该框架集上的任意边框 即可，选中的框架集所有边框都呈虚线显示。
2021/10/10
2
9.1.2 了解框架网页构造
下图所示网页至少由三个单独的网页文档组成：两 个框架区域中显示的两个页文档和把这两个文档 显示在一个界面上的框架集文档。在Dreamweaver 中设计使用框架的网页时，必须全部保存这三个文 件，框架网页才能在浏览器中正常显示。
2021/10/10
3
9.1.3 创建框架集
1．使用“新建文档”对话框创建
使用“新建文档”对话框创建框架集的方法同 创建普通页面的方法相似。
2021/10/10
4
2．使用“布局”插入栏创建
使用“布局”插入栏创建框架集就像插入表格 一样简单。
2021/10/10
5
3．手动创建
使用前面两种方法创建的都是Dreamweaver中预 定义的框架集，当这些框架集无法满足用户需求 时，可以在此基础上手动分割创建框架。
2021/10/10
7
2．在“框架”面板中选择
选择“窗口”>“框架”菜单，可打开“框架” 面板，该面板中显示了窗口中框架的结构，不同 的框架区域显示了框架的名称。
选择框架：在“框架”面板中单击需要选择的 框架即可将其选中，被选择的框架在“框架” 面板中以粗黑框显示。 选择框架集：在“框架”面板中单击框架集的 边框即可选择框架集。
2021/10/10