页面模板教程 - igaofen

公告

很显然，2008版官方精简了模板的设计代码，可谓完全的DIV+CSS，到底08版的默认模板是什么样子？代码又有什么变化？今天，我们来一起看看吧！！如果你能看完看懂这篇冗长的文章，相信你对phpcms2008的模板也就不再陌生！可以说，很快你就可以自己做模板了！！

好了，闲话少说，我们开始吧！今天是第一讲！

第一讲：PHPCMS2008官方默认模板完全解读及模板制作思路——PHPCMS支持团队【酷扑工作室】

首先大家打开后台，看一下官方默认模板的存放位置，其实都是存放在 ./templates/default/phpcms/ 目录里，这下我们清楚了，如图附件截图：

第一反应，看看header.html、index.html、footer.html 三个模板文件。这可是模板的灵魂啊！完整页面模板就是header+index+footer了，大家都知道的！！

代码分别如下：header.html部分：

</head>
18

<body onload="menu_selected('{php echo $catid ? $catid : $mod;}')">
20

<div id="top">
22

{if isset($MODULE['search'])}
24

{php $types = include PHPCMS_ROOT.$MODULE['search']['path'].'include/type.inc.php';}
26

<div class="f_r">
28

<form name="site_search" action="{$MODULE[search][url]}" target="_blank">
30

<input type="hidden" name="type" value="all"/>
32

<input type="text" name="q" size="20"/>
34

<select>
36

<option value="all">全部</option>
38

{loop $types $k $name}
40

<option value="{$k}">{$name}</option>
42

{/loop}
44

</select>
46

<input type="submit" name="s" id="button" value="搜索" />
48

</form>
50

</div>
52

{/if}
54

<div class="f_l">
56

<div id="div_login" style="display:block">
58

<form action="{$MODULE[member][url]}login.php" method="post" name="login" onsubmit="return loginSubmit(this, {$PHPCMS[uc]});">
60

用户名：<input type="text" name="username" size="12"/>
62

密码：<input type="password" name="password" size="12"/>
64

<input type="submit" name="dosubmit" value="登录" />
66

<input type="button" name="register" value="注册" onclick="redirect('{$MODULE[member][url]}register.php')"/>
68

<input type="hidden" name="cookietime" value="0"/>
70

</form>
72

</div>
74

<div id="div_logined" style="display:none">
76

<span id="logined_username" class="b"></span>，<a href="{$MODULE[member][url]}">会员中心</a> |
78

<a href="{if $PHPCMS['uc']}{$MODULE[member][url]}logout.php{else}javascript:logout('{$MODULE[member][url]}logout.php?action=ajax');{/if}">退出登录</a>
80

</div>
82

</div>
84

</div>
86

<div id="head">
88

<div id="logo">
90

<a href="{SITE_URL}"><img src="images/logo.gif" alt="{$PHPCMS[sitename]}" /></a>
92

<a href="{SITE_URL}rss.php" target="_blank"><img src="images/rss.jpg" alt="rss信息聚合" /></a></div>
94

<div class="ad" id="topbanner"><script language="javascript" src="data/js.php?id=1"></script></div>
96

</div>
98

<div id="menu">
100

101

<ul>
102

103

<li><a href="" id="menu_phpcms"><span>首页</span></a></li>
104

105

{tag_一级栏目}
106

107

<li><a href="{$MODULE[special][url]}" id="menu_special"><span>专题</span></a></li>
108

109

<li><a href="{$MODULE[ask][url]}" id="menu_ask"><span>问吧</span></a></li>
110

111

<li><a href="{$MODULE[search][url]}" id="menu_search"><span>搜索</span></a></li>
112

113

</ul>
114

115

</div>
116

117

118

默认Index.html部分模板代码如下：
119

120

<div class="pic_txt_list_1"> {tag_logo链接} </div>
121

122

<div class="pic_txt_list_1"> {tag_文字链接} </div>
123

124

125

126

</div>
127

128

129

130

</div>
131

132

133

134

135

136

页脚footer.html代码较少，如下：
137

138

<strong>{$PHPCMS['copyright']}</strong><br />
139

140

<a href="http://www.miibeian.gov.cn/" target="_blank">{$PHPCMS[icpno]}</a>
141

142

<a href="http://www.phpcms.cn/" class="copyright" target="_blank">Powered by Phpcms 2008</a>
143

144

</div>
145

146

</body>
147

148

</html>
149

150

把三个部分代码放在一张页面里，就是一个完整页面模板了，说做就做吧，我把它放到单独的一个页面，方便讲解！从代码中可以看出，phpcms2008的模板设计基本上是完全的DIV+CSS了，当然还引入jquery框架，广泛应用AJAX无刷新技术等等技术，撇开它们不说！！

