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