首页 
资讯中心 业内活动 行业人物 网站运营 站长商城 精品学院 站外休闲 求职招聘
特别专题 | 行业新闻 | 人物访谈 | 专栏作家 | 求职招聘 | 行业公司 | 网站名录 | 好站推荐 | 站长工具 | 站长大会
·呼和浩特网站备案 ·站长组、评论专员
·本站开展IDC托管 ·站长学习精品学院
·内蒙古精品网址站 ·内蒙古网站实名录
   当前位置:内蒙古IT实验室 内蒙古互联网实验室 内蒙古站长 >> 精品学院 >> 网页设计 >> HTML CSS >> 浏览文章
图像
作者:未知 来源:互联网 收藏: 投稿

 

假如能把影歌两栖传奇人物David Hasselhoff的图像放到自己的网页上,那就太好了。

这貌似有点难度。。。

也许是有点难度,但其实也不难,一个元素就可以搞定:

例1:


David

该例在浏览器中将显示如下:

点此在新窗口浏览图片

你要做的只是:首先告诉浏览器你要插入一张图片(img),接着给出这张图片的存放位置(src,代表“来源(source)”)就行了。准备好图片了吗?

注意:img元素没有尾标签,它与
一样,不与特定的文本相关。

“david.jpg”是要插入的图片的文件名,其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是HTML文档一样,后缀名“jpg”表明文件是一个图片文件。有三种类型的图片文件可被插入网页中:

  • GIF(Graphics Interchange Format,图形交换格式)
  • JPG或JPEG(Joint Photographic Experts Group,联合图像专家组)
  • PNG(Portable Network Graphics,可移植网络图像)

一般来说,GIP是图形和图画的最佳格式,而JPEG格式则更适合存放照片。原因有二:第一,GIF格式只支持256色,而JPEG格式支持数百万色;第二,GIF格式擅长于压缩简单图像,而JPEG则更适于压缩复杂图像。压缩率越高,图像文件就越小,页面加载速度就越快。也许你也有同感,包含太多无用内容的网页是很不受欢迎的。

过去,GIF和JPEG是两大主要的图像格式,但是最近PNG格式也开始流行起来(主要是在取代GIF格式)。PNG格式拥有许多JPEG与GIF的共同优点:支持数百万色,且压缩效果好

图片从何处获得?

要制作自己的图像,需要有一个图像编辑程序。图像编辑程序是从事美观的网页制作所需的重要工具之一

不幸的是Windows或其他操作系统都没有自带比较好的图片编辑程序。所以,也许你得买一个Paint Shop Pro、PhotoShop或者Macromedia Fireworks,这三个是目前市场上最好的图像编辑软件。

不过还是那句话,完成本教程的学习不需要购买任何昂贵的软件。你可以先下载一个Irfan View用,这是一个很不错的图像编辑软件。因为是自由软件,所以你可以免费使用它。

或者,你也可以从我们HTML.net网站下载一些图片来用,但请注意不要违反有关版权规定。具体下载方法如下:

  1. 右击网页中的图像。
  2. 在菜单中选择“图片另存为...”。
  3. 选择图片的存放位置,然后点击“保存”。

按此方法将下面的图片保存到你的HTML文档所在目录。(注意:将它保存为PNG文件,文件名为logo.png):

点此在新窗口浏览图片

现在你可以把这个图片插入到自己的网页里。自己试试看。

关于图像就这么多吗?

关于图像,还有一些是需要介绍的。

首先,你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。

例2:


点此在新窗口浏览图片

例3:


点此在新窗口浏览图片

其次,图片也可以作为链接:

例4:

该例在浏览器中将显示如下(你可以试试看点击这个图像):

点此在新窗口浏览图片

有什么属性需要了解的吗?

你总要用src属性来告诉浏览器图片的存放位置。除此以外,还有一些有用的属性。

alt属性用于给出图像的替用描述,假如由于某些原因该图像未能显示出来,浏览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说,或者当网页打开很慢的时候,这一特性显得尤为重要。所以说,始终记得写alt属性:

例5:


cnzz.cn logo

有些浏览器会在鼠标光标移到图像上时显示出alt属性的文本。但是,在使用alt属性时请注意,该属性的目的是为图片提供一个替用描述,有视力障碍的人士会利用alt属性来听取有关图片的描述,所以不要将该属性用于显示文本提示——那是title属性的功能。

例7:


点此在新窗口浏览图片

该例在浏览器中将显示如下:

点此在新窗口浏览图片

widthheight属性分别用于设置图像的宽度和高度,以像素为单位。像素(pixel)是用于测量屏幕分辨率的计量单位。(目前大多数屏幕分辨率是1024×768或更高)。像素跟公分不同,像素是一种相对计量单位,一个像素的实际大小跟屏幕分辨率有关。在高分辨率显示模式下,差不多25个像素等于1公分;而在低分辨率显示模式下,同样的25个像素大约等于1.5公分。

