网页制作4

第三章Dreamweaver网页设计
实验3.4 模板的使用
【相关知识】
1. 模板是一种特殊的文档。

可以按照模板创建新的网页。

模板可以反复使用，减少了一些重复的工作，
大大提高了网页制作的效率。

而且使网页具有统一的风格。

2. 模板中应包含一个或多个可编辑区域。

使用模板创建网页后，模板部分不能编辑，只能在可编辑区域
中添加网页元素。

一、实验目的和要求
1. 掌握创建模板的方法。

2. 掌握使用模板创建新文档的方法。

3. 掌握在现有文档上应用模板的方法。

二、实验步骤
1. 创建新模板
（1）单击【文件】→【新建】菜单命令，打开【新建文档】对话框。

切换到【常规】选项卡下。

（2）在【类别】列表框中选择“模板页”；在【基本页】列表框中选择“HTML模板”。

（3）单击【创建】按钮，新建一个模板。

2. 编辑模板
（1）单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。

设置【行数】为“1”；【列数】为“1”；【表格宽度】为“700像素”。

单击【确定】按钮，在网页上插入一个表格。

（2）选中表格，在属性面板中设置【背景颜色】为“#00CCFF”；在【对齐】下拉列表中选择“居中对齐”。

（3）将光标放在网页上要插入可编辑区域的位置上。

单击【插入】→【模板对象】→【可编辑区域】菜单命令，打开【新建可编辑区域】对话框。

在【名称】文本框中输入可编辑区域的名称为“EditRegion1”。

单击【确定】按钮，在网页上插入一个可编辑区域。

（4）单击【标准工具栏】上的【保存】按钮，打开【另存为模板】对话框。

在【站点】下拉列表中选择站点名称；在【另存为】文本框中输入模板的名称为“master”。

单击【确定】按钮，保存模板。

3. 使用模板创建新文档
（1）单击【文件】→【新建】菜单命令，切换到【模板】选项卡下。

打开【从模板新建】对话框。

（2）在【模板用于】列表中选择包含模板的站点；在【站点】列表中选择站点中的模板文件。

如果选中【当模板改变时更新页面】复选项，则保存修改后的模板时，将自动提示更新使用该模板创建的页面。

（3）单击【创建】按钮，创建一个基于模板的新文档。

4. 在现有文档上应用模板
打开要应用模板的已有文档。

执行以下操作之一：
单击【修改】→【模板】→【套用模板到页】菜单命令，打开【选择模板】对话框。

在【站点】下拉列表中选择站点名称；在【模板】列表中选择需要的模板。

单击【选定】按钮。

即可将该
模板应用到打开的文档。

打开【文件】浮动面板，切换到【资源】选项卡下。

单击【模板】图标，打开模板列表，选中需要的模板。

单击【应用】按钮，或者将模板直接拖动到文档窗口中即可。

【操作技巧与注意事项】
模板应包含可编辑区域。

基于模板创建的网页可以在这些区域中进行编辑。

实验3.6 表格的应用
【相关知识】
1. 表格是简明、快捷地展示数据的常用方式。

2. 利用Dreamweaver提供的导入、导出功能，可以使网页中的表格与其他软件（例如Word、Excel）中
的表格式数据相互转换。

3. 利用表格对网页布局是网页制作中的常用手段。

【实验3.6-1】
一、实验目的和要求
1. 掌握创建和编辑表格的方法。

2. 掌握对表格进行格式化的方法。

3. 掌握排序表格的方法。

二、实验步骤
1. 新建一个网页文档
启动Dreamweaver。

单击【文件】→【新建】菜单命令，新建一个网页文档。

2. 插入表格
（1）将光标放在网页中要插入表格的位置上。

单击【插入】→【表格】菜单命令，或单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。

（2）在对话框中，设置【行数】为“2”；设置【列数】为“3”；设置【表格宽度】为“600像素”；设置【边框粗细】为“2”。

（3）单击【确定】按钮，插入一个2行3列的表格。

3. 在单元格插入内容
（1）将光标放在第2行第1列的单元格中，输入“轿车”。

（2）将光标放在第2行第3列的单元格中，单击【插入】→【图像】菜单命令，插入一幅轿车的图片。

4. 编辑表格
（1）将光标放在第1列单元格的上方。

当鼠标变成箭头形状时，单击鼠标，选中第1列所有的单元格。

在属性面板的【宽】处输入“100像素”。

