制作准备及网站首页的制作
点击次数：32 次 发布日期：2008-11-16 10:36:44 作者：源代码网
|
菠萝教你做模板之二－制作准备及网站首页的制作 好不容易抽点时间来写教程： 今天讲制作准备： 硬件方面： 我们需要一台能够流常运行制作软件的机子，内存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) 我们首先从phpcms这个文件夹开始 图片附件: Snap2.jpg (2006-7-13 10:57 PM, 82.18 K) 这个文件夹里面存放的网页模板用途如下： 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) 底部这些东西是通用的，我们可以把他做成footer.html文件 图片附件: Snap2.jpg (2006-7-13 11:08 PM, 85.94 K) 其余的部分，就可以做成默认模板的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> <link href="{$skindir}/style.css" rel="stylesheet" type="text/css"> 这一行是用来定义我们模板制作过程中使用到的样式表的路径，当然你也可以直接将样式写在html文件中，不过这样会增大文件的大小，而且不利于css的重复使用。<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="http://www.admin5.com/article/20070410/{PHPCMS_PATH}include/js/common.js"></script> <SCRIPT LANGUAGE="JavaScript" src="http://www.admin5.com/article/20070410/{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> <SCRIPT LANGUAGE="JavaScript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}ads/ads.php?id=3"></SCRIPT> 这一行是调用的广告代码，可以从后台编辑得到直接插入 <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.admin5.com/article/20070410/{PHPCMS_PATH}include/js/time.js"></script> 时间 <SCRIPT LANGUAGE="JavaScript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}include/js/login.js"></SCRIPT> 登录框 <SCRIPT LANGUAGE="JavaScript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}ads/ads.php?id=1"></SCRIPT> 广告代码等 我们可以在自己需要的地方调用这些js代码 我们会发现，如果我们使用了默认的图片路径为images/1.gif那么我们生成的网页文件就不能正确显示图片，其实 这是因为生成html的时候，路径不一致所导致的，那么怎么解决呢？ 我们需要使用DW的查找替换功能，将自己图片原来所有的形如“images/1.gif”换成“"{$skindir}/imahes/1.gif”这样的路径 这样，我们的图片路径就不会出问题了 请记住，phpcms模板里面所有的if开头的语句，都是判断语句，loop语句都是循环语句，请大家在插入模板的时候，记得写完整他们的大括号｛｝ {if $channelid} <a href="{$channelurl}rss.php?catid={$catid}"><img src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}images/rss.gif" border="0"/></a> {/if} 这一句是用来判断是否属于某个栏目，如果是的话，显示rss链接 {loop $_CHANNEL $channel} <li {if $channelid==$channel[channelid]}id="Tabi" class="Selected"{/if}><a href="{$channel["channelurl"]}" class="white">{$channel["channelname"]}</a></li>{/loop} 这一句，是用来显示所有的频道名称 我们可以将其简化成 {loop $_CHANNEL $channel} <a href="{$channel["channelurl"]}" class="white">{$channel["channelname"]}</a> {/loop} <!--频道下属栏目列表--> {if $channelid && $mod==$_CHA["module"]} <table width="100%" align="center" cellpadding="0" cellspacing="0"> <tr> <td class="submenu"> <a href="{$_CHANNEL[$channelid][channelurl]}" class="white"> {$_CHA[channelname]}首页</a> {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/?channelid={$channelid}" class="white">留言本</a> | <a href="{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表示频道的id 0表示取以及栏目 我们可以在自己需要的地方，调用这些代码 3.footer.html的建立 我们打开自己制作的footer.html模板后，可以将下面调用代码插入自己想要让他显示的地方 {$_PHPCMS["copyright"]} 自己后台设定的版权 图片附件: Snap1.jpg (2006-7-13 11:38 PM, 248.71 K) {$showdefinedpage(0)}<a href="{PHPCMS_PATH}guestbook/?channelid={$channelid}">留言本</a> 自己后台定义的单网页 图片附件: Snap2.jpg (2006-7-13 11:38 PM, 245.33 K) Processed in {$debuginfo[time]} second(s), {$debuginfo[queries]} queries<!--{if $gzipcompress}-->, Gzip enabled 显示运行信息 <Script Language=Javascript Src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}include/js/Std_StranJF.Js"></Script> 简繁体转换代码，如果你的网页没有使用这个功能，这个js文件可以去掉 {$copyright()} phpcms的版权，强烈建议大家保留 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.admin5.com/article/20070410/{PHPCMS_PATH}data/js/search.js"></script> 搜索框 <SCRIPT LANGUAGE="JavaScript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}ads/ads.php?id=2"></SCRIPT> banner广告 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) phpcms的标签有3种 短标签 长标签 js调用 标签调用： 优点：在调用页产生html，有利于搜索收录，下载速度快 缺点：如果您设置了生成html，html生成速度慢，需要经常更新页面才能保持最新，不能跨站或者跨频道调用 短标签和长标签有什么区别？ 1、短标签更加简短，在进行模板编辑的时候不会让模板变形，通过短标签的英文名很容易知道该标签的意义； 2、短标签一旦插入到模板就可以通过后台修改标签参数来控制前台显示了； 3、短标签和后台有关联，因此不能在后台删除正在使用的短标签，否则会导致短标签无法调出数据并显示空白。 4、长标签是phpcms 2.4版本开始采用的标签方式，3.0仍然支持这种标签。 5、长标签插入模板后如果要修改参数则需要找到模板中该标签位置，并找到对应的参数进行修改，没有短标签方便。 建议：如果您希望更好地控制标签参数，请使用短标签；如果您打算发布您的模板，请使用长标签（因为短标签还和标签数据关联，不方便发布） JS调用： 优点：可以跨站调用，自动更新，html生成速度快 缺点：搜索收录差，速度相对html要慢一点（相差不大） 我们的建议： 在首页、栏目首页、专题首页使用标签调用； 栏目信息列表、信息具体页中的推荐信息、热点信息等使用JS调用 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)} 友情链接的文字链接 源代码网供稿. |
