网页编程教学第3章.ppt

《网页编程教学第3章.ppt》由会员分享，可在线阅读，更多相关《网页编程教学第3章.ppt（69页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第3章 图像与超链接 3.1 Web 页图像基础页图像基础3.2 图像标记符图像标记符 IMG IMG 3.3 在页面中显示动画在页面中显示动画3.4 创建超链接创建超链接3.5 使用图像映射使用图像映射 3.1 Web 页图像基础页图像基础 3.1.1 Web 页图像格式页图像格式 3.1.1.1 GIF 格式格式 对对于于目目前前广广泛泛使使用用的的 GIF 格格式式而而言言，还还具具有有透透明明色色的的特特点点，即即可可以以将将图图片片中中的的某某种种颜颜色色设设置置为为透透明明色色。这这对对于于实实现现某某些些网网页页效效果果来来说说，具具有有非非常常现现实实的的意意义义。例例如如，图

2、图 3-1 对对比比了了一一般般的的 GIF 图图像像和和具具有有透透明明色色的的 GIF 图图像像。对对于于多多数数图图像像处处理理软软件件（例例如如 Fireworks）甚甚 至至 某某 些些 网网 页页 制制 作作 软软 件件（例例 如如 FrontPage），都都提提供供了了将将图图片片中中的的某某种种颜颜色色转转换换为为透明色的功能。透明色的功能。图 3-1 普通 GIF 与透明 GIF 的区别3.1.1.2 JPEG 格式格式 图图3-2中中显显示示了了两两种种不不同同压压缩缩比比率率的的 JPEG 图的效果。图的效果。图 3-2 不同质量 JPEG 图像的对比3.1.1.3 PN

3、G 格式格式3.1.1.4 矢量格式矢量格式 位图格式与矢量格式的区别如图位图格式与矢量格式的区别如图 3-3 所示。所示。位图，用点描述图像矢量图，用线条等数学信息描述图像图 3-3 位图与矢量图的对比 3.1.2选择图形图像处理软件选择图形图像处理软件 3.1.2.1 PhotoshopPhotoshop 6.0 的界面如图的界面如图 3-4 所示。所示。图 3-4 Photoshop 6.0 的基本界面3.1.2.2 Fireworks3.1.2.3 FlashFlashFlash界面如图界面如图 3-5、3-6 所示。所示。图 3-5 Fireworks4.0 基本界面图 3-6 Fl

4、ash5.0 基本界面3.1.3使用网页图像的要点使用网页图像的要点3.1.3.1 确保文件较小确保文件较小1使图像具有所需的像素大小使图像具有所需的像素大小 所所谓谓图图像像的的像像素素大大小小就就是是指指由由图图像像本本身身的的像像素素宽宽和和像像素素高高所所确确定定的的图图像像大大小小，例例如如，在在同同一一种种显显示示模模式式下下，一一个个 1024768 的的图图像像就就显显然然比比 800600的图像大的多。的图像大的多。在大多数情况下，如要将原来像素大小比在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更较大的图像缩小，应使用图形图像处理软件更改图像的改

5、图像的“Image Size”。一般在修改之后，图一般在修改之后，图像的文件大小会显著变化。像的文件大小会显著变化。例如，在例如，在 Photoshop6.0 中，可以使用中，可以使用“Image”菜单中的菜单中的“Image Size”命令，此时弹命令，此时弹出如图出如图 3-7 所示的所示的“Image Size”对话框，可以对话框，可以在其中更改图像的宽度、高度和分辨率。在其中更改图像的宽度、高度和分辨率。图 3-7 Photoshop6.0 的“Image Size”对话框2采用正确的格式进行优化处理采用正确的格式进行优化处理 一一般般图图形形图图像像处处理理软软件件都都可可以以进进行

