1、第五讲 图像,主要内容,网络图像的格式 插入图像 图像属性 图像占位符 鼠标经过图像的使用 导航条的使用,网络图像的格式(P116),GIF:最多支持8bits色,无损压缩,支持透明背景 和动画效果. JPG:最多支持24bits色,有损压缩,不支持透明 背景和动画效果. PNG:最多支持32bits色,无损压缩,支持透明背 景和动画效果. 注意:PNG格式图像虽然最为优越,但由于浏览器支持效果 不好及网络传输速度的限制,目前最常用还是GIF和 JPG格式.,插入图像,步骤: 1. 单击插入工具栏/常用/“插入图像”按钮 Ctrl+Alt+I 2. 浏览选择图像. 代码: 原理: 插入图像不是
2、真的将图像插入到网页的当前位置,而 是在此位置创建了到图像文件的链接.当浏览器打开 网页时,先根据链接找到图像文件,然后将其下载到 本地硬盘中,待其下载完毕即可显示图像.,图像属性(P120),为图像添加链接 整幅图像 : 与文本大致相同. 图像的不同部分 : 在图像上使用热点工具画出热点区域,再在link 框中输入链接地址. 替代文字: 作用: 1. 鼠标移动到图像上,出现此文字. 2. 当浏览器禁止显示图像时,此文字会出现在图像位置上. 低品质源: 作用: 当图像比较大,网络速度慢时,下载图像需要较长时间,此时 可为此图像指定一个低品质源(一般为它的缩略图或灰度版本), 下载时浏览器会先下
3、载这个低品质图像并先显示,当原图像下载 完毕,再将其显示.,设置图像边距 垂直边距 水平边距 图像的对齐(P121) 水平对齐 垂直对齐: 图文混排: 对齐: 左对齐/右对齐 调整图像大小 选中图像 直接在属性中修改宽、高值。 调整控制手柄（Shift键等比例）,图像占位符、鼠标经过图像、导航条的使用,图像占位符(P118) 作用：为图像占位，结合fw使用。 鼠标经过图像(翻转图片）(P125) 作用：当鼠标经过图像时，显示另外一幅图像，当鼠标离开图像，恢 复原始图像。 设置：单击插入工具栏/常用/“鼠标经过图像”按钮进行设置. 注意：1.准备两幅一样大小的图像。 2.预载鼠标经过图像：提前将鼠标经过要显示的图像载入，避 免鼠标经过原始图像后等待一段时间才能显示经过图像。 导航条 作用：相当于鼠标经过图像的扩展，主要目的是用变化的图片实现多 个页面的链接。,第五讲总结,图像的使用（重点） 图像无法正确预览的原因： 1.图像格式不正确. 2.图像没有在站点中. 3.网页文件不在站点中. 4.图像文件或图像所在文件夹用中文命名.,