用同样的方法将第3列所有单元格的宽度设置为“70像素”。

（2）将光标放在第2行第2列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】→【拆分单元格】菜单命令，打开【拆分单元格】对话框。

在【把单元格拆分】处选中“行”；设置【行数】为“2”。

（3）选中拆分后的2个单元格，在属性面板的【高】处输入“50像素”。

并分别在单元格中输入“通用”、“大众”。

（4）将光标放在第2列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】→【插入列】菜单命令，在表格中插入一列。

在该列第2行、第3行单元格中分别输入“100”、“200”。

（5）将光标放在第1行单元格的左侧。

当鼠标变成箭头形状时，单击鼠标，选中第1行所有的单元格。

单击鼠标右键，在弹出的快捷菜单中选择【表格】→【合并单元格】菜单命令，将第1行单元格合并。

将光标放在第1行合并后的单元格中，输入“汽车分类”。

（6）选中表格中的所有单元格，单击属性面板中的【居中】按钮，使单元格中的文字居中对齐。

5. 设置表格属性
（1）选中表格，在属性面板中设置【边框颜色】为“#0033FF”；设置【背景颜色】为“#FFFFCC”。

（2）选中第1行的单元格，在属性面板中单击【背景】后面的【浏览】按钮，选择一幅背景图片。

6. 自动套用表格样式
（1）单击【插入】→【表格】菜单命令，或单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。

（2）在【表格】对话框中，设置【行数】为“4”；设置【列数】为“2”；设置【表格宽度】为“200像素”；设置【边框粗细】为“0”。

（3）单击【确定】按钮，插入一个4行2列的表格。

（4）在第1列的第1-4行的单元格中分别输入“专业”、“英语”、“会计”、“计算机”。

在第2列第1-4行的单元格中分别输入“招生人数”、“50”、“20”、“60”。

（5）单击【命令】→【格式化表格】菜单命令，打开【格式化表格】对话框。

从列表中选择一种表格样式。

单击【确定】按钮，将该样式应用到表格上。

7. 排序表格
（1）选中表格，单击【命令】→【排序表格】菜单命令，打开【排序表格】对话框。

（2）在【排序按】下拉列表中选择“列2”；在【顺序】下拉列表中选择“按数字顺序”，并在后面的下拉列表中选择“降序”。

（3）在【再按】下拉列表中选择“列1”；在第2个【顺序】下拉列表中选择“按字母顺序”，并在后面的下拉列表中选择“升序”。

（4）单击【排序包含第一行】复选项，使其不选中。

单击【确定】按钮，表格自动进行排序。

【实验3.6-2】
一、实验目的和要求
掌握导入和导出表格式数据的方法。

二、实验步骤
1. 从文本文件中导入表格式数据
（1）启动Excel，在工作表中输入如表3-2所示的数据：
表3-2 表格式数据
（2）单击【文件】→【另存为】菜单命令，打开【另存为】对话框。

在【保存类型】下拉列表中选择“文
本文件（制表符分隔）（*.txt）”。

文件名设置为“temp.txt”。

（3）新建一个网页文档。

将光标放在要导入表格的位置上。

单击【插入】→【表格】→【导入表格式数据】菜单命令，打开【导入表格式数据】对话框。

如图3-5所示。

图3-5 【导入表格式数据】对话框
（4）在对话框中，单击【数据文件】后面的【浏览】按钮，选择“temp.txt”文件；在【定界符】下拉列表中选择“Tab”。

单击【确定】按钮，在网页文档中自动创建表格，并导入“temp.txt”文件中的表格式数据。

2. 从Word文档中导入表格式数据
（1）单击【文件】→【导入】→【W ord文档】菜单命令，打开【导入Word文档】对话框。

选择Word 文档的位置和文件名。

单击【打开】按钮，即可将Word文档中的表格插入网页文档中。

（2）单击【文件】→【导入】→【Excel文档】菜单命令，打开【导入Excel文档】对话框。

选择Excel 文档的位置和文件名。

单击【打开】按钮，即可将Excel文档中的表格插入网页文档中。

3. 将网页上的表格导出
（1）选中表格，单击【导出】→【表格】菜单命令，打开【导出表格】对话框。

（2）在对话框的【定界符】下拉列表中选择“Tab”；在【换行符】下拉列表中选择“Windows”。

单击【导出】按钮，打开【表格导出为】对话框。