6、行这这些些工工作作。例例如如，在在 Photoshop6.0 中中，如如果果要要设设置置图图像像的的格格式式和和优优化化选选项项，可可以以先先将将图图像像文文件件打打开开，然然后后选选择择“File”菜菜单单中中的的“Save for Web”命命令令，此此时时打打开开如如图图 3-8 所所示示的的“Save for Web”对话框。对话框。图 3-8 “Save for Web”对话框图 3-8 “Save for Web”对话框3.1.3.2 控制图像的数量和质量控制图像的数量和质量3.1.3.3 合理使用动画合理使用动画3.2 图像标记符图像标记符 IMG 3.2.1 插入图像插入图像

7、以以下下HTML代代码码说说明明了了如如何何在在网网页页中中插插入入一一个个图像，在浏览器中的显示效果如图图像，在浏览器中的显示效果如图 3-9 所示。所示。插插 入入 图图 像像 示示 例例我我插插入入的的第第一一幅幅图图像像：3.2.2设置图像属性设置图像属性3.2.2.1 指定图像的宽和高指定图像的宽和高 3.2.2.2 图像的边框图像的边框3.2.2.3 设置图像周围的空白设置图像周围的空白3.2.2.4 图像的对齐图像的对齐1图像在页面中的对齐图像在页面中的对齐 设设置置图图像像在在页页面面中中的的对对齐齐与与设设置置文文本本对对齐齐类类似似，可可以以使使用用 DIV 或或 P 标标

8、记记符符将将 IMG 标标记记符符括括起起来来，然后使用然后使用 align 属性。属性。例例如如，以以下下 HTML 语语句句将将使使图图像像居居中中对对齐齐（图像默认时与文本一样是左对齐的）：（图像默认时与文本一样是左对齐的）：效果如图效果如图 3-10 所示。所示。图 3-10 图像在页面中居中对齐 2图像与周围内容的垂直对齐图像与周围内容的垂直对齐 以以下下HTML代代码码说说明明了了 align 属属性性如如何何控控制制文文本本与与图图像像的的垂垂直直对对齐齐（同同时时显显示示了了 border 属属性性的的效果），如图效果），如图 3-11 所示。所示。文文本本与与图图像像的的垂垂

9、直直对对齐齐示示例例此图像与文本此图像与文本顶部对齐顶部对齐此图像与文本此图像与文本中央对齐中央对齐此图像与文本此图像与文本底部对齐底部对齐图 3-11 文字与图像的垂直对齐3图文混排时的图像对齐图文混排时的图像对齐 以以下下 HTML 代代码码显显示示了了文文本本与与图图像像的的环环绕绕效效果果（同同时时显显示示了了 hspace 和和 vspace 属属性性的的效效果果），如如图图 3-12 所示。所示。文本与图像的环绕示例文本与图像的环绕示例 野蛮人野蛮人-文明边缘的几个部落文明边缘的几个部落中的成员之一，拒绝一切看起来温柔和软弱的事物对他的中的成员之一，拒绝一切看起来温柔和软弱的事物对

10、他的影响。在部落之间的不断战争中他活了下来，这得益于坚影响。在部落之间的不断战争中他活了下来，这得益于坚定的意志和强健的体格。虽然缺乏文明人的心计，但是他定的意志和强健的体格。虽然缺乏文明人的心计，但是他能够敏锐的感觉到周围的环境，因为这一切来自他那动物能够敏锐的感觉到周围的环境，因为这一切来自他那动物般的直觉，这也使得野蛮人让人想起了民间关于狼人的一般的直觉，这也使得野蛮人让人想起了民间关于狼人的一些传说。事实上他们坚信能够召唤图腾上动物的灵魂来鼓些传说。事实上他们坚信能够召唤图腾上动物的灵魂来鼓舞他们，并且因而得到非凡的力量和能力，不过这些召唤舞他们，并且因而得到非凡的力量和能力，不过这些

