第四章 网页的布局本章导读本章任务知识细目4.1 表格的基本操作4.2 设置表格属性4.3 使用表格“布局”视图4.4 框架(集)的基本操作
4.5 设置框架(集)的属性4.6 AP Div的基本操作4.7 设置AP Div的属性4.8 AP Div在排版中的应用4.9
模板的建立4.10 模板的应用4.1 表格的基本操作选择不连续的多个单元格:按住Ctrl键单击要选择的单元格、行或列，再次单击取消
选择。（3）插入单行或单列·选中行或列，右单击，在弹出的快捷菜单中选择“表格→插入行”或“表格→插入列”命令。·单击某列的“列标题
”菜单，选择“左侧插入列”或“右侧插入列”。（4）插入多行或多列 选中行或列，右单击，在弹出的快捷菜单中选择“表格→插入行或
列”命令，弹出“插入行或列”对话框,如下图所示。设置要插入的行（列）数及位置，单击“确定”按钮。（5）删除行或列 选中要删除
的行或列，右单击在弹出的快捷菜单中选择“表格→删除行”或“表格→删除列”命令。（7）拆分单元格①将光标定位到要拆分的单元格中。②执
行下列操作之一，打开“拆分单元格”对话框。·选择“修改→表格→拆分单元格”命令。·按Ctrl+Alt+S快捷键。·单击属性面板上的
“拆分单元格”按钮。③设置要拆分的行数或列数，单击“确定”按钮。 （6）合并单元格①选择相邻的两个或两个以上的单元格 ②选择“修改
→表格→合并单元格”命令或按Ctrl+Alt+M快捷键或单击属性面板上的“合并单元格”按钮。 （8）创建嵌套表格 嵌套表格是
指在表格的单元格中插入新的表格。若要在表格单元格中插入嵌套表格，只需将光标定位到该单元格中，然后再插入表格即可。（9）使用“列标题
”菜单 当选定表格或表格中有插入点，默认情况下，DreamweaverCS3会显示表格宽度和每个表格列的列宽，宽度旁边是表格
标题菜单与列标题菜单的箭头，使用这些菜单可以快速选择与表格相关的常用命令。4.2 设置表格属性 单击表格外边框，选中整个表格
，打开“表格”属性面板。各选项的作用如下：·“表格Id”：表格的Id，用来输入表格的名字。·“行”和“列”：用来指定表格中行、列的
数目。·“宽”：以像素为单位或按百分比指定表格宽度。·“填充”：指单元格边距,即单元格内容与边框之间的距离。·“间距”：指单元格间
距，即相邻单元格之间的像素数。·“对齐”：用于设置表格相对于同一段落中其他元素的显示位置，包括“左对齐”、“右对齐”、“居中对齐”
和“默认”4个选项。·“边框”：指定表格边框的宽度，单位为像素。·“背景图像”：设置表格的背景图像。·“背景颜色”：设置表格的背景
颜色。·“清除列宽”按钮：从表格中删除所有明确指定的列宽。·“清除行高”按钮：从表格中删除所有明确指定的行高。·“将表格宽度转换成
像素”按钮：将表格中每列的宽度设置为以像素为单位的当前宽度，同时将整个表格的宽度设置为以像素为单位的当前宽度。·“将表格宽度转换成
百分比”按钮：将表格中每列的宽度设置为按百分比表示的宽度，同时将整个表格的宽度设置为按百分比表示的宽度。 选中单元格，打开“单
元格”属性面板。各选项的作用如下：·“合并单元格”按钮：将所选的单元格、行或列合并为一个单元格。只有当所选择的区域为矩形时才可以合
并这些单元格。·“拆分单元格”按钮：将一个单元格拆分成多个单元格。一次只能拆分一个单元格，如果选择的单元格多于一个，则此按钮禁用。
·“水平”和“垂直”列表框：设置单元格、行或列内容的水平对齐方式和垂直对齐方式。 ·“宽”和“高”：用来设置所选单元格的宽度和高度
。·“不换行”复选框：如果选中了该复选框，当单元格内的数据超过单元的宽度时，单元格会自动加宽来容纳所有数据；如果没有选中该复选框，
则当单元格内的数据超过单元格的宽度时，自动换行。·“标题”复选框：可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题
单元格的内容为粗体且居中。·“背景”和“背景颜色”：设置所选单元格、列或行的背景图像和背景颜色。·“边框”：设置单元格的边框颜色。
4.3 使用表格“布局”视图 在“布局”模式下，单击插入栏“布局”类别中的“绘制布局表格”按钮，在编辑窗口中拖动鼠标绘制表格
。·“宽”选项区域：包括“固定”和“自动伸展”两个单选按钮。·“背景颜色”：用来设置布局表格的背景颜色。·“填充”：用来设置各布局
单元格中插入对象距边线的距离。·“间距”：用来设置各布局单元格的间距。·“删除所有间隔图像”按钮：它在添加间隔图像后才会有效，单击
可删除所有的间隔图像。·“删除嵌套”按钮：单击可删除嵌套在布局表格内已选中的布局表格。选中布局表格后，打开“布局表格”属性面板。选
中布局单元格后，打开“布局单元格”属性面板。 ·“水平”下拉列表框：用来设置布局单元格内对象在水平方向的对齐方式，包括“默认”、“
左对齐”、“居中对齐”和“右对齐”4个选项。·“垂直”下拉列表框：用来设置布局单元格内对象在垂直方向的对齐方式，包括“默认”、“顶
端”、“中间”、“底部”和“基线”5个选项。·“不换行”复选框：选中该复选框后，可以取消外框线。 “布局”模式中的表格列可以
具有固定的宽度，或者其宽度可以自动扩展以尽可能大的填充浏览器窗口（自动伸展）。 自动伸展列：根据浏览器窗口的宽度自动进行调整
。 间隔图像（也叫做间隔 GIF）是透明的图像，用来控制自动伸展表格中的间距。 当设置某列自动伸展时，Dreamwea
ver 将自动添加间隔图像，除非指定不使用任何间隔图像，也可以在每个列中手动插入和删除间隔图像。 在“布局”模式下，单击单元
格宽度右边的箭头，打开单元格菜单，可以进行间隔图像的添加或删除，设置列宽为固定或自动伸展。 4.4 框架(集)的基本操作（1）在框
架中新建网页文件 将光标定位到框架中，此时可以添加文本、图像、表格等页面元素，即创建一个新的网页文件。（2）在框架中插入原有
网页文件①按下Alt键，单击一个框架的内部选中该框架，单击属性面板 “源文件”后的“浏览文件”按钮，打开“选择HTML文件”对话框
。②选择要插入的网页文件，单击“确定”按钮。 选择“窗口→框架”命令，在面板组中打开“框架”面板，如下图所示。 Alt+“←
或→”键 选择下一个框架(集)Alt+“↑”键 选择父框架集Alt+“↓”键 选择子框架（集）（3）选择不同的框架或框架
集（1）保存框架集 在“框架”面板或“文档”窗口中选择框架集，选择“文件→框架集另存为”或“文件→保存框架页”命令。（2）保存
框架 将光标定位到要保存的框架中，单击“文件→保存框架”命令，输入网页文件名，单击“保存”按钮。（3）同时保存框架集和框架
选择“文件→保存全部”命令，打开“另存为”对话框依次保存框架集和所有尚未保存过的框架。（1）在框架集中增加新框架 将鼠
标指针移到框架四周的边缘或顶角处，鼠标呈双向箭头时，拖动鼠标在相应方向上增加新框架，如下图所示。（2）调整框架的大小 拖动框
架边线，即可调整框架的大小。（3）拆分框架 选中要拆分的框架，在按下Alt键的同时用鼠标拖动边框拆分框架。（4）删除框架
用鼠标拖动框架边框到相邻边框，即可删除相应框架。4.5设置框架(集)的属性 选择框架集后，打开“框架集”属性面板，如下图所示。
在“框架”面板中，单击某框架的内部即可选中该框架，打开“框架”属性面板，如下图所示。 （1）优点访问者的浏览器不需要为每
个页面重新加载与导航相关的图形。 每个框架都可以有自己的滚动条，访问者可独立滚动这些框架。4.6 AP Div的基本操作 选
择“编辑→首选参数”命令，打开“首选参数”对话框，如下图所示，在“分类”列表中选择“AP元素”，在右边设置AP Div的默认属性值
。4.7 设置AP Div的属性选中AP Div后，显示AP Div的属性面板。 4.8 AP Div在排版中的应用 选择“
窗口→AP元素”命令或按F2键均可打开“AP元素”面板。（1）AP Div转换为表格 选择“修改→转换→将AP Div转换为
表格”命令，弹出“将AP Div转换为表格”对话框，设置后，单击“确定”按钮。（2）表格转换为AP Div 选择“修改→转换
→将表格转换为AP Div”命令，弹出“将表格转换为AP Div”对话框，设置后，单击“确定”按钮。4.9 模板的建立 创建
模板的方法有两种，一是将原有页面转存为模板文件，另一种是新建一个模板文件。（1）新建一个模板文件 选择“文件→新建文档”命令
，打开“新建文档”对话框，依次选择“空白页→HTML模板”，单击“创建”按钮。（1）在模板文档中，选择要设置为可编辑区域的文本或内
容，或将光标定位到要插入可编辑区域的地方。（2）按Ctrl+Alt+V快捷键或选择“插入记录→模板对象→可编辑区域”命令，打开“新
建可编辑区域”对话框，如下图所示。（3）在“名称”文本框中为该区域输入唯一的名称，单击“确定”按钮，即可完成可编辑区域的创建。
模板被创建后，所有的区域为锁定区域，若要使用模板创建网页，必须设置可编辑区域。4.10 模板的应用 方法1：选择“文件→新
建”命令，打开“新建文档”对话框，单击 “模板中的页”选项，在“站点”列表中选择站点，在“模板”列表中选择相应的模板，单击“创建”
按钮，即可使用该模板创建一个网页文件。（1）打开要应用模板的文档，选择“修改→模板→应用模板到页”命令，弹出“选择模板”对话框。（
2）从模板列表中选择一个模板，单击“选定”按钮，弹出“不一致的区域名称”对话，如下图所示。（3）选择“Document body<
未解析>”，在“将内容移到新区域”列表中选择要移动到的可编辑区域名称，选择“Document head<未解析>”，在“将内容移到
新区域”列表中选择“head”,单击“确定”按钮。 2.收集第29届北京奥运会中你认为最经典的一张图片，并附简单说明，使用实训12中的模板文档muban.dwt创建网页文件lx3.html，保存到D：\aoyun文件夹中，收集的资料添加到可编辑区域。上机实训1.在D:\shixun文件夹中创建网页lx1.html，利用AP Div的可重叠性，制作阴影文字，如图4-124所示 3.在D:\shixun文件夹中创建一个“顶部框架”的框架集网页lx2.html，上部框架页命名为dh.html，在其中添加“华信教育资源网”、“中关村在线”和“华军软件园”三个网站的导航链接。单击导航链接文本时，下方框架显示相应网站。 |
|
