甜蜜媽咪痞世界

琳達教學：如何自製部落格版型 進階型分線邊框
琳達針對自製邊框的設計及語法都有詳細的說明
若在製作過程中有不了解之處請回應訊問
倘若你連正確引用都懶得引用，你的問題琳達也懶得回答你
第一課敎學 琳達教學：如何自製部落格版型 簡易型邊框
第二課教學  琳達教學：如何自製部落格版型 簡易型小圖邊框
第三課教學  琳達教學：如何自製部落格版型 簡易型閃圖邊框
都是運用圖檔套上簡單的語法而形成部落格邊框
當然愈到後面是愈精彩喲~
呈現邊框可以是包括標題、左右側欄及中間文章邊框
也可以只有側欄位，中間及標題不顯示
也可以側欄邊框和中間文章邊框樣式不同
當然就是需要運用到不同語法來呈現囉~
今天琳達要教的是運用分線來製成的邊框

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

領取琳達LOGO
 

教學開始囉~
琳達在韓網找了上面的分線
要了解邊框是由六張圖檔而形成的，而每張圖檔都有它該放置的位置
先看下方圖示的解說


打開  的軟體，先來製作圖示一的部份
步驟一、 開啟分線圖檔點編輯按畫布大小，將寬度設為1000，高度不變(如圖示)

先將左上角的圖先定位，所以琳逹複製了三個對象(在圖的地方點右鍵按複製，此時你看到的是三個重疊的圖檔，點左列的工具列的  將圖檔拉至旁邊就是三個圖檔囉~)
將對象1 的星星移至最前方位置定位好，其它二個圖檔往右邊延伸，(可先點預覽觀看)然後儲存，
點網址看示範圖示
(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7031.gif)
步驟二、 要製作圖示二的部份
開啟分線圖檔，琳達只取星星的部份，因為不知星星尺寸是多少
所以在畫布大小的部份是可以做微調的，為了要讓整個框圖有一致性，所以琳達在星星的右下角貼上一個小點點，一樣複製分線，將小點點放在適當的位置，發現原先高度是22，但放入了小點點，高度好像就不足了，所以在畫布大小的地方增加了1，現在高度是23，其它的多餘的部份先按左方工具列的矩形，將不要的部份框起來再點上方工具列的剪刀去除掉，而這個小點點將是我們要製作圖示五和圖示六的圖檔喲~ 這是圖示二的部份
步驟三、 要製作圖示三的部份，因為這裡圖示一的圖檔也可以使用在圖示三的部份
所以琳達就此省略囉~
步驟四、和製作圖示二的方法是一樣的，只不過圖示四是放在右下角，所以小點點是要放置在右上方的位置，像醬子→ 
步驟五、 一樣開啟分線，先按畫布大小設定寬和高
將剛剛的小點點重覆複製，排成縱向的→   這就是圖示五和六的部份
將以上所製作的圖檔全部上傳至個人網路間取得網址套入語法

語法對照註解：
/*隱藏橫框主標題名稱框線圖*/是看個人需求，若標題橫框要顯示請別加上這一段語法

margin-bottom:10px 這是設定欄與欄位之間距離的數值
margin-right:5px  和 right:-5px; 設定相對應寬度的數值
height:10px 設定上下框線的高度數值
padding-left:5px;和 padding-right:5px; 是框的左右圖檔寬度的數值

以下是邊框預覽和語法範例

整體邊框設定預覽圖

/*Linda進階型分線邊框語法範例*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url( http://i469.photobucket.com/albums/rr57/linda9295/lindajp7031.gif) left top no-repeat;margin-right:5px; } .ycntmod .rctop div {background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7032.gif) right top no-repeat;height:23px;font-size:0;position:relative;right:-5px; } .ycntmod .rcbtm {zoom:1;background:url( http://i469.photobucket.com/albums/rr57/linda9295/lindajp7031.gif) left bottom no-repeat;margin-right:5px; } .ycntmod .rcbtm div {background:url( http://i469.photobucket.com/albums/rr57/linda9295/lindajp7034.gif ) right bottom no-repeat;height:23px;font-size:0;position:relative;right:-5px; } .ycntmod .rcl {padding-left:6px;background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7035.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:7px;background:url( http://i469.photobucket.com/albums/rr57/linda9295/lindajp7035.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

中間文章邊框預覽圖

/*Linda中間文章邊框語法範例*/ .yc3pribd .rctop {zoom:1;background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7031.gif) left bottom repeat-x;margin-right:5px;} .yc3pribd .rctop div {background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7032.gif) right bottom no-repeat;height:23px;font-size:0;position:relative;right:-5px;} .yc3pribd .rcbtm {zoom:1;background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7031.gif) left bottom repeat-x;margin-right:5px;} .yc3pribd .rcbtm div {background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7034.gif) right bottom no-repeat;height:23px;font-size:0;position:relative;right:-5px;} .yc3pribd .rcl {padding-left:22px;background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7035.gif) repeat-y;} .yc3pribd .rcr {zoom:1;padding-right:22px;background:url(http://i469.photobucket.com/albums/rr57/linda9295/lindajp7035.gif) right repeat-y;} .yc3pribd .yc3pribd{overflow:visible;}.yc3pribd .yc3pribd .yblogcnt{overflow:hidden;}

邊框中間是透明的，側欄框內若要加上壁紙，可以在CSS中加上以下語法
/*側欄區內文底色及文字顏色設定*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background:url(內文底圖網址);color:#000000;}

若中間文章區也要加底圖
/*文章內文及文章區底色及文字顏色設定*/
.yc3pribd .mbd,.yc3pribd .mft{ padding:10px;background:url(內文底圖網址);color:#000000;}
註解：color 是文字的顏色，可參考色碼表

希望您會喜歡此教學喲~