- 肿瘤咨询在线论坛 (http://www.chinaonco.net/dvbbs/index.asp)
-- 『 电脑网络 』 (http://www.chinaonco.net/dvbbs/list.asp?boardid=55)
---- 动网皮肤制作教程（一） (http://www.chinaonco.net/dvbbs/dispbbs.asp?boardid=55&id=2209)
-- 发布时间：2004-5-18 10:51:26
-- 动网皮肤制作教程（一）
动网皮肤制作教程（一）转至咖啡吧版权归其站长!
一、准备
1.1 颜色选定：
先看看自己的坛子是什么类型的，文学类的？休闲类的？还是什么其它的，千万不要盲目跟风，比如现在流行Macintosh的配色，大家就全都用Macintosh的配色，那再好看配色，也不好看了。所以一定要根据自己的主题内容来选定，比如文学类的bbs，就适合用一些较沉稳、较素的颜色，像墨绿色、棕色这些都可以，再用白色，或比主色稍淡一些的颜色搭配，就可以了~~~要是像偶站点那样的bbs，就可以用一些比较跳跃的颜色，比如：橙色、宝石兰之类的，再加上一些其它的淡色做搭配也是非常不错的。
1.2 创建VI
选定好自己的主色以后，一定要做一个VI配色表，颜色不一定要多，有5、6种就可以，自己画上色块，然后标注其色是主色、辅色、衬色、配色、连接、文字，有这么几种就可以了。拿我自己站点做个比方吧（htp://www.kafe.cn），大家进入封面页以后，可以看到，背景的较深的就是衬色，而较潜一些的就是主色，那个绿色（偶给它起名叫橄榄绿），就是做为配色出现的。还有辅色，就是黑色的边框啊~~~下脚注的深兰色。
只有把这些非常重要的颜色记下来，才能保证后面的制作会非常顺利。
二、着手制作
2.1 确定尺寸
这里偶要说的是，你准备把自己的bbs做成以百分比的形式显示呢（现在大家看到动网的就是叫做百分比显示），还是做成像素显示（就是偶那样的）。
如果是百分比的呢，就先在dreamweaver里做一个一行三列表出来，把宽设为97%或者相对小一些、大一些的数值。像素的话，就直接写数值就可以，一般800＊600显示下，宽度设为778是宽度満屏，1024＊768下，1004是宽度満屏，自己根据情况来设定，当然也可以用SP2中CSS支持变量的新特性，把宽度变量设置为{$width}。这个表就做为你“skin”的表头装饰。接着打开photoshop，先做一个像这样的小图
，就当做表头的左上角，再做一个右上角像这样的
，然后从左上角小图中的右侧copy下一个宽度为1，高度与图相同的图片来。然后把他们分别保存文件名为：左上－“top_left.gif”右上－“top_right.gif”上中－“top_center.gif”。保存好以后，把平台转到dreamweaver下，在你的表格第列中，插入图片“top_left.gif”并设置这列宽度为“top_left.gif”的宽度，接着，在第二列中，设置其背景为“top_center.gif”，最后，在你的第三列表格中插入“top_right.gif”并设置列宽为“top_right.gif”的宽度，这样，你的表头就已经做好了。
接著，继续做我们的下表头，其实和制作上表头的方法一样，同时在刚才的文件下，再建立一个一行三列的表格，把平台转到PS中，制作这样一个小图
，保存为“bottom_left.gif”，用PS的水平翻转，就可以得到这样一张图了，我们就把它保存为“bottom_right.gif”。最后就是制作“bottom_center.gif”，方式就和我们制作上表头时候的一样啦~~
到这里，我们制作skin的一大步就算已经走出来了，最后，记得整理下文件，把你的HTML文件保存为你的皮肤名字，比如：cafe.html之类的，然后这6张图片保存到skin/cafe目录下，skin后面的就是你的皮肤名字，随便起什么都好，但一定要记得把html文件里的链接修改对，不过像这一步，最好在你开始做skin之前就做好，这样会省去不少麻烦。
2.2 建立层样式表（CSS）
进入动网台后，外观设置 -> 风格界面模板总管理中，建立一个新的模板，就是下面那里的“新建模板”，我们就起名为cafe好了。
然后，在上面那里选择我们刚才建立的模板“cafe”，按“编辑”，就会打开新的模板组，我们先来修改基本的CSS属性，按“当前模板CSS设置(Forum_CSS) -> 修改CSS样式”进入“CSS样式管理”面板，可以将其它不用的模板都删除掉，留下第一个和最后一个空的就可以了。点击第一个CSS模板后面的“修改CSS内容”按钮。我们就会看到下面这一大堆CSS，想必菜鸟看了会晕倒过去，那偶就来帮大家解释一下每CSS的作用。
A:link,A:active,A:visited{
TEXT-DECORATION:none ;
Color:#000000
}
A:hover{
TEXT-DECORATION: underline;
Color:#4455aa
}
上面这指的是鼠标在对链接文字进行操作、操作后和操作时所产生的效果
A属性
link：文字连接的默认颜色、效果等
active：点击时产生的效果
visited：点击后的效果
hover：鼠标悬停在链接上时所产生的效果
Decoration属性
none：无效果
underline：下划线效果
大家可以根据这两种常用属性来配出喜欢的链接文字效果。
BODY{
FONT-SIZE: 11.5px;
COLOR: #000000;
FONT-FAMILY: Verdana,宋体;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
body：指HTML内<body>标签的属性
font-size：字体大小，单位分为px（象素）和pt（磅），一般我们常用的是象素尺寸为12px或者11.5px，磅的大小为9pt或者8pt，两种单位最终显示的大小都是一样的，用哪种单位就看个人习惯了。
color：默认情况下是字体颜色，颜色大家可以使用RGB颜色，也可以使用16位颜色代码。推荐使用16位颜色代码。
FONT-FAMILY：字体样式，大家会经常看到在font-family设置里一下出现3种字体（例：FONT-FAMILY: Verdana,Tahoma,宋体），一般前两种为英文字体，最后的是中文字体。英文字体设置两种是为了防止如果客户端没有第一种字体，马上使用第二组英文字体。大多数情况下，中文操作系统中都会支持宋体，所以我们也就不必要再设置第二种中文字体了。
scrollbar：指滚动条
scrollbar-face-color：表面颜色
scrollbar-highlight-color：高亮区颜色
scrollbar-shadow-color：阴影颜色
scrollbar-3dlight-color：3D颜色
scrollbar-arrow-color：箭头颜色
scrollbar-track-color：轨道颜色（滚动条底色）
scrollbar-darkshadow-color：深阴影颜色
IE5.5以后的版本都会支持这种自定义滚动条的效果。
font{
line-height : normal ;
}
font：为字体属性
line-heigt：为行距属性，normal为默认，当然这里也可以用px或者pt来设置行距。
TD{
font-family: Verdana,宋体;
font-size: 11.5px;
line-height : 15px ;
}
TD ：表内横向格（行）
th{
background-image: url(Skins/Default/css/default/bg1.gif);
background-color: #4455aa;
color: white;
font-size: 12px;
font-weight:bold
}
TH：表内纵向格（例）
background-image：背景图片
background-color：背景颜色
Color：默认为文字颜色
font-size：字体大小
font-weight：字形，一般有4种属性：normal（默认）、bold（加粗）、bolder（特粗）、lighter（特细）
td.TableTitle2{
background-color: #E4E8EF;
}
这个属性是用在DVBBS用户列表，有“所有用户列表”字样那里的颜色。
td.TableBody1{
background-color: #FFFFFF;
line-height : normal ;
}
这个是用在DVBBS两种穿插颜色中的第一主色属性。
td.TableBody2{
background-color: #E4E8EF;
line-height : normal ;
}
这个当然就是第二种啦~~
td.TopDarkNav{
background-image: url(Skins/Default/css/default/topbg.gif);
}
这是顶部表格的上背景图片
td.TopLighNav{
background-image: url(Skins/Default/css/default/bottombg.gif);
}
这是顶部表格的下背景图片。
这里要说明的是，如果你像我一样，把DVBBS的整个顶部表格都换掉了，那上面这两个属性就可以不用再管他，或者直接删掉。
td.TopLighNav1{
background-image: url(Skins/Default/css/default/tabs_m_tile.gif);
}
这里就是导航栏的背景图片了~~
td.TopLighNav2{
background-color:#FFFFFF
}
这个属性也是顶部表格的，它是顶部表格的背景颜色，同样，如果你把整个表格都改了，也可以不用管它了。
.tableBorder1{
width:{$width};
border: 1px;
background-color: #6595D6;
}
这里DVBBS的表格边线属性（border为边线宽度）
.tableBorder2{
width:{$width};
border: 1px #DEDEDE solid;
background-color: #EFEFEF;
}
这个是DVBBS的第二导航栏属性，其border中的solid为边线是直线，也可以设置成其它的，比如dotted（以点组成的虚线）、dashed（以线段组成的虚线）等等。。。
#TableTitleLink A:link, #TableTitleLink A:visited, #TableTitleLink A:active {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
}
#TableTitleLink A:hover {
COLOR: #FFFFFF; TEXT-DECORATION: underline;
}
上面这一组是纵向表格内文字链接的属性。
input,select,Textarea,option{
font-family:Tahoma,Verdana,"宋体";
font-size: 12px;
line-height: 15px;
COLOR: #000000;
}
这个是DVBBS的输入框、选择框、文本框、选择按钮的属性。
.normalTextSmall {
font-size : 11px;
color : #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
这个为DVBBS下脚注的字体样式。
.menuskin {
BORDER: #666666 1px solid;
VISIBILITY: hidden;
FONT: 12px Verdana;
POSITION: absolute;
BACKGROUND-COLOR:#EFEFEF;
background-image:url("Skins/Default/dvmenubg3.gif");
background-repeat : repeat-y;
}
这是DVBBS的下拉菜单属性，Borded是边框属性，BACKGROUND-COLOR是背景颜色属性，background-image是背景图片。
.menuskin A {
PADDING-RIGHT: 10px;
PADDING-LEFT: 25px;
COLOR: black;
TEXT-DECORATION: none;
behavior:url(inc/noline.htc);
}
这里是当鼠标鼠标移动到下拉菜单上所产生的效果，PADDING-RIGHT是文字右边距，PADDING-LEFT为左边距，大家可以根据自己的需要来调整。
#mouseoverstyle {
BACKGROUND-COLOR: #C9D5E7; margin:2px; padding:0px; border:#597DB5 1px solid;
}
这是下拉菜单内表格的属性
#mouseoverstyle A {
COLOR: black
}
这是当鼠标移动到下拉菜单上，文字产生的效果。
.menuitems{
margin:2px;padding:1px;word-break:keep-all;
}
这是下拉菜单的基本属性。
a.navlink:link {color: #000000; text-decoration:none}
a.navlink:visited {color: #000000; text-decoration:none }
a.navlink:hover {color: #003399; text-decoration:none }
上面这一组为导航栏的文字链接属性。
.BrightClass{
background-color: #D7D7D7;
}
呃。。。这个我也不知道应该是哪里的。。。
/*
编辑器特效CSS样式
*/
div.quote{
margin:5px 20px;
border:1px solid #CCCCCC;
padding:5px;
background:#F3F3F3 ;
line-height : normal ;
}
这里为引用其他人发言时，引用框的效果。
div.HtmlCode{margin:5px 20px;border:1px solid #CCCCCC;padding:5px;background:#FDFDDF ;
font-size:12px;font-family:ncursive;line-height : normal ;overflow:auto
}
这个是引用HTML字段的效果。
好了，累了我一半死，这么多CSS，每一个设定作用都给大家介绍完了，下面我们切入正题~~
增加body属性
在动网的body属性中，没有设置background-color（背景颜色），这样会导致在个别客户端设置了自己的背景颜色的情况下，和自己网站的风格极为不协调的效果。所以我们要设置一下背景颜色。以下还为我的站点为例。
设置background-color: #EE9C00，如果还想加上一张背景图片的话，可以再加一条属性，background-image: url({$PicUrl}bg_01.gif)，这里面的{$picurl}也是在SP2中新加入变量，这个变量需要在“图片包路径”中设置好。我们的背景图片就给它起名叫“bg_01.gif”好了~
接着，我们还可以再加入
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
这四项属性，即：网页左边距、上边距、右边距和下边距，这些都是相对于浏览器边缘的。在这里我们设置它的值都为0px。
然后我们调整td.TopLighNav1属性中的背景图片，在PS中，建立一张宽度为1px，高度为22px的图片，用渐变工具填充它，就可以得到一张这样的图片
javascript :window.open(this.src); src="http://www.kafe.cn/club/Skins/Cafe/bg_02.gif" onload="javascript :if(this.width>screen.width-500)this.style.width=screen.width-500;" border=0>（我为了大家看着方便，就把这张图的宽度加长了），仍然把它保存到我们的皮肤目录下，命名为“bg_02.gif”。在这里，我们不一定非要用张这样的图片，用这种图片也只是为了让导航栏更有立体感，你可以把 background-image删除，改为 background-color，直接写一个颜色属性就可以了。
接着我们调整.tableBorder1属性，大家可以看到，上面的“top_left.gif”“top_right.gif”等6张图片，中的黑色线条离边缘位置还有2px的宽度，所以我们在这里要给.tableBorder1再加几个属性：
border-right-width: 2px;（右边线宽度）
border-left-width: 2px;（左边线宽度）
border-right-style: solid;（右边线样式：实线）
border-left-style: solid;（左边线样式：实线）
border-right-color: #F4C160;（右边线颜色）
border-left-color: #F4C160;（左边线颜色）
接着将background-color: #6595D6中颜色修改为#000000（黑色），这样，就可以让我们的表格边线和图片对齐了。如果你图片中没有那2px的距离也可以不用改边线宽度，直接把background-color修改为你的边线颜色就可以了~
-- 发布时间：2004-5-18 10:51:56
-- 大家睁大眼睛 别再上当
动网皮肤制作教程（二）转至咖啡吧
往下看，我们可以修改下#TableTitleLink项，在DVBBS默认的color属性中为#FFFFFF（白色），这样配起我们的skin来会比较不协调，所以我们修改color为属性为#000000（黑色）
最后，就是修改一下下拉菜单的背景图片，在.menuskin中，我们可以看到background-image的属性是url("{$PicUrl}dvmenubg3.gif")，转到PS中，我们来做一张这样的图片
，起名为“menubg_01.gif”将它保存到我们的cafe目录下，修改background-image的属性为url("{$PicUrl}menubg_01.gif.gif")。
按一下CSS文本框中的“提交”按钮，至此，我们CSS建立工作就完成了~~~
2.3 添加skin到界面中
继续在“风格界面模板总管理”中编辑我们的cafe skin，先打开“当前模板主模块(Main_Style)”中的“基本设置”调整“表格宽度”为770，后面什么单位都不要加。然后退回“风格界面模板总管理”界面，按“当前模板主模块(Main_Style)”的“界面风格”，进入后，看“Dvbbs.mainhtml(3)”这里，这个是顶部短信广告部分，对于我们做skin来说会比较难看，所以我们将文本框中整个内容都删掉就可以了，只保留“<!--顶部短信广告部分-->”这个注释，以避免将来我们需要修改时不知道这是什么。
Dvbbs.mainhtml(4)中，就是DVBBS的顶部表格了，大多数情况下，我们可以把这里面都删掉到了，同样保留注释部分。接着在DW（后面我就把dreamweaver简称DW，photoshop简称PS了）中，建立一个如下的表格。
<!--顶部表格-->
<table width="778" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img width="778" height="4"></td>
</tr>
</table>
<table width="770" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="770" height="180" name="Title" id="01" vspace="0" hspace="0">
<param name=movie value="Skins/Cafe/title_01.swf">
<param name=quality value=high>
<param name="SCALE" value="exactfit">
<param name="wmode" value="transparent">
<embed src="Skins/Cafe/title_01.swf" width="770" height="180" hspace="0" vspace="0" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Title" scale="exactfit" wmode="transparent">
</embed></object></td>
</tr>
<tr>
<td>
<table width="770" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#0D9952">
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width="172"><a href=# onClick="window.external.AddFavorite(\'http://bbs.sadcity.net\', \'塞思在线)"><img src="Skins/Cafe/bar_01_bbs.gif" width=172 height=38 border=0 alt="Add Quiescence CafeBar to My Favorites!"></a></td>
<td width="32"><img src="Skins/Cafe/spacer.gif"></td>
<td width="82"><a href="../main.asp"><img src="Skins/Cafe/bar_03.gif" width=82 height=38 border="0"></a></td>
<td width="92"><a href="../club"><img src="Skins/Cafe/bar_04.gif" width=92 height=38 border="0"></a></td>
<td width="92"><a href="../mycg"><img src="Skins/Cafe/bar_05.gif" width=92 height=38 border="0"></a></td>
<td width="89"><a href="../music"><img src="Skins/Cafe/bar_06.gif" width=89 height=38 border="0"></a></td>
<td width="92"><a href="../literature"><img src="Skins/Cafe/bar_07.gif" width=92 height=38 border="0"></a></td>
<td width="117"><a href="../whoami"><img src="Skins/Cafe/bar_08.gif" width=117 height=38 border="0"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#E0DED8">
<tr>
<td height="3" bgcolor="#5C5B5B"><img src="Skins/Cafe/spacer.gif" width="1" height="3"></td>
</tr>
<tr>
<td height=22 align="right" valign="middle" class=TopLighNav1 id="Menu">{$menu} </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
请注意上面代码中的红色加粗部分，这里是DVBBS的是导航栏变量部分，一定要注意加上，如果不加的话，导航栏是无法显示出来的