第4章 图像应用.pptVIP

网页设计与制作案例教程 第4章 图像应用 知识点： 图像的格式 插入图像 图像属性 鼠标经过图像 网站相册 第4章 图像应用 《网页设计与制作案例教程》 重点和难点： 图像的插入与设置 鼠标经过图像 网站相册 要求学生了解图像的格式，掌握插入图像的方法，掌握设置图像的属性，掌握设置鼠标经过图像，掌握创建网站相册的方法，最终实现图像与文本混合编排的方法。 教学要求： 4.1 图像概述 4.2 “匆匆”网页制作 4.2.1 准备工作 4.2.2 插入图像 4.2.3 设置图像属性 4.2.4 图像编辑 4.2.5鼠标经过图像 4.3 创建“世界经典网站模板”相册 4.4 实训：“液晶显示器” 4.5 小结 4.6 习题 第4章 图像应用 《网页设计与制作案例教程》 第4章 图像应用 《网页设计与制作案例教程》 4.1 图像概述 Web 页中通常使用三种图像格式，即 GIF、JPEG 和 PNG。 1.JPEG格式 由于JPEG格式图像具有较高的压缩率，提高了浏览器下载速度，也被广泛应用在网页中。 2.GIF格式 GIF图像是网页中使用的最广泛，最普遍的一种图像格式，其英文全称是“Graphics Interchange Format”，中文意思是“可交换图像格式”。 3.PNG格式 PNG，是一种可携式网络图像格式。 第4章 图像应用 《网页设计与制作案例教程》 4.2 “匆匆”网页制作 网站案例效果图4.1 图4.1 “匆匆”网页的浏览效果 第4章 图像应用 《网页设计与制作案例教程》 4.2.1 准备工作 （1）新建站点。 （2）设置网页的背景图像 （3）将文本素材 “匆匆_朱自清.txt”的内容复制，粘贴到网页中。 （4）设置文本属性 图 4.2网页中的文本 第4章 图像应用 《网页设计与制作案例教程》 4.2.2 插入图像 在网页中插入图像是常用的操作，执行下列操作之一： ①执行菜单【插入】|【图像】命令。 ②单击【常用】面板|【图像】按钮。 ③按【Ctrl+Alt+I】组合键。 图 4.3网页中插入图像 第4章 图像应用 《网页设计与制作案例教程》 4.2.3 设置图像属性 与输入文本之后需要编辑排版一样，插入图像之后也要进行布局编排，同时来设定图像各种特有的属性。单击“Y1-05.jpg”文件，属性面板将显示图像的属性，根据实际需求进行设计其对应的属性。 图 4.4图像属性面板 第4章 图像应用 《网页设计与制作案例教程》 4.2.4图像编辑 1.裁剪图像 图 4.5 图像被裁剪范围 第4章 图像应用 《网页设计与制作案例教程》 4.2.4图像编辑 2.图像与文本的对齐 图 4.6 图像与文本左对齐 第4章 图像应用 《网页设计与制作案例教程》 4.2.4图像编辑 3.亮度调整 图 4.7 图像经过亮度调整和锐化后的效果 【亮度/对比度】对话框 【锐化】对话框 4.锐化 第4章 图像应用 《网页设计与制作案例教程》 4.2.4图像编辑 5.水平和垂直边距 图 4.8 水平和垂直边距都为8个像素 6.图像边框 图 4.9图像边框 第4章 图像应用 《网页设计与制作案例教程》 4.2.4图像编辑 7.图像替代文本 图 4.10替代文本 8.图像热点 图 4.11 图像热点 第4章 图像应用 《网页设计与制作案例教程》 4.2.5鼠标经过图像 若要创建鼠标经过图像，操作如下： （1）接上例，将光标停留到文件末尾，也就是将插入点放置在要显示鼠标经过图像的位置。 图 4.12鼠标经过图像 （2）单击【常用】面板|【鼠标经过图像】按钮，如下图所示。 图 4.13 【插入鼠标经过图像】对话框 第4章 图像应用 《网页设计与制作案例教程》 4.2.5鼠标经过图像 若要创建鼠标经过图像，操作如下： （3）按照图4.14进行设置 图 4.14【插入鼠标经过图像】对话框 （4）在浏览器中的效果,如图4.15所示 图 4.15 原始图像和鼠标经过的图像 第4章 图像应用 《网页设计与制作案例教程》 4.3 创建“世界经典网站模板”相册 网站案例效果图4.16 图4.16 经典网站模板相册 第4章 图像应用 《网页设计与制作案例教程》 4.3 创建“世界经典网站模板” Dreamweaver结合JavaScript和Fireworks，可以自动创建网站相册。 具体操作如下： （1）在Dreamweaver 8.0中，打开站点中的一个网页，执行菜单【命令】|【创建网站相册】命令，弹出【创建网站相册】对话框，如图4.17所示。 图 4.17 创建网站相册对话框 第4章 图像应用 《网页设计与制作案例教程》 4.3 创建“世界经典网站模板” Dreamweaver结合JavaScript和Firewo