1、第3章 图像与超链接,3.1 Web 页图像基础 3.2 图像标记符 IMG 3.3 在页面中显示动画 3.4 创建超链接 3.5 使用图像映射,3.1 Web 页图像基础 3.1.1 Web 页图像格式 3.1.1.1 GIF 格式对于目前广泛使用的 GIF 格式而言，还具有透明色的特点，即可以将图片中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的意义。例如，图 3-1 对比了一般的 GIF 图像和具有透明色的 GIF 图像。对于多数图像处理软件（例如 Fireworks）甚至某些网页制作软件（例如 FrontPage），都提供了将图片中的某种颜色转换为透明色的功能。,图
2、 3-1 普通 GIF 与透明 GIF 的区别,3.1.1.2 JPEG 格式图3-2中显示了两种不同压缩比率的 JPEG 图的效果。,图 3-2 不同质量 JPEG 图像的对比,3.1.1.3 PNG 格式 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 Fireworks 3.1.2.3 Flash Flash界面如图 3-5、3-6 所示。,图 3
3、-5 Fireworks4.0 基本界面,图 3-6 Flash5.0 基本界面,3.1.3 使用网页图像的要点3.1.3.1 确保文件较小 1使图像具有所需的像素大小所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图像大小，例如，在同一种显示模式下，一个 1024768 的图像就显然比 800600的图像大的多。,在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更改图像的“Image Size”。一般在修改之后，图像的文件大小会显著变化。例如，在 Photoshop6.0 中，可以使用“Image”菜单中的“Image Size”命令，此时弹出如图 3-7
4、 所示的“Image Size”对话框，可以在其中更改图像的宽度、高度和分辨率。,图 3-7 Photoshop6.0 的“Image Size”对话框,2采用正确的格式进行优化处理一般图形图像处理软件都可以进行这些工作。例如，在 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 合理使
5、用动画3.2 图像标记符 IMG 3.2.1 插入图像 以下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 标记符将 IMG 标记符括起来，然后使用 align 属性。例如，以下 HTML 语句将使图像居中对齐（图像默认时与文本一样是左对齐的）：效果如图 3-10 所示。,图 3-10
6、图像在页面中居中对齐,2图像与周围内容的垂直对齐以下HTML代码说明了 align 属性如何控制文本与图像的垂直对齐（同时显示了 border 属性的效果），如图 3-11 所示。文本与图像的垂直对齐示例,此图像与文本顶部对齐 此图像与文本中央对齐 此图像与文本底部对齐,图 3-11 文字与图像的垂直对齐,3图文混排时的图像对齐以下 HTML 代码显示了文本与图像的环绕效果（同时显示了 hspace 和 vspace 属性的效果），如图 3-12 所示。文本与图像的环绕示例 ,野蛮人-文明边缘的几个部落中的成员之一，拒绝一切看起来温柔和软弱的事物对他的影响。在部落之间的不断战争中他活了下来，这
7、得益于坚定的意志和强健的体格。虽然缺乏文明人的心计，但是他能够敏锐的感觉到周围的环境，因为这一切来自他那动物般的直觉，这也使得野蛮人让人想起了民间关于狼人的一些传说。事实上他们坚信能够召唤图腾上动物的灵魂来鼓舞他们，并且因而得到非凡的力量和能力，不过这些召唤只是改善他们早已完美的战斗技能罢了。,女巫反叛的女人，她从东方男性魔法师占优势的魔法部落中偷取了如何使用魔法的秘密，使她成为了使用神秘巫术的专家，尽管她在白刃战斗中有很大不足，但她可以使用凶猛的进攻和防御魔法来弥补这一点不足。狐独和隐居的个性使很多人不理解她，有时候她看起来反复无常，但是事实上，她懂得怎样在次序和混乱中找到胜利的真谛。,图
8、3-12 文本与图像的环绕示例,3.3 在页面中显示动画 3.3.1 动画的基本原理 3.3.2 使用 Flash 动画 以下我们用 Flash5.0 制作一个简单的动画实例，来体会一下 Flash 动画的优越性，步骤如下：（1）启动 Flash5.0。（2）单击工具面板上的椭圆工具 ，然后在工具面板的填充色区域选择一种填充颜色，按住【Shift】键的同时在画布上拖动鼠标，绘制一个圆形，如图 3-14 所示。（3）单击工具面板上的箭头工具 ，按住鼠标左键不放，从圆形左上向右下拖动，圈选整个圆形，然后释放鼠标，如图 3-15 所示。,图 3-14 绘制圆形,图 3-15 选中刚绘制的圆形,（4）
9、选择“Modify”菜单中的“Group”命令，或者直接按【Ctrl + G】键，将圆形对象群组。 （5）在时间线面板的第 20 帧处单击鼠标右键，然后选择“Insert Keyframe”（插入关键帧）命令，如图 3-16 所示。 （6）用箭头工具 将圆形移动到画布右边，选择“Window”菜单“Panels”（浮动面板）子菜单中的“Transform”（变形）命令，打开变形面板，选中“Constrain”（锁定纵横比）选项，然后在宽度框中输入 50%，最后按【Enter】键，如图 3-17 所示。,图 3-16 添加关键帧图,3-17 移动圆形并将其变形,（7）在时间线上第 1 帧到第 2
10、0 帧之间的任意帧上单击鼠标右键，然后选择“Create Motion Tween”（创建运动渐变）命令，如图 3-18 所示。 （8）此时 Flash 将自动生成动画效果，在第 1 帧到第 20 帧之间出现一个箭头， 表示动画创建成功。（9）按【Ctrl + Enter】键查看动画效果，我们发现圆形可以自动从左向右滚动，并且在滚动的过程中，圆形会缩小。,图 3-18 创建渐变动画,根据以上创建过程，我们发现在 Flash 中制作动画效果是非常简单的，很多时候并不需要我们一幅图一幅图地画，因为 Flash 能自动生成所需要的图。有关用 Flash 制作动画的进一步内容，请读者参考其他相关书籍。
11、制作完 Flash 动画后，需要将它导出为网页中能够使用的格式，即使用“File”菜单中的“Export Movie”（导出电影）命令，将所制作的动画导出为 .swf 格式。,说明：Flash 源文件的格式是 .fla，而能够在网页中使用的格式是 .swf。SWF 格式的文件不能用 IMG 标记符插入，必须使用 OBJECT 标记符。假如我们刚才制作的圆形滚动动画被导出为 ball.swf，那么可以使用以下 HTML 语句将其插入到网页中：,说明：只有 .swf 文件能用以上代码插入到网页中。很多从网上下载的 Flash 动画，比如一些“阿贵”的小电影，都已经打包成为 .exe 文件，它们是不
12、能被嵌入到网页中的。一般情况下，我们都不直接用 HTML 的方式插入 Flash 动画，更多的是直接用Dreamweaver 插入（能够自动生成以上代码）。说明：有关 OBJECT 标记符的内容，请参见本书第 5 章。有关 Dreamweaver 的内容，请参见本书第 9 章。,3.3.3 使用 GIF 动画GIF 动画是最基本的一类动画，它的创建反映了动画的最基本原理。例如，下面以在 Fireworks 中制作前面介绍的马儿奔跑动画为例，简要说明 GIF 动画的制作过程：（1）启动 Fireworks4.0。（2）选择“File”菜单中的“New”命令，在“New Document”（新建文
13、档）对话框中，将宽度和高度设置为动画所需大小，将分辨率设置为 72，画布颜色设置为白色，如图 3-19 所示。,图 3-19 设置新文档的属性,（3）直接在画布上绘制图像，或者选择“File”菜单中的“Import”命令导入要制作动画的素材，如图 3-20 所示。,图 3-20 动画的第一帧,（4）单击“Frames”（帧）面板中的“新建/复制帧”按钮，然后在画布上绘制或导入第二帧上的图像，如图 3-21 所示。,图 3-21 制作第二帧,（5）重复步骤（3），制作其余的 6 帧，如图 3-22 所示。单击文档窗口中的“播放按钮”，则可以观看动画的效果。,图 3-22 制作出所有的帧,（6）如
14、果要更改动画播放的速度，可以双击帧面板右边的帧延时数字列表项，然后在弹出的面板中修改帧的延长时间。如果修改了某一帧的帧延时，那么可以变化这一帧的播放时间。如果要更改整个动画的播放速度，那么应修改所有帧的帧延时，此时按住【Shift】键选中所有帧，然后双击“帧延时”列，则可以修改整个动画的播放速度。,（7）选择“File”菜单中的“Save”命令，将文档保存。注意：此时保存的是 Fireworks 的默认格式 .png 格式，如果要将动画插入到网页中，还应该将其导出为动画 GIF 格式。（8）选择“Window”菜单中的“Optimize”（优化）命令，打开优化面板，在优化面板中将文件的优化格式
15、设置为“Animated GIF”（动画 GIF），如图 3-23 所示。,图 3-23 设置优化格式为动画 GIF,（9）选择“File”菜单中的“Export”（导出）命令，然后在“导出”对话框中将文件保存在特定位置即可，此时导出的文件格式为动画 GIF（扩展名为 .gif）。GIF 动画制作完成之后，可以用插入普通图像的方式将其插入到网页中，即使用 IMG 标记符。实际上，插入 GIF 动画与插入普通图像没有任何区别（因为 GIF 动画只是 GIF 这种图像格式的一种特殊表现），也可以设置动画的宽度高度等属性，具体效果请读者自行尝试。,3.4 创建超链接 3.4.1 相对地址与绝对地址
16、3.4.1.1 什么是 URL 3.4.1.2 绝对 URL 与相对 URL 3.4.2 页面链接 以下 HTML 代码显示了如何在网页中创建超链接，效果如图 3-24 所示。,说明：超链接默认时有下划线，并且显示为蓝色。当浏览者将鼠标移动到超链接上时，鼠标指针通常会变成手形，同时在状态栏中显示出超链接的目标文件。另外，超链接包括多种不同的状态，可以在 body 标记符中设置 link 等属性来控制超链接颜色的显示，具体请参见本书第 1 章。超链接示例这是一个超链接 欢迎参观我的个人网站,图 3-24 在网页中设置超链接,说明：如果href属性指定的文件格式是浏览器能够直接显示的，那么单击超链
17、接时将会直接显示相应文件。例如，如将href的值指定为图像文件，那么单击超链接就可以直接在浏览器中显示图像。如果href属性指定的文件格式是浏览器所不能识别的格式，那么将获得下载超链接的效果。例如，如果我们将超链接的目标文件指定为xxx.zip，那么当浏览者在浏览器中单击相应超链接时，则将弹出如图3-25所示的对话框，提示进行下载。,图 3-25 提示文件下载对话框,3.4.3 锚点链接以下 HTML 代码说明了如何使用指向同一页面特定部分的超链接，效果如图 3-26 所示。锚点链接示例目录 亚马逊战士|游侠|巫师,亚马逊战士一个强悍的女人，唯一知道的是，她来自靠近南部海域的广阔平原上的游牧民
18、族，因为部落之间不断发生冲突，使得这位游牧战士习惯为自已而战，并促使她拥有强烈的中立个性和能在恶劣的环境中战斗旅行的体能。她擅长使用弓箭对付敌人，并能熟练使用长矛和其他的一些投掷类武器，空手格斗也是她所擅长的。 返回目录 游侠来自一个特殊的军队，靠近宗教圣地 Zakarum，一个以信念为盾随时准备战斗的军人。他为自己认为正确的信念而战，他的坚定给予他力量并祝福他的战友，同时残酷的惩罚那些罪人。因此有一些人称他为过度紧张的狂热者，但是其他的人公认他充满了力量并且散发着仁慈的光芒。 返回目录,巫师来自南方充满蒸汽的沼泽地，一位披着斗蓬的神秘人物。就像他的名字一样，巫师来自不体面的男巫师族，他能够使
19、用死亡和召唤魔法控制怪物为已所用，擅长使用召唤亡灵的魔法。因为小时候在沼泽地里生活和学习魔法，致使他的皮肤犹如死尸，体型和骨胳的怪异更使得人们不敢正视并且远离他。但是毫无疑问，他是一位充满魔法力量的法师。 返回目录,3.4.4 电子邮件链接 当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序（对于安装了 Windows 98/2000 操作系统的计算机，默认时启动 Outlook Express），并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件，如图 3-27 所示。,图 3-27 单击电子邮件链接后会启动邮件程序,3.5 使用图像映射 3.5.1 什么
20、是图像映射 例如，图 3-28 显示了一个表示中国政区的电子地图页面，如果单击图中的不同区域，将跳转到不同的页面，介绍中国的各政区。,图 3-28 电子地图页面,又例如，图 3-29 显示了一个采用图像映射作为导航图的例子，当单击图中不同区域时，将把浏览者带到不同的栏目（图 3-30 是跳转到某个栏目后的页面）。此外，在这两个页面中，最下面一行的导航条也是用图像映射做的。,图 3-29 页面导航图实例,图 3-29 页面导航图实例,图 3-30 跳转到的栏目页面,3.5.2 创建图像映射 3.5.2.1 定义映射区域 3.5.2.2 对映射区域进行引用下面以一个简单的实例来说明图像映射的制作方
21、法。（1）首先在任意图形图像处理软件中打开要制作为图像映射的图像，找出所要定义的映射区域的坐标（例如在 Fireworks 中可以借助 Info 面板，在“画图”中则可以直接看状态栏），用笔记下来。,图 3-31 找出要定义区域的坐标,例如，在图 3-31 中就要定义两个矩形区域，它们的坐标分别是“30,152,366,218”和“171,256,228,288”。,（2）编写 HTML 文件，在其中定义出映射区域，并在 IMG 标记符中引用映射区域，如下所示： -以下代码是 main.htm-图像映射示例请单击以下图像中的不同区域，以便跳转到不同的文件,（3）分别编写超链接的目标文件，并将它们放到与刚才编写的 HTML 文件所在的同一个目录中，如下所示： -以下代码是file1.htm-file1我爱玩暗黑！-以下代码是file2.htm-file2 暴雪公司太酷了！ ,（4）在浏览器中打开 main.htm，效果如图 3-32 所示。当用户单击“diabloII”所在区域时，将跳转到 file1；而单击下面的商标区域时，则跳转到 file2。,图 3-32 图像映射效果,
