....
授之魚，不如授之漁。我共享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），呵呵。
posted on 2007-10-08 04:06
七星重劍 閱讀(334)
評論(2) 編輯 收藏 引用 所屬分類:
亂七八糟