PHPCMS2008模板教程默认模板解析及模板制作教程

最新推荐文章于 2023-04-21 12:01:19 发布

kartik

最新推荐文章于 2023-04-21 12:01:19 发布

阅读量2.4k

点赞数

文章标签： div class module javascript search input

PHPCMS2008官方默认模板解读
首先打开后台，官方默认模板的存放位置，存放在 ./templates/default/phpcms/ 目录里，从这里我们就知道如果我们要新那建一套模板应该怎么做了：
方法：把全套模板放在一个文件夹内，如：W3ZZ，然后上传至templates下面，进入后台，我们在方案管理处就可以看到我们刚刚上传的W3ZZ了，把该方案设置成默认方案，更新模板缓存，然后更新首页就完全是我们W3ZZ里面的模板了，就这样简单……
如图：

这样就是我们W3ZZ下面的模板了
然后我们进入模板管理

这里就是我们W3ZZ文件夹下面PHPCMS里的所有模板，也就是整站核心的模板，包括首页，栏目首页，列表页，内容页，标签模板……
接下来看一下header.html、 index.html、footer.html 三个模板文件。这是首页模板的灵魂！不仅是首页，其它页面的头部文件和页脚文件也是header.html，footer.html这个不用我说了，因为看看模板中的 {template 'phpcms','header'} 和{template 'phpcms','footer'} 说一下这三个参数的含义：
第一个template,是整个系统的模板文件夹，也就是前面讲的为什么要传到templates下面的原因，因为系统定义的模板文件夹就为templates,也就是这里的template;第二个 phpcms，就是目前你的模板所在phpcms文件夹名称，如果你要新建一个头部，只要在phpcms里面新建一个文件，如：header_w3zz.html，然后用{template 'phpcms','header_w3zz'}就可以了，这样第三个header这个就明白了，是要包含的模板文件的名称，footer这个就一样了。
完整页面模板是header+index+footer，有了这三部分，首页模板就可以说结构完整了。
对应2008的默认模板看： （因为都有默认的，所以就不贴出来了，占地方，也不方便看）
现在我们开始分析header.html的构造
1、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> w3c 国际标准

2、 <meta http-equiv="Content-Type" c />
这里定义字符编码，也就是我们下载的时候是GBK还是 UTF-8的，这个{CHARSET}就是编码变量，这个你在安装的时候就已经确定，所以以后的任何操作都要在该编码下操作，否则就会出现乱码，也就是说，出现乱码这些的原因就在于此。

3、 <title>{$head[title]}</title>

这个就是网站名称-网站标题，在后台系统设置－－基本设置－－网站名称- 网站标题，在首页会两个都显示出来，其它的页面就只显示网站名称

4、 <meta c name="keywords" />
在后台系统设置－－基本设置－－ 网页关键词

5、 <meta c name="description" />
在后台系统设置－－基本设置－－网页描述

6、 <base href="{SITE_URL}" _fcksavedurl=""{SITE_URL}"" />

这是全部定义的，就相当于2007里面的{PHPCMS_PATH},同时2008也用。但是在这里定义之后你的模板里面的调用任何文件都不用定义{PHPCMS_PATH}了，如：我要调用images下面的一个图片，你只要写<img src="images/w3zz.jpg">这样就好。{SITE_URL}这个就是你网站的在后台系统设置－－基本设置－－网站地址

7、 <link href="favicon.ico" rel="shortcut icon" />
这个效果就是:   就是网站地址前面的标识，也就调用images/favicon.ico文件，这个可以制作，有制作工具

8、 <link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />
引用全部CSS文件，即templates/default/skins/default 下面的CSS文件{SKIN_PATH}就是templates/default/skins/default这个地址，{$mod}是当前模型的变量，如：当前是phpcms那就说明CSS文件是phpcms.css

9、 <link rel="alternate" type="application/rss+xml" title="{$head[title]}" href="/rss.php?rssid={$catid}" />

网站标题，即订阅的地址

10 、 <script language="JavaScript" src="data/config.js"></script>  _fcksavedurl=""data/config.js"></script> "
配置js文件

<script language="JavaScript" src="images/js/jquery.min.js"></script>

框架js文件

<script language="JavaScript" src="images/js/css.js"></script>
cssjs文件

<script language="JavaScript" src="images/js/common.js"></script>
配置js包括添加收藏夹，设置为首页

<script language="JavaScript" src="images/js/login.js"></script>

登陆js文件

<script language="JavaScript" src="images/js/validator.js"></script>
cookie等的js文件

出现相对应的问题，首先检查这里的js是否调用
11、 <body  >

页面载入的时候调用输出catid或者mod，所以说$catid和$mod即栏目ID和模型名称是全局变量

