《网页设计制作》课件-项目2VIP

《网页设计制作》项目22.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像素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.

掌握超级链接href属性3.

掌握超级链接target属性4.

掌握路径的含义及用法2.2超级链接标签2.2超链接标签一个网站通常由多个页面构成，进入网站时首先看到的是其首页。列表页内容页……首页通过超链接，实现页面之间的跳转2.2超链接标签创建超链接如何创建超链接？在HTML中创建超链接非常简单，只需用<a></a>标签环绕需要被链接的对象即可。<ahref="跳转目标"target="目标窗口的弹出方式">

文本或图像</a>基本语法格式2.2超链接标签对超链接标签的常用属性解释如下：href用于指定链接目标的url地址，当为<a>标签应用href属性时，它就具有了超链接的功能。target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。创建超链接2.2超链接标签多学一招：图像超链接出现边框解决办法创建图像超链接时，在某些浏览中，图像会自动添加边框效果，影响页面的美观。去掉边框最直接的方法是将边框设置为0【总结】<ahref="#"><imgsrc="图像URL"border="0"/></a>2.2超链接标签锚点链接如果网页内容较多，页面过长。浏览网页时就需要不断地拖动滚动条，来查看所需要的内容。效率较低不方便2.2超链接标签为了提高信息的检索