注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

ㄨiao愛

转载技术文档

 
 
 

日志

 
 

PHPWIND 风格制作全攻略基本篇  

2012-03-14 15:09:51|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
HPWIND 风格制作全攻略基本篇

制作方法,对于其他版本也是差不多的。

PW风格结构介绍

1.datastyle风格名.php 
该文件为风格的核心文件,该文件的文件名就是该风格的风格名。 
2.image图片目录 
风格的图片目录 
3.template风格文件目录 
风格的文件目录。该目录下没有的文件,就调用wind目录下的文件。
PW风格制作基本过程

一、首先是确认风格主题 
二、寻找素材,或者自己原创 
三、制作风格模版(可以使用 PS 制作) 
主要是制作风格头部和尾部的文件。当前的主流分辨率是1024*768,所以建议PSD的宽度为1000,然后进行分割。确定头部图片,中间图片,尾部图片。 
四、创建新风格的文件 
1 复制datastyle下的wind.php,并将该文件重命名为“风格名.php”(该文件为风格核心文件) 
2 复制image下的wind文件夹,并将该文件夹重命名为“图片目录” 
3 复制template下的wind文件夹,仍然将该文件夹重命名为“风格文件目录” 
这样做的目的主要是为了在默认的WIND风格的基础上修改风格,以减少错误。 
五、修改风格核心文件 
将datastyle风格名.php文件用记事本打开,进行修改。 
注意“//”表示注释,可以不写进去, 
颜色代码改成你自己风格需要的颜色代码, 
表格宽度设置为你的风格需要的宽度,可以是固定值或百分比。 
QUOTE: 
$stylepath = '图片目录'; //此风格在image目录下的文件夹名称 
$tplpath = '风格文件目录'; //此风格在template目录下的风格文件夹名称 
$yeyestyle = 'no'; //表格内部是否使用白色("yes"内部表格边框将为透明的,"no"表格边框的颜色就是你下面定义的颜色) 
$tablecolor = '#E5E3E3'; //表格边框颜色(外边框) 
$tablewidth = '98%'; //表格宽度 
$mtablewidth = '98%'; //头部和尾部表格宽度 
$forumcolorone = '#FBFBFB'; //论坛版块列表颜色一 
$forumcolortwo = '#FBFBFB'; //论坛版块列表颜色二 
$threadcolorone = '#FBFBFB'; //版块内文章列表颜色一 
$threadcolortwo = '#FBFBFB'; //版块内文章列表颜色二 
$readcolorone= '#FBFBFB'; //阅读主题时文章背景颜色一 
$readcolortwo= '#FBFBFB'; //阅读主题时文章背景颜色二 
$maincolor = '#F3F3F3'; //开发程序备用颜色(按自己需要设置) 
?> 
建议颜色一、二,使用不同的颜色; 
建议图片目录和风格文件目录使用不同的地址,如图片目录使用wind,而风格文件目录使用wind123,这样可以防止菜鸟盗风格; 
建议表格宽度使用百分比,可以适应不同的分辨率。 
六、修改header.htm中的CSS 
详见五楼 
七、修改风格目录下的图片 
将image风格目录下的图片换成风格需要的图片, 
刚才收集的素材,和PS切割的图片,都可以用上了。 
八、修改风格文件目录下的htm文件 
一般只需要修改header.htm、index.htm和footer.htm就可以了; 
如果需要,还可以修改faq.htm、fastpost.htm、login.htm、notice.htm、post.htm、preview.htm、read.htm、register.htm、search.htm、thread.htm、thread_children.htm、thread_online.htm、vote.htm; 
其他的乱七八糟的东西就不用修改了; 
不修改的文件可以直接从风格文件目录下删除,这样就直接调用wind目录下的相关文件; 
具体怎么改就说看你的了,我想懂一点htm知识就会改了。 
九、调试,完成。[/size]
[size=2]
PW风格文件介绍

下面是template目录下一部分的文件介绍, 
其他是风格制作很少涉及的文件就不说了 
bank.htm---------------银行插件 
birth.htm---------------首页生日会员 
faq.htm-----------------帮助 
fastpost.htm-----------快速发帖 
favor.htm---------------控制面板-收藏夹 
footer.htm--------------页面底部 
getpwd.htm------------取回密码 
head_pop.htm---------登陆提示框 
header.htm-------------页面头部 
index.htm----------------论坛首页 
left.htm-----------------左侧分栏 
login.htm----------------会员登陆页 
mark.htm-----------------评分页 
masingle.htm-----------版主管理页一 
mawhole.htm-----------版主管理页二 
member.htm------------用户列表 
message.htm-----------短消息 
notice.htm--------------公告 
post.htm----------------发表主题、投票、回复 
preview.htm------------帖子预览 
profile.htm--------------编辑个人资料 
read.htm----------------帖子浏览 
refreshto.htm----------跳转页 
register.htm------------注册页 
report.htm--------------报告页 
search.htm-------------搜索程式 
sendmail.htm-----------发送邮件 
sendpwd.htm-----------找回密码 
showmsg.htm----------论坛提示 
showuserdb.htm-------查看个人资料 
sort.htm-----------------统计和排行 
thread.htm--------------帖子列表 
thread_children.htm---子版块 
thread_online.htm-----版内在线信息 
todayinbbs.htm--------今日到访会员 
vote.htm-----------------投票
PW首页一些常用变量