12、 <div id="top">
{if isset($MODULE['search'])}
{php $types = cache_read('search_type.php');}
  <div class="f_r">
   <form name="site_search" action="{$MODULE[search]}" target="_blank">
<input type="hidden" name="type" value="all"/>
   <input type="text" name="q" size="20"/>
   <select>
      <option value="all">全部</option>
  {loop $types $k $name}
      <option value="{$k}">{$name}</option>
  {/loop}
   </select>
   <input type="submit" name="s" id="button" value="搜索" />
  </form>
  </div>
{/if}
  <div class="f_l">
<div id="div_login" style="display:block">
  <form action="{$MODULE[member][url]}login.php" method="post" name="login" >
  用户名：<input type="text" name="username" size="12"/>
  密码：<input type="password" name="password" size="12"/>
   <input type="submit" name="dosubmit" value="登录" />
   <input type="button" name="register" value="注册" />
   <input type="hidden" name="cookietime" value="0"/>
  </form>
</div>
<div id="div_logined" style="display:none">
  <strong id="logined_username" ></strong>，<a href="{$MODULE[member][url]}">会员中心</a> |
      <a href="{if $PHPCMS['uc']}{$MODULE[member] [url]}logout.php{else}javascript:logout('{$MODULE[member] [url]}logout.php?action=ajax');{/if}">退出登录</a>
</div>
  </div>
</div>
这就是网站首页顶站的搜索框和登陆框，以及登陆后的效果。
如图：
13、 <div id="head">
  <div id="logo">
<a href="{SITE_URL}"><img src="images/logo.gif" _fcksavedurl=""images/logo.gif"" alt="{$PHPCMS[sitename]}" /></a>
<a href="{SITE_URL}rss.php" target="_blank"><img src="images/rss.jpg" alt="rss信息聚合" /></a></div>
  <div class="ad" id="topbanner"><script language="javascript" src="data/js.php?id=1"></script></div>
</div>
<div id="menu">
<ul>
<li><a href="" id="menu_phpcms"><span>首页</span></a></li>
{tag_一级栏目}
</ul>
</div>

头部里面的head  包括logo,订阅标志，banner，导航
效果如图：   }
主体页面index.html代码解析1、第一个 div  <div id="main"></div> 这个主要控制页面的宽度，框加显示，具体样式对应看CSS文件里面的#main这样就明白了，所以说看了模板就知道CSS样式是如何的了，这里就告诉需要修改样式的朋友，要修改哪里，先看那里的模板，然后对应<div>的class或者id去相应的CSS里面查找，然后按着你的想法修改
同时我们也可以这样实现。如：我要把整个页面改成960px的宽度，<div id="main" style="width:960px;"></div>这样改是最保险的，既不会影响全局的CSS，也不会影响其它页面的，我只是举个例子，其它的当然也可以这样改，这样操作最方便。
2、第二个div <div id="main_l"></div> 这个一看就知道是main里面的left了，这就id是main_l，如果要修改可参考1的说明。这个div里面包含了幻灯片，搜索框，栏目首页列表。 下面我们具体分析：
第一块：幻灯片首页头条首页推荐
<div class="cribox_bdr">
   
   <div id="slide">{tag_首页幻灯片}</div>
   
   <div id="hotnews" class="f_r"> {tag_网站首页头条}
      <ul class="text_list">
      {tag_网站首页推荐}
      </ul>
   </div>
</div>这个里面有注释一看就懂了，里面也就是三个标签， {tag_首页幻灯片}  {tag_网站首页头条}  {tag_网站首页推荐}这个在PHPCMS2008里面分别通过三个推荐位置来实现的，幻灯片是首页焦点，首页头条就是首页头条，首页推荐就是首页推荐，这个一看标签设置就可以明白了，同样你也可以修改这些设置。标签设置的教程我以后补上。
效果图：
第二块：搜索框
    这里判断是否安装最搜索模块，安装了就显示，否则不显示
<script type="text/javascript">
function set_type(type)
{
$('#type').val(type);
$('#search_tag>span').removeClass('selected');
$('#type_'+type).addClass('selected');
}
</script>
这里是用JSfunction调用全站搜索的分类，分类设置在模块管理－－全站搜索－－分类管理
<form name="search" action="{$MODULE[search][url]}" target="_blank"> 全站搜索的表单里面包含name和动作action
   <div class="search_tag_top mar_10">
      <p id="search_tag"> <span id="type_all" class="selected" >全部</span> {php $types = cache_read('search_type.php');}    搜索条件的读取如：图片，资讯， cache_read()读取缓存文件函数，只要保存在缓存文件里面的都可以直接用该函数读取。
      {loop $types $type $name} <span id="type_{$type}" >{$name}</span> {/loop} 循环出全站搜索的分类  $types是在cache_read()函数读取缓存的时候将所有数据保存在该数组里面的,$type就是你在模块管理－－全站搜索－－类别管理的类别，如:news。$name是你想要保存的变量，可以自己定义，注意下面的输出是由这个变量控制的。
