网页制作教程-第3章图像与超链接

上传人：大*** IP属地：江西上传时间：2023-01-13 格式：PPT 页数：69 大小：2.38MB 积分：12 举报 版权申诉

已阅读5页，还剩64页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章图像与超链接3.1Web页图像基础3.2

图像标记符IMG3.3

在页面中显示动画3.4创建超链接3.5

使用图像映射3.1Web页图像基础

3.1.1Web页图像格式

GIF格式对于目前广泛使用的GIF格式而言，还具有透明色的特点，即可以将图片中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的意义。例如，图3-1对比了一般的GIF图像和具有透明色的GIF图像。对于多数图像处理软件（例如Fireworks）甚至某些网页制作软件（例如FrontPage），都提供了将图片中的某种颜色转换为透明色的功能。图3-1普通GIF与透明GIF的区别JPEG格式图3-2中显示了两种不同压缩比率的JPEG图的效果。图3-2不同质量JPEG图像的对比PNG格式

矢量格式位图格式与矢量格式的区别如图

3-3所示。

位图，用点描述图像矢量图，用线条等数学信息描述图像图

3-3位图与矢量图的对比

3.1.2选择图形图像处理软件

PhotoshopPhotoshop6.0的界面如图3-4所示。图3-4Photoshop6.0的基本界面FireworksFlashFlash界面如图

3-5、3-6所示。图

3-5Fireworks4.0基本界面图3-6Flash5.0基本界面3.1.3使用网页图像的要点

确保文件较小1．使图像具有所需的像素大小所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图像大小，例如，在同一种显示模式下，一个1024×768的图像就显然比800×600的图像大的多。在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更改图像的“ImageSize”。一般在修改之后，图像的文件大小会显著变化。例如，在Photoshop6.0中，可以使用“Image”菜单中的“ImageSize”命令，此时弹出如图3-7所示的“ImageSize”对话框，可以在其中更改图像的宽度、高度和分辨率。图3-7Photoshop6.0的“ImageSize”对话框2．采用正确的格式进行优化处理一般图形图像处理软件都可以进行这些工作。例如，在Photoshop6.0中，如果要设置图像的格式和优化选项，可以先将图像文件打开，然后选择“File”菜单中的“SaveforWeb”命令，此时打开如图3-8所示的“SaveforWeb”对话框。图3-8“SaveforWeb”对话框图3-8“SaveforWeb”对话框

控制图像的数量和质量

合理使用动画3.2

图像标记符

IMG3.2.1插入图像

以下HTML代码说明了如何在网页中插入一个图像，在浏览器中的显示效果如图3-9所示。<HTML><HEAD><TITLE>插入图像示例</TITLE></HEAD><BODY>我插入的第一幅图像：<IMGsrc="oldMM.gif"alt="oldMM"></BODY></HTML>3.2.2设置图像属性

指定图像的宽和高

图像的边框

设置图像周围的空白

图像的对齐1．图像在页面中的对齐设置图像在页面中的对齐与设置文本对齐类似，可以使用DIV或P标记符将IMG标记符括起来，然后使用align属性。例如，以下HTML语句将使图像居中对齐（图像默认时与文本一样是左对齐的）：<Palign="center"><IMGsrc="oldMM.gif"alt="oldMM">

效果如图3-10所示。图

3-10图像在页面中居中对齐

2．图像与周围内容的垂直对齐以下HTML代码说明了align属性如何控制文本与图像的垂直对齐（同时显示了border属性的效果），如图3-11所示。<HTML><HEAD><TITLE>文本与图像的垂直对齐示例</TITLE></HEAD><BODY><DIValign="center">此图像与文本<IMGsrc="nba.gif"border="1"align="top">顶部对齐此图像与文本<IMGsrc="nba.gif"border="1"align="middle">中央对齐此图像与文本<IMGsrc="nba.gif"border="1"align="bottom">底部对齐</DIV></BODY></HTML>图3-11文字与图像的垂直对齐3．图文混排时的图像对齐以下HTML代码显示了文本与图像的环绕效果（同时显示了hspace

和vspace

属性的效果），如图3-12所示。<HTML><HEAD><TITLE>文本与图像的环绕示例</TITLE></HEAD><BODY>