11、召唤只是改善他们早已完美的战斗技能罢了。只是改善他们早已完美的战斗技能罢了。女巫女巫反叛的女人，她从东方男性魔法师反叛的女人，她从东方男性魔法师占优势的魔法部落中偷取了如何使用魔法的秘密，使她成占优势的魔法部落中偷取了如何使用魔法的秘密，使她成为了使用神秘巫术的专家，尽管她在白刃战斗中有很大不为了使用神秘巫术的专家，尽管她在白刃战斗中有很大不足，但她可以使用凶猛的进攻和防御魔法来弥补这一点不足，但她可以使用凶猛的进攻和防御魔法来弥补这一点不足。狐独和隐居的个性使很多人不理解她，有时候她看起足。狐独和隐居的个性使很多人不理解她，有时候她看起来反复无常，但是事实上，她懂得怎样在次序和混乱中找来反复

12、无常，但是事实上，她懂得怎样在次序和混乱中找到胜利的真谛。到胜利的真谛。图 3-12 文本与图像的环绕示例3.3 3.3 在页面中显示动画在页面中显示动画3.3.1 3.3.1 动画的基本原理动画的基本原理 3.3.2 3.3.2 使用使用 Flash 动画动画 以以下下我我们们用用 Flash5.0 制制作作一一个个简简单单的的动动画画实实例例，来体会一下来体会一下 Flash 动画的优越性，步骤如下：动画的优越性，步骤如下：（1）启动）启动 Flash5.0。（2）单单击击工工具具面面板板上上的的椭椭圆圆工工具具，然然后后在在工工具具面面板板的的填填充充色色区区域域选选择择一一种种填填充充

13、颜颜色色，按按住住【Shift】键键的的同同时时在在画画布布上上拖拖动动鼠鼠标标，绘绘制制一一个个圆圆形形，如如图图 3-14 所示。所示。（3）单单击击工工具具面面板板上上的的箭箭头头工工具具，按按住住鼠鼠标标左左键键不不放放，从从圆圆形形左左上上向向右右下下拖拖动动，圈圈选选整整个个圆圆形形，然后释放鼠标，如图然后释放鼠标，如图 3-15 所示。所示。图 3-14 绘制圆形图 3-15 选中刚绘制的圆形（4）选选择择“Modify”菜菜单单中中的的“Group”命命令令，或或者直接按者直接按【Ctrl+G】键，将圆形对象群组。键，将圆形对象群组。（5）在在时时间间线线面面板板的的第第 20

14、 帧帧处处单单击击鼠鼠标标右右键键，然然后后选选择择“Insert Keyframe”（插插入入关关键键帧帧）命命令令，如图如图 3-16 所示。所示。（6）用用箭箭头头工工具具 将将圆圆形形移移动动到到画画布布右右边边，选选择择“Window”菜菜单单“Panels”（浮浮动动面面板板）子子菜菜单单中中的的“Transform”（变变形形）命命令令，打打开开变变形形面面板板，选选中中“Constrain”（锁锁定定纵纵横横比比）选选项项，然然后后在在宽宽度度框框中中输输入入 50%，最最后后按按【Enter】键键，如如图图 3-17 所所示。示。图 3-16 添加关键帧图3-17 移动圆形并

15、将其变形（7）在在时时间间线线上上第第 1 帧帧到到第第 20 帧帧之之间间的的任任意意帧帧上上单单 击击 鼠鼠 标标 右右 键键，然然 后后 选选 择择“Create Motion Tween”（创建运动渐变）命令，如图创建运动渐变）命令，如图 3-18 所示。所示。（8）此此时时 Flash 将将自自动动生生成成动动画画效效果果，在在第第 1 帧帧到到第第 20 帧之间出现一个箭头，帧之间出现一个箭头，表示动画创建成功。表示动画创建成功。（9）按按【Ctrl+Enter】键键查查看看动动画画效效果果，我我们们发发现现圆圆形形可可以以自自动动从从左左向向右右滚滚动动，并并且且在在滚滚动动的的

