2007.1.30更新……轉載自 http://www.dnxh.cn/blog/article.asp?id=155
Pjblog的用戶群越來越大,一個Blog就相當于一個Blogger網上的家。而現在追求個性的時代,給自己的Blog做過有個性的、符合自己特點的Skin是大家的一個愿望。但這個畢竟涉及到一些知識,我們需要通過自己的努力學習來完成我們的愿望。我將從零說起,大概是這樣的一個過程:準備工作→Skin的構思→制圖→切片→編寫CSS→預覽→調試兼容性→美化細節,預覽和編寫是個循環過程。我想通過本教程能夠使大家了解Skin制作,不需要再用別人做的Skin,靠自己的努力把自己的Blog裝飾的漂亮有個性。很振奮吧,那我們往下看……
一、準備工作
1.1 必需的一些基礎
你要有學習知識的欲望,這個是一切的前提。你對Pjblog的使用有一定的了解(如果你還不知道Skin是什么、怎么安裝,建議你不要往下看)。在做Skin的時候要細心,嚴格要求自己,有一定的審美觀。最好熟悉一些制圖軟件(Adobe Potoshop、Fireworks之類)。對CSS方面番茄做過很不錯的教程(需要注冊)。
2.2 涉及的工具
首先你要有太電腦,并且顯示器的色彩不是很差(我的本本的液晶顯示器讓我哭笑不得呀……)。制圖軟件Adobe Potoshop、Fireworks之類。CSS編寫工具,你當然用記事本也可以寫。色彩調配軟件,屏幕截圖軟件。這些基本在本站都有下載,為了防止站點流量過大被K,我只能加了下載級別,并隨機變換下載地址。請注冊后下載,謝謝你的合作!
Macromedia Studio 8.0 官方簡體中文正式版
電驢下載地址:http://lib.verycd.com/2005/10/14/0000069569.html
比較認同的網頁制作類軟件,這里我們主要是用套裝里面的 Fireworks(教程里面用的就是他)。當然你也可以用Adobe Potoshop。
CSS編寫工具EditPlus V2.1.2 Build 147 漢化版
下載地址:
點擊下載文件
當然有人說用Dreamweaver不是更好?這里不建議用,手寫更容易記住代碼的含義,再說CSS可視化編寫不是很理想。本來TopStyle3是可視化編寫CSS的最佳工具,但介于Pjblog的CSS是分幾個文件的用他效果也不怎么明顯。
Color Schemer Studio1.5配色工具
下載地址:
點擊下載文件
配色是你構思Skin的第一步。這款工具對顏色的搭配比較專業。
蘇昱式樣表中文手冊2.0(一下簡稱《手冊》)
下載地址:
點擊下載文件
調試軟件Firefox
下載地址:
點擊下載文件
現在有94%的人在用IE,但Firefox的用戶也在不斷的增長。Firefox的好我在這里就不說了。但CSS在這兩個瀏覽器之間肯定有兼容的問題。
截圖工具HyperSnap5
下載地址:
點擊下載文件
這個也是我用后認為功能比較強大的截屏軟件。
如果你打瞌睡了[79]那就休息一下……
二、 構思你的Skin
2.1配色
你的Blog給人的第一印象就是視覺上的,所以說色很重要。
這里我們用的是白、灰、紅。一般灰色是通用的,就像血型里的O型血一樣。
2.2布局
頁面的布局先不說太復雜的,你理解了結構后可以發揮自己的想象力。在這里要說的是CSS(Cascading Style Sheets層疊樣式表單)這里的重點就是層疊。如果說Skin設計是平面設計,那我認為就錯了。從欣賞的角度看這是個平面作品,但從設計的角度看那就是三維的。要不怎么有z-index這樣的屬性呢。再者我們可以這樣做個比較,CSS是說的層類似于PS或FW里面的圖層,不一樣的地方僅僅在于:層交換順序--PS可以而DIV+CSS不可以;Alpha通道--PS可以而CSS不可以(一些瀏覽器可以)。圖片的如上圖所示,我們可以看到Pjblog的結構和DIV的前后順序,前面的覆蓋后面的(當然也可以是透明的)。我們先不玩花哨的,Blog的布局一般都就這樣。
這里的header就是頭部,里面包含Blog名、副標題、橫向菜單;
Tbody是中部內容,里面包含著主內容(mainContent也就是我們寫的日志,就像這個教程在的位置)、側欄(sidebar);
foot是底部,里面包含我們的一些版權信息、備案什么的;
我們說了這么多都是說的Pjblog的結構,也就是說是Box和Box之間的關系。而Box是怎么組成的呢?這里已經有高人Douglas做個個Flash模型,里面很明白的說明了margin,background-color,background-image,padding ,border 以及他們之間的關系。
當然這些是Pjblog的主體部分,每個部分里面還包含一些其他DIV,而這些細節(像橫向菜單、側欄內容面板、主內容模塊等等)也是美化我們Blog的要點,但這個我們慢慢來。先看主體這樣先可以在你的腦海里有個Skin的大概樣子,為我們下面的制圖做好充分的準備。
下面自己做了個Pjblog的結構模型。
三、制圖
3.1了解背景
為什么要特設一節說背景呢?因為在CSS里所用的圖片都是以背景的形式存在的。在我們制圖、切圖的過程中始終不能忘記這點,要做到盡可能的減少圖片的體積(現在好多簡潔的Skin都實現了不用圖片或少用圖片),為的是減少下載量,提高頁面瀏覽的速度。
那我們來看看background :
他的屬性包括了
background-color 顏色
background-image 圖像
background-repeat 重復方式
background-attachment 是否滾動
background-position 位置
而我們制圖的時候要注意的是那些呢?首先我們看color和image的關系,始終是color顯示在下面image在上面。這個的作用就是某些大塊單色的地方我們就不需要用image而是采用color;再個就是repeat,他可以讓圖片以X或Y重復或不重復的方式顯示。這個的作用就是某背景有這樣的重復的我們切圖的時候寬(長)只要切1px就可以了;我們要結合Pjblog的結構對這些特性綜合運用,要培養自己的3D思維。
3.2主體的制作
我們以我現在用的這款Skin做例子,來簡述制圖過程。
我們先來看看我們想做的是怎樣的一個主體(這個在你自己的腦海里應該已經成型,或有個模糊的構思)。
白色的主調兩邊帶點陰影,側邊是灰色(#EEEEEE)230px寬。
打開Fireworks,新建一個1000px×768px的白色背景的文件(因為這款Skin的主體背景是白色的)。確定我們的主體內容為800px寬,繪制一個寬度為800px,高度大于畫布的矩形,再給加上1px寬的灰色(#999999)的邊框。用濾鏡發光給加點陰影,濾鏡的參數設置成寬度為5,柔化為10,透明度為15,顏色為黑色,偏移為0。
再給加個側欄繪制一個寬為230px,高度大于畫布的矩形,放置到左邊,注意不要壓住1px的邊框。這樣我們的主體部分就繪制好了。制作主體部分我們要注意些什么呢。主要我們要考慮到頁面的高度問題,因為頁面的高度會隨內容的不同而變化,那我們就要做一個有彈性的高度。我們可以利用Background-repeat設置值為y。那我們的背景就是縱向重復了。
3.2頭部的制作
同樣我們先看一下我們要做個什么樣的Top。
我們看到的是兩條帶質感的半透明的橫條壓在主體上,
我們畫兩個矩形,寬度大于畫布(因為我們要這兩條自適應寬度)。通過調節漸變給矩形加點質感,調整透明度為80。
這樣我們的Top就做好了。
3.3底部的制作
底部的制作一般比較簡單,這里為了對應Top也加了個橫條,這里就不做自適應寬度了(當然也是可以做的,我們從簡單的做起)。下面是段灰色的矩形,上面壓個橫條。
到這里我們的圖基本已經畫了個大概了。你看了可能就一會兒,但有的時候我們從構思到成型可能需要幾天。為了配合看效果最好加點內容里面。配合鏈接顏色看看,反復修改而達到最佳效果。
3.4切片
所謂切片,顧名思義就是把做好的圖切成你需要的一塊塊。有很多朋友都是在這里卡住了,不知道怎么切好。這里要說的是在可以表現出你的效果的前提下,圖切的越小越好、越少越好。那需要切那些呢?怎么切?其實是根據你CSS的需要來切的。你可以先跳過這個不看,在學習了CSS后你想在某個Box里設置背景的時候,你就會想到圖,那你就到做好的圖里面切一塊去用吧。慢慢的你就明白怎么切圖了。下圖就是頭部背景圖的切片,我們還可以看到切圖用的是什么工具(我認為Fireworks切圖功能好點)。在Fireworks里面切片是放在網頁層里面的,我們可以給切片命名,想要這個切片的時候我們就可以導出圖片。這里還要說的是導出圖片的格式,就是優化欄的屬性。個人比較喜歡PNG32格式,他支持Alpha通道(未來的趨勢)。要是不透明圖片選JPG也很好(他體積?。?。
整體的PNG分層文件提供給大家研究。
點擊下載此文件
我們打開這個文件可以看到。如頭部、主體背景、底部他們的寬度不是我們剛開始的時候說的800px,那是因為我們在外面加了陰影。一定要把這個尺寸算進去(一般要求算,而不是看陰影和背景色差不大的時候容易搞錯,要做到仔細)。而全局背景并不需要拉的很高,因為下面的白色我們完全可以用CSS做,大了就浪費了。還有就是按鈕背景圖,如果你是有鼠標接觸式樣的建議你不要分兩張圖,我們做在一張圖上,通過CSS控制圖片的位置來實現不同的背景,這個等說到CSS的時候再詳細說。
四、編寫代碼
4.1全局式樣
終于進入了核心部分,我們將用CSS+DIV美化我們的Blog。有好多朋友總是問這樣一個問題,我怎樣做Skin。我這里想說的是你先要了解CSS和DIV的關系。DIV就像房子的骨架(磚墻等等),而CSS就是室內外裝潢,你不了解骨架是怎么構成的你怎么去裝潢呢?還有要說的重要的一點是CSS的特點之一,后面定義的取代前面定義的。比如說我在全局式樣里定義了字體顏色是紅的,而在后面主體里面定義了顏色是藍的,那我們看到的就是藍的。
我們進入正題,先說全局式樣(在Pjblog里面是Skin文件夾下面的global.css文件)。這里我們可以對整個頁面的特定標簽定義外觀。特定標簽比如body、img、select、th等等這些是內置標簽。這里的式樣對
国产精品久久久久精品…-国产精品可乐视频最新-亚洲欧美重口味在线-欧美va免费在线观看
里面的內容和DIV有效??创a(里面為CSS代碼,看作是DIV布局,以后都是用這種可運行代碼表示,不在重復)