PHP168:风格制作指南系列
导航: 上一级 | PHP168 | 首页 | DedeCMS | 帝国CMS | Drupal | PHPCMS | Xoops | Joomla | PowerEasy | SupeSite
入门级
制作PHP168的风格,完全不需要懂PHP程序.只须要懂HTML制作就行了.
PHP168整站系统与其他频道系统的风格原理都是一样的.下面重点讲解整站的风格制作.
一套完整的风格必须指定一个唯一的关键字即不能与其它风格的关键字有雷同,并且包含以下文件与目录
比如默认的风格,它的关键是: default 然后这个风格的相关目录名都以此为标准.
/php168/style/default.php 这是风格的配置文件,必须有的,
/images/default/ 这是风格图片目录,风格的相关图片都在这里,另外还有一个CSS文件
/template/default/ 这是模板目录,如果自已另外做的风格,可以没有这个目录.当你的风格没有对应的模板文件时,就会从系统默认的模板目录去读取.
/cache/label/default.php 这是风格的标签设置参数的缓存.可以没有.目的是方便别人使用你的风格里的标签设置.否则别人需要自己设置标签.
做风格的思路是这样的:
第一步,按你自己的思路去做好一个主页.列表页与内容页可做,可不做.但是在做的时候.必须要注意一点的是,必须确认你的主页可以切割成三部分,即是头部,底部,中间部分.因为程序会分三部分读取模板.最后组合成一个页面的.做到这个就可以了.所以在做的时候.其它完全可以不用考虑的.
第二步.也即是把你的HTML页面做好之后.就要进行图片与CSS的路径进行替换处理. 在这里,你需要为你的风格想好一个关键字,比如abc只能是英文或英文加数字.然后就进行图片与CSS的路径替换. 把所有图片及CSS的路径替换为 $webdb[www_url]/images/abc/ 其中$webdb[www_url]这个变量代表你的整站访问地址.通过这样替换.就可以得到你的图片的http://这样的绝对路径了.
第三步.即图片及CSS路径替换完毕之后.就需要对你的HTML主页进行分割了.分别割成三部分代码.即头部,底部,中间内容部分. 分别命名为head.htm foot.htm index.htm
第四步,即分割完毕之后,就需要给以上三个文件插入特定代码.使之成为模板.没插入特定代码之前.它只是普通的HTML页面,并不是真正的模板.
修改以上三个文件.分别在每个文件的头部插入如下代码
<!-- <?php print <<<EOT -->
然后,分别在每个文件的底部插入以一代码
<!-- EOT; ?> -->
这样,就成为真正的模板了.
第五步,HTML文件与图片目录的正确存放.建立图片目录与模板目录
images/abc/ 把用到的图片放到此目录
template/abc/ 把head.htm foot.htm index.htm这些模板放到此目录
php168/style/abc.php 创建这样一个文件.里边输入如下代码
<?php $styledb['name']='我的ABC风格'; $styledb['keywords']='abc'; ?>
通过以上五个步骤.就基本上把一个主页风格做好了.每新做一个风格,基本上都是这样的步骤的.以上我们只是制作了head.htm index.htm foot.htm 这三个模板.一般来说足够了.其它list.htm列表页 bencandy.htm内容页,我们没有制作的话.他就会读取系统默认目录的.即default目录的.其他页的制作原理一样.只是不需要做头部与底部了
进阶级
上一节讲解的是风格制作的入门.
这一节讲解一下风格制作的更深一步.
上一节所制作的风格.只适用于主页.其它页面的话.将会显示不正常的. 怎么样才能把兼容性做好.保证其它页面正常呢?
第一步:制作风格前.把系统默认的css.css文件放进你的HTML页面头部里边.才开始制作你的HTML主页.
即加多一段代码
<link rel="stylesheet" type="text/css" href="images/css.css">
然后你自己的CSS文件.可以另外做一个.比如说
<link rel="stylesheet" type="text/css" href="images/css2.css">
或者也可以在images/css.css的底部紧跟着进行添加或修改.而不必新增加一个CSS文件.
只有这样.在默认的CSS.CSS基本上制作出来的HTML主页.才是兼容性最好的.照顾到了其它页面.
第二步:以上是CSS兼容性的处理问题.这一步是网页宽度的问题. 把HTML主页切割成三部分之后.需要在head.htm文件的底部插入如下代码:
<SCRIPT LANGUAGE="JavaScript">
<!--//目的是为了做风格方便
document.write('<div class="wrap">');
//-->
</SCRIPT>
然后再在foot.htm文件的头部插入如下代码
<SCRIPT LANGUAGE="JavaScript">
<!--//目的是为了做风格方便
document.write('</div>');
//-->
</SCRIPT>
以上的目的是为了可以自由调整网页中间内容部分的宽度
比如,通过修改以下参数实现
.wrap{
width:900px;
}
第三步:再往head.htm里边添加一些功能代码
<SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/inc.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/default.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/swfobject.js"></SCRIPT>
在</head>下一行添加如上代码.缺少以上脚本代码的话.某些页面的有些功能将失效.或者报错
如果需要下拉菜单的话.需要紧跟着下一行添加如下代码
<!--****************下拉菜单开始****************-->
<!--
EOT;
if($webdb[ShowMenu]){print <<<EOT
-->
<SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/menu.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
EOT;
@include(PHP168_PATH."php168/menu.js.php");
foreach($MenuArray AS $key=>$array){
$link_db='';
foreach($array AS $key1=>$value){
list($name,$url,$blank,$color,$lid)=explode("|",$value);
if(ereg("^\/",$url)){
$url="$webdb[www_url]$url";
}elseif(!ereg("://",$url)){
$url="$webdb[www_url]/$url";
}
$blank=$blank?"_blank":'';
$color=$color?"$color":'';
$link_db[]="<a href='$url' target='$blank' style='color:$color;'>$name</a>";
}
$_showlink=implode("<br>",$link_db);
print <<<EOT
-->
var Menu_$key = "$_showlink";
<!--
EOT;
}
print <<<EOT
-->
</SCRIPT>
<!--
EOT;
}print <<<EOT
-->
<!--****************下拉菜单结束****************-->
如果需要登录框的话.在需要显示的地方加入如下代码
<SCRIPT src="$webdb[www_url]/hack.php?hack=login&job=js"></SCRIPT>
如果需要添加后台设置好的导航菜单的话.在需要显示的地方加入如下代码
<!--****************主菜单开始****************-->
<!--
EOT;
$i=0;
$detail=explode("\r\n",$webdb[guide_word]);
foreach($detail AS $key=>$value){
$i++;
$icon=$i>1?'|':'';
list($name,$url,$blank,$color,$lid)=explode("|",$value);
if(ereg("^\/",$url)){
$url="$webdb[www_url]$url";
}elseif(!ereg("://",$url)){
$url="$webdb[www_url]/$url";
}
$blank=$blank?"_blank":'';
$color=$color?"$color":'';
if($webdb[ShowMenu])$showmenu=" ";
print <<<EOT
-->
$icon <a href="$url" target="$blank" style="color:$color;" $showmenu>$name</a>
<!--
EOT;
}
print <<<EOT
-->
<!--****************主菜单结束****************-->
第四步:修改文件foot.htm的最底部加入如下代码,实现页面的一些特定功能
<SCRIPT LANGUAGE="JavaScript"> <!-- clickEdit.init(); //--> </SCRIPT>
第五步:如果你不是授权用户也不是VIP用户的话,别忘了还需要在foot.htm的适当地方加入如下代码
Powered by <a href="http://www.php168.com" target="_blank">PHP168 {$php168_Edition}</a>
因为非授权用户与非VIP用户是不允许去除版权的.切记
这样,就基本上把整个网站的整体风格做好了.这样就兼容性比较完全了.
标签制作
这一节跟大家讲解一下PHP168的最大特色之一:标签
标签功能最强大.但制作却是最简单的.
怎么样强大呢?
设置一个标签即页面的某块内容.你可以调用PHP168系统的任何数据.并且可以自由控制显示的排序方式与显示条数等等.一个非常复杂的主页.就是由一个一个的标签组合而成的.
怎么样简单呢?
他的格式是
$label[abc]
其中abc是随意的字母.或是字母加数字或下画线..但必须是字母开头.一个有错.将会导致整个页面白屏.所以大家要小心翼翼.虽然说简单.但不小心的话.也是不行的.
在添加标签的时候.建议给他加一个大括号
{$label[abc]}
这样兼容性更好.不容易出乱子
一个页面的标签是不能雷同的.否则显示的内容就是一样的了.也就是说中括号里边的字母是任意的.但不能雷同的.
在你需要显示的地方.加入一个标签.然后就可以在整站后台调用整站的数据了.
比如一个最简单的主页如下
<!-- <?php print <<<EOT --> 这是标签一显示的内容$label[abc1] 这是标签二显示的内容$label[abc2] <!-- EOT; ?> -->
大家可以留意到这个主页的头部与底部都有一段特定代码.这是不能缺少的.否则就不是真正的模板.
列表页与内容页的制作
一般情况. 列表页与内容页都不需要制作.此时将调用系统默认的
即
template/default/list.htm
template/default/bencandy.htm
这两个页面.但是为了更具有个性化.更漂亮的话.你也可以制作 相对来说,内容页bencandy.htm是比较简单的.而list.htm稍为复杂些.
下面先讲解:bencandy.htm的制作.
首页特定代码是不可缺少的.
<!-- <?php print <<<EOT --> 内容页部分 <!-- EOT; ?> -->
{$rsdb[title]} 标题
{$rsdb[username]} 录入者
{$rsdb[author]} 作者
{$rsdb[copyfrom]} 来源
{$rsdb[copyfromurl]} 来源网址
{$rsdb[content]} 文章的内容
{$showpage} 分页,针对有多页的文章而言有用
只要把以上变量插入到你模板的任意地方即可.非常简单的.
然后再讲解一下评论的调用.
把以下这段评论代码插入到需要显示的地方即可
<div id="comment"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="16%"><span class="L">称 呼:</span><span class="R"></span></td>
<td width="84%"><span class="R">
<input type="text" name="textfield2" id="comment_username" value="$lfjid">
</span></td>
</tr>
<!--
EOT;
if(!$web_admin&&$groupdb[CommentArticleYzImg]){
$webdb[yzImgComment]=1;
print <<<EOT
-->
<tr>
<td width="16%"><span class="L">验 证 码:</span></td>
<td width="84%">
<input id="yzImgNum" type="text" name="yzimg" size="8">
<img border="0" id="yz_Img" name="imageField" src="$webdb[www_url]/yzimg.php">
</td>
</tr>
<!--
EOT;
}
print <<<EOT
-->
<tr>
<td width="16%"><span class="L">内 容:</span></td>
<td width="84%"><span class="R">
<textarea name="textfield" cols="50" rows="5" id="comment_content" onKeyDown="quickpost(event)"></textarea>
</span></td>
</tr>
<tr>
<td width="16%">
<script language="JavaScript">
<!--
getcomment("$webdb[www_url]/comment_ajax.php?fid=$fid&aid=$aid");
cnt = 0;
function quickpost(event)
{
if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83))
{
cnt++;
if (cnt==1){
postcomment('$webdb[www_url]/comment_ajax.php?action=post&fid=$fid&aid=$aid')
}else{
alert('内容正在提交...');
}
}
}
//-->
</script>
</td>
<td width="84%"><span class="R">
<input type="button" id="comment_submit" name="Submit" value="提交"
onClick="postcomment('$webdb[www_url]/comment_ajax.php?action=post&fid=$fid&aid=$aid','$webdb[yzImgComment]')" class="button">
</span></td>
</tr>
</table>
大家务必注意的是
<div id="comment"></div>
这个不能缺少.这是显示评论内容的代码.内容页的制作就是这么简单的.
下面再来讲解一下列表页的制作. 列表页相对来说复杂一些.因为大分类显示的方式与小栏目的显示是完全不一样的.
先讲小栏目的显示吧.
模板的头部特定代码用以下这个.底部特定代码不变.
<!--
<?php
if($fidDB[config][ListShowType]!=1&&$fidDB[config][ListShowType]!=3){
$listdb_pic=ListPic($webdb[listPicRows]?$webdb[listPicRows]:4,$leng=30); //图片主题
}
$listdb_pic || $hide_listpic='none'; //不存在图片主题的话.要把图片主题的边框隐藏
$listdb || $hide_listnews='none'; //如果是大分类的话,就不存在标题,就把标题框隐藏
!$listdb_moresort && !$listdb && !$fidDB[type] && $hide_listnews='';
print <<<EOT
-->
如果想显示图片主题的话.在需要的地方插入以下代码
<!--****************************图片主题开始****************************-->
<!--
EOT;
foreach($listdb_pic AS $key=>$rs){
print <<<EOT
-->
<div class="listpic">
<p class=img><a href="bencandy.php?fid=$rs[fid]&id=$rs[aid]"><img width="120" height="90"
onload="makesmallpic(this,120,90);" src="$rs[picurl]" border="0"></a></p>
<p class=title><A HREF="bencandy.php?fid=$rs[fid]&id=$rs[aid]" title='$rs[full_title]'>$rs[title]</A></p>
</div>
<!--
EOT;
}
print <<<EOT
-->
<!--****************************图片主题结束****************************-->
以下这段.就是仅显示文章标题列表的代码
<!--
EOT;
foreach($listdb AS $key=>$rs){
$target=$rs[target]?'_blank':'_self';
print <<<EOT
-->
<a href="bencandy.php?fid=$rs[fid]&id=$rs[aid]" target="$target" title='$rs[full_title]'>$rs[title]</a> ({$rs[posttime]})
<!--
EOT;
}print <<<EOT
-->
把它插入到需要显示的地方即可
以下这段是显示分页的代码
<div class="page">$showpage</div>
如果觉得单纯的标题太简单.要显示图片+标题+内容的话.就换成以下这段代码
<!--
EOT;
foreach($listdb AS $key=>$rs){
$rs[content]=get_word($rs[content],$fidDB[config][listContentNum]>0?$fidDB[config][listContentNum]:150);
$target=$rs[target]?'_blank':'_self';
print <<<EOT
-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list_sortTCP">
<tr>
<td rowspan="2" width="13%" class="pic"><a href="bencandy.php?fid=$rs[fid]&id=$rs[aid]"
title='$rs[full_title]'><img width="90" height="65" onError="this.src='$webdb[www_url]/images/default/nopic.jpg'"
src="$rs[picurl]" border="0"></a></td>
<td width="87%" class="title"><a href="bencandy.php?fid=$rs[fid]&id=$rs[aid]" target="$target"
title='$rs[full_title]'><b>$rs[title]</b></a></td>
</tr>
<tr>
<td width="87%" valign="top" class="content">{$rs[content]}
({$rs[posttime]}) </td>
</tr>
</table> <!--
EOT;
}
print <<<EOT
-->
小栏目的制作方法基本就是这样.有一点必须要高度重视的是
<!-- -->
里边的内容,是程序逻辑代码,你不要修改.除此之外的内容可以任意自由修改.
以下再来讲解一下大分类页的制作方法.
把以下这段代码添加到需要显示的地方即可
<!--****************************大分类显示子栏目开始****************************-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="AutoRows">
<!--
EOT;
$moreline=$webdb[ListSonline]>0?$webdb[ListSonline]:1;
$array=array_chunk($listdb_moresort,$moreline);
$moretdwidth=floor(100/$moreline)."%";
$moreline>1&&$moretimedisplay='none';
foreach($array AS $key2=>$array2){
print <<<EOT
-->
<tr>
<!--
EOT;
$iii=0;
foreach($array2 AS $key=>$rss){
$iii++;
if($moreline>1&&$iii%$moreline==1){
$tbstyle=" style='padding-right:2px;' ";
}elseif($moreline>1&&$iii%$moreline==0){
$tbstyle=" style='padding-left:2px;' ";
}else{
$tbstyle=" ";
}
print <<<EOT
-->
<td width="$moretdwidth" $tbstyle>
<table border="0" cellspacing="0" cellpadding="0" class="dragTable" width="100%">
<tr>
<td class="head">
<h3 class="L"></h3>
<span class="TAG"><a href="list.php?fid=$rss[fid]">$rss[name]</A></span>
<h3 class="R"></h3>
<span class="more" style="float:right;"><a href="list.php?fid=$rss[fid]">更多...</A></span>
</td>
</tr>
<tr>
<td class="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!--
EOT;
foreach($rss[article] AS $key1=>$rs){
print <<<EOT
-->
<tr class="list_tr">
<td class="list_title"><a href="bencandy.php?fid=$rs[fid]&id=$rs[aid]">$rs[title]</a></td>
<td align="right" class="list_time" style="display:$moretimedisplay;">({$rs[posttime]}) </td>
</tr>
<!--
EOT;
}print <<<EOT
-->
</table>
</td>
</tr>
<tr>
<td class="foot">
<h3 class="L"></h3>
<h3 class="R"></h3>
</td>
</tr>
</table>
</td>
<!--
EOT;
}print <<<EOT
-->
</tr>
<!--
EOT;
}print <<<EOT
-->
</table>
<!--****************************大分类显示子栏目结束****************************-->
同样的道理.有一点必须要高度重视的是
<!-- -->
里边的内容,是程序逻辑代码,你不要修改.除此之外的内容可以任意自由修改.
列表页的制作原理基本上就是这样.当然你还可以添加标签.使之变得更丰富多彩
登录框的处理
登录框默认是一条横的.但你可以通过CSS控制他成为多行,即方型.如给它框架一个DIV.并且定义一个ID为mylogin就可以进行CSS定义了.
<div id="mylogin"><SCRIPT src="http://1.com/45/hack.php?hack=login&job=js"></SCRIPT></div>
使用以下CSS就可以使得成为多行.方框那样显示
<style>
#mylogin{
width:200px;
}
#mylogin input{
width:100px;
height:18px;
border:1px #333 solid;
}
#mylogin .L_sub{
text-align:center;
}
#mylogin .login_sub{
width:50px;
height:18px;
border:1px #333 solid;
}
#mylogin span{
display:block;
}
#mylogin .L_passport{
text-align:right;
padding-right:2em;
}
</style>
关于更细节的设置.大家可以查看他的具体class进行样式定义.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form name="form1" method="post" action="$webdb[www_url]/login.php">
<tr>
<td>
<span class='L_passport'> 通行证 |</span>
<span class="L_name"> 帐号：
<input type="text" name="username" class="login_name">
</span>
<span class="L_pwd"> 密码：
<input type="password" name="password" class="login_pwd">
</span>
<span class="L_sub"> <input type="submit" name="Submit" value="登录" class="login_sub">
</span><span class="L_reg"> <a href="$webdb[www_url]/reg.php">注册</a> |
<a href="$webdb[www_url]/login.php">登录</a></span>
</td>
<input type="hidden" name="step" value="2">
<input class="radio" type="hidden" name="cookietime" value="86400" >
</tr>
</form>
</table>
以上是未登录时的代码.以下是登录后的代码.
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="20">
<tr>
<td align="left" style="padding-top:4px;"><span class="L2_name"> 欢迎你回来:<a style="color:#FF0000;">$lfjid</a></span>
<span class="L2_msg">
$MSG </span>
<span class="L2_info"> <a href="$webdb[www_url]/member/index.php?main=myarticle.php" target="_blank">我的文章</a>
<a href="$webdb[www_url]/member/" target="_blank">个人信息</a></span>
<span class="L2_out">
<a href="$webdb[www_url]/member/index.php?main=userinfo.php?job=edit" target="_blank">修改资料</a>
<a href="$webdb[www_url]/login.php?action=quit">安全退出</a></span>
</td>
</tr>
</table>