以文本方式查看主题 - 肿瘤咨询在线论坛 (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,先做一个像这样的小图 接著,继续做我们的下表头,其实和制作上表头的方法一样,同时在刚才的文件下,再建立一个一行三列的表格,把平台转到PS中,制作这样一个小图 到这里,我们制作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的图片,用渐变工具填充它,就可以得到一张这样的图片 接着我们调整.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中,我们来做一张这样的图片 按一下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的是导航栏变量部分,一定要注意加上,如果不加的话,导航栏是无法显示出来的 |