BlogJava-GONE WITH THE WIND::不能让生活没有目标。-随笔分类-PHPCMS2008http://www.blogjava.net/zhangyy130/category/38718.html--<span style="font-size:15px;">tomorrow is another day::地方门户的目标不能变</span>zh-cnWed, 01 Apr 2009 06:06:37 GMTWed, 01 Apr 2009 06:06:37 GMT60PHPCMS2008模板教程 默认模板解析及模板制作教程(一)http://www.blogjava.net/zhangyy130/archive/2009/04/01/263291.html张永耀张永耀Wed, 01 Apr 2009 02:32:00 GMThttp://www.blogjava.net/zhangyy130/archive/2009/04/01/263291.htmlhttp://www.blogjava.net/zhangyy130/comments/263291.htmlhttp://www.blogjava.net/zhangyy130/archive/2009/04/01/263291.html#Feedback0http://www.blogjava.net/zhangyy130/comments/commentRss/263291.htmlhttp://www.blogjava.net/zhangyy130/services/trackbacks/263291.htmlPHPCMS2008模板教程 默认模板解析及模板制作教程 PHPCMS2008官方默认 模板解读 首先打开后台，官方默认模板的存放位置，存放在 ./templates/default/ php cms/ 目录里，从这里我们就知道如果我们要新那建一套模板应该怎么做了： 方法：把全套模板放在一个文
　　

PHPCMS2008模板教程 默认模板解析及模板制作教程
首先打开后台，官方默认模板的存放位置，存放在 ./templates/default/phpcms/ 目录里，从这里我们就知道如果我们要新那建一套模板应该怎么做了：
方法：把全套模板放在一个文件夹内，如：W3ZZ，然后上传至templates下面，进入后台，我们在方案管理处就可以看到我们刚刚上传的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][url]}" 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里面分别通过三个推荐位置来实现的，幻灯片是首页焦点，首页头条就是首页头条，首页推荐就是首页推荐，这个一看标签设置就可以明白了，同样你也可以修改这些设置。标签设置的教程我以后补上。
第二块：搜索框
<!--{if isset($MODULE['search'])}-->      这里判断是否安装最搜索模块，安装了就显示，否则不显示
<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>
<!--{/if}-->
效果图：
 


张永耀 2009-04-01 10:32 发表评论
]]>