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

《网页制作与开发教程 教学课件 作者 张强 高建华 温谦 第3章 网页中的图片.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第3章网页中的图片与图片相关的HTML标签3.2实践与练习：修改图片大小3.4使用Dreamweaver8插入图片3.3网页中的图片格式3.1实践与练习：对齐图像3.5小结图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。通过本章的学习，读者可以做一些简单的图文网页，并根据自己的喜爱制作出不同的图片效果。3.1网页中的图片格式目前在网页上使用的图片格式主要是GIF和JPG两种。（1）GIF格式即为图像交换格式。（2）JPG格式为静态图像压缩标准格式，它为摄影图片提供了

2、一种标准的有损耗压缩方案。3.2与图片相关的HTML标签依照本书的惯例，先介绍一些与图片相关的HTML标签，然后介绍如何使用Dreamweaver8软件进行辅助设计。3.2.1插入图片图3-1图片的插入【例3-1】在网页中插入图片示例3.2.2图片标签属性的应用下面将介绍“”标签中的几个重要属性。首先请看例3-2所示的代码，看看在“”标签中如何控制图片的大小。图3-2图片大小【例3-2】图片大小控制示例<

3、head>图3-3图片的边框设置【例3-3】图片边框设置示例

4、rc=04.jpgwidth=160height=140border=2>图3-4文字代替图片【例3-4】图片替代文字设置示例
文字代替图片图3-5取消显示图片3.3使用Dreamweaver8插入图片将文本光标移到要插入图片的地方，这里把这个位置设定为这段文字的最开头位置。选择“插入”菜单中的“图像”命令，在出现的文件选择对话框中选择要插入的图片文件。在目录窗口下方有一行“相对于”下拉

5、框，选择“文档”为与文档的相对路径，另一个选项是与根目录的相对路径，通常选择“文档”。图3-6在段首插入一幅图片图3-7设置图片属性图3-8设定图片为左对齐3.4实践与练习：修改图片大小本练习的目的是掌握在Dreamweaver8中修改图片尺寸的方法和“重新取样”按钮的功能。本例最终效果如图3-9所示。图3-9预览效果图3-10输入文字图3-11提示框图3-12将图片放置到站点目录下图3-13设置替换文本图3-14插入图片图3-15当前图片的尺寸图3-16在属性面板中修改图片的尺寸图3-17恢复原始尺寸图3-18缩小后的图片效果图3-19直接修改图片的尺寸图3-20启用“重新取样”

6、功能图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中插入图片的方法，这样就可以使网页图文并茂，更加生动。然后介绍了使用Dreamweaver8在网页中插入图片文件的方法，并且

7、利用Dreamweaver8的辅助功能对图像文件作一些非常方便的设置和修改，这些都是制作网页中非常基础的操作，希望读者能够掌握熟练。