3.2在网页中插入与编辑图像(课件）-高二《网页设计与制作》同步教学（北京理工版）

任务二　在网页中插入与编辑图像　 一、网页中的图像格式 图像虽然存在着多种文件格式， 但Ｗｅｂ 页面中通常使用的只有三种， 即ＧＩＦ、ＪＰＥＧ 和ＰＮＧ。 ＧＩＦ 和ＪＰＥＧ 文件格式的支持情况最好， 大多数浏览器都可以查看它们， ＰＮＧ 文件具有较大的灵活性并且文件较小， 因此它们对于几乎任何类型的Ｗｅｂ 图像都是最适合的。 二、图像的插入 １) 启动Ｄｒｅａｍｗｅａｖｅｒ 后， 新建一个空白的页面， 将要插入的图像复制到当前站点中，单击插入面板中的“常用” 选项卡， 单击“图像插入” 按钮， 在弹出的菜单中选择“图像”， 如图３ －１３ 所示。 下一页 返回 任务二　在网页中插入与编辑图像　 ２) 单击“图像” 后， 将弹出“选择图像源文件” 对话框， 如图３ － １４ 所示。 单击“站点根目录” 按钮， 将目录转到站点目录下。 找到要插入的图像文件， 选中它， 单击“确定” 按钮， 选中的图像将插入到空白页面中。 ３) 按Ｆ１２ 键， 可预览插入图像的效果， 如图３ －１５ 所示。 三、图像的编辑 图像插入到网页中后， 不一定完全符合要求， 还需要对它进行修改加工。 这就要使用“属性” 面板进行编辑， 如图３ －１６ 所示。 上一页 下一页 返回 任务二　在网页中插入与编辑图像　 选中图像后， “属性” 面板自动更新成图像“属性” 面板， 其左上角显示当前图像的缩略图， 同时显示图像文件的大小。 在缩略图右侧有一个文本框， 在其中可以输入图像的标记名称。 图像“属性” 面板中有图像宽度和高度， 如果图像大小与原图不一致的话， 这里的数字就会用粗体显示， 当然也可以通过修改这里的数值对图片进行缩放 在文档中， 单击一个图像即可将其选中， 被选中的图像周围会出现选择框和三个控制点。 改变图像的大小有以下两种方法: (１) 通过拖动三个控制点可以改变图像的大小。 按住Ｓｈｉｆｔ 键， 再拖动控制点， 可以使图像在拉伸过程中保持宽高比例不变。 上一页 下一页 返回 任务二　在网页中插入与编辑图像　 (２) 选中图像， 在图像“属性” 面板中通过设置图像的宽度和高度来改变图像的大小。 一般来说， 在插入图像之前， 应该利用其他图像处理软件对图像进行效果处理， 并根据其在网页中所占位置的宽度和高度进行裁切或压缩， 不推荐直接在Ｄｒｅａｍｗｅａｖｅｒ 中缩放图像。 如果改变了图像大小， 可以通过“撤销” 按钮恢复图像的原始大小。 四、插入其他图像对象 图像占位符相当于图像的临时替代对象。 如果网页中的某个图像尚未制作好， 可暂时用图像占位符来代替。 １.插入图像占位符 执行“插入” → “图像对象” → “图像占位符” 命令插入图像占位符， 如图３ － １７所示， 设置完成后单击“确定” 按钮。 上一页 下一页 返回 任务二　在网页中插入与编辑图像　 ２.插入鼠标经过图像 在上网浏览网页时， 我们经常会看到这种情况， 将鼠标移动到某一图片上时， 图像变成了另外一幅图像， 当鼠标移开时， 又恢复成了原来的图像， 这就是我们所说的鼠标经过图像。 执行“插入” → “图像对象” → “鼠标经过图像” 命令插入鼠标经过图像， 如图３ － １８所示， 设置完成后单击“确定” 按钮。 上一页 返回 任务三　休闲运动网站建设　 １) 创建本地站点， 将素材文件夹中的ｃｈ３ 中的休闲运动网站文件夹中的素材文件夹下的所有文件及文件夹复制到本地根文件夹中。 ２) 在Ｄｒｅａｍｗｅａｖｅｒ ＣＳ６ 中打开ｉｎｄｅｘ.ｈｔｍｌ， 将光标定位到表格的第一个单元格中， 切换到代码视图， 光标定位到< ｔｄ > 标签中， 设置背景图片为０１.ｊｐｇ， 设置单元格的高度为１８０ 像素， 代码为<ｔｄ ｈｅｉｇｈｔ ＝″１８０″ ｃｏｌｓｐａｎ ＝″２″ ｖａｌｉｇｎ ＝″ｔｏｐ″ ｂａｃｋｇｒｏｕｎｄ ＝″ｉｍａｇｅｓ/０１.ｊｐｇ″ >，效果如图３ －２０ 所示。 ３) 切换到设计视图中， 将光标定位到设置背景图片的单元格中， 执行菜单“插入” →“媒体” → “ＳＷＦ” 命令， 插入Ｆｌａｓｈ。 选中Ｆｌａｓｈ， 在“属性” 面板中， 设置“宽” “高”分别为８００ｐｘ 和１８０ｐｘ， 保存。 按Ｆ１２ 浏览网页， 效果如图３ －２１ 所示。 下一页 返回 任务三　休闲运动网站建设　 ４) 在图３ －２１中， Ｆｌａｓｈ 背景为黑色， 为了实现图３ － １９ 所示效果， 需设置Ｆｌａｓｈ 背景为透明。 选中Ｆｌａｓｈ， 在“属性” 面板的“ｗｍｏｄｅ” 选项卡的下拉菜单中， 选择“透明”， 即可完成设置。 ５) 将光标定位到表格的第二个单元格中， 执行菜单“插入” → “图像” 命令， 插入ｉｍａｇｅｓ 文件夹中的０２.ｊｐｇ 图像， 保存， 浏览网页效果，