（3）在对话框中，设置保存位置和文件名。

【实验3.6-3】
一、实验目的和要求
掌握制作细线表格的方法。

二、实验步骤
1. 新建一个网页文档
启动Dreamweaver。

单击【文件】→【新建】菜单命令，新建一个网页文档。

2. 制作细线表格
（1）将光标放在网页中要插入表格的位置上。

单击【插入】→【表格】菜单命令，打开【表格】对话框。

插入一个2行3列的表格。

（2）选中表格，在属性面板中，设置【宽】为“200像素”；设置【填充】为“3”；设置【间距】为“1”；
设置【背景颜色】为“#003366”；设置【边框】为“0”。

（3）将光标放在第1个单元格中，按住【Shift】键单击最后一个单元格，选中表格中的所有单元格。

在属性面板中，设置【背景颜色】为“#FFFFFF”。

【实验3.6-4】
一、实验目的和要求
掌握利用表格布局页面的方法。

设计效果如图3-6所示。

图3-6 利用表格布局页面实例的效果图
二、实验步骤
1. 制作网页的上部
（1）新建一个网页文档。

将光标放在网页的第1行上。

单击【插入】→【表格】菜单命令，打开【表格】对话框。

设置【行数】为“1”；设置【列数】为“1”；设置【表格宽度】为“492像素”；设置【边框粗细】为“0”。

单击【确定】按钮，插入一个1行1列的表格。

（2）将光标放在表格的第1行第1列的单元格中，在属性面板中，设置【高】为“118像素”；在【对齐】下拉列表中选择“居中对齐”；单击【背景】后面的【浏览】按钮，打开【选择图像源文件】对话框。

选择一幅492×118像素的图像。

单击【确定】按钮，设置背景图像。

（3）将光标放在第1个表格的下面，单击【插入】→【表格】菜单命令，打开【表格】对话框。

设置【行数】为“1”；设置【列数】为“5”；设置【表格宽度】为“500像素”；设置【边框粗细】为“0”。

单击【确定】按钮，插入一个1行5列的表格。

（4）选中第2个表格，在属性面板中，设置【宽】为“100像素”；设置【高】为“30像素”；设置【背景颜色】为“#EFEFEF”。

在单元格中分别输入“首页”、“春季”、“夏季”、“秋季”、“冬季”。

（5）选中所有单元格，在属性面板中，设置【大小】为“大”；设置【文本颜色】为“#0066FF”；在【对齐】下拉列表中选择“居中对齐”。

2. 制作网页的下部
（1）在第2个表格下面，单击【插入】→【表格】菜单命令，打开【表格】对话框。

设置【行数】为“1”；
设置【列数】为“2”；设置【表格宽度】为“500”像素；设置【边框粗细】为“0”。

单击【确定】按钮，插入一个1行2列的表格。

（2）选中第3个表格，在属性面板中，在【对齐】下拉列表中选择“居中对齐”。

选中第1行第1列的单元格，在属性面板中，设置【宽】为“100像素”；在【垂直】下拉列表中选择“顶端”。

选中第1行
第2列的单元格，在属性面板中，设置【宽】为“400像素”；在【垂直】下拉列表中选择“顶端”。

（3）将光标放在第3个表格的第1行第1列的单元格中，单击【插入】→【表格】菜单命令，打开【表格】对话框。

设置【行数】为“4”；设置【列数】为“1”；设置【表格宽度】为“100像素”；设置【边框粗细】为“0”。

单击【确定】按钮，插入一个4行1列的表格。

（4）选中第4个表格，在每行分别输入“新闻快讯”、“花卉品种”、“花卉产地”、“花卉价格”，并使文字居中。

在属性面板中，设置表格的【背景颜色】为“#FFCC99”。

（5）将光标放在第3个表格的第1行第2列的单元格中，输入“四季花卉”。

选中文字，在属性面板的【大小】下拉列表中选择“特大”；在【对齐】下拉列表中选择“居中对齐”。

【操作技巧与注意事项】
1. 在从文本文件导入表格式数据时，注意定界符必须与文本文件一致。

常用的定界符有：制表符、分号等。

2. 如果表格不规则，含有合并或拆分的单元格，则无法使用表格排序功能。

3. 利用表格布局页面时，不要把整个页面中的所有内容都放在一个表格中，否则会影响网页的刷新速度。

4. 如果要使表格线在网页上不显示，则需要设置表格的边框为0。