网页图的编辑制作.docVIP

第八章 网页图像的编辑制作 Photoshop不但提供了强大的图像艺术处理功能，还具备了网页图像处理能力，譬如：我们可以利用其内置的ImageReady制作GIF动画图片，我们还可以对图像进行切片，使得大容量的图片也能在网络中获得较快的传输速度。同时可以方便地改变图片的压缩模式，同时通览不同模式下的图片质量，以便确定图片文件的最佳尺寸，使我们用最小的文件尺寸获得最高质量的图像效果。这对网站建设无疑是非常重要的。 利用ImageReady，可以自动迅速地制作动画图像，生成包含图片、动画的网页代码文件，制作截分图形、JavaScript翻转、图片热点、映射、超级链接等等。 第一节 图像的切片和映射 知识点与技能：切片是图像的一块矩形区域，可用于在WEB页中创建链接、翻转和动画。将图像切片可以在使用时有选择地优化图像以便于Web查看。 切片可以将源图像分成许多的功能区域。将图像存为Web页时，每个切片作为一个独立的文件存储，文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。使用切片可以加快下载速度。处理包含不同数据类型的图像时，切片也很有用。 在浏览网页时，经常会遇到这样的情况：单击一个图像的不同区域，可以跳转到不同的网页，这种方式是利用图像映射建立的超链接。 使用图像映射和切片创建链接的主要区别在于：使用图像映射时，输出的是一个完整的图像文件；而使用切片时，输出的是若干个图像切片。另一个区别是使用图像映射可以在图像中创建圆形、多边形或矩形的链接区域，而切片只能创建矩形链接区域。相比之下，如果需要创建矩形链接区域，使用切片比使用图像映射更具有优越性。 范例——“音乐之声”制作 设计结果 对于比较大的网页图片，我们如何提高它的下载速度？对于一张图片上的某个“热点”,我们如何使它产生链接？当完成了项目范例后，答案将在我们面前展现。 设计思路 本项目的素材图像是一个普通的彩色图像，我们主要的任务是利用它来了解和熟悉图像的切片和图像的映射操作。 范例解题导引 Step1 我们首先利用切片工具将图像分若干切片。 （1）启动Photoshop，执行“文件/打开”命令，打开下载文件夹“第8章\第1节”文件夹中的“SC8.1-1.jpg”，如右图所示。 （2）单击工具箱下方的“跳至ImageReady”按钮，打开如右图所示的ImageReady窗口。 （3）执行“视图/标尺”命令打开标尺，并单击工具箱下方的 按钮，将图像切换到切片工作模式。 （4）选择工具箱中的“切片工具”，在图像窗口中男人头像、舞蹈演员、MU-SIC文字三处拖曳鼠标，产生三个矩形切片，切片周围出现带有控制点的实线边框，如右图所示。 Step2 下面我们要对刚才划分的切片进行编辑，为它们建立超级链接。 （1）执行“窗口/切片”命令，打开“切片”面板，如左图所示。 （2）选择工具箱中的“切片选择工具”，选中“吹奏男人”切片，此时“切片”面板上显示出该切片（编号03）。 （3）在“切片”面板URL栏输入音乐家协会的网址： HYPERLINK /xh/yinyue /xh/yinyue，在Target栏中选择“-blank”，如左图所示。 （4）选中切片编号为6的“舞蹈家”切片，在URL栏内输入舞蹈家协会网址： HYPERLINK / /，在Target栏中选择“-blank”，如左图所示。 （5）用同样方法，为编号为11的MUSIC文字切片设置超级链接，如左图所示。其中的URL地址为： HYPERLINK / /。 （6）单击工具箱中的 按钮，在IE中预览网页，效果如右图所示。 （7）在IE中预览网页，当光标指向切片时，在浏览器的相应位置上会出现一个手形图标，表示单击这里可以产生一个链接，如右图所示。 （8）当单击图片上某个切片（例如吹奏的男人），就会打开一个“中国音乐家协会网站”的新窗口，如右图所示。 （9）关闭浏览器窗口，结束预览。 Step3 接下来我们要利用设置图像的映射来建立超级链接。 （1）选择工具箱中的“圆形图像映射工具”，并打开“图像映射”面板，如左图所示。 小贴士：需要说明的是：最好不要在切片中创建包括URL链接的图像映射区域，因为无论是图像映射链接还是切片链接，都可能在某些浏览器中被忽略。在这里我们只是作为一个实验范例用以讲解。 （2）在图像窗口中左下方圆形图像映射，如左图所示。 （3）在“图像映射”面板中设置URL栏地址为： HYPERLINK / /，在Target栏中选择“-blank”，在Alt栏内输入：新华网，如左图所示。 （4）选择工具箱中的“多边形图像映射工具”，并在如左图所示位置拖曳出一个多边形映射区域。 （5）在“图像映射”面板中设置URL栏地址为： HYPERLINK / /，在Target栏中选择“-blank”，