论坛 
论坛名字: $db_bbsname 
论坛公告: $notice 
会员名: $windid 
当前时间: $ft_time 
统计 
今日帖子: $tposts 
昨日帖子: $yposts 
最高日帖子: $hposts 
主题数: $topics 
帖子数: $article 
会员数: $totalmember 
版块 
分类名: $cate[name] 
分类斑竹: $cate[admin] 
版块名: $forums[name] 
版块斑竹: $forums[admin] 
版块主题数: $forums[topics] 
版块文章数: $forums[article] 
版块今日帖子: $forums[tpost] 
版块描述: $forums[descrip] 
版块图标: $forums[llogo] 
最后发表 
主题名: $forums[t] 
发表者: $forums[au] 
最后回复时间: $forums[newtitle] 
信息 
在线人数: $usertotal 
在线游客数:$guestinbbs 
在线会员数:$userinbbs 
在线会员: $index_whosonline 
最高在线: 最高记录有 $higholnum 位用户同时在线,发生在 $mostinbbstime 
生日会员: $index_birth 
友情链接: $sharelink 
个人信息 
等级: $level | $db_rvrcname: $userrvrc $db_rvrcunit | $db_moneyname: {$winddb['money']} $db_moneyunit | 
$db_creditname: {$winddb['credit']} $db_creditunit | 共发表帖子: {$winddb['postnum']}上次登录时间: 
$lastlodate | IP: $onlineip 
级别: {$read[level]}精华: {$read[digests]} 
发贴威望 金钱 发帖: {$read[postnum]} 
$db_rvrcname: {$read[aurvrc]} $db_rvrcunit 
$db_moneyname: {$read[money]} $db_moneyunit 
$db_creditname: $read[credit] $db_creditunit 
在线时间:{$read[ontime]} 
注册时间:{$read[regdate]} 
最后登陆:{$read[lastlogin]} 
最后发贴的会员:$thread[lastposter]
PW WIND风格 CSS控制说明和一些基本知识

