网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素 的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。

最早的滑动门的技术，一般都是结合 onclick 或者 onmouseover 事件传递一个参数给 JS 函数，根据传递的参数来决定显示哪一个标签。比如：

function showTabs(n) {
  var tabsNumber = 3;
  for (i = 0; i < tabsNumber; i++) {
      if (i == n) {
          document.getElementById("tabPanel-" + i).style.display = "block";
      } else {
          document.getElementById("tabPanel-" + i).style.display = "none";
      }
  }
}

加入有这样的一个函数，就可以在tab的标题按钮中设置 onclick = “showTabs(1)”来设置第二块内容显示，而其它块隐藏。

这种方式最大的缺点是：

1. HTML代码和JS代码混合；
2. 可扩展性差；

尽管可以通过window.onload绑定事件等方式来是实现JS代码从HTML中分离，也可以把函数改得更复杂以实现通用性。但是总的来说，还是很难做到一处定义到处引用。

后来随着各种JS类库的出现，更强大的Tabs出现了，最出名的就是jQuery UI中的tabs插件。一旦加载了jQuery框架和jQuery UI插件，那么要在页面中实现Tabs，就变得简单了许多。首先我们的页面中的Tabs代码这样写：

<div class="tabs">
    <ul>
        <li><a href="#panel-1">标签一</a></li>
        <li><a href="#panel-2">标签二</a></li>
    </ul>
    <div id="panel-1">区域一</div>
    <div id="panel-2">区域二</div>
</div>

注意：这里的代码非常干净，不含任何的JS代码或者与文档结构无关的定义。然后，在head区域，或者在页面任何地方增加一段js代码：

$(function() {
    $(".tabs").tabs();
});

就实现了Tabs功能，这行JS代码执行后，上面的HTML代码就会变成：

<div class="tabs">
    <ul class="ui-tabs-nav" jquery1239647486215="2">
        <li class="ui-tabs-selected"><a href="#panel-1" jquery1239647486215="8">标签一</a></li>
        <li><a href="#panel-2" jquery1239647486215="9">标签二</a></li>
        ></ul>
    <div id="panel-1" class="ui-tabs-panel" jquery1239647486215="4">
        区域一
    </div>
    <div id="panel-2" class="ui-tabs-panel ui-tabs-hide" jquery1239647486215="5">
        区域二
    </div>
</div>

结合我们自己编写的css，或者jQuery UI 自带的CSS，就可以实现滑动门效果。并且，由于jQuery的强大，我们可以在页面中放置多组滑动门，然后一次性设定。

要说明的是，这个地方由于只启用了jQuery UI 中的 Tabs 插件，因此生成的代码还是比较干净的，只增加了 ui-tabs-xxxx 这几个相关的css类。如果你同时包含了jQuery UI的其它插件，那么即使不启用，也会添加一堆的css定义。而且，jQuery UI Tabs 还提供了非常强大的控制功能，你可以动态地添加 tab，可以随意更改激活事件，可以定义切换效果，还可以设置默认激活状态和禁用等。

但是我在实际应用中遇到了一些问题，除了 jQuery UI 自带的js脚本很大，css不符合实际应用需求外，还有一个最大的问题，你可能已经注意到了，在作为导航的标签定义中，每个标签对应哪一个区域是用链接目标来定义的。比如 <a href=”#panel-1″>标签一</a>和<div id=”panel-1″>区域一</div>对应，如果你的标签和区域没有对应起来，绑定tabs()就不起作用了。

而且，这种方式来带来另一个麻烦，就是当我们需要给标签加上链接的时候，没办法加。即使你将标签的激活事件设置为onmouseover而不是onclick，链接也不能实现，因为链接用于指定目标了。这种需求在我们的实际应用中并不是不存在的。比如：

这两个图片中的tabs标签，都要添加到对应的新闻类别或者论坛板块的链接。这时候 jQuery UI的默认绑定就带来了麻烦。

其实分析一下，我们在实现滑动门的时候，用以下HTML结构就可以满足需要：

<div class="tabs">
    <ul>
        <li>标签一</li>
        <li>标签二</li>
    </ul>
    <div>区域一</div>
    <div>区域二</div>
</div>

借助 jQuery 库，我们可以通过 $(“.tabs”)找到要实现的标签，然后 .find(“li”) 来找到要添加事件的元素，绑定事件的时候，我们可以通过该元素在$(“.tabs li”)集合中的索引值来明确是哪一个标签被激活，然后对应索引值的panel显示。代码类似这样：

