资源描述：
《网页制作教程第3章图像与超链接课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、第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普通GI
2、F与透明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-5F
3、ireworks4.0基本界面图3-6Flash5.0基本界面3.1.3使用网页图像的要点3.1.3.1确保文件较小1．使图像具有所需的像素大小所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图像大小，例如，在同一种显示模式下，一个1024×768的图像就显然比800×600的图像大的多。在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更改图像的“ImageSize”。一般在修改之后，图像的文件大小会显著变化。例如，在Photoshop6.0中，可以使用“Image”菜单中的“ImageSize”命令，此时
4、弹出如图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.
5、3合理使用动画3.2图像标记符IMG3.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．图像在页面中的对齐设置图像在页面中的对齐与设置文本对齐类似6、，可以使用DIV或P标记符将IMG标记符括起来，然后使用align属性。例如，以下HTML语句将使图像居中对齐（图像默认时与文本一样是左对齐的）：
效果如图3-10所示。图3-10图像在页面中居中对齐2．图像与周围内容的垂直对齐以下HTML代码说明了align属性如何控制文本与图像的垂直对齐（同时显示了border属性的效果），如图3-11所示。文本与图像的垂直对齐示例7、DY>此图像与文本顶部对齐
此图像与文本中央对齐
此图像与文本底部对齐
