Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

求一个制作风格的教程……

[复制链接]
滚骨碌 发表于 2007-6-1 06:04:33 | 显示全部楼层 |阅读模式
想学制作风格……
我想用心,就应该可以做好。
如果我学会操作,我有信心做出超个性的风格……

所以我在不断找教程………………
 楼主| 滚骨碌 发表于 2007-6-1 06:05:06 | 显示全部楼层
综 述
鉴于有的朋友对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   //FLASH
bencandy_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   //FLASH
list_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这个变量定义的是你风格存放的文件夹的名字。其他的是定义了一些样式。下面我们给出详细注释。
<?
$stylename=' my168';   //新的风格名称,可以中文名
$stylefile=' my168home ';     //风格存放的文件夹名称,用英文
$link_font='#333333';   //超级链接字体颜色
$hover_font='#ff6600';   //指向去时超级链接字体颜色
$visited_font='#333333'; //访问过超级链接字体颜色
$headmenu_font='#ffffff'; //栏目导航字体颜色
$menu_font='';   //下拉菜单字体颜色
$tablewidth='780'; //网站宽度,可以百分比,也可具体数值
$body_bgpic='./images/php168/bg.gif'; //网页背景图片
$bodybgcolor='#ffffff'; //网页背景颜色
$head1bgpic='';     //装饰表格1背景图片
$head1_bgcolor='3398CC'; //装饰表格1背景颜色
$head1font='#ffffff'; //装饰表格1字体颜色
$head2bgpic='';   //装饰表格2背景图片
$head2_bgcolor='EFF3F5'; //装饰表格2背景颜色
$head2font='0691D6';   //装饰表格2字体颜色
$table1_bgcolor='#ffffff'; //网站大表格1背景颜色
$table2_bgcolor='#ffffff';   //网站大表格2背景颜色
$tablebgcolor='#cccccc';   //网站表格边框颜色
$list_son_num='2';     //对大分类栏目而言,list.php页每行显示几个子栏目
$list_son_rows='8';   //list.php页子栏目显示几行
$list_son_leng='50';   //list.php页子栏目每行取多少个字符,一个中文等于两个字符
$lb_rows='8';       //最新、推荐、热门显示几行
$lb_leng='25';     //最新、推荐、热门每行取多少个字符,一个中文等于两个字符        
?>