</p>
   </div>
   <div class="cribox_bdr_1">
      <input type="hidden" name="type" value="all" id="type"/>
      <input type="text" name="q" size="50"/>
      <input type="submit" name="s" id="button" value="搜索" />
   </div>
</form>
<div class="cribox_btm"></div>

效果图：

第三块：栏目列表
   循环系统栏目，将从模块phpcms里面读取的栏目保存在 $subcats 数组里面

一级栏目名称 $subcats 是从上步得到的数组，$catid 栏目id，$cat保存到的变量,下面调用此变量
<div class="cat_index">
   <div class="cat_title"><a href="{$cat[url]}"><img src="images/more.gif" alt="更多" /></a> 更多
      <h3>{$cat[catname]}</h3>

栏目名称
   </div>
   <div class="cat_left" style="width:635px;">
      <ul class="pic_list">
      {tag_首页图片循环标签}        栏目里面图片循环标签，具体设置请自行查看后台，模板风格－－phpcms－－内容标签管理
      </ul>
   </div>
</div>

效果：

这里进行延深一下
如果我想商品栏目显示不同的样式，全部显示图片：
效果图：

就可以把这商品这个栏目给列出来，重新定义，首先找到该商品栏目的id,如我的是11
那我就把栏目列表这一块改为我下面的代码：


{if $catid==11}
<div class="cat_index">
   <div class="cat_title"><a href="{$cat[url]}"><img src="images/more.gif" alt="更多" /></a>
      <h3>{$cat[catname]}</h3>
   </div>
   <div class="cat_left" style="width:635px;">
      <ul class="pic_list">
      {tag_首页商品图片循环标签}
      </ul>
   </div>
</div>
{else}
<div class="cat_index">
   <div class="cat_title"><a href="{$cat[url]}"><img src="images/more.gif" alt="更多" /></a>
      <h3>{$cat[catname]}</h3>
   </div>
   <div class="cat_left">
      <ul class="pic_list">
      {tag_首页图片循环标签}
      </ul>
   </div>
   <div class="cat_right">
      <ul class="text_list">
      {tag_网站首页内容标签}
      </ul>
   </div>
</div>
{/if}

这样的效果就为：

其它的不变，就把商品这一块的显示方式列出来了……以此类推。其它的也就简单了。
3、第三个div <div id="main_r"></div>就是main的right右边部分
<div id="main_r">
第一块：公告模块
                   安装公告模块之后就会显示
<h4><a href="{$MODULE[announce][url]}"><img src="images/more.gif" alt="更多" /></a>网站公告</h4>
<div>
   <ul class="text_list">
      {tag_首页最新公告}                                        公告标签，进入后台模板风格－－公告标签管理查看相应设置
   </ul>
</div>


这样区分出来的原因就是因为，根据一些人的要求不同，有些想把公告迁移到别处，这样就能完整的迁移，不然很容易出现迁移不完整，出现无法更新的结果。

第二块：推荐专题


<h4><a href="{$MODULE[special][url]}"><img src="images/more.gif" alt="更多" /></a>推荐专题</h4>
<div class="pic_txt_list">
   <ul>
      {tag_首页推荐专题}
   </ul>
</div>


标签设置这些就不重复了，和第一块一样。

第三块：热门标签


<h4><a href="tags.php"><img src="images/more.gif" alt="更多" /></a>热门标签</h4>
<div>
   <ul class="text_list_1">

      <li><a href="tag.php?tag={urlencode($r[tag])}">{$r[tag]}</a>({$r[usetimes]})</li>

</ul>
</div>

第四块：顶排行


<h4><a href="{$MODULE[digg][url]}"><img src="images/more.gif" alt="更多" /></a>DIGG 周排行</h4>
<div>
   <ul class="digg_text_list">
      {tag_DIGG周排行}
   </ul>
</div>


第五块：问吧热点


<h4><a href="{$MODULE[ask][url]}"><img src="images/more.gif" alt="更多" /></a>问吧热点</h4>
<div>
   <ul class="text_list_1">
      {tag_首页热点问题}
   </ul>
</div>

第六块：网站调查


<h4><a href="{$MODULE[vote][url]}"><img src="images/more.gif" alt="更多" /></a>投票调查</h4>
<div id="vote_list">
      <script language='javascript' src='{$MODULE[vote][url]}vote.php?voteid=1&action=js'></script>
