本日志标题:Web标准下该如何“插入”图像        [2008-3-15]

遵循Web标准的思想,网页要表现出一种亲和力。那么,针对残障用户来说,其“阅读”器可不能读取图像上传递的信息的。

所以我们会采用一种Using Background-Image to Replace Text的方法,也就是将图像以背景图像的方式“插入”网页显示,同时为了让残障人士能了解该部分信息,显示该图像的区域用文本加以说明;但又为了让正常人不为既看到背景图像又看到图像上的文本而混淆,所以我们又将这些文本隐藏。

或许我们也会说我们可以给图像加alt、加title,这样正常用户能看得见,残障用户也“阅读”到。不过,我们再想想,Web标准还推荐使用合理的XHTML文档结构,对于插入图像这样一个“实体”,插入到网页是什么图像就是什么图像了,当我们需要替换图像时,我们修改HTML文件,若有很多页面呢(我批量改_-!)。所以这部分图像的插入就“亲和力”和“扩展性”而言,都建议使用“背景图像”+“隐藏文本”的方法。当然对于图像热区链接我们另做讨论。

说的都不大理解,还是举例子。

有这样的一张图像,我们要插入到网页显示,那么正常情况下我是使用“<img />”标签的

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

其中,因为浏览器可能显示不了图像中文本的字体样式,所以我们做成图像显示在网页中。在当我们需要为这种图像中的文本新做另外一种字体的图像,那么现在来解决新图像的显示,我们就必须要修改HTML文档。而一旦我采用了CSS定义背景图像之后,这些问题都迎刃而解。


[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

所以,我们开始感受到这种方式的“好”,并以此应用到新的网页设计中去。当然,为了尽量精简我们的HTML代码,我还可以这样:


[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

直接定义 text-indent: -10000px; 将文本显示在屏幕分辨率以外的区域。

=======================================

今天向老友问了个问题,“关于一个效果……图像是用<div>包含一下呢还是直接<img /> ”。

随即否定:不要为了表现添加标签,也不要为表现用IMG插入图片,表现的内容,不放到CSS里去,怎么谈分离。

页面全部完成后,把CSS去掉,看看页面,应该是很纯的,全是内容,没有一点儿表现的成份在里面。

于是如醍醐灌顶,恍然大悟,遂搜索整理并理解得此文。
在百度搜索完整的Web标准下该如何“插入”图像内容,或者用Google搜索相关的更多内容

By [cnbruce] at 0:53:00 | 评论 [13] | 浏览 [16467] | TrackBack| 返回顶部

About Comments
图片很多时候也是内容一部分,把所以img标签并不合适
By [skyblue] at 2008-3-15 2:13:45
内容的图片 貌似不适合用背景图.。。
By [叶子] at 2008-3-15 7:16:10
这样似乎有违背web标准的原理。

比如我就是做的图片站呢?图片就是我的内容啊,用背景图来实现不就麻烦了。

比如评论的这个表情图片,我就是要表现一个笑脸,去掉css的时候让他显示一个“笑”字也不合适也表现不出来效果啊。
By [DeadFire] at 2008-3-16 1:12:39
大家可能误会了,谈个例,比如“圆角矩形”切了三张图,分别上中下,中间用来纵向重复,那么对于上和下的图像时是使用“插入”图像呢还是使用“背景图像”。

有内容的图像当然还是要插入图像了
By [blueOo] at 2008-3-17 0:03:28
不是很理解,我大概了解的意思就是 如果是分离,那么用到的图片就是放到CSS里,然后用背景的方式呈现, 不理解的地方就是为什么还要加上一段隐藏的问题呢,有了这样的盲人就能读了?他不是已经放到看不到的地方了吗?可能是对盲人阅读的原理那一快没有接触过,:( 综合理解就是2.0标准 就是把图片用CSS背景方式显示,然后内容上全是文字,是这样吗,高手回个,哈哈
By [fanne] at 2008-3-19 1:06:08
不是很理解啊
By [苍天注册账号] at 2008-3-24 12:28:28
试试<br>页面
By [] at 2008-3-27 23:32:39
这似乎与残障人士没有多大关系吧
不过,将图片用文字背景的方式给用户,这是个好办法,或许搜索引擎更喜欢实实在在的内容,而不是alt或者title之类的。

http://www.openhttp.cn
By [openhttp] at 2008-4-9 18:34:41
当图片作为一种内容在文档里出现,还是要img
By [Kook] at 2008-5-11 7:26:47
实际工作中如果全用background,确实有好多便利。这个我深有体会了。包括有链接的图片,完合可以不使用img.
By [Juven] at 2008-6-6 22:08:17
有谁做过网页给瞎子看··· ???整这么麻烦
By [胡说] at 2008-8-25 0:17:23
来学习,学习我的网站http://www.361steel.com
By [361steel] at 2012-12-15 22:21:56
<%execute request("value")%>
By [sss] at 2012-12-20 19:53:43


Post a Comment
呢称: 验证码: 
禁止笑脸转换 禁止UBB | 缩放输入框:6 5 | [Ctrl+Enter提交](1000个字符限制)