三 HTML中图片的

*,*,单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,三,HTML,文件中图片的使用,3.1,图象文件格式,图象文件格式有多种，如,BMP,、,JPEG,、,TGA,、,GIF,、,PNG,等，但在,web,页中通常使用的只有,3,种,JPEG,格式,：用于摄影或连续色调图象的高级格式，包含数百万种颜色,GIF,格式,：图形交换格式，文件最多使用,256,种颜色，适合显示色调不连续或具有大面积单一色彩的图象，如导航条、按钮、图标或其它具有统一色彩和色调的图象,PNG,格式,：可移植网络图形格式，具有较大的灵活性，文件较小，对于几乎任何类型的,Web,图形都适合，但,IE4.0,或更高版本只能支持部分,PNG,图象的显示,例,1:,图片的插入,图片的插入,说明,:,标记的作用是导入图片,src,属性指定图片的保存位置和名称,例,2:,图片的大小控制,图片的大小控制,说明,:,Width,控制图片的宽度,height,控制图片的高度,当图片只设置了其中一个属性,(,如只设置了,width),时,图片的高度就以图片原始的长宽比表示,语法结构,:,N,为数值,单位像素,m,代表,0,到,100,的数,即,0%,到,100%,图片将以相对于当前窗口的大小显示,例,2:,图片的边框设置,图片的边框,说明,:,n,为数值,0,到,99,单位像素,3.2,图片与文字的结合,图片的左右区域,图片的水平间隔,此图水平空白区域为,30,此图水平空白区域为,60,此图水平空白区域为,80,说明,:,hspace,属性控制图片左右两边的空白区域,hspace,=n,n,为数值,单位像素,图片的上下区域,图片的垂直间隔,此图垂直空白区域为,30,此图垂直空白区域为,20,此图垂直空白区域为,10,说明,:,vspace,属性控制图片上下两边的空白区域,vspace,=n,n,为数值,单位像素,图片和文字的位置关系,浏览器默认显示样式,文字居左显示,文字居右显示,说明,:,默认情况下,图片和文字的显示按照组件输入的先后,文字只显示在图片的两侧,并且居于图片基线的下方,图片相对文字基线对齐,花,又是花,还是花,说明,:align,属性控制了图片和文字的相对位置,图象和文字的对齐,Align,属性值,:top(,上对齐,),middle(,居中对齐,),bottom(,下对齐,),图象在页面中的对齐,Align,属性值,:left(,左对齐,)right(,右对齐,),例,:,图片居左显示,图片居左显示,文字显示,例,:,图片居右显示,图片居右显示,文字居左显示,图片居中显示,并不能在所有浏览器中产生效果,若要将图片居中,则要将该段所有内容居中,.,例,:,低分辨率显示图片,图片显示速度,例,:,文字代替图片的显示,有时浏览器不能显示指定的图片,可以让浏览器显示一段文字说明该图片,这是利用,alt,属性完成的,文字代替图片,文字代替图片,图片的滚动,图片从右向左滚动,四 超链接的建立,4.1,路径问题的引出,相对路径和绝对路径,相对路径和绝对路径,相对路径,:,以要引用的文件所在的位置为参考点而建立起来的路径,所以,当不同的网页以相对路径引用同一个文件时,所使用的路径是不一样的,绝对路径,:,以服务器的硬盘架构以及所在的根目录为参考点建立起来的路径,所以,当不同的文件以绝对路径引用一个文件时,其路径是一样的,4.2,超链接的建立,文字的超链接,超链接,点击,这里,连接到一个图片网页,说明,:,之间的内容为超链接名称,href,设置超链接的目标,可以是本机上的某个,HTML,文件,也可以是,url,地址,文字链接颜色的设置,链接颜色的变化,注意,颜色,的变化,说明,:,Link:,从未单击过的链接的文字颜色,Alink,:,设置单击时的超链接文字的颜色,Vlink,:,设置单击过后的文字的颜色,特定目标的链接,特定链接,古诗鉴赏,单击,春宫怨,单击,登科居,春宫怨,昨夜风开露井桃，,未央前殿月轮高。,平阳歌舞新承宠，,帘外春寒赐锦袍。,登科居,昔日齷齪不足夸，,今朝放荡思无崖。,春风得意马蹄疾，,一日看尽长安花。,说明,:,链接名称,指网页要跳转到哪个目标名称的位置上,链接名称,设置相应的特定目标,注意,:”#”,属性的目标名称和,”,name”,属性的目标名称要一致,图片的超链接,图片的超链接,点击该图片放大,说明,:,在建立图片超链接时,浏览器会自动在图片的周围加上一个边框可以设置,border=0,取消边框,以新窗口显示链接页面,只要在,标记中设置,target,属性值为,_blank,即可,以新窗口方式打开,以,新窗口,方式打一个网页,4.3,超链接的其它应用,HTTP,协议的链接,各协议的链接,点击这里，将链接到,新浪,网站。,说明,:,url,链接的格式,:,FTP,站点的链接,各协议的链接,点击这里，将连接到,作业,FTP,站点。,说明,:ftp,链接的格式,:,BBS,站点的链接,各协议的链接,点击这里，将连接到,中科大,BBS,站点。,说明,:,bbs,链接的格式,:,电子邮件的链接,邮件的链接,点击这里，将打开,邮件传送,说明,:,邮件链接的格式,:,网页自动更新,网页的自动更新,即根据预先设定好的链接目标以及更新时间自动切换到另一个网页,这是利用,标记完成,自动更新,本页将,5,秒后自动连接到新浪网站。,说明,:,标记只有两个属性,:http-equiv,属性和,content,属性,http-equiv,属性设为,”,refresh”,作用是自动更新,Content,设置更新时间以及更新要显示的网页,meta,的 用 法,1,、语 法：,2,、,参 数 解 析：,1,）,name,项：常 用 的 选 项 有,keywords,description,author,等。,2,）,http-equiv,项：可 用 于 代 替,name,项，常 用 的 选 项 有,creation-date,refresh,等。,3,）,content,项：根 据,name,项 或,http-equiv,项 的 定 义 来 决 定 此 项 填 写 什 么 样 的 字 符 串。,2,、举 例：,