web标准知识:当标题不能显示完整的时候

2016-01-29 11:43 17 1 收藏

web标准知识:当标题不能显示完整的时候,今天刚看到ChinaUI.com新改版的网站,觉得优艾网是越来越漂亮了,这次的变化的确是挺大的。一早大概的看了一下就关了,后来晚上又打开看时发现个问题。也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的。我想很多网站都遇到这样的情况。为了视觉效果不得不进行截字显示以满足网站的整体视觉效果。通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量。另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截。

【 tulaoshi.com - Html 】

今天刚看到ChinaUI.com新改版的网站,觉得优艾网是越来越漂亮了,这次的变化的确是挺大的。一早大概的看了一下就关了,后来晚上又打开看时发现个问题。也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的。我想很多网站都遇到这样的情况。为了视觉效果不得不进行截字显示以满足网站的整体视觉效果。通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量。另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截。

在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着。这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后台已经完成,所以输出的内容是残缺的。而第二种是通过CSS或是JS做出的一种障眼法。把一定长度以外的内容隐藏掉。以达到需要的视觉效果,好处就是他可以保留完整的数据内容,不足之处可能是非IE浏览器截的字并不完美。比如Firefox常常会有截半个字的尴尬现象。

我想提出的问题是:"标题的不完整是否会影响用户的点击动机?"我斗胆提出这样的论断:标题的不完整将在很大层度上影响用户是否会点击该条信息的动机。我们这里就用优艾网中的一条新闻标题来作分析。网站中有这样一条新闻标题"美国发明用户界面新技术 对着吹",这是一句被机械性截掉的标题。面对这样的标题我们的好奇心是否被勾引起来,当然有可能。但是我们的理解可能是这样的:"美国发明了用户界面的新技术,对着吹这是个打假新闻。可能是两家公司在吹牛。"如果是这样那么这种八卦的新闻我就没兴趣了。然而这个完整的标题应该是:"美国发明用户界面新技术 对着吹气就能操作计算机"对于这样的标题我就比较有兴趣,我想知道这个吹气为什么就能操作计算机呢,这是我从来没想到过的事。这样我就会有极大的兴趣去点击查看这条新闻。我们可以比较发现,其实最容易勾起我们好奇心的其实是"吹气操作"。这是新技术的核心。也是这个新闻的核心内容。

当然有时候截字是必需的,否则整个网站就会显得很杂乱。那么现在一般的解决方法就是在链接上加入"title"属性。遇到这种语义不清楚的标题时我通常是鼠标悬停查看提示区中的文字以获得比较完整的标题信息。从而完成我是否点击该新闻的判断。但是可惜的是优艾网标题链接中的title属性与标题内容是一样的,如此一来title属性的意义大减。

我们在设计的时候当然是尽可能的把标题显示完整,如果因为特需原因没办法显示完整的时候要尽可能的使title属性是完整的。还有虽然CSS的截字在Firefox中是有缺陷的,但是我还是觉得截字的事应该由CSS来完成。至少这样我们可以得到一个完整的HTML信息文档。当无CSS的时候至少我们同样可以看得到完整的信息内容。

来源:http://www.tulaoshi.com/n/20160129/1483104.html

延伸阅读
今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。 以图换字就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,...
  准备工作: 1.选择 !DOCTYPE    过渡的(Transitional):    要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。虽然W3C不赞成使用<font等标签,但是还是有很多网页爱好者在很喜欢用,所以W3C不得不把font补进到HTML 4.0的标准中.因此使用过渡式你还可以使用这些标...
标签: Web开发
我是从去年初开始学习web标准的,两年下来也有些心得。最近跳槽了正好闲在家里,写一些出来和大家交流一下。 1 对于web标准和W3C XHTML规范的理解 按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^)。但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性。web标准...
标签: Web开发
DOCTYPE不可怕,但把它拿走,会让你怕了又怕。 最近在蓝色理想转悠,发现很多朋友提出有关DIV+CSS排版问题,以及IE与FF的兼容问题。怎么问的都有,结果就是一个显示很奇怪,很难调整。我们浏览的大多数网站,或者用Dreamweaver创建一个新的网页文档时,源码的顶部都会有DocType声明,但是很多人没有注意它,甚至在创作时候直接将它删掉,其...
在学习中遇到问题可以到 论坛 发贴交流! 原文作者:Roger Johansson, 456 Berea Street 中文翻译:x5stuido Last updated 2004-11-23 There is also an English vision English. T?m?dokumentti on saatavilla my?s suomeksi. Consultez l'article en version fran?aise. Dit document is ook beschikbaar in het Nederlands. Detta d...

经验教程

33

收藏

39
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部