网页制作与开发教程 第3章网页中的图片.ppt

《网页制作与开发教程 第3章网页中的图片.ppt》由会员分享，可在线阅读，更多相关《网页制作与开发教程 第3章网页中的图片.ppt（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、与图片相关的与图片相关的HTML标签标签3.2实践与练习：修改图片大小实践与练习：修改图片大小3.4使用使用Dreamweaver8插入图片插入图片3.3网页中的图片格式网页中的图片格式3.1实践与练习：对齐图像实践与练习：对齐图像3.5小结小结 图片是网页中不可缺少的元素，巧妙地图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。在网页中使用图片可以为网页增色不少。本章先介绍在网页中常用的两种图片格式，本章先介绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片再介绍如何在网页中插入图片，以及图片的样式和插入的位置。通过本章的学习，的样式和插入的位置。通过本章

2、的学习，读者可以做一些简单的图文网页，并根据读者可以做一些简单的图文网页，并根据自己的喜爱制作出不同的图片效果。自己的喜爱制作出不同的图片效果。3.1网页中的图片格式网页中的图片格式目前在网页上使用的图片格式主要是目前在网页上使用的图片格式主要是GIF和和JPG两种。两种。（1）GIF格式即为图像交换格式。格式即为图像交换格式。（2）JPG格式为静态图像压缩标准格式，格式为静态图像压缩标准格式，它为摄影图片提供了一种标准的有损耗它为摄影图片提供了一种标准的有损耗压缩方案。压缩方案。3.2与图片相关的与图片相关的HTML标签标签依照本书的惯例，先介绍一些与图片相依照本书的惯例，先介绍一些与图片相

3、关的关的HTML标签，然后介绍如何使用标签，然后介绍如何使用Dreamweaver8软件进行辅助设计。软件进行辅助设计。3.2.1 插入图片插入图片图图3-1 3-1 图片的插入图片的插入【例例3-1】在网页中插入图片示例在网页中插入图片示例图片的插入图片的插入3.2.2 图片标签属性的应用图片标签属性的应用下面将介绍下面将介绍“”标签中的几个重标签中的几个重要属性。首先请看例要属性。首先请看例3-2所示的代码，看看所示的代码，看看在在“”标签中如何控制图片的大小。标签中如何控制图片的大小。图图3-2 3-2 图片大小图片大小【例例3-2】图片大小控制示例图片大小控制示例图片的大小控制图片的大

4、小控制图图3-3 3-3 图片的边框设置图片的边框设置【例例3-3】图片边框设置示例图片边框设置示例图片的边框图片的边框图图3-4 3-4 文字代替图片文字代替图片【例例3-4】图片替代文字设置示例图片替代文字设置示例文字代替图片文字代替图片文字代替图片文字代替图片图图3-5 3-5 取消显示图片取消显示图片3.3使用使用Dreamweaver8插入图片插入图片将文本光标移到要插入图片的地方，这将文本光标移到要插入图片的地方，这里把这个位置设定为这段文字的最开头位里把这个位置设定为这段文字的最开头位置。选择置。选择“插入插入”菜单中的菜单中的“图像图像”命令，命令，在出现的文件选择对话框中选择

5、要插入的在出现的文件选择对话框中选择要插入的图片文件。在目录窗口下方有一行图片文件。在目录窗口下方有一行“相对相对于于”下拉框，选择下拉框，选择“文档文档”为与文档的相为与文档的相对路径，另一个选项是与根目录的相对路对路径，另一个选项是与根目录的相对路径，通常选择径，通常选择“文档文档”。图图3-6 3-6 在段首插入一幅图片在段首插入一幅图片图图3-7 3-7 设置图片属性设置图片属性图图3-8 3-8 设定图片为左对齐设定图片为左对齐 3.4实践与练习：修改图片大小实践与练习：修改图片大小本练习的目的是掌握在本练习的目的是掌握在Dreamweaver8中修改图片尺寸的方法和中修改图片尺寸的

6、方法和“重新取样重新取样”按按钮的功能。本例最终效果如图钮的功能。本例最终效果如图3-9所示。所示。图图3-9 3-9 预览效果预览效果图图3-10 3-10 输入文字输入文字 图图3-11 3-11 提示框提示框图图3-12 3-12 将图片放置到站点目录下将图片放置到站点目录下图图3-13 3-13 设置替换文本设置替换文本图图3-14 3-14 插入图片插入图片图图3-15 3-15 当前图片的尺寸当前图片的尺寸图图3-16 3-16 在属性面板中修改图片的尺寸在属性面板中修改图片的尺寸图图3-17 3-17 恢复原始尺寸恢复原始尺寸图图3-18 3-18 缩小后的图片效果缩小后的图片效

7、果图图3-19 3-19 直接修改图片的尺寸直接修改图片的尺寸图图3-20 3-20 启用启用“重新取样重新取样”功能功能 图图3-21 3-21 有关提示信息的对话框有关提示信息的对话框图图3-22 3-22 “重新取样重新取样”后的图片后的图片图图3-23 3-23 居中对齐图片居中对齐图片图图3-24 3-24 预览效果预览效果3.5实践与练习：对齐图像实践与练习：对齐图像练习通过对一段正文进行排版，掌握如练习通过对一段正文进行排版，掌握如何设置图片与正文之间的对齐方式。本例何设置图片与正文之间的对齐方式。本例最终效果如图最终效果如图3-25所示。所示。图图3-25 3-25 预览页面预

8、览页面图图3-26 3-26 输入正文输入正文图图3-27 3-27 单击单击“图像图像”按钮按钮图图3-28 3-28 设置辅助功能设置辅助功能图图3-29 3-29 插入图片插入图片图图3-30 3-30 重新取样图片重新取样图片图图3-31 3-31 选择选择“左对齐左对齐”命令命令图图3-32 3-32 左对齐效果左对齐效果图图3-33 3-33 右对齐图片右对齐图片图图3-34 3-34 预览页面预览页面小小结结本章首先介绍了在本章首先介绍了在HTML中插入图片的中插入图片的方法，这样就可以使网页图文并茂，更加方法，这样就可以使网页图文并茂，更加生动。然后介绍了使用生动。然后介绍了使用Dreamweaver8在在网页中插入图片文件的方法，并且利用网页中插入图片文件的方法，并且利用Dreamweaver8的辅助功能对图像文件作的辅助功能对图像文件作一些非常方便的设置和修改，这些都是制一些非常方便的设置和修改，这些都是制作网页中非常基础的操作，希望读者能够作网页中非常基础的操作，希望读者能够掌握熟练。掌握熟练。