鼓勵此網誌：323
天空部落全版面改法及CSS修飾...，這篇教學幾乎就是縱橫天下網頁製作過程的大公開喔...^__^...
其實版面不管你怎麼改～把握這些要點
1.力求全版面清晰為主，不要太花俏，看字不要吃力，頁首連結要讓人家看的懂
2.小玩意盡量不要安裝，只會拖慢你的網頁開啟速度而已
資源共享09-天空部落改版法-第二版
來源～縱橫天下 http://blog.yam.com/hung888/article/1954338
八大步驟
第一步驟
進入我的 [ 管理介面 ] ～ [ 變更樣板 ] ～ [ 樣板設計小幫手 ]
以上面樣版為範例說明～
先進入 [ 樣板小幫手 ] 先把下面圖片的設定值先改成這樣
圖片可選用你喜歡的圖片 ( 你可開二個視窗比對更改或用筆把下面數值先抄起來 )
從001設定到106
但有一點要注意，先設定圖八再設定圖七
也就是圖一圖二圖三圖四圖五圖六圖八圖七圖九圖十……………
變更001之後002接著也要再變更一次
這個版面跟原有的 
資源共享05 ( mj888第一版本 ) 有所不同，範例效果http://blog.yam.com/www888
其大圖是用背景底圖去套 ( 005 ) 而不是用上框banner背景圖去套 ( 015 )
005的圖必須是1000X600或1000X500～200且用1024上傳
因個人圖像大小不同，位置有所不同，( 059上 ) 的調整數值自行設定
最後按～儲存目前設定～
等網頁完全下載完後～
按相簿設定
第二步驟
相簿設定～
最後按～儲存目前設定～
等網頁完全下載完後～
按退出～完成
第三步驟
卷軸語法～直接加到ＣＳＳ最前面
HTML
{
SCROLLBAR-FACE-COLOR: #455d75; SCROLLBAR-HIGHLIGHT-COLOR: #1c2c4d; SCROLLBAR-SHADOW-COLOR: #1c2c4d; SCROLLBAR-3DLIGHT-COLOR: #1c2c4d; SCROLLBAR-ARROW-COLOR: #6e869e; SCROLLBAR-TRACK-COLOR: #1c2c4d; SCROLLBAR-DARKSHADOW-COLOR: #1c2c4d;
}
捲軸語法
HTML
{
SCROLLBAR-FACE-COLOR: 色碼; /*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:色碼; /*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: 色碼; /*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: 色碼; /*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: 色碼; /*設定右立體面顏色*/
SCROLLBAR-ARROW-COLOR: 色碼; /*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: 色碼; /*設定軸軌的顏色*/
}
更改～
選擇自己喜歡的色碼
色碼表http://blog.yam.com/hung888/article/2382284捲軸CSS複製處 密碼2597
第四步驟
003文字顏色只是外觀，內文須在ＣＳＳ另外再設定，進入ＣＳＳ後，按 [ Ctrl + F ] 貼上 [ DIV.articleBody ] 再按下一步
DIV.articleBody
{
PADDING-LEFT: 10px; FONT-SIZE: 13px; COLOR: #b0c7f5; LINE-HEIGHT: 1.9em; FONT-FAMILY: arial, 新細明體, sans-serif; HEIGHT: 100%;
}
更改～
字體大小 FONT-SIZE: 13px;
字體顏色 COLOR: #b0c7f5;
字體形式 FONT-FAMILY: arial, 新細明體, sans-serif;
若沒有CSS自己加上去...
第五步驟
051～標題背景圖 ( 075方法同051 )
直接複製你插入的圖檔網址，進入ＣＳＳ後，按 [ Ctrl + F ] 貼上網址再按下一步
DIV.articleTitle
{
CLEAR: both; BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BACKGROUND-POSITION: 0% 0%; BORDER-TOP: medium none; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 18px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(http://pics8.blog.yam.com/6/userfile/h/hung888/album/144c862ab5fcf5.gif); PADDING-BOTTOM: 25px; BORDER-LEFT: medium none; PADDING-TOP: 48px; BORDER-BOTTOM: medium none; BACKGROUND-REPEAT: no-repeat;
}
更改～
背景圖 BACKGROUND-REPEAT: no-repeat;
不重複 no-repeat
重複 repeat
若沒有BACKGROUND-REPEAT: no-repeat;自己加上去動畫圖檔相簿107張
第六步驟
相簿更改～
第七步驟
每當你更改一個版面後，建議你先用ＣＳＳ暫存起來，這樣一來不管你以後如何改版，不喜歡或亂版，隨時一套就會回復你原先儲存的檔案^__^～所以說，改版沒什麼，大膽去改，最多復原而已～ ( 最好另外備分一份在你的記事本或WORD )CSS快速套版-資源共享19 
天空部落的CSS明細
第八步驟
多媒體篇全網頁播放器單篇網誌影音播放器多功能媒體播放器500MB 無上限隨機選曲播放器 範例 ( 按選播歌曲或重新整理或直接進入文章 )xuite免費網頁空間
小玩意線上訪客人數400多種免費時鐘 Blog寵物 裝飾 blog 的 flash-A01 範例：可分日記，網誌和留言板，相簿去分別選擇一種或多種
部落美化更改文章標題字 部落格標題字設定-實用語法014 超連結字體呈現三種顏色 如何修改版主回覆留言的顏色-實用語法009 換頁語法01-實用語法004 圖片語法04-透明霧化跑馬燈-實用語法008 範例：心詩-夢隨風飄(5) 狀態列跑馬燈01-實用語法031 跟著滑鼠跑的字-實用語法022
小技巧推薦數與鼓勵數 一般編輯與進階編輯沒有ID或暱稱，個人像吃冰棒... 被騷擾到受不了...想關天空抓網址 RSS連播是甚麼網誌或日記上鎖...部落格背景圖留言板強制私密留言變化網誌或日記內容的字色變更個人檔案圖資源共享大集合 其他常見小問題
其他請參考 天空部落全版改版法( 第1版 ) mj16888 版本 ( 第1版 ) 天空部落CSS改版法( 第3版 ) hung16888 版本 ( 第3版 ) 天空部落CSS改版法( 第4版 ) mj16888 版本 ( 第4版建構中 )
>> 回總目錄
▲本部落的圖文為柳隨風自創～歡迎大家引用、轉載、轉貼、下載
但請別更改原創作或做任何其他商業用途
