返回列表 发帖
我也在做啊

郁闷中

TOP

我非常需要哦~!

TOP

TOP

谢谢

TOP

TOP

TOP

TOP

好帖啊

TOP

来了就看下

TOP

一、准备
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修改为你的边线颜色就可以了~~

TOP

返回列表

Powered by Discuz! 7.2   论坛QQ群:逐梦论坛群

© 2001-2021 Comsenz Inc. 鲁公网安备 37120302000001号