《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元16：使用表格布局网页 、 课程引导 二、明确知识技能目标 湖南城道营政饰学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元16：使用表格布局网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 湖南绒道 在网页中除了可以使用文本和图像元素表达信息外， 还可以向其中插入Flash动画、Java Applet小程序、 ActiveX控件等多媒体元素，以丰富网页的效果，使网 页更加生动 紫技饰拳院 网页设计与制作
（一）课程引导 在网页中除了可以使用文本和图像元素表达信息外， 还可以向其中插入Flash动画、Java Applet小程序、 ActiveX控件等多媒体元素，以丰富网页的效果，使网 页更加生动
(二) 明确知识技能目标 湖南绒道 (1) 了解flash文件的类型。 (2) 掌握在网页中插入flashi动画和设置其属性的操作方 法。 (3) 掌握在网页中插入flash:按钮和设置其属性的操作方 蕙 法。 (4)掌握在网页中插入f1ash文本和设置其属性的操作方 法。 网页设计与制作
（二）明确知识技能目标 （1）了解flash文件的类型。 （2）掌握在网页中插入flash动画和设置其属性的操作方 法。 （3）掌握在网页中插入flash按钮和设置其属性的操作方 法。 （4）掌握在网页中插入flash文本和设置其属性的操作方 法
(三) 展示网页浏览效果 插入了f1ash动画的网页浏览效果如图所示，插入了flash 按钮和flashi文本的网页浏览效果如图8-2所示。 湖南城道质营政術学院 安态蒙纸里 图8-1 图8-2 插入多媒体对象的网页预览效果 插入f1ash按钮 网页设计与制作
（三）展示网页浏览效果 插入了flash动画的网页浏览效果如图所示，插入了flash 按钮和flash文本的网页浏览效果如图8-2所示。 图8-1 插入多媒体对象的网页预览效果 图8-2 插入flash按钮
(四) 分析操作任务 湖南绒道 (1)在“长沙世界之窗”站点下创建文件夹“09动感 网页”，在“09动感网页”文件夹中创建网页文档 09.html,该网页中插入多个Flashi动画。 (2)对第7章的“框架网页”一节所创建的网页 “navi.html”进行修改，插入Flash按钮和插入Flash文 本。 御拳院 网页设计与制作
（四）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“09动感 网页”，在“09动感网页”文件夹中创建网页文档 09.html，该网页中插入多个Flash动画。 （2）对第7章的“框架网页”一节所创建的网页 “navi.html”进行修改，插入Flash按钮和插入Flash文 本
(五)知识讲解与操作示范（1) 湖 8.1 Flash文件类型 线 Flash:软件由Macromedia公司推出，利用它可以制作 文件体积小、效果华丽的矢量动画。目前Flash动画是网 上最流行的动画格式，被大量用于网页页面。Flash技术 是实现和传递基于矢量的图形和动画的首选方案。插入 到网页中的Flash文件有多种类型：Flashi动画、Flash按 钮、Flash文本、Flash视频、Flashi元素、F1 lashPaper等。 琴 克 网页设计与制作
（五）知识讲解与操作示范（1） 8.1 Flash文件类型 Flash软件由Macromedia公司推出，利用它可以制作 文件体积小、效果华丽的矢量动画。目前Flash动画是网 上最流行的动画格式，被大量用于网页页面。Flash技术 是实现和传递基于矢量的图形和动画的首选方案。插入 到网页中的Flash文件有多种类型：Flash动画、Flash按 钮、Flash文本、Flash视频、Flash元素、FlashPaper等
(五) 知识讲解与操作示范（2) 8.2 插入F1ash 南 在网页文档09.html中插入多个Flash动画。具体 操作要求如下： 道 (1)创建一个名为“09.html”的网页，该网页运 用2个表格进行布局定位。 蒙 (2)两个表格中各插入一个flashi动画 (3)在第二个表格之后插入“Library”子文件夹 或 中的库文件“copyright.lbi” 饼 (4)在插入库文件的位置插入一个层，在层中插 入一个flashi动画。 克 网页文档09.html的创建过程如下： 网页设计与制作
（五）知识讲解与操作示范（2） 在网页文档09.html中插入多个Flash动画。具体 操作要求如下： （1）创建一个名为“09.html”的网页，该网页运 用2个表格进行布局定位。 （2）两个表格中各插入一个flash动画。 （3）在第二个表格之后插入“Library”子文件夹 中的库文件“copyright.lbi”。 （4）在插入库文件的位置插入一个层，在层中插 入一个flash动画。 网页文档09.html的创建过程如下： 8.2 插入Flash
(五) 知识讲解与操作示范(3) 8.2 插入F1ash 南 1.新建网页 道 (1)在站点“长沙世界之窗”下创建文件夹“09动 感网页”，在“09动感网页”文件夹中创建子文件夹 “image”，并将所需图像复制到该文件夹下；在同 爽 文件夹中创建子文件夹“f1lash”,并将所需flashi动画 文件复制到该文件夹下。 琴 网页设计与制作
（五）知识讲解与操作示范（3） 1．新建网页 （1）在站点“长沙世界之窗”下创建文件夹“09动 感网页”，在“09动感网页”文件夹中创建子文件夹 “image”，并将所需图像复制到该文件夹下；在同一 文件夹中创建子文件夹“flash”，并将所需flash动画 文件复制到该文件夹下。 8.2 插入Flash
(五)知识讲解与操作示范（4) 8.2 插入Flash 南 (2)在Dreamweaver8主窗口中，单击菜单【文件】 →【新建】，打开“新建文档”对话框，在“常规”选项 道 卡的“类别”列表框中选择“基本页”，“基本页”列表 框中选择“ML”，单击【创建】按钮，该站点下一个名 薰 为“Untitled-1”文档便创建。单击标准工具栏上的【保 存】按钮，打开“另存为”对话框，保存位置为“09动感 网页”，文件名为“09.html',单击【保存】按钮，保存 该网页文档。 琴 克 网页设计与制作
（五）知识讲解与操作示范（4） 8.2 插入Flash （2）在Dreamweaver 8主窗口中，单击菜单【文件】 →【新建】，打开“新建文档”对话框，在“常规”选项 卡的“类别”列表框中选择“基本页”，“基本页”列表 框中选择“HTML”，单击【创建】按钮，该站点下一个名 为“Untitled-1”文档便创建。单击标准工具栏上的【保 存】按钮，打开“另存为”对话框，保存位置为“09动感 网页”，文件名为“09.html”，单击【保存】按钮，保存 该网页文档