怎么制作網(wǎng)易博客風(fēng)格教程
『博客素材』 2010-03-06 21:36:12 閱讀16941 評論51 字號：大中小
要想擁有自己的博客風(fēng)格，最好自己學(xué)習(xí)制作。做壞了沒關(guān)系，不會影響到你的日志內(nèi)容。影響到你的博客。只要恢復(fù)你原來的風(fēng)格就行了。做成功的感覺那是太好了，你快來嘗試制作一下吧！
第一章、博客皮膚介紹：網(wǎng)易博客皮膚分為三塊：分別是瀏覽器背景、博客背景、和模塊共三層，類似于圖層的概念，模塊在最上面，博客背景在中間層，游覽器背景在最下面。第二章、博客背景層設(shè)計： 一、 博客背景層分為頂區(qū)、導(dǎo)航、中區(qū)和底區(qū)四部分，
二、 首先應(yīng)準(zhǔn)備圖片素材，建議圖片寬度為1004像素，長度隨意。在圖片設(shè)計軟件（ 如:Photoshop ）里把整個風(fēng)格的效果設(shè)計好，并且根據(jù)不同區(qū)域尺寸切割好圖片。（本例用Photoshop的切片工具來切割，也可以用別的方法）
頂區(qū)建議寬度為1004像素，高度為80-450像素，
導(dǎo)航建議寬度為1004像素，高度為32-100像素，
中區(qū)建議寬度為1004像素，高度隨版面大小自動補充，
底區(qū)建議寬度為1004像素，高度為50-800像素，
（網(wǎng)易官方建議以上四張圖最佳寬度為1004像素，偶用1280像素，效果也不差）
切割好圖片，然后轉(zhuǎn)出分成四張圖片，圖片格式是JPG或giF格式，也可以分開一張一張制作，但注意兩張連接處要對接好。
2.也可以到網(wǎng)上下載自己喜歡的圖片，包括博客的風(fēng)格包，只能使用里面的圖片（不能使用里面的代碼，網(wǎng)易還沒有開放）
三、準(zhǔn)備好圖片，接下來把圖片上傳。1、登錄自己的博客，點擊博客右上角“換風(fēng)格”，進(jìn)入風(fēng)格設(shè)置界面，在左邊選擇“風(fēng)格自定義”點擊
2、點擊右邊“新建風(fēng)格”即可進(jìn)入編輯區(qū)：
3、依次點擊頂區(qū)、背景和“選圖”找到前面設(shè)計好的頂區(qū)圖片，點擊“打開”即可導(dǎo)入背景相片。
4、分別對裁剪、平鋪方式、對齊方式等進(jìn)行調(diào)整，直到圖片位置滿意為止。
4、設(shè)置好頂區(qū)背景圖后，再點擊“文字”,即可以對頂區(qū)的文字進(jìn)行大小，顏色及位置的修改。修改的效果在瀏覽器下方即可預(yù)覽。
5、導(dǎo)航區(qū)設(shè)置，導(dǎo)航區(qū)的“背景”和“文字”設(shè)置與頂區(qū)設(shè)置相同，“當(dāng)前項”是對當(dāng)前瀏覽頁面做特殊標(biāo)記，，“鼠標(biāo)滑過項”是對鼠標(biāo)滑過停留的頁面詞進(jìn)行設(shè)置的，可以修改字體、顏色也可以加背景圖，
6、中區(qū)、底區(qū)設(shè)置參照頂區(qū)設(shè)置。
注意的是中區(qū)結(jié)構(gòu)里有一個一行三列結(jié)構(gòu)，那個一行剛好可以增加導(dǎo)航區(qū)的高度，這對于想把導(dǎo)航區(qū)圖做的很大的博友很有用。
第三章、模塊設(shè)計
一、模塊設(shè)計分開兩種，一種是只做邊框，就在網(wǎng)易博客里操作就可以，另外如果想再做美觀一點，可以再加一個模塊的背景圖片，需要另外準(zhǔn)備圖片素材。
二、先說用邊框做模塊，依次點擊模塊、邊框，在這里可以設(shè)置博客日志及首頁邊框線條、顏色等，如果不選擇顏色，則模塊會顯示透明，直接用博客背景圖做底版。修改的效果在瀏覽器下方即可預(yù)覽。
三、點擊“文字”，可以設(shè)置博客日志及首頁的文字顏色、位置。修改的效果在瀏覽器下方即可預(yù)覽。四、這樣博客模塊就設(shè)計好了，如果不想再做模塊背景圖也沒關(guān)系，如果想把模塊弄的有個性一點，那就繼續(xù)給模塊做背景吧，1、首先應(yīng)把整個模塊整體圖案構(gòu)思好，差不多如下，尺寸不要太大，具體尺寸要求后面講。
2、然后對這個圖劃分成9份，分成九張圖，分法和博客背景圖分法一樣。
3、圖內(nèi)1、3、7、9區(qū)四張圖是模塊的四個角，尺寸是固定，其他5張圖是隨著模塊大小及日志的長短自動縮放的，長短是不固定的。
4、1和3區(qū)的尺寸高寬限制在50*100像素以內(nèi)（網(wǎng)易官方數(shù)據(jù)），7和9區(qū)尺寸大小可以自已設(shè)置，
5、圖內(nèi)2、4、6、8、5區(qū)圖的尺寸寬度以1、3、5、7區(qū)尺寸為準(zhǔn)。長度隨著日志長短重復(fù)連接填充，所以長度不用設(shè)置，但注意每一張圖前后顏色不要相差太大，否則重復(fù)連接的時候頭尾會有銜接痕跡的。
6、準(zhǔn)備好圖片后，點擊模塊、背景、 1區(qū)、選圖，找到上一步準(zhǔn)備的圖片1，點擊“打開”導(dǎo)入。
7、在導(dǎo)入圖片后，在平鋪方式、對齊方式、當(dāng)前區(qū)寬度和高度里進(jìn)行調(diào)節(jié)，多試幾次，直到下方預(yù)覽結(jié)果位置準(zhǔn)確為止。
8、接下來2-9區(qū)設(shè)置相同。
這個比較復(fù)雜，不具備一定PS基礎(chǔ)的就跳過這一步。
第四章 游覽器背景設(shè)計一、游覽器背景指博客主體旁邊兩側(cè)的部分。
二、游覽器背景設(shè)計分開兩種，一種是直接填充顏色，就在網(wǎng)易博客里操作就可以，另外如果想再做美觀一點，可以再加一個自已做的圖片，需要另外準(zhǔn)備圖片素材。（背景圖片，網(wǎng)上很多，可以自己搜索）大小多可以，根據(jù)自己的需要選擇。
二、先說直接填充顏色，點擊游覽器，然后選擇左邊的顏色即可修改瀏覽器背景。
三、如果感覺直接填充顏色不好看，可以自己做一張圖片，然后導(dǎo)入。點擊游覽器、選圖，找到制作的圖片，點擊“打開”導(dǎo)入即可。導(dǎo)入后可以對圖片進(jìn)行設(shè)置：平鋪方式、對齊方式和固定背景。
四、制作瀏覽器背景圖片時需注意，圖片只是兩邊圖案會顯示，中間的圖案全部會被博客背景和模塊給覆蓋。顯示器的尺寸不同，顯示出來的瀏覽器背景也會不同，比如19寸的顯示器顯示出來的圖案，在17寸顯示器里兩邊會被裁剪一部分。
第五章：其他一、其他項設(shè)置分別為按鈕、分隔線、當(dāng)前項和風(fēng)格信息，這幾個對博客影響不大，隨意設(shè)置，能和博客整體協(xié)調(diào)即可。
二、全部設(shè)置好后，點擊“保存風(fēng)格”即“使用此風(fēng)格”即完成博客風(fēng)格制作。
三、注意，在以上操作為防止忽然出錯可多點擊“保存風(fēng)格”，先保存，然后再對其修改。
(本人進(jìn)行一些補充和修改，希望大家能看懂）本模塊代碼分享處 立地書廚 主題閱讀 經(jīng)典圖庫 代碼素材 百萬書庫 武俠小說 中華艷史 英語學(xué)習(xí) 古典艷情 人與社會 破解軟件 CS作弊器 電腦應(yīng)用 家庭美食 實用知識 百萬下載 哈佛管理 易經(jīng)研究 知道叢書 傳統(tǒng)蒙學(xué) 生活百科 做人做事 十大禁書 清純美女 網(wǎng)易風(fēng)格制作教程 花兒圖片 古典詩詞 動物世界 婚禮致詞范本精選 靜態(tài)背景 ★世博會 邊框素材評論這張
轉(zhuǎn)發(fā)至微博
3人 | 分享到：
閱讀(16941)| 評論(51)| 引用 (26) |舉報
