中文版-Dreamweaver-CS6网页设计教程-第4章.pptVIP

第4章 图像与多媒体 本章主要内容 插入图像的方法。 设置图像属性的方法。 插入Flash对象的方法。 插入Shockwave与Java Applet对象的方法。 插入Activex控件及其他插件的方法。 本章重点 如何插入图像及其属性设置。 如何插入Flash对象及其属性设置。 4.1 插 入 图 像 浏览当下各种各样的网站，会发现几乎每个网页都包含大大小小的图片，纯文本的网页几乎是看不到的。网页除了要有丰富的内容以外，还要有能吸引人的外表。毫无疑问，美化网页外表的任务非“图像”莫属，当然还需要有图像与其他网页元素的合理搭配。作为一个网页设计师，图像编辑方面的功夫是必不可少。 和文本处理一样，图像处理是Dreamweaver CS6功能的一大板块，学好这一板块对于设计网站是至关重要的。下面从网页图像处理的各个方面加以详细介绍。 4.1.1 主要的图像格式 1. JPEG(JPG)格式 2. GIF格式 3. PNG格式 4.1.2 在页面中插入图像 1. 插入背景图像 2. 插入页面图像 4.2 设置图像属性 使用上述方法插入的图像如果没有调整好其属性，则非但不能美化页面，反而会使页面显得杂乱不堪。此时，图像属性设置就显得尤为重要。 4.2.1 改变图像大小 1. 拖曳鼠标缩放 2. 使用属性面板缩放 4.2.2 改变图像与文字的位置关系 要处理图像和文字在段落中的位置关系，可采用下列操作步骤。 (1) 用鼠标单击选取已经插入段落中的图像。 (2) 右键单击图片，选择“编辑标签”命令，弹出“标签编辑器”对话框。在“对齐”下拉列表中选择合适的排列方式，如图4-6所示。 4.2.3 设置其他属性 1. 指定名称 2. 设置图像间距 3. 设置替换文本 4. 设置图像边框 4.3 设置图像效果 几乎不用其他的图像编辑软件，单凭Dreamweaver CS6强大的图像处理功能就可以制作出多种专业的Web图像效果。本节通过几个实例讲解使用Dreamweaver CS6制作Web图像效果的方法，诸如，制作翻转图像、Web相册、图像映射、图像滤镜效果等。 4.3.1 翻转图像 设置翻转图像的具体操作步骤如下。 (1) 将插入点置于页面中要插入翻转图像的位置，然后执行下列操作之一。 将插入栏切换至“常用”选项卡，在“图像”按钮的下拉列表中，选择“鼠标经过图像”选项。 依次选择“插入”|“图像对象”|“鼠标经过图像”命令。 (2) 打开“插入鼠标经过图像”对话框，如图4-14所示。 4.3.1 翻转图像 (3) 在“插入鼠标经过图像”对话框中进行如下设置。 图像名称：指定翻转图像的名称。 原始图像：指定默认显示的图像。 鼠标经过图像：指定当鼠标经过时显示的图像。 预载鼠标经过图像：选中该复选框，预先下载图像，提高图像显示的效果。 替换文本：指定与在浏览器中显示的图像相关的文本。 按下时，前往的URL：指定按下图像时跳转到的URL地址。 (4) 设置完成后，单击“确定”按钮，插入翻转图像，如图4-15所示。 4.3.2 图像映射 创建图像映射的操作步骤如下。 (1) 打开文档，在文档中插入图像，图像的“属性”面板如图4-16所示。 (2) 图像“属性”面板左下角的是编辑图像热点的工具，下面就要使用它们来创建图像热点。单击“矩形热点”工具，在图像上画出一个矩形区域，如图4-17所示。 (3) 如果用矩形工具画出的图像热点不符合要求，则可单击图像“属性”面板上的“指针热点工具”拖动热点区域或热点边缘的控制点以改变热点的位置和大小。 4.3.2 图像映射 (4) 创建热点的主要目的就是将这些热点分别链接到网站中不同的内容，因此给热点创建链接是必不可少的步骤。选定热点后，在“属性”面板上的“链接”文本框中输入要链接文件的路径，在“目标”下拉列表中选择打开链接内容的窗口，在“替换”下拉列表框中输入说明性文字，如图4-18所示。 (5) 至此，第一个热点就创建好了，用同样的方法，在图像上其他位置创建热点。如果要删除热点，则选择热点后按Delete键即可。完成后保存页面，并在浏览器中查看效果，如图4-19所示。 4.3.3 图像滤镜效果 设置图像滤镜效果的具体操作步骤如下。 (1) 选择“窗口”|“CSS样式”命令，打开“CSS样式”面板，如图4-20所示。 (2) 单击“CSS样式”面板底部工具栏上的“新建CSS样式”按钮，打开“新建CSS规则”对话框，在“选择器类型” 下拉列表框中选择“类(可应用于任何HTML元素)”，在“选择器名称”下拉列表框中输入新建样式表的名称，然后单击“确定”按钮，如图4-21所示。 4.3.3 图像滤镜效果 (3) 然后打开“.aaa的CSS规则定义”对话框，在“分类”