<IMGsrc="barbarian.jpg"align="right"hspace="10"vspace="10">野蛮人--文明边缘的几个部落中的成员之一，拒绝一切看起来温柔和软弱的事物对他的影响。在部落之间的不断战争中他活了下来，这得益于坚定的意志和强健的体格。虽然缺乏文明人的心计，但是他能够敏锐的感觉到周围的环境，因为这一切来自他那动物般的直觉，这也使得野蛮人让人想起了民间关于狼人的一些传说。事实上他们坚信能够召唤图腾上动物的灵魂来鼓舞他们，并且因而得到非凡的力量和能力，不过这些召唤只是改善他们早已完美的战斗技能罢了。

<IMGsrc="sorceress.jpg"align="left"hspace="10"vspace="10">女巫——反叛的女人，她从东方男性魔法师占优势的魔法部落中偷取了如何使用魔法的秘密，使她成为了使用神秘巫术的专家，尽管她在白刃战斗中有很大不足，但她可以使用凶猛的进攻和防御魔法来弥补这一点不足。狐独和隐居的个性使很多人不理解她，有时候她看起来反复无常，但是事实上，她懂得怎样在次序和混乱中找到胜利的真谛。<BODY></HTML>图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）选择“Modify”菜单中的“Group”命令，或者直接按【Ctrl+G】键，将圆形对象群组。（5）在时间线面板的第20帧处单击鼠标右键，然后选择“InsertKeyframe”（插入关键帧）命令，如图3-16所示。（6）用箭头工具将圆形移动到画布右边，选择“Window”菜单“Panels”（浮动面板）子菜单中的“Transform”（变形）命令，打开变形面板，选中“Constrain”（锁定纵横比）选项，然后在宽度框中输入50%，最后按【Enter】键，如图3-17所示。

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

根据以上创建过程，我们发现在Flash中制作动画效果是非常简单的，很多时候并不需要我们一幅图一幅图地画，因为Flash能自动生成所需要的图。有关用Flash制作动画的进一步内容，请读者参考其他相关书籍。制作完Flash动画后，需要将它导出为网页中能够使用的格式，即使用“File”菜单中的“ExportMovie”（导出电影）命令，将所制作的动画导出为.swf

格式。说明：Flash源文件的格式是.fla，而能够在网页中使用的格式是.swf。

SWF格式的文件不能用IMG标记符插入，必须使用OBJECT标记符。假如我们刚才制作的圆形滚动动画被导出为ball.swf，那么可以使用以下HTML语句将其插入到网页中：<OBJECTclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http:///pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"width="550"height="400"><paramname=movievalue="ball.swf"><paramname=qualityvalue=high>

<EMBEDsrc="ball.swf"quality=highpluginspage="/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash"width="550"height="400"></EMBED></OBJECT>说明：只有.swf

文件能用以上代码插入到网页中。很多从网上下载的Flash动画，比如一些“阿贵”的小电影，都已经打包成为.exe文件，它们是不能被嵌入到网页中的。一般情况下，我们都不直接用

HTML的方式插入

Flash动画，更多的是直接用Dreamweaver

插入（能够自动生成以上代码）。说明：有关

OBJECT标记符的内容，请参见本书第

5章。有关

Dreamweaver

的内容，请参见本书第

9章。3.3.3

使用

GIF动画

GIF动画是最基本的一类动画，它的创建反映了动画的最基本原理。例如，下面以在Fireworks中制作前面介绍的马儿奔跑动画为例，简要说明GIF动画的制作过程：（1）启动Fireworks4.0。（2）选择“File”菜单中的“New”命令，在“NewDocument”（新建文档）对话框中，将宽度和高度设置为动画所需大小，将分辨率设置为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）如果要更改动画播放的速度，可以双击帧面板右边的帧延时数字列表项，然后在弹出的面板中修改帧的延长时间。如果修改了某一帧的帧延时，那么可以变化这一帧的播放时间。如果要更改整个动画的播放速度，那么应修改所有帧的帧延时，此时按住【Shift】键选中所有帧，然后双击“帧延时”列，则可以修改整个动画的播放速度。（7）选择“File”菜单中的“Save”命令，将文档保存。注意：此时保存的是Fireworks的默认格式.png

