好不容易抽点时间来写教程:
今天讲制作准备:
硬件方面:
我们需要一台能够流常运行制作软件的机子,内存256m以上(废话,只有我采用这么烂的机子)
软件方面:
我们需要如下软件:
Dreamwaver 用来编辑html页面
FireWorks或者Photoshop,用来做最初的模板预览图和切片导出html文件。
Flash(如果你需要你的网页更炫,需要用到这个dd哦,顺便缅怀一下出网页三剑客的MM公司~~)
当我们安装解压缩并安装好phpcms3.0后,我们可以看到这样的一个文件夹templates,他就是我们要操作的对象了。
第一步,认识模板文件
打开templates目录,会发现下面由一个文件夹default,这个用来放置默认的模板文件,一个是templateprojectnames.php,这个文件是用来记录方案的名称的文件。
我们打开default文件夹会看到这样的一些文件夹,从今天开始,我们就每一个文件夹模板的制作开始
当我们导出自己的html首页文件效果入www.qq.com所示,我们可以观察一下
顶部这些东西是每个页面通用的,我们可以把他做成header.html
新建一个文件夹,例如新建一个文件夹叫qq,这个就是我们自己制作的模板方案的文件夹
我们先在这个文件夹里面建立一个子文件夹叫phpcms,或者叫index,这个文件夹用来存放前面我们提到的哪些通用的模板,叫什么名字是无所谓的,但是记住,所有的文件夹名字都只能是英文字母或者数字,不能是中文
2.header.html文件的建立
我们把我们刚才自己切片要做头部文件的html复制进来,为了让人一幕了然,我们还是命名为header.html
打开这个header.html文件,我们需要按照phpcms的方式来插入代码
打开官方默认模板的header.html文件,我们会发现下面这样的代码
CODE:
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}">
<title>{$meta_title}-{$_PHPCMS['meta_title']}-{$_PHPCMS['sitename']}</title>
<meta name="keywords" content="{$meta_keywords}">
<meta name="description" content="{$meta_description}">
<meta name="generator" content="Phpcms {$version}">
<link href=http://www.phpcms.cn/"{$skindir}/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
var mymoban_path = "{PHPCMS_PATH}"
//-->
</script>
<script language="javascript" src=http://www.phpcms.cn/"{PHPCMS_PATH}include/js/common.js"></script>
<SCRIPT LANGUAGE="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}ads/ads.php?</head>
<body {if $cat['enableprotect']}oncontextmenu='return false' ondragstart='return false' on selectstart ='return false' on select='document.selection.empty()' on copy='document.selection.empty()' onbeforecopy='return false'{/if}>
****************
<table w <tr>
<td height="10"></td>
</tr>
</table>
<link href=http://www.phpcms.cn/"{$skindir}/style.css" rel="stylesheet" type="text/css"> 这一行是用来定义我们模板制作过程中使用到的样式表的路径,当然你也可以直接将样式写在html文件中,不过这样会增大文件的大小,而且不利于css的重复使用。<meta http-equiv="Content-Type" content="text/html; charset={$charset}">
<title>{$meta_title}-{$_PHPCMS['meta_title']}-{$_PHPCMS['sitename']}</title>
<meta name="keywords" content="{$meta_keywords}">
<meta name="description" content="{$meta_description}">
<meta name="generator" content="Phpcms {$version}">
<link href=http://www.phpcms.cn/"{$skindir}/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
var mymoban_path = "{PHPCMS_PATH}"
//-->
</script>
<script language="javascript" src=http://www.phpcms.cn/"{PHPCMS_PATH}include/js/common.js"></script>
<SCRIPT LANGUAGE="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}ads/ads.php?</head>
<body {if $cat['enableprotect']}oncontextmenu='return false' ondragstart='return false' on selectstart ='return false' on select='document.selection.empty()' on copy='document.selection.empty()' onbeforecopy='return false'{/if}>
****************
<table w <tr>
<td height="10"></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}ads/ads.php?
<body {if $cat['enableprotect']}oncontextmenu='return false' ondragstart='return false' on selectstart ='return false' on select='document.selection.empty()' on copy='document.selection.empty()' onbeforecopy='return false'{/if}>
这一行代码是用来保护你的页面文件,如果你后台选择了保护,这一行代码就会起作用。
以<SCRIPT LANGUAGE="JavaScript"开头的都是js文件
在头部中,分别使用了
<script language="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}include/js/time.js"></script> 时间
<SCRIPT LANGUAGE="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}include/js/login.js"></SCRIPT> 登录框
<SCRIPT LANGUAGE="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}ads/ads.php?我们可以在自己需要的地方调用这些js代码
我们会发现,如果我们使用了默认的图片路径为images/1.gif那么我们生成的网页文件就不能正确显示图片,其实
这是因为生成html的时候,路径不一致所导致的,那么怎么解决呢?
我们需要使用DW的查找替换功能,将自己图片原来所有的形如“images/1.gif”换成“"{$skindir}/imahes/1.gif”这样的路径
这样,我们的图片路径就不会出问题了
请记住,phpcms模板里面所有的if开头的语句,都是判断语句,loop语句都是循环语句,请大家在插入模板的时候,记得写完整他们的大括号{}
{if $channel <a href=http://www.phpcms.cn/"{$channelurl}rss.php?cat {/if}
这一句是用来判断是否属于某个栏目,如果是的话,显示rss链接
{loop $_CHANNEL $channel}
<li {if $channel
这一句,是用来显示所有的频道名称
我们可以将其简化成
{loop $_CHANNEL $channel}
<a href="{$channel['channelurl']}" class="white">{$channel['channelname']}</a>
{/loop}
<!--频道下属栏目列表-->
{if $channel <table w <tr>
<td class="submenu">
<a href="{$_CHANNEL[$channel{loop get_childcat(0) $cat}
| <a href="{$cat['caturl']}" class="white">{$cat['catname']}</a>
{/loop}
| <a href="{PHPCMS_PATH}{$_CHA[channeldir]}/special/" class="white">专题</a>
| <a href="{PHPCMS_PATH}guestbook/?channel| <a href=http://www.phpcms.cn/"{PHPCMS_PATH}{$_CHA[channeldir]}/search.php" class="white">搜索</a>
</td>
</tr>
</table>
{/if}
这一句,用来显示当前频道下面的栏目名称
其中{loop get_childcat(0) $cat} 这个函数是用来提取当前的以及栏目的
我们可以将其改进成
{loop get_childcat(1,0) $cat}取文章频道所有子栏目
{loop get_childcat(2,0) $cat}取图片频道所有子栏目
其中1.2表示频道的
我们可以在自己需要的地方,调用这些代码
3.footer.html的建立
我们打开自己制作的footer.html模板后,可以将下面调用代码插入自己想要让他显示的地方
{$_PHPCMS['copyright']} 自己后台设定的版权
我们打开index.html文件,会发现头部和底部有这样的代码
{template 'phpcms','header'}
{template 'phpcms','footer'}
这两句是对于头部和尾部的调用,phpcms表示的是他们的文件夹名称,也就是我们刚才在方案文件夹QQ先面建立的子文件夹phpcms或者(index) 后面的header和footer是模板的头尾文件的名称,如果我们需要实现不同页面不同的头尾文件,那么,我们可以将这个改成
{template 'phpcms','artheader'}
{template 'phpcms','artfooter'} 其中artheader和artfooter是我们为文章频道单独建立的头尾文件,当然了,这个文件也是需要存在在phpcms这个文件夹中的。
index文件里面涉及到的js代码
<!--搜索框-->
<script language="Javascript" src=http://www.phpcms.cn/"{PHPCMS_PATH}data/js/search.js"></script> 搜索框
<SCRIPT LANGUAGE="JavaScript" src=http://www.phpcms.cn/"{PHPCMS_PATH}ads/ads.php?
index里面涉及到的标签
在index文件里面我们可以看到这样的以{}开头结尾的代码,这就是phpcms的标签了,phpcms的标签我们可以从后台相应的地方选择自己想要的效果插入,
{loop $cha_articles $i $cha}{/loop} 文章顶级显示频道的循环
{loop $cha_pictures $i $cha}{/loop}图片顶级显示频道的循环
{loop $cha_downs $i $cha}{/loop}下载顶级显示频道的循环
使用这些循环,是可以实现调用每个频道需要在首页显示的栏目名称及文章列表的
其他的标签
{$user_itemstop(10)} top10用户
{$voteshow(0,0)} 网站的全站投票
{$linklist(0,0,1,0,10,2)} 友情链接的图片链接
{$linklist(0,0,0,0,10,2)} 友情链接的文字链接









