LinuxEye - Linux系统教程

LinuxEye - Linux系统教程

当前位置: 主页 > 建站 >

PHPCMS模板制作教程

时间:2012-05-06 19:05来源:未知 编辑:admin 点击:
首先打开后台,官方默认模板的存放位置,存放在 ./templates/default/phpcms/ 目录里,从这里我们就知道如果我们要新那建一套模板应该怎么做了: 方法:把全套模板放在一个文件夹内,如
      首先打开后台,官方默认模板的存放位置,存放在 ./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][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了,这就idmain_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}-->
第三块:栏目列表
<!--{php $subcats = subcat('phpcms', 0, 0);}-->   循环系统栏目,将从模块phpcms里面读取的栏目保存在$subcats 数组里面
<!--{loop $subcats $catid $cat}-->     一级栏目名称 $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>
<!--{/loop}-->  
这里进行延深一下
如果我想商品栏目显示不同的样式,全部显示图片:
就可以把这商品这个栏目给列出来,重新定义,首先找到该商品栏目的id,如我的是11
那我就把栏目列表这一块改为我下面的代码:
<!--{php $subcats = subcat('phpcms', 0, 0);}-->
<!--{loop $subcats $catid $cat}-->
{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}
<!--{/loop}-->
其它的不变,就把商品这一块的显示方式列出来了……以此类推。其它的也就简单了。
3第三个div <div id="main_r"></div>就是main的right右边部分
<div id="main_r">
第一块:公告模块
<!--{if isset($MODULE['announce'])}-->                    安装公告模块之后就会显示
    <h4><a href="{$MODULE[announce][url]}"><img src="images/more.gif" alt="更多" /></a>网站公告</h4>
    <div>
      <ul class="text_list">
        {tag_首页最新公告}                                          公告标签,进入后台模板风格--公告标签管理查看相应设置
      </ul>
    </div>
<!--{/if}-->
这样区分出来的原因就是因为,根据一些人的要求不同,有些想把公告迁移到别处,这样就能完整的迁移,不然很容易出现迁移不完整,出现无法更新的结果。
第二块:推荐专题
<!--{if isset($MODULE['special'])}-->
    <h4><a href="{$MODULE[special][url]}"><img src="images/more.gif" alt="更多" /></a>推荐专题</h4>
    <div class="pic_txt_list">
      <ul>
        {tag_首页推荐专题}
      </ul>
    </div>
<!--{/if}-->
标签设置这些就不重复了,和第一块一样。
第三块:热门标签
<!--{block('index', 1)}-->
    <h4><a href="tags.php"><img src="images/more.gif" alt="更多" /></a>热门标签</h4>
    <div>
      <ul class="text_list_1">
   <!--{get sql="select tag,usetimes from phpcms_keyword order by listorder desc,usetimes desc" rows="10"}-->
        <li><a href="tag.php?tag={urlencode($r[tag])}">{$r[tag]}</a>({$r[usetimes]})</li>
   <!--{/get}-->
   </ul>
    </div>
第四块:顶排行
<!--{if isset($MODULE['digg'])}-->
    <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>
<!--{/if}-->
第五块:问吧热点
<!--{if isset($MODULE['ask'])}-->
    <h4><a href="{$MODULE[ask][url]}"><img src="images/more.gif" alt="更多" /></a>问吧热点</h4>
    <div>
      <ul class="text_list_1">
        {tag_首页热点问题}
      </ul>
    </div>
<!--{/if}-->
第六块:网站调查
<!--{if isset($MODULE['vote'])}-->
<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>
<!--{/if}-->
第七块:邮件订阅
<!--{if isset($MODULE['mail']) }-->
    <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>
<!--{/if}-->
第八块:友情链接
<!--{if isset($MODULE['link'])}-->
    <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>
<!--{/if}-->
  </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 />  
版权 后台系统设置--网站配置--基本信息--版权信息
<!--{if $PHPCMS['enabletm']}-->        
后台系统设置--网站配置--扩展设置开启了之后就显示些内容,包括QQ MSN SKYPE 阿里旺旺(淘宝版)阿里旺旺(贸易通版)
{include CACHE_PATH.'tm.html'}<br />   
调用生成的缓存文件,如果你有删除缓存文件,就不会显示,你需要显示就去扩展设置这里提交一下就OK了,不然,会报错的!
<!--{/if}-->
<a href="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等主流浏览器能兼容性。优化代码,整合模板文件,细节修改,把不必要的东西扔掉
。这样可以让你网站更完美。
建议模板制作顺序:也是我个人做模板的顺序,仅供参考
                       网站首页
                       文章栏目页—文章列表页—文章内容页
                       图片栏目页—图片列表页—图片内容页
                       下载栏目页—下载列表页—下载内容页
                       信息栏目页—信息列表页—信息内容页
                       产品栏目页—产品列表页—产品内容页
                       单网页
这个只是个人建议,不一定每一个站都要这么多内容,而且按照你的习惯来做。每个人都有自己的建站习惯。这个习惯很重要,就的更文明点是风格。当然也还有其它的步骤,比如整合这些,这里就不说了!
 
