1、图像在网页中应用处理图像,情景导入,引出问题：1、此网页中有哪些基本元素？2、网页中使用图像格式有哪些？3、在网页中如何处理图像?,文本、动画、图像、链接,GIF、JPEG、PNG,1、在桌面上创建文件夹“1201”2、利用Dreamweaver软件在桌面文件夹“1201”下创建站点，站点名为“wodexiangce”，并将素材中模块2/2.5处理图像/02儿童相册中素材复制到“wodexiangze”站点下。3、利用Dreamweaver软件打开站点中“index.html”主页,任务说明,任务说明,4、在右图对应位置中插入图像,插入动画文件”ina.swf”,插入鼠标经过图像：原始图像为“
2、img_07.jpg”、鼠标经过时图像为image-15.jpg，宽90，高61,插入图像“ img_07.jpg”,插入图像占位符,5、在右图对应位置中设置图像映射,任务说明,链接目标文件：img_16.jpeg,链接目标文件：image-15.jpg,提出知识点,1、在网页中插入图像，调整图像大小2、在网页中插入鼠标经过图像3、图像占位符的作用及插入方法4、设置图像映射,操作要点,一、插入图像的基本操作要点：1、在网页中设置插入点，执行【插入】-【图像】命令，或者在“插入”栏的“常用”类别中单击图像图标，打开“选择图像源文件”对话框，如下图：,2、在选择”图像源文件”对话框中选择“img_
3、07.jpg”/单击“确定”。,二、在网页中插入鼠标经过图像的方法,操作要点,说明：鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。,在网页中设置插入点，执行【插入】-【图像对像】 -【鼠标经过图像】命令，打开“插入鼠标经过图像”对话框，如下图：,选择一幅图像作为原始图像,选择一幅图像作为鼠标经过时显示的图像,三、图像占位符的作用及插入方法,操作要点,作用：利用占位符来代替需添加的而未准备好图像位置。,插入步骤：在网页中设置插入点，执行【插入】-【图像对像】 -【图像占位符】命令，打开“图像占位”对话框，如下图：,输入以字母开头占位符的名称,占位符背景颜色
4、,占位符宽和高的值,四、设置图像映射的方法,方法:选定图像-在图像属性检查器面板“地图”列表框中输入映射图像名称-选择其中一种映射形状-在图像上确定映射位置-在图像属性检查器面板“链接”列表框中输入映射图像的路径。,操作要点,讨论：如何用图像来以代替现有的图像占位符？,双击该占位符，在弹出的“选择图像源文件”对话框中选择需要插入的图像,五、设置图像属性,包括设置：图像的宽、高、源文件、链接、替换、地图、边框、对齐方式等属性,1、图像属性包括哪些属性？,2、图像属性设置操作步骤？,选定图像，在图像属性检查器中设置,映射类型,图像名称,链接文件路径,链接文件显示位置,源文件链接路径,图像边框,对齐方式,图像与文字水平与垂直间的距离,图像编辑按钮,知识点归纳:,1、插入图像、图像占位符、鼠标经过图像命令都在_菜单下。2、插入图像的标记代码是_3、插入图像、图像占位符、鼠标经过图像、图像映射的操作步骤及应用,插入,知识巩固训练,1、完成教材P64页课堂练习2.5.42、要求学生在以后上机时间根据个人风格创建相册网页,GIF格式优点为：可以制作动画，其缺点为：最多只可以支持到256色。JPEG格式的优点为：可以支持真彩色，其缺点为：只能为静态图像。PNG格式的优点为：既可以制作动画又可以支持真彩色，其缺点为：文件大，下载速度慢。,