16、过过程程中，圆形会缩小。中，圆形会缩小。图 3-18 创建渐变动画 根根据据以以上上创创建建过过程程，我我们们发发现现在在 Flash 中中制制作作动动画画效效果果是是非非常常简简单单的的，很很多多时时候候并并不不需需要要我我们们一一幅幅图图一一幅幅图图地地画画，因因为为 Flash 能能自自动动生生成成所所需需要要的的图图。有有关关用用 Flash 制制作作动动画画的的进进一一步步内内容容，请读者参考其他相关书籍。请读者参考其他相关书籍。制制作作完完 Flash 动动画画后后，需需要要将将它它导导出出为为网网页页中中能能够够使使用用的的格格式式，即即使使用用“File”菜菜单单中中的的“Ex

17、port Movie”（导导出出电电影影）命命令令，将将所所制制作作的动画导出为的动画导出为.swf 格式。格式。说明：说明：Flash 源文件的格式是源文件的格式是.fla，而能够而能够在网页中使用的格式是在网页中使用的格式是.swf。SWF 格式的文件不能用格式的文件不能用 IMG 标记符插入，标记符插入，必须使用必须使用 OBJECT 标记符。假如我们刚才制作标记符。假如我们刚才制作的圆形滚动动画被导出为的圆形滚动动画被导出为 ball.swf，那么可以使那么可以使用以下用以下 HTML 语句将其插入到网页中：语句将其插入到网页中：说明：说明：只有只有.swf 文件能用以上代码插入到网文

18、件能用以上代码插入到网页中。很多从网上下载的页中。很多从网上下载的 Flash 动画，比如一些动画，比如一些“阿贵阿贵”的小电影，都已经打包成为的小电影，都已经打包成为.exe 文件，文件，它们是不能被嵌入到网页中的。它们是不能被嵌入到网页中的。一般情况下，我们都不直接用一般情况下，我们都不直接用 HTML 的方的方式插入式插入 Flash 动画，更多的是直接用动画，更多的是直接用DreamweaverDreamweaver 插入（能够自动生成以上代码）。插入（能够自动生成以上代码）。说说明明：有有关关 OBJECT OBJECT 标标记记符符的的内内容容，请请参参见见本本书书第第 5 5 章

19、章。有有关关 DreamweaverDreamweaver 的的内内容容，请请参参见见本书第本书第 9 9 章。章。3.3.33.3.3使用使用 GIF GIF 动画动画 GIF 动动画画是是最最基基本本的的一一类类动动画画，它它的的创创建建反反映映了了动动画画的的最最基基本本原原理理。例例如如，下下面面以以在在 Fireworks 中中制制作作前前面面介介绍绍的的马马儿儿奔奔跑跑动动画画为为例，简要说明例，简要说明 GIF 动画的制作过程：动画的制作过程：（1）启动）启动 Fireworks4.0。（2）选选择择“File”菜菜单单中中的的“New”命命令令，在在“New Document”

20、（新新建建文文档档）对对话话框框中中，将将宽宽度度和和高高度度设设置置为为动动画画所所需需大大小小，将将分分辨辨率率设设置置为为 72，画画布布颜颜色色设设置置为为白白色色，如如图图 3-19 所示。所示。图 3-19 设置新文档的属性 （3）直接在画布上绘制图像，或者选择）直接在画布上绘制图像，或者选择“File”菜单中的菜单中的“Import”命令导入要制作动命令导入要制作动画的素材，如图画的素材，如图 3-20 所示。所示。图 3-20 动画的第一帧 （4）单击）单击“Frames”（帧）面板中的帧）面板中的“新建新建/复制帧复制帧”按钮，然后在画布上绘制或导入第二帧上按钮，然后在画布上

