图像在网页中应用.pptVIP

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