主题设计

<

p>

这两天又折腾了一下 drupal 主题。N. Design Studio 有一款很不错的 wordpress 主题 koi，abthemes把它移植到了 drupal上，用了几天，找到了一些 bug，陆陆续续修正了，然后又做了一些我需要的更改，总算稳定下来。又安装了一些新的模块，譬如 Tagadelic，可以提供一个 tag 云 block （右下角）和一个tag 云的页面，这样blog里用的 tag 马上就多了一个维度出来，可以直观的看到各个话题所占的比重，譬如和历史相关的话题中，原来我这里关于三国，秦国，汉朝和清朝的 blog 数目最多，在数量上差不多和生活相关的话题里的酒与旅行一样多了。这倒正是一句古话：“一壶浊酒喜相逢。古今多少事，都付笑谈中。”

因为使用 Tagadelic block 的缘故，非常需要一款比较窄的字体，blog 的默认字体 Georgia 太宽大，使得 tag 云看起来很别扭，但是HTML普遍支持的字体中并没有窄字体，开始的时候想到了 Drupal 的Dynamic Rendering 模块（前阵子用它来生成 blog 标题所用的“华康丽黑”字体），它的原理是利用服务器端的字体生成 Flash 来替换原有的字体，但是这种方法的效率不高，也会拖慢网站的速度，正巧想起了 Google 前阵子推出的 Font API，试了一下，不仅效果很好，速度也很快。

Font API 通过调用 Google Font Directory 里的开源字体来达到在网页显示其他非常用高质量字体的目的。它的应用很简单，只需要一些简单的 CSS 知识，譬如我用的这款 Yanone Kaffeesatz 字体，只需要在我的 CSS 文档的开头加入字体的定义：

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

然后在需用使用这款字体的地方利用 font-family 来调用就可以了，我的 Tag 云 block 和 页面就是一个例子。在 blog 中也可以用嵌入的 CSS 任意调用：

Give a man a fish, you feed him for a day. Teach a man to fish, you feed him for a lifetime.

稍感缺憾的是现在只有对拉丁文字字体的支持，没有汉字字体。不过汉字字体除了文泉驿外，似乎其他开源并且美观的字体并不多，另外汉字字体文件的庞大尺寸也许会影响到网页的速度。当然还有另外一个最大的问题：如果 googleapis.com 这个域名被 GFW 喀嚓掉了，那再好的字体效果也显示不出来。哈哈，反正现在 GFW 还喀嚓着我的 blog，所以我倒可以无顾忌的放心使用了：）

PS：听说因为开世博会，GFW赦免了一大批网站，但是我的 blog 却不在其中，阿弥陀佛，看来我真的罪孽深重：）

晚饭啃“赛百味”的时候，看到了一些矢量水墨国画，在 photoshop 里拼摆了一下，想创建一个新的 Drupal 主题风格，其实除了三只鸟以外，似乎也就是单纯的文本文字，这样也好，很清爽。等有时间，把这个构图转化为主题文件。

春天的周末，抽空重新作了一个 Drupal 的主题。很久没有亲自操刀了，图省事，用了不少官方网站直接提供的主题，但是实际上，也没有省多少事情，因为每一款主题安装后都要不断地修正。比如为英文网站设计的主题在显示中文的时候普遍文字过小，12px 的字体看上去很吃力，所以必须调整，还有各个组件的摆放，自己订制的 block 的显示等等。所以又重新装了 Adobe Master Suite CS4，自己动手。

设计非我所长，所以主要是参照了一款 Wordpress 的主题：Marine。有些不错的地方，很喜欢这个颜色的搭配，春天了；也有些我不需要的地方，所以还是按照习惯，在 Firework 里画了草图：

图画完，做起来就快了，base theme 用的是 zen，这是一款空白的 theme，只需要按照设计图写入 CSS 即可，不过因为主题的需要，我还是改动了 page.tpl.php 和 node.tpl.php，主要是圆边角的显示，为了以后更改的方便，所以没有采用一张背景图片的方法，而是使用了三个 div 拼接；也写了一小点儿的 PHP  code，因为我需要用到标题上那样的日期显示，Drupal 默认的日期是不行了，所以重新用 date() 函数format了 $created 变量。

然后就没什么了，按部就班，参照 Marine 的 CSS，所以省去了不少计算的麻烦，不过我的 header 因为和 Marine 不一样，所以还是不得不在 Maple 里算了尺寸长度（杀鸡用牛刀，呵呵）。header 上的花藤是一种叫做 Painted 的字体，比用 Photoshop 的 bursh 要方便很多，虽然形状比较单一。

就这些了，最后，我们为这个主题想一个深远的含义吧，就像分析小学课文一样：头顶的一丝蓝天与背景的大片黑暗 —— 所以小朋友要好好学习：）

这里罗列了最新的53不可或缺的 CSS 技术。其中包括如何用 CSS 生成图片的阴影，生成圆边角；如何用 CSS 制作调色器（就像 Drupal 5.0 Garland一样），还有如何利用 CSS 制作缩略图，如果生成个性化的 radio 和 checkbox 等等，非常的使用。如果你打算自己设计 blog 的主题，这是一份难得的资料。

重新设计了 blog 的外观主题，除了新年新气象，辞旧迎新以外，主要是为了让 blog 使用的主题更加像一个 blog 的主题，上一个“春田花花”主题是 port Zen Garden 的 Lonely Flower 的，Zen Garden 类似于 CSS 设计的概念网站，虽然很多主题很漂亮，但是并不是为 blog 专门设计的，所以分离式的主体与边栏看起来有些怪异。而这款新的主题（还没有想好叫什么名字）则是按照 blog 主题的“窠臼”：窄幅，一个边栏，圆边角，阴影投射。。。该有的都有了。

