《网页制作与开发教程第3章网页中的图片》由会员分享，可在线阅读，更多相关《网页制作与开发教程第3章网页中的图片（50页珍藏版）》请在金锄头文库上搜索。
1、图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。通过本章的学习，读者可以做一些简单的图文网页，并根据自己的喜爱制作出不同的图片效果。,3.1 网页中的图片格式,目前在网页上使用的图片格式主要是GIF和JPG两种。 （1）GIF格式即为图像交换格式。 （2）JPG格式为静态图像压缩标准格式，它为摄影图片提供了一种标准的有损耗压缩方案。,3.2 与图片相关的HTML标签,依照本书的惯例，先介绍一些与图片相关的HTML标签，然后介绍如何使用Dreamweaver 8软件进行辅助设计。,
2、3.2.1 插入图片,图3-1 图片的插入,【例3-1】 在网页中插入图片示例图片的插入,3.2.2 图片标签属性的应用,下面将介绍“”标签中的几个重要属性。首先请看例3-2所示的代码，看看在“”标签中如何控制图片的大小。,图3-2 图片大小,【例3-2】 图片大小控制示例图片的大小控制,图3-3 图片的边框设置,【例3-3】 图片边框设置示例图片的边框,图3-4 文字代替图片,【例3-4】 图片替代文字设置示例文字代替图片文字代替图片,图3-5 取消显示图片,3.3 使用Dreamweaver 8插入图片,将文本光标移到要插入图片的地方，这里把这个位置设定为这段文字的最开头位置。选择“插入”
3、菜单中的“图像”命令，在出现的文件选择对话框中选择要插入的图片文件。在目录窗口下方有一行“相对于”下拉框，选择“文档”为与文档的相对路径，另一个选项是与根目录的相对路径，通常选择“文档”。,图3-6 在段首插入一幅图片,图3-7 设置图片属性,图3-8 设定图片为左对齐,3.4 实践与练习：修改图片大小,本练习的目的是掌握在Dreamweaver 8中修改图片尺寸的方法和“重新取样”按钮的功能。本例最终效果如图3-9所示。,图3-9 预览效果,图3-10 输入文字,图3-11 提示框,图3-12 将图片放置到站点目录下,图3-13 设置替换文本,图3-14 插入图片,图3-15 当前图片的尺寸
4、,图3-16 在属性面板中修改图片的尺寸,图3-17 恢复原始尺寸,图3-18 缩小后的图片效果,图3-19 直接修改图片的尺寸,图3-20 启用“重新取样”功能,图3-21 有关提示信息的对话框,图3-22 “重新取样”后的图片,图3-23 居中对齐图片,图3-24 预览效果,3.5 实践与练习：对齐图像,练习通过对一段正文进行排版，掌握如何设置图片与正文之间的对齐方式。本例最终效果如图3-25所示。,图3-25 预览页面,图3-26 输入正文,图3-27 单击“图像”按钮,图3-28 设置辅助功能,图3-29 插入图片,图3-30 重新取样图片,图3-31 选择“左对齐”命令,图3-32 左对齐效果,图3-33 右对齐图片,图3-34 预览页面,小 结,本章首先介绍了在HTML中插入图片的方法，这样就可以使网页图文并茂，更加生动。然后介绍了使用Dreamweaver 8在网页中插入图片文件的方法，并且利用Dreamweaver 8的辅助功能对图像文件作一些非常方便的设置和修改，这些都是制作网页中非常基础的操作，希望读者能够掌握熟练。,
