网页制作与开发教程张强高建华温谦第3章网页中的图片.pptVIP

第3章网页中的图片 图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。通过本章的学习，读者可以做一些简单的图文网页，并根据自己的喜爱制作出不同的图片效果。 3.1 网页中的图片格式 目前在网页上使用的图片格式主要是GIF和JPG两种。 （1）GIF格式即为图像交换格式。 （2）JPG格式为静态图像压缩标准格式，它为摄影图片提供了一种标准的有损耗压缩方案。 3.2 与图片相关的HTML标签 依照本书的惯例，先介绍一些与图片相关的HTML标签，然后介绍如何使用Dreamweaver 8软件进行辅助设计。 3.2.1 插入图片 【例3-1】 在网页中插入图片示例 html head title图片的插入/title /head body img src= 01.jpg /body /html 3.2.2 图片标签属性的应用 下面将介绍“img”标签中的几个重要属性。首先请看例3-2所示的代码，看看在“img”标签中如何控制图片的大小。 【例3-2】 图片大小控制示例 html head title图片的大小控制/title /head body img src= 01.jpg height=100 img src= 02.jpg width=100 img src= 03.jpg height=150 width=200 /body /html 【例3-3】 图片边框设置示例 html head title图片的边框/title /head body img src= 04.jpg width=80 height=60 border=6 img src= 04.jpg width=120 height=100 border=4 img src= 04.jpg width=160 height=140 border=2 /body /html 【例3-4】 图片替代文字设置示例 html head title文字代替图片/title /head body img src= 06.jpg alt=一朵花br 文字代替图片 /body /html 3.3 使用Dreamweaver?8插入图片 将文本光标移到要插入图片的地方，这里把这个位置设定为这段文字的最开头位置。选择“插入”菜单中的“图像”命令，在出现的文件选择对话框中选择要插入的图片文件。在目录窗口下方有一行“相对于”下拉框，选择“文档”为与文档的相对路径，另一个选项是与根目录的相对路径，通常选择“文档”。 3.4 实践与练习：修改图片大小 本练习的目的是掌握在Dreamweaver 8中修改图片尺寸的方法和“重新取样”按钮的功能。本例最终效果如图3-9所示。 3.5 实践与练习：对齐图像 练习通过对一段正文进行排版，掌握如何设置图片与正文之间的对齐方式。本例最终效果如图3-25所示。 小 结 本章首先介绍了在HTML中插入图片的方法，这样就可以使网页图文并茂，更加生动。然后介绍了使用Dreamweaver 8在网页中插入图片文件的方法，并且利用Dreamweaver 8的辅助功能对图像文件作一些非常方便的设置和修改，这些都是制作网页中非常基础的操作，希望读者能够掌握熟练。 图3-17 恢复原始尺寸 图3-18 缩小后的图片效果 图3-19 直接修改图片的尺寸 图3-20 启用“重新取样”功能 图3-21 有关提示信息的对话框 图3-22 “重新取样”后的图片 图3-23 居中对齐图片 图3-24 预览效果 图3-25 预览页面 图3-26 输入正文 图3-27 单击“图像”按钮 图3-28 设置辅助功能 图3-29 插入图片 图3-30 重新取样图片 图3-31 选择“左对齐”命令 图3-32 左对齐效果 图3-33 右对齐图片 图3-34 预览页面 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 尚辅网 / 与图片相关的HTML标签 3.2 实践与练习：修改图片大小 3.4 使用Dreamweaver?8插入图片