PHP168风格模板制作教程

邢飞白

2023-12-01

有时候大家看到许多漂亮的风格,那么如何把别人的风格改成php168的风格呢?下面给大家一个图文的教程:

第一步:保存别人的风格
.
一般的网站保存之后基本都没有什么问题了,可以打开保存的网页看看.基本和原有的网站差别不大.

当然也有可能和原先的网站差别比较大的.这多是由于样式表的问题造成的.

现在我们打开我们刚才保存的网站看看效果怎么样?

我们查看一下代码看看:

在代码里面搜索:style这个关键字.

找到下面的代码:

而我们保存下来的结构是这个样子的:

显然上面的代码的css路径是不对的.

那我们改一下.我们

把

改成:<link href=”fangzhi_files/home.css” rel=”stylesheet” type=”text/css”>

再看看,还是不行.那肯定还是样式的问题.

我们打开fangzhi_files/home.css这个文件看看:

最上面两行是这样的:

@import url( /CS_version/Css/cs_home.css );
@import url( /CS_version/css/validform.css );

原来他在home.css这个文件里面又导入了其他两个css文件.但是很明显路径又错了.

我们改一下路径,改成下面的样子.

@import url(cs_home.css );
@import url(validform.css );

之后保存home.css这个文件.再来看看保存的网页,有点像了:)

但是还有一些图片不能正常显示.这次你应该知道了,肯定是路径问题.

好,那么到home.css文件(还包括cs_home.css和validform.css)里面看看,我们会发现诸如:BACKGROUND-IMAGE: url(/CS_version/CS_img/home/logo_mid.gif);

里面的路径/CS_version/CS_img/home/logo_mid.gif都改为logo_mid.gif,即去掉/CS_version/CS_img/home/.

因为现在所有图片和css文件在同一级目录里面.当然你可以根据实际情况修改这个目录.

再刷新看看,但是还有些图片不能正常显示.那么我们就要考虑有可能没有把部分图片保存下来.那么直接到原来网站保存对应图片到css文件所在目录.

再看看

第二步:去除保存下来的网页里面无用的内容(包括网站内容,无用的html代码,无用的js代码,无用的超级链接等),

把地方留出来,因为这些地方我们要用php168的标签来动态的调用网站的内容.

第三步:分解刚才处理好的网页为三个文件:

head.htm(网页头部，一般在这个部分放置登陆表单，导航菜单，logo，等等)

index.htm(网页主体，一般在这个部分用标签调用网站各个栏目的内容等等)

foot.htm(网页底部，一般在这个部分显示一些版权信息)

第四步:在去除内容的地方加入标签$label[*],其中*是以字母开头的字母和数字的任意结合.

这个$label[*]可以加到head.htm，index.htm，foot.htm，list.htm，bencandy.htm中。

[注].标签$label[*]是什么东西？

我们打个比方来说明一下。比如你现在有一个漂亮的静态网页框架。你想把这个漂亮的静态网页框架作成动态网页，
以方便内容的添加及更改。那么你只需要在要显示内容的地方添加诸如$label[**]的标签。然后再做简单的处理。
那么原来漂亮但是简单的静态网页就会变成功能强大的动态网站。而且美丽依旧。简单的说，
这个标签$label[**]就象一个旗帜，他插在网页的不同部位。我们可以用这个旗帜显示文章的列表。
也可以用他来显示几行几列的图片列表。还可以用他来显示falsh，幻灯片图片，文字+部分内容列表等等。
我们还可以用他来显示一些插件，比如：天气预报，搜索引擎，投票栏目等等。

第五步:风格的制作

上面我们简单的说了一下标签$label[**]。我们说他象一面旗帜，可以插在不同的位置显示不同的内容。

那么我们有了旗帜，要往哪里放呢？下面我们来介绍一下插放这些标签的地方—-网页模板文件。

网页模板总的分为php168默认风格模板和自己制作的风格模板。他们都放在template文件夹下面。

其中template/default/为默认模板存放的地方。因为是默认的所以我们尽量不要改动他.

主要默认模板文件说明：

alonepage.htm（独立页面模板）

bencandy.htm（内容页面模板）

comment.htm（评论页面模板）

comment_ajax.htm（评论ajax页面模板）

guestbook.htm（留言本页面模板）

list.htm（列表页面模板）

post.htm（发布页面模板）

refreshto.htm（跳转页面模板）

reg.htm（注册页面模板）

search.htm（搜索页面模板）

showerr.htm（指示提示页面模板）

splist.htm（专题列表页面模板）

spshow.htm（专题内容页面模板）

vote.htm（投票页面模板）

以上是主要的模板文件。你可以根据你的需要制作自己的模板，不一定全部制作。

一般主要制作head.htm，index.htm，foot.htm，bencandy.htm，list.htm就基本可以满足需要了。

当浏览着浏览你的网页的时候，你制作的模板就会呈现给浏览者，而你没有制作的模板系统会调用默认的模板文件。

