经验分享–玉楼春

Sep 23

经验分享

页面一演示地址：　http://www.beyondsun.com/music/o2jam.aspx
页面二演示地址：　http://www.beyondsun.com/
页面三演示地址：　http://www.beyondsun.com/music/audition.aspx
这个页面的特点：
　　结构(XHTML)与行为(JavaScript+DOM)100%的分离，结构与显示(CSS)95%的分离(其余5%不是我没有能力做到分离，而是没有这个必要，看完下面你就明白)。

JavaScript都做了些什么？

　　1、表格的就地排序，当你点表格的标题“歌曲类型”，“歌曲长度”，“人气”，会进行自动排序。

　　2、歌曲名称列的onmouseover、onmouseout切换效果。

　　3、歌曲长度列的颜色效果。

　　4、对复选框的 “全选”、“反选”、“清除”。

　　5、所有<input type="text" />和<textarea />在onfoucs和onblue时的样式，(在“首页上页下页末页”旁边)。

　　6、输入页数的input只接受数字，且长度不能超过2。

下面是我的一些经验和心得，拿出来跟大家分享：

一、以访客为中心的可访问性和可使用性

　　如果有人问我，国外的网页设计师和国内的最大区别是什么？我会毫不犹豫的告诉他，国外的设计师最注重的是网页的可访问性(Accessibility)和可用性(Usability)。而国内的设计师则很少考虑，甚至不考虑这方面的问题。

　　什么是可访问性(Accessibility)？

　　可访问性就是说你的网页可以在任何情况下、被任何人，特别是一些受到某种限制的访客所访问到。比如说：视力障碍的访客、只使用键盘不使用鼠标的访客。或者在浏览器不支持，或仅支持很少的 css 和 javascript的情况下，页面依然可以访问。

　　以页面一来说，注意到左边有“相关链接”，你可能会奇怪，在上面的导航中已经可以访问到“相关链接”里的全部内容，这里为什么还要多此一举呢？为了好看么？为了可访问性！假设你只使用键盘会怎样(只能通过TAB遍历所有的链接和表单项)？你在这个页面该如何访问到Music目录下的其他页面？NO WAY！！因为根本就没有鼠标的onmouseover和onmouseout事件。

　　什么是可用性(Usability)？

　　一个简单的例子：在我给大家展示的这个页面里，如果所有的脚本都失效，页面会怎样？如果你想选择所有的复选框，你将不得不一个一个的去点击它，它的可用性降低了，但是可访问性无损。如果你想按时间长度排序表格，则没有办法完成，但是丝毫不影响你了解每首歌曲的长度。

二、最错误的概念：Web标准就是Div + Css

　　这里首先要搞懂什么是Web标准。Web标准不是一个标准，而是一个标准的集合。包括了结构化标记语言XHTML(语义和文档结构)、样式表CSS(表现)以及Javascript+DOM(行为)。

　　当我们用Web标准来进行网页设计的时候，我们首先做什么？我告诉你，我们首先需要的是一个结构良好的HTML文件。那么什么叫结构良好的HTML文件？结构良好的主要含义就是，每一个标记都是自解释的，是有语义的。比如说：当我写下<h1>标题文字</h1>的时候，我仅仅告诉浏览器，这里放置的，是一个标题，至于浏览器如何显示它，那就不关我的事了(尽管几乎所有的浏览器都会以很大的黑体加粗超大来显示)。而当我想告诉浏览器这个标题该如何显示的时候，那么就到了CSS该出手的时候了。可是，有多少人会这样去显示标题呢？<div style="font-size:30px;font-weight:bold">标题文字</div>

三、最普遍的误解：Web标准就是不使用表格

　　《PPk on Javascript》一书的作者，Web Standards 组织的成员 Peter-Paul Koch 这样说道：You should definitely use table to display tabular data ！我可以明确的告诉你，我所知道的所有Web标准祖师，没有在任何时间，任何地点提到说“Web标准就是不使用表格”。Web标准只是说：不应该使用表格去布局，而不是说表格这个标记没有存在的价值。对于表格状的页面，应该毫不犹豫的使用表格去完成它。

我举个例子，如果让我做论坛帖子显示页的表格，我会这么写(做了简化)：

