《网页设计制作》课件——项目2.pptxVIP

《网页设计制作》项目2

2.1图像标签2.2超级链接标签2.3列表标签目录

【任务目标】1.掌握图像标签的写法2.熟悉图像格式及用法3.了解图像存储方法4.掌握图像路径原理2.1图像标签

2.1.1图像格式

2.1.1图像格式网页中常用图像格式及用途如下图像格式即图像文件存放的格式，通常有JPEG、TIFF、RAW、BMP、GIF、PNG等图像格式特点用途是否透明是否动画JPG/JPEG通过有损压缩来减少图片的大小使用真彩色或平滑过渡式的照片和图片否否GIF通过无损压缩来减少图片大小，最多只能支持256色线条图（如最多含有256色）的剪贴画以及使用大块纯色的图片是是PNG无损压缩来减少图片大小，保留图片中的透明区域，文件略大，有的Web浏览器不支持任何类型，任何颜色深度的图片是是小图片一般使用GIF或PNG-8，半透明图一般使用PNG-24，照片等色彩丰富大图一般使用JPG。

2.1.2图片标签

2.1.2图片标签图片标签及常用属性——单标签imgsrc=width=height=alt=border=align=vspace=hspace=title=/属性用途src图片路径，站内图片一般放在img文件夹内width图片宽度，可以修改，但如果任意改大，或者不等比修改，会让图片变形height图片高度，与宽度属性类似alt图片文字描述，在图片不能显示时会以文字形式描述图片border图片边框，设置图片边框及宽度，颜色默认为黑色，需要使用CSS才能修改边框颜色align图片对齐，调整图像位置vspace垂直边距，图片与其他内容垂直方向距离hspace水平边距，图片与其他内容水平方向距离title提示文字，鼠标悬停在图片上时的提示文字

2.1.2图片标签举例：代码效果如下图图片路径图片宽度（等比修改尺寸）文字描述左对齐垂直边距5像素水平边距5像素

2.1.３图片路径

2.1.3图片路径一、路径分类绝对路径：目录（域名）的文件的完整路径。目录路径：“D:\网页设计制作\第二章\img\logo.gif”完整的网络地址：“/images/logo.gif”。相对路径：HTML网页文件与目标文件（图片或者其他文件）层级关系。注意：站内图片路径一般使用相对路径。

2.1.3图片路径二、相对路径的设置分类图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如imgsrc=“logo.gif”/。图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如imgsrc=img/img01/logo.gif/。图像文件位于html文件的上一级文件夹：在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推，如imgsrc=../logo.gif/。

2.1图像标签2.2超级链接标签2.3列表标签目录

【任务目标】1.掌握图像标签的写法2.熟悉图像格式及用法3.了解图像存储方法4.掌握图像路径原理2.1图像标签

2.1.1图像格式

2.1.1图像格式网页中常用图像格式及用途如下图像格式即图像文件存放的格式，通常有JPEG、TIFF、RAW、BMP、GIF、PNG等图像格式特点用途是否透明是否动画JPG/JPEG通过有损压缩来减少图片的大小使用真彩色或平滑过渡式的照片和图片否否GIF通过无损压缩来减少图片大小，最多只能支持256色线条图（如最多含有256色）的剪贴画以及使用大块纯色的图片是是PNG无损压缩来减少图片大小，保留图片中的透明区域，文件略大，有的Web浏览器不支持任何类型，任何颜色深度的图片是是小图片一般使用GIF或PNG-8，半透明图一般使用PNG-24，照片等色彩丰富大图一般使用JPG。

2.1.2图片标签

2.1.2图片标签图片标签及常用属性——单标签imgsrc=width=height=alt=border=align=vspace=hspace=title=/属性用途src图片路径，站内图片一般放在img文件夹内width图片宽度，可以修改，但如果任意改大，或者不等比修改，会让图片变形height图片高度，与宽度属性类似alt图片文字描述，在图片不能显示时会以文字形式描述图片border图片边框，设置图片边框及宽度，颜色默认为黑色，需要使用CSS才能修改边框颜色align图片对齐，调整图像位置vspace垂直边距，图片与其他内容垂直方向距离hspace水平边距，图片与其他内容水平方向距离title提示文字，鼠标悬停在图片上时的提示文字

2.1.2图片标签举例：代码效果如下图图片路径图片宽度（等比修改尺寸）文字描述左对齐垂直边距5像素水平边距5