《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元9：使用表格布局网页 一、课程引导 二、 明确知识技能目标 湖南城道属营政饰学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元9：使用表格布局网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 湖南 图像也是网页中主要元素之一，图像不但 道 能美化网页，与文本相比能够更直观地表达信 息。在页面中恰到好处地使用图像能使网页更 薰 加地生动、形象和美观 御學 网页设计与制作
（一）课程引导 图像也是网页中主要元素之一，图像不但 能美化网页，与文本相比能够更直观地表达信 息。在页面中恰到好处地使用图像能使网页更 加地生动、形象和美观
(二) 明确知识技能目标 湖南绒道 (1)掌握图像的插入方法。 (2)掌握图像属性的设置方法。 (3)掌握图像与文本混合编排的方法。 (4)掌握插入鼠标经过图像的方法，了解插入图像 盖 占位符的方法。 御拳院 网页设计与制作
（二）明确知识技能目标 （1）掌握图像的插入方法。 （2）掌握图像属性的设置方法。 （3）掌握图像与文本混合编排的方法。 （4）掌握插入鼠标经过图像的方法，了解插入图像 占位符的方法
(三)网页浏览效果展示 本章所制作的网页03.html浏览效果如图所示。 长沙世释之南之预点测前-eroxoft Internet Exp1oxe 回☒ 湖南城道属营政饰学院 习习转到 浏览长沙世界之窗生要壳 段亚锅的餐瑞整装型秀奶香装赞学华资持贵：整结#扣情直园内奈格特装低过山车、快中 尼院 00-0-07t:22 图6-1 网页03.html的浏览效果 网页设计与制作
（三）网页浏览效果展示 本章所制作的网页03.html浏览效果如图所示。 图6-1 网页03.html的浏览效果
(四)本章操作任务 湖南 (1)打开“长沙世界之窗”网站文件夹“03图像操 作”中的网页“03.html”，在该网页中最后一段文本 道 与日期之间插入两幅图片。 (2)按规定要求设置所插入图像的属性。 薰 (3)在已插入图片的右侧插入鼠标经过图像。 (4)制作包括一个图像按钮的导航条。 御學 网页设计与制作
（四）本章操作任务 （1）打开“长沙世界之窗”网站文件夹“03图像操 作”中的网页“03.html”，在该网页中最后一段文本 与日期之间插入两幅图片。 （2）按规定要求设置所插入图像的属性。 （3）在已插入图片的右侧插入鼠标经过图像。 （4）制作包括一个图像按钮的导航条
(五)知识讲解与操作示范 （1) 6.1图像概述 目前因特网上支持的图像格式主要有GIF 道 (Graphics Interchange Format)JPEG (Joint Photographic Experts Group)PNG (Portable 蒙 Network Graphic)三种。其中GIF和JPEG两格式的图片 文件由于文件较小、适合于网络上的传输，而且能够被 或 大多数的浏览器完全支持，所以是网页制作中最为常用 飘 的文本格式。 克 网页设计与制作
6.1 图像概述 目前因特网上支持的图像格式主要有GIF （Graphics Interchange Format）、JPEG（Joint Photographic Experts Group）、PNG（Portable Network Graphic）三种。其中GIF和JPEG两格式的图片 文件由于文件较小、适合于网络上的传输，而且能够被 大多数的浏览器完全支持，所以是网页制作中最为常用 的文本格式。 （五）知识讲解与操作示范（1）
(五)知识讲解与操作示范（2) 湖 6.2 图像操作 6.2.1插入图像 道 打开“长沙世界之窗”网站文件夹“03图像操作”中 的网页“03.html”，在该网页中最后一段文本与日期之 蒙 间插入两幅图片。具体操作过程如下。 (1)切换到“长沙世界之窗”网站，打开文件夹“03 图像操作”中网页03.html。 网 (2)将光标放置在网页03.html正文文本最后一行的尾 部，按Enter键换行。 克 网项设计与制作
6.2 图像操作 6.2.1 插入图像 打开“长沙世界之窗”网站文件夹“03图像操作”中 的网页“03.html”，在该网页中最后一段文本与日期之 间插入两幅图片。具体操作过程如下。 （1）切换到“长沙世界之窗”网站，打开文件夹“03 图像操作”中网页03.html。 （2）将光标放置在网页03.html正文文本最后一行的尾 部，按Enter键换行。 （五）知识讲解与操作示范（2）
(五)知识讲解与操作示范（3) 湖南 (3)单击菜单【插入】→【图像】，或单击“常用” 插入工具栏上的【图像】按钮，弹出“选择图像源 文件”对话框。 道 回 （4)在“选择图像源文件”对话框中先选择需要的 图像文件的路径，然后选择一个需要插入的图像文件。 (5)单击【确定】按钮，接着会弹出“图像标签辅 助功能属性”对话框，提醒用户输入替换文本和详细说 明。 琴 网页设计
（3）单击菜单【插入】→【图像】，或单击“常用” 插入工具栏上的【图像】按钮，弹出“选择图像源 文件”对话框。 （4）在“选择图像源文件”对话框中先选择需要的 图像文件的路径，然后选择一个需要插入的图像文件。 （5）单击【确定】按钮，接着会弹出“图像标签辅 助功能属性”对话框，提醒用户输入替换文本和详细说 明。 （五）知识讲解与操作示范（3）
五) 知识讲解与操作示范（4) 南 6.2.2设置图像属性 图像的属性设置要求如下： 道 (1)设置图像的宽度为“150”，高度为“100”。 (2)调整图像与其上方及下方文字的间距为“10”。 (3)设置图像的替换文本为“悉尼歌剧院”。 (4)为图像添加边框，边框宽度为“3”。 或 (5)设置图像与浏览器“左对齐”，设置图像与文 本的对齐方式为“绝对底部”。 拳院 网页设计与制作
6.2.2 设置图像属性 图像的属性设置要求如下： （1）设置图像的宽度为“150”，高度为“100”。 （2）调整图像与其上方及下方文字的间距为“10”。 （3）设置图像的替换文本为“悉尼歌剧院”。 （4）为图像添加边框，边框宽度为“3”。 （5）设置图像与浏览器“左对齐”，设置图像与文 本的对齐方式为“绝对底部”。 （五）知识讲解与操作示范（4）