当前位置:PHPCMS首页 >> 模板制作 >> 菠萝教你做模板之二-制作准备及网站首页的制作

菠萝教你做模板之二-制作准备及网站首页的制作

2006-12-03 11:00:23  来源:
 
菠萝教你做模板之二-制作准备及网站首页的制作

好不容易抽点时间来写教程:
今天讲制作准备:
硬件方面:
我们需要一台能够流常运行制作软件的机子,内存256m以上(废话,只有我采用这么烂的机子)
软件方面:
我们需要如下软件:
Dreamwaver 用来编辑html页面
FireWorks或者Photoshop,用来做最初的模板预览图和切片导出html文件。
Flash(如果你需要你的网页更炫,需要用到这个dd哦,顺便缅怀一下出网页三剑客的MM公司~~)

当我们安装解压缩并安装好phpcms3.0后,我们可以看到这样的一个文件夹templates,他就是我们要操作的对象了。

第一步,认识模板文件

打开templates目录,会发现下面由一个文件夹default,这个用来放置默认的模板文件,一个是templateprojectnames.php,这个文件是用来记录方案的名称的文件。

我们打开default文件夹会看到这样的一些文件夹,从今天开始,我们就每一个文件夹模板的制作开始


图片附件: Snap1.jpg
(2006-7-13 10:57 PM, 46.94 K)

图片附件: Snap2.jpg
(2006-7-13 10:57 PM, 82.18 K)

网站首页的制作


当我们导出自己的html首页文件效果入www.qq.com所示,我们可以观察一下
顶部这些东西是每个页面通用的,我们可以把他做成header.html


图片附件: Snap1.jpg (2006-7-13 11:08 PM, 90.67 K)

图片附件: Snap2.jpg (2006-7-13 11:08 PM, 85.94 K)

1.模板方案的建立
新建一个文件夹,例如新建一个文件夹叫qq,这个就是我们自己制作的模板方案的文件夹

我们先在这个文件夹里面建立一个子文件夹叫phpcms,或者叫index,这个文件夹用来存放前面我们提到的哪些通用的模板,叫什么名字是无所谓的,但是记住,所有的文件夹名字都只能是英文字母或者数字,不能是中文

2.header.html文件的建立
我们把我们刚才自己切片要做头部文件的html复制进来,为了让人一幕了然,我们还是命名为header.html

打开这个header.html文件,我们需要按照phpcms的方式来插入代码

打开官方默认模板的header.html文件,我们会发现下面这样的代码

<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的重复使用。

<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']}  自己后台设定的版权


图片附件: Snap1.jpg (2006-7-13 11:38 PM, 248.71 K)

图片附件: Snap2.jpg (2006-7-13 11:38 PM, 245.33 K)

4.网站首页index.html的建立
我们打开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的标签我们可以从后台相应的地方选择自己想要的效果插入,


图片附件: Snap1.jpg (2006-7-14 01:50 PM, 373.57 K)

图片附件: Snap2.jpg (2006-7-14 01:50 PM, 302.43 K)

index中涉及到的循环

{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)} 友情链接的文字链接


责任编辑:
0
顶一下
0
踩一下
【 加入收藏 】 【 本文链接 】 【 邮件推荐 】 【 打印本页 】
 >> Google提供的广告
 >> 图说天下
 >> 文字广告内容
1826网络直销平台 免费下载Firefox拒绝病毒的浏览器 四平风采影视 专业美工设计,网页模板定制,公司网站制作。

关注热点 >> 

• 菠萝教你做模板之二-制作准...

-- 菠萝教你做模板之二-制作准备及网站首页的制作好不容易抽点时间来...

• 模板的存放规则

-- 

• 如何让不同的文章频道使用不...

--