琳達教學:如何自製部落格版型 進階型分線邊框

2009042912:47

 

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

辛苦的製作教學,希望你能正確引用
★要如何正確引用請參考
★琳達教你如何引用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>


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


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


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

/*隱藏橫框主標題名稱框線圖*/
#yblogtitle .rctop{background:left top no-repeat;margin-right:0px;}
#yblogtitle .rctop div{background:right top no-repeat;height:20px;right:-0px;}
#yblogtitle .rcl{background:repeat-y;}
#yblogtitle .rcr{background:right repeat-y;}
#yblogtitle .rcbtm {zoom:1;background:left bottom no-repeat;margin-right:0px;}
#yblogtitle .rcbtm div {background:right bottom no-repeat;height:20px;right:-0px;}

/*Shared rounded corner for all modules by Linda*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url( 圖示一網址 ) left top no-repeat;margin-right:5px; }
.ycntmod .rctop div {background:url( 圖示二網址 ) right top no-repeat;height:10px;font-size:0;position:relative;right:-5px; }
.ycntmod .rcbtm {zoom:1;background:url( 圖示三網址) left bottom no-repeat;margin-right:5px; }
.ycntmod .rcbtm div {background:url( 圖示四網址 ) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-5px; }
.ycntmod .rcl {padding-left:5px;background:url( 圖示五網址 ) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url( 圖示六網址 ) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

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

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 是文字的顏色,可參考色碼表

希望您會喜歡此教學喲~