第三步:制作网页模板
你在制作网页模板的时候。如果你仔细观察你会发现每个网页模板都有一定的格式,格如下:
开头都是:
<!--
<?
print <<<EOT
-->
结尾都是:
<!--
EOT;
?>
-->
所以我们制作我们自己的风格的时候。先在我们的静态网页的开头和结尾加上上面的逻辑符,然后保存。可以说,现在我们已经做好了一个最简单的模板,只是他还不能调用数据库动态的显示我们需要的内容。也就我们还没有加入我们一开始讲解的$label[**]标签。下面我们在我们需要的地方加入一个$label[b001],然后我们保存。把他命名为index.htm或者head.htm或者foot.htm(命名根据你想让这个网页代表一个网页的中间部分还是头部。还是底部而定。)我们这里把他命名为index.htm。我们希望他代表一个完整网页的中间部位。命名完成之后,我们把这个index.htm放到Template/ my168home /下面。,如果你的网页里面有图片文件,比如你的静态网页文件里面图片的路径是这样的:pic/logo.gif。
那么你在模板文件里需要把这些图片的路径都相应的换成诸如:{$n_path}images/php168home/logo.gif的格式。其中{$n_path}代表根目录,images代表所有图片存放的目录。my168home是我们要制作的风格所存放的文件夹的名字。Logo.gif就是图片的名字。好了,一个最简单的风格就制作好了。你要问了,那么我们刚才插入的标签$label[b001]显示什么呀?我怎么让他显示我想显示的内容呀?好的,接着往下看。现在,请你登陆后台。(呵呵当然,我们认为你已经成功安装了php168整站系统。具体的安装教程可以参照:kexiangtt斑竹做的教程:http://www.php168.com/bbs/read.php?tid=118763&fpage=1 )  
在后台找到:系统操作>> 网站核心设置>>网站默认色彩风格。你会发现有我们刚才的制作的my168。好的,选择my168。到首页刷新一下,如果没有什么问题,你可以看到你的风格已经展现在你的眼前了。然后找到:风格/模板设置>>模板标签设置,你会在看到右边有一个my168风格。他的下面有如下内容:
首页模板 index.htm(my168) 添加/修改内容 修改模板(代码方式) 修改模板(可视化)
点击:添加/修改内容,你会看到 有个红色的添加标签参数。(若为红色代表没有设置参数内容,若为蓝色代表已经添加了参数内容),看看旁边,有个$label[b001],点击继续,按照页面提示进行设置就可以显示你需要的内容了。
如果你想在你的网页模板中加入想默认风格一样的登陆表单。你只需要在所在页面先加入如下代码:
<script language=JavaScript >
rr=Math.random();
document.write("<script src='{$N_path}index_tpl.php?java="+rr+"'><\/script>");
</script>
然后,在你需要的位置加入登陆代码:
<form name=form1 action={$N_path}login.php method=post>
<script>
if(lfjid!=''){
  document.write(' ◎ 欢迎你:<b><font color="#FF0000">'+lfjid+'</font></b> 回来!');
  document.write(' <a href="{$N_path}myinfo.php" target=_blank>个人管理中心</a>');
  if(newpm=='1'){  
    document.write('<bgsound src={$N_path}images/default/msg.wav loop=1>');
    document.write(' <a href="{$N_path}pm.php?job=receivebox" target=_blank><font color=red>你有新的消息</font></a>');
  }else{
    document.write(' <a href="{$N_path}pm.php?job=write" target=_blank>短信中心</a>');
  }
  document.write(' <a href="{$N_path}search.php">高级搜索</a>');
  document.write(' <a href="{$N_path}login.php?action=quit">安全退出</a>');
}else{
  document.write(' <a href="{$N_path}register.php">免费注册</a>');
  document.write(' <a href="{$N_path}login.php" target=_blank>会员登录</a>');
  document.write(' 用户名:<input class=button size=12 name=loginuser>');
  document.write(' 密码:<input class=button type=password size=12 name=loginpwd>');
  document.write(' <input class=button type=submit value=通行证 name=login22>');
  document.write('<input type="hidden" name="step" value="2">');
}
</script>
</form>
即可。如果你希望做个导航菜单,加入以下代码:
导航菜单的代码如下:
<a href="{$N_path}" class=headmenu>网站首页</a> {$logo_word}
以上的一些代码你可以研究一下默认模板的代码,直接从默认模板里面取得。是比较简单的。
更为复杂的逻辑符,稍后进行介绍。
另外,你的静态网页里面可能包含css样式表。你可以直接复制放到css.htm文件里面。(你制作的css.htm可以直接复制默认模板的css.htm文件,添加相关css样式就可以了。)
***********************************************************
附:官方风格教程:
                    一个模板的制作分五步曲

===================================第一步(插标签)============


向静态网页中适当的位置,就是你要显示内容的位置,插入标签 $label[abc]

其中abc是举例,只能是任何纯英文或英文+数字,不允许数字+英文,值得注意的是每个标签都不能雷同的


======================第二步(加入头尾标志符)================
用记事本打开静态网页,比如index.htm
在第一行即是头部插入如下代码

<!--
<?
print <<<EOT
-->

再往尾部即是结尾插入如下代码

<!--
EOT
?>
-->

===================================第二步(替换文字)==============
比如原来的图片目录是   mypic
现在把index.htm里边的   mypic/
全部替换成         $usr_style/


====================第四步(定义风格英文标名称)===================


这一步为这个模板定义一下英文标志,比如 mystyle

把当前的图片目录mypic改名为mystyle放在整站images/目录下

在template目录下建一个目录名mystyle

把index.htm放在template/mystyle/目录下


在php168/style/目录里创建一个mystyle.php的文件,就是风格配置文件,
里边插入如代码(其中aritc代表是文章系统专用风格,$stylefile='mystyle';这是风格标志,一定要写,不能搞错)

<?
$stylefile='mystyle';
$stylename='示例模板';
$style_web='artic';
?>

好了,保存起来,一个最简单的模板就做好了,然后在整站后台为这个模板显示设置相关参数,

===================================第五步(设置显示参数)=============

进入后台,

风格/模板设置-》模板标签设置

选择你的风格模板,往里边设置参数

要启用,请

系统操作-->主页专用风格:
选出你做的风格设置为主页专用风格
回复

使用道具 举报

⒈薪 发表于 2007-6-1 06:05:59 | 显示全部楼层
加油吧 
回复

使用道具 举报

 楼主| 滚骨碌 发表于 2007-6-1 06:07:57 | 显示全部楼层

回复 #3 ⒈薪 的帖子

很早啊……
回复

使用道具 举报

gushiyue2008 发表于 2007-6-1 09:22:05 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

pc77maikongjian 发表于 2007-6-1 09:50:49 | 显示全部楼层
哈哈.加油努力
回复

使用道具 举报

acolele 发表于 2011-11-17 19:39:55 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

高水哥 发表于 2011-11-19 16:54:51 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-18 14:37 , Processed in 0.027609 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表