<script type="text/javascript">
    $(function() {
        $(".tabs").find("li").onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().children("li");
                var panels = $(this).parent().parent().children("div");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
</script>

这段代码只使用了两个css类来处理，并且，自动判断tabs和panels的对应状态，假如你有4个tab，但是只有前三个启用了，那么你只需要写三个panel就可以，第四个panel不存在，则第四个tab自动不生效。

在实际使用中，会遇到一个问题，一般我们会给tab中的文字加链接，那么当鼠标滑过这个tab的时候，如果指到了文字，那么激发事件的对象有可能是a元素而不是li元素，则事件就不能正确激发。所以我们改进代码如下：

<script type="text/javascript">
    $(function() {
        $(".ui-tabs-nav > li > a")onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().parent().children("li");
                var panels = $(this).parent().parent().parent().children(".ui-tabs-panel");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
</script>

与此对应的HTML结构是：

<div>
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-selected"><a href="/bbs">论坛新帖</a></li>
        <li><a href="/blog">最新博文</a></li>
    </ul>
    <div class="ui-tabs-panel">
      <!--这里调用最新论坛文章-->
    </div>
    <div class="ui-tabs-panel ui-tabs-hide">
      <!--这里调用最新博客文章-->
    </div>
</div>

同时，我们有以下的css类定义：

.ui-tabs-nav
{
    /*导航容器定义*/
}
.ui-tabs-nav li
{
    /*默认标签样式*/
}
.ui-tabs-nav li.ui-tabs-selected
{
    /*激活的标签样式*/
}
.ui-tabs-panel
{
    /*默认的显示区域样式*/
}
.ui-tabs-hide
{
    display: none;
}

这样，就可以根据你的需要，结合自己的css，定制不同样式的滑动门了。把相应的js代码放到页面中，那么在页面里任何地方只要你按照HTML结构编写了一段html，这段html就会自动变成滑动门。而不用在每个页面里单独指定特定的selector来应用滑动门的tabs()方法。并且，根据需要给你的滑动门标签添加需要的链接，或者不要链接（href=”#” 或者 href=”javascript:void(0)”）。

这段滑动门代码只要具有jQuery core 就可以正常运行，不需要加载jQuery UI。非常简单，而且很通用，样式上喜欢怎么扩展都可以。

具体效果可以参见 http:/www.taihainet.com ， 在 台海网 首页中，我一共应用了四个样式共九组滑动门，代码就只是上面给出的那一段。四个样式列举如下：

 
滑动门一：多个搜索表单，暂时只实现两个，后面三个由于没有对应的ui-tabs-panel，自动禁用，但是链接可以点击。

 
滑动门二：多块商务信息区域，其中第三个由于没有对应的ui-tabs-panel，自动禁用。

滑动门三：新闻栏目切换，标签中的文字链接到对应的新闻栏目。

滑动门四：论坛分板块帖子调用。标签中的文字链接到对应的论坛板块。

估计没有什么比表单更让设计师头痛的了。表单能否让设计师表现出创意？我们可能需要从做基本的层面，重新审视表单、理解表单——表单是用户和软件之间的对话。

忘掉切换、点击吧，表单是我们数字设计师（译者：我想应该是依赖计算机进行设计的设计人员）将面临的最富有挑战性的交互方式。下一次，当你要设计一个表单的时候，不要认为好的设计就是要应用好看的CSS效果或者是添加漂亮的jQuery特效。表单设计的水是很深的。

我已经做过上百个表单用户测试，为保险公司、假期预订交互设计过一些非常复杂的表单等等。可能你最近使用的某个表单就是我设计的。

下面这些经验教训，我认为设计师在开始设计表单设计之前要思量一番。

1、不要标记必填字段

你知道小星号(*)就表示必填字段？我已经见过很多关于此项用户测试失败的例子。从概念上来说，必填字段没有多大意义，等同离线。对于开发者，这个是很好的，他们提供了一种很好的黑白方式去完成。星号表示的必填字段不是一个好的表单元素，因为它需要用户去学习。在用户测试中我看到的典型行为是用户在上面填写表单，结束于某个东西阻止他们的时候或者他们碰了某个按钮。

解决方法很简单，标记那些可选的字段，优质用户需要驻足思考是否要填写的字段也做出标记。

下面两张截图以腾讯微博注册页面为例分别演示：阻止用户填写表单的事情，以及“不标记必填字段”。

2、不要使用微调

HTML5近来春风得意，它提供了很多美轮美奂的元素共设计师选择。我们需要好好思考我们的新玩具是否得当。现在的数字字段（指类似于type=”number”的输入框）都提供了小小的上下小尖角运行用户来回调数值。

现在有两个问题。首先，浏览器默认显示的小三角真不是一般的小，点击很繁琐，你还可以想象加菲猫般的手指在iPhone上挣扎的情景。这就是所谓的费茨法则，越小的东西越难点中。

我好像听到你在叫嚣：我可以直接在数字文本框中键入数值。是的，你可以。但是，让我们看看浏览器的显示内容、向上向下的微调箭头使得文本框长得很像我们信赖的朋友（下拉选择框）。首次使用微调交互的用户会因此认为他们不能键入内容。

我的建议是：浏览器开发者应该调整默认的设计。

3、只使用一种按钮类型或最好为每个表单只提供一个按钮

还有一个鲜为人知的心理学原理，叫做“希克法则(Hick’s Law)”，基本观点是：当选项增加时，人们下决定的时间就会增加。我知道，这不是《rocket science》（译者：一部关于青春期焦虑的喜剧电影佳作），但仍然是值得铭记于心的规则。

你可以通过帮助你的优质用户做选择来帮助他们。让所有的基本按钮都保持同一个颜色，每页都只有一个按钮（非基本按钮）来帮助他们做选择。哪个按钮是我应该点击的呢？哦，很简单嘛，那个大大的醒目的按钮！

4、大块区域

我之前是学神经科学的，因此研究过心理学记忆——特别是短期和工作记忆。现在我当面告诉你，短期记忆能力不是7+/-2, 4+/-1或是人说三五句话。作为人类的我们擅于处理视觉刺激，局限是数目越小我们做得越好。将表单块分成更小的组可以让评估变得更加容易，而这往往促使用户键入表单的内容来自他们的记忆。

所以，请确保你的字段组长度大约为4。

5、想想你为何对某事抱有疑问，对于用户感觉又如何？

这可能是我给出的最直接的建议，但经常是采纳率最低的。

见下图：

质疑你提出的每个问题。这个问题有必要吗？为什么要问这个问题？

很多业务需要我们提出问题。作为设计师的我们可以争得面红耳赤。提出业务上的问题，对于了解我们的业务需要的数据来说是有必要。

我们可以先告诉优质用户我们为何需要问那样的问题，之后再帮助他们。放心的使用和数据共享通常都是好的做法。

再次示例：

下图为译者的补充截图：

6、日期是个不安分的家伙

输入日期确实是个挑战，有些缺陷你可以避免。最大问题是错误的处理方式。

最简单的方法是浮出日历。值得注意的是在英国一周开始于星期一，而在美国则是星期天。如果你的用户注意力不集中，他们可能选择星期天，而实际上他们本想选择星期一的。

同样需要注意的是国际日期的格式。在美国，日期格式是是月份在前，而在日本，日期的格式是年份在前。因此，日期4/5/12可以以三种方式解释。

这就是为什么最好使用选择框。

下图为译者补充截图：

7、表单是开发者的工艺品

与设计师一样，表单也是开发人员的工艺品。了解输入数据可能出现的错误以及编写相应的后台代码是一项挑战。

下面是个很简单的例子。输入货币值。用户可能犯很严重的错误。迫使用户满足某种特定的格式会让用户沮丧。让我们来正视这个问题吧，这是开发人员的懒惰造成的。

对于开发人员而言，没有什么挑战胜过构建防弹表单（指防御能力很强的表单）了。

8、不要在表单中使用垂直分栏（列）

在表单中使用列的最大问题是流动。表单开始于上面，结束语底部，而列的出现会打破这种流动。

不要假设用户通过标签访问表单，而因此以列的形式做出相应的导航。在用户测试中，这种情况是罕见的。大部分情况下，我们看到的是：输入细节，使用鼠标/触控板/手指点击进入下一个字段，然后再输入内容等。

9、如果一个输入框可以满足需求就不要用两个

大部分用户不熟悉盲打。在用户测试中，我们可以看到很多用户在输入内容时候都要看键盘。

当要往表单中输入电话号码的时候，会要求添加区号和电话号码，哦，问题来了。用户看不到，或确实记不住这儿有两个输入框，结果第一个框输入了完整数字，如果这个文本框限制了一定数目的字符限制，问题就更糟了。

电话号码就使用一个字段，同样的，门牌号/街道什么的都是如此。只使用一个文本输入框。

10、提示信息要友善

你会惊讶到底有多少相当粗鲁的错误消息出现在这里或那里。

下面是我最近碰到的一个例子：

事实明摆着你可以选择一个未来时间，结果出现了滑稽的反应，恩，这种提示信息可不太好。

你可以作为用户设身处地想一下：作为用户，看到这个错误提示会有什么反应。恼火？或许更糟糕。亲切友善是其实很容易做到。

我制作了一幅图片（如下，点击可以查看超大图），它包含有更多的实践方法，以帮助你设计出更好的表单。

1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。因特网不是书，因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。 项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。当然，某些字体可以让网站精彩纷呈。 不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读， 你应该让阅读过程舒服些。

4. 不要用小字体。如上一条所述，你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话， 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。 错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站，在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小，你会在他们面前失去信用。

7. 不必要时不要让用户注册。直白地讲，我上网是为了获取信息，不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你 能提供的消息非常有价值）。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。Flash不仅会增加网站的读取时间， 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。 记住，永远不要使用音乐。

11. 当你必须使用声音时，让用户启动它。有时你必须使用声音文件， 比如你要给用户发送一份演讲，或者你的教程包含声音。这没问题，但要让用户来控制， 让用户点击“播放”按钮，别在打开网页的瞬间播放声音。

12. 不要让标志弄乱你的网站。社交网络和社区的标志会让你的网站看起来十分不专业。 就算是奖章和荣誉等标志也应当放到“关于我们”页面上。

13. 不要使用“点击进入”页面。用户访问到内容的步骤越少越好。

14. 注意要留下联系方式。最差的莫过于网站没有留下联系方式的了。 不仅对访问者不友好，而且对你也没好处，你会错过珍贵的反馈信息。

15. 不要影响“后退”按钮的动作。这是网站可用性的最基本的理念。 在任何情况下都不能影响“后退”按钮的动作。比如，打开新窗口会破坏它， 某些Javas cript链接也会破坏它。

16. 不要用闪烁的文字。除非你的访问者来自1996年，否则别用闪烁文字。

17. 避免复杂的URL结构。一个简单的基于关键字的URL结构不仅能提高你的搜索引擎排名， 还能让访问者在访问之前了解网页内容。

18. 用C布局，不要使用表格。HTML表格曾经被用于页面布局， 但没有必要拘泥于此，尤其是在C诞生之后。C更快、更稳定， 并能提供更多的特性。

19. 保证用户可以搜索整个网站。搜索引擎带来因特网革命的原因，就是 它使得信息查找变得十分容易。别在你的网站上唱反调。

20. 避免使用下拉菜单。用户应当直观地看到所有导航选项。 下拉菜单会造成混乱，并且会隐藏访问者真正要找的信息。

21. 使用文字做导航栏。文字导航不仅速度快，而且更稳定。 例如，有些用户上网时会关闭图片。

22. 如果需要链接到PDF文档，一定要注明。你一定有过点击链接之后， 浏览器就像死掉一样等待Acrobat Reader启动，只为了打开一个（你不想看的）PDF？ 这是个不小的麻烦，因此一定要在指向PDF的链接旁特别说明，使用户可以采取相应措施。

23. 不要用多种版本让访问者迷惑。你想用哪种带宽？56K？128K？Flash版还是HTML版？ 嗨，我只想快点看到内容！

24. 不要在内容中混合广告。在内容中混合广告（如Adsee）也许会增加短期内的广告点击率， 但从长远角度来看，这会减少网站的人气。愤怒的用户会离开的。

25. 使用简单的导航结构。过犹不及。这个规则通常适用于人和选择上。 确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧？

26. 避免内容介绍。别强迫用户在访问到真正内容之前看某些东西。 这很令人愤怒，除非你提供的信息是用户必须的，否则他不会等下去。

27. 不要使用FrontPage。这一点也适用于其他廉价的HTML编辑器。 它们让页面设计变得更方便，但其输出结果将会非常低级，不兼容不同的浏览器， 并且会包含错误。

28. 保证你的网站兼容大部分浏览器。浏览器并不完全相同，在解释C和其他 语言的方法也相差甚远。不管你是否愿意，你应当让网站兼容市面上的常用浏览器， 否则你会永远地失去部分读者。

29. 保证在链接上添加有意义的文字。以前我经常犯这个错误。告诉人们“点击这里”很容易， 但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么， 也能为链接指向的外部站点带来SEO效果。

30. 不要在状态栏中隐藏链接。用户还必须能在状态栏中看到链接指向哪里。 如果你隐藏了链接（即使是由于其他原因），那么你也会丧失信誉。

31. 使链接可见。访问者应能轻易识别出哪些能点击，哪些不能。 确保链接的颜色有强烈的对比（标准的蓝色通常是最好的）。可能的话， 最好加上下划线。

32. 不要在普通文本上添加下划线或者颜色。除非特别需要，否则不要为普通文字添加下划线。 就像用户需要识别哪些能点击一样，他们不应当将本不能点击的文字误认为能够点击。

33. 改变访问过的链接的颜色。这一点对于提高网站可用性非常重要。 改变访问过的链接颜色有助于用户在网站中定位，确保他们不会不经意地 访问同一页面两次。

34. 不要使用动态GIF。除非你有需要动画的广告条，否则避免使用动态GIF。 它会使网站看上去很业余，并且会分散访问者的注意力。

35. 给图像添加ALT和TITLE属性。ALT和TITLE不仅会带来SEO效果，而且 对盲人有很大帮助。

36. 不要用令人不快的颜色。如果用户连续阅读10分钟后觉得头疼， 那么你最好选择别的配色方案。根据你的目的决定设计（例如，创造一种氛围 使得用户将注意力放在网站内容上，等等）。

37. 不要弹出窗口。这一点涉及任何种类的弹出窗口。即使用户要求使用， 弹出窗口也不宜使用，因为它会被弹出窗口拦截功能阻拦。

38. 不要使用Javas cript做链接。远离那些点击之后执行一小段Javas cript的链接， 它们经常给用户带来麻烦。

39. 在页面底部放置有意义的链接。访问者在找不到所需信息时通常会滚动到页面最底端。 作为最后的手段，你应当在页面底部放一个“联系我们”页面的链接。

40. 避免网页过长。如果用户老是需要滚动才能看到内容，他通常会采取的做法是 跳过它们。如果你的网站正好如此，那么应当缩短内容并优化导航结构。

41. 禁止使用水平滚动条。虽然垂直滚动条可以接受，但水平滚动条却远非如此。 现在的流行分辨率是1024×768，要确保网站能容纳在其中。

42. 禁止出现拼写或语法错误。这不是网站设计的错，但却是影响网站整体质量的重要因素。 确保链接和文字中没有拼写或语法错误。

43. 如果你使用图片认证，要保证能看清其字符。有些网站将图片认证作为对抗垃圾评论的方法， 或是在注册表单上使用。其中有个问题就是，用户经常需要叫上全家人来讨论图片上到底是什么字母。

TheThemeMachine被设计成为一个简洁但是确具有前瞻性的主题，它里面几乎包含了主题的各种功能。本文就通过分析这个主题，来介绍主题的相关知识。
分析一个主题
本节介绍了主题中一些必需的和可选的元素。

清单文件（Theme.txt）
每一个主题都必需有一个清单文件来描述该主题。此文件是一个文本文件，命名为Theme.txt，在相应主题文件夹的根目录下。下面是TheThemeMachine主题的清单文件：

Name: The Theme Machine
Author: jowall, mibach, loudej, heskew
Description: Orchard Theme Machine is a flexible m….
Version: 0.1
Tags: Awesome
Website: http://orchardproject.net
Zones: Header, Navigation, Featured, BeforeMain…
文件给出了主题的名称、描述、作者、标签等信息。区域（Zones）字段则描述了该主题所有可用的区域。区域里可以添加任何内容，最常见的是widgets。并不是所有的区域都需要在这里描述，只有那些需要添加widgets的区域才需要在这里进行描述。

此图显示了19个区域，这通常已经超过了你网站所需要的布局。这些区域包括页眉（Header）页脚（Footer），它们位于页面的最上面和最下面。有一个导航区域（Navigation），这里通常是显示导航菜单的。特色区域（Featured）你可能会放一个网站Banner。BeforeMain和AfterMain在你网站主要内容区域的前后。AsideFirst和AsideSecond在你网站主要内容区域的左右。在页面的中部有一个消息区域（Messages），可用于显示消息通知。其次还有BeforeContent和AfterContent也在主内容区域前后，但是却在两侧区域之间。TripelFirst，TripelSecond，TripelThird在页面的最底部，如你想实行三列布局效果，那么就可以用它们。
FooterQuad*则可以用于四列布局效果。如果这些区域没有内容，它们将会隐藏。所以你可以灵活的应用这些区域来布局你的网站。
更多关于清单文件的介绍可以查看《Orchard模块和主题的清单文件（Manifest File）》。

主题缩略图
主题还需要包含一个主题效果的缩略图文件Theme.png，位于该主题的根目录下，大小为400X400px，它可以直观的让人们了解该主题的样式。

主题区域概况图
另外主题还可以提供一个主题区域概况图，让人们在添加Widgets时候可以很直观的知道所添加的Widgets将处于页面的那个位置。此图文件名为ThemeZonePreview.png，位于该主题的根目录下，宽度为400px。

静态资源
主题通常还可以包含一些静态资源，如：CSS样式表、JavaScript文件或图片等。这些文件必须分别放置在以下文件夹中：
Css：放置Css样式表。
Script：放置JavaScript文件。
Content：这个文件夹TheThemeMachine主题中没有，如果你的主题中有用到图片，可以创建一个这样的文件夹，并在里面建立一个Images的目录存放图，如果图片很多还可以在此目录下建子目录分类存放。
注意：如果自己创建一个Content文件夹来存放一些图片或其它文件。需要在Content文件夹中创建一个web.config文件，来启用此文件夹中静态文件处理程序映射。如果没有此文件这些静态文件将无法访问，因为Orchard从安全的角度考虑在根目录的web.config中已经移除了所有的处理程序映射。需要在Content文件夹中添加的web.config文件如下：
web.config

文档类型定义（Document）
一个主题中通常不包含Document.cshtml文件，因为需要改动这个文件的情况很少。这个文件主要是用于定义标签以外元素的。如果文档类型（DOCTYPE）、标签等。主题中如果不包含此文件，默认调用~\Core\Shapes\Views\下的Document.cshtml文件，当然我们也可以把这个文件复制到主题的Views目录下，来重写文档定义。

布局（Layouts）
布局是控制Body标签以内的内容呈现排版的。例如：你要定义主要内容在什么位置显示。你可以在后续的” 标记（Markup）“一节中了解更加详细的内容。
一个主题可以包括任意数量的布局文件，不过在TheThemeMachine主题中只有一个布局文件，名为：Layout.cshtml。例如：一个主题可以添加多个专有布局文件，如：Layout-Blog.cshtml 或 Layout-HomePage.cshtml，这样就可以分别为博客页面或主页定制特有的布局效果。请注意，布局文件的命名规则为：Layout-{layout name}.cshtml。每一个布局文件都可以定义自己特有的区域并组织不同的标记。
关于如何使用这些可以替换的布局文件，可以见《Switching the layout in Orchard CMS》中的讲解。

形状模板（Shape Templates）
在Orchard中，当一个Web页面呈现为Html时，它是作为一个树型结构的形状集合（Shapes）出现的。所谓树型结构的形状集合就是大形状中套小形状，一层一层的套下去。Shapes相当于一个页面的Model，它里面包含了这个页面上的所有对象，如：区域、菜单、菜单项和Widgets等。下图可大致说明这种形状关系：

每一个Shape都可以用一个模板来呈现，这些模板都可以在主题中进行重写。在主题中重写模板，用同名的模板来替换就可以了。例如：主题中如果有一个Menu.cshtml模板存在，它将替换原有的菜单模板。
TheThemeMachine主题中包含了两个形状模板，BadgeOfHonor和Branding。这是从Layout.cshtml建立的并分别注入到页眉和页脚区域的。

// Site name and link to the home page
WorkContext.Layout.Header.Add(New.Branding(), “5″);
// Powered by Orchard
WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), “5″);

注意：模板是两种呈现形状方法的其中之一。除了用模板以外你还可以通过代码的形式来呈现，如：定义一个方法并加上Shape属性即可，你可以在CoreShapes.cs中找到这种写法。这通常用于模块中，但是在主题里也是一样适用的。

内容项模板（Item Templates）
主题还可以重写内容项呈现模板。建立一个\Views\Items文件夹，在该文件夹下就可以添加相应的内容项模板。内容项模板的命名规则：Content-{content type name}.cshtml 或Content-{content type name}.{display type}.cshtml。例如：你要重写博客文章的呈现模板，你就可以在\Views\Items文件夹下，添加一个Content-BlogPost.cshtml文件来进行替换，并且你还可以添加一个Content-BlogPost.Summary.cshtml来替换以摘要形式显示的博客文章。

部件模板（Part Templates）
主题还可以重写部件呈现模板。建立一个\Views\Parts文件夹，在该文件夹下就可以添加相应的部件模板。部件模板的命名规则为：用同名的部件模板进行替换。例如：我们要重写评论部件的模板，我们只用在\Views\Parts文件夹下创建一个Comments.cshtml就可以了。

字段模板（Field Templates）
主题还可以重写字段呈现模板。建立一个\Views\Fields文件夹，在该文件夹下就可以添加相应的字段模板。字段模板的命名规则为：{field type name}.cshtml和{field type name}.{display type}.cshtml。例如，我们重写一个文本字段的模板，可以用Common.Text.cshtml进行替换。

模板的候补（Alternates）

如上文所示，我们可以在皮肤中提供一套相应的模板或布局文件，来控制不同类型的内容的呈现效果。例如：可以添加一个主页的特殊布局样式，还可添加其他子页面的特殊布局样式，还可以以不同的方式显示博客内容。更多关于模板替换的规则可以见《Alternates》。顺便说一句其实我们也不用死记硬背这些规则，因为Orchard已经帮我提供了一个强大的工具，来解决这些问题。《Customizing Orchard using Designer Helper Tools》一文中有关于这个工具的介绍。

小部件重写（Widget Overrides）

在主题中还可以对小部件的呈现样式进行重写。在Views文件夹下，创建一个命名为：widget-{widget type}.cshtml的文件即可重写相应的小部件。例如：我们需要在Html 小部件上加一个红色的边线，我们可以在Views文件夹下创建一个widget-htmlwidget.cshtml的文件，并输入以下代码即可：

Orchard中博文类型的Part分解图

由上图就可以看出一片博文其实是由多个内容部件组成的。

Orchard中一些常用的内容部件
Route Part：路由部件，可为内容提供路由支持即可通过指定Url访问相应内容。
Body Part：文本部件，可提供一个富文本编辑器的功能。
Comment Part：评论部件，可提供评论功能。
Tags Part：标签部件，可提供内容的标签定义，实现全站的标签检索功能。
Common Part：通用部件，提供所有者信息。
Publish later Part：延迟发布部件，提供内容延迟发布功能。

参考文档：

Orchard中的基本概念：http://www.orchardproject.net/docs/Basic-Orchard-Concepts.ashx

运行机制相关的概念：
Architecture：架构。见下图：

官网介绍地址：http://www.orchardproject.net/docs/How-Orchard-works.ashx

Orchard是配置在IIS服务器上的一个Web站点，它使用了.NET4.0和ASP.Net的技术。代码是C#编写的。是基于ASP.NET MVC3的Web开发框架上编写的一个应用。它使用到了Nhibernate（OR映射工具）、Autofac（依赖注入容器）、Castle（也是一个开源框架，好像说是用到了动态代理之类的东西，目前还没明白，等清楚了再说）等成熟的框架和类库。其实还有一些其他常用的类库，如：sharpziplib（压缩、解压）、log4net（日志）等。估计是太常用了所以并没有将其列在图上。在这些成熟的框架基础上，Orchard建立了一个自己的框架Orchard Framework，主要提供一些最基本的功能，如：视图引擎（我感觉Orchard对Razor进行了重写和扩充）、内容管理、用户认证等，我们可以把它理解为Orchard所要使用的基础类库。在Orchard Framework的基础上，Orchard提供了一个网站运行最核心的功能，这些功能可以被其他模块使用。如：feeds、navigation和routable。在Orchard Code之上就是模块了（Modules），Orchard自带了一些基础的模块，如：博客。另外一些后台的功能也是作为模块提供的，比如：模块管理，页面管理等。

Shell：外壳，可以理解为Orchard站点的运行基础。包括站点设置、可使用的模块列表、主题列表等等。

Tenant：直译为租户，其实是一个逻辑站点的意思。Orchard支持在一个物理的站点上建立多个逻辑的站点。每个逻辑站点都是独立，有自己的数据，自己的主题等。所以我觉得把它翻译成站点更好些。类似DNN中Portals的概念。

皮肤相关的概念：
Theme：主题。是网站皮肤的概念。可以自由的定义显示区域，而且在Orchard中页面上的任何一部分的Html代码都是可以控的。而且可以根据多种情况，对同一个模块进行不同的样式定义。如：不同的站点，不同的请求地址等。总之是一个非常灵活的东西。
Zone：区域。是皮肤上的区块划分。用于在页面上不同的地方呈现不同数据。关于自定义区域功能，好像是动态类型在这里发挥了巨大作用。具体实现，等深入了解后在详细描述。
Layer：层。这也是一个皮肤中的概念。它相当与把平面的东西立体化了。在原有的区域的基础上增加了一个权限和特定情况的维度。即可在某一区域上面根据不同的权限显示不同的数据。如：管理员可见的，注册用户可见的，匿名用户可见的，首页可见的等等。通过层的概念就很好的解决了不同权限显示不同内容的问题。并且层还可以自由定义，具体用法和实现还需要深入学习。

功能相关的概念：
Module：模块。这个定义的范围很广，几乎所有的功能都是由模块构成的。在Orchard的划分中 ContentType、Part、Field，Widget，等都可以称做模块。但我倾向于把一个完整的功能，叫做模块。比如：Blogs模块，商城模块等。其余的内容还是按照各自的属性去划分。
Widget：小部件。可以提供多种功能的东西，如：最近博文，Html内容，登录控件等等。你可以把这些小部件，添加到页面的任意一个区域中。至于小部件还能干什么，就看我们的想象力了。
ContentType：内容类型。这个可是Orchard中非常亮丽的一个功能了。比如：一个文本输入框是一个类型，我们可以定义它在显示的时候是什么样子的、编辑的时候是什么样子的、是如何存储的。也就是说每一种类型都实现了由数据库层到显示层的完整封装。更神奇的是，我们可以利用这些现有的类型组装出一个新的类型。比如：我们可以在后台中添加几个自定义字段、再加一个Body Part（图文编辑器）、再加一个Comment Part（评论），一个新的新闻类型就诞生了。可以想象这样的开发利用率有多高。而且它居然还有一个更更神奇的地方，就是每一种类型在其他新的类型中当作Part的时候，其显示样式都是可以重新定义的。这样将会极大的提高复用的灵活性。
Part：构成类容类型的一个组成部分。它可以是评论、可以是博客，它可以是你任何想表达的业务实体。是做作为显示和处理的基本单元。是Orchard中一个很关键的组成部分。我觉得暂时可以把它理解为组件，等有了深入了解后再做详细的论述。
Field：字段。我觉得可以理解为一种轻量级的内容部件，通常是一个文本框，或者是一个可选择日期的日期输入框。叫做输入控件也许更贴切些。

编程相关的概念：

Record：记录。是实际存储到数据库中的数据。我觉得也可以称它为数据实体。
ContentPart ：内容部件。是呈现到UI上的数据，我觉得也可以称它为业务实体。
Repository：数据仓库。负责数据访问的对象，我们就叫它数据访问层吧。
Handler：处理器。负责定义数据存储的方式。
Driver：驱动器。负责处理部件或字段的呈现逻辑，类似于MVC中的Controller。
Shape：外形。是一个动态类型。它负责把业务数据组装起来在View层上面显示。我们叫它视图模型也许更好一些。

    1. Canvas Cycle

　　艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作，这是一幅华丽动人的自然风景画,如冬日的森林，海景和山脉。他们看着这美不胜收并具有音效的图片，心旷神怡。如果你想从工作中获得片刻的轻松，这些照片可以瞬间融化你的紧张感。

　　2. Google Gravity

　　另一个来自于Mr.Doob的惊人之作，这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接，这对那些讨厌谷歌的大公司来说是个很有意思的游戏。

　　3. Canvas Trees

　　这是有Kenneth Jorgenson创制，这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说：你可以点击网站，然后它会带你到一个白色的背景。当开始计算程序中有多少分支时，黑色墨水绘制的树开始成长。你可以不断地刷新，只要你愿意。

　　4. Magnetic

　　这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始，这可以在屏幕上拖动。些许微粒光束围绕着它，如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒，只需双击并拖动他们到任意地方。是的，他们都是有关磁铁和微粒。

　　5. Celebrity Earnings Graph 名人赚钱图表

　　想知道一个电视名人每集节目赚多少？这是个很酷的小图能显示成堆的彩条，它们代表每一个特定特定的名人（或像 Charlie Sheen）. 这是 Daniel Rapp诸多项目中的一个。

　　6. Canvas Ribbon

　　Paul Truong 开发了这个有趣的应用，能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。

　　7. WebGL Water

　　这还有一个很酷的演示，使用了革命性的WebGL（基于Web的图形库），在谷歌chrome上效果最好。在演示中，你可以荡起水中的涟漪，或拖动球体移动它，然后按某些键盘键设置光线的方向和切换重力，所有的都是见证如何在环境中灵活地移动目标。

　　8. Chrysaora

　　另一个由WebGL提供的令人惊异的演示，在这你可以看到一群非常漂亮活泼的水母在水中游动，梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活，最好用谷歌Chrome浏览。

　　9. Voxel Rain

　　Voxel rain 意味着3D多色箱降成一个旋转的大块。这就像展示20世纪90年代的计算机，现在涉及到Web浏览器，利用HTML5的能力，互联网中最明亮的时代不会太远。

　　10. HTML5 文本效果

　　通常我们网页设计师不知道HTML5在Web排版突破上到底能给我们带来多大突破，并给你演示答案，比以往任何时候都跟多！你可以选择见证立体效果、霓虹灯效果，甚至移动的霓虹灯效果，未来的网页排版全在HTML5控制中。

　　11. 旋转的 HTML5 Logo

　　我Hold不住了，它旋转、旋转……这很酷。

　　12. 3D绘图

　　厌倦了2D基本HTML绘图服务吗？简单地画条线，然后向左或者向右移动，你将会看到你的旋转3D透视图。3D绘图与HTML5的结合不会更复杂。

　　13. mta.me Conductor

　　mta.me Conductor 通过涌现的点不断移动形成线，当线相互“碰撞”时给予你灵感，他们会引发一些互动。这些都证明HTML5不仅仅是代码，而是互动，是网页对于用户的真正关心。

　　14. Doogle Gmail

　　一个有趣的射击类型游戏，但主角是Gmail！就像经典的射击游戏，你获得生命、得分和全能的激光束。可能一个潜在的演示展示HTML5作为游戏的能力小心，Flash。如果还想玩其他HTML5 游戏，这里有10个HTML5游戏网站。

　　15. W Pilot

　　这是一个上瘾的游戏，它应该是非法的。严重的是，一旦你登录到他们的服务器，你将要玩几个小时。你基本上是到处乱飞拍摄的东西，同时避免由其他球员出手。它很简单并具有可玩性，允许多玩家操作，现在很受欢迎。

　　译文出处：伯乐在线 – 职场博客 – 程序员
　　译文链接：http://www.jobbole.com/entry.php/1433
    原文：Sonia Tracy　　翻译：敏捷翻译 – 翦丹■

    除非你一直在岩石下生活，否则你不会没听过HTML5。现在几乎到处都有HTML5的身影，这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。

    1. Canvas Cycle 　　艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作，这是一幅华丽动人的自然风景画,如冬日的森林，海景和山脉。他们看着这美不胜收并具有音效的图片，心旷神怡。如果你想从工作中获得片刻的轻松，这些照片可以瞬间融化你的紧张感。 http://www.effectgames.com/demos/canvascycle/

    　　2. Google Gravity 　　另一个来自于Mr.Doob的惊人之作，这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接，这对那些讨厌谷歌的大公司来说是个很有意思的游戏。 http://mrdoob.com/92/Google_Gravity_HTML5

    　　3. Canvas Trees 　　这是有Kenneth Jorgenson创制，这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说：你可以点击网站，然后它会带你到一个白色的背景。当开始计算程序中有多少分支时，黑色墨水绘制的树开始成长。你可以不断地刷新，只要你愿意。 http://kennethjorgensen.com/canvas/tree.html

    　　4. Celebrity Earnings Graph 名人赚钱图表 　　想知道一个电视名人每集节目赚多少？这是个很酷的小图能显示成堆的彩条，它们代表每一个特定特定的名人（或像 Charlie Sheen）. 这是 Daniel Rapp诸多项目中的一个。 http://rappdaniel.com/other/vis/

    　　5. Chrysaora 　　另一个由WebGL提供的令人惊异的演示，在这你可以看到一群非常漂亮活泼的水母在水中游动，梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活，最好用谷歌Chrome浏览。 http://chrysaora.com/

    　　6. Canvas Ribbon 　　Paul Truong 开发了这个有趣的应用，能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。 http://www.monocubed.com/2010/11/24/html5-canvas-ribbon-ios4-2-device-orientation/

    　　7. WebGL Water 　　这还有一个很酷的演示，使用了革命性的WebGL（基于Web的图形库），在谷歌chrome上效果最好。在演示中，你可以荡起水中的涟漪，或拖动球体移动它，然后按某些键盘键设置光线的方向和切换重力，所有的都是见证如何在环境中灵活地移动目标。 http://madebyevan.com/webgl-water/

    　　9. Voxel Rain 　　Voxel rain 意味着3D多色箱降成一个旋转的大块。这就像展示20世纪90年代的计算机，现在涉及到Web浏览器，利用HTML5的能力，互联网中最明亮的时代不会太远。 http://voxelrain.appspot.com/

    　　10. HTML5 文本效果 　　通常我们网页设计师不知道HTML5在Web排版突破上到底能给我们带来多大突破，并给你演示答案，比以往任何时候都跟多！你可以选择见证立体效果、霓虹灯效果，甚至移动的霓虹灯效果，未来的网页排版全在HTML5控制中。 http://www.html5rocks.com/en/tutorials/canvas/texteffects/Text-Effects.html

    　　11. 旋转的 HTML5 Logo 　　我Hold不住了，它旋转、旋转……这很酷。 http://www.kevs3d.co.uk/dev/html5logo/

    　　12. 3D绘图 　　厌倦了2D基本HTML绘图服务吗？简单地画条线，然后向左或者向右移动，你将会看到你的旋转3D透视图。3D绘图与HTML5的结合不会更复杂。 http://hakim.se/experiments/html5/sketch/#786af119

    　　13. mta.me Conductor 　　mta.me Conductor 通过涌现的点不断移动形成线，当线相互“碰撞”时给予你灵感，他们会引发一些互动。这些都证明HTML5不仅仅是代码，而是互动，是网页对于用户的真正关心。 http://www.mta.me/

    　　14. Doogle Gmail 　　一个有趣的射击类型游戏，但主角是Gmail！就像经典的射击游戏，你获得生命、得分和全能的激光束。可能一个潜在的演示展示HTML5作为游戏的能力小心，Flash。如果还想玩其他HTML5 游戏，这里有10个HTML5游戏网站。

    　　15. W Pilot 　　这是一个上瘾的游戏，它应该是非法的。严重的是，一旦你登录到他们的服务器，你将要玩几个小时。你基本上是到处乱飞拍摄的东西，同时避免由其他球员出手。它很简单并具有可玩性，允许多玩家操作，现在很受欢迎。 http://jfd.github.com/wpilot/ (本文来源：泡泡网 )

图（1）

图（2）

图（3）

图（4）

图（6）

图（7）

图（8）

Floor planner官方网址：点击进入

图（9）

图（10）