上面我们把首页的header、index、footer放到一起，成为完整的首页模板了！但是显示双击显示的是乱七八糟的东西，还有乱码！别急，其实我们看看上面的代码就知道原因了，

1、编码不对，当然显示乱码；

2、无法调用css文件和风格图片，当然乱七八糟；

3，重要的JS调用文件没有，无法显示相关效果；

4、网页很多php语言代码，特别是导航部分，没有运行环境，效果就不会有了；

。。。。。。

好了，针对以上问题，为了把后台首页模板还原成前台访问的样式效果，我们动手注意解决吧（所有代码请对照一楼）

一、官方模板中的网页编码定义如下：

反过来，大家在制作模板的时候，这个代码不能丢了哦，一定要加上。

四、为了还原默认模板样式，解剖2008版的官方默认模板，我把代码

改为下面的样式，

无非就是直接调用本文件的相对地址css样式文件，这样css才会起作用！

五、下面几个JS文件关系到一些重要调用，所以要从程序文件夹中复制过来！！放到相应文件夹中，

Code

差点忘记了，上面的所有代码涉及的的css文件，风格图片，请先分别复制到相应文件夹。否则，调用代码没意义啦！

至此，头部文件修改完毕！！！！看看Index.html部分代码有这么一段，好像是php语言的if条件语句，我也不太懂，只有放在php环境中，才可以执行语句！：

<a href="{if $PHPCMS['uc']}{$MODULE[member][url]}logout.php{else}javascript:logout('{$MODULE[member][url]}logout.php?action=ajax');{/if}">退出登录</a>
为了便于大家对比照看代码区别和差异，我就不一一修改它了，把前台显示代码放在下面，大家看看到底是哪里代码改变，哪里没有改变！更有学习价值^_^ 当然此段代码是否替换不影响前台的正常显示，在这里我替换成下面的，主要是为了让大家看看官方代码和前台显示代码的差异！以便大家学习:-)####替换的代码如下：

至此，我通过对以上代码进行简单的替换，首页已经完全可以显示了，index.html中其余的代码和footer.html里的代码没有什么可以研究的，非常简单！所以就不一一冗述了！

友情提醒：大家打开一张漂亮网页时，要有右键查看源代码的习惯，大家觉得下面的代码与你查看到的一些网页的源代码有什么不同吗？？其实就是都很简单的，无非就是DIV+CSS框架风格设计，再把一些源代码中的常量替换成官方的模板制作的变量而已！！具体可参见官方“模板常用变量含义”和“模板语法规则”等帮助文档！！好了！这样就是典型的phpcms2008默认首页模板的解剖过程！！！！！！！！！！！！！

图片：

现在我总结一下phpcms2008模板制作的方法：

第一步：前期策划：包括确定网站方向；布局和色调选用；制作网站布局图

【我给大家提供了我以前设计的一张网站门户风格首页布局图，参见附件截图】

第二步：制作和搜罗建站素材（网上看到好的素材要养成收藏的习惯^_^），DIV+CSS设计网站布局和风格（参照布局图效率极高哦，所以设计大家一定要制作一张布局图^_^）

第三步：参照官方风格的header、footer和各个频道的index.html模板代码，添加官方的常量标签，一定要遵循代码规则啊！有些代码和JS调用一定要添加到你的制作模板中（特别是<head></head>之间的css调用和JS调用代码），相应的调用文件也别忘了一定要复制到你自己的制作文件夹的相应位置。

第四步：上面一步是添加官方变量标签，这一步就看你的水平了，发挥你的想象了和制作水平，添加你想要的效果吧，比如什么导航啊，图文混排啊，TAB选项卡啊等，效果自己定！！我不多说^_^

第五步：差不多了吧！给每个想要显示内容的地方添加相应的调用标签吧！然后看看还有什么显示问题没有，最好测试保证IE6.IE7、FIREFOX等主流浏览器能兼容你的模板哦

第六步：优化代码，整合模板文件，在细节上注意扫描，不然的话会对你以后的网站维护带来隐患哦^_^

第七步：建议模板制作顺序：

1、网站首页

2、文章—文章栏目页—文章列表页—文章内容页

3、图片—图片栏目页—图片列表页—图片内容页

4、下载频道同上

5、信息频道同上

6、其他单一页面

好了，还有什么没有讲到的，等我想到了再补充出来吧！教程难免出现错误，大家多提建议！以便我不断完善它！！谢谢大家^_^

哎呀，好累，说实话，为了写这篇文章，人家晚饭都吃了，我中饭还没呢！！！边测试边写，花了半天时间。。

posted on 2009-08-26 17:23 igaofen 阅读(592) 评论(0) 收藏举报

刷新页面返回顶部