21、绘制或导入第二帧上的图像，如图的图像，如图 3-21 所示。所示。图 3-21 制作第二帧 （5）重复步骤（）重复步骤（3），制作其余的），制作其余的 6 帧，如图帧，如图 3-22 所示。单击文档窗口中的所示。单击文档窗口中的“播放按钮播放按钮”，则可以，则可以观看动画的效果。观看动画的效果。图 3-22 制作出所有的帧 （6）如如果果要要更更改改动动画画播播放放的的速速度度，可可以以双双击击帧帧面面板板右右边边的的帧帧延延时时数数字字列列表表项项，然然后后在在弹弹出出的的面面板板中中修修改改帧帧的的延延长长时时间间。如如果果修修改改了了某某一一帧帧的的帧帧延延时时，那那么么可可以以变变化化

22、这这一一帧帧的的播播放放时时间间。如如果果要要更更改改整整个个动动画画的的播播放放速速度度，那那么么应应修修改改所所有有帧帧的的帧帧延延时时，此此时时按按住住【Shift】键键选选中中所所有有帧帧，然然后后双双击击“帧帧延延时时”列，则可以修改整个动画的播放速度。列，则可以修改整个动画的播放速度。（7）选择）选择“File”菜单中的菜单中的“Save”命令，将命令，将文档保存。文档保存。注意：注意：此时保存的是此时保存的是 Fireworks 的默认格式的默认格式.png 格式，如果要将动画插入到网页中，还应该格式，如果要将动画插入到网页中，还应该将其导出为动画将其导出为动画 GIF 格式。格

23、式。（8）选择）选择“Window”菜单中的菜单中的“Optimize”（优化）命令，打开优化面板，在优化面板中将优化）命令，打开优化面板，在优化面板中将文件的优化格式设置为文件的优化格式设置为“Animated GIF”（动画动画 GIF），），如图如图 3-23 所示。所示。图 3-23 设置优化格式为动画 GIF （9）选选择择“File”菜菜单单中中的的“Export”（导导出出）命命令令，然然后后在在“导导出出”对对话话框框中中将将文文件件保保存存在在特特定定位位置置即即可可，此此时时导导出出的的文文件件格格式式为为动动画画 GIF（扩扩展展名为名为.gif）。）。GIF 动动画画制

24、制作作完完成成之之后后，可可以以用用插插入入普普通通图图像像的的方方式式将将其其插插入入到到网网页页中中，即即使使用用 IMG 标标记记符符。实实际际上上，插插入入 GIF 动动画画与与插插入入普普通通图图像像没没有有任任何何区区别别（因因为为 GIF 动动画画只只是是 GIF 这这种种图图像像格格式式的的一一种种特特殊殊表表现现），也也可可以以设设置置动动画画的的宽宽度度高高度度等等属属性性，具具体体效果请读者自行尝试。效果请读者自行尝试。3.4创建超链接创建超链接3.4.1相对地址与绝对地址3.4.1.1 什么是什么是 URL 3.4.1.2 绝对绝对 URL 与相对与相对 URL3.4.

25、2 页面链接页面链接 以以下下 HTML 代代码码显显示示了了如如何何在在网网页页中中创创建超链接，效果如图建超链接，效果如图 3-24 所示。所示。说明：说明：超链接默认时有下划线，并且显示为蓝超链接默认时有下划线，并且显示为蓝色。当浏览者将鼠标移动到超链接上时，鼠标指针色。当浏览者将鼠标移动到超链接上时，鼠标指针通常会变成手形，同时在状态栏中显示出超链接的通常会变成手形，同时在状态栏中显示出超链接的目标文件。另外，超链接包括多种不同的状态，可目标文件。另外，超链接包括多种不同的状态，可以在以在 body 标记符中设置标记符中设置 link 等属性来控制超链接颜等属性来控制超链接颜色的显示，

