第4章 网页中的图片.ppt

网页制作与开发教程 第4章网页中的图片 前 言 图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，设置图片的样式，以及创建图片超链接的方法。通过本章的学习，读者可以做一些简单的图文网页，并根据自己的喜爱制作出不同的图片效果。 4.1 网页中的图片格式 4.1 网页中的图片格式 目前在网页上使用的图片格式主要是GIF和JPG两种。 （1）GIF格式即为图像交换格式。 （2）JPG格式为静态图像压缩标准格式，它为摄影图片提供了一种标准的有损耗压缩方案。 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 插入图片 图像标签格式 img src=路径/图像文件 三种方法 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 图片标签属性的应用 height：图像的高度 width：图像的宽度 alt：图像的替代文字 border：图像的边框宽度 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 图片标签属性的应用 align：图像的对齐方式 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 4.2 使用Dreamweaver插入图片 4.3 实践与练习：修改图片大小 4.3 实践与练习：修改图片大小 4.3 实践与练习：修改图片大小 4.4 实践与练习：对齐图像 4.5 使用Dreamweaver创建图片超链接 图片超链接 与文字超链接的创建方法相同 4.5 使用Dreamweaver创建图片超链接 4.5 使用Dreamweaver创建图片超链接 创建图片热区 可以在一幅图片中定义若干区域，分别响应不同的超链接。 小 结 本章介绍了在网页中插入图片的方法，这样就可以使网页图文并茂，更加生动。并且利用Dreamweaver 8的辅助功能对图像文件作一些非常方便的设置和修改，这些都是制作网页中非常基础的操作。然后介绍了建立图片超链接以及在图片中创建热区的方法。 小 结 本章要求 熟练掌握创建图片的各种方法，熟悉图片的各种属性 掌握创建图片热区的方法 本章作业 在Dreamweaver中练习课本中的各例题 按照书中的步骤，完成课本3.4和3.5的练习，完成课后练习3-4 按照书中的步骤，完成课本4.4和4.5的练习 下载一副中国地图，在该地图上分别标记出三个省建立热区，分别对这三个省做简要的介绍。 对照代码，学习HTML标签 图4-15 绘制矩形热点区域 图4-16 完成矩形热点区域的绘制 图4-17 指针热点工具 图4-18 设置热区的链接地址和弹出方式 图4-19 选择“椭圆形热点工具” 图4-20 绘制椭圆热点区域 图4-21 添加链接地址 图4-22 绘制多边形热点区域 图4-23 预览页面 设置图像属性和编辑图像 * * * * 网页中的图像格式 图像的基本操作 1. 输入文档路径 2. 选择插入图像 3. 将图像文件拖入光标处 图像的宽和高 图像的边框宽度 图像的替代文字 图3-4 文字代替图片 图3-5 取消显示图片 图片在网页中的对齐方式 图片与文字之间的对齐方式 设置图像在网页中的对齐方式 div align=“center” img src=1.jpg /div 设置图像与文字的对齐方式 图像裁剪工具 图3-21 有关提示信息的对话框 输入文档路径 定义不同形状的热区 热区名字 制作需要链接的页面 输入正文 插入图片 图4-14 启用“矩形热点工具” * *