格式，如果要将动画插入到网页中，还应该将其导出为动画GIF格式。（8）选择“Window”菜单中的“Optimize”（优化）命令，打开优化面板，在优化面板中将文件的优化格式设置为“AnimatedGIF”（动画GIF），如图3-23所示。图

3-23设置优化格式为动画GIF（9）选择“File”菜单中的“Export”（导出）命令，然后在“导出”对话框中将文件保存在特定位置即可，此时导出的文件格式为动画GIF（扩展名为.gif）。

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

相对地址与绝对地址

什么是URL

绝对URL与相对URL3.4.2

页面链接

以下HTML代码显示了如何在网页中创建超链接，效果如图3-24所示。说明：超链接默认时有下划线，并且显示为蓝色。当浏览者将鼠标移动到超链接上时，鼠标指针通常会变成手形，同时在状态栏中显示出超链接的目标文件。另外，超链接包括多种不同的状态，可以在body标记符中设置link等属性来控制超链接颜色的显示，具体请参见本书第1章。<HTML><HEAD><TITLE>超链接示例</TITLE></HEAD><BODY>这是一个<Ahref="page2.htm">超链接</A>欢迎参观我的<Ahref="http://">个人网站</A></BODY></HTML>图3-24在网页中设置超链接说明：如果href属性指定的文件格式是浏览器能够直接显示的，那么单击超链接时将会直接显示相应文件。例如，如将href的值指定为图像文件，那么单击超链接就可以直接在浏览器中显示图像。如果href属性指定的文件格式是浏览器所不能识别的格式，那么将获得下载超链接的效果。例如，如果我们将超链接的目标文件指定为xxx.zip，那么当浏览者在浏览器中单击相应超链接时，则将弹出如图3-25所示的对话框，提示进行下载。图3-25提示文件下载对话框3.4.3锚点链接

以下HTML代码说明了如何使用指向同一页面特定部分的超链接，效果如图3-26所示。<HTML><HEAD><TITLE>锚点链接示例</TITLE></HEAD><BODY><Aname="top"></A>目录<Ahref="#amazon">亚马逊战士</A>|<Ahref="#paladin">游侠</A>|<Ahref="#necromancer">巫师</A><HR><Aname="amazon">亚马逊战士</A>——一个强悍的女人，唯一知道的是，她来自靠近南部海域的广阔平原上的游牧民族，因为部落之间不断发生冲突，使得这位游牧战士习惯为自已而战，并促使她拥有强烈的中立个性和能在恶劣的环境中战斗旅行的体能。她擅长使用弓箭对付敌人，并能熟练使用长矛和其他的一些投掷类武器，空手格斗也是她所擅长的。<Ahref="#top">返回目录</A><HR><Aname="paladin">游侠</A>——来自一个特殊的军队，靠近宗教圣地Zakarum，一个以信念为盾随时准备战斗的军人。他为自己认为正确的信念而战，他的坚定给予他力量并祝福他的战友，同时残酷的惩罚那些罪人。因此有一些人称他为过度紧张的狂热者，但是其他的人公认他充满了力量并且散发着仁慈的光芒。<Ahref="#top">返回目录</A><HR><Aname="necromancer">巫师</A>——来自南方充满蒸汽的沼泽地，一位披着斗蓬的神秘人物。就像他的名字一样，巫师来自不体面的男巫师族，他能够使用死亡和召唤魔法控制怪物为已所用，擅长使用召唤亡灵的魔法。因为小时候在沼泽地里生活和学习魔法，致使他的皮肤犹如死尸，体型和骨胳的怪异更使得人们不敢正视并且远离他。但是毫无疑问，他是一位充满魔法力量的法师。<Ahref="#top">返回目录</A></BODY></HTML>3.4.4电子邮件链接

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

使用图像映射3.5.1什么是图像映射

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

定义映射区域

对映射区域进行引用下面以一个简单的实例来说明图像映射的制作方法。（1）首先在任意图形图像处理软件中打开要制作为图像映射的图像，找出所要定义的映射区域的坐标（例如在Fireworks中可以借助Info

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页制作教程-第3章图像与超链接

文档简介

温馨提示

最新文档

评论

网页制作教程-第3章图像与超链接

文档简介

温馨提示

最新文档

评论

相关文档