PHP学习资料.docx

很显然，2008版官方精简了模板的设计代码，可谓完全的DIV+CSS，到底08版的默认模板是什么样子？代码又有什么变化？今天，我们来一起看看吧！如果你能看完看懂这篇冗长的文章，相信你对phpcms2008的模板也就不再陌生！可以说，很快你就可以自己做模板了！好了，闲话少说，我们开始吧！今天是第一讲！第一讲：PHPCMS2008官方默认模板完全解读及模板制作思路PHPCMS支持团队【酷扑工作室】首先大家打开后台，看一下官方默认模板的存放位置，其实都是存放在 ./templates/default/phpcms/ 目录里，这下我们清楚了，如图附件截图：第一反应，看看header.html、index.html、footer.html 三个模板文件。这可是模板的灵魂啊！完整页面模板就是header+index+footer了，大家都知道的！代码分别如下：header.html部分：Copy code$headtitleif isset($MODULEsearch)php $types = include PHPCMS_ROOT.$MODULEsearchpath.include/type.inc.php;全部loop $types $k $name$name/loop/if用户名：密码：，会员中心 |退出登录首页tag_一级栏目专题问吧搜索默认Index.html部分模板代码如下：Copy code*中间部分代码太长此处省略处理*function set_type(type)$(#type).val(type);$(#search_tagspan).removeClass(selected);$(#type_+type).addClass(selected); 全部 php $types = include PHPCMS_ROOT.$MODULEsearchpath.include/type.inc.php;loop $types $type $name $name /loop *中间部分代码太长此处省略处理*友情链接 tag_logo链接 tag_文字链接 页脚footer.html代码较少，如下：Copy code网站首页tag_关于我们$PHPCMScopyright$PHPCMSicpnoPowered by Phpcms 2008把三个部分代码放在一张页面里，就是一个完整页面模板了，说做就做吧，我把它放到单独的一个页面，方便讲解！从代码中可以看出，phpcms2008的模板设计基本上是完全的DIV+CSS了，当然还引入jquery框架，广泛应用AJAX无刷新技术等等技术，撇开它们不说！上面我们把首页的header、index、footer放到一起，成为完整的首页模板了！但是显示双击显示的是乱七八糟的东西，还有乱码！别急，其实我们看看上面的代码就知道原因了，1、编码不对，当然显示乱码；2、无法调用css文件和风格图片，当然乱七八糟；3，重要的JS调用文件没有，无法显示相关效果；4、网页很多php语言代码，特别是导航部分，没有运行环境，效果就不会有了；。好了，针对以上问题，为了把后台首页模板还原成前台访问的样式效果，我们动手注意解决吧（所有代码请对照一楼）一、官方模板中的网页编码定义如下：Copy codeCHARSET是只有phpcms才会识别的变量标签，我们把它改成“GBK”，这样就解决乱码问题了，完整代码如下：Copy code二、为了看效果，我们把下面的代码Copy code改为：Copy code当然，不该也行，只是为了看效果，这都无所谓。三、因为我们调用的css样式和风格样式图片都是相对于本文件夹的相对地址，所以去掉header.html代码里一行代码，图片才能正常显示，不然则会显示乱码的，#这点很重要！#,所以把去掉或者改为!-，代码就失效了！反过来，大家在制作模板的时候，这个代码不能丢了哦，一定要加上。四、为了还原默认模板样式，解剖2008版的官方默认模板，我把代码Copy code改为下面的样式，Copy code无非就是直接调用本文件的相对地址css样式文件，这样css才会起作用！五、下面几个JS文件关系到一些重要调用，所以要从程序文件夹中复制过来！放到相应文件夹中，差点忘记了，上面的所有代码涉及的的css文件，风格图片，请先分别复制到相应文件夹。否则，调用代码没意义啦！至此，头部文件修改完毕！看看Index.html部分代码有这么一段，好像是php语言的if条件语句，我也不太懂，只有放在php环境中，才可以执行语句！：Copy codeif isset($MODULEsearch)php $types = include PHPCMS_ROOT.$MODULEsearchpath.include/type.inc.php;全部loop $types $k $name$name/loop/if我们把它改成前台显示的具体代码，如下：Copy code全部资讯图片下载信息问吧这样，通过调用类“f_r”，就能显示搜索框了。呵呵说明一下：这种从官方模板到普通模板的解读过程其实就是我们制作模板的逆向过程！所以，我可以很自信的对大家说，读懂了我这篇文章，你就可以随心所欲的制作你想要的任何风格模板了！完全的DIV+CSS设计，给我们制作模板带来了很多方便，2007版的模板还是有tb嵌套的，很不好，2008版要更人性化的多！是吧 _ 下面的这一部分仍然是默认首页模板的后台代码：Copy code用户名：密码：，会员中心 |退出登录为了便于大家对比照看代码区别和差异，我就不一一修改它了，把前台显示代码放在下面，大家看看到底是哪里代码改变，哪里没有改变！更有学习价值_ 当然此段代码是否替换不影响前台的正常显示，在这里我替换成下面的，主要是为了让大家看看官方代码和前台显示代码的差异！以便大家学习:-)#替换的代码如下：Copy code用户名：密码：，会员中心 |退出登录至此，我通过对以上代码进行简单的替换，首页已经完全可以显示了，index.html中其余的代码和footer.html里的代码没有什么可以研究的，非常简单！所以就不一一冗述了！友情提醒：大家打开一张漂亮网页时，要有右键查看源代码的习惯，大家觉得下面的代码与你查看到的一些网页的源代码有什么不同吗？其实就是都很简单的，无非就是DIV+CSS框架风格设计，再把一些源代码中的常量替换成官方的模板制作的变量而已！具体可参见官方“模板常用变量含义”和“模板语法规则”等帮助文档！好了！这样就是典型的phpcms2008默认首页模板的解剖过程！图片：现在我总结一下phpcms2008模板制作的方法：第一步：前期策划：包括确定网站方向；布局和色调选用；制作网站布局图【我给大家提供了我以前设计的一张网站门户风格首页布局图，参见附件截图】第二步：制作和搜罗建站素材（网上看到好的素材要养成收藏的习惯_），DIV+CSS设计网站布局和风格（参照布局图效率极高哦，所以设计大家一定要制作一张布局图_）第三步：参照官方风格的header、footer和各个频道的index.html模板代码，添加官方的常量标签，一定要遵循代码规则啊！有些代码和JS调用一定要添加到你的制作模板中（特别是之间的css调用和JS调用代码），相应的调用文件也别忘了一定要复制到你自己的制作文件夹的相应位置。第四步：上面一步是添加官方变量标签，这一步就看你的水平了，发挥你的想象了和制作水平，添加你想要的效果吧，比如什么导航啊，图文混排啊，TAB选项卡啊等，效果自己定！我不多说_第五步：差不多了吧！给每个想要显示内容的地方添加相应的调用标签吧！然后看看还有什么显示问题没有，最好测试保证IE6.IE7、FIREFOX等主流浏览器能兼容你的模板哦第六步：优化代码，整合