目前我们在运营的网站http://www.hxfang.com，就是基于supesite 7.5开发的一个房地产网站。

supesite的优缺点

优点

1. 缓存机制很强大
2. 架构简单，却足够实用

缺点

1. 单页支持不佳
2. 模型做得比较强大，但是还是有不少可以改进的地方
3. 非常怨念的问题。太多的地方需要设置权限。在liunx下面跑的时候太麻烦了。要到处给缓存目录设置写入权限。
4. svn支持不佳。因为太多目录会有读写操作，svn提交要设置很多繁杂的忽略，导致开发的时候很麻烦。

supesite建立频道

在后台频道管理中添加频道，单个页面一般为企业介绍之类。一般选择文章频道，不生成基本运行文件。

建立完之后，到对应的模板文件夹下创建频道的模板，一般以频道名打头，例如house_index.html.php。

然后编辑刚刚建立的频道，设置频道首页的模板为house_index。可以为各个频道设定不同的模板。这点上面ss做得的确不错。

待续。。。

—————————–

这里列举的是个人做的部分案例展示。项目都比较早了。基本上做到了以下几点：

• 多浏览器兼容。IE6，7，8。firefox，opera，safari，chrome等主流浏览器都能得到几乎一致的表现。
• w3c标准。代码均以符合w3c标准为基础。
• 良好的SEO（搜索引擎优化）。项目设计制作均充分考虑SEO的需求，并加入各类SEO辅助工具，在SEO方面都有不错的成效。
• 良好的前端优化。前端开发优化是本人的主要工作之一，所以设计的项目在前端性能上都有较突出表现。

365517二手客车

二手客车 - 福建云力贝汽车贸易有限公司

• 网站地址：http://www.365517.com
• 案例介绍：福州某二手客车公司网站，09年12月中旬刚上线。。

卫通卫浴

卫通中国—卫通卫浴建材有限公司—中国南部营销中心网站

