琳達教學:如何自製部落格版型 進階型側欄位邊框
之前琳達所教學的邊框都是以整個版型邊框為主
倘若所設計的版型是不需要中間文章框
又或者是兩側欄位的邊框和中間區塊的邊框不同的話
其語法與製作圖檔都和之前所教學的完全不同
自己動手試試,再加以應用巧思,相信美美的邊框對整體的版型來說就有加分的效果囉~
琳達專屬分線

辛苦的製作教學,希望你能正確引用
★要如何正確引用請參考★琳達教你如何引用BLOG文章★
★要外連帶走的請註明原出處:★Linda達令★
★本站文章巳申請註作權,請尊重他人正確引用

領取琳達LOGO
琳達專屬分線

首先先來了解側欄邊框的製作圖檔分為上、中、下三張圖檔
而邊框圖檔的寬度大約在155px~190px不等
就看整體版型所需要的欄位尺寸來設計囉~
當然有一點很重要的是....當側欄邊框尺寸較大時,中間區塊相對縮小
製圖其實很簡單,重點在於如何運用語法
所以說之前有學過如何自製邊框,今天的教學就會較簡單囉~
不多說;今天琳達找了個框圖做為邊框素材
尺寸在160px 給各位參考(當然你也可以選擇170px囉~)
→ 分割動作 
首先打開軟體
(←下載點)軟體
開啟框圖檔 
或是按檔案(F)開啓圖像( I ) 都可以
檔案開啟後先設定上圖:按編輯(E)
畫布大小(S)
設定適合的尺寸慢慢微調

上圖好了喔~
儲存檔案
按檔案(F)
最佳化精靈(M)
點三下的下一步
完成
另存為
存在你所知道地方
製作下圖,大部份上圖和下圖之尺寸差不多也是需要微調到剛好的尺寸
若有連圖也可運用上方工具例中的→ 
來調整位置
再來就是中間圖的部份囉~寬度不變,高度設置在5~40PX都可以也較恰當
琳達將它設為25px另存檔案,將圖檔分別上傳網路空間
分割好的三張圖檔分別為

開始套入語法囉~
使用側欄邊框一定要加無框語法
預覽樣式



|
套入語法 |
語法範例 |
/*shared rounded corner for all modules 無框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:15px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:transparent left top no-repeat;margin-right:0px;} .ycntmod .rctop div {background:transparent right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcbtm {zoom:1;background:transparent left bottom no-repeat;margin-right:0px;} .ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcl {padding-left:0px;background:transparent repeat-y;} .ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} /*=====================*/ /*Linda 達令側欄框設定*/ .yc3sec .rctop, .yc3sub .rctop {background:url(上圖檔網址) left top no-repeat;margin-right:0px;} .yc3sec .rctop div, .yc3sub .rctop div {background:transparent right top no-repeat;height:52px;font-size:0;position:relative;right:-0px;} .yc3sec .rcl, .yc3sub .rcl {padding-left:0px;background:url(中圖檔網址) repeat-y;} .yc3sec .rcr, .yc3sub .rcr {padding-right:0px;background:transparent right repeat-y;} .yc3sec .rcbtm, .yc3sub .rcbtm {background:url(下圖檔網址) left bottom no-repeat;margin-right:0px;} .yc3sec .rcbtm div, .yc3sub .rcbtm div {background:transparent right bottom no-repeat;height:93px;font-size:0;position:relative;right:-0px;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
/*shared rounded corner for all modules 無框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:15px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:transparent left top no-repeat;margin-right:0px;} .ycntmod .rctop div {background:transparent right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcbtm {zoom:1;background:transparent left bottom no-repeat;margin-right:0px;} .ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcl {padding-left:0px;background:transparent repeat-y;} .ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} /*==========================*/ /*Linda 達令側欄框設定*/ .yc3sec .rctop, .yc3sub .rctop {background:url(http://img23.imageshack.us/img23/7286/lindalove1.gif) left top no-repeat;margin-right:0px;} .yc3sec .rctop div, .yc3sub .rctop div {background:transparent right top no-repeat;height:52px;font-size:0;position:relative;right:-0px;} .yc3sec .rcl, .yc3sub .rcl {padding-left:0px;background:url(http://img25.imageshack.us/img25/1829/lindalove2.gif) repeat-y;} .yc3sec .rcr, .yc3sub .rcr {padding-right:0px;background:transparent right repeat-y;} .yc3sec .rcbtm, .yc3sub .rcbtm {background:url(http://img25.imageshack.us/img25/5699/lindalove3.gif) left bottom no-repeat;margin-right:0px;} .yc3sec .rcbtm div, .yc3sub .rcbtm div {background:transparent right bottom no-repeat;height:93px;font-size:0;position:relative;right:-0px;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
語法對照註解:
margin-right:0px 和 right:-0px; 設定相對應寬度的數值
height:52px height:93px 設定上下框線的高度數值
background:#ffffff 若框裡內文部份需要上底色,可在url的前面(要空一格)加上色碼,
不然它可是透明的框底喲~
padding-left:0px (左邊框圖)和 padding-right:0px (右邊框圖) 這框數值,也可微調喔~
延伸相關教學圖文閱讀
第一課敎學 琳達教學:如何自製部落格版型 簡易型邊框
第二課教學 琳達教學:如何自製部落格版型 簡易型小圖邊框
第三課教學 琳達教學:如何自製部落格版型 簡易型閃圖邊框
第四課教學 琳達教學:如何自製部落格版型 進階型分線邊框
第五課教學 琳達教學:如何自製部落格版型 進階型相框邊框