26、具体请参见本书第色的显示，具体请参见本书第 1 章。章。超链接示例超链接示例 这是一个这是一个超链接超链接欢迎参观我的欢迎参观我的个个人网站人网站图 3-24 在网页中设置超链接 说说明明：如如果果href属属性性指指定定的的文文件件格格式式是是浏浏览览器器能能够够直直接接显显示示的的，那那么么单单击击超超链链接接时时将将会会直直接接显显示示相相应应文文件件。例例如如，如如将将href的的值值指指定定为为图图像像文文件件，那那么么单单击击超超链链接接就就可可以以直直接接在在浏浏览览器器中中显显示示图图像像。如如果果href属属性性指指定定的的文文件件格格式式是是浏浏览览器器所所不不能能识识别别

27、的的格格式式，那那么么将将获获得得下下载载超超链链接接的的效效果果。例例如如，如如果果我我们们将将超超链链接接的的目目标标文文件件指指定定为为xxx.zip，那那么么当当浏浏览览者者在在浏浏览览器器中中单单击击相相应应超超链链接接时时，则则将将弹弹出出如如图图3-25所示的对话框，提示进行下载。所示的对话框，提示进行下载。图 3-25 提示文件下载对话框3.4.3 3.4.3 锚点链接锚点链接 以以下下 HTML 代代码码说说明明了了如如何何使使用用指指向向同同一一页页面面特定部分的超链接，效果如图特定部分的超链接，效果如图 3-26 所示。所示。锚点链接示例锚点链接示例目录目录亚亚马马逊逊战

28、战士士|游侠游侠|巫师巫师亚马逊战士亚马逊战士一个强悍一个强悍的女人，唯一知道的是，她来自靠近南部海域的广阔平原的女人，唯一知道的是，她来自靠近南部海域的广阔平原上的游牧民族，因为部落之间不断发生冲突，使得这位游上的游牧民族，因为部落之间不断发生冲突，使得这位游牧战士习惯为自已而战，并促使她拥有强烈的中立个性和牧战士习惯为自已而战，并促使她拥有强烈的中立个性和能在恶劣的环境中战斗旅行的体能。她擅长使用弓箭对付能在恶劣的环境中战斗旅行的体能。她擅长使用弓箭对付敌人，并能熟练使用长矛和其他的一些投掷类武器，空手敌人，并能熟练使用长矛和其他的一些投掷类武器，空手格斗也是她所擅长的。格斗也是她所擅长的

29、。返回目录返回目录游侠游侠来自一个特殊的来自一个特殊的军队，靠近宗教圣地军队，靠近宗教圣地 Zakarum，一个以信念为盾随时准备一个以信念为盾随时准备战斗的军人。他为自己认为正确的信念而战，他的坚定给战斗的军人。他为自己认为正确的信念而战，他的坚定给予他力量并祝福他的战友，同时残酷的惩罚那些罪人。因予他力量并祝福他的战友，同时残酷的惩罚那些罪人。因此有一些人称他为过度紧张的狂热者，但是其他的人公认此有一些人称他为过度紧张的狂热者，但是其他的人公认他充满了力量并且散发着仁慈的光芒。他充满了力量并且散发着仁慈的光芒。返回目录返回目录巫巫师师来来自自南南方方充充满满蒸蒸汽汽的的沼沼泽泽地地，一一位

30、位披披着着斗斗蓬蓬的的神神秘秘人人物物。就就像像他他的的名名字字一一样样，巫巫师师来来自自不不体体面面的的男男巫巫师师族族，他他能能够够使使用用死死亡亡和和召召唤唤魔魔法法控控制制怪怪物物为为已已所所用用，擅擅长长使使用用召召唤唤亡亡灵灵的的魔魔法法。因因为为小小时时候候在在沼沼泽泽地地里里生生活活和和学学习习魔魔法法，致致使使他他的的皮皮肤肤犹犹如如死死尸尸，体体型型和和骨骨胳胳的的怪怪异异更更使使得得人人们们不不敢敢正正视视并并且且远远离离他他。但但是是毫毫无无疑疑问问，他他是是一一位充满魔法力量的法师。位充满魔法力量的法师。返回目录返回目录3.4.4 3.4.4 电子邮件链接电子邮件链接

