设计

我对XHTML不支持target属性的联想

前些日子,本着好奇去下载了微软的 Expression Studio 试用(还不错用),用 Expression Web 的时候,因为它会自动检测文档标准,而我惯用的 Doctype 是 XHTML 1.0 S,结果,我在n多 a 标签的 target 属性下看到了熟悉的红色波浪线……

XHTML 从 1.0 Strict 开始就不在允许在a标签中使用 target 属性了,以前在研究 XHTML 1.1 的时候曾经遇到过这个问题,但是后来渐渐被我遗忘了。于是我又回头去网上查找了各种解决方法,也参考了一些前辈们的想法,而这些想法也改变了我对这件事的认识。

我们知道,a 标签的 target 属性一般最常用于两个地方,一个是控制链接在新标签页(窗口)中打开,另一个则是控制链接在指定的 frame、iframe、弹出窗口中打开。

事实上,W3C委员会是一开始就反对在a标签中使用target。也许有人要问,如果没有target,怎么才能让页面在新标签页或者新窗口中弹出呢?W3C委员会的答复是:设计者没有权利决定用户用什么方式打开页面!

是的!这才是最大的关键所在!经常翻墙上国外Google的朋友也许会有这个印象,英文版的google.com的搜索结果,是在当前页面直接打开的,而不论当年的google.cn还是现在的google.com.hk,都是默认在新标签页中打开的。事实上,正常情况下,所有页面都应该是在当前标签页内打开,哪怕是跨站的链接,如果用户需要从新标签页中打开,他应该很习惯于从右键菜单中选择,或者按住 Ctrl + 单击,又或者一些浏览器中是 Ctrl + Shift + 单击去打开页面。而国内网民们却似乎完全没有这样的习惯,一方面他们习惯于被各种网站上混乱的链接打开方式左右,另一方面,受到这种用户习惯的影响,网页开发人员也只能遵循这一规矩,如果不在链接里加上 target 属性,反而会被客户或项目经理骂吧,而结果就是越走越远的恶性循环而已。

明白了正确的思考方式,再回头来考虑解决方法,当然也时刻不能忘记 HTML 语义化、对人对机器都友好的初衷,那么网上盛传的集中解决方法,哪一种更合适呢?

网上现在一般有2大类解决方法,其中第一种比较冷门,也比较有技术含量了,那就是扩展 DTD。我曾经在一位国人前辈的博客上见过这一解决方法的详细教程,老实说,我基本看不懂。不过 DOCTYPE 可以扩展这件事我倒是知道,似乎官方的规范介绍里就有强调这点。这位前辈在 DOCTYPE 中,除了原有的 DTD 外,再额外加上自己定义的扩展 DTD,从而重新加入 target 属性。这种方法从技术角度来看,似乎是最强大的,但是它也有一个缺点——从本质上来说这其实就是一种规范的倒退,如果不得不通过扩展 DOCTYPE 去实现原先 XHTML 1.0 T 里包括,而在 XHTML 1.0 S 中删除的属性的话,还不如直接使用 XHTML 1.0 T 算了。

另一大类方法就是用 Javascript 去解决了,当然使用 Javascript 也有几种不同的用法,其中一种最笨的办法就是在每个链接里写上 onclick 属性,纯粹用 onclick 去打开窗口,但是这种做法显然弊端很多,首先是工作量很大、不便于维护,另外用户复制链接地址也会失效,而且一旦客户端发生 Javascript 运行错误,或者用户禁用了 Javascript,那整个网站就完全无法使用了。

另一种方法这是用 Javascript 获取整个页面所有的链接元素,然后根据这些链接是否被赋予某个特定的属性,而决定是否要给它附加 onclick 事件。而这个“特定的属性”,一般最常见的是用class。而根据上文的分析,除了 class 属性外,我们还有一个更合适的、更符合语义的、对机器更友好的、更面向未来的属性可用,那就是 rel——对链接赋予一个特定的 rel 属性,说明目标网页与本站之间的关系,进而用 Javascript 将所有此类关系的链接设置为在新标签页(窗口)中打开,这样应该更符合 HTML 规范的本意一些,当然最好的做法还是不要干预。

上文提到,target 属性还有一个用途是控制链接在指定的 frame、iframe、窗口中打开,那么这个很容易理解,因为从 XHTML 1.0 Strict 标准开始,所有的 frameset、iframe 都被禁止使用了,而既然规范也禁止浏览器支配用户打开新窗口,那么控制链接在指定窗口中打开也就毫无用途了。

开始制作入口页面

从今天开始设计入口页面。

前几天对于这个站点的总体结构已经有所规划,基本上准备是以一个博客 + 一个设计历程站为主。其中后者将记录下我从最早最烂的设计,到未来可能出现的最好的设计,一路走来的轨迹。但是不管怎样,我需要一个入口页面。

事实上在之前尝试独立设计自主站点的时候,以及尝试原创WordPress皮肤的时候,我都知道以我自己现在的美术功底,完全是不够格的。小小的入口页面的设计,对我来说也许是一个更容易入门及热手的挑战。

目前正在设计的入口页,其总体风格延续了现在我所选用的这个WordPress主题(确实是个不错的主题),虽然在创意上对我造成了限制,不过倒是也避免了一堆不相干的效果堆放在一起造成的混乱感,有得有失吧。

放眼未来 编织现在

4.4 结束语

好了,我们已经到了这本书的结尾,接下来是什么?

是未来!

如果你和我一样享受着网页设计的话,你将会发现美好的时光等待着你。你拥有各种机会——几年前我们无法想象的机会——去创造人们喜欢访问的网站。

