实战web标准网站开发实录（二）：CMS的主题开发技巧与建议

在上一篇已经介绍了网站开发的准备工作，如果你已经准备好了，并且熟悉了其中必要的工具。可以跟着我继续往下走。

本文主要介绍主题开发的原则与技巧。不同的cms主题的开发方式不同，但是本质却不会有太大的区别。举一反三，希望我自己总结的经验会对你的开发有帮助。
开始一个模板开发

上一篇的最后，我们做的是：
写道
下载dedecms最新版本，建立一个svn版本库，导入到svn中。然后到wamp的www目录下建立一个项目文件夹，然后svn checkout。然后启动wamp，安装一下dedecms，ok，可以开工干活了。

现在我们真正的开始开工干活。

dedecms的主题是基于模板标记的。它自己带了一套dede的标记，如果你使用过velocity或者freemaker之类的工具,相信你对模板标记的使用不会陌生。基于模板的系统的开发应该说还是比较方便的，毕竟模板是通用的，对于一个普通的网站来说，你可能只需要写10个左右的页面设计就足够整个网站的应用了。

用Dreamweaver CS4新建一个站点，将www目录下整个dedecms导入。用dw来管理站点。dw内置了很多工具，对开发界面有极大的帮助。

第一：代码格式化功能。

写多了html代码，会逐渐有点混乱，这是很正常的。用dw的格式化工具可以解决这个问题。目前也支持CSS代码的格式化。

第二：代码兼容性检查。

dw也内置了多个浏览器的代码兼容性检测工具，可以在代码开发过程中随时检查。

第三：dw提供的各种功能，都不错。自带的范例是新手入门的极佳材料，包含了超级详细的注释，新手一定要看看。

导入整个站点后，在dede的templets，模板存放目录下面，新建一个文件夹如wedding，作为我们自己开发的主题的文件夹。dede的模板组织方式我不是很认可，如图所示：

default下面是dede的 默认主题，在default文件夹下面存放了主题的模板。images存放了系统的所有图片，style下面是主题的css文件，而系统的js则又在这里之外，给人的感觉比较凌乱。

而我习惯的做法是将一个主题说需要的文件都包含在一个文件夹下面，这样这个主题可以轻易的移动，删除。而不是到处找文件删改。将整个主题都放在一个目录下，也是很多主流的cms主题的做法。

这里我们建立了一个wedding的文件夹，作为主题的目录。在wedding下面，我建立了3个文件夹，css，js，images，而模板文件直接放在wedding目录下。其实更好的做法应该是再建立一个templet的文件夹，存放所有的模板，不过由于dede自身的一些设置，直接放在 wedding下面会比较方便。

推荐的主题目录结构：

theme

theme/css

theme/js

theme/images

theme/templet
CSS开发

上次已经提到了，项目将采用yui css库。yui的css目前是比较完备的，包括base，reset，font，grids。这几个css都会用到，我的做法是将这4个文件合并成一个yui.css来引入。可以减少几个连接数嘛。

关于grids.css的使用，可能对很多人还是个陌生的概念，就是所谓的网格系统。可以自己google一下CSS 网格可以搜索到相关的一些介绍。用上grids.css最大的好处就是，你会发现你开发一个布局的速度真的太快了，改一下class的类名，整个布局都会马上变掉。加上yui css提供了grids的生成器，可以成倍的提供你的工作效率。

有了这样的一个css库，基本上它已经帮你解决了很多部分的浏览器兼容性问题。

在css开发过程中，有很多东西都是通用的，或者很常用的，对于这样的css，我的做法是放在一个lib.css的文件里。这也相当于一个库，但是这个库是给自己用的。而且，做得多了，自己做过的很多网站都会用到，所以渐渐的，这个lib.css自己也可以拿来到处复用了

。至于这个库，要怎么写，怎么整理，我建议你参照开心网的css的写法。例如：

可能有些人会疑问，这样就一个属性，干嘛用啊？为什么不写在另外的css，写一条属性干嘛？事实是这样的：

在一个站点的开发过程中，你经常会发现，有一个东西，它长得很像，但是有时候它是放在左边，有时候又是放在右边。为此，你可能要为1个长得几乎一样的东西，复制一份几乎差不多的css代码。而这样的lib它就可以起到这样的一个类似patch的作用，例如：

div class=”title” ，默认左对齐，但是现在你想在某个页面让这个title是右对齐的，你就可以在用div class=”title tr”通过这样的组合，实现这样的效果。

