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


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

領取琳達LOGO
琳達 


<A href="http://tw.myblog.yahoo.com/linda590902/" target=blank><IMG alt="""""""""""""""""""""琳達""""""""""""""""""""" src="http://i469.photobucket.com/albums/rr57/linda9295/lindalogo1.gif" border=0></A>




琳達專屬分線


首先先來了解側欄邊框的製作圖檔分為上、中、下三張圖檔
而邊框圖檔的寬度大約在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 (右邊框圖) 這框數值，也可微調喔~

延伸相關教學圖文閱讀
第一課敎學 琳達教學：如何自製部落格版型 簡易型邊框
第二課教學  琳達教學：如何自製部落格版型 簡易型小圖邊框
第三課教學  琳達教學：如何自製部落格版型 簡易型閃圖邊框
第四課教學  琳達教學：如何自製部落格版型 進階型分線邊框
第五課教學  琳達教學：如何自製部落格版型 進階型相框邊框

arrow
arrow
    全站熱搜

    翔霏 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