31、 当当浏浏览览网网页页的的用用户户单单击击了了指指向向电电子子邮邮件件的的超超链链接接后后，系系统统将将自自动动启启动动邮邮件件客客户户程程序序（对对于于安安装装了了 Windows 98/2000 操操作作系系统统的的计计算算机机，默默认认时时启启动动 Outlook Express），并并将将指指定定的的邮邮件件地地址址填填写写到到“收收件件人人”栏栏中中，用用户户可可以以编编辑辑并并发发送送该邮件，如图该邮件，如图 3-27 所示。所示。图 3-27 单击电子邮件链接后会启动邮件程序3.5 使用图像映射使用图像映射 3.5.1 3.5.1 什么是图像映射什么是图像映射 例例如如，图图 3

32、-28 显显示示了了一一个个表表示示中中国国政政区区的的电电子子地地图图页页面面，如如果果单单击击图图中中的的不不同同区区域域，将将跳跳转转到不同的页面，介绍中国的各政区。到不同的页面，介绍中国的各政区。图 3-28 电子地图页面 又又例例如如，图图 3-29 显显示示了了一一个个采采用用图图像像映映射射作作为为导导航航图图的的例例子子，当当单单击击图图中中不不同同区区域域时时，将将把把浏浏览览者者带带到到不不同同的的栏栏目目（图图 3-30 是是跳跳转转到到某某个个栏栏目目后后的的页页面面）。此此外外，在在这这两两个个页页面面中中，最最下面一行的导航条也是用图像映射做的。下面一行的导航条也是

33、用图像映射做的。图 3-29 页面导航图实例图 3-29 页面导航图实例图 3-30 跳转到的栏目页面3.5.2 3.5.2 创建图像映射创建图像映射3.5.2.1 3.5.2.1 定义映射区域定义映射区域 3.5.2.2 3.5.2.2 对映射区域进行引用对映射区域进行引用 下下面面以以一一个个简简单单的的实实例例来来说说明明图图像像映映射射的的制制作方法。作方法。（1）首首先先在在任任意意图图形形图图像像处处理理软软件件中中打打开开要要制制作作为为图图像像映映射射的的图图像像，找找出出所所要要定定义义的的映映射射区区域域的的坐坐标标（例例如如在在 Fireworks 中中可可以以借借助助

34、Info 面面板板，在在“画画图图”中中则则可可以以直直接接看看状状态态栏栏），用用笔笔记下来。记下来。图 3-31 找出要定义区域的坐标 例如，在图例如，在图 3-31 中就要定义两个矩形区域，它们的中就要定义两个矩形区域，它们的坐标分别是坐标分别是“30,152,366,218”和和“171,256,228,288”。（2）编编写写 HTML 文文件件，在在其其中中定定义义出出映映射射区区域域，并并在在 IMG 标记符中引用映射区域，如下所示：标记符中引用映射区域，如下所示：-以以下下代代码码是是 main.htm-图像映射示例图像映射示例请单击以下图像中的不同区域，以便跳转到不同的文件请

35、单击以下图像中的不同区域，以便跳转到不同的文件（3）分别编写超链接的目标文件，并将它们放到与分别编写超链接的目标文件，并将它们放到与刚才编写的刚才编写的 HTML 文件所在的同一个目录中，如下文件所在的同一个目录中，如下所示：所示：-以以下下代代码码是是file1.htm-file1 我爱玩暗黑！我爱玩暗黑！-以以下下代代码码是是file2.htm-file2暴暴 雪雪 公公 司司 太太 酷酷 了了！（4）在在浏浏览览器器中中打打开开 main.htm，效效果果如如图图 3-32 所所示示。当当用用户户单单击击“diabloII”所所在在区区域域时时，将将跳跳转转到到 file1；而而单单击击下下面面的的商商标标区区域域时时，则则跳跳转转到到 file2。图 3-32 图像映射效果