《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元13：使用表格布局网页 “、 课程引导 二、明确知识技能目标 湖南绒道质营政御学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元13：使用表格布局网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 本章主要学习如何使用框架对网页中的文本、 湖南城道营欢似学院 图像等对象进行合理的布局。 网页设计与制作
（一）课程引导 本章主要学习如何使用框架对网页中的文本、 图像等对象进行合理的布局
(二) 明确知识技能目标 湖南绒道质 (1)掌握在网页中创建框架的操作方法。 (2)掌握为框架命名并导入框架源文件的操作方法 (3)掌握如何保存框架集文件和各个框架操作文件。 (4)掌握设置框架集属性和框架属性的操作方法。 (5)掌握编辑框架内容的操作方法。 (6) 了解设置超级链接的操作方法。 网页设计与制作
（二）明确知识技能目标 （1）掌握在网页中创建框架的操作方法。 （2）掌握为框架命名并导入框架源文件的操作方法。 （3）掌握如何保存框架集文件和各个框架操作文件。 （4）掌握设置框架集属性和框架属性的操作方法。 （5）掌握编辑框架内容的操作方法。 （6）了解设置超级链接的操作方法
(三) 展示网页浏览效果 框架网页07.html的浏览效果如图所示。 湖南绒道营政御学院 宇密升 网页设计与制作
（三）展示网页浏览效果 框架网页07.html的浏览效果如图所示
(四) 分析操作任务 湖南绒道 (1)在站点“长沙世界之窗”下创建子文件夹“07 框架网页”，在“07框架网页”文件夹中创建框架集文 件07.html和三个网页文档title.html、navi.html、 main.html。 (2)设置框架集和框架的属性，调整各框架区域的 大小。 残 (3)在站点中文件夹“07框架网页”下新建一个子 文件夹“ik”,在该文件夹中新建几个用于链接的网页， 琴 然后设置超级链接。 网页设计与制作
（四）分析操作任务 （1）在站点“长沙世界之窗”下创建子文件夹“07 框架网页”，在“07框架网页”文件夹中创建框架集文 件07.html和三个网页文档title.html、navi.html、 main.html。 （2）设置框架集和框架的属性，调整各框架区域的 大小。 （3）在站点中文件夹“07框架网页”下新建一个子 文件夹“link”，在该文件夹中新建几个用于链接的网页， 然后设置超级链接
(五)知识讲解与操作示范（1) 7.4.1 框架的概述 线 1.新建网页 (1)在站点“长沙世界之窗”下创建子文件夹“07框 质 架网页”，在“07框架网页”文件夹中创建一个网页文档 07.html,保存该网页。 荻 (2)创建三个网页文件：title.html、navi.html、 main.html。 琴 网顷设计与制作
（五）知识讲解与操作示范（1） 7.4.1 框架的概述 1．新建网页 （1）在站点“长沙世界之窗”下创建子文件夹“07框 架网页”，在“07框架网页”文件夹中创建一个网页文档 07.html，保存该网页。 （2）创建三个网页文件：title.html、navi.html、 main.html
(五)知识讲解与操作示范 （2) 湖 7.4.1 框架的概述 2.显示框架边框和框架面板 道 (1)显示框架边框 在Dreamweaver8主窗口中，单击菜单【查看】→ 【可视化助理】→【框架边框】，使框架边框在文档窗口 薰 中可见。 或 (2)显示框架面板 在Dreamweaver8主窗口中，单击菜单【窗口】→ 【框架】，显示框架面板。 克 网页设计与制作
（五）知识讲解与操作示范（2） 2.显示框架边框和框架面板 （1）显示框架边框 在Dreamweaver 8主窗口中，单击菜单【查看】→ 【可视化助理】→【框架边框】，使框架边框在文档窗口 中可见。 （2）显示框架面板 在Dreamweaver 8主窗口中，单击菜单【窗口】→ 【框架】，显示框架面板。 7.4.1 框架的概述
(五)知识讲解与操作示范（3) 7.4.1框架的概述 线 3.创建框架 (1)显示框架的边框线。 (2)在“插入”工具栏上，单击常用、 按钮，在下拉菜单中单击菜单项【布局】，切换到“布 局”插入工具栏。 淡 网页设计与制作
（五）知识讲解与操作示范（3） 3．创建框架 （1）显示框架的边框线。 （2）在“插入”工具栏上，单击 按钮，在下拉菜单中单击菜单项【布局】，切换到“布 局”插入工具栏。 7.4.1 框架的概述
(五)知识讲解与操作示范（4) 7.4.1框架的概述 南 (3)单击“布局”插入工具栏中的【框架】按钮， 道 弹出下拉菜单，单击该下拉菜单中的菜单项【顶部和嵌 套的左侧框架】，弹出“框架标签辅助功能属性”对话 框，在该对话框中为每一个框架指定一个标题，然后单 爽 击【确定】按钮，编辑窗口被划分成三个区域，即三个 框架。 琴 网页设计与制作
（五）知识讲解与操作示范（4） （3）单击“布局”插入工具栏中的【框架】按钮， 弹出下拉菜单，单击该下拉菜单中的菜单项【顶部和嵌 套的左侧框架】，弹出 “框架标签辅助功能属性”对话 框，在该对话框中为每一个框架指定一个标题，然后单 击【确定】按钮，编辑窗口被划分成三个区域，即三个 框架。 7.4.1 框架的概述