这是lib.css的整理。

剩下的其他的css做法就比较多。对于简单的，可以直接一个pages.css，把剩下的所有需要的css都写在这个里面。对于大一点的项目，还可以分的更细。比如：form.css,application.css,ui.css这些是专门为表单，为独立应用，为实现js特效的ui专门独立的 css文件。具体的做法看个人习惯。

对于css，还要注意的一点是，就算用了css库，你也无法保证写出来的代码所有的浏览器都兼容。所以你有必要掌握一些基本的hack，比如!important,IE6跟IE7的*还有_。基于标准的开发，更要保证对于主流的浏览器都兼容。就算IE它不是标准的。

关于css的hack写法，还有我个人认为更好的解决方案，将会在接下来的JS开发篇章中介绍。

关于div+css与表格布局的争议，我认为由于几十年的积淀，所有浏览器都对表格有着最佳的支持。所以其实表格布局比div+css兼容性更好。对于一些大型的，复杂的站点的构建，使用div css，合理的搭配一些表格布局，不仅可以提高开发速度，也可以得到更好的兼容性。而不必为太复杂的界面跟css搞得焦头烂额。

所以，不必学了divcss就对表格弃之不顾了。

关于开发工具，dw的css还提供可视化的选择，css入门的可以用可视化的这种方式来做css代码。如果对css非常熟练的人，推荐用top style，个人觉得ts的代码提示比dw的更便捷，书写更快。

推荐的一个css的目录结构：

css/core.css (本文用yui，所以是yui.css)

css/lib.css (自己常用的自己组织的通用类)

css/pages.css(或者更详细的划分)
Javascript开发

对于一个成熟的cms来说，其实js的开发量很少。这里更多的是介绍一些相关的技巧。

首先是上文提到的，CSS的hack更好的方案。就是采用jquery的插件，jqbrowser2，使用它是不需要写任何js代码的，因为它是用来写css代码用的。只要引入就可以了。它的作用，就是分析浏览器提供的所有信息，然后将这样的信息反应在html的类名上面，使用了一个这样的插件后，你的html标签会变成这样：

html

class

=”gecko firefox3 win js

”

这个class反应出来的信息是gecko引擎，ff版本3，window操作系统，支持js。这样的信息能提供什么帮助呢？没错，这就是来编写hack的利器。我们不在需要记住那些复杂的hack，我如果要某个属性只对firefox支持，我只要在css里面写

.firefox3 .ffonly{}；

.ie .ie_styel{};

仅此而已。依据这个，包括不同操作系统的样式都可以区分的。

对于js，相信yahoo的14条军规很多人都看过了。没错，将js都放在页面下方，这会提高页面的显示速度。很多人习惯js在头部，所有的js代码写在头部，其实放在底部对js的执行不会有影响，只是习惯问题，你需要改过这个习惯。习惯的将所有js都放在底部。

并且，采用经过压缩的js，体积减小很明显。尤其是js库跟js的插件。工具，yui的压缩工具目前是主流。

另外一个问题是，既然是基于标准化，尽量使用更好的js写法。减少页面上onclick的使用，而是尽量都在js里面指定这个句柄。这个问题，所有的js库都有很好解决方案。
html开发

貌似最简单的东西，其实要想做好也有难度。

首先，基于web标准开发，你需要坚持所有的html页面都采用XHTML strict的标准。

对于开发过程，建议你保持html的正确性。你可以在ff上面安装html validater插件，这个插件可以检查html文档是否符合标准。

保持html的正确性，不仅仅是基于标准的一个要求，其实更主要的是帮助你保持页面的正确显示。可以很大程度的避免你出现标签写错，遗漏了某个标签之类的而导致界面出现奇怪现象的问题

。

经常写html代码的或许会碰到这个问题，我想保持这个正确性会对你很有帮助的。右下角的检测图标总是绿色的，心情都比较舒服。

关于html的工具，dw本身是个不错的选择。不过熟悉html的，或者说想要熟悉的html手写代码的，我更推荐用intype，号称要成为windows的textmate，不过现在版本还比较低，但是已经非常好用了。

更多的做法，比如语义化，微格式，这些靠自己多加研究。
总结

基于web标准开发不是为了标准而标准，它确实能够让我们的开发更加的规范，开发出来的产品更加的良好。关键在于养成一个习惯，坚持基于标准的做法

，丢弃那些过时的做法。