第3章第3章 图像和超链接.pptVIP

第3章 图像与超链接 ;3.1 Web 页图像基础 3.2 图像标记符 IMG 3.3 在页面中显示动画 3.4 创建超链接 3.5 使用图像映射 ;3.1 Web 页图像基础 3.1.1 Web 页图像格式 GIF 格式 对于目前广泛使用的 GIF 格式而言，还具有透明色的特点，即可以将图片中的某种颜色设置为透明色。这对于实现某些网页效果来说，具有非常现实的意义。例如，图 3-1 对比了一般的 GIF 图像和具有透明色的 GIF 图像。对于多数图像处理软件（例如 Fireworks）甚至某些网页制作软件（例如 FrontPage），都提供了将图片中的某种颜色转换为透明色的功能。;图 3-1 普通 GIF 与透明 GIF 的区别 ; JPEG 格式 图3-2中显示了两种不同压缩比率的 JPEG 图的效果。; PNG 格式 矢量格式 位图格式与矢量格式的区别如图 3-3 所示。 ;3.1.2选择图形图像处理软件 PhotoshopPhotoshop 6.0 的界面如图 3-4 所示。 ; Fireworks Flash Flash界面如图 3-5、3-6 所示。;图 3-6 Flash5.0 基本界面;3.1.3　使用网页图像的要点 确保文件较小 1．使图像具有所需的像素大小 所谓图像的像素大小就是指由图像本身的像素宽和像素高所确定的图像大小，例如，在同一种显示模式下，一个 1024×768 的图像就显然比 800×600的图像大的多。; 在大多数情况下，如要将原来像素大小比较大的图像缩小，应使用图形图像处理软件更改图像的“Image Size”。一般在修改之后，图像的文件大小会显著变化。 例如，在 Photoshop6.0 中，可以使用“Image”菜单中的“Image Size”命令，此时弹出如图 3-7 所示的“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.2 图像标记符 IMG 3.2.1 插入图像 以下HTML代码说明了如何在网页中插入一个图像，在浏览器中的显示效果如图 3-9 所示。 ;;3.2.2　设置图像属性 指定图像的宽和高 图像的边框 设置图像周围的空白 图像的对齐 1．图像在页面中的对齐 ; 设置图像在页面中的对齐与设置文本对齐类似，可以使用 DIV 或 P 标记符将 IMG 标记符括起来，然后使用 align 属性。 例如，以下 HTML 语句将使图像居中对齐（图像默认时与文本一样是左对齐的）： P align=center IMG src=oldMM.gif alt=old MM /P 效果如图 3-10 所示。 ;图 3-10 图像在页面中居中对齐 ;2．图像与周围内容的垂直对齐 以下HTML代码说明了 align 属性如何控制文本与图像的垂直对齐（同时显示了 border 属性的效果），如图 3-11 所示。 HTML HEADTITLE文本与图像的垂直对齐示例/TITLE/HEAD BODY DIV align=center;P此图像与文本IMG src=nba.gif border=1 align=top顶部对齐/P P此图像与文本IMG src=nba.gif border=1 align=middle中央对齐/P P此图像与文本IMG src=nba.gif border=1 align=bottom底部对齐/P /DIV /BODY /HTML ;图 3-11 文字与图像的垂直对齐;3．图文混排时的图像对齐 以下 HTML 代码显示了文本与图像的环绕效果（同时显示了 hspace 和 vspace 属性的效果），如图 3-12 所示。 HTML HEADTITLE文本与图像的环绕示例/TITLE/HEAD BODY; PIMG src=barbarian.jpg align=right hspace=10 vspace=10野蛮