网页制作(第4章)

《网页制作(第4章)》由会员分享，可在线阅读，更多相关《网页制作(第4章)（15页珍藏版）》请在金锄头文库上搜索。

1、第4章 图像【学习目标】（1）掌握页面图像、导航条等常见元素的添加方法（2）掌握图片属性设置的方法（3）熟悉图片图像等页面元素的处理技巧（4）了解可视化环境中效果和代码的对应方法，并阅读简单代码图片图像是网页设计中一个不可缺少的元素，通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如Logo）或交互式设计元素（例如鼠标经过图像或图像地图），使页面更美观，表达更直观，更好地吸引浏览者。本章节将和大家一起探讨常用的Web图像的种类、基本概念及在Dreamweaver中的具体操作方法。4.1图像的插入和设置4.1.1 插入图像并设置图像属性1.插入图像（1）将光标放在“编辑区”中要插入

2、图像的位置，如图4-1所示。然后在“插入”工具栏的“常用”类别中，单击“图像”按钮。图4-1 插入图像位置（2）在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像“banner.jpg”，单击“确定”按钮，如图4-2所示。文档中即会出现插入的图像。 推荐精选图4-2 选择图像源文件 图4-3 保存文档提示窗口注意：如果当前工作的文档未保存，则Dreamweaver会弹出提示窗口，生成一个对图像文件的file:/引用，如图4-3所示。将文档保存到站点中的任何位置后，Dreamweaver将该引用转换为文档相对路径。（3）在将图像插入Dreamweaver文档后，Dreamweaver会自

3、动在HTML源代码中生成对该图像文件的引用。生成代码如下：（4）最终插入效果如图4-4所示。图4-4 插入图片效果2.图像属性设置在网页中插入的图像大小、位置通常需要调整才能与网页相配，可以通过Dreamweaver的“属性检查器”来设置图像的基本属性，包括调整图像的大小，对齐图像等。（1）调整图像大小 本小节将介绍两种调整图像大小的方法：以可视化的形式调整及在属性检查器中调整。1）可视化形式调整。单击需要调整的图像，图像周围会显示出供调整的黑点符标，鼠标放在符标上，便可进行调整，如图4-5所示。图4-5 可视化形式调整2）属性检查器调整。在编辑区下方的属性栏编辑器中，可通过调整“宽”和“高”

4、属性来进行调整，如图4-6所示。图4-6 在属性检查器中调整（2）对齐图像 插入图像默认的对齐方式是“左对齐”，可以通过对齐图像操作调整图像的位置，使图像与同一行中的文本、另一个图像、插件或其它元素对齐。具体操作步骤如下：推荐精选1）在“编辑区”中单击选中要调整的图像，可以在属性栏右下角看出图像当前是以默认的对齐方式放置的，默认的对齐方式为“左对齐”，如图4-7所示。2）在“属性检查器”中单击“对齐”下拉列表框选择“右对齐”选项，也可以使用鼠标右键中“对齐”按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式，如图4-7所示。调整后的Logo位于表格的右侧，如图4-8所示。图4-7 “对齐”

5、值原来为“默认值”图4-8 “右对齐”设置后，图像在右侧4.1.2 插入图像占位符本小节来学习在网页中插入图像占位符。图像占位符是Dreamweaver对图像功能的补充，指在将最终图像添加到Web页之前使用的替代图形。在对网页进行布局时经常用到这一功能，可以设置不同的颜色和文字来替代图像。具体插入步骤如下：（1）选择菜单栏“插入”项“图像对象”“图像占位符”，弹出对话框如图4-9所示。图4-9 插入图像占位符推荐精选（2）在输入“名称”、选择“颜色”等参数设置完毕后，点确定，即可插入图像占位符，经过调整占位符大小，使其匹配用户需要，效果如图4-10所示。图4-10插入图像占位符效果（3）当用户

6、需要插入真正的图片时，可双击对应位置的图像占位符，即弹出图片选择对话框，选择你需要插入的图片即可。4.1.3 编辑与优化图像Dreamweaver具有强大的图像编辑功能，用户无需借助外部图像编辑软件，就可以轻松实现对图像的重新取样、裁剪、调整亮度和对比度、锐化等操作，获得网页图像显示的最佳效果。1.重新取样当对网页中图像大小进行调整后，图像显示效果会发生改变。如图4-11所示，左边为原始图像，右边为缩小后图像，很明显调整后图像的效果不如原图。此时，可以通过“重新取样”增加或减少图像的像素数量，使其与原始图像的外观尽可能匹配。图4-11 重新取样例子具体步骤如下：（1）在“编辑区”中单击选中你要

7、重新取样的图片（2）选择菜单栏“修改”项“图像”“重新取样”。对图像进行重新取样可以减少图像文件大小，提高下载速度，同时会降低图像品质。2.裁剪推荐精选在Dreamweaver CS4中，用户不再需要借助外部图像编辑软件，利用Dreamweaver的“裁剪”功能，就可以轻松地将图像中多余的部分删除，突出图像的主题。比如，在制作网页的“友情链接”栏目时，发现插入的Logo大小不一，很不美观，需要将Logo中多余部分删除。具体操作步骤如下：（1）在“编辑区”中单击选中要裁剪的原图像，如图4-12所示。（2）选择菜单栏“修改”项“图像”“裁剪”。此时图像上会出现8个调整大小手柄，阴影区域为要删除的部

