网页制作(第4章).doc

如有侵权，请联系网站删除，仅供学习与交流网页制作(第4章)【精品文档】第 8 页第4章 图像【学习目标】（1）掌握页面图像、导航条等常见元素的添加方法（2）掌握图片属性设置的方法（3）熟悉图片图像等页面元素的处理技巧（4）了解可视化环境中效果和代码的对应方法，并阅读简单代码图片图像是网页设计中一个不可缺少的元素，通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如Logo）或交互式设计元素（例如鼠标经过图像或图像地图），使页面更美观，表达更直观，更好地吸引浏览者。本章节将和大家一起探讨常用的Web图像的种类、基本概念及在Dreamweaver中的具体操作方法。4.1图像的插入和设置4.1.1 插入图像并设置图像属性1.插入图像（1）将光标放在“编辑区”中要插入图像的位置，如图4-1所示。然后在“插入”工具栏的“常用”类别中，单击“图像”按钮。图4-1 插入图像位置（2）在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像“banner.jpg”，单击“确定”按钮，如图4-2所示。文档中即会出现插入的图像。图4-2 选择图像源文件 图4-3 保存文档提示窗口注意：如果当前工作的文档未保存，则Dreamweaver会弹出提示窗口，生成一个对图像文件的file:/引用，如图4-3所示。将文档保存到站点中的任何位置后，Dreamweaver将该引用转换为文档相对路径。（3）在将图像插入Dreamweaver文档后，Dreamweaver会自动在HTML源代码中生成对该图像文件的引用。生成代码如下：<img src=" images/banner.jpg" width="728" height="102" />（4）最终插入效果如图4-4所示。图4-4 插入图片效果2.图像属性设置在网页中插入的图像大小、位置通常需要调整才能与网页相配，可以通过Dreamweaver的“属性检查器”来设置图像的基本属性，包括调整图像的大小，对齐图像等。（1）调整图像大小 本小节将介绍两种调整图像大小的方法：以可视化的形式调整及在属性检查器中调整。1）可视化形式调整。单击需要调整的图像，图像周围会显示出供调整的黑点符标，鼠标放在符标上，便可进行调整，如图4-5所示。图4-5 可视化形式调整2）属性检查器调整。在编辑区下方的属性栏编辑器中，可通过调整“宽”和“高”属性来进行调整，如图4-6所示。图4-6 在属性检查器中调整（2）对齐图像 插入图像默认的对齐方式是“左对齐”，可以通过对齐图像操作调整图像的位置，使图像与同一行中的文本、另一个图像、插件或其它元素对齐。具体操作步骤如下：1）在“编辑区”中单击选中要调整的图像，可以在属性栏右下角看出图像当前是以默认的对齐方式放置的，默认的对齐方式为“左对齐”，如图4-7所示。2）在“属性检查器”中单击“对齐”下拉列表框选择“右对齐”选项，也可以使用鼠标右键中“对齐”按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式，如图4-7所示。调整后的Logo位于表格的右侧，如图4-8所示。图4-7 “对齐”值原来为“默认值”图4-8 “右对齐”设置后，图像在右侧4.1.2 插入图像占位符本小节来学习在网页中插入图像占位符。图像占位符是Dreamweaver对图像功能的补充，指在将最终图像添加到Web页之前使用的替代图形。在对网页进行布局时经常用到这一功能，可以设置不同的颜色和文字来替代图像。具体插入步骤如下：（1）选择菜单栏“插入”项“图像对象”“图像占位符”，弹出对话框如图4-9所示。图4-9 插入图像占位符（2）在输入“名称”、选择“颜色”等参数设置完毕后，点确定，即可插入图像占位符，经过调整占位符大小，使其匹配用户需要，效果如图4-10所示。图4-10插入图像占位符效果（3）当用户需要插入真正的图片时，可双击对应位置的图像占位符，即弹出图片选择对话框，选择你需要插入的图片即可。4.1.3 编辑与优化图像Dreamweaver具有强大的图像编辑功能，用户无需借助外部图像编辑软件，就可以轻松实现对图像的重新取样、裁剪、调整亮度和对比度、锐化等操作，获得网页图像显示的最佳效果。1.重新取样当对网页中图像大小进行调整后，图像显示效果会发生改变。如图4-11所示，左边为原始图像，右边为缩小后图像，很明显调整后图像的效果不如原图。此时，可以通过“重新取样”增加或减少图像的像素数量，使其与原始图像的外观尽可能匹配。图4-11 重新取样例子具体步骤如下：（1）在“编辑区”中单击选中你要重新取样的图片（2）选择菜单栏“修改”项“图像”“重新取样”。对图像进行重新取样可以减少图像文件大小，提高下载速度，同时会降低图像品质。2.裁剪在Dreamweaver CS4中，用户不再需要借助外部图像编辑软件，利用Dreamweaver的“裁剪”功能，就可以轻松地将图像中多余的部分删除，突出图像的主题。比如，在制作网页的“友情链接”栏目时，发现插入的Logo大小不一，很不美观，需要将Logo中多余部分删除。具体操作步骤如下：（1）在“编辑区”中单击选中要裁剪的原图像，如图4-12所示。（2）选择菜单栏“修改”项“图像”“裁剪”。此时图像上会出现8个调整大小手柄，阴影区域为要删除的部分。拖动调整大小手柄，将图像的保留区域调整到合适大小，如图4-13所示。（3）单击“裁剪”按钮或双击图像保留区域，效果如图4-14所示。友情链接中Logo的多余部分就被删除了。 图4-12 选中原图像 图4-13 调整图像保留区域 图4-14裁剪后图像效果3.亮度和对比度在Dreamweaver中，可以通过“亮度和对比度”按钮调整网页中过亮或过暗的图像，使图像整体色调达到一致。具体步骤如下：（1）在“编辑区”中单击选中要调整的图片（2）选择菜单栏“修改”项“图像”“亮度/对比度”。弹出如图4-15所示的对话框，通过拖动滑块左右分别调整亮度和对比度的参数，使图片达到用户想要的效果。图4-15 亮度/对比度调整框4.锐化Dreamweaver的“锐化”功能与Photoshop相似，是通过提高图像边缘部分的对比度，从而使图像边界更清晰。下面来学习如何将图像中边缘模糊的字体清晰化。具体操作步骤如下：（1）在“编辑区”中单击选中要编辑的图像，如图4-16所示。（2）选择菜单栏“修改”项“图像”“锐化”。（3）在弹出的“锐化”对话框中，分别拖动滑块左右调节或在相应文本框中输入0-10之间的数值，直到达到满意效果，单击“确定”按钮，如图4-17所示。（4）锐化后的图片边缘部分更加清晰，效果如图4-18所示。图4-16选中原始图像 图4-17“锐化”调节对话框 图4-18图像锐化后效果4.2制作交互图像利用Dreamweaver还可以实现网页图像的特殊效果。本小节将学习如何设置图像替换文本、创建鼠标经过图像效果以及制作导航条。4.2.1 Alt属性的使用网页中的某些图像代表特定的意义，有时需要为网页中的图像添加说明性文字，就会用到图像的Alt属性来设置图像的替换文本。当鼠标放置在图像上时，就会显示指定的说明性文字。另外，使用alt属性还可以给那些不能看到你文件中图像的浏览者提供文字说明，这包括那些使用本来就不支持图像显示或图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。 Alt属性的设置有以下两种方法。（1）在图像代码中添加。比如：<img src="image.gif" alt="logo" />。（2）在属性编辑器中设置添加。如图4-19所示，属性编辑器中，右边“替换”一项，填入替换文本，可以用来设置ALT属性。图4-19 在属性编辑器中设置ALT属性 ALT属性的替换文本设置好后，图片效果如图4-20所示，当鼠标放在图片上时，就会显示设置好的替换文本logo，达到网页编辑者对图片进行说明的作用。图4-20 ALT属性网页效果 要注意的是，在写替换文字前要仔细考虑，确保所写文字确实为那些看到或看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以不用设置或者使用空的值（alt=""，引号中间没有空格）。4.2.2鼠标经过图像设置1.鼠标经过图像鼠标经过图像是指当鼠标指针移动到图像上时会显示预先设置好的另一副图像，当鼠标指针移开时，又会恢复为第一幅图像。在制作网页中的按钮、广告时，经常会用到这种效果，如图4-21所示。上图为页面载入时显示的图像，下图为鼠标经过时显示的图像。它实际上是由两幅图像组成，即原始图像和替换图像，在制作鼠标经过图像时，应保证两幅图像大小一致。图4-21 鼠标经过图像效果2.创建鼠标经过图像具体创建的步骤如下：（1）在“编辑区”中单击选中要插入图像的区域。（2）选择菜单栏“插入”项“图像对象”“鼠标经过图像”。（3）在弹出的“插入鼠标经过图像”对话框中，输入图像名称，选择原始图像，再选择鼠标经过图像时显示的图像，如果用户需要在鼠标经过图像时显示图片说明或者在点击图片时链接到其他网址，还可在“替换文本”中输入说明用的文字以及设置链接的URL地址，单击“确定”按钮，如图4-22所示。（4）插入鼠标经过图像后，效果如图4-23所示。图4-22 “插入鼠标经过图像”对话框 图4-23 鼠标经过前图像（左）和鼠标经过后图像（右）4.2.3 制作导航条 在Dreamweaver中可以利用导航条功能，简单地制作出垂直或水平方向的选择菜单，并且还可以根据鼠标的移动来显示其他图片，从而可以制作出动态效果。在这一节中我们将简单介绍一下导航条的相关知识，以及讲述如何制作美观及实用的导航条。1.导航条的基本知识导航条 由一个图像或一组图像组成，这些图像的显示内容随用户动作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。导航条元素有四种状态： 状态图像：用户尚未单击或尚未与此元素交互时所显示的图像。 鼠标经过图像：用户将鼠标指针滑过“状态图像”时所显示的图像。元素的外观发生变化（例如变得更亮），以便让用户知道可与这个元素进行交互。 按下图像：用户单击该元素时显示的图像。例如，用户单击某元素后，加载一个新的页面，而导航条仍然显示，只是被单击的元素可能变暗，表示它曾被选择过。 按下时鼠标经过图像：用户单击元素后，将鼠标指针滑过“按下图像”时显示的图像。例如，该元素可能变淡。此状态为用户提供可视提示，说明他们在站点的这一部分中不能再单击此元素。一个导航条，不必包含所有这四种状态的导航条图像；例如，可以只选用“状态图像”和“按下图像”这两种状态。2.插入导航条使用“插入导航条”命令之前，必须首先为各个导航元素的显示状态创建一组图像，一般的，可将导航条元素就视为按钮，因为单击它时，导航条元素将用户带到其它页面。一般地，我们可以对导航条执行以下几种操作：创建一个导航条、将导航条复制到站点内的其它页面、将导航条与框架一起使用以及编辑页面的行为以便在访问页面时显示不同的状态。在这里，我们将详细介绍如何创建并插入导航条。具体的操作步骤如下：（1）请执行下列操作之一以启动“插入导航条”的参数设置对话框，如图4-24所示。图4-24 “插入导航条”对话框 选择“插入”“图像对象”“导航条”。 在“插入”面板的“常用”类别中，单击“图像”按钮并选择“插入导航条”。（2）在弹出的“插入导航条”对话框中，有多项参数需要我们设置，下面介绍部分选项：加号和减号按钮：单击加号可插入元素；再单击加号会再添加另外一个元素。要删除元素，请选择它，然后单击减号。项目名称：键入导航条元素的名称（例如，“caidan1”每一个元素都对应一个按钮，该按钮具有一组图像状态，最多可达四个图像。项目名称在“导航条元件”列表中显示。用箭头按钮排列元素在导航条中的位置。在本例子中，我们设置了三个导航条元件，项目名称分别为“caidan1、caidan2和caidan3”。状态图像、鼠标经过图像、按下图像和按下时鼠标经过图像：浏览以选择这四个状态的图像。只需要“状态图像”；其它图像状态为可选状态。在本例子中，我们分别插入了三个“状态图像”的图片，分别是“菜单1、菜单2和菜单3”三张图片；然后，分别对应这三张图片再设置了三个“按下图像”的图片，分别是“menu1、menu2和menu3”。其他图像可根据用户爱好自行进行添加与设置。替换文本：为该元素输入描述性名称。在纯文本浏览器或手动下载图像的浏览器中，替代文本显示在图像的位置。屏幕阅读器读取替换文本，而且有些浏览器在用户将指针滑过导航条元素时显示替换文本。按下时，前往的 URL：单击“浏览”按钮，选择要打开的链接文件，然后指定是否在同一窗口或框架中打开文件。如果要使用的目标框架未出现在菜单中，可关闭“插入导航条”对话框，然后在您的文档中命名该框架。预先载入图像：选择此选项可在下载页面的同时下载图像。此选项可防止在用户将指针滑过鼠标经过图像时出现延迟。初始时显示“鼠标按下图像”：对于您希望在初始时为“按下图像”状态，而不是以默认的“状态图像”状态显示的元素，选择此选项。例如，在第一次下载页面时，导航条上的“主页”元素应处于“按下图像”状态。在对元素应用此选项时，在“导航条元件”列表中，其名称后面将出现一个星号。插入：指定是垂直插入还是水平插入各元素。使用表格：选择以表的形式插入各元素。本例子中，只设置了“状态图像”和“按下图像”两个参数，其他参数的设置可根据用户爱好自行进行添加和设置。（3）设置好上述参数后，点击“确定”，在编辑区出现如图4-25所示的效果。另外，用户可以根据喜好自行调节各个菜单图像的大小。图4-25 编辑区中插入导航条的效果（4）插入完成后，点击F12预览网页效果，如果4-26所示。图4-26 插入导航条预览效果初始效果是出现“菜单1、菜单2和菜单3”三个“状态图像”的按钮，当单击其中一个按钮时，被单击的按钮就会变成“按下图像”中设置的对应于“状态图像”中的按钮，本例子中，单击“菜单2”按钮，此按钮就变成了“menu2”按钮。3.修改导航条为网页文档创建导航条后，可使用“修改导航条”命令向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击元素时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。具体操作的步骤如下：（1）在活动页面中选择导航条。（2）选择“修改”>“ 导航条”，出现如图4-27所示“修改导航条”对话框。图4-27 “修改导航条”对话框（3）在“导航条元件”列表中，选择要编辑的项目。（4）根据需要进行更改，然后单击“确定”。课后习题一选择题1在 Dreamweaver 中，按（ ）键打开“选择图像源文件”对话框。 ACtrl+Alt+A B Ctrl+Alt+Z CCtrl+Alt+V DCtrl+Alt+I2. 在 Dreamweaver 中，下列说法错误的是： （ ）A. 在“宽”和“高”数值框中输入数值可以修改图像的大小B. 在“源文件”文本框中可以修改图像的路径 C. 用鼠标指针拖动裁剪选取框四周的控制点调整裁剪范围 D. 单击“编辑”栏中不能调整图片的锐化效果 3、Dreamweaver中，插入占位符时，在“宽度”和“高度”数值框中，以（ ）为单位输入数值设置图像大小。A、大小 B、字符 C、数量 D、像素4、在 Dreamweaver 中，下面关于鼠标经过图像设置说法错误的是 ：（ ）A、在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。B、选择“插入”“图像对象”“鼠标经过图像”命令。C、在“鼠标经过图像”文本框中输入描述该图像的文本。D、单击“按下时，前往的URL”文本框后的“浏览”按钮并选择要链接的文件，或者直接在文本框中输入文件的路径。5. 在插入导航条对话框时，下列（ ）是必须指定的A 状态图像 B 鼠标经过图像 C 按下图像 D 按下鼠标经过图像6、若要在“属性”面板中“链接”文本框中创建电子邮件链接，下列正确的描述是：（ ）A、 B、mail:abc C、to:abc D、abc7. 在浏览器中以弹出新窗口的方式打开链接文档时，需要将链接目标设为（ ）A -blank B -parent C -top D -self二填空题。1. （ ）是由 Macromedia 公司推出的一款在网页制作方面大众化的软件，它具有可 视化编辑界面，用户不必编写复杂的 HTML 源代码就可以生成跨平台、跨浏览器的网页。2. （ ）是由 Macromedia 公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件。3.（ ）是 Macromedia 公司开发的矢量图形编辑和动画创作的专业软件，它是一 种交互式动画设计工具。 4. 网站也称（ ），是包括主页在内的很多网页的集合，利用这些网页，将各种各 样的资源信息放置在互联网上，供用户浏览使用。三简答题。1、插入图片时Dreamweaver会生成什么代码？要注意图片存储的绝对和相对路径。2、图像占位符是什么？它的作用是什么？3、重新取样是指什么？对图片进行重新取样有何意义？4、Alt属性的使用有何意义？使用的时候需要注意什么？5、导航条元素的四种状态是什么？熟练掌握插入导航条的方法和步骤。