</div>


第七块：邮件订阅


<h4>邮件订阅</h4>
<div class="pic_txt_list_1">
   <form action="mail/" method="POST">
   E-mail：<input type="text" name="em" id="em">  <input type="submit" value="订阅" class="button_style"/>
   </form>
</div>


第八块：友情链接


<h4><a href="{$MODULE[link][url]}"><img src="images/more.gif" alt="更多" /></a>友情链接</h4>
<div class="pic_txt_list_1"> {tag_logo链接} </div>
<div class="pic_txt_list_1"> {tag_文字链接} </div>

  </div>

这样划分出来，对一些朋友需要调换位置，或者加模块的就容易多了，因为这些都是一个个整体，如果你操作不对，让它不完整了，这样最容易导致更新不了首页。所以确保结构的完整很重要。 默认模板footer.html的分析
<div id="foot">
整个footer.html在这个div里面

<a href="">网站首页</a>{tag_关于我们} | <a href="sitemap.html">网站地图</a><br />
网站页脚关于我们的标签调用，请自行查看：后台模板风格－－phpcms－－内容标签管理－－{tag_关于我们}  网站地图：后台系统设置－－系统工具－－网站地图

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

版权后台系统设置－－网站配置－－基本信息－－版权信息


后台系统设置－－网站配置－－扩展设置开启了之后就显示些内容，包括 QQ MSN SKYPE 阿里旺旺（淘宝版）阿里旺旺（贸易通版）

{include CACHE_PATH.'tm.html'}<br />
调用生成的缓存文件,如果你有删除缓存文件，就不会显示，你需要显示就去扩展设置这里提交一下就OK了，不然，会报错的！


<a href="[url=http://w3zz.com/]http://www.miibeian.gov.cn/ " target="_blank">{$PHPCMS[icpno]}</a>
网站备案信息显示

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

版权信息phpcms2008
</div>
效果图：
制作模板思路
第一、网站策划：包括搜集建站素材确定网站类型；大体布局和主体色调选用；制作网站效果图。
      直接运用PS做出效果，然后切图，这是最关键一步。这里PS效果图出来了，你的网站也就大致出来了。
在帖尾提供一个PS效果图。以前做过的一个网站首页效果图。（网上看到好的素材要收藏，以后不说用，至少可以给你提供好的思路及想法）

第二：制作，DIV+CSS设计网站布局和风格参照第一步设计出来的效果图运用div+css写布局，提高你的建站速率。在你写div+css有些内容你可以运用{tag_标签名称}占位，这样为你以后添加标签又省了一些事情，而且让你明白了哪些地方放什么东西。因为你对着效果图很清楚，以后就直接添加这些标签就OK。

第三：参照系统默认风格的header、footer和各个频道的index.html模板代码，添加标签，先运用系统默认的标签模板。有些JS调用一定要添加到你的制作模板中，基本的函数调用，一定要看明白，可以参考我上面对首页的分析，其它的页面大致一样。有些标签可以直接用系统默认的，你按着你的想法修改也可以。这样也同时节约资源……

第四：这里你可以按照你的想法，制作标签模板，然后添加标签调用你的标签模板。这里就可以用到你收集到的好的样式了，你可以拿过来整合你的CSS，做出好的效果。比如什么导航，图文混排，TAB选项卡等，效果很多，在我们论坛上也能找到相应的教程。

第五：写好模板之后要检测IE6.IE7、FIREFOX等主流浏览器能兼容性。优化代码，整合模板文件，细节修改，把不必要的东西扔掉
。这样可以让你网站更完美。

建议模板制作顺序：也是我个人做模板的顺序，仅供参考
                   网站首页
                     文章栏目页—文章列表页—文章内容页
                     图片栏目页—图片列表页—图片内容页
                     下载栏目页—下载列表页—下载内容页
                     信息栏目页—信息列表页—信息内容页
                     产品栏目页—产品列表页—产品内容页
                     单网页
这个只是个人建议，不一定每一个站都要这么多内容，而且按照你的习惯来做。每个人都有自己的建站习惯。这个习惯很重要，就的更文明点是风格。当然也还有其它的步骤，比如整合这些，这里就不说了！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHPCMS2008模板教程默认模板解析及模板制作教程

PHPCMS2008官方默认模板解读首先打开后台，官方默认模板的存放位置，存放在 ./templates/default/phpcms/ 目录里，从这里我们就知道如果我们要新那建一套模板应该怎么做了：方法：把全套模板放在一个文件夹内，如：W3ZZ，然后上传至templates下面，进入后台，我们在方案管理处就可以看到我
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。