改版后的校内网涂鸦板制作详细教程<校内动力网www.popcup.cn收集整理>
各位同学：
本着自由开放的原则，我们一直尽可能的减少对涂鸦板的限制，让同学们对个人页面能够进行最大限度的美化。但是随着用户的增加，在涂鸦板添加恶意代码散布广告、投放病毒的现象日益增多。校内环境日益恶化。为了给大多数同学营造一个纯净的交流环境，我们不得不选择关闭涂鸦板的html代码添加功能，但是依然可以通过涂鸦板修改CSS达到美化页面的目的。由此带来的不便我们感到非常的抱歉，感谢同学们对我们工作的支持和谅解。
  
         下面我将从零说起，大概是这样的一个过程：准备工作→Skin的构思→编写CSS→预览→调试兼容性→美化细节，预览和编写是个循环过程。我想通过本教程能够使大家了解Skin制作，不需要再用别人做的Skin，靠自己的努力把自己的校内网装饰的漂亮有个性。很振奋吧，那我们往下看……
一、 准备工作
1.1 必需的一些基础
         你要有学习知识的欲望，这个是一切的前提。但如果你还不知道什么是涂鸦板，建议你不要往下看，呵呵，开玩笑了。在修改涂鸦板的时候要细心，严格要求自己，有一定的审美观。最好熟悉一些制图软件（Potoshop、Fireworks之类）。对CSS方面要掌握一定的基本知识。CSS方面苏昱做过很不错的教程
2.2 涉及的工具
         首先你要有台电脑，制图软件Adobe Potoshop、Fireworks之类。CSS编写工具， Dreamweaver8最好不过，当然用记事本也可以，这样更容易记住代码的含义。色彩调配软件，屏幕截图软件等。

软件下载地址：
苏昱式样表中文手册2.0
Dreamweaver8 官方简体中文正式版
Fireworks
二、 构思你的Skin
2.1配色
你的Blog给人的第一印象就是视觉上的，所以说色很重要。这里主要只链接的颜色，主体背景的颜色，还有标题框的颜色等。

 
这里我们用的是白、灰、红。一般灰色是通用的，就像血型里的O型血一样。
2.2布局
 
 
如上图所示，我们可以看到整个页面的结构和DIV的前后顺序，前面的覆盖后面的（当然也可以是透明的）。
结构如下：
#container　　页面全部元素
-#header　　　顶部导航栏
-#sidebar　　 左侧导航栏
--#my-search
--#mymenu
-#widebar
--#utility
--#navigation
--#content
    ---#userRelations
       ----#userStatus
       ----#userinfo
       ----#uservisito
       ----#userfriendspecial
       ----#userfrinde
       ----#uershare
       ----#userfrienduniv
    ---#userupdates
       ----#userprofile
       ----#useralbum
       ----#userblog
       ----#classmate
       ----#usergroup
       ----#usertalk
    ---#reportlink
    ---#permalink
-#adbar
-#footer　　　底部导航栏
这里只列出了我们要用到的id，具体位置见上图，至于更详细的，请查看页面源文件
三、制作
3.1了解常用的CSS代码的含义
font:12px Tahoma；
这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
margin:0px；
也使用了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
background:#ccc url('bg.gif') top left no-repeat；
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
详细说下背景
为什么要特设一节说背景呢？因为在CSS里所用的图片都是以背景的形式存在的。在我们制图、切图的过程中始终不能忘记这点，要做到尽可能的减少图片的体积（现在好多简洁的Skin都实现了不用图片或少用图片），为的是减少下载量，提高页面浏览的速度。
那我们来看看background :
他的属性包括了
background-color 颜色
background-image 图像
background-repeat 重复方式
background-attachment 是否滚动
background-position 位置
而我们制图的时候要注意的是那些呢？首先我们看color和image的关系，始终是color显示在下面image在上面。这个的作用就是某些大块单色的地方我们就不需要用image而是采用color；再个就是repeat，他可以让图片以X或Y重复或不重复的方式显示。这个的作用就是某背景有这样的重复的我们切图的时候宽（长）只要切1px就可以了；我们要结合页面的结构对这些特性综合运用，要培养自己的3D思维。
这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
我们准备好了网站素材就进行下一步骤，也是最最重要的环节
四、编写代码
4.1全局式样
终于进入了核心部分，我们将用CSS＋DIV美化我们的Blog。有好多朋友总是问这样一个问题，我怎样做Skin。我这里想说的是你先要了解CSS和DIV的关系。DIV就像房子的骨架（砖墙等等），而CSS就是室内外装潢，你不了解骨架是怎么构成的你怎么去装潢呢？还有要说的重要的一点是CSS的特点之一，后面定义的取代前面定义的。比如说我在全局式样里定义了字体颜色是红的，而在后面主体里面定义了颜色是蓝的，那我们看到的就是蓝的。
我们进入正题，先说全局式样（在Pjblog里面是Skin文件夹下面的global.css文件）。这里我们可以对整个页面的特定标签定义外观。特定标签比如body、img、select、th等等这些是内置标签。这里的式样对里面的内容和DIV有效。看代码（里面为CSS代码，看作是DIV布局，以后都是用这种可运行代码表示，不在重复）

通过预览我们可以看到一个背景式样了，那其他的说怎么没提现呢。那是没有内容在里面，你可以试着在之间添加代码或文字看看。你也可以改变式样里的属性看看起了些什么变化（如果你不知道属性是什么，建议你看看上面的《苏昱式样表中文手册2.0》）。你可以在涂鸦板里添加#profilePage {background-color:#000}代码看看，背景是不是成黑色的了。是不是感觉有点成就感呢（我当时就感觉到了!）。千万不要拘束于这几个标签。
         接下来我觉得整个页面有很多多余的部分，比如广告，很影响美观，应该隐藏，就用到display:none属性。例如添加#permalink,#adbar,#logo{display:none;}隐藏底部的链接和侧栏广告，继续根据ID标签隐藏不必要的部分。
        再接下来该修改基本链接的样式了，例如：
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #cc3300;
text-decoration: underline;
}
a:active {
color: #fff;
text-decoration: none; }
4.2主体式样
我们把全局式样看作是body的话，那就把主体式样看作是#container。说到这里我们可能有点明白了CSS的编写其实是一个细化的过程。为什么这么说呢？你看#container其实是包含在body里的，而我们以后说的都是包含在#container里的。
通过上面的模型可以看出，#container里包含了#header、#widebar、#footer等标签，通过这几个的定义我们就能做出自己想要的效果了。
继续添加代码： #container{width:880px}这样主体宽度980px； #header{height:80px;background:url(http://fm231.img.xiaonei.com/pic001/20071017/00/14/large_17390g172.jpg) no-repeat center} 这样设置头部图像BANNER；移动sidebar位置#sidebar{position: absolute;top: 500px;left:280px}
；加宽#widebar{width:760px;float:none;margin:auto}主体上我们大概就是这个样子吧，根据自己的想象任意发挥吧。
4.3内容式样
内容样式里的内容比较多，仅举几例来说明一下
1.修改状态： #userStatus{
background-color:transparent;border-bottom-color:#000;}   background-color:transparent的意思是背景色透明
2.修改标题背景.box h3{background-image: url(http://fm231.img.xiaonei.com/pic001/20071026/05/20/large_105e170.jpg);
background-repeat: no-repeat;background-color:transparent;height:40px;color:red}这里主要说明一下.box h3意思是h3继承属性，意思是只有在.box类标签内才有作用。
        CSS关键就是要领略“叠层”二字，并且有子父关系，他们之间有继承性，就是说你的定义了span{color:"blue";}后，那以后的span元素就全部显示蓝色了，这样就不需要一个个的元素来定义了。比如标题模块一样，先定义一个全局的类元素（box），这样大大减少了代码的冗余。那如果说我在这一批元素里面的某一个或几个是需要特别显示的呢？那就再使用侧栏的模块ID来特别定义一下，这就是CSS的解决冲突的规则，了解了这两点就可以写出比较明朗的CSS代码了。刚开始接触的时候，总会有那么一些些不理解，常常找不到要修改的标签，经过反复调试，领略了这些，相信你想修改页面上的任何内容都能得心应手了吧。