教你怎样快速DIY自己的博客园SKIN

教你怎样快速DIY自己的博客园SKIN

    授之鱼，不如授之渔。我共享 100 个根据自己审美眼光制作的 Skin 还不如教大家怎么自己动手做呢～～毕竟大家审美眼光不一样，在加上我本人又是色盲实在作不出什么好外观来。

    工欲善其事必先利其器。首先得先教教大家怎么用先进武器，要不然用 “ 查看源文件 & 抓图 ” 的方法做一个 Skin 恐怕要一整天。

    首先出场的是微软的 IEDevToolBar ，这是一个免费的转为 Web 开发人员制作的 IE 插件，做博客 Skin 时用到的主要功能有：

    1. 以树结构查看 CodeDom ，并查看每个 Element 属性，可以使用鼠标点击选中 Element ，这个在我们制作 Skin 时很有用
    2. 生成图片报表，就是将页面上说有出现的图片生成一份详细的报表，这样就省的我们自己去找图片路径和量图片大小等等。
    3. 高亮显示表格，表格单元， Div 等的边框，这个在我们调整布局时也是很有用
    4. 页面尺子，可以然你任意在页面上度量长度，这个是大大的提高了我们的工作效率，不用为了量个长度而抓图再用画图工具量

    现在就赶快 下载 装上吧，就算你不做 Skin ，我也强烈推荐你装上， Web 项目调整界面时它真的是用处很多啊

    下面出场的是 ColorPic ，这也是一个免费的软件，用于拾取颜色的，鼠标移动到哪里就拾取哪里的颜色，可以对拾取的颜色分组，这样我们就可以把需要的颜色都一次性拾取完，再慢慢的用了。拾取颜色和重新拾取时都是用 Ctrl + G 快捷键，其它功能靠大家自己琢磨了。

    最后就是编辑器了，如果你是 CSS 高手那文本编辑器就够了，如果你是和我一样的业余水平，我建议还是选一个可以智能提示的编辑器，比如 Dreamweaver 或者用 Visual Studio2005/2003 也是可以的。

    工具搞定啦，开始来热身吧，先讲讲博客园的 CSS 怎么自己定义，有些新来的朋友可能还不知道。

    先进入你的博客的后台管理，然后选择 “ 选项 ” 页，接下来选择 “Configure” 项，现在看到 “ 通过 CSS 定制页面 ” 项了吧，你可以再这个文本框里放自己的 CSS ，记得不用加 <style> 标签。

    不过我用的不是这种办法，我是把自己的 CSS 加上 <style> 标签放到 “ 子标题 ” 里，这是因为我原先用第一种办法，好几次遇到 CSS 效果突然显示不出来，恢复到默认模板的样式，我也不懂为啥这个得问 DuDu 哥啦，反正我用第二种方式就都不会再有这样的问题了。

    光有 CSS 还不够，博客园的自定义 CSS 是于原模板有关系的，比如一些 id 和 class 的命名在各个模板中是不一样的，所以针对某个模板制作出来的 CSS 型 Skin 一般是不能通用的。

    接下来要讲讲博客园 CSS 定义习惯，一般模板上面会把页面分成 3 大块，一个是顶部标题，一个是菜单条（就是放文章分类和日历，公告的那一条），一个是文章列表的主体。

    这 3 个大块一般有自己的 id 或者 class ，如果是 id 定义 CSS 的话就使用 #id 这样的格式，比如：
    #main
   {
        border:1px solid #FF0000;
        width:100%;
   }

如果是 class 那就是 .class 格式了，比如：
    .main
   {
        border:1px solid #FF0000;
        width:100%;
   }

（对 CSS 还不甚了解的朋友快去补补吧，嘻嘻，其实偶对 CSS 也是一窍不通，都是瞎搞自己博客的外观积累的一点点经验 ）

    每个模板都不一定用 Class 还是用 ID ，也不一定这 3 个大块叫什么名字，我们如果用 “ 查看源文件 ” 那找起来可没那么快了，现在就可以使用 IEDevToolBar 的 View DOM 功能了， View DOM 提供了一个 "Select Element by Click" 功能，我们就可以使用鼠标选择一个项，然后查看它的 id 了。

   

    抓到 id 和 class 名了就开始定义自己的 CSS 吧。

    首先需要把你的博客目前使用的模板的 CSS 文件下载下来，怎么下载？呵呵， “ 查看源代码 ” 大法咯，一眼就可以看到 css 文件了。

    下载下来后就直接根据你的需要修改吧，不过要注意！不要删除原先的定义，比如 border 原先是定义成 1px solid #FF0000 ，你不想要 border 的话，不要直接删除 boder 定义，而要把 border 重新定义成 0px none #FFFFFF ，要不然不能覆盖模板的 CSS 定义。

    呵呵，文章到此结束，你可以去自己定义自己的 CSS 了。 ( 底下鸡蛋，石头乱飞 )

    嘻嘻，其实真的已经够了，可能唯一不够的就是你的配色眼光和对 CSS 的熟练程度了。像我这种业余水准的人怎么配色和设计布局呢，呵呵，一句话：天下配色一大抄。

    我有时候路过好看的外国网站就用 ColorPic 去抓颜色然后配成自己的 CSS ，像我共享的几个外观都是从 google 的 Blogger 模板哪里抓取的配色， Blog 布局一般都是那三大块，很容易模仿过来的，有时候遇到 ColorPic 要抓连接的颜色时鼠标移动上去连接颜色变了，怎么办。这时候就麻烦点抓图，然后再抓图上的颜色吧，人不可以太懒啦～～呵呵。

    嘿嘿，本来要抓张我偷 Blogger 模板颜色的罪证～～～结果抓取的时候 ColorPic 看不到～～那就没办法了，大家自己回去试哈。

    大家看完文章肯定都手痒了吧～～～祝大家 DIY 开心啦，做好了记得也发扬共享精神啊～～不共享也通知下，让俺学习学习（保证不开 ColorPic 和 DevToolBar ），呵呵。



教你怎样快速DIY自己的博客园SKIN:  下载

colorpic_v41:  下载

iedevtoolbar:  下载