先了解一些最基本的知识 
{} 成对出现:表示一段语句 
; 分隔 
.xxx 定义 class=xxx 调用 
#xxx 定义 id=xxx 调用 
现在我们开始看wind风格的css(在header.htm中) 
我们一句句来看,先看第一句 
body {font-family: Verdana;FONT-SIZE: 12px;MARGIN: 0;color: #000000;background: #ffffff;} 
body{} 这里面是论坛整体设置 
font-family: Verdana; 是字体样式 
FONT-SIZE: 12px; 是字体大小,一般是12个象素大小 
MARGIN: 0; 外补丁 
color: #000000; 是字体的颜色 
background: #ffffff; 是背景颜色 
相关知识 
也可以用图片做背景, 
background-image: url(图片地址); 添加背景图片 
background-attachment:fixed; 背景图片固定 
background-position: center; 背景图片居中 
text-align: center; 所有字体都居中 
也可以在body中定义滚动条的样式, 
SCROLLBAR-FACE-COLOR: rgb(10,236,209); //滚动条凸出部分的颜色 
SCROLLBAR-HIGHLIGHT-COLOR: rgb(23,255,155); //滚动条空白部分的颜色 
SCROLLBAR-SHADOW-COLOR: rgb(255,116,23); //立体滚动条阴影的颜色 
SCROLLBAR-3DLIGHT-COLOR: rgb(66,93,127); //滚动条亮边的颜色 
SCROLLBAR-ARROW-COLOR: rgb(93,232,255); //上下按钮上三角箭头的颜色 
SCROLLBAR-TRACK-COLOR: rgb(255,70,130); //滚动条的背景颜色 
SCROLLBAR-DARKSHADOW-COLOR: rgb(10,0,209); //滚动条强阴影的颜色 
SCROLLBAR-BASE-COLOR: rgb(66,93,128); //滚动条的基本颜色 
Scroll = no 去掉网页中最右边滚动条 
第二句了,以后我就不说是第几句了:)了 
td {FONT-SIZE: 12px;} 
表格内的控制,包括背景,字体,字体颜色,这个不用修改 
textarea,input,select{ 
font-family: Verdana; 
font-size: 12px; 
background-color: #ffffff; 
} 
文本框,选择项,按钮的控制 
这里可以diy文本框,选择项,按钮的样式 
可以补充 
color: #cccccc; 是字体的颜色 
border:1px solid $tablecolor;边宽设置,1px是大小,solid是实线,$tablecolor是引用论坛边框的颜色 
这里textarea,input,select是放在一起设置的,也可以分开设置,如 
textarea{} 
input,select{} 
form{margin:0px; display:inline} 
这个不用修改,不用离它 
div.quote{ 
margin:5px 5px; 
border:1px dashed $tablecolor; 
padding:5px; 
background: $forumcolorone; 
line-height:normal; 
} 
你风格中的引用框的样式 
margin:5px 5px; 检索或设置对象四边的外补丁,横距和竖距,可以根据自己喜好调整 
border:1px dashed $tablecolor; 是边框属性,1px是大小,dashed是虚线,$tablecolor是引用论坛边框的颜色 
solid是实线 none是无 dotted是点线 dashed是虚线 double是双线 groove是立体线 
ridge是立体线 inset是凹线 outset是凸线 
padding:5px;是内补丁属性,margin:5px;是外补丁属性 
padding和margin可以做更具体的设置,如 
padding-top:0px;padding-bottom:0px;padding-left:5px;padding-right:10px; 
a { TEXT-DECORATION: none;} 
连接文字的控制,现在是没下划线的 
a:hover{ text-decoration: underline;} 
鼠标移上连接文字时的效果控制,现在是带有下划线的,也可以加其他效果 
img {border:0;} 
带有连接图片的边框控制,现在没边框,这个不要修改 
.banner{background: #84AACE;} 
控制 论坛头部 
.head {color: #FFFFFF;background: #84AACE;padding: 5px;font-weight:bold;} 
.head a{color: #FFFFFF;} 
控制 论坛分类啊、-=>论坛相关 
font-weight:bold; 是表示字体加粗,其他的应该都知道什么意思了吧:) 
normal : 默认值。正常的字体。相当于 400 。如果是normal的话就不用写了 
bold : 粗体。相当于 700 。也相当于 b 对象的作用 
bolder : 比 normal >粗 
lighter : 比 normal >细 
.f_one {background: $forumcolorone;} 
.f_two {background: $forumcolortwo;} 
.t_one {background: $threadcolorone;} 
.t_two {background: $threadcolortwo;} 
.r_one {background: $readcolorone;} 
.r_two {background: $readcolortwo;} 
分别是指: 
版块列表颜色一、版块列表颜色二 
文章列表颜色一、文章列表颜色二 
阅读主题颜色一、阅读主题颜色二 
变量在核心文件中设置 
.hr {border-top: 1px solid $tablecolor; border-bottom: 0; border-left: 0; border-right: 0; } 
分割线的控制,在线用户那里 
.cbg { color:#000000;background: #E5E8EA;} 
.cbg a{ color:#000000;} 
表格栏目说明的控制,就是首页的(论坛 主题 文章 最后发表 版主)那里 
.smalltxt {font-family: Tahoma, Verdana; font-size: 12px;} 
.tinytxt {font-family: Tahoma, Verdana; font-size: 11px;} 
字体的设置,smalltxt好象是右上角的多少贴子,多少会员那里的控制,tinytxt 好象横排后帖子数字体的控制, 这两个一般不用修改 
.cfont { color:#FFFFFF; } 
分类名称颜色的控制 
.fnamecolor { color:#003366;} 
板块名称颜色的控制 
.index_font{color: #3A4F6C;background-color:#EBEBEB; font-weight:bold;padding: 5px;} 
“我的信息”“生日会员”“友情连接”“在线会员”那几一行的控制 
.tpc_title { font-size: 12px;font-weight:bold;} 
阅读贴子时,标题的文字、粗体、大小的控制 
.tpc_content { font-size: 13px;} 
阅读贴子时,内容文字大小的控制 
.i_table {BORDER: $tablecolor 1px solid;background:#D6E3EF;} 
风格核心文件中 $yeyestyle ,如果设置的是 no 的话,就不用理它了, 
如果设置的是 yes 的话, 
中的 $i_table 就调用它了 
.tool {color:#84AACE;} 
不知道在哪里有调用它,这个不用管它 
.menu{position:absolute;} 
下拉菜单的位置,这个不要修改它
  评论这张
 
阅读(581)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018