1、第三章 Dreamweaver 网页设计实验 3.4 模板的使用【相关知识】1. 模板是一种特殊的文档。可以按照模板创建新的网页。模板可以反复使用，减少了一些重复的工作，大大提高了网页制作的效率。而且使网页具有统一的风格。2. 模板中应包含一个或多个可编辑区域。使用模板创建网页后，模板部分不能编辑，只能在可编辑区域中添加网页元素。一、实验目的和要求1. 掌握创建模板的方法。2. 掌握使用模板创建新文档的方法。3. 掌握在现有文档上应用模板的方法。二、实验步骤1. 创建新模板（1）单击【文件】【新建】菜单命令，打开【新建文档】对话框。切换到【常规】选项卡下。（2）在【类别】列表框中选择“模板页”
2、 ；在【基本页】列表框中选择“HTML 模板” 。（3）单击【创建】按钮，新建一个模板。2. 编辑模板（1）单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。设置【行数】为“1” ；【列数】为“1” ；【表格宽度】为“700 像素” 。单击【确定】按钮，在网页上插入一个表格。（2）选中表格，在属性面板中设置【背景颜色】为“#00CCFF” ；在【对齐】下拉列表中选择“居中对齐” 。（3）将光标放在网页上要插入可编辑区域的位置上。单击【插入】【模板对象】【可编辑区域】菜单命令，打开【新建可编辑区域】对话框。在【名称】文本框中输入可编辑区域的名称为“EditRegion1”。单击【确定】按钮
3、，在网页上插入一个可编辑区域。（4）单击【标准工具栏】上的【保存】按钮，打开【另存为模板】对话框。在【站点】下拉列表中选择站点名称；在【另存为】文本框中输入模板的名称为“master” 。单击【确定】按钮，保存模板。3. 使用模板创建新文档（1）单击【文件】【新建】菜单命令，切换到【模板】选项卡下。打开【从模板新建】对话框。（2）在【模板用于】列表中选择包含模板的站点；在【站点】列表中选择站点中的模板文件。如果选中【当模板改变时更新页面】复选项，则保存修改后的模板时，将自动提示更新使用该模板创建的页面。（3）单击【创建】按钮，创建一个基于模板的新文档。4. 在现有文档上应用模板打开要应用模板的
4、已有文档。执行以下操作之一： 单击【修改】【模板】【套用模板到页】菜单命令，打开【选择模板】对话框。在【站点】下拉列表中选择站点名称；在【模板】列表中选择需要的模板。单击【选定】按钮。即可将该模板应用到打开的文档。 打开【文件】浮动面板，切换到【资源】选项卡下。单击【模板】图标，打开模板列表，选中需要的模板。单击【应用】按钮，或者将模板直接拖动到文档窗口中即可。【操作技巧与注意事项】模板应包含可编辑区域。基于模板创建的网页可以在这些区域中进行编辑。实验 3.6 表格的应用【相关知识】1. 表格是简明、快捷地展示数据的常用方式。2. 利用 Dreamweaver 提供的导入、导出功能，可以使网页
5、中的表格与其他软件（例如 Word、Excel）中的表格式数据相互转换。3. 利用表格对网页布局是网页制作中的常用手段。【实验 3.6-1】一、实验目的和要求1. 掌握创建和编辑表格的方法。2. 掌握对表格进行格式化的方法。3. 掌握排序表格的方法。二、实验步骤1. 新建一个网页文档启动 Dreamweaver。单击【文件 】【新建】菜单命令，新建一个网页文档。2. 插入表格（1）将光标放在网页中要插入表格的位置上。单击【插入】【表格】菜单命令，或单击【常用插入栏】上的【表格】按钮 ，打开【表格】对话框。（2）在对话框中，设置【行数】为“2” ；设置【列数】为“3” ；设置【表格宽度】为“60
6、0 像素” ；设置【边框粗细】为“2” 。（3）单击【确定】按钮，插入一个 2 行 3 列的表格。3. 在单元格插入内容（1）将光标放在第 2 行第 1 列的单元格中，输入“轿车” 。（2）将光标放在第 2 行第 3 列的单元格中，单击【插入】【图像】菜单命令，插入一幅轿车的图片。4. 编辑表格（1）将光标放在第 1 列单元格的上方。当鼠标变成箭头形状时，单击鼠标，选中第 1 列所有的单元格。在属性面板的【宽】处输入“100 像素” 。用同样的方法将第 3 列所有单元格的宽度设置为“70 像素” 。（2）将光标放在第 2 行第 2 列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】【拆
7、分单元格】菜单命令，打开【拆分单元格】对话框。在【把单元格拆分】处选中“行” ；设置【行数】为“2” 。（3）选中拆分后的 2 个单元格，在属性面板的【高】处输入“50 像素” 。并分别在单元格中输入“通用” 、 “大众” 。（4）将光标放在第 2 列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】【插入列】菜单命令，在表格中插入一列。在该列第 2 行、第 3 行单元格中分别输入“100” 、 “200”。（5）将光标放在第 1 行单元格的左侧。当鼠标变成箭头形状时，单击鼠标，选中第 1 行所有的单元格。单击鼠标右键，在弹出的快捷菜单中选择【表格】【合并单元格】菜单命令，将第 1 行单
8、元格合并。将光标放在第 1 行合并后的单元格中，输入“汽车分类” 。（6）选中表格中的所有单元格，单击属性面板中的【居中】按钮 ，使单元格中的文字居中对齐。5. 设置表格属性（1）选中表格，在属性面板中设置【边框颜色】为“#0033FF” ；设置【背景颜色】为“#FFFFCC” 。（2）选中第 1 行的单元格，在属性面板中单击【背景】后面的【浏览】按钮 ，选择一幅背景图片。6. 自动套用表格样式（1）单击【插入】【表格】菜单命令，或单击【常用插入栏】上的【表格】按钮 ，打开【表格】对话框。（2）在【表格】对话框中，设置【行数】为“4” ；设置【列数】为“2” ；设置【表格宽度】为“200像素”
9、 ；设置【边框粗细】为“0” 。（3）单击【确定】按钮，插入一个 4 行 2 列的表格。（4）在第 1 列的第 1-4 行的单元格中分别输入“专业” 、 “英语” 、 “会计” 、 “计算机” 。在第 2 列第 1-4行的单元格中分别输入“招生人数” 、 “50”、 “20”、 “60”。（5）单击【命令】【格式化表格】菜单命令，打开【格式化表格】对话框。从列表中选择一种表格样式。单击【确定】按钮，将该样式应用到表格上。7. 排序表格（1）选中表格，单击【命令】【排序表格】菜单命令，打开【排序表格】对话框。（2）在【排序按】下拉列表中选择“列 2”；在【顺序】下拉列表中选择“按数字顺序” ，并
10、在后面的下拉列表中选择“降序” 。（3）在【再按】下拉列表中选择“列 1”；在第 2 个【顺序】下拉列表中选择“按字母顺序” ，并在后面的下拉列表中选择“升序” 。（4）单击【排序包含第一行】复选项，使其不选中。单击【确定】按钮，表格自动进行排序。【实验 3.6-2】一、实验目的和要求掌握导入和导出表格式数据的方法。二、实验步骤1. 从文本文件中导入表格式数据（1）启动 Excel，在工作表中输入如表 3-2 所示的数据：表 3-2 表格式数据日期 最高气温 0C 最低气温 0C 空气质量2008.7.7 26 21 良2008.7.8 27 22 良2008.7.9 28 23 轻度污染20
11、08.7.10 31 25 优（2）单击【文件】【另存为】菜单命令，打开【另存为】对话框。在【保存类型】下拉列表中选择“文本文件（制表符分隔） （*.txt） ”。文件名设置为“temp.txt” 。（3）新建一个网页文档。将光标放在要导入表格的位置上。单击【插入】【表格】【导入表格式数据】菜单命令，打开【导入表格式数据】对话框。如图 3-5 所示。图 3-5 【导入表格式数据】对话框（4）在对话框中，单击【数据文件】后面的【浏览】按钮 ，选择“temp.txt”文件；在【定界符】下拉列表中选择“Tab” 。单击【确定】按钮，在网页文档中自动创建表格，并导入“temp.txt”文件中的表格式数
12、据。2. 从 Word 文档中导入表格式数据（1）单击【文件】【导入】【Word 文档】菜单命令，打开【导入 Word 文档】对话框。选择 Word文档的位置和文件名。单击【打开】按钮，即可将 Word 文档中的表格插入网页文档中。（2）单击【文件】【导入】【Excel 文档】菜单命令，打开【导入 Excel 文档】对话框。选择Excel 文档的位置和文件名。单击【打开】按钮，即可将 Excel 文档中的表格插入网页文档中。3. 将网页上的表格导出（1）选中表格，单击【导出】【表格】菜单命令，打开【导出表格】对话框。（2）在对话框的【定界符】下拉列表中选择“Tab” ；在【换行符】下拉列表中选
13、择“Windows” 。单击【导出】按钮，打开【表格导出为】对话框。（3）在对话框中，设置保存位置和文件名。【实验 3.6-3】一、实验目的和要求掌握制作细线表格的方法。二、实验步骤1. 新建一个网页文档启动 Dreamweaver。单击【文件 】【新建】菜单命令，新建一个网页文档。2. 制作细线表格（1）将光标放在网页中要插入表格的位置上。单击【插入】【表格】菜单命令，打开【表格】对话框。插入一个 2 行 3 列的表格。（2）选中表格，在属性面板中，设置【宽】为“200 像素” ；设置【填充】为“3” ；设置【间距】为“1”；设置【背景颜色】为“#003366” ；设置【边框】为“0” 。（
14、3）将光标放在第 1 个单元格中，按住【Shift】键单击最后一个单元格，选中表格中的所有单元格。在属性面板中，设置【背景颜色】为“#FFFFFF” 。【实验 3.6-4】一、实验目的和要求掌握利用表格布局页面的方法。设计效果如图 3-6 所示。图 3-6 利用表格布局页面实例的效果图二、实验步骤1. 制作网页的上部（1）新建一个网页文档。将光标放在网页的第 1 行上。单击【插入】【表格】菜单命令，打开【表格】对话框。设置【行数】为“1” ；设置【列数】为“1” ；设置【表格宽度】为“492 像素” ；设置【边框粗细】为“0” 。单击【确定】按钮，插入一个 1 行 1 列的表格。（2）将光标放
15、在表格的第 1 行第 1 列的单元格中，在属性面板中，设置【高】为“118 像素” ；在【对齐】下拉列表中选择“居中对齐” ；单击【背景】后面的【浏览】按钮 ，打开【选择图像源文件】对话框。选择一幅 492118 像素的图像。单击【确定】按钮，设置背景图像。（3）将光标放在第 1 个表格的下面，单击【插入】【表格】菜单命令，打开【表格】对话框。设置【行数】为“1” ；设置【列数】为“5” ；设置【表格宽度】为“500 像素” ；设置【边框粗细】为“0” 。单击【确定】按钮，插入一个 1 行 5 列的表格。（4）选中第 2 个表格，在属性面板中，设置【宽】为“100 像素” ；设置【高】为“30
16、 像素” ；设置【背景颜色】为“#EFEFEF” 。在单元格中分别输入“首页” 、 “春季” 、 “夏季” 、 “秋季” 、 “冬季” 。（5）选中所有单元格，在属性面板中，设置【大小】为“大” ；设置【文本颜色】为“#0066FF” ；在【对齐】下拉列表中选择“居中对齐” 。2. 制作网页的下部（1）在第 2 个表格下面，单击【插入】【表格】菜单命令，打开【表格】对话框。设置【行数】为“1”；设置【列数】为“2” ；设置【表格宽度】为“500”像素；设置【边框粗细】为“0” 。单击【确定】按钮，插入一个 1 行 2 列的表格。（2）选中第 3 个表格，在属性面板中，在【对齐】下拉列表中选择“
17、居中对齐” 。选中第 1 行第 1 列的单元格，在属性面板中，设置【宽】为“100 像素” ；在【垂直】下拉列表中选择“顶端” 。选中第 1 行第 2 列的单元格，在属性面板中，设置【宽】为“400 像素” ；在【垂直】下拉列表中选择“顶端” 。（3）将光标放在第 3 个表格的第 1 行第 1 列的单元格中，单击【插入】【表格】菜单命令，打开【表格】对话框。设置【行数】为“4” ；设置【列数】为“1” ；设置【表格宽度】为“100 像素” ；设置【边框粗细】为“0” 。单击【确定】按钮，插入一个 4 行 1 列的表格。（4）选中第 4 个表格，在每行分别输入“新闻快讯”、“花卉品种”、“花卉产
18、地”、“花卉价格”，并使文字居中。在属性面板中，设置表格的【背景颜色】为“#FFCC99” 。（5）将光标放在第 3 个表格的第 1 行第 2 列的单元格中，输入“四季花卉”。选中文字，在属性面板的【大小】下拉列表中选择“特大” ；在【对齐】下拉列表中选择“居中对齐” 。【操作技巧与注意事项】1. 在从文本文件导入表格式数据时，注意定界符必须与文本文件一致。常用的定界符有：制表符、分号等。2. 如果表格不规则，含有合并或拆分的单元格，则无法使用表格排序功能。3. 利用表格布局页面时，不要把整个页面中的所有内容都放在一个表格中，否则会影响网页的刷新速度。4. 如果要使表格线在网页上不显示，则需要设置表格的边框为 0。
