PHPCMS2008模板教程—官方默认模板完全解读及制作思路
图片:
'700')this.width='700';if(this.height>'700')this.height='700';" border=0>
大家好!我是酷扑工作室的beyond0624,首先祝贺一下beta2的发布!昨天下午云飞版主让我研究一下phpcms2008,然后写个模板制作教 程给大家!昨晚匆忙安装测试了一下,发现phpcms2008还有很多bug需要修正完善!但是这并不影响我们模板的制作!从今天开始,我就和大家一起交 流一下phpcms2008模板制作的相关问题。
很显然,2008版官方精简了模板的设计代码,可谓完全的DIV+CSS,到底08版的默认模板是什么样子?代码又有什么变化?今天,我们来一起看看 吧!!如果你能看完看懂这篇冗长的文章,相信你对phpcms2008的模板也就不再陌生!可以说,很快你就可以自己做模板了!!
好了,闲话少说,我们开始吧!今天是第一讲!
第一讲:PHPCMS2008官方默认模板完全解读及模板制作思路——PHPCMS支持团队【酷扑工作室】
首先大家打开后台,看一下官方默认模板的存放位置,其实都是存放在 ./templates/default/phpcms/ 目录里,这下我们清楚了,如图附件截图:
第一反应,看看header.html、index.html、footer.html 三个模板文件。这可是模板的灵魂啊!完整页面模板就是header+index+footer了,大家都知道的!!
代码分别如下:header.html部分:
Copy code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<title>{$head[title]}</title>
<meta content="{$head[keywords]}" name="keywords" />
<meta content="{$head[description]}" name="description" />
<base href="{SITE_URL}" />
<link href="favicon.ico" rel="shortcut icon" />
<link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="data/config.js"></script>
<script language="JavaScript" src="data:images/js/jquery.min.js"></script>
<script language="JavaScript" src="data:images/js/css.js"></script>
<script language="JavaScript" src="data:images/js/common.js"></script>
<script language="JavaScript" src="data:images/js/login.js"></script>
<script language="JavaScript" src="data:images/js/validator.js"></script>
</head>
<body οnlοad="menu_selected('{php echo $catid ? $catid : $mod;}')">
<div id="top">
{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_l">
<div id="div_login" style="display:block">
<form action="{$MODULE[member][url]}login.php" method="post" name="login" οnsubmit="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="注册" οnclick="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 id="head">
<div id="logo">
<a href="{SITE_URL}"><img src="data:images/logo.gif" alt="{$PHPCMS[sitename]}" /></a>
<a href="{SITE_URL}rss.php" target="_blank"><img src="data: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_一级栏目}
<li><a href="{$MODULE[special][url]}" id="menu_special"><span>专题</span></a></li>
<li><a href="{$MODULE[ask][url]}" id="menu_ask"><span>问吧</span></a></li>
<li><a href="{$MODULE[search][url]}" id="menu_search"><span>搜索</span></a></li>
</ul>
</div>
默认Index.html部分模板代码如下:
Copy code
<!--begin main-->
<div id="main">
<!--begin left-->
<div id="main_l">
<!--begin 焦点图片,新闻-->
******************************中间部分代码太长 此处省略处理******************************
<!--begin 全站搜索-->
<!--{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>
<form name="search" action="{$MODULE[search][url]}" target="_blank">
<div class="search_tag_top mar_10">
<p id="search_tag"> <span id="type_all" class="selected" οnclick="set_type('all')">全部</span> {php $types = include PHPCMS_ROOT.$MODULE['search']['path'].'include/type.inc.php';}
{loop $types $type $name} <span id="type_{$type}" οnclick="set_type('{$type}')">{$name}</span> {/loop} </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}-->
******************************中间部分代码太长 此处省略处理******************************
<!--{if isset($MODULE['link'])}-->
<h4><a href="{$MODULE[link][url]}"><img src="data: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>
<!--end right-->
</div>
<!--end main-->
页脚footer.html代码较少,如下:
Copy code
<div id="foot">
<a href="">网站首页</a>{tag_关于我们}<br />
<strong>{$PHPCMS['copyright']}</strong><br />
<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>
</div>
</body>
</html>
把三个部分代码放在一张页面里,就是一个完整页面模板了,说做就做吧,我把它放到单独的一个页面,方便讲解!从代码中可以看出,phpcms2008的模 板设计基本上是完全的DIV+CSS了,当然还引入jquery框架,广泛应用AJAX无刷新技术等等技术,撇开它们不说!!
上面我们把首页的header、index、footer放到一起,成为完整的首页模板了!但是显示双击显示的是乱七八糟的东西,还有乱码!别急,其实我 们看看上面的代码就知道原因了,
1、编码不对,当然显示乱码;
2、无法调用css文件和风格图片,当然乱七八糟;
3,重要的JS调用文件没有,无法显示相关效果;
4、网页很多php语言代码,特别是导航部分,没有运行环境,效果就不会有了;
。。。。。。
好了,针对以上问题,为了把后台首页模板还原成前台访问的样式效果,我们动手注意解决吧(所有代码请对照一楼)
一、官方模板中的网页编码定义如下:
Copy code
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
{CHARSET}是只有phpcms才会识别的变量标签,我们把它改成“GBK”,这样就解决乱码问题了,完整代码如下:
Copy code
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
二、为了看效果,我们把下面的代码
Copy code
<meta content="{$head[keywords]}" name="keywords" />
<meta content="{$head[description]}" name="description" />
改为:
Copy code
<meta content="酷扑工作室——PHPCMS支持团队" name="keywords" />
<meta content="酷扑工作室——PHPCMS支持团队" name="description" />
当然,不该也行,只是为了看效果,这都无所谓。。
三、因为我们调用的css样式和风格样式图片都是相对于本文件夹的相对地址,所以去掉header.html代码里一行代码,图片才能正常显示,不然则会 显示乱码的,####这点很重要!####,
所以把<base href="{SITE_URL}" />去掉或者改为<!--<base href="{SITE_URL}" />-->,代码就失效了!!
反过来,大家在制作模板的时候,这个代码不能丢了哦,一定要加上。
四、为了还原默认模板样式,解剖2008版的官方默认模板,我把代码
Copy code
<link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />
改为下面的样式,
Copy code
<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="data:images/js/jquery.min.js"></script>
<script language="JavaScript" src="data:images/js/css.js"></script>
<script language="JavaScript" src="data:images/js/common.js"></script>
<script language="JavaScript" src="data:images/js/login.js"></script>
<script language="JavaScript" src="data:images/js/validator.js"></script>
差点忘记了,上面的所有代码涉及的的css文件,风格图片,请先分别复制到相应文件夹。否则,调用代码没意义啦!
至此,头部文件修改完毕!!!!
图片:
'700')this.width='700';if(this.height>'700')this.height='700';" border=0>
看看Index.html部分代码有这么一段,好像是php语言的if条件语句,我也不太懂,只有放在php环境中,才可以执行语句!:
Copy code
{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}
我们把它改成前台显示的具体代码,如下:
Copy code
<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版要更人性化 的多!!是吧 ^_^
下面的这一部分仍然是默认首页模板的后台代码:
Copy code
<div class="f_l">
<div id="div_login" style="display:block">
<form action="{$MODULE[member][url]}login.php" method="post" name="login" οnsubmit="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="注册" οnclick="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>
PHPCMS2008模板教程—官方默认模板完全解读及制作思路相关推荐
- 如何在PowerPoint中将自定义模板设置为默认模板
Microsoft PowerPoint allows users to set a custom template as the default theme when creating a new ...
- C++(11):模板函数的默认模板参数
C++11支持在模板函数中使用默认的模板参数 #include <iostream> #include <typeinfo> using namespace std;templ ...
- html模板改成织梦模板教程,织梦模板修改及使用详细视频教程
今天小编为大家带来织梦模板使用修改及使用详细视频教程. 相信有很多小白都有体会到,安装好织梦,进入后台一脸懵,完全不会使用,今天我给大家亲身录制的个视频教程. 安装方法: 安装dede模板方法有多种, ...
- 从零开始学DedeCms模板,模板教程,从此模板制作不求人
DedeCms真是一个非常棒的系统,我从接触到现在一年时间再也没有理会其他CMS系统,推荐刚开始建站或准备换程序的朋友使用DedeCms系统.就像柏拉图说的:利剑已出,天下必乱,选择DedeCms V ...
- php smarty模板教程,PHP smarty模板入门教程
include("./www.111com.net/libs/smarty.class.php"); //包含smarty类文件 $smarty = new smarty(); ...
- PHPCMS2008模板教程 默认模板解析及模板制作教程
PHPCMS2008官方默认模板解读 首先打开后台,官方默认模板的存放位置,存放在 ./templates/default/phpcms/ 目录里,从这里我们就知道如果我们要新那建一套模板应该怎么做了 ...
- C++11 函数模板的默认模板参数
1.函数模板默认模板参数简介 函数模板与类模板在 C++98 一起被引入,因种种原因,类模板可以拥有默认模板参数,而函数模板不可以.从 C++11 开始,这个限制被解除了,即函数模板同样可以拥有默认模 ...
- 前嗅ForeSpider教程:创建模板
今天,小编为大家带来的教程是:如何在前嗅ForeSpider中创建模板.主要内容有:模板的概念,模板的配置方式,模板的高级选项,具体内容如下: 一,模板的概念 模板列表的层级相当于网页跳转的层级.模板 ...
- pycharm python 模板配置_windows下pycharm安装、创建文件、配置默认模板
本文为大家分享了windows下pycharm安装.创建文件.配置默认模板的具体步骤,供大家参考,具体内容如下 步骤: 下包 -->安装-->创建文件-->定制模板 一.下包 官方地 ...
最新文章
- swift_013(Swift 的运算符)
- matlab中rowset什么意思,没什么用的matlab代码1
- java 调用 go_实践总结:在 Java 中调用 Go 代码
- 【java】dubbo基础学习
- 论文Express | 英伟达最新:多模态无监督图像迁移网络框架
- inDesign教程,如何创建具有吸引力的边注栏?
- VB编程:GetSetting控制软件试用期-56
- python微信语音转发方法_【高逼格技巧系列】如何在微信中转发语音
- Turbo码 - 接近完美的编码
- java 分布式 定时任务_Java中实现分布式定时任务的方法
- PHP-SDK实现支付宝 付款码支付、刷脸支付
- Codeforces 1077b Disturbed People
- 【Applied Algebra】求解布尔方程(Boolean Equations)的4个高效baseline算法
- EndNote: layout can not be formatted because it is no longer open
- whale 帷幄:crm客户管理营销系统全称是什么
- 熊猫烧香.威金.落雪.SXS.ARP.网络执法管.AUTORUN.INF等高危病毒清除
- Python的七大就业方向,小白适合哪个方向?学了Python能干什么?
- Axure的交互事件
- Java 学习 - 全文索引 - Lucene
- 注解类型异常:@ComponentScan ANNOTATION type filter requires an annotation typ