GONE WITH THE WIND

          --tomorrow is another day

            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            30 隨筆 :: 19 文章 :: 0 評(píng)論 :: 0 Trackbacks
          PHPCMS2008模板教程 默認(rèn)模板解析及模板制作教程 PHPCMS2008官方默認(rèn) 模板解讀 首先打開后臺(tái),官方默認(rèn)模板的存放位置,存放在 ./templates/default/ php cms/ 目錄里,從這里我們就知道如果我們要新那建一套模板應(yīng)該怎么做了: 方法:把全套模板放在一個(gè)文
            

          PHPCMS2008模板教程 默認(rèn)模板解析及模板制作教程
          首先打開后臺(tái),官方默認(rèn)模板的存放位置,存放在 ./templates/default/phpcms/ 目錄里,從這里我們就知道如果我們要新那建一套模板應(yīng)該怎么做了:
          方法:把全套模板放在一個(gè)文件夾內(nèi),如:W3ZZ,然后上傳至templates下面,進(jìn)入后臺(tái),我們?cè)诜桨腹芾硖幘涂梢钥吹轿覀儎倓偵蟼鞯腤3ZZ了,把該方案設(shè)置成默認(rèn)方案,更新模板緩存,然后更新首頁(yè)就完全是我們W3ZZ里面的模板了,就這樣簡(jiǎn)單……
          如圖:
           這里就是我們W3ZZ文件夾下面PHPCMS里的所有模板,也就是整站核心的模板,包括首頁(yè),欄目首頁(yè),列表頁(yè),內(nèi)容頁(yè),標(biāo)簽模板……
          接下來看一下header.html、index.html、footer.html 三個(gè)模板文件。這是首頁(yè)模板的靈魂!不僅是首頁(yè),其它頁(yè)面的頭部文件和頁(yè)腳文件也是header.html,footer.html這個(gè)不用我說了,因?yàn)榭纯茨0逯械?/font>{template 'phpcms','header'}{template 'phpcms','footer'}說一下這三個(gè)參數(shù)的含義:
          第一個(gè)template,是整個(gè)系統(tǒng)的模板文件夾,也就是前面講的為什么要傳到templates下面的原因,因?yàn)橄到y(tǒng)定義的模板文件夾就為templates,也就是這里的template;第二個(gè)phpcms,就是目前你的模板所在phpcms文件夾名稱,如果你要新建一個(gè)頭部,只要在phpcms里面新建一個(gè)文件,如:header_w3zz.html,然后用{template 'phpcms','header_w3zz'}就可以了,這樣第三個(gè)header這個(gè)就明白了,是要包含的模板文件的名稱,footer這個(gè)就一樣了。
          完整頁(yè)面模板是header+index+footer,有了這三部分,首頁(yè)模板就可以說結(jié)構(gòu)完整了。
          對(duì)應(yīng)2008的默認(rèn)模板看:(因?yàn)槎加心J(rèn)的,所以就不貼出來了,占地方,也不方便看)
          現(xiàn)在我們開始分析header.html的構(gòu)造
          1、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
          http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    w3c國(guó)際標(biāo)準(zhǔn)


          2、<meta http-equiv="Content-Type" c />     

          這里定義字符編碼,也就是我們下載的時(shí)候是GBK還是UTF-8的,這個(gè){CHARSET}就是編碼變量,這個(gè)你在安裝的時(shí)候就已經(jīng)確定,所以以后的任何操作都要在該編碼下操作,否則就會(huì)出現(xiàn)亂碼,也就是說,出現(xiàn)亂碼這些的原因就在于此。

          3、<title>{$head[title]}</title>               
          這個(gè)就是網(wǎng)站名稱-網(wǎng)站標(biāo)題,在后臺(tái)系統(tǒng)設(shè)置--基本設(shè)置--網(wǎng)站名稱-網(wǎng)站標(biāo)題,在首頁(yè)會(huì)兩個(gè)都顯示出來,其它的頁(yè)面就只顯示網(wǎng)站名稱

          4、<meta c name="keywords" />     
          在后臺(tái)系統(tǒng)設(shè)置--基本設(shè)置--網(wǎng)頁(yè)關(guān)鍵詞

          5、<meta c name="description" />   
          在后臺(tái)系統(tǒng)設(shè)置--基本設(shè)置--網(wǎng)頁(yè)描述

          6、<base href="{SITE_URL}" _fcksavedurl=""{SITE_URL}"" />              
          這是全部定義的,就相當(dāng)于2007里面的{PHPCMS_PATH},同時(shí)2008也用。但是在這里定義之后你的模板里面的調(diào)用任何文件都不用定義{PHPCMS_PATH}了,如:我要調(diào)用images下面的一個(gè)圖片,你只要寫<img src="images/w3zz.jpg">這樣就好。{SITE_URL}這個(gè)就是你網(wǎng)站的在后臺(tái)系統(tǒng)設(shè)置--基本設(shè)置--網(wǎng)站地址

          7、<link href="favicon.ico" rel="shortcut icon" />   
          這個(gè)效果就是:  就是網(wǎng)站地址前面的標(biāo)識(shí),也就調(diào)用images/favicon.ico文件,這個(gè)可以制作,有制作工具

          8、<link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />   
          引用全部CSS文件,即templates/default/skins/default下面的CSS文件{SKIN_PATH}就是templates/default/skins/default這個(gè)地址,{$mod}是當(dāng)前模型的變量,如:當(dāng)前是phpcms那就說明CSS文件是phpcms.css

          9、<link rel="alternate" type="application/rss+xml" title="{$head[title]}" href="/rss.php?rssid={$catid}" />  
          網(wǎng)站標(biāo)題,即訂閱的地址

          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包括添加收藏夾,設(shè)置為首頁(yè)
          <script language="JavaScript" src="images/js/login.js"></script>            
          登陸js文件

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

          出現(xiàn)相對(duì)應(yīng)的問題,首先檢查這里的js是否調(diào)用
           

          11、<body   
          頁(yè)面載入的時(shí)候調(diào)用輸出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="注冊(cè)" />
               <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]}">會(huì)員中心</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>   

          這就是網(wǎng)站首頁(yè)頂站的搜索框和登陸框,以及登陸后的效果。
          如圖: 
          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>首頁(yè)</span></a></li>
             {tag_一級(jí)欄目}
          </ul>
          </div>     
          頭部里面的head  包括logo,訂閱標(biāo)志,banner,導(dǎo)航
          效果如圖: 

          主體頁(yè)面index.html代碼解析
          1、第一個(gè)div  <div id="main"></div>   這個(gè)主要控制頁(yè)面的寬度,框加顯示,具體樣式對(duì)應(yīng)看CSS文件里面的#main這樣就明白了,所以說看了模板就知道CSS樣式是如何的了,這里就告訴需要修改樣式的朋友,要修改哪里,先看那里的模板,然后對(duì)應(yīng)<div>的class或者id去相應(yīng)的CSS里面查找,然后按著你的想法修改
          同時(shí)我們也可以這樣實(shí)現(xiàn)。如:我要把整個(gè)頁(yè)面改成960px的寬度,<div id="main" style="width:960px;"></div>這樣改是最保險(xiǎn)的,既不會(huì)影響全局的CSS,也不會(huì)影響其它頁(yè)面的,我只是舉個(gè)例子,其它的當(dāng)然也可以這樣改,這樣操作最方便。
          2、第二個(gè)div <div id="main_l"></div>   這個(gè)一看就知道是main里面的left了,這就id是main_l,如果要修改可參考1的說明。這個(gè)div里面包含了幻燈片,搜索框,欄目首頁(yè)列表。下面我們具體分析:
          第一塊:幻燈片 首頁(yè)頭條首頁(yè)推薦
          <div class="cribox_bdr">
                <!--幻燈片-->
                <div id="slide">{tag_首頁(yè)幻燈片}</div>
                <!--熱點(diǎn)文章-->
                <div id="hotnews" class="f_r"> {tag_網(wǎng)站首頁(yè)頭條}
                  <ul class="text_list">
                    {tag_網(wǎng)站首頁(yè)推薦}
                  </ul>
                </div>
              </div>這個(gè)里面有注釋一看就懂了,里面也就是三個(gè)標(biāo)簽,{tag_首頁(yè)幻燈片}  {tag_網(wǎng)站首頁(yè)頭條}  {tag_網(wǎng)站首頁(yè)推薦}這個(gè)在PHPCMS2008里面分別通過三個(gè)推薦位置來實(shí)現(xiàn)的,幻燈片是首頁(yè)焦點(diǎn),首頁(yè)頭條就是首頁(yè)頭條,首頁(yè)推薦就是首頁(yè)推薦,這個(gè)一看標(biāo)簽設(shè)置就可以明白了,同樣你也可以修改這些設(shè)置。標(biāo)簽設(shè)置的教程我以后補(bǔ)上。
          第二塊:搜索框
          <!--{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調(diào)用全站搜索的分類,分類設(shè)置在模塊管理--全站搜索--分類管理
              <form name="search" action="{$MODULE[search][url]}" target="_blank">    全站搜索的表單里面包含name和動(dòng)作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()讀取緩存文件函數(shù),只要保存在緩存文件里面的都可以直接用該函數(shù)讀取。
                    {loop $types $type $name} <span id="type_{$type}" >{$name}</span> {/loop}   循環(huán)出全站搜索的分類  $types是在cache_read()函數(shù)讀取緩存的時(shí)候?qū)⑺袛?shù)據(jù)保存在該數(shù)組里面的,$type就是你在模塊管理--全站搜索--類別管理的類別,如:news。$name是你想要保存的變量,可以自己定義,注意下面的輸出是由這個(gè)變量控制的。
          </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}-->
          效果圖:
           
          posted on 2009-04-01 10:32 張永耀 閱讀(1315) 評(píng)論(0)  編輯  收藏 所屬分類: PHPCMS2008

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 治多县| 嘉定区| 盱眙县| 尼玛县| 岢岚县| 保定市| 长春市| 灵川县| 萨嘎县| 福清市| 理塘县| 新津县| 东兴市| 繁昌县| 靖州| 合水县| 凭祥市| 阳信县| 大连市| 久治县| 东阿县| 顺平县| 大竹县| 廊坊市| 保靖县| 板桥市| 沭阳县| 平南县| 尼玛县| 博客| 卓资县| 平度市| 衡阳市| 封开县| 马尔康县| 桃园市| 蓝田县| 镇康县| 合山市| 彭泽县| 兰溪市|