保留了原来“春天花花”的主色调，绿色和橙色，这两种颜色看起来比较喜庆（土！），同时该了一下灰色的色调，看起来不至于太费眼睛。另外，融入了一些中国的元素，譬如梅花，莲藕与竹叶。呵呵，毕竟不是搞设计的，所以只能凑合着看自娱自乐了。另外，恢复了 site name 的链接，不再使用图片，这样以来这个主题就可以很容易的供别人使用了。一点小感叹：IE 终于支持 min-height 了。没有 min-height 的支持，基于 div 的 column 很难保持同样的高度，虽然有各种各样的解决方式，但是都十分繁琐，还是依赖浏览器的改进比较省事儿。

另外，刚刚出炉的主题已经发现了一个 bug，我的 mission statement 不见了，呵呵，今天先到这里吧，回头慢慢的捉虫子。这个主题同时也制作了 Drupal 5.0 版本的，Drupal 5.0 的主题与 4.7 的主题略有不同，以后再详细说。

继续关于Drupal主题设计的讨论，讲一讲Drupal的Header部分的三个元素（Logo, Site-Name 和Site-Slogan）的摆放。如果你对CSS不是很熟悉，希望这对你有所帮助；如果你是CSS的高手，希望你能提出改进的意见：）

通常，我们会需要Logo, Site-Name 和 Site-Slogan 按照左图的结构摆放：把Logo放在最左边，然后Site-Name与Site-Slogan并列。在过去，这个通常使用table来实现，只要定义一个类似形状的table，把元素放进去就可以了，但是根据现在网站设计的标准，我们需要使用CSS来控制完成。首先需要将Logo图片放在左边，这个可以通过以下CSS定义实现：

.logo { display:inline; float:left}

当然你还可以放入其他的定义，譬如logo图片的长宽定义，以及border属性等等。对于SITE-NAME与SITE-SLOGAN，按照如下定义即可：

.site-name {position: abosolute; top: 20px}
.site-slogan {position:absolute; top: 50px}

通过绝对位置来控制site-name与site-slogan的显示，top 定义的px的多少可以根据你的具体主题来调整，另外在使用中，你还需要用 font-size 来定义它们的字体的大小。这样就完成了，Header部分三个元素的设置，其实很简单的。

同时Foundation Theme也为我们提供了模板文件的构造，可以按照它方便更改其他的模版文件，譬如我在 http://www.dogbreedsweb.com 使用的模版，默认是不显示logo的，参照Foundation Theme，可以很方便的加入Logo显示的支持，只需要加入插入 $logo 的那段语法即可。下图是一个按照上述方法完成的Header部分的示例：

以及相关的CSS定义：

.site-name {position:absolute;top:15px;padding-left: 15px;display:inline;font-size: 2em;}
.site-slogan {position:absolute;top:55px;padding-left:15px;display:inline;font-size:1.2em;}
.site-logo{margin:0;display:inline;float:left;}

<

p>

OK，我们继续研究Drupal的Theme。各位同学手上都有Foundation Theme了，现在我们要解剖这个Theme：把它的CSS Class的脉络搞清楚，这对主题的设计非常有用处，所以我们从page.tpl.php的Header部分开始，page.tpl.php主要由三个div组成，下面是 Header部分的结构图（见下图），"."表示是class 名称，"#" 表示是ID 名称，你可能注意到了这个神秘的$layout变量，它对于纯粹的div 主题设计非常有用处，它的用处我们会在随后的几讲中阐述。

本教程突出两个特点：1）超级；2）简明。所谓超级，就是说你不需要任何关于PHP或是Drupal编程的知识；所谓简明，从这一句起我不再说废话：）使用本教程之前，请准备三样东西：

1. 空白的Drupal主题，也就是Foundation Theme，可以在这里下载zip文件。这个主题定义了所有的CSS式样，但是它Style.css是空白的，方便你填补。
2. Firefox 浏览器；
   

   <script type="text/javascript">

   </script>
   <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>

3. Firefox的Web Developer插件；

第一步，把空白的Foundation Theme的zip文件解压，放在一个名字叫做example的文件夹中（文件夹可以任意命名），然后上传到你的Drupal的Themes目录下，用安装了Web Developer插件的Firefox浏览器打开你的网站（最好是测试网站），在管理-〉主题中启用这个叫做example的主题，如果是你的正式网站，那么在你的个人账户中把主题设置为example，这样并不影响访客正常访问的你的网站。保存设置后你可以看到下图：

这个主题是不是苍白得可爱？现在开始动手美化它。ctrl+shift+e 打开Web Developer的CSS编辑侧边栏，选择编辑 style.css 文件，现在你可以任意的添加CSS属性并立即看到效果。使用Web Developer 工具栏（这个工具栏默认是显示的，如果没有显示，在Firefox的工具栏上点击右键选择显示）中Information中的 Display Div Order，可以清楚的看到各个Div的class与摆放，现通过float属性把 Header, Container（包括sidebar与page，利用float属性调整）, Footer三个主要div摆顺（见下图）：

其实如果不显示div的信息，这个主题已经初具雏形了。再往下只需要再稍微改动一下，一个新鲜的主题就出炉了。至于改动的一般经验（譬如一些常用的CSS设置，将在后面的进阶教程中讲到，但是如果你熟悉CSS，到这里已经足够用了）最后要注意改完 style.css 以后一定要保存下来，替换你上传到 /themes/example/ 路径下的style.css 文件。