在CSS刚刚诞生的几年里,网站设计产业就发生了巨大的变化:辅助功能、表意的标签,已经目前Web专家每天都会碰到的CSS。一个真正的专家从来不会停止学习。如果没有不辞劳苦找寻各种解决方案并在休息的时候将这些解决方案慷慨地分享出来的人们,今天的CSS也不可能得到如此广泛的使用。我希望在未来,CSS开发人员能够找出更多令人激动的解决方案,你也可以追随他们的步伐,分享你所学到的东西。

开发和设计网站是一项创意无限的工作,无论你是在写代码,创建数据库,还是进行平面设计,你做的每一件事情都是创造性的。我拥有W3C CSS工作小组的受邀专家的身份,我能够帮助一个具有创造力的设计师,把他的声音带到会议桌,我非常欢迎大家分享自己的想法。如果未来的CSS版本是能同时满足视觉设计师和开发人员的需要的,那么它需要我们所有的人都参与到它朝哪里发展,怎么发展的讨论和争辩中,一起明确它的未来。因此我希望大家都尽力而为,不管贡献大小。

现在可以停止听我唠叨了,去开创未来吧!

——Andy Clarke(“Transcending CSS: The Fine Art of Web Design”)

《超越CSS:Web设计艺术精髓》,英国Web设计大师Andy Clarke所著的这本有着357页正文的经典著作,没有采用国内常见出版物的那种非常紧凑的布局,而有着较大的段间距,大量的各级标题都有特大号的字体与行距(就如Web中常见的那样),每一页都有近半的外边距用于插图和注释,可说文字量并不大,而且读起来绝对不会感觉枯燥。然而,我在一年半前购买的这本书,却到今天才读完(因为中途又去学习了其他的书籍,如《CSS禅意花园》)。

这本书并不是面向Web设计初学者的教材,它更多地在努力引导那些已经知道如何创建“看起来”很好的页面的Web设计师们去了解Web设计的灵魂,去理解怎样编写合理而简练的HTML,理解为何要去努力做到样式与内容分离,以及体验将在不久的未来来到我们身边的CSS3技术。

然而,对我来说,我却把它当成了网页设计的入门书籍给买了下来。

当时的我几乎一个HTML标签也不认识,完全不知道如何在Web页面中书写内容,甚至连“CSS”这个名词都刚刚从同学那里听说。为了完成“软件类课程设计”这门课的期末设计(我使用了PHP语言编写程序),我必须拥有一本教材引导我入门网页设计。然而,在没有仔细阅读前言和目录的情况下,我就因为这本书本身精美脱俗的设计而“无谋”地买下了它。

最后的事实证明,我是幸运的。

在中国买实体教材最容易遇到的问题是,几乎所有的教材的内容都是陈旧的,至少其思想是陈旧的,而且大量的泡沫产品也导致它们的内容是庸俗而千篇一律的。我是幸运的,因为我的起点就在许多人超前。《超越CSS:Web设计艺术精髓》讲述的是当今最先进、甚至是超前的思想,并且不是像说明书那样去讲解每一个HTML标签或每一个CSS属性的功能,而是在试图引导读者领悟如何正确地去思考:“这种内容上应该使用什么元素?”而不是“元素可以使用在哪种内容上”,这使得“思想”这种抽象的东西变得很容易领会。

对我而言,网页设计只是刚刚起步。等待着我去学习的东西还很多,比如我完全没有美术基础,比如我还很不擅长制作自适应宽度的布局,比如对于IE6这些原先已经快从我的记忆中被淡忘的浏览器的支持,比如我对于额外的标签还是非常依赖的(尤其是公司里做网页出的效果图特别喜欢圆角边框,并且几乎要求每一个页面都能适应从800×600到FullHD的所有分辨率)等等。

我身边那些设计网页的人,他们做出的效果图本身就是一个表格的体现,所有的东西全部长得方方正正,并且被按行按列整齐地排列在一起。我曾经设计过一个简单的两列布局,在页面的上半部分(大约700px),左列显示一些重要的文章的链接,右列则是滚动图片和联系方式等小Tips,他们的宽度比大约是3:2,而页面的下半部分则是左右对称1:1的两列不怎么重要的文章链接。结果当我把这个设计提交后,几乎整个办公室的人都诧异地问我:为什么上下两行的列不等宽的?

而我现在要去做的,就是打破这种表格布局时代留下的惯性思维。虽然我没有美术基础,然而对于从未接触过表格布局的我来说,从最初就建立一种不同的思维相对于转换思维要容易得多。尽管我只是不起眼的年轻人,但我将尽我最大的努力去影响我身边的人,让他们明白如何摆脱旧时代的束缚,为何要将样式与内容分离,为何要学习并遵循国际规范,为何要重视特殊人群等。

今天我在这里写下这篇读后感,是为了给自己设立一个标志,从这里开始,前方是新的世界。尽管你可能还是在我那用了他人现成设计的博客上,甚至是我的QZone上阅读到这篇文章,但是我已经开始制作真正属于我个人的主页了。尽管我还是从修改现有博客的样式开始着手(Blogbus的HTML结构非常漂亮,而QZone则是难以修改的表格布局),也许等明年我自己的网站正式上线时它还非常简陋甚至丑陋,但是我相信我可以克服这种艰辛,因为我已经无法也不需要去体验我的前辈们在那些连表格布局都困难重重、CSS甚至都不能正常显示的Netscape3上体验到的艰辛了。

在不久的将来,这篇文章将会如约成为我个人网站的建站序言,而且它的出现将会比HTML5和CSS3普及要更早一些。而我也将继续我的人生旅途,从迈向未来开始。