第3章图像与超链接

第3章图像与超链接3.1Web页图像基础3.2图像标记符IMG3.3在页面中显示动画3.4创建超链接3.5使用图像映射3.1Web页图像基础3.1.1Web页图像格式3.1.1.1GIF格式对于目前广泛使用的GIF格式而言，还具有透明色的特点，即可以将图片中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的意义。例如，图3-1对比了一般的GIF图像和具有透明色的GIF图像。对于多数图像处理软件（例如Fireworks）甚至某些网页制作软件（例如FrontPage），都提供了将图片中的某种颜色转换为透明色的功能。图3-1普通GIF与透明GIF的区别3.1.1.2JPEG格式图3-2中显示了两种不同压缩比率的JPEG图的效果。图3-2不同质量JPEG图像的对比3.1.1.3PNG格式3.1.1.4矢量格式位图格式与矢量格式的区别如图3-3所示。位图，用点描述图像矢量图，用线条等数学信息描述图像图3-3位图与矢量图的对比3.1.2选择图形图像处理软件3.1.2.1PhotoshopPhotoshop6.0的界面如图3-4所示。图3-4Photoshop6.0的基本界面3.1.2.2Fireworks3.1.2.3FlashFlash界面如图3-5、3-6所示。图3-5Fireworks4.0基本界面图3-6Flash5.0基本界面3.1.3使用网页图像的要点3.1.3.1确保文件较小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.1.3.2控制图像的数量和质量3.1.3.3合理使用动画3.2图像标记符IMG3.2.1插入图像以下HTML代码说明了如何在网页中插入一个图像，在浏览器中的显示效果如图3-9所示。HTMLHEADTITLE插入图像示例/TITLE/HEADBODYP我插入的第一幅图像：/PIMGsrc=oldMM.gifalt=oldMM/BODY/HTML3.2.2设置图像属性3.2.2.1指定图像的宽和高3.2.2.2图像的边框3.2.2.3设置图像周围的空白3.2.2.4图像的对齐1．图像在页面中的对齐设置图像在页面中的对齐与设置文本对齐类似，可以使用DIV或P标记符将IMG标记符括起来，然后使用align属性。例如，以下HTML语句将使图像居中对齐（图像默认时与文本一样是左对齐的）：Palign=centerIMGsrc=oldMM.gifalt=oldMM/P效果如图3-10所示。图3-10图像在页面中居中对齐2．图像与周围内容的垂直对齐以下HTML代码说明了align属性如何控制文本与图像的垂直对齐（同时显示了border属性的效果），如图3-11所示。HTMLHEADTITLE文本与图像的垂直对齐示例/TITLE/HEADBODYDIValign=centerP此图像与文本IMGsrc=nba.gifborder=1align=top顶部对齐/PP此图像与文本IMGsrc=nba.gifborder=1align=middle中央对齐/PP此图像与文本IMGsrc=nba.gifborder=1align=bottom底部对齐/P/DIV/BODY/HTML图3-11文字与图像的垂直对齐3．图文混排时的图像对齐以下HTML代码显示了文本与图像的环绕效果（同时显示了hspace和vspace属性的效果），如图3-12所示。HTMLHEADTITLE文本与图像的环绕示例/TITLE/HEADBODYPIMGsrc=quanzhanyi1.jpgalign=righthspace=10vspace=10特点：*国内制造，拓普康品质*全中文显示，操作简单方便*数字/字母键输入，野外输入更加方便*丰富的应用测量程序，如道路测设软件、对边测量、悬高测量、面积计算、偏心测量、新点设置、坐标测量、坐标放样等等，极大地方便了工程应用*超大容量内存，数据管理方便简捷坐标：24000已知点数据采集点：24000观测点*装备长效电池，作业时间长达10小时*特别耐用，防水防尘等级达IP54级*测角精度：±2”/5”，绝对法测角，无需过零检验*测距精度：±（2mm+2ppm*D）*测程：2km/单棱镜免棱镜款测程350米*高速测距：精测1.2秒，粗测0.7秒，跟踪0.4秒/PPIMGsrc=shuizhunyi1.jpgalign=lefthspace=10vspace=10一流的光学系统拥有最优质的光学镜头，可清晰读数。无论在拂晓、傍晚，还是在高大建筑物的阴影之中，您都可以轻松完成任务；最小视距为50厘米，保证您在最狭窄的空间也能正常工作；符合人体工程学，镜头良好的对比度性能确保您在强光下也能精确照准、读数，最大程度上减少视觉疲劳。操作简单圆水准气泡和水平刻度紧邻望远镜，读取方便；采用粗瞄准器可轻松找到目标方向；成像正立，分布两侧的无限位螺旋助您快速精准照准目标；NA728和NA730还配有粗调/精调调焦螺旋，观测目标更加清晰。防水防震最前沿的技术和制造工艺使得NA700系列具有极好的密封性及防震性能：水、粉尘及污物不会对仪器产生任何影响；即使不慎摔落或受到其他冲击，仪器也可直接使用，而不必重新调校、检查。/PBODY/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-444553540000codebase==5,0,0,0width=550height=400paramname=movievalue=ball.swfparamname=qualityvalue=highEMBEDsrc=ball.swfquality=highpluginspage==ShockwaveFlashtype=application/x-shockwave-flashwidth=550height=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格式，如果要将动画插入到网页中，还应该