当然一个网页里面可能包括图片文件。这些图片文件被放置在images文件夹下面。

默认风格里面的图片被放置在images/default/下面。当然，一个网页模板还需要一些css样式控制。

这些样式一般放置在对应的图片文件夹里面。例如images/default/default.css

另外还有一个php文件用来定义这些风格，以便在后台可以自由切换。

这些风格控制文件是一个个的.php文件。都放在php168/style/下面。例如默认的为：php168/style/default.php

那我们要创建自己的风格怎么办呢？好，下面我我们举个例子说明一下：比如我想创建一个风格。

这个风格好比我们的孩子。我们为了以后方便称呼和调用他，我们肯定需要给这个风格起一个名字。

我们回顾一下上面一个段落里面默认风格的格式。我们会发现，一个风格模板应该包含三个部分。即：
Tempalte/default/存放风格模板的网页文件
Images/default/存放风格模板中用到的图片文件
Php168/style/default.php定义这些风格
那么你可以新建一个风格模板应该放在下面格式的文件夹里面：
Template/my168home/这个里面放网页模板
Images/my168home/这个里面放网页模板用到的图片
Php168/style/my168home.php 这个文件夹里面的php文件用来控制样式。

第六步：将模板里面的图片路径改为：$webdb[www_url]/images/$STYLE/

第七步：加入一些特定的代码

风格所需基本代码

*********************************

head.htm

头部特定代码

<!–
<?php
print <<<EOT
–>
<head>
<title>$titleDB[title] powered by www.php168.com</title>
<link rel=”stylesheet” type=”text/css” href=”$webdb[www_url]/images/default/default.css”>
<link rel=”stylesheet” type=”text/css” href=”$webdb[www_url]/images/$STYLE/css.css”>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<meta name=”keywords” content=”$titleDB[keywords]“>
<meta name=”description” content=”$titleDB[description]“>
</head>
<SCRIPT LANGUAGE=”JavaScript”>
<!–//导航菜单
function guide_link(fid){
if(fid==0){
window.location.href=”$webdb[www_url]/”;
}else{
window.location.href=’$webdb[www_url]/list.php?fid=’+fid;
}
}
function killErr(){
return true;
}
window.οnerrοr=killErr;
//–>
</SCRIPT>
<SCRIPT LANGUAGE=”JavaScript”>
<!–//处理大分类一行两个小分类
function autoTable(div){
fs=document.getElementById(div).getElementsByTagName(“TABLE”);
for(var i=0;i<fs.length;i++){
fs[i].style.width=’49.5%’;
if(i%2==1){
if (document.all) {
fs[i].style.styleFloat=”right”;
}else{
fs[i].style.cssFloat=”right;”;
}
}else{
if (document.all) {
fs[i].style.styleFloat=”left”;
}else{
fs[i].style.cssFloat=”left;”;
}
}
}
}
//–>
</SCRIPT>
<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>
<SCRIPT LANGUAGE=”JavaScript” src=”$webdb[www_url]/php168/$fidson_menu”></SCRIPT>
<body bgcolor=”#FFFFFF” text=”#000000″ leftmargin=”0″ topmargin=”0″>
<SCRIPT LANGUAGE=”JavaScript”>
<!–//目的是为了做风格方便
document.write(‘<div class=”wrap”>’);
//–>
</SCRIPT>

______________________

尾部特定代码

<!–
EOT;
?>
–>

********************************

index.htm

头部特定代码

<!–
<?php
print <<<EOT
–>
_________________

尾部特定代码

<!–
EOT;
?>
–>

********************************

foot.htm

头部特定代码

<!–
<?php
print <<<EOT
–>
_____________________________________

尾部特定代码

**************************

list.htm

头部特定代码

<!–
<?php
$listdb_pic=ListPic($rows=4,$leng=30); //图片主题
$listdb_pic || $hide_listpic=’none’; //不存在图片主题的话.要把图片主题的边框隐藏
$listdb || $hide_listnews=’none’; //如果是大分类的话,就不存在标题,就把标题框隐藏
print <<<EOT
–>

___________________

尾部特定代码

<!–
EOT;
?>
–>

****************************

bencandy.htm

头部特定代码

<!–
<?php
print <<<EOT
–>

尾部特定代码

<!–
EOT;
?>
–>

**********************************

LOGOL下导航代码:

<!–
EOT;
$detail=explode(“\r\n”,$webdb[guide_word]);
foreach($detail AS $key=>$value){
list($name,$url,$blank,$color)=explode(“|”,$value);
if(ereg(“^\/”,$url)){
$url=”$webdb[www_url]$url”;
}elseif(!ereg(“://”,$url)){
$url=”$webdb[www_url]/$url”;
}
$blank=$blank?”_blank”:”;
$color=$color?”$color”:”;
print <<<EOT
–>
<a href=”$url” target=”$blank” style=”color:$color;”>$name</a>
<!–
EOT;
}
print <<<EOT
–>

**********************************

登陆代码:

在TABLE之间加 id=”toplogin”
<SCRIPT src=”$webdb[www_url]/hack.php?hack=login&job=js”></SCRIPT>

**********************************

首页栏目导航:
<script src=”jsarticle.php?fid=0&type=sonfid&rows=15″></script>

**********************************

搜索代码：

<form name=”formsearch” method=”post” action=”$webdb[www_url]/search.php?job=search”>
<tr> <TD width=120><IMG height=29 src=”images/search_s2.gif”
width=114></TD>
<td> 关键字:<input type=”text” name=”keyword” size=”30″>类  型:
<select name=”type”>
<option value=”article” selected>文章</option>
<option value=”photo”>图片</option>
<option value=”down”>下载</option>
<option value=”shop”>商品</option>
<option value=”flash”>FLASH</option>
<option value=”mv”>视频</option>
<option value=”log”>日志</option>
</select>
<input type=”submit” name=”Submit32″ value=”搜索”>
</td>
</tr>
</form>

***************************************

**********************************

友情联接:

<div class=”imgfriendlink”>
<!–
EOT;
foreach($friendlinkDB[1] AS $key=>$rs){
print <<<EOT
–>
<A HREF=”$rs[url]” target=_blank><img alt=”名称:$rs[name]\r\n描述:$rs[descrip]” src=”$rs[logo]” width=”88″ height=”31″ border=0></A>
<!–
EOT;
}
print <<<EOT
–>
</div>
<div class=”wordfriendlink”><!–
EOT;
foreach($friendlinkDB[0] AS $key=>$rs){
print <<<EOT
–>
<A HREF=”$rs[url]” target=”_blank” title=”描述:$rs[descrip]“>$rs[name]</A> 
<!–
EOT;
}
print <<<EOT
–></div>

*******************************

底部版权:

在TABLE之间加id=”footer”

<tr>
<td align=”center”>$webdb[copyright]<br>
Copyright@{$webdb[weburl]} all rights reserved <a href=”http://www.miibeian.gov.cn” target=”_blank”>{$webdb[miibeian_gov_cn]}</a>
<br>
Powered by <a href=”http://www.php168.com” target=”_blank”>PHP168 {$php168_Edition}</a>
Code © 2003-07 <a href=”http://www.php168.com/bbs” target=”_blank”>PHP168CMS</a>
</td>
</tr>

**********************************

位置导航:

您当前的位置{$GuideFid[$fid]}

**********************************

LIST相关栏目:

**********************************

LIST热门文章:

**********************************

LIST推荐文章:

****************************************************************************************************************

LIST分类内容:

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center” class=”dragTable” style=”display:$hide_listpic”>
<tr>
<td class=”head”>
<h3 class=”L”></h3>
<span class=”TAG”>图片主题</span>
<h3 class=”R”></h3>
</td>
</tr>
<tr>
<td class=”middle”>
<!–
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″ οnlοad=”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
–>
</td>
</tr>
<tr>
<td class=”foot”>
<h3 class=”L”></h3>
<h3 class=”R”></h3>
</td>
</tr>
</table>
<div id=”AutoRows”>
<!–
EOT;
foreach($listdb_moresort AS $key=>$rss){
print <<<EOT
–>
<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>
</td>
</tr>
<tr>
<td class=”middle”>
<ul>
<!–
EOT;
foreach($rss[article] AS $key1=>$rs){
print <<<EOT
–>
<li><a href=”bencandy.php?fid=$rs[fid]&id=$rs[aid]“>$rs[title]</a></li>
<!–
EOT;
}print <<<EOT
–>
</ul>
</td>
</tr>
<tr>
<td class=”foot”>
<h3 class=”L”></h3>
<h3 class=”R”></h3>
</td>
</tr>
</table>
<!–
EOT;
}print <<<EOT
–>
</div>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
autoTable(“AutoRows”);
//–>
</SCRIPT>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”dragTable” style=”clear:both;display:$hide_listnews”>
<tr>
<td class=”head”>
<h3 class=”L”></h3>
<span class=”TAG”>文章列表</span>
<h3 class=”R”></h3>
</td>
</tr>
<tr>
<td class=”middle”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”listarticle”>
<!–
EOT;
foreach($listdb AS $key=>$rs){
$target=$rs[target]?’_blank’:'_self’;
print <<<EOT
–>
<tr>
<td><span class=”title”><a href=”bencandy.php?fid=$rs[fid]&id=$rs[aid]” target=”$target” title=’$rs[full_title]‘>$rs[title]</a></span>
<span class=”time”>({$rs[posttime]})</span> </td>
</tr>
<!–
EOT;
}print <<<EOT
–>
</table>
<div class=”page”>$showpage</div>
</td>
</tr>
<tr>
<td class=”foot”>
<h3 class=”L”></h3>
<h3 class=”R”></h3>
</td>
</tr>
</table>

*****************************************************************************************/

BECANDAY.htm

**********************************

PHP168风格模板制作教程

相关阅读

相关文章

相关问答

相关文档