CMS模板制作教程

时间：2009-06-28 来源：hkebao

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description" content="网页说明" />
<meta name="keywords" content="关键词" />
<link rel="stylesheet" type="text/css" href="/skin/guilinw/css/screen.css" />

</head>

从文中红字所标，就可以知道css和js文件夹应该放在网站根目录下的skin/guiliw/目录中

我那天说的这个JS与CSS目录的问题好像在这里能够找到解决的方案哦～

存放的目录应该是在这里面的才行！

模板文件制作与规划、标签说明

制作模板前，建议把文件目录按这样规划/skin/模板风格名/，这次制作我们以仿制包装与设计网站首页（http://www.package-design.net/）为例。将页面另存下来，整理好html代码，图片、CSS等目录按前面所说规划。［是这样来理解的一套模板的话就做一个文件夹进行保存起来！这样的话是非常方便维护其代码的］
1. 比如说用户想要制作出来一套跟一个站的风格出来。那我们可以将这套站进行另存起来。然后
将保存下来的files中的内容分门别类进行相关处理。我们的风格就是：
/skin/风格名/pic(js或css等)
2. 文件的目录结构已经建立之后将原来的文件夹改为规划后的
目录。包括CSS与JS及图片信息都替换掉！
3.开始去掉不必要的代码了！
像广告之类的还有些IE另存下来带有的注释也不要了！
还要再检查下CSS本身的文件哦。
比如说有一个CSS中这样写：@("inc/links.css")
那我们就得上网站上去将此CSS下载下来的！
要注意好相对目录的问题的！
保存好了之后也就是相当于将模板制作好了。
标签说明
帝国标签大体为分二种形式的。一种是自带格式的，如phomenews、phomenewspic等标签。还有种是可以自定义格式的标签，如ecmsinfo、listsonclass等，这种标签可以调用标签模板中自定义显示的格式。
［标签模板说明］
前面提到的，有的标签是调用自定义标签的，现在就来解说下标签模板的一些概念。标签模板分为页面模板内容和列表内容模板(list.var) 二部分。
要制作一个标签模板，关键要分析好哪些格式是重复的。［比如说最新新闻的话那可以知道while 数据集 not EOF的话表示这里面的全部新闻是必须重复出来的！］

假设里的内容为A，要让A像下面的表格这么排列，要怎么做呢？

A	A	A
A	A	A
A	A	A
A	A	A
A	A	A

这里我们发现是二行A作为一组的。即我们的重复单位是二。所以就可以这样来实现我们的标签化：

我们可以看成是这样排列的，A是内容，后面的数字是他的位置标记。

A01 A02 A03
A04 A05 A06
A07 A08 A09
A10 A11 A12

分析可知，这个是二行一起循环。也就是6个A为一组。知道重复的格式所在，就可以制作标签了。页面模板内容

<table width="200" border="0" cellspacing="2" cellpadding="4">
[!--empirenews.listtemp--] 开始做循环操作
<tr bgcolor="#FF9900">
 重复体
</tr>
<tr bgcolor="#FFCC66">

</tr>
[!--empirenews.listtemp--] 结束循环操作
</table>

首页模板制作

页面分析：制作的时候，我们先分析一下首页的布局，找出差异和相同之处。相同效果的地方可以用同类型的标签调用，减少标签模板数量！
为了能让页面的细节和仿制的目标站效果基本一致，一般采用ecmsinfo标签（万能标签）制作。
制作的顺序：

大焦点图，我们用帝国自带的FLASH幻灯片制作
带小图标的列表，用万能标签制作
标题+时间的标题列表，也采用万能标签制作
不带文字说明的多图调用，虽然系统自带的标签可以调用，但细节不好制作。还是用万能标签制作
标题图片+标题+简介说明，典型的万能标签应用

head区标签替换

原来的head区是这样的

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>包装与设计</title>
<link href="skin/package/css/text.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="设计,包装,创意,创意论坛,网上商城" />
<meta name="Description" content="设计,包装,创意,创意论坛,网上商城" />
</head>

用帝国标签替换后就应该是

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>[!--pagetitle--]</title>
<link href="[!--news.url--]skin/package/css/text.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="设计,包装,创意,创意论坛,网上商城" />
<meta name="Description" content="设计,包装,创意,创意论坛,网上商城" />
</head>

因为是挑出了几处典型所以就可以分别制作

1号区标签制作

通过查看源代码，得到1号区大图的html代码：

其中要注意的就是图片的宽度与高度width="162" height="227"

我们用phomeflashpic标签调用5条所有信息的头条信息，则为

[phomeflashpic]0,5,162,227,1,20,13,3[/phomeflashpic]

在模板管理》标签模板》管理标签模板，新增一个标签模板

可以自定义好相关的标签进来的！

请看有一个源HTML的代码是这样写的：

4号区的html代码：

我们将这段HTML代码进行封装成自定义的模板标签的话就成如下的所示了：

命名这个标签模板名为“标题+时间的标题列表”，属新闻系统模型。标签模板每行显示2条内容.

内容模板部分：

[!--empirenews.listtemp--]
</p></td></tr><tr>
 
</tr>
[!--empirenews.listtemp--]

列表内容模板(list.var) ：上面你这样写其实其定义是在下面的哦！

4号区，我们用ecmsinfo标签调用4条所有信息推荐，则为

<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td colspan="2" align="center" height="9" valign="middle"></td>
</tr>
[ecmsinfo]0,4,30,0,5,3,0[/ecmsinfo]
</table>