手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网站运营>建站经验>列表

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

来源:互联网 作者:west263.com 时间:2008-02-21
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!
菠萝教你做模板之二-制作准备及网站首页的制作

好不容易抽点时间来写教程:
今天讲制作准备:
硬件方面:
我们需要一台能够流常运行制作软件的机子,内存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: [Copy to clipboard] <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="{$skindir}/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
var phpcms_path = "{PHPCMS_PATH}"
//-->
</script>
<script language="javascript" src="{PHPCMS_PATH}include/js/common.js"></script>
<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}ads/ads.php?id=3"></SCRIPT>
</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 width="980" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="10"></td>
</tr>
</table><link href="{$skindir}/style.css" rel="stylesheet" type="text/css"> 这一行是用来定义我们模板制作过程中使用到的样式表的路径,当然你也可以直接将样式写在html文件中,不过这样会增大文件的大小,而且不利于css的重复使用。

<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}ads/ads.php?id=3"></SCRIPT> 这一行是调用的广告代码,可以从后台编辑得到直接插入

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!