上面我们把首页的header、index、footer放到一起,成为完整的首页模板了!但是显示双击显示的是乱七八糟的东西,还有乱码!别急,其实我们看看上面的代码就知道原因了,
1、编码不对,当然显示乱码;
2、无法调用css文件和风格图片,当然乱七八糟;
3,重要的JS调用文件没有,无法显示相关效果;
4、网页很多php语言代码,特别是导航部分,没有运行环境,效果就不会有了;
。。。。。。

好了,针对以上问题,为了把后台首页模板还原成前台访问的样式效果,我们动手注意解决吧(所有代码请对照一楼)
一、官方模板中的网页编码定义如下:
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
{CHARSET}是只有phpcms才会识别的变量标签,我们把它改成“GBK”,这样就解决乱码问题了,完整代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
二、为了看效果,我们把下面的代码<meta content="{$head[keywords]}" name="keywords" />
<meta content="{$head[description]}" name="description" />
改为:
<meta content="酷扑工作室——PHPCMS支持团队" name="keywords" />
<meta content="酷扑工作室——PHPCMS支持团队" name="description" />
当然,不该也行,只是为了看效果,这都无所谓。。
三、因为我们调用的css样式和风格样式图片都是相对于本文件夹的相对地址,所以去掉header.html代码里一行代码,图片才能正常显示,不然则会显示乱码的,####这点很重要!####,
所以把<base href="{SITE_URL}" />去掉或者改为<!--<base href="{SITE_URL}" />-->,代码就失效了!!
反过来,大家在制作模板的时候,这个代码不能丢了哦,一定要加上。
四、为了还原默认模板样式,解剖2008版的官方默认模板,我把代码
<link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />
改为下面的样式,
<link href="templates/default/skins/default/phpcms.css" rel="stylesheet" type="text/css" />
无非就是直接调用本文件的相对地址css样式文件,这样css才会起作用!
五、下面几个JS文件关系到一些重要调用,所以要从程序文件夹中复制过来!!放到相应文件夹中
<script language="JavaScript" src="data/config.js"></script>
<script language="JavaScript" src="images/js/jquery.min.js"></script>
<script language="JavaScript" src="images/js/css.js"></script>
<script language="JavaScript" src="images/js/common.js"></script>
<script language="JavaScript" src="images/js/login.js"></script>
<script language="JavaScript" src="images/js/validator.js"></script>
差点忘记了,上面的所有代码涉及的的css文件,风格图片,请先分别复制到相应文件夹。否则,调用代码没意义啦!
至此,头部文件修改完毕!!!!看看Index.html部分代码有这么一段,好像是php语言的if条件语句,我也不太懂,只有放在php环境中,才可以执行语句!:
{if isset($MODULE['search'])}
{php $types = include PHPCMS_ROOT.$MODULE['search']['path'].'include/type.inc.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_r">
<form name="site_search" action="search/" target="_blank">
<input type="hidden" name="type" value="all"/>
<input type="text" name="q" size="20"/>
<select>
<option value="all">全部</option>
<option value="news">资讯</option>
<option value="picture">图片</option>
<option value="down">下载</option>
<option value="info">信息</option>
<option value="ask">问吧</option>
</select>
<input type="submit" name="s" id="button" value="搜索" />
</form>
</div>
这样,通过调用类“f_r”,就能显示搜索框了。呵呵
说明一下:这种从官方模板到普通模板的解读过程其实就是我们制作模板的逆向过程!所以,我可以很自信的对大家说,读懂了我这篇文章,你就可以随心所欲的制作你想要的任何风格模板了!完全的DIV+CSS设计,给我们制作模板带来了很多方便,2007版的模板还是有tb嵌套的,很不好,2008版要更人性化的多!!是吧 ^_^
下面的这一部分仍然是默认首页模板的后台代码:
<div class="f_l">
<div id="div_login" style="display:block">
<form action="{$MODULE[member][url]}login.php" method="post" name="login" onsubmit="return loginSubmit(this, {$PHPCMS[uc]});">
用户名:<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="注册" onclick="redirect('{$MODULE[member][url]}register.php')"/>
<input type="hidden" name="cookietime" value="0"/>
</form>
</div>
<div id="div_logined" style="display:none">
<span id="logined_username" class="b"></span>,<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>
为了便于大家对比照看代码区别和差异,我就不一一修改它了,把前台显示代码放在下面,大家看看到底是哪里代码改变,哪里没有改变!更有学习价值^_^ 当然此段代码是否替换不影响前台的正常显示,在这里我替换成下面的,主要是为了让大家看看官方代码和前台显示代码的差异!以便大家学习:-)####替换的代码如下:
<div class="f_l">
<div id="div_login" style="display:block">
<form action="member/login.php" method="post" name="login" onsubmit="return loginSubmit(this, 0);">
用户名:<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="注册" onclick="redirect('member/register.php')"/>
<input type="hidden" name="cookietime" value="0"/>
</form>
</div>
<div id="div_logined" style="display:none">
<span id="logined_username" class="b"></span>,<a href="member/">会员中心</a> |
<a href="javascript:logout('member/logout.php?action=ajax');">退出登录</a>
</div>
</div>
</div>
<!--结束-->
至此,我通过对以上代码进行简单的替换,首页已经完全可以显示了,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、其他单一页面

转载请保留固定链接: https://linuxeye.com/jianzhan/417.html

------分隔线----------------------------
标签:PHPCMS模板制作
栏目列表
推荐内容