网页设计课程第3章.pptVIP

网页中支持的图像文件格式 图象文件格式有多种，如BMP、JPEG、TGA、GIF、PNG等，但在web页中通常使用的只有3种 JPEG格式：用于摄影或连续色调图象的高级格式，包含数百万种颜色, 适合用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式； GIF格式：图形交换格式,一般用于较小尺寸的图片，是一种无损压缩的格式，文件最多使用256种颜色，适合显示色调不连续或具有大面积单一色彩的图象，如导航条、按钮、图标或其它具有统一色彩和色调的图象. gif格式的特点是可以实现gif动画，和gif全透明的图像； PNG格式：可移植网络图形格式，具有较大的灵活性，文件较小，对于几乎任何类型的Web图形都适合，但IE4.0或更高版本只能支持部分PNG图象的显示 图像标记img / 图像标记 ：img src=“图像文件名” / 将图形文件嵌入到网页文档中的当前位置 说明：网页中插入图像有两种方法，一是插入一个img元素，二是将图像作为背景嵌入到网页中 由于CSS的背景属性的功能很强大，现在更推荐将图像都作为背景嵌入。 如果图像是通过img元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片。 例1：图像的插入 html head title图像标记示例/title /head body p align=center img src=pic/logo.jpg alt=网页制作 width=468 height=60 /p /body /html 例2:图片的大小控制 html head title图片的大小控制/title /head body img src=pic/01.jpg height=100 img src=pic/02.jpg width=100 img src=pic/03.jpg height=150 width=200 /body /html 例2:图片的大小控制 说明: Width控制图片的宽度,height控制图片的高度,当图片只设置了其中一个属性(如只设置了width)时,图片的高度就以图片原始的长宽比表示 语法结构: img width=n或m% img height=n或m% N为数值,单位像素,m代表0到100的数,即0%到100%,图片将以相对于当前窗口的大小显示 例3:图片的边框设置 html head title图片的边框/title /head body img src=pic/04.jpg width=80 height=60 border=6 img src=pic/04.jpg width=120 height=100 border=4 img src=pic/04.jpg width=160 height=140 border=2 /body /html 说明:img border=n,n为数值,0到99,单位像素 图片的左右区域 html head title图片的水平间隔/title /head body img src=pic/05.jpg height=20% hspace=30此图水平空白区域为30br img src=pic/06.jpg height=25% hspace=60此图水平空白区域为60br img src=pic/05.jpg height=30% hspace=80此图水平空白区域为80br /body /html 说明:hspace属性控制图片左右两边的空白区域, hspace=n,n为数值,单位像素 图片的上下区域 html head title图片的垂直间隔/title /head body 此图垂直空白区域为30img src=pic/05.jpg height=50 vspace=30br 此图垂直空白区域为20img src=pic/06.jpg height=50 vspace=20br 此图垂直空白区域为10img src=pic/05.jpg height=50 vspace=10br /body /html 说明:vspace属性控制图片上下两边的空白区域, vspace=n,n为数值,单位像素 图片和文字的位置关系 html head title浏览器默认显示样式/title /head body 文字居左显示 img src=pic/05.jpg height=150 文字居右显示 /body /html 说明:默认情况下,图片和文字的显示按照组件输入的先后, 文字只显示在图片的两侧,并且居于图片基线的下方 html head title图片相对文字基线对齐/title /head body img src=pic/05.jpg height=150 a