查看完整版本
风格制作教程
-
2006-09-23 22:47YiYoRain====================
风格制作工具
====================
FrontPage2003(FP)
主要用于可视化模板编辑.基本模板代码复制到FP里面都可以看出大致的样子.
制作Table表格也靠它.
这里不用Dreamwaver是因为模板代码不是完整的HTML,模板代码复制到DW里面经常是什么都看不到.
如果你用FP,把模板代码复制进去,基本就可以看出是哪部分的模板了.
Fireworks(FW)
作图工具.配色也还可以.网页出图这个最好了.
PS做网页图片不是十分方便,我不用.
HyperSnap(HS)
截图工具.最终就靠它做风格演示.
UltraEdit32(UE)
字符编辑软件,代码的替换操作等.通常我用来写PHP程序.
当然,做风格也不是一定要这些.
例如MX后台的模板预览可以代替FP.
画图也可以代替FW(这个...还是用PS/CS代替吧)
记事本代替UE.
用PrintScreen键就可以直接截图,然后复制到画图里面保存.
仁者见仁,智者见智,自己选择用一些工具软件吧.此帖由 YiYoRain 在 2007-10-26 15:48 进行编辑... -
2006-09-23 22:50YiYoRain====================
HTML/CSS基础
====================
如果你懂HTML和CSS,这部分就略过.
HTML和CSS学习需要你自己花功夫.不是这个部分就能够教会的.
这里只是教一些基本的HTML/css基础.
----------
-HTML-
---------
连接<a>
代码:<a target='_blank' href='./../../&'#039;连接地址'>连接显示的文字,点击后新窗口打开</a>
<a target='_self' href='./../../&'#039;连接地址'>连接显示的文字,点击后在本窗口打开</a>
粗体<b>
代码:<b>这里的字显示为粗体</b>
换行
代码:我是老大
HTML里其实我和老大在一行
代码:我是老大
<br />我在老大下面
代码:我是老大
<span>HTML里我也和老大在一行</span>
代码:我是老大
<div>HTML里我在老大下面</div>
图片<img>
代码:<img src='图片地址' alt='说明' width='宽度' height='高度' />
通常省略高度和宽度成为
<img src='图片地址' alt='说明' />
关于<div>和<span>
这是MX风格里面很大的一部分代码.
可以去看网上教程,这两个需要好好学习.
align/valign/width/height
代码:<div align='center'>这里的字居中显示</div>
<div valign='top' style='height:100px'>这里的在顶部对齐</div>
<div style='height:100px;width:100px;border:1px solid #999999;'>这里划了一个100*100的框</div>
CLASS的使用
代码:<div class='wwborder'></div>
<span class='wwborder'></span>
还可以用在TD,IMG,INPUT等多种元素上
--------
-CSS--
--------
代码:.thead {font-weight:bold;font-size:14px;padding:4px;border:1px dashed #6C6C6C;background-color:#000000;}
.thead a:link, .thead a:visited, .thead a:active {text-decoration:none;color:#000000; }
.thead a:hover{text-decoration:underline;color:#000000;}
对以上一段CSS代码进行解释,希望你能明白一些CSS
.thead 选择器(Selector) 这个名字就可以用来指定样式
代码:<div class='thead'><a href="#">标题</a></div>
font-weight:bold;字体粗体
font-size:14px;字体大小14象素
padding:4px;距离边框4象素
border:1px dashed #6C6C6C;边框粗1px,虚线,色号#6C6C6C
background-color:#000000;背景色白色
.thead a:link, .thead a:visited, .thead a:active {text-decoration:none;color:#000000; }指定超链接字体为白色,无装饰
.thead a:hover{text-decoration:underline;color:#000000;}当鼠标在超连接时显示的样式-下划线,字体白色
DIV里面显示的"标题"为白色,14px,DIV带有虚线边框.当鼠标经过'标题'时带有下划线.
都是基础的英语,应该看的懂吧....此帖由 YiYoRain 在 2006-09-23 23:13 进行编辑... -
2006-09-23 22:51YiYoRain====================
正式开始转换风格举例
====================
====================
准备工作
====================
下载风格包
准备图片(LOGO,发贴按钮等)
MX往往要用更多图片,做好准备自己作图.
====================
新建基础风格
====================
后台->风格管理->添加风格
然后复制一个默认风格的图片包去images/style_x
添加的风格->设置图片包地址
(演示我用的是安装时的默认风格,一样的)
====================
复制/替换图片
===================
把相应的DZ风格图片替换MX的图片,这步总不要我教吧?
替换的图片有tcat/thead两个标题栏背景
4个发贴按钮
同时把风格显示需要的图片也复制进去
替换以后
此帖由 YiYoRain 在 2007-10-26 15:43 进行编辑... -
2006-09-23 22:55YiYoRain==================
CSS修改
==================
首先,最好你能找到原网站,或者一个演示风格网站
这样你可以省去很多麻烦(可以直接复制代码,CSS等)
这里用这个风格的开发网站http://www.yutheme.com/dz4/index.php?styleid=7
浏览器->编辑->编辑,FP里面就有这个页面了
开始下一步工作,修改CSS
后台->风格管理->新建风格->编辑CSS
小栗的css说明http://www.molyx.com/showthread.php?t=12009
例如body这个
MX的是
代码:body {font-family:Tahoma, Verdana, Georgia, Courier, Simsun;font-size:12px;color:#000000;margin:0px;padding:0px;}
去掉背景色属性
+上DZ里面的BODY定义
代码:body { scrollbar-base-color: #feffff; scrollbar-arrow-color:; font-size: 11.5px; background-color: #B4C3CB;background-image: url(images/emera/bg.gif);background-repeat: repeat-x;
处理图片地址,最终的body就是
代码:body {font-family:Tahoma, Verdana, Georgia, Courier, Simsun;font-size:12px;color:#000000;margin:0px;padding:0px;scrollbar-base-color: #feffff; scrollbar-arrow-color:; background-color: #B4C3CB;background-image: url(<#IMAGE#>/bg.gif);background-repeat: repeat-x; }
******************
处理图片地址
******************
[quote]
对于一般把图片文件名前的路径都替换成<#IMAGE#>
例如
background-image: url(<#IMAGE#>/bg.gif);
而对于模板里面的图片地址
要改成这样
<img src='./../../&'quot;images/<#IMAGE#>/head_left.gif" width="29" height="30" />
******************[/quote]其他还需要修改的有
.wrapper
width:95%改成width:930px
(一般都是适应1024浏览模式,这个DZ源风格是自适应的,但是这个自适应表格在XHTML里不能用,只好改成定宽)
a的定义
用DZ的替换即可
.tcat
一般和DZ的category对应 直接用DZ的定义替换MX的TCAT定义
.thead
和header对应 注意还有thead a的链接定义也要相应修改
bginput和input
和DZ的input对应,直接替换
********************
颜色和边框
********************
[quote]一个个找CLASS修改是非常不明智的选择
对于颜色和边框颜色
可以直接替换CSS中的色号
例如在UE中 直接搜索替换 #156BC3(MX默认风格的边框颜色)替换成#799fb8 (现在用的边框颜色)[/quote].wttborder
带有1px边框 去掉 .wbborder/.wtborder也一并去掉
修改好以后的几个选择器
代码:a:link, a:visited, a:active {text-decoration:none;color:#54819D; }
a:hover {text-decoration:underline; }
.bginput, select, textarea {font: 11.5px Tahoma, Verdana; color: #5181a0; font-weight: normal; background-color:#f9f9f9;border-left:1px solid #c9c9c9;border-top:1px solid #c9c9c9;border-right:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2; }
input {font-family:Tahoma, Verdana, Georgia, Courier, Simsun;font-size:12px;color:#000000;font-weight:normal;background-color:#F5F7FA; }
.wrapper {text-align:left;margin:15px auto 0px auto;width:930px; }
.thead {font:12px Tahoma, Verdana;color:#3f7292;font-weight:bold;background-color:#E6F0F3;background-image:url(<#IMAGE#>/headbg.gif);background-repeat:repeat-x;background-position:top;height:22px; }
.thead a:link, .thead a:visited, .thead a:active {text-decoration:none;color:#3f7292; }
.tcat {font:11.5px Tahoma, Verdana;color:#799fb8;background-color:#fcfdfd;border-bottom:1px solid #f2f3f3; }
.tcat a:link, .tcat a:visited, .tcat a:active {text-decoration:none; }
这里只完成了部分,还有一些在接下来的修改中继续完成此帖由 YiYoRain 在 2007-10-26 15:44 进行编辑... -
2006-09-23 22:58YiYoRain====================
好了 开始进入模板吧
====================
=====header======
把DZ模板导航条以上的部分都复制到新的页面中
替换图片地址
编辑MX模板header->body->把<div id=header>***</div>部分替换掉
你会看到这样的局面...
我们看DZ页面的HTML第一句
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
而MX第一句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio......l.dtd">
这句决定了它们的代码是不相容的.
接下来开始修正它.
***********************
获得代码对应CSS样式名称
**********************
[quote]想要修改某一部分样式,怎样知道是哪个CSS控制它呢?
推荐使用FP2003
点你想要修改的部分,标签栏里面会显示作用于它的标签
找到最近的一个CSS标签,一般就是作用于它的CSS
然后去后台找到那个CSS标签,修改相应属性即可
当然,它的样式可能继承自父样式
如果最近的样式标签没有对应的属性,再往前找一个标签试试 [/quote]
把没有定义宽度的td加上宽度(加减法自己做)
处理好以后
接下来要给论坛加背景
原来是自适应table表格 现在要改成定宽的div表格
动动脑筋 不能按原样拷贝了
重新做一个背景文件吧
table_bg.gif 大小930*10 内容就是论坛的横向背景
新建class
代码:.table_bg{background-image: url(<#IMAGE#>/table_bg.gif);background-position:center;background-repeat: repeat-y;}在header->body最后+
.pad_div{padding-left:18px;padding-right:18px; }
代码:<div class='table_bg'><div class='pad_bg'>
在footer->footer前+
代码:</div></div>
这样就把整个论坛的背景+好了
(footer有自己的背景,所以在footer前结束背景)
=====index_top======
submenu border归零
wbborder 背景色删除
#hinfo+属性
color:#6B6B6B;padding-left:18px;padding-right:18px;
这样index_top基本完成
=====memberbar=====
修改#submenu
去掉背景色
把DZ风格里面的table_bg.gif重命名成submenu_bg.gif复制到风格文件夹
修改成以下
代码:#submenu {color:#6B6B6B;background-image: url(<#IMAGE#>/submenu_bg.gif);background-position:top;background-repeat: repeat-x; }
#submenu a:link, #submenu a:visited, #submenu a:active {text-decoration:none;color:#6B6B6B; }
#submenu a:hover {text-decoration:underline;color:#6B6B6B; }
(加上刚才的过渡背景)
submenu色彩对应的DZ也是nav里的色彩,你可以对比一下原来MX的submenu,看看修改了哪些地方
此帖由 YiYoRain 在 2007-10-26 15:45 进行编辑... -
2006-09-23 23:00YiYoRain==================================
到此基本已经有些样子了,加油加油!
==================================
继续往下,footer和league部分
把DZ的footer部分表格复制新网页
删掉内容
替换图片地址
把左右两个单元格合并成一个大单元格
然后进入footer模板 把</div>和</body></html>之间的代码(footer全部内容)复制到那个单元格里面
大概就是这样了
修改#footer 去掉底色 外围边框和底色对应的是wborder 删掉边框和背景色属性
图片联盟对应的CSS是pformstrip
复制一下tcat{}的内容到pformstrip{}里面就可以了
row1 row2因为关系到发贴背景的问题 复制DZ样式里面的altbg1{}内容
此帖由 YiYoRain 在 2007-10-26 15:45 进行编辑... -
2006-09-23 23:05YiYoRain================================
进入论坛版面
================================
这里简直一团糟 唉~
更可恶的是,有些东西竟然莫名其妙的消失了(主要是版面规则和页数)
(如果没有消失东西,恭喜你,你这里基本什么都不用做)
这里是我做了这么多风格以来最莫名的地方,明明什么都没去动,部分东西就消失了
同样的情况还出现在faq.php/showthread.php
而选中以后又会出现,猜测原因可能是DIV表格的不稳定性.
我一般用table表格替代DIV.
我用以前做风格的sub_forum fourm_top forum_end forum_rule代码直接替换默认的模板
修改公告对应的样式row3
基本完成
================================
进入帖子
================================
大部分CSS已经修改了,这里基本上也没什么东西要改了
查露补缺,修改一些CSS,使得它显示的美观一些
帖子样式对应postcontent
签名样式对应signature
原来都是默认黑色 这里+上字体颜色
帖子+color:#3c6c83;比较深的颜色
前面+color:#799fb8;比较浅的颜色
同时给row1/row2+color:#3c6c83; 使得用户信息和发贴颜色一致
===============================
其他页面
===============================
这里是短信/资料/用户列表/帮助这几个页面的显示情况
经过以上的修改实例,你应该会自己修改这几个页面使得它显示正常.
基本步骤
FP里面得到要修改部分的CSS->后台修改相应CSS此帖由 YiYoRain 在 2007-10-26 15:46 进行编辑... -
2006-09-23 23:07YiYoRain===============================
完成功能
===============================
1.菜单栏
header->body
把原来
代码:<span class="bold">游客: </span><a href="register.php">注册</a>┇<a href="logging.php?action='./../../l'ogin">登录</a>
┇<a href="member.php?action='./../../l'ist">会员</a>
┇<a href="stats.php">统计</a>
┇<a href="faq.php">帮助</a>
替换成菜单栏(从默认风格body里面找的)
代码:<div id='headernav'>
<if="$bbuserinfo['id']">
<if="$bbuserinfo['cancontrolpanel']"><a href='{$bboptions['adminurl']}/' target='_blank'>{$lang['_admincp']}</a> |</if>
<if="$bbuserinfo['is_mod']"><a href='moderate.php?{sessionurl}' title='{$lang['_modcpdesc']}'>{$lang['_modcp']}</a> |</if>
<a href='usercp.php?{sessionurl}' title='{$lang['_usercpdesc']}'>{$lang['_usercp']}</a> |
<a href='private.php?{sessionurl}'>{$lang['_pm']}</a> |
<a href='bank.php?{sessionurl}'>{$lang['_bank']}</a> |
</if>
<a href='showaward.php?{sessionurl}'>{$lang['_award']}</a> |
<a href='faq.php?{sessionurl}'>{$lang['_faq']}</a>
</div>
2.风格选择提到上面
index->index_top
把原来的搜索表单
代码:<form action='search.php' method='post'>
<input type='hidden' name='s' value='{sessionid}' />
<input type='hidden' name='do' value='search' />
<input type='text' size='30' name='keywords' onfocus="this.value=''" value='{$lang['quicksearch']}' class='bginput' />
<input type='submit' value='{$lang['_search']}' class='button' />
</form>
替换成风格表单(是从footer里面复制过来的)
代码:<form action="{scriptpath}" method="post">
<select name="styleid" onchange='submit()'>
{style_list}
</select>
<input type='hidden' name='s' value='{sessionurl}' />
</form>
3.修正头部的搜索表单
复制过去的头部搜索表单是DZ的,不能用在MX里面
其实只要加上几个hidden的参数和表单就可以完成了(参照默认风格的搜索表单做的修改)
另外,提交的文本框名字也是不一样.
这是完成后的搜索部分,你可以对比一下原来的代码.
代码:<td width="11" height="29"><img src="images/<#IMAGE#>/input_left.gif" width="11" height="29" /></td>
<td background="images/<#IMAGE#>/input_bg.gif" width="80">
<form action='search.php' method='post'>
<input type='hidden' name='s' value='' />
<input type='hidden' name='do' value='search' />
<input name="keywords" type="text" style="font-size:11.5px;color: #848484;background-color:transparent;border:0px;height:18px;width:110px;padding-top:3px;" value="{$lang['quicksearch']}" onFocus="if(this.value=='{$lang['quicksearch']}')this.value='';" onBlur="if(this.value=='')this.value='{$lang['quicksearch']}';" /></td>
<td width="13" height="29"><img src="images/<#IMAGE#>/input_right.gif" width="13" height="29" /></td>
<td width="22" height="29"><input type="submit" name="searchsubmit" style="cursor:hand;background:url(images/<#IMAGE#>/go.gif);height:29px;width:22px;border:0px" value=" " /></form></td>
原代码
代码:<td width="11" height="29"><img src="images/emera/input_left.gif" width="11" height="29" /></td>
<td background="images/emera/input_bg.gif" width="80">
<input name="srchtxt" type="text" style="font-size:11.5px;color: #848484;background-color:transparent;border:0px;height:18px;width:110px;padding-top:3px;" value="● ● ● ● ● ●" onFocus="if(this.value=='● ● ● ● ● ●')this.value='';" onBlur="if(this.value=='')this.value='● ● ● ● ● ●';" /></td>
<td width="13" height="29"><img src="images/emera/input_right.gif" width="13" height="29" /></td>
<td width="22" height="29"><input type="submit" name="searchsubmit" style="cursor:hand;background:url(images/emera/go.gif);height:29px;width:22px;border:0px" value=" " /></td>
<td width="59" height="29"><a href="search.php"><img src="images/emera/a_search.gif" alt="高级搜索" width="59" height="29" border="0" /></a></td>
<td width="30" height="29"><img src="images/emera/index_right.gif" width="30" height="29" /></td>
***********************
显示变量名称
***********************
[quote]你可以发现风格搜索文本框修改以后显示的是'快速查找...'
原来'● ● ● ● ● ●'被{$lang['quicksearch']}代替了
在模板里面,显示变量内容方法就是{变量名}
其他常用的还有
代码:{$bbuserinfo['id']}显示用户ID[/quote]
{$bbuserinfo['name']}显示用户名
-
2006-09-23 23:08YiYoRain=====================
开发MX风格
=====================
以上写了转换风格,希望你能从中学到一些有用的东西.
当然,转换风格永远用的是别人的,最好当然是自己开发风格.
我没有太多开发经验.
一般开发过程是:
构思排版,这步我是在纸上完成的.
然后制图.用FW做完整个页面的图,这步同时也会完成配色工作.
如果你有美工,你可以让TA在图上做好配色.
输出,把各个部分图片分别保存成图片.
之后就和上面转换工作基本相同了.
个别的CSS需要自己写,只要知道效果,查一下CSS手册很快就可以完成.
风格成功的很大一部分在于配色.
下节课:
<Portal样式开发>此帖由 YiYoRain 在 2006-09-23 23:11 进行编辑... -
2006-09-23 23:23raindown支持支持！！~~咱也沙发一把，哇哈哈哈哈~~
-
2006-09-24 00:23砍死鬼子
来molyx这么久，这是我见过的最好的教程贴子
好人一生平安~
-
2006-09-24 00:37Mr.热血ding
-
2006-09-24 04:41CaThi
不顶还对的住吗？
兄弟们来啊。顶
-
2006-09-24 12:45sylj001
好帖，顶～！
慢慢学习
-
2006-09-24 16:09奥动
谢谢楼主....
老早就想学...
-
2006-09-25 01:42playease不错.......你辛苦
-
2006-09-25 09:20bangbang支持！辛苦！谢谢！
-
2006-09-25 13:13rochack老兄．．厉害．．．学习中．．．
-
2006-09-27 01:34shinhakyun一定要支持。。。我喜欢。
-
2006-09-29 21:45cctv808呵呵，有教程了，好高兴啊！
Powered by MolyX © 2004-2008 HOGE Software