一、准备
1.1 颜色选定：
先看看自己的坛子是什么类型的，文学类的？休闲类的？还是什么其它的，千万不要盲目跟风，比如现在流行macintosh的配色，大家就全都用macintosh的配色，那再好看配色，也不好看了。所以一定要根据自己的主题内容来选定，比如文学类的bbs，就适合用一些较沉稳、较素的颜色，像墨绿色、棕色这些都可以，再用白色，或比主色稍淡一些的颜色搭配，就可以了~~~要是像偶站点那样的bbs，就可以用一些比较跳跃的颜色，比如：橙色、宝石兰之类的，再加上一些其它的淡色做搭配也是非常不错的。
1.2 创建vi
选定好自己的主色以后，一定要做一个vi配色表，颜色不一定要多，有5、6种就可以，自己画上色块，然后标注其色是主色、辅色、衬色、配色、连接、文字，有这么几种就可以了。 只有把这些非常重要的颜色记下来，才能保证后面的制作会非常顺利。
二、着手制作
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修改为你的边线颜色就可以了~~ |
鲁公网安备 37120302000001号
