INSRAQ.me

国外的CMS有一个特点，就是特别注重架构，相反，国内的CMS侧重点是功能和外观，却没有一个好的架构。TextPattern是我很喜欢的CMS，然而国内用户很少，也没有一个完整的介绍文章，在这里我简单介绍一下TextPattern的模版系统。
很多TextPattern的初学者总是有一个问题，搞不清TextPattern的模版系统。因为TextPattern并没有像WordPress那样的1-Click风格变换，这大概就是TextPattern普及度不高的原因。想要修改TextPattern的设计，必须弄清楚 TextPattern的模版系统的架构。

页面结构简单分析

先来讲页面结构，看下面的示意图(“|”表示分列)：

Header
Content | Sidebar
Footer

上面是一个简单的两栏式布局，而CMS的关键就是控制Content中的内容，把Content拆解来看：

Article 1 Title
Article 1 Content
Article 1 Misc
—————————————
Article 2 Title
Article 2 Content
Article 2 Misc
….

理解Page和Form

每一文章都由标题，内容和杂项所组成。整个Content包含了许多“文章”。现在问题来了，如何去控制这些页面的模版。TextPattern引入了两个重要概念：Page和Form。
Page可以翻译成页面，这个页面有自己独特的Header/Content/Sidebar/Footer。
Form可以翻译成片段，这个片段控制了文章自己的模版，包括Article Title/Article Content/Article Misc。
这两个概念是如何联系起来呢？请记住：Page可以调用并且重复利用Form。
我再来解释这句话，首先，Page可以调用Form的东西，你也许会问，为什么不直接写到Page里面，而要调用呢？这就是第二点，Page可以重复利用 Form。就比如说文章的模版都是一样的，Page要显示5篇文章，那一个一个的写5个完全相同结构的模版效率太低，TextPattern允许你的在 Form中定义文章的样式，然后在Page用一个标签让TextPattern自动为你的5篇文章调用某个Form模版，示意图如下(Sidebar省略)。

Header
——————————————————————
Article 1 with Form Template 1
——————————————————————
Article 2 with Form Template 1
——————————————————————
Article 3 with Form Template 1
——————————————————————
Article 4 with Form Template 1
——————————————————————
Article 5 with Form Template 1
——————————————————————
Footer

评论也可以通过这种方式来实现，定义一个Comment的Form样式，然后重复调用。
由于Form可以被重复调用，所以也可以用来实现网页的Header/Sidebar/Footer。比如分别写好这三个区块的样式到三个Form，然后在 Page分别调用。应为调用的语句就一句话，会让Page代码显得非常简洁。这样可以实现全站通用的Header/Sidebar/Header。如果你想为每一个Page单独设计，不妨直接把代码写到Page里面。

从网页到网站

理解了Page和Form之后，你就可以成功建立起一个(动态)网页了。然而一个网站有许多网页，怎么样组织这些网页，就需要用到Section。
Section可以翻译成部分，每个网站都与许多不同的部分，重点来了：每一个Section必须对应一个Page模版。用函数的方法来解释一下就是说y=x; x即为Section，y即为Page模版。一个Page模版可以应用到许多Section上，但是一个Section只有一个Page模版。所有 Section下的页面都是用同样的页面模版。这样的话，一个网站的架构就出来了。总结一下就是说：

一个网站有许多的Section，每一个Section都有一个不一定是唯一的Page模版， 每一个Page模版都可以调用并且重复利用Form。

这样一个你就可以利用TextPattern的模版系统控制网页的任何内容的样式了。
关于文章的版权，遵循创作公用协议，欢迎你转载该文章，传播知识，但是请保留作者署名和原文连接。

总是对上次设计不是很满意，因为过于中庸，显示不出来“我是一个有个性的设计师”，所以再次重新设计。我觉得设计师对于自己的网站追求完美并没有什么不好。

抛弃了960 Grid System框架，因为觉得框架对于创意还是有限制的。特别是对于有边框的风格，因为CSS的width和height不包括border宽度，所以一旦加上边框会撑破container。

这次并没有采取经常的局中风格，而是采取居左。在我的24“的显示器上右面显示有些空荡荡，但是我喜欢这样的的空间感。Smashing Magazine Network (Smashing Magazine汇集了一批著名的设计Blog) 上有一篇文章讲设计中的空间运用，讲的很不错。

单纯干净的颜色加上严谨的网格线，很能反映我现在的性格。

P.S. 今天猛然发现 SimpleBits 的设计更新了。另外推荐一位设计师Jina Bolton，她的Profolio网站 Sushi & Robots 非常优雅。

推荐几篇字体的文章：
绝对不能用：PC中易宋体黑体的英文部分
Typeworkshop Type-Basics

不知道其他设计师是怎样对待自己网站的，反正我是喜欢把自己的网站当作沙盒(Sandbox)，或者说是试验场(Playground)。我还是比较享受为自己设计的快乐。有一种说法是设计为别人，艺术为自己——当设计师为自己设计的时候，也算是一种艺术。

