2.2学会图像的插入与编辑 课件 - 2022-2023学年高二下学期（中职）《网页设计与制作》（武汉大学版）

2.2 学会图像的插入与编辑 2.2.1 插入图像 2.2.2 插入图像占位符 2.2.3 制作鼠标经过图像 2.2.4 知识拓展 2.2.1 插入图像 2.2.1 插入图像 2.2.2 插入图像占位符 在布局页面时，如果要在网页中插入一张图片，可以先不插入具体图片，而使用占位符来代替图片位置。单击 “常用”选项卡中“图像”按钮右侧的下拉按钮，在弹出的下拉菜单中选择 “图像占位符”命令，打开“图像占位符”对话框。按设计需要设置图片的宽度和高度即可，如下图所示。 2.2.2 插入图像占位符 2.2.3 制作鼠标经过图像 制作鼠标经过图像时需要两幅大小相同的图像：主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。为了达到自然的效果，两幅图像要大小一致，否则，Dreamweaver将自动调整次图像的大小使之和主图像大小一致。 2.2.3 制作鼠标经过图像 2.2.3 制作鼠标经过图像 2.2.3 制作鼠标经过图像 2.2.4 知识拓展 1.图像格式介绍 　　互联网支持的图像格式主要有GIF、JPEG和PNG 3种，它们各有其优缺点。  GIF格式：GIF是Graphics Interchange Format（图形交换格式）的缩写，是一种无损压缩格式。GIF最多支持256色的图像，因而适合表现色调 不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标、徽标等。该格式的优点是图像尺寸小，可包含透明区域，且可制成包含多幅画面的简单动画，缺点是图像质量稍差。 2.2.4 知识拓展 JPEG格式：JPEG是Joint Photographic Experts Group （联合图像专家组）的缩写，是最常用的图像文件格式，是一种有损压缩格式，该格式适于表现色彩丰富，具有连续色调的图像，如各种照片。优点是图像质量高，缺点是文件尺寸稍大，且不能包含透明区域。 2.2.4 知识拓展 PNG格式：PNG是Portable Network Graphics（便携式网络图形）的缩写，是一种新兴的网络图像格式。PNG是目前保证最不失真的格式，它结合了GIF和JPEG二者的优点，既能处理照片式的精美图像，又能包含透明区域，且可以包含层等信息，是Fireworks的默认图像格式。 2.2.4 知识拓展 2.“图像”属性面板 　　选中图像后，在属性面板中便显示出了图像的属性，如下图所示。 2.2.4 知识拓展 其中各属性的功能如下： 图像：显示图像的名称，同时显示当前图像的缩略图和图像的大小。 宽：设置图像的宽度。 高：设置图像的高度。 源文件：输入图像的路径和文件名称。 2.2.4 知识拓展 链接：用于创建从图像到其他文件的链接。 目标：指定图像链接的目标文件的显示方式。若图像无链接，此项设置无效。 替换：输入图像的说明文字。 类：从已定义的样式中选择为图片定义的样式。 2.2.4 知识拓展 编辑：集合了一些常用的图片编辑工具。 地图：为所创建的热区命名。选择“创建热区”可建立不同形状的链接区域。 垂直边距：设置图像上下与其他页面元素的距离。 水平边距：设置图像左右与其他页面元素的距离。  2.2.4 知识拓展 边框：设置图像边框的宽度，默认的边框宽度为0。  ：设置图像在页面中的对齐方式。有左对齐、居中对齐、右对齐。 对齐：设置在一行中图像和文本的对齐方式，从而实现图文混排效果。 2.2.4 知识拓展 $