• 网站地址：http://www.vepoo.net/index.php
• 案例介绍：本案例客户方已经有后台以及网站，但是不满意网站本身的设计，寻找广告公司重新设计了界面，然后将PSD设计稿交由我来实现。本案例采用yui css框架实现，并做了大量SEO工作。最佳状态时候搜索主要关键字出现在百度的第一页，50%的页面被百度收录，70%的页面被google收录。(目前由于客户执意不停的进行修改网站结构，排名与收录情况有所下降）

福建广华工贸有限公司

上杭广华工贸有限公司

• 网站地址：http://www.fjghgm.com/
• 案例介绍：自己一位亲戚朋友的网站，后台程序采用WordPress，由于建站伊始，网站内容还不够丰富。

泉州千禧礼仪庆典公司

千禧礼仪庆典

• 网站地址：http://www.qzqxqd.com/
• 案例介绍：婚庆网站。后台程序采用DedeCms，目前国内比较热门的一个CMS，前台界面采用yui css框架实现。

广告公司网站

未来广告

• 网站地址：暂未上线
• 案例介绍：福建某广告公司。模仿未来广告公司网站实现，但是未来广告公司采用的是flash制作，本案例完全采用DIV+CSS实现，比起flash有着非常良好的SEO效果。后台程序采用WordPress，前台界面采用blueprints css框架实现。

php的CMS，drupal，joomla，WordPress，堪称巨作。而java，别说巨作了，连一个比较好用的都没有。。

当然，java确实有比较出色的CMS,但是这些CMS几乎都是企业级的内容管理，不是用来做互联网应用的。面对php CMS的遍地开花，java真是毫无胜算。

除了java语言自身的优势之外，java有非常非常丰富的开源组件可以支持CMS的二次开发。而动态语言如php，优势在于快速，方便，性能好。

CMS很大的一个重点，就是主题的开发，我们以博客系统为例，php的WordPress跟java的roller，WordPress的主题模板系统基于php标记，WordPress提供了丰富的函数可以调用，修改主题很方便。而roller的主题模板采用的也是主流的java模板引擎vm，但是这里就有问题了，java的特性决定了如果修改调用的函数的代码，那么就需要重启容器才能生效，它需要重新编译。如果这是在服务器上面的，那么就是改一次代码重新启动一次服务器。光这点，就让人非常受不了。开发者调试非常的不方便。或许这就是为什么WordPress的主题满天下，roller的主题除了自带的之外几乎没有的关系吧。

另外一个很大的限制因素，应该就是运行环境了。安装配置amp环境比起安装配置jre环境简单得多。java程序号称一次编译到处运行，但是要想到处运行，要求的条件却不少。所以java主机比起其他主机贵得多，任谁都难以接受，除非都是自己的服务器，否则java的主机很难都调整到一个所有人都可以用的状态。

WordPress的功能不仅仅是一个博客了，已经完全可以当成一个CMS来用。它的工程代码大小为8M左右，而roller的仅仅是一个博客而已，它的代码达到28M。。由于必然的。。引入很多的开源组件。WordPress实现全部功能大概仅用了10来个表，而roller就一个博客，却有二三十个的表。

看着寥寥无几的java开源CMS跟遍地的php CMS，我想互联网的应用，java的CMS，何时能出一个可以闪亮的产品啊。

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

开始一个模板开发

上一篇的最后，我们做的是：

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

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

，丢弃那些过时的做法。

由于行文较为潦草，很多地方或许胡乱带过，不清楚的地方欢迎提问。

此系列文章将会全程纪录开发过程，内容涉及cms，php，JavaScript，css，还有web标准，此外还包括网站开发部署过程中，SEO，站点统计管理等。

让我们进入正题，首先是需求：

朋友的公司刚起步，没什么需求，就是照着别人的网站的内容做，主题礼仪庆典。因为是给朋友做的，报价很低，>_<

今天的文章内容主要介绍网站开发前的一些必要工作，相信不少人对于做开发很熟悉，但是对于如何建设一个站点，却有点模糊，这里就介绍一下网站需要的一些基本事项工作。

流程：

申请域名

选购空间

网站备案

技术选型

开发环境部署配置

申请域名

域名服务商很多，一搜索域名眼花缭乱，我个人使用的是迈腾（NO AD，请自己搜索。。），cn域名很便宜，现在1块钱一个，不过要注意的是，cn域名1块钱是指第一年注册的时候，第二年的时候费用跟com域名基本是一样的。在迈腾买域名第一年是20，一些大的网站，像万网，新网之类的，很多都是卖100的，不过人家毕竟是大服务商，买贵点心里比较踏实。选定域名后汇款提交订单。迈腾因为以前自己其他网站也用过他的域名，没出过问题，就继续在这边买了。

选购空间

空间的服务商更多，看起来更花更缭乱，而且枪文软文满天飞，要真正找到好的空间，最好还是有非软文的评测。国内的php主机出名的有几个：梦游，盘古，捌号。价格上差不多，500M的空间，大概都在300，400。这几个口碑也都还不错，可以随便挑。我选了捌号的主机，因为今年貌似便宜了不少，500M只要300。几乎所有的空间网上都会有负面评论，这是正常的，国内的主机也不可能说绝对的稳定，总会有比如说：政策啊，换线啊，检查啊之类的要求，难免要被x的。

注意，空间选购只是现在看看，还不着急马上买下来，因为程序都还没做呢，程序做1个月再部署上去，这1个月就亏了。

网站备案

现在所有的网站都要求备案，一般你购买空间或者域名的网站都会提供备案的服务，只要填写一些信息，交给空间或者域名服务商就可以了。

技术选型与开发环境

相信这是做技术的最关心的事情了。

CMS：dedecms 之所以选国内的cms，主要是对于这样的项目来说，国内的cms可以省下很大的开发量，基本上只要做一个主题的开发就可以了。

js库：jquery，相信没什么异议吧。

css库：yui css。对于css库的使用其实看个人喜好，但是一个成熟的css框架可以帮你节省很多时间，尤其在处理多浏览器兼容的情况下。基于web标准的开发，也要做到兼容各种主流的浏览器。yui css有grid css,font,base,reset。将几个css文件合并成一个yui.css，引入进来。yui的grid css是一个非常无敌的grid系统，非常看好。它有提供一个builder，

http://developer.yahoo.com/yui/grids/builder/

虽然它不能提供一些更灵活的布局，但是其思想与设计，却令人惊叹。用grid来布局，你会发现将会节省你大量的时间。

开发工具：

Dreamweaver CS4（当然是。。绿色版），以前习惯用intype手写代码，但是试用了CS4后，彻底被折服了，这功能确实强大多了，而且整站管理很强大，界面很帅。现在喜欢用intype+dw写代码。

top style：css编写

apatana：试用版本。。写js很强大。。

firefox+firebug等，IE，opera。其中firefox+firebug是必须的，用过的都说好。

部署环境：

wamp，集成的php环境，简单好用，我喜欢。

subversion，svn的使用看个人喜好，一个人做的项目，svn不是必须的，毕竟也不是大项目。

安装好这些工具，下载dedecms最新版本，建立一个svn版本库，导入到svn中。然后到wamp的www目录下建立一个项目文件夹，然后svn checkout。然后启动wamp，安装一下dedecms，ok，可以开工干活了。

在代码层次上看，SinaCMS是使用C++编码的，模板取数据的时候则使用了perl脚本。SinaCMS里面频道、项目和模板是结合在一起的，他们三者的关系是：

1.一个频道就是一个项目，在数据库里面体现就是一个数据库，比如说新闻中心，对应一个名为news的数据库；

2.一个频道会有若干个模板，例如首页，新闻页，这些在数据库中体现为相关的表；

3.模板需要定义模板域，模板域有表单类型模板域(Form)和应用类型模板域(Application)两种类型，前者面向编辑的提供数据界面接口功能，后者面向技术支持人员提供高级的二次开发功能。模板域在数据库中就是模板表中相对应的数据扩展字段，例如Form::TextField对应的就是 text字段，数据由编辑录入，Application::SQLResult

也是text字段，存储的则是执行Perl脚本执行后的结果。模板的内容存储在另外的字段中。

不难看出，SinaCMS具有极其强大的灵活性。因为它的数据库结构是项目建立以后构建模板的时候才确定的。各个频道，例如资讯频道、财经频道和汽车频道，可以拥有完全不同的数据库结构，不同频道的特殊需求也可以完全定制。另外可以看出SinaCMS里面的模板是最主要的模型，承担了确定数据表结构、文章发布和管理以及配置频道参数等等功能。

我们来看CMS系统中常见的新闻页，频道首页和列表页在SinaCMS中是怎么实现的。

编辑上文章时，先找到该频道的新闻页，然后在下面录入文章，录入完毕后点击发布，系统会根据模板的内容去获取相关的字段内容，根据模板的属性最后发布成相应的静态文件，其间如果和其他模板有相关关系（在新闻页模板域中定义Application::PostInPage），则会去触发相应的模板（例如首页和列表页）更新。

在首页模板的区块中，可以分为动态和静态两种。对于需要经常更新的静态区块，可以独立出来做成一个模板，静态区块就相当于该模板下的一篇(有且仅有一篇)文章，当然也可以在首页中新建一个Form::TextField的模板域。动态区块例如动态新闻列表，则可以在首页中新建一个 Application::SQLResult的模板域，通过执行perl脚本获取内容填充，然后在首页模板内容引用该模板域，当然同样也可以新建一个只包含一个Application::SQLResult域的模板。

对于列表页，首先列表页的分页值可以存储在列表页的模板域中，也可以保存在某个模板中。分页在处理时，会通过perl脚本来执行分页算法。最终所有列表页都是列表页模板下的一个文档集。

在一个项目中，为了提高发布效率，还会存在若干的临时存储表和归档表（其实就是一些模板啦）。例如在首页的动态新闻列表，就有可能建一个临时存储数据的模板，这时如果频繁更新首页或者含有动态新闻列表的模板时，无疑将减轻数据库的压力。新闻单页的模板在处理时可以就保存最近一个月内的文章，尤其在文章数据增长较快的频道，这时就很有必要。那么以前的文章就需要转储到一个归档表中，作为查询和偶尔更新某篇文章使用。

SinaCMS中的频道路径path（例如资讯>大陆>正文）是通过模板处理的，在模板的模板域中会用perl来处理相关的逻辑。子频道和专题也是通过模板来实现的，它会通过新增一个模板来建立子频道和专题之间的关系。

至此，我们可以了解到SinaCMS中使用了非常多的冗余字段来存储本来需要多表联合查询的数据，这无疑提高了文章的发布效率。

在其他的CMS中，模板只是独立概念中的一个，而在SinaCMS中，万事万物皆模板。

其实我理解也不是很透，所以以后有时间我会再对本文做一些更新。