hi,insraq! 之前的版本

到底要不要大背景设计？

大背景设计是2008年的潮流，延续到现在，许多网站仍然采用。最近发现 University Of Denver 也采用大背景，非常让人印象深刻。不过大背景设计还是有一个很难解决的问题，就是屏幕分辨率的问题：到底多大的图片作为背景合适？绝大多数网站都照顾到22“显示器，然而，在我的24“的显示器上许多大背景网站都有或多或少的问题。

常见的解决方法有四个，第一就是什么都别做，就放在那里，反正也没有很恶劣的影响，不会导致页面无法阅读。
第二是把图片边缘淡化到与背景色相同，然而这种方案还是会降低美观程度。
第三是把图片边缘做成重复图案，就比如第二个例子，可以将边缘“天空草坪”取出一个1px宽，原高度高的图片反复，然后把背景图片的边缘模糊处理。这种方法不是万能的，比如第一个自然就没法这么处理。
第四是用JQuery或者Flash等等技术来缩放图片，这样可能会造成一定的失真，实施起来也很麻烦。

自从上一个版本起，我就开始走 Minimalism (极简主义) 的路线，我觉得设计师的网页不必太花哨，毕竟有Portfolio可以展示，而且简约的风格更能给人以灵活的印象，绝大多数的客户都不需要非常复杂的设计。

字体

极简主义的风格基本上很少用图像，即使有图像，也大都用于辅助设计。所以字体作为一个非常重要的方面。中文字体真的很少，基本上都会用宋体做正文字体。至于英文字体，选择也不是很多，常用的就6种Web安全字体。
关于中文字体推荐两篇文章(其实两篇文章讨论很多的英文字体，中文字体基本就是宋体和微软雅黑)：
1. 默认Web字体样式
2. 再谈 Web 默认字体
关于英文字体，衬线字体(serif)基本上被Georgia垄断，Georgia因为在分辨率较低的屏幕上拥有较好的辨识度而广泛应用，不管是标题还是正文字体。Times (New Roman) 作为打印字体还不错，但是在屏幕上显示非常难看，而且很伤眼。所以基本上没有设计采用Times作为正文字体。曾经Engadget的新设计采用Times (New Roman)作为正文。我第一次看还以为我的电脑出问题了，验证了CSS之后才发现真的是用Times作为正文字体。我觉得这是一个非常失败的做法，后来不知道什么时候Engadget把字体换成Georgia了。
非衬线字体(sans-serif)有Arial和Verdana可以选择。Verdana在小字体的时候显示很清楚，我觉得很适合作为正文字体，但是Verdana为了照顾清晰度，省掉了许多字体设计，所以作为标题来说并不是很好看。就比如说IKEA把Catalog字体从Futura换成了Verdana就非常失败。
英文字体的一个好处就是有许多替代技术，比如SIFR，可以有一个比较完善的能跨浏览器的字体方案，但是中文字体似乎就不行了，毕竟中文字体很大，很难处理。

中庸

我觉得新的设计中规中矩，因为我本来就想把网站变得中规中矩，一些很强烈个人色彩的想法被抛弃，总是有些遗憾的。
让我评价新网站设计，我会说: It’s a rather beautiful website, but that’s it.

截图

P.S. The Big Bang Theory是一部不错的美剧，Yes (Prime) Minister 是一部不错的英剧。

圣诞假期是一个让人变懒的时间。于是我攒了一堆风格懒得发布。近来整理了一下，发布出来。在本站的“Get&buy“部分可以找到下载地址。

点击这里阅读英文版发布公告。

Inspire 4

Inspire 5

Inspire 6

更新：Inspire 3.06 于 Dec. 22 17:14 GMT+8 发布，请更新。

很久没有更新Blog了，进来在忙一些其他的项目。这个风格本来写了一半，我不想让他死在我的硬盘里，所以花了些功夫完成了。花的时间远远超出我的预期，效果也比我想象的好很多。

在这里查看 英文版发布公告

一些说明：

1. 左区块会在底部显示，请最多显示四个，否则会有问题。右区块不会被显示。
2. “中中”区块将会被在“焦点 (Spotlight)”里面，并且以标签 (Tabs) 的方式呈现。区块标题将会成为标签标题，区块内容为标签内容。
3. 中左和中右区块将会在焦点下面显示。
4. 除了上面提到的区块，其他区块不会被显示。

这里有演示 。在本站的下载页面可以找到 下载 。

进来有些忙，而且我要集中精力在一些付款的项目，所以我可能暂停Inspire项目。Inspire 3也许是最后一个近期发布的该系列的免费的风格，我会准备一系列的“设计谈”，请不要错过。请 订阅我们的Blog 或者 在Twitter上关注我们 。