dreamweaver网页设计之：网页中的图片

《dreamweaver网页设计之：网页中的图片》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页中的图片第三章网页设计与制作2021/10/8本章要求主要内容：了解网页中图片的主要格式掌握与图片相关的HTML标签掌握用Dreamweaver插入图片，并能调整图片的相关参数主要目的：学会使用HTML语言插入图片掌握在Dreamweaver中修改图片尺寸的方法。能够创建网站相册2021/10/82本章内容与图片相关的HTML标签3.2实践与练习：修改图片大小3.4使用Dreamweaver8插入图片3.3网页中的图片格式3.1实践与练习：对齐图像3.5小结2021/10/83第3章网页中的图片图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。本章先介

2、绍在网页中常用的两种图片格式，再介绍如何在网页中插入图片，以及图片的样式和插入的位置。2021/10/843.1网页中的图片格式Web页中通常使用的图像文件有JPEG、GIF、PNG3种格式，但最常用的网页图片为JPEG、GIF两种图像格式。为了保证浏览者下载网页的速度，常使用JPEG和GIF这两种压缩格式的图像。GIF文件JPEG文件PNG文件2021/10/853.1网页中的图片格式目前在网页上使用的图片格式主要是GIF和JPG两种。GIF格式即为图像交换格式。GIF格式只支持256色以内的图像，且采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件；同时它支持

3、透明色，可以使图像浮现在背景之上；其为交换格式，在浏览器下载整张图片之前，用户就可以看到该图像，所以在网页制作中首选的图片格式为GIF。JPG格式为静态图像压缩标准格式。它为摄影图片提供了一种标准的有损耗压缩方案。在保存时能够将人眼无法分辨的资料删除,以节省存储空间,但这些被删除的资料无法在解压时还原。2021/10/863.1网页中的图片格式在网页中使用图像时应该注意的几个问题1．网页的图像文件要小2．控制网页中图像的数量和质量3．在网页中恰到好处地添加动画2021/10/873.2与图片相关的HTML标签1、插入图片标签的作用就是插入图片，其中属性“src”是该

4、标签的必要属性，该属性指定导入图片的导入位置和名称。注意：导入的图片与HTML文件是出于同一目录下的，如果不处于同一目录下，可以采用设置路径的方式来导入。关于路径的概念在下一章中进行介绍。2021/10/883.2与图片相关的HTML标签【例】在网页中插入图片示例2021/10/893.2与图片相关的HTML标签图片的插入2021/10/8103.2与图片相关的HTML标签2、图片标签属性的应用“width”“height”“bo

5、rder”“alt”2021/10/8113.2与图片相关的HTML标签①“width”和“height”属性控制图片大小依靠“width”和“height”属性：“width”属性控制图片的宽度，“height”属性控制图片的高度。当图片只设置了其中一个属性的时候，另一个属性就自动依照原始图片的两个属性值的比例变化。如图片原始大小为80*60，当只设置了该图片的显示宽度为160，高度将自动以？来显示。2021/10/8123.2与图片相关的HTML标签“width”和“height”属性宽度和高度的语法结构：或

6、th=m%>或其中，n代表一个数值，单位为像素，m代表0～100的数，即m%的取值范围为0%～m%，图片将以相对于当前窗口大小的百分比来表示。2021/10/8133.2与图片相关的HTML标签【例】图片大小控制示例

7、2021/10/8143.2与图片相关的HTML标签2021/10/815②Border属性主要是用来给图片的周围加上指定粗细的边框。语法结构：其中，n为一个数值，单位为像素。3.2与图片相关的HTML标签2021/10/816【例】图片边框设置示例