本文主要叙述如何设计结构化 XHTML 页面,以及过程中经常遇到的问题,并且给出我的习惯做法仅供参考。
从流程上说,当 PM 或者架构师将设计规范或者页面结构说明书(wireframes、content inventory等文档)确定下来后,开发团队和设计团队就可以一起起草结构化 XHTML 代码了,包括统一命名、统一代码类型等等。随后程序员写程序,参照结构化 XHTML 代码去输出,设计师用 CSS 设计界面而不改动 XHTML 代码(理想状态下)。
如果需要增删代码,则需要开发工程师或 PM 与设计师一起讨论,意见一致后再确认。
Using The Right Tag For The Right Job。不要从表现上去决定代码,而要从逻辑结构上。其实这一点我在以前翻译的文章里面多有涉及。说简单点,当你关闭样式表或者IE没有加载样式表时,页面也是如同大纲目录般清晰可理解。
常见错误
span class="title"
来标标题,而对h1~h6视而不见; div
s 去做 navigation,做 menu,通常情况下这样做不必要; 常看到一些英语不过关的,会把 id
和 class
写错。千万不要用拼音缩写,任何一个程序员都会鄙视这种行为。我将谈一下我的命名习惯。不采用带表现得值也是要注意的,比如要避免left/top 等等。
关于id和class
id
是一个页面里唯一的,根据我的经验,在团队合作中 id
在整个网站中都最好是唯一的。这样程序员利用 JS 或者设计师写 CSS 的时候也不会犯错,特别是存在多个应用(相当于多个系统)的时候。比如在你的网站里面首页有一个 id
值为 header
,某频道里面也有一个 id
为 header
,而两者的内容不一致。那前者可以命名为 header_index
,后者为 header-channel
。
对于图片命名,一般是 type-n-name,如 bg-today-top-ten.jpg 和 logo-site.gif,这样在文件排序的时候非常方便可以知道哪些是背景图,哪些是 logo。在CSS里面也可以如此,但是目前似乎没有CSS整理工具CSS在线整形器。
无论是 id
还是 class
,尽量避免同一值不同样式的情况。比如在首页里一个 class
是 more
,频道里面也有一个 class
是 more
,两者却不是同一种样式。这种情况通常出现在多人团队里,比如A负责A页面,B负责B页面,如果不约定好,就容易产生问题。
常见命名
写多了就会有很多积累,无论是程序员还是设计师对于命名都是非常头疼的一件事。我对于大家怎么命名、怎么放置文件、书写习惯非常感兴趣。
如果要在一行的左右两侧放文字,你会怎么做?一种写法:
<div style="text-align: right;">
<span style="float: left;">left text</span>
right text
</div>
为什么不这么写:
<div>
<span style="float: right;">right text</span>
left text
</div>
有什么区别呢?在Firefox下去掉样式表可以发现,在第二种方法里,right text显示在left而left text显示在right。有时候left text和right text可能是不相关的,那可以学 Flickr 一样不用span而用div,这样去掉样式表就不在同一行了。
可以看到很多都是应用性的心得,可能在下一个页面里你又换一种方式去写了。标准并没有一套标准去约束它,呵呵。
联系客服