《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元14：使用表格布局网页 一、课程引导 二、 明确知识技能目标 湖南城道营技鄉学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元14：使用表格布局网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 湖南绒道 在进行大量的页面制作时，很多页面会用到相同的 布 局、图片和文字等元素。为了避免重复劳动， 可以使用Dreamweaver8提供的模板和库功能，将具有 相同版面结构的页面制作成模板，将相同的页面元素 制作成库项目，并存储在库文件中以便随时调用。 差 御拳院 网页设计与制作
（一）课程引导 在进行大量的页面制作时，很多页面会用到相同的 布 局、图片和文字等元素。为了避免重复劳动， 可以使用Dreamweaver 8提供的模板和库功能，将具有 相同版面 结构的页面制作成模板，将相同的页面元素 制作成库项目，并存储在库文件中以便随时调用
(二) 明确知识技能目标 (1)理解模板和库的作用。 湖南城道業政饰学院 (2)学会将已有网页生成模板的操作方法 (3)掌握如何编辑模板和将模板生成新网页的操作 方法。 (4)掌握如何应用库项目制作网页。 网页设计与制作
（二）明确知识技能目标 （1）理解模板和库的作用。 （2）学会将已有网页生成模板的操作方法。 （3）掌握如何编辑模板和将模板生成新网页的操作 方法。 （4）掌握如何应用库项目制作网页
(三) 展示网页浏览效果 网页08.html的浏览效果如图所示。 湖南城道航营技斜学院 文明法湖 理6情7 泽 盖 盖最酸 图7-71 应用模板制作的网页效果 网页设计与制作
（三）展示网页浏览效果 网页08.html的浏览效果如图所示。 图7-71 应用模板制作的网页效果
(四) 分析操作任务 湖南绒道 (1)在站点“长沙世界之窗”下创建子文件夹“08模板和库”， 在“08模板和库”文件夹中创建一个网页文档081.html。 (2)利用上一步所创建的网页081.html制作成模板文件 “08.dwt”。 (3)在模板文件中定义可编辑区域、可选区域、可编辑标签属 性。 或 (4)创建一个基于模板08.dwt的网页，该网页命名为 “08.htnl” (5)创建一个应用库的网页083.html。 拳院 网页设计与制作
（四）分析操作任务 （1）在站点“长沙世界之窗”下创建子文件夹“08模板和库”， 在“08模板和库”文件夹中创建一个网页文档081.html。 （2）利用上一步所创建的网页081.html制作成模板文件 “08.dwt”。 （3）在模板文件中定义可编辑区域、可选区域、可编辑标签属 性。 （4）创建一个基于模板08.dwt的网页，该网页命名为 “08.html”。 （5）创建一个应用库的网页083.html
(五)知识讲解与操作示范（1) 7.5.1模板概述 湖南绒道廟 在Dreamweaver8中，模板是一种特殊的文档，可 被理解成一种模型，用这个模型可以方便地制作出很 多的页面，然后在此基础上可以对每个页面进行改动， 加入个性化的内容。 网页设计与制作
（五）知识讲解与操作示范（1） 7.5.1 模板概述 在Dreamweaver 8中，模板是一种特殊的文档，可 被理解成一种模型，用这个模型可以方便地制作出很 多的页面，然后在此基础上可以对每个页面进行改动， 加入个性化的内容
(五)知识讲解与操作示范（2) 湖南绒道 7.5.2创建网页模板 创建一个网页模板文件“08.dwt”,其详细操作过 程如下： 1.新建网页 在“长沙世界之窗”站点下创建文件夹“08模 薰 板和库”，在“08模板和库”文件夹中创建子文件夹 “image”,并将所需图像复制到该文件夹下。在同一 文件夹下创建一个命名为“081.html”的网页文档。保 琴 存该网页文档。 网页设计与制作
（五）知识讲解与操作示范（2） 7.5.2 创建网页模板 创建一个网页模板文件“08.dwt”，其详细操作过 程如下： 1．新建网页 在“长沙世界之窗”站点下创建文件夹“08模 板和库”，在“08模板和库”文件夹中创建子文件夹 “image”，并将所需图像复制到该文件夹下。在同一 文件夹下创建一个命名为“081.html”的网页文档。保 存该网页文档
五) 知识讲解与操作示范(3) 湖南绒道 7.5.2 创建网页模板 2.插入表格，布局网页 (1)插入表格 网页081.html用4个表格来布局网页元素。 > 将光标置于文档窗口左上角，插入一个1行1列的表格1。 > 然后在1行1列表格下面，插入一个9行3列的表格2。 戏 接着在9行3列表格下面，插入一个3行1列的表格3。 三个表格插入完成后如图7-72所示。 > 将表格2中的单元格“a”至单元格“i”合并为一个单元格， 拳院 将单元格“j”至单元格“s”合并为一个单元格。然后在右边的 合并单元格中插入一个6行3列的嵌套表格4。 网页设计与制作
（五）知识讲解与操作示范（3） 7.5.2 创建网页模板 2．插入表格，布局网页 （1）插入表格 网页081.html用4个表格来布局网页元素。 ➢ 将光标置于文档窗口左上角，插入一个1行1列的表格1。 ➢ 然后在1行1列表格下面，插入一个9行3列的表格2。 ➢ 接着在9行3列表格下面，插入一个3行1列的表格3。 三个表格插入完成后如图7-72所示。 ➢ 将表格2中的单元格“a”至单元格“i”合并为一个单元格， 将单元格“j”至单元格“s”合并为一个单元格。然后在右边的 合并单元格中插入一个6行3列的嵌套表格4
五) 知识讲解与操作示范(4) 7.5.2 湖南绒道 创建网页模板 (2)设置表格属性 按表7-1中的尺寸，利用表格“属性”面板设置四个表格 的尺寸。 表7-1各个表格的主要参数设置 表格名称行 列宽 高 对齐 背景图像 背景颜色 表格1 1 780 140 居中对齐 表格2 9 3 780 755 居中对齐 image/bj08.jpg 表格3 780 居中对齐 #CCFFCC 表格4 100% 默认 网页设计与制作
（五）知识讲解与操作示范（4） （2）设置表格属性 按表7-1中的尺寸，利用表格“属性”面板设置四个表格 的尺寸。 表7-1各个表格的主要参数设置 表格名称 行 列 宽 高 对齐 背景图像 背景颜色 表格1 1 1 780 140 居中对齐 表格2 9 3 780 755 居中对齐 image/bj08.jpg 表格3 3 1 780 居中对齐 #CCFFCC 表格4 6 3 100% 默认 7.5.2 创建网页模板