1. 大汉版通JCMS网站模板制作概述
1.1. 大汉版通JCMS系统为什么要使用模板
大汉版通JCMS是J2EE Content Management System的缩写，意为“基于J2EE的内容管理系统”。内容管理系统对站点管理和创造编辑都有好处。 这其中最大的好处是能够使用模板和通用的设计元素以确保整个网站的协调。制作人员只需在他们的文档中采用少量的模板代码，然后即可把精力集中在设计之上的内容了。要改变网站的外观管理员只需修改模板而不是一个个单独的页面。
1.2. 什么是模板
网页模板是一个预先设计并制作好的网页框架，其中包含一系列特定的单元，利用它可以进行快速和高质量的网站开发。只需要将你想要内容填充到指定的单元内，就可以得到一个功能完整的高质量网页。模板可以在CMS系统中被重复调用，保持整个网站的协调。
1.3. 什么是单元
单元是模板中预留的区域，用来填充需要的网页内容。使用单元可以在CMS系统中对单元进行内容填充，使用相同模板的页面，可以填充不同的内容，也可以保证整个网站相同单元保持内容一致，在需要修改某些页面的内容时，我们往往不用去修改页面的模板，而直接修改该单元的设置就可以了，大大方便了管理员对网站的维护和修改。
2. 模板制作的注意点
在网站建设过程中，模板制作是最重要的环节之一。优秀的模板页面，不仅仅是美观，内容丰富，还要考虑页面大小对网络带宽的影响，以及在整个网站中的通用性，还有代码规范等等。
2.1. 图片、动画对页面大小的影响及切片技巧
毫无疑问，图片和动画等效果，可以使网页看起来更加美观，更引人注目，但也正是这些图片和动画，严重影响了有限的网络带宽，鱼与熊掌如何兼得，成为制作人员最为关注的问题。
在切割美工提供的PSD设计图时，我们需要遵守一个原则，可以用文字、颜色、CSS样式实现的地方尽量不使用图片，切出来的图片在保证画质的同时，尽量缩减它的大小。有了这样一个原则，我们切出来的图片已经少了很多，也小了很多，但我们也要注意一点技巧，举个例子，我们看下这样的一个图标：
这个样式的图标在同一网站或同一页面可能多次出现，比如“国税文化”，“理论研究”等等，这个时候我们应该按照这个图片来切：
然后让此图片作为背景，在上面显示相应的栏目名称，就达到了相同的效果，这样在浏览页面的时候，可以大大的节省带宽。
2.2. 页面布局与结构
在浏览一些网页的时候，有时会出现长时间的等待，然后页面一下全部打开的情况，这时就可以判断出来，这个页面的布局结构有问题，作为浏览者，我们当然希望页面从上到下依次呈现在我们面前，而不是面对空白页面长时间的等待。
对于模板制作人员来说，要尽量避免<TABLE>或<DIV>的嵌套，不能整个页面使用一个大的<TABLE>或<DIV>，然后再向其中嵌套其余内容。我们的布局结构应该类似于这样：
把网页容器一层层平铺下来，这样做的好处就是布局结构清晰，方便维护和修改，而且浏览器在解释页面时，可以从上到下逐次呈现给浏览器。
2.3. 代码标准和冗余代码清理
为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href=“url”> 而不 是 <a href=url>。
不少制作人员可能容易忽视的一个问题，制作网页模板，一般都使用Dreamweaver等网页制作工具，制作人员也习惯了在可视化的环境中进行一些插入内容或编辑样式等操作，这样是很容易产生冗余代码的。
比如我们要实现下面这个单元格中的文字效果：
在实际操作中，很多制作人员都会选中办事服务这几个字，然后选择字体大小，颜色，加粗等，这个时候，我们查看代码就会发现，Dreamweaver为我们生成的代码是这样的：
STYLE1 {
color: #CC9900;
font-size: 12px;
font-weight: bold;
}
<td width="112" height="26" align="center"><span class="STYLE1">办事服务：</span></td>
实际上，上面代码中的<span>标签是完全多余的，<td width="112" height="26" align="center" class="STYLE1">办事服务：</td> 就足以完成效果了。
还有一点就是不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。
2.4. CSS样式表的规范与调用
CSS（Cascading Style Sheets），层叠样式表，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
在制作<TABLE>布局的模板时，需要整站调用同一个CSS样式表，比如css.css文件，里边有详细的<boby>、<table>、<tr>、<td>等样式定义，每个页面的自定义样式，可以添加到此文件的底部，需要有注释，例如：
用DIV+CSS制作模板时，也需要整站调用一个基础的CSS文件，比如base.css，其中需定义页面的字体，样式，对齐方式，链接样式等等，例如：
body{
margin:0px auto;
padding:0px auto;
text-align:center;
background:#fff;
height:100%;
color:#333;
}
table,div,td,pre,dt,dd,span,h1,h2,h3,h4,h5,h6,p,ul,li{
margin:0px;
padding:0px;
font:12px "宋体";
text-align:left;
vertical-align:middle;
word-break:break-all;
color:#333;
}
每个不同的模板还需要调用为页面上标签所定义的CSS文件，如layout.css，其中定义该模板中所有标签的属性，代码如下：
#banner{height:100px;width:978px;margin:0px auto;}
#nav{height:62px!important;height:60px;width:978px;background:#DFE9F2; margin:0px auto!important;margin:0px;}
#nav li{height:30px;;border-bottom:1px solid #C5D7E7;border-top:1px solid #fff;}
#nav li a{padding:0px 16px;margin:6px 0px;float:left;border-left:1px solid #fff;border-right:1px solid #CFDEEB;font-size:13px;}
#nav li a:hover{text-decoration:none;}
#nav li a.lineno{border-right:none;}
#nav li span{font-weight:bold;padding:0px 26px;margin:6px 0px;float:left;}
#nav li span.t2{padding:0px 3px 0px 18px;margin:6px 0px;}
使用CSS还需要注意的是样式的命名，尽可能做到一目了然，比如：
table_font //表格的字体样式
top_time //顶部的时间式样
border_color(green) //表格边框的颜色
2.5. Javascript脚本代码的调用
Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。
在制作网站模板的时候，脚本代码需要保存到统一的位置，然后在模板页面中调用，尽量保证代码的简洁及可读性，为代码做好注释，同时还要注意代码的重构。比如要制作多选项卡切换的代码，网站内可能存在两个、三个、四个甚至更多的选项卡切换，这个可以用一个JS函数来实现，不需要为不同数量的切换写不同的函数，然后放到一个固定的目录，整站的页面都可以调用。
2.6. 不同浏览器的兼容性
由于目前浏览器的多样化，网站也需要满足各种人群的需要，制作人员做出来的模板，至少要兼容IE6、IE7、Firefox等常见浏览器。
HTML，CSS和JS都要尽量遵循W3C标准，要保证页面在不同的浏览器下正常显示，功能正常使用，而且不能出现脚本错误。
3. 大汉JCMS模板制作规范
3.1. 目录结构
采用页面文件和images文件夹的两级结构，所有模板图片、FLASH、JS、CSS文件放在images文件夹中。
所有模板文件可以放在一起，也可以根据JCMS中的模板类别分文件夹保存（如：首页模板、频道页模块、专题模板等），但是整个网站模板中的CSS必须统一使用一个。文章页和单信息页的模板，必须保存在同一个目录中，即共用一个images文件夹，以保证所有文章页和单信息页的CSS相同，且不会出现不同的图片重名问题。
3.2. 图片命名规则
图片的文件名也需要有规律，不然几十个图片乃至上百的图片放在一起，制作模板时，单单对应图片都需要花好长时间。
图片命名规则：
图片名：页面名（栏目名）简写+上下左右+图片实名简写（数字）.后缀名 (注意：一般图片命名不建议使用中文)
如：syfootbg.gif (首页 底部 背景) hbmidltext1.gif(湖北 中部左 文本1 )
3.3. 文件命名
模板采用中文命名，目的是便于识别。
以“千华网”为例，如：千华网首页.htm、千华网新闻频道页.htm、千华网新闻栏目页.htm、千华网文章页.htm。
3.4. 模板编码
修改模板的以下源码：
<meta http-equiv="content-type" content="text/html; charset=UTF-8">（并置于<title> 文档标题 </title> 上方，否则可能会导致访问页面时编码默认为GB2312，而访问到的是空白页）并用文本编辑器将模板另存为UTF-8编码。
正确格式：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>宁波财税网</title>
错误格式：
<html>
<head>
<title>宁波财税网</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3.5. 背景图片调用
背景图片的链接不能写在CSS中，背景图片的样式可以在CSS中定义，以避免在繁体版或JCMS可视化模板编辑状态时无法显示背景图片。如下：
错误写法：<td height="34" style="background:url(img/bg_ltop.gif) repeat-x left top;"></td>
正确写法：<td width="34" background="images/bg_ltop.gif" style=" background-position:top left; background-repeat:no-repeat;"></td> 或 <td width="34" background="images/bg_ltop.gif" class="bg_top"></td>
3.6. 整理有效图片
制作好模板后，可以用浏览器打开模板，再另存网页后把有效图片保存下来，过滤其他不需要的垃圾图片，上传模板到JCMS中时，只上传有效图片。其他需要在JCMS单元中设置的图片，统一保存到PIC文件夹中，单独上传。
3.7. 单元标签命名规范
首先，同一模板内的单元名称不可重复。
其次，单元名称要具有可读性，从名称上就可以大概判断出单元类型，比如“首页BANNER”，“最新动态列表”等。
最后，可站内保存和可栏目内保存的单元，需要特殊标记出来，比如“版权信息_全站”，“政策法规导航_栏目”等。
4. 总结
实践证明，在网站项目实施中，一个规范的、有效的模板，可以大大提高项目人员的工作效率，节约项目成本，还能使后期的维护人员简单方便的进行修改与维护，模板制作已经成为网站建设项目中越来越重要的环节，起着举足轻重的重要作用。
