第4章-网页中图像的应用.pptVIP

网页制作教程 目　录 第1章 网页制作概述 第2章 网页制作基础 第3章 网页中文本的应用 第4 章 网页中图像的应用 网页图像基础知识 学习如何插入图像 设置各种图像属性 在网页中应用图像 4.1 网页图像基础知识  4.1.1 网页图像格式 三种常见的图像的格式 ： GIF(图形交换格式)：最多使用256种颜色，最适合显示色调不连续或具有大面积单一 颜色的图像。 JPEG(联合图像专家组标准)：是用于摄影或连续色彩调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。 PNG(可移植网络图形）：是种替代GIF格式的无专利权限制的格式，包括对索引色、灰度、真彩色图像以及Alpha透明通道的支持。 4.2 图像素材的搜集和管理 搜集分为以下几方面： 1、利用相关软件自己绘制图像。 2、利用相关软件截取图像。 3、通过网络等媒体获取图像。 4.3 图像应用 4.3.1 插入图像 1、在“文档”窗口中，将插入点放置在要显示图像的地方，执行以下操作之一： 在“插入”面板“常用”选项卡中单击“图像”按钮。 在“插入”面板的“常用”选项卡中将“图像”按钮拖入“文档”窗口中。 选择“插入”菜单中的“图像”命令。 2、在出现的对话框中选择下列一种操作方式 。 选择“文件系统”选项以选择一个图形文件。　 选择“数据源”选项以选择一个动态图像源文件。 3、浏览以选择要插入的图像或内容源文件。4、选中图像，在“属性”面板中设置该图像的属性。 4.3.2 设置图片属性 1、设置图片属性 “地图名称和热点工具”：允许标注和创建客户端图像映射。 “垂直边距和水平边距”：沿图像的边缘加边距。垂直边距：沿图像的顶部和底部添加边距。水平边距：沿图像左侧和右侧添加边距。 “低品质源”：指定在载入主图像之前应该载入的图像。 “边框”：是以像素为单位的图像边框的宽度。默认为无边框。 “编辑”：启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像，以设置外部图像编辑器的信息。 “重设大小”：将“宽”和“高”的值重置为图像的原始大小。 2、对齐图像　 “默认值”：通常指定基线对齐。 “顶端”：图像的顶端与当前行的基线对齐。 “中间”：图像的中部与当前行的基线对齐。 “文本上方”：图像的顶端与文本行中最高字符的顶端对齐。 “绝对中间”：图像的中部与当前行中文本的中部对齐。 “绝对底部”：图像的底部与文本行的底部对齐。 “左对齐”：所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。 “右对齐”：图像放置在右边，文本在对象的左侧换行。 3、调整图像大小 在文档窗口中选择该元素。 执行下列操作之一，调整元素的大小： 若要调整元素的宽度。拖动右侧的选择控制点。 若要调整元素的高度，拖动底部的选择控制点。 同时调整元素的宽度和高度，拖动顶角的选择控制点。 若要在调整元素尺寸时保持元素的比例，在按住Shift键的同时拖动顶角的选择控制点。 4.4 创建简单的鼠标经过图像 4.4.1 制作鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化 的图像 。鼠标经过 图像实际上由两个图像组成：主图像和次图像 。这两下图像大小相等：如果这两个图像大小不同，Dreamweaver自动调整第二个图像的大小以第一个图像的属性。 4.4.2 在网页创建鼠标经过图像　 1、在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 2、使用以下方法之一插入鼠标经过图像： 在“插入”面板中的“常用”选项卡中单击“鼠标经过图像”按钮。 在“插入”面板中的“常用” 选项卡中，将“鼠标　经过图像” 按钮拖到“文档”窗口中所需的位置。 选择“插入”、“交互式图像”、“鼠标经过图像” 　菜单命令，显示“插入鼠标经过图像”对话框。 3、在“图像名称”文本框中键入鼠标经过图像的名称。 4、单击“原始图像”文本框右侧的“浏览”按钮，选择要在载入页时显示的图像，或在文本框中输入图像文件的路径。 5、单击“鼠标经过图像”文本框右侧的“浏览”按钮，选择要在载入页时显示的图像，或在文本框中输入图像文件的路径。 6、如果希望图像预先载入浏览器的缓存中，以便用户将鼠标指针滑过图像时不发生延迟，请选择“预载鼠标经过图像”选项。 7、在“替代文本”文本框中，键入为只显示文本的浏览器的访问者输入描述图像的文本，默认为空白。 8、单击“按下时，前往的URL ”文本框右侧的“浏览”按钮，选择文件，或者键入在用户单击鼠标经过图像时要打