琳達教學：如何自製部落格版型 進階型相框邊框
製作教學；真滴素有夠麻煩滴....
又要截圖，又要解說，每個部驟每個小動作都要講得很詳細
中間若少掉了某個小分解，就會導致後序製作的困難度了
所以囉~若你真得能在琳達教學中真正學習到如何製作
也請你告訴琳達，不但替你高興，琳達也會很有成就感的喔~
琳達專屬分線
辛苦的製作教學，希望你能正確引用
★要如何正確引用請參考★琳達教你如何引用BLOG文章★
★要外連帶走的請註明原出處：★Linda達令★
★本站文章巳申請註作權，請尊重他人正確引用
領取琳達LOGO
琳達專屬分線老實講；琳達倒是覺得相框邊框是較簡單的
祗不過是將適當的相框切割成六張圖檔，再將圖一和圖三寬度加長
來看看；琳達找到這張框圖做為範例
再來看如何切割→
打開
的軟體，先來製作圖示一的部份
步驟一、 開啟相框圖檔點編輯按畫布大小，將寬度設為1000以上，高度可自行調整(如圖示)
再將此圖(圖示一)複製延伸寬度 →
製成的圖檔為→
http://img185.imageshack.us/img185/2723/lindajp7121.gif圖示二的部份 →
圖示三的製作和圖示一是一樣的，將此圖 →
延伸至所需寬度
製成的圖檔為→http://img185.imageshack.us/img185/8474/lindajp7123.gif
圖示四的部份 →
圖示五
和圖示六
的圖檔，製成之後一一將它們上傳至個人網路空間取得網址
套入以下的語法 ↓
|
/*隱藏橫框主標題名稱框線圖*/
#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; 是框的左右圖檔寬度的數值
|
語法範例 ↓
邊框預覽圖 ↓
延伸相關教學圖文閱讀
第一課敎學
琳達教學：如何自製部落格版型 簡易型邊框 第二課教學
琳達教學：如何自製部落格版型 簡易型小圖邊框 第三課教學
琳達教學：如何自製部落格版型 簡易型閃圖邊框
第四課教學
琳達教學：如何自製部落格版型 進階型分線邊框
