phpcms2008模板制作教程.doc

首先打开后台，官方默认模板的存放位置，存放在 ./templates/default/phpcms/ 目录里，从这里我们就知道如果我们要新那建一套模板应该怎么做了： 方法：把全套模板放在一个文件夹内，如：W3ZZ，然后上传至templates下面，进入后台，我们在方案管理处就可以看到我们刚刚上传的W3ZZ了，把该方案设置成默认方案，更新模板缓存，然后更新首页就完全是我们W3ZZ里面的模板了，就这样简单 这样就是我们W3ZZ下面的模板了 然后我们进入模板管理 这里就是我们W3ZZ文件夹下面PHPCMS里的所有模板，也就是整站核心的模板，包括首页，栏目首页，列表页，内容页，标签模板 接下来看一下header.html、index.html、footer.html 三个模板文件。这是首页模板的灵魂！不仅是首页，其它页面的头部文件和页脚文件也是header.html，footer.html这个不用我说了，因为看看模板中的template phpcms,header和template phpcms,footer说一下这三个参数的含义： 第一个template,是整个系统的模板文件夹，也就是前面讲的为什么要传到templates下面的原因，因为系统定义的模板文件夹就为templates,也就是这里的template;第二个phpcms，就是目前你的模板所在phpcms文件夹名称，如果你要新建一个头部，只要在phpcms里面新建一个文件，如：header_w3zz.html，然后用template phpcms,header_w3zz就可以了，这样第三个header这个就明白了，是要包含的模板文件的名称，footer这个就一样了。 完整页面模板是header+index+footer，有了这三部分，首页模板就可以说结构完整了。 对应2008的默认模板看：（因为都有默认的，所以就不贴出来了，占地方，也不方便看） 现在我们开始分析header.html的构造 1、 w3c国际标准 2、 这里定义字符编码，也就是我们下载的时候是GBK还是UTF-8的，这个CHARSET就是编码变量，这个你在安装的时候就已经确定，所以以后的任何操作都要在该编码下操作，否则就会出现乱码，也就是说，出现乱码这些的原因就在于此。 3、$headtitle 这个就是网站名称-网站标题，在后台系统设置基本设置网站名称-网站标题，在首页会两个都显示出来，其它的页面就只显示网站名称 4、 在后台系统设置基本设置网页关键词 5、 在后台系统设置基本设置网页描述 6、 这是全部定义的，就相当于2007里面的PHPCMS_PATH,同时2008也用。但是在这里定义之后你的模板里面的调用任何文件都不用定义PHPCMS_PATH了，如：我要调用images下面的一个图片，你只要写这样就好。SITE_URL这个就是你网站的在后台系统设置基本设置网站地址 7、 这个效果就是: 就是网站地址前面的标识，也就调用images/favicon.ico文件，这个可以制作，有制作工具 8、 引用全部CSS文件，即templates/default/skins/default下面的CSS文件SKIN_PATH就是templates/default/skins/default这个地址，$mod是当前模型的变量，如：当前是phpcms那就说明CSS文件是phpcms.css 9、 网站标题，即订阅的地址 10、 _fcksavedurl=data/config.js 配置js文件 框架js文件 cssjs文件 配置js包括添加收藏夹，设置为首页 登陆js文件 cookie等的js文件 出现相对应的问题，首先检查这里的js是否调用 11、 页面载入的时候调用输出catid或者mod，所以说$catid和$mod即栏目ID和模型名称是全局变量 12、 if isset($MODULEsearch) php $types = cache_read(search_type.php); 全部 loop $types $k $name $name /loop /if 用户名： 密码： ，会员中心 | 退出登录 这就是网站首页顶站的搜索框和登陆框，以及登陆后的效果。 13、 首页 tag_一级栏目 头部里面的head包括logo,订阅标志，banner，导航 主体页面index.html代码解析1、第一个div 这个主要控制页面的宽度，框加显示，具体样式对应看CSS文件里面的#main这样就明白了，所以说看了模板就知道CSS样式是如何的了，这里就告诉需要修改样式的朋友，要修改哪里，先看那里的模板，然后对应的class或者id去相应的CSS里面查找，然后按着你的想法修改 同时我们也可以这样实现。如：我要把整个页面改成960px的宽度，这样改是最保险的，既不会影响全局的CSS，也不会影响其它页面的，我只是举个例子，其它的当然也可以这样改，这样操作最方便。 2、第二个div 这个一看就知道是main里面的left了，这就id是main_l，如果要修改可参考1的说明。这个div里面包含了幻灯片，搜索框，栏目首页列表。下面我们具体分析： 第一块：幻灯片 首页头条 首页推荐 tag_首页幻灯片 tag_网站首页头条 tag_网站首页推荐 这个里面有注释一看就懂了，里面也就是三个标签，tag_首页幻灯片tag_网站首页头条tag_网站首页推荐这个在PHPCMS2008里面分别通过三个推荐位置来实现的，幻灯片是首页焦点，首页头条就是首页头条，首页推荐就是首页推荐，这个一看标签设置就可以明白了，同样你也可以修改这些设置。标签设置的教程我以后补上。 第二块：搜索框 这里判断是否安装最搜索模块，安装了就显示，否则不显示 function set_type(type) $(#type).val(type); $(#search_tagspan).removeClass(selected); $(#type_+type).addClass(selected); 这里是用JSfunction调用全站搜索的分类，分类设置在模块管理全站搜索分类管理 全站搜索的表单里面包含name和动作action 全部 php $types = cache_read(search_type.php); 搜索条件的读取 如：图片，资讯，cache_read()读取缓存文件函数，只要保存在缓存文件里面的都可以直接用该函数读取。 loop $types $type $name $name /loop 循环出全站搜索的分类$types是在cache_read()函数读取缓存的时候将所有数据保存在该数组里面的,$type就是你在模块管理全站搜索类别管理的类别，如:news。$name是你想要保存的变量，可以自己定义，注意下面的输出是由这个变量控制的。 第三块：栏目列表 循环系统栏目，将从模块phpcms里面读取的栏目保存在$subcats 数组里面 一级栏目名称 $subcats 是从上步得到的数组，$catid 栏目id，$cat保存到的变量,下面调用此变量 更多 $catcatname 栏目名称 tag_首页图片循环标签 栏目里面图片循环标签，具体设置请自行查看后台，模板风格phpcms内容标签管理 这里进行延深一下 如果我想商品栏目显示不同的样式，全部显示图片： 就可以把这商品这个栏目给列出来，重新定义，首先找到该商品栏目的id,如我的是11 那我就把栏目列表这一块改为我下面的代码： if $catid=11 $catcatname tag_首页商品图片循环标签 else $catcatname tag_首页图片循环标签 tag_网站首页内容标签 /if 其它的不变，就把商品这一块的显示方式列出来了以此类推。其它的也就简单了。 3、第三个div 就是main的right右边部分 第一块：公告模块 安装公告模块之后就会显示 网站公告 tag_首页最新公告 公告标签，进入后台模板风格公告标签管理查看相应设置 这样区分出来的原因就是因为，根据一些人的要求不同，有些想把公告迁移到别处，这样就能完整的迁移，不然很容易出现迁移不完整，出现无法更新的结果。 第二块：推荐专题 推荐专题 tag_首页推荐专题 标签设置这些就不重复了，和第一块一样。 第三块：热门标签 热门标签 $rtag($rusetimes) 第四块：顶排行 DIGG 周排行 tag_DIGG周排行 第五块：问吧热点 问吧热点 tag_首页热点问题 第六块：网站调查 投票调查 第七块：邮件订阅 邮件订阅 E-mail： 第八块：友情链接 友情链接 tag_logo链接 tag_文字链接 这样划分出来，对一些朋友需要调换位置，或者加模块的就容易多了，因为这些都是一个个整体，如果你操作不对，让它不完整了，这样最容易导致更新不了首页。所以确保结构的完整很重要。默认模板footer.html的分析 整个footer.html在这个div里面 网站首页tag_关于我们 | 网站地图 网站页脚关于我们的标签调用，请自行查看：后台模板风格phpcms内容标签管理tag_关于我们网站地图：后台系统设置系统工具网站地图 $PHPCMScopyright 版权 后台系统设置网站配置基本信息版权信息 后台系统设置网站配置扩展设置开启了之后就显示些内容，包括QQ MSN SKYPE 阿里旺旺（淘宝版）阿里旺旺（贸易通版） include CACHE_PATH.tm.html 调用生成的缓存文件,如果你有删除缓存文件，就不会显示，你需要显示就去扩展设置这里提交一下就OK了，不然，会报错的！ $PHPCMSicpno 网站备案信息显示 Powered by Phpcms 2008 版权信息phpcms2008 制作模板思路 第一、网站策划：包括搜集建站素材 确定网站类型；大体布局和主体色调选用；制作网站效果图。 直接运用PS做出效果，然后切图，这是最关键一步。这里PS效果图出来了，你的网站也就大致出来了。 在帖尾提供一个PS效果图。以前做过的一个网站首页效果图。（网上看到好的素材要收藏，以后不说用，至少可以给你提供好的思路及想法） 第二：制作，DIV+CSS设计网站布局和风格参照第一步设计出来的效果图运用div+css写布局，提高你的建站速率。在你写div+css有些内容你可以运用tag_标签名称占位，这样为你以后添加标签又省了一些事情，而且让你明白了哪些地方放什么东西。因为你对着效果图很清楚，以后就直接添加这些标签就OK。 第三：参照系统默认风格的header、footer和各个频道的index.html模板代码，添加标签，先运用系统默认的标签模板。有些JS调用一定要添加到你的制作模板中，基本的函数调用，一定要看明白，可以参考我上面对首页的分析，其它的页面大致一样。有些标签可以直接用系统默认的，你按着你的想法修改也可以。这样也同时节约资源 第四：这里你可以按照你的想法，制作标签模板，然后添加标签调用你的标签模板。这里就可以用到你收集到的好的样式了，你可以拿过来整合你的CSS，做出好的效果。比如什么导航，图文混排，TAB选项卡等，效果很多，在我们论坛上也能找到相应的教程。 第五：写好模板之后要检测IE6.IE7、FIREFOX等主流浏览器能兼容性。优化代码，整合模板文件，细节修改，把不必要的东西扔掉 。这样可以让你网站更完美。 建议模板制作顺序：也是我个人做模板的顺序，仅供参考 网站首页 文章栏目页文章列表页文章内容页 图片栏目页图片列表页图片内容页 下载栏目页下载列表页下载内容页 信息栏目页信息列表页信息内容页 产品栏目页产品列表页产品内容页 单网页 这个只是个人建议，不一定每一个站都要这么多内容，而且按照你的习惯来做。每个人都有自己的建站习惯。这个习惯很重要，就的更文明点是风格。当然也还有其它的步骤，比如整合这些，这里就不说了！上面我们把首页的header、index、footer放到一起，成为完整的首页模板了！但是显示双击显示的是乱七八糟的东西，还有乱码！别急，其实我们看看上面的代码就知道原因了，1、编码不对，当然显示乱码；2、无法调用css文件和风格图片，当然乱七八糟；3，重要的JS调用文件没有，无法显示相关效果；4、网页很多php语言代码，特别是导航部分，没有运行环境，效果就不会有了；。好了，针对以上问题，为了把后台首页模板还原成前台访问的样式效果，我们动手注意解决吧（所有代码请对照一楼）一、官方模板中的网页编码定义如下：CHARSET是只有phpcms才会识别的变量标签，我们把它改成“GBK”，这样就解决乱码问题了，完整代码如下：二、为了看效果，我们把下面的代码改为：当然，不该也行，只是为了看效果，这都无所谓。三、因为我们调用的css样式和风格样式图片都是相对于本文件夹的相对地址，所以去掉header.html代码里一行代码，图片才能正常显示，不然则会显示乱码的，#这点很重要！#,所以把去掉或者改为!-，代码就失效了！反过来，大家在制作模板的时候，这个代码不能丢了哦，一定要加上。四、为了还原默认模板样式，解剖2008版的官方默认模板，我把代码改为下面的样式，无非就是直接调用本文件的相对地址css样式文件，这样css才会起作用！五、下面几个JS文件关系到一些重要调用，所以要从程序文件夹中复制过来！放到相应文件夹中差点忘记了，上面的所有代码涉及的的css文件，风格图片，请先分别复制到相应文件夹。否则，调用代码没意义啦！至此，头部文件修改完毕！看看Index.html部分代码有这么一段，好像是php语言的if条件语句，我也不太懂，只有放在php环境中，才可以执行语句！：if isset($MODULEsearch)php $types = include PHPCMS_ROOT.$MODULEsearchpath.include/type.inc.php;全部loop $types $k $name$name/loop/if我们把它改成前台显示的具体代码，如下：全部资讯图片下载信息问吧这样，通过调用类“f_r”，就能显示搜索框了。呵呵说明一下：这种从官方模板到普通模板的解读过程其实就是我们制作模板的逆向过程！所以，我可以很自信的对大家说，读懂了我这篇文章，你就可以随心所欲的制作你想要的任何风格模板了！完全的DIV+CSS设计，给我们制作模板带来了很多方便，2007版的模板还是有tb嵌套的，很不好，2008版要更人性化的多！是吧 _ 下面的这一部分仍然是默认首页模板的后台代码：用户名：密码：，会员中心 |退出登录为了便于大家对比照看代码区别和差异，我就不一一修改它了，把前台显示代码放在下面，大家看看到底是哪里代码改变，哪里没有改变！更有学习价值_ 当然此段代码是否替换不影响前台的正常显示，在这里我替换成下面的，主要是为了让大家看看官方代码和前台显示代码的差异！以便大家学习:-)#替换的代码如下：用户名：密码：，会员中心 |退出登录至此，我通过对以上代码进行简单的替换，首页已经完全可以显示了，index.html中其余的代码和footer.html里的代码没有什么可以研究的，非常简单！所以就不一一冗述了！友情提醒：大家打开一张漂亮网页时，要有右键查看源代码的习惯，大家觉得下面的代码与你查看到的一些网页的源代码有什么不同吗？其实就是都很简单的，无非就是DI