秋風(fēng)的蕭瑟 又見湖邊木葉飛
          

          歡迎來(lái)到梁良 | LonBlog，這里記錄下了我生活點(diǎn)點(diǎn)滴滴。                                                              
          
			
          
				
					
	
          
		
          
			[ZT]教你怎樣快速DIY自己的博客園SKIN 
		
          
		    授之魚，不如授之漁。我共享100個(gè)根據(jù)自己審美眼光制作的Skin還不如教大家怎么自己動(dòng)手做呢～～畢竟大家審美眼光不一樣，在加上我本人又是色盲實(shí)在作不出什么好外觀來(lái)。
          

          
    工欲善其事必先利其器。首先得先教教大家怎么用先進(jìn)武器，要不然用“查看源文件&抓圖”的方法做一個(gè)Skin恐怕要一整天。
          

          
    首先出場(chǎng)的是微軟的          IEDevToolBar，這是一個(gè)免費(fèi)的轉(zhuǎn)為Web開發(fā)人員制作的IE插件，做博客Skin時(shí)用到的主要功能有：
          

          
    1.以樹結(jié)構(gòu)查看CodeDom，并查看每個(gè)Element屬性，可以使用鼠標(biāo)點(diǎn)擊選中Element，這個(gè)在我們制作Skin時(shí)很有用
          
    2.生成圖片報(bào)表，就是將頁(yè)面上說(shuō)有出現(xiàn)的圖片生成一份詳細(xì)的報(bào)表，這樣就省的我們自己去找圖片路徑和量圖片大小等等。
          
    3.高亮顯示表格，表格單元，Div等的邊框，這個(gè)在我們調(diào)整布局時(shí)也是很有用
          
    4.頁(yè)面尺子，可以然你任意在頁(yè)面上度量長(zhǎng)度，這個(gè)是大大的提高了我們的工作效率，不用為了量個(gè)長(zhǎng)度而抓圖再用畫圖工具量
          

          
    現(xiàn)在就趕快          下載裝上吧，就算你不做Skin，我也強(qiáng)烈推薦你裝上，Web項(xiàng)目調(diào)整界面時(shí)它真的是用處很多啊
          

          
    下面出場(chǎng)的是          ColorPic，這也是一個(gè)免費(fèi)的軟件，用于拾取顏色的，鼠標(biāo)移動(dòng)到哪里就拾取哪里的顏色，可以對(duì)拾取的顏色分組，這樣我們就可以把需要的顏色都一次性拾取完，再慢慢的用了。拾取顏色和重新拾取時(shí)都是用Ctrl + G 快捷鍵，其它功能靠大家自己琢磨了。
          

          
    最后就是編輯器了，如果你是CSS高手那文本編輯器就夠了，如果你是和我一樣的業(yè)余水平，我建議還是選一個(gè)可以智能提示的編輯器，比如Dreamweaver或者用Visual Studio2005/2003也是可以的。
          

          
    工具搞定啦，開始來(lái)熱身吧，先講講博客園的CSS怎么自己定義，有些新來(lái)的朋友可能還不知道。
          

          
    先進(jìn)入你的博客的后臺(tái)管理，然后選擇“選項(xiàng)”頁(yè)，接下來(lái)選擇“Configure”項(xiàng)，現(xiàn)在看到“通過(guò)CSS定制頁(yè)面”項(xiàng)了吧，你可以再這個(gè)文本框里放自己的CSS，記得不用加<style>標(biāo)簽。
          

          
    不過(guò)我用的不是這種辦法，我是把自己的CSS加上<style>標(biāo)簽放到“子標(biāo)題”里，這是因?yàn)槲以扔玫谝环N辦法，好幾次遇到CSS效果突然顯示不出來(lái)，恢復(fù)到默認(rèn)模板的樣式，我也不懂為啥這個(gè)得問(wèn)DuDu哥啦，反正我用第二種方式就都不會(huì)再有這樣的問(wèn)題了。
          

          
    光有CSS還不夠，博客園的自定義CSS是于原模板有關(guān)系的，比如一些id和class的命名在各個(gè)模板中是不一樣的，所以針對(duì)某個(gè)模板制作出來(lái)的CSS型Skin一般是不能通用的。
          

          
    接下來(lái)要講講博客園CSS定義習(xí)慣，一般模板上面會(huì)把頁(yè)面分成3大塊，一個(gè)是頂部標(biāo)題，一個(gè)是菜單條（就是放文章分類和日歷，公告的那一條），一個(gè)是文章列表的主體。
          

          
    這3個(gè)大塊一般有自己的id或者class，如果是id定義CSS的話就使用#id這樣的格式，比如：
          
    #main
          
   {
          
        border:1px solid #FF0000;
          
        width:100%;
          
   }
          

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

          
（對(duì)CSS還不甚了解的朋友快去補(bǔ)補(bǔ)吧，嘻嘻，其實(shí)偶對(duì)CSS也是一竅不通，都是瞎搞自己博客的外觀積累的一點(diǎn)點(diǎn)經(jīng)驗(yàn)）
          

          
    每個(gè)模板都不一定用Class還是用ID，也不一定這3個(gè)大塊叫什么名字，我們?nèi)绻?#8220;查看源文件”那找起來(lái)可沒(méi)那么快了，現(xiàn)在就可以使用IEDevToolBar的View DOM功能了，View DOM提供了一個(gè)"Select Element by Click"功能，我們就可以使用鼠標(biāo)選擇一個(gè)項(xiàng)，然后查看它的id了。
          

          
    
          

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

          
    首先需要把你的博客目前使用的模板的CSS文件下載下來(lái)，怎么下載？呵呵，“查看源代碼”大法咯，一眼就可以看到css文件了。
          

          
    下載下來(lái)后就直接根據(jù)你的需要修改吧，不過(guò)要注意！          不要?jiǎng)h除原先的定義，比如border原先是定義成1px solid #FF0000，你不想要border的話，不要直接刪除boder定義，而要把border重新定義成0px none #FFFFFF，要不然不能覆蓋模板的CSS定義。
          

          
    呵呵，文章到此結(jié)束，你可以去自己定義自己的CSS了。(底下雞蛋，石頭亂飛)
          

          
    嘻嘻，其實(shí)真的已經(jīng)夠了，可能唯一不夠的就是你的配色眼光和對(duì)CSS的熟練程度了。像我這種業(yè)余水準(zhǔn)的人怎么配色和設(shè)計(jì)布局呢，呵呵，一句話：天下配色一大抄。
          

          
    我有時(shí)候路過(guò)好看的外國(guó)網(wǎng)站就用ColorPic去抓顏色然后配成自己的CSS，像我共享的幾個(gè)外觀都是從google的Blogger模板哪里抓取的配色，Blog布局一般都是那三大塊，很容易模仿過(guò)來(lái)的，有時(shí)候遇到ColorPic要抓連接的顏色時(shí)鼠標(biāo)移動(dòng)上去連接顏色變了，怎么辦。這時(shí)候就麻煩點(diǎn)抓圖，然后再抓圖上的顏色吧，人不可以太懶啦～～呵呵。
          

          
    嘿嘿，本來(lái)要抓張我偷Blogger模板顏色的罪證～～～結(jié)果抓取的時(shí)候ColorPic看不到～～那就沒(méi)辦法了，大家自己回去試哈。
          

          
    大家看完文章肯定都手癢了吧～～～祝大家DIY開心啦，做好了記得也發(fā)揚(yáng)共享精神啊～～不共享也通知下，讓俺學(xué)習(xí)學(xué)習(xí)（保證不開ColorPic和DevToolBar），呵呵。           

		
          
			posted on 2010-06-08 00:23 梁良 閱讀(312) 評(píng)論(0)  編輯  收藏  所屬分類: CSS  
		
          
	
          
	
	


	


          
	    
    




          








          

				
			
          
			
          
				
					
          
	
          
		
          <2010年6月>
          
	
          日一二三四五六
          303112345
          6789101112
          13141516171819
          20212223242526
          27282930123
          45678910
          

          

					

          導(dǎo)航
          

					
					

          公告
          
	    歡迎光臨

					

          常用鏈接
          

		
          隨筆分類
          
		
				
			
	
		
          隨筆檔案
          
		
				
			
	
		
          相冊(cè)
          
		
				
			
	
		
          .我的網(wǎng)站.
          
		
				
			
	
		
          友情博客
          
		
				
			
	
		
          開源社區(qū)
          
		
				
			
	
		
          科技博客
          
		
				
			
	
		
          資料網(wǎng)站
          
		
				
			
	


          最新隨筆
          




          搜索
          



          最新評(píng)論
	
          

          
	
			
		

          


          閱讀排行榜
          


				
			
          			
			

	


          

          
	Powered by: 
	
          
	LonLeung
	
          
	Copyright © 梁良

          

          




本頁(yè)生成時(shí)間:毫秒



          

          

          
          
    







          
        
	




主站蜘蛛池模板：
吉隆县|
缙云县|
南城县|
山阴县|
安吉县|
确山县|
德庆县|
诏安县|
文山县|
获嘉县|
浮梁县|
西畴县|
四川省|
巫溪县|
体育|
庆元县|
江阴市|
华宁县|
扎鲁特旗|
绥芬河市|
南江县|
八宿县|
武清区|
东阳市|
旬邑县|
夹江县|
安乡县|
夏津县|
衡水市|
万载县|
搜索|
马尔康县|
泰兴市|
梅州市|
常熟市|
广饶县|
平远县|
丰顺县|
剑河县|
甘谷县|
泰顺县|