如果你没有为图像设置宽度和高度,它将按原始尺寸显示。但是如果设置了的话,你就可以控制它的显示尺寸:

例8:


点此在新窗口浏览图片

该例在浏览器中将显示如下:

点此在新窗口浏览图片

但是值得注意的是,虽然可以通过设置高度和宽度来控制图片的显示尺寸,但图片文件的实际大小不会因此而发生变化。所以,不要指望通过设置图片的宽度和高度来减小图片文件的大小。相反,你应该在图像编辑程序中来调整图片文件的大小,以加快页面加载速度。

不过width和height属性还是有用的,它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。

关于图像就说这么多了。

例6:


点此在新窗口浏览图片

该例在浏览器中将显示如下:

点此在新窗口浏览图片

如果你把鼠标光标停留在该图片上(别点击它),提示文字“上cnzz.cn网站学习HTML”便会出现。

另外两个重要的属性是widthheight

浏览:  


人支持

Tags:图像
发表评论】【告诉好友】【打印此文】【收藏此文】【关闭窗口
上一篇:链接
 最新推荐
网站运营资深人士徐志勇
内蒙古IT实验室开展IDC业务
“人肉搜索”首上大银幕《无形杀》观众定结尾
售楼广告恶搞“红色经典” 网友称赞有创意(图)
少年总裁张伯宏
微软正式公布反盗版政策 盗版用户将遭黑屏警告
千橡启用域名Kaixin.COM:开心网被全面克隆
内蒙古高校主流媒体上上网
内蒙古电影网站长巴特尔
内蒙古电影网
 相关文章
  • 暂无相关链接
  •  文章评论:
     最新文章
    学习css需要什么软件
    图像
    链接
    学习更多元素
    制作自己的第一个网站
    元素与标签
    HTML是什么? 
    创建一个纯CSS的水平导航条
    另一个角度谈谈DIV+CSS网页布局
    XHTML+CSS=网站重构
     编辑推荐
    网站运营资深人士徐志勇
    内蒙古IT实验室开展IDC业务
    “人肉搜索”首上大银幕《无形杀》观众定结尾
    售楼广告恶搞“红色经典” 网友称赞有创意(图)
    少年总裁张伯宏
    微软正式公布反盗版政策 盗版用户将遭黑屏警告
    千橡启用域名Kaixin.COM:开心网被全面克隆
    内蒙古高校主流媒体上上网
    内蒙古电影网站长巴特尔
    内蒙古电影网
     热门排行
    哀悼地震死难同胞网站变灰色
    北京市有望在IT行业试行在家办公
    谁来保护弱势站长群体的信息安全?
    IT实验室2007年度网络宣传大事例
    访谈:客齐集员工—内蒙古小伙儿姜丰波
    北方新报做媒 一对网络情侣喜结良缘
    3158商机网与IT实验室08元旦联谊活动MTV
    IT实验室与3158商机网元旦活动
    震撼世界!2008年互联网趋势预测
    邢明:明后两年将是互联网的社区年
     
    孵化网站:  
    内蒙古在线 内蒙古文学网 内蒙古好网 网络广告网 内蒙古旅游在线 内蒙古汽车网 婴幼儿保健网 内蒙古大学生网 内蒙古物流网 内蒙古房产网内蒙古家居装饰网
    合作媒体:
    DoNews IT中国 站长网 落伍者 中国站长站 AdminTech 内蒙古新闻网 北方新闻网 内蒙古晨报 内蒙古商报 呼和浩特晚报
    合作赞助:
    内蒙古新闻网 新闻网博客频道 图吧 飞普科技 盛开元广告 内蒙古商报 互联网实验室 乌海在线 广东武警医院整形美容 广州整形美容医院 梦想家博客
    友情链接:
    内蒙古电子杂志网内蒙古第一站子寒热点互联网BIOS之家分享IT每一天IT技术部
    山西站长网山炮摇滚视频网草原论坛中国生活指南网内蒙古动漫电影网阿尔山旅游网呼和浩特人才网
    内蒙古拍易拍信息网串串网站导航站长中国网罗伊-电子商务信息网络安全调查九上网导航 计算机病毒处理中心
    鄂尔多斯之窗内蒙古房地产家具网内蒙古金融网内蒙信息港内蒙信息网青城之恋塞外传媒网
    包头移动公寓网内蒙古生活信息媒体网呼和浩特餐饮娱乐网7度POP网蒙古文化呼和浩特好评网
    IT动力源呼伦贝尔旅游网包头社区论坛包头品牌网太平洋电脑网内蒙古站全客网土默川信息网
    关于本站 - 业务合作 - 广告合作 - 联系站长 - 设为首页 - 加入收藏 - 友情连接 - 雁过留声
    内蒙古IT实验室 版权所有 蒙ICP备07001325号 本站特约顾问:资深的互联网专家黄相如
    Copyright(C) 2008 NmgLabs.com All Rights ReservedWeb Hosting Pal