制作准备及网站首页的制作

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

好不容易抽点时间来写教程：

今天讲制作准备：

硬件方面：

我们需要一台能够流常运行制作软件的机子，内存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)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"

我们首先从phpcms这个文件夹开始

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"

这个文件夹里面存放的网页模板用途如下：

footer.html 全站默认底部模板

header.html 全站默认顶部模板

index.html 默认全站首页模板

message.html 提示消息模板

search.html 默认全站搜索模板

tag_catlist.html默认栏目调用标签模板

tag_slidespecial.html 默认幻灯片展示模板

tag_slidespecial-js.html 默认js图片效果切换模板

tag_speciallist.html 默认专题列表模板

uppic.html 上传图片模板

templatenames.php 记录每个模板的名称

我们制作好一张效果预览图之后，需要使用FW或者PS之类的切片工具将它倒成html文件

这一步网上有很多教程，在此就不加赘述

网站首页的制作

当我们导出自己的html首页文件效果入www.qq.com所示，我们可以观察一下

顶部这些东西是每个页面通用的，我们可以把他做成header.html

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"

底部这些东西是通用的，我们可以把他做成footer.html文件

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

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"

其余的部分，就可以做成默认模板的index.html 首页文件

打开我们刚才自己制作的header.html模板，我们会发现里面的html就是自己切片产生的，这些并不是我们需要的，我们需要的，是phpcms自己认识的代码，那么我们现在就开始吧

1.模板方案的建立

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

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

2.header.html文件的建立

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

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

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

CODE: