php168 齐博cms 风格模版制作教程.doc

php168 齐博cms 风格模版制作教程2011-03-05 22:43以下风格教程是基础教程，如果你是风格高手可以选择性的浏览或者不看。（最下面附了官方风格制作教程）综 述鉴于有的朋友对php168的风格制作还不是很清楚。所以写了这个教程，说是教程其实只能算是我制作风格的一些心得体会，因为是我个人的心得体会必然有不完善的地方，哪里写得不好，还请高手指正。好的。废话少说，言归正传。PHP168的风格系统采用的是标签技术，标签技术的引入使风格的制作难度大大降低。降低了网站制作的门槛。有的朋友要问，标签是什么东西？我们打个比方来说明一下。比如你现在有一个漂亮的静态网页框架。你想把这个漂亮的静态网页框架作成动态网页，以方便内容的添加及更改。那么你只需要在要显示内容的地方添加诸如$label*的标签。然后再做简单的处理。那么原来漂亮但是简单的静态网页就会变成功能强大的动态网站。而且美丽依旧。简单的说，这个标签$label*就象一个旗帜，他插在网页的不同部位。我们可以用这个旗帜显示文章的列表。也可以用他来显示几行几列的图片列表。还可以用他来显示falsh，幻灯片图片，文字+部分内容列表等等。我们还可以用他来显示一些插件，比如：天气预报，搜索引擎，投票栏目等等。模板文件讲解上面我们简单的说了一下标签$label*。我们说他象一面旗帜，可以插在不同的位置显示不同的内容。那么我们有了旗帜，要往哪里放呢？下面我们来介绍一下插放这些标签的地方-网页模板文件。网页模板总的分为php168默认风格模板和自己制作的风格模板。他们都放在template文件夹下面。其中template/php168/为默认模板存放的地方。因为是默认的所以我们尽量不要改动他。主要的网页模板文件如下：Head.htm /网页模板头部Index.htm /网页模板中部Foot.htm /网页模板底部Css.htm /css风格控制内容显示模板bencandy.htm /文章bencandy_2.htm /论坛bencandy_3.htm /下载bencandy_4.htm /图库bencandy_5.htm /商城bencandy_7.htm /视频bencandy_8.htm /音乐bencandy_9.htm /FLASHbencandy_11.htm /二手bencandy_12.htm /求职bencandy_13.htm /招聘bencandy_14.htm /公益bencandy_99.htm /舰船bencandy_100.htm /货源bencandy_101.htm /车源内容列表模板list.htm /文章list_2.htm /论坛list_3.htm /下载list_4.htm /图库list_5.htm /商城list_7.htm /视频list_8.htm /音乐list_9.htm /FLASHlist_11.htm /二手list_12.htm /求职list_13.htm /招聘list_14.htm /公益list_99.htm /舰船list_100.htm /货源list_101.htm /车源文章发布模板综Post.htm /文章发布Post_3.htm /下载文章发布以下略，你可以对照上面的文章发布的序号推测出是发表什么内容其他模板文件pm.htm /站内消息login.htm /登陆ad.htm /广告club.htm /娱乐中心comment.htm /评论comment_inc.htm /评论myinfo.htm /个人信息refreshto.htm /跳转页面register.htm /注册页面search.htm /搜索页面showerr.htm /出错提示以上是主要的模板文件。你可以根据你的需要制作自己的模板，不一定全部制作。一般主要制作head.htm index.htm foot.htm css.htm bencandy.htm list.htm就基本可以满足需要了。当浏览着浏览你的网页的时候，你制作的模板就会呈现给浏览者，而你没有制作的模板系统会调用默认的模板文件。当然一个网页里面可能包括图片文件。这些图片文件被放置在images文件夹下面,系统必须的一些图片被放在images/default/文件夹里面。默认风格里面的图片被放置在images/php168/下面。当然，一个网页模板还需要一些样式控制。这个样式控制文件被放置在Php168/style/文件夹下面。这些风格控制文件是一个个的.php文件。那我们要创建自己的风格怎么办呢？好，下面我我们举个例子说明一下：比如我想创建一个风格。这个风格好比我们的孩子。我们为了以后方便称呼和调用他，我们肯定需要给这个风格起一个名字。比如我们希望我们制作的风格的名字叫做my168。有了一个叫做my168的风格。我们肯定会想到我们该把他放在哪里呢？他总得有个栖身之地吧？好的，我们现在把这个风格的栖身之地称为my168home。即存放模板文件的文件夹。我们回顾一下上面一个段落里面默认风格的格式。我们会发现，一个风格模板应该包含三个部分。即： Tempalte/* 存放风格模板的网页文件 Images/* 存放风格模板中用到的图片文件 Php168/style/* 存放风格模板的风格控制文件好的，下面我们照猫画虎。那么我们的风格模板应该放在下面格式的文件夹里面： Template/my168home/ 这个里面放网页模板 Images/ my168home / 这个里面放网页模板用到的图片Php168/style/ my168home.php 这个文件夹里面的php文件用来控制样式。好的，我们已经把我们要制作的风格模板的家（即风格模板存放的地方）布置好了，下面我们开始动工制作我们的风格。制作风格my168我们假设你已经有一个静态网页了。你希望把这个静态网页做成my168的模板。静态网页一般包括一个.htm结尾的网页文件和存放图片文件的文件夹.第一步：把你这个静态网页用到的图片文件全部复制到images/ my168home/下面。好的，第一步完成，相当简单吧。呵呵第二步：因为我们在上面的讲解中为这个风格起了一个名字叫做：my168，并且为他安排了栖身之地：my168home。下面，我们用记事本打开Php168/style/下面我们建立的php文件my168home.php 。（这个php文件你可以直接复制默认的php文件。然后重新命名即可。）你可以看到他里面写了以下内容。你可以做些修改。我们稍做解释：$stylename这个变量定义的是你风格的名字，$stylefile这个变量定义的是你风格存放的文件夹的名字。其他的是定义了一些样式。下面我们给出详细注释。第三步：制作网页模板你在制作网页模板的时候。如果你仔细观察你会发现每个网页模板都有一定的格式，格如下：开头都是：!-?print 结尾都是：-所以我们制作我们自己的风格的时候。先在我们的静态网页的开头和结尾加上上面的逻辑符，然后保存。可以说，现在我们已经做好了一个最简单的模板，只是他还不能调用数据库动态的显示我们需要的内容。也就我们还没有加入我们一开始讲解的$label*标签。下面我们在我们需要的地方加入一个$labelb001，然后我们保存。把他命名为index.htm或者head.htm或者foot.htm(命名根据你想让这个网页代表一个网页的中间部分还是头部。还是底部而定。)我们这里把他命名为index.htm。我们希望他代表一个完整网页的中间部位。命名完成之后，我们把这个index.htm放到Template/ my168home /下面。,如果你的网页里面有图片文件，比如你的静态网页文件里面图片的路径是这样的：pic/logo.gif。那么你在模板文件里需要把这些图片的路径都相应的换成诸如：$n_pathimages/php168home/logo.gif的格式。其中$n_path代表根目录，images代表所有图片存放的目录。my168home是我们要制作的风格所存放的文件夹的名字。Logo.gif就是图片的名字。好了，一个最简单的风格就制作好了。你要问了，那么我们刚才插入的标签$labelb001显示什么呀？我怎么让他显示我想显示的内容呀？好的，接着往下看。现在，请你登陆后台。（呵呵当然，我们认为你已经成功安装了php168整站系统。 在后台找到：系统操作 网站核心设置网站默认色彩风格。你会发现有我们刚才的制作的my168。好的，选择my168。到首页刷新一下，如果没有什么问题，你可以看到你的风格已经展现在你的眼前了。然后找到：风格/模板设置模板标签设置，你会在看到右边有一个my168风格。他的下面有如下内容：首页模板 index.htm(my168) 添加/修改内容 修改模板(代码方式) 修改模板(可视化)点击：添加/修改内容，你会看到 有个红色的添加标签参数。（若为红色代表没有设置参数内容，若为蓝色代表已经添加了参数内容），看看旁边，有个$labelb001,点击继续，按照页面提示进行设置就可以显示你需要的内容了。如果你想在你的网页模板中加入想默认风格一样的登陆表单。你只需要在所在页面先加入如下代码：rr=Math.random();document.write();然后，在你需要的位置加入登陆代码：if(lfjid!=) document.write( 欢迎你：+lfjid+ 回来!); document.write( 个人管理中心); if(newpm=1) document.write(); document.write( 你有新的消息); else document.write( 短信中心); document.write( 高级搜索); document.write( 安全退出);else document.write( 免费注册); document.write( 会员登录); document.write( 用户名:); document.write( 密码:); document.write( ); document.write();即可。如果你希望做个导航菜单，加入以下代码：导航菜单的代码如下：网站首页 $logo_word以上的一些代码你可以研究一下默认模板的代码，直接从默认模板里面取得。是比较简单的。更为复杂的逻辑符，稍后进行介绍。另外，你的静态网页里面可能包含css样式表。你可以直接复制放到css.htm文件里面。（你制作的css.htm可以直接复制默认模板的css.htm文件，添加相关css样式就可以了。）*附：官方风格教程： 一个模板的制作分五步曲=第一步(插标签)=向静态网页中适当的位置,就是你要显示内容的位置,插入标签 $labelabc其中abc是举例,只能是任何纯英文或英文+数字,不允许数字+英文,值得注意的是每个标签都不能雷同的=第二步(加入头尾标志符)=用记事本打开静态网页,比如index.htm在第一行即是头部插入如下代码!-?print 再往尾部即是结尾插入如下代码-=第二步(替换文字)=比如原来的图片目录是 mypic现在把index.htm里边的 mypic/全部替换成 $usr_style/=第四步(定义风格英文标名称)=这一步为这个模板定义一下英文标志,比如 mystyle把当前的图片目录mypic改名为mystyle放在整站images/目录下在template目录下建一个目录名mystyle把index.htm放在t