<table>
<thead>
　<tr><th colspan="6">论坛版块的标题</th></tr>
<tr>
　<td>表情</td>
　<td>帖子标题</td>
　<td>作者</td>
　<td>回贴数</td>
　<td>浏览数</td>
　<td>最后回复</td>
</tr>
</thead>

<tbody>
　<tr><td>与上面想对应的内容区域，这里是循环显示的</td></tr>
</tbody>

<tfoot>
　<tr><td>这里是分页信息，比如当前是多少到到多少贴，总共多少贴等</td></tr>
</tfoot>
</table>

　　当你要对版块名称进行样式的时候：
　　thead tr th{样式}

　　当你要对每一列的说明(就是表情、作者什么的) 样式的时候：
　　thead tr td{样式}

　　当你要对循环显示的内容样式的时候：
　　tbody tr td{样式}

　　当你要对帖子数目及分页样式的时候：
　　tfoot tr td{样式}

四、貌似正确的错误：结构与显示分离就是只使用外联式样式表

　　很多人都简单的认为既然要结构与显示分离，那么就应该绝对的把样式存成css文件，而在页面顶部link进来。我现在告诉你，这种做法是相当错误的，当你这样做了的时候，你不可避免的要使用大量的ID和Class，对日后的维护产生巨大的困难(甚至只有你才愿意去维护这个页面)。

　　《CSS权威指南》的作者Eric A. Meyer这样说：In some situations, we should probably use inline style.

　　以页面三为例：在<head>部分我使用了内联式样式表：，为什么这么做呢？为了覆盖！因为在“/music/inc/main.css”里，我已经定义了页面左下角显示的背景。但是我又不想每个页面左下角的图案都相同，所以，我把想要在此页显示的背景写在这里。而如果我这里什么也不写会怎么样呢？不用慌张，页面仍然会呈现我定义在/music/inc/main.css文件中的背景。

　　再举个使用在行级的样式的例子，大家看“歌曲名歌曲类型歌曲长度人气下载”的表格标题，除了第一个歌曲名是靠左对齐的，其他都是居中对齐的。这个时候，换做你会怎么做呢？很多人毫不犹豫地给“歌曲名”加个ID或者Class，然后定义在外联式样式表里，你有没有想过，如果你做的是一个非常复杂的页面，你需要定义多少个ID和Class？是50个还是100个？

　　所以，以我的看法，合理的样式表应该是90%外联+5%内联+5%内嵌。

五、文件该如何组织？是否一个页面对应一个Css文件

　　首先，我想说明，对于文件的组织，每个人都会有不同的做法，我这里只是提出我的做法，给大家参考，如果你有什么意见或者想法，欢迎回帖讨论！

　　很多站点的根目录都会有这样的目录：[images]、[style]、[js]、[include]、[pic]、[flash]等，包括我所在的公司，公司的招牌网站 www.travelchinaguide.com (所有主要页面PR值均为7，包含11个栏目，2000个页面，使用的是传统表格布局)(由于台湾地震暂时无法访问)，它就有以上几个目录，可是，把所有的.css，.js，.swf加起来，不足30个，所以，有必要把这么零散的页面分放不同文件夹么？

　　我的做法是这样的：

　　根目录下放置一个 [inc]，将所有的.css，.js，.ascx都放进去，而把.swf都放到[images]，[pic]仍为目录，但为[images]的子目录。好了，现在我们仅就.css文件来说，根目录的[inc]下的css文件应该有两个，一个叫main.css，这个是全站使用的样式，主要包括链接样式、字体大小，还有最重要的网页构架的样式(就是组成页面布局的div的样式)。另一个叫index.css，这个主要包括了index页所独有的样式。

　　接下来我们考虑 /music/o2jam.aspx 这个页面的样式文件该如何存放。首先要注意到，o2jam.aspx与其他同在music目录下的其他页面的显示方式是类似的；其次注意到，各个栏目之间的风格又可能是迥异的(比如“访客留言”和“音乐精选”)，所以，我在目录下也建立[inc]目录，同时，我将o2jam.aspx用到的样式，同时也是musci页其他页所用到的样式，存成main.css，放在/music/inc/目录下。此时，如果要针对目录下的页面应用它所独有的样式时，呵呵，相信你已经知道了，直接写在head里，而没有必要再存成o2jam.css，audition.css等等，只有在行数特别多时(超过100行)再考虑为每个页面创建单独的css文件。