8、分。拖动调整大小手柄，将图像的保留区域调整到合适大小，如图4-13所示。（3）单击“裁剪”按钮或双击图像保留区域，效果如图4-14所示。友情链接中Logo的多余部分就被删除了。 图4-12 选中原图像 图4-13 调整图像保留区域 图4-14裁剪后图像效果3.亮度和对比度在Dreamweaver中，可以通过“亮度和对比度”按钮调整网页中过亮或过暗的图像，使图像整体色调达到一致。具体步骤如下：（1）在“编辑区”中单击选中要调整的图片（2）选择菜单栏“修改”项“图像”“亮度/对比度”。弹出如图4-15所示的对话框，通过拖动滑块左右分别调整亮度和对比度的参数，使图片达到用户想要的效果。图4-15 亮

9、度/对比度调整框推荐精选4.锐化Dreamweaver的“锐化”功能与Photoshop相似，是通过提高图像边缘部分的对比度，从而使图像边界更清晰。下面来学习如何将图像中边缘模糊的字体清晰化。具体操作步骤如下：（1）在“编辑区”中单击选中要编辑的图像，如图4-16所示。（2）选择菜单栏“修改”项“图像”“锐化”。（3）在弹出的“锐化”对话框中，分别拖动滑块左右调节或在相应文本框中输入0-10之间的数值，直到达到满意效果，单击“确定”按钮，如图4-17所示。（4）锐化后的图片边缘部分更加清晰，效果如图4-18所示。图4-16选中原始图像 图4-17“锐化”调节对话框 图4-18图像锐化后效果4.

10、2制作交互图像利用Dreamweaver还可以实现网页图像的特殊效果。本小节将学习如何设置图像替换文本、创建鼠标经过图像效果以及制作导航条。4.2.1 Alt属性的使用网页中的某些图像代表特定的意义，有时需要为网页中的图像添加说明性文字，就会用到图像的Alt属性来设置图像的替换文本。当鼠标放置在图像上时，就会显示指定的说明性文字。另外，使用alt属性还可以给那些不能看到你文件中图像的浏览者提供文字说明，这包括那些使用本来就不支持图像显示或图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。 Alt属性的设置有以下两种方法。（1）在图像代码中添加。比如：。（2）在属性编辑器中设

11、置添加。如图4-19所示，属性编辑器中，右边“替换”一项，填入替换文本，可以用来设置ALT属性。图4-19 在属性编辑器中设置ALT属性推荐精选 ALT属性的替换文本设置好后，图片效果如图4-20所示，当鼠标放在图片上时，就会显示设置好的替换文本logo，达到网页编辑者对图片进行说明的作用。图4-20 ALT属性网页效果 要注意的是，在写替换文字前要仔细考虑，确保所写文字确实为那些看到或看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以不用设置或者使用空的值（alt=，引号中间没有空格）。4.2.2鼠标经过图像设置1.鼠标经过图像鼠标经过图像是指当鼠标指针移动到图像上

12、时会显示预先设置好的另一副图像，当鼠标指针移开时，又会恢复为第一幅图像。在制作网页中的按钮、广告时，经常会用到这种效果，如图4-21所示。上图为页面载入时显示的图像，下图为鼠标经过时显示的图像。它实际上是由两幅图像组成，即原始图像和替换图像，在制作鼠标经过图像时，应保证两幅图像大小一致。图4-21 鼠标经过图像效果2.创建鼠标经过图像具体创建的步骤如下：推荐精选（1）在“编辑区”中单击选中要插入图像的区域。（2）选择菜单栏“插入”项“图像对象”“鼠标经过图像”。（3）在弹出的“插入鼠标经过图像”对话框中，输入图像名称，选择原始图像，再选择鼠标经过图像时显示的图像，如果用户需要在鼠标经过图像时显

13、示图片说明或者在点击图片时链接到其他网址，还可在“替换文本”中输入说明用的文字以及设置链接的URL地址，单击“确定”按钮，如图4-22所示。（4）插入鼠标经过图像后，效果如图4-23所示。图4-22 “插入鼠标经过图像”对话框 图4-23 鼠标经过前图像（左）和鼠标经过后图像（右）4.2.3 制作导航条 在Dreamweaver中可以利用导航条功能，简单地制作出垂直或水平方向的选择菜单，并且还可以根据鼠标的移动来显示其他图片，从而可以制作出动态效果。在这一节中我们将简单介绍一下导航条的相关知识，以及讲述如何制作美观及实用的导航条。1.导航条的基本知识导航条 由一个图像或一组图像组成，这些图像的

14、显示内容随用户动作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。导航条元素有四种状态： 状态图像：用户尚未单击或尚未与此元素交互时所显示的图像。 鼠标经过图像：用户将鼠标指针滑过“状态图像”时所显示的图像。元素的外观发生变化（例如变得更亮），以便让用户知道可与这个元素进行交互。 按下图像：用户单击该元素时显示的图像。例如，用户单击某元素后，加载一个新的页面，而导航条仍然显示，只是被单击的元素可能变暗，表示它曾被选择过。推荐精选 按下时鼠标经过图像：用户单击元素后，将鼠标指针滑过“按下图像”时显示的图像。例如，该元素可能变淡。此状态为用户提供可视提示，说明他们在站点的这一部

15、分中不能再单击此元素。一个导航条，不必包含所有这四种状态的导航条图像；例如，可以只选用“状态图像”和“按下图像”这两种状态。2.插入导航条使用“插入导航条”命令之前，必须首先为各个导航元素的显示状态创建一组图像，一般的，可将导航条元素就视为按钮，因为单击它时，导航条元素将用户带到其它页面。一般地，我们可以对导航条执行以下几种操作：创建一个导航条、将导航条复制到站点内的其它页面、将导航条与框架一起使用以及编辑页面的行为以便在访问页面时显示不同的状态。在这里，我们将详细介绍如何创建并插入导航条。具体的操作步骤如下：（1）请执行下列操作之一以启动“插入导航条”的参数设置对话框，如图4-24所示。图4-24 “插入导航条”对话框 选择“插入”“图像对象”“导航条”。 在“插入”面板的“常