解读校内网涂鸦板制作下面我将从零说起，大概是这样的一个过程：准备工作→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；
©2008 涂鸦乐 | xhtml | CSS | sitemaps | 代码帮助 | 网站地图 |
备案序号:湘ICP备08002074号