琳達教學：如何自製部落格版型 進階型相框邊框



琳達教學：如何自製部落格版型 進階型相框邊框
製作教學；真滴素有夠麻煩滴....
又要截圖，又要解說，每個部驟每個小動作都要講得很詳細
中間若少掉了某個小分解，就會導致後序製作的困難度了
所以囉~若你真得能在琳達教學中真正學習到如何製作
也請你告訴琳達，不但替你高興，琳達也會很有成就感的喔~
琳達專屬分線


辛苦的製作教學，希望你能正確引用
★要如何正確引用請參考★琳達教你如何引用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以上，高度可自行調整(如圖示)

再將此圖(圖示一)複製延伸寬度 →
製成的圖檔為→ 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; 是框的左右圖檔寬度的數值


語法範例 ↓











/*shared rounded corner for all modules邊框*/
#yblogtitle .rctop{background:transparent left top no-repeat;margin-right:0px;}
#yblogtitle .rctop div{background:transparent right top no-repeat;height:0px;right:-0px;}
#yblogtitle .rcl{background:transparent repeat-y;border:none;}
#yblogtitle .rcr{background:transparent right repeat-y;}
#yblogtitle .rcbtm {background:transparent left bottom no-repeat;margin-right:0px;}
#yblogtitle .rcbtm div {background:transparent right bottom no-repeat;height:0px;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(http://img185.imageshack.us/img185/2723/lindajp7121.gif) left top no-repeat;margin-right:9px;}
.ycntmod .rctop div {background:url(http://img294.imageshack.us/img294/8916/lindajp7122.gif) right top no-repeat;height:9px;font-size:0;position:relative;right:-9px;}
.ycntmod .rcbtm {zoom:1;background:url(http://img185.imageshack.us/img185/8474/lindajp7123.gif) left bottom no-repeat;margin-right:11px;}
.ycntmod .rcbtm div {background:url(http://img406.imageshack.us/img406/365/lindajp7124.gif) right bottom no-repeat;height:83px;font-size:0;position:relative;right:-11px;}
.ycntmod .rcl {padding-left:7px;background:url(http://img151.imageshack.us/img151/2258/lindajp7125.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:7px;background:url(http://img512.imageshack.us/img512/5254/lindajp7126.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}






文章標籤
全站熱搜
創作者介紹
創作者 翔霏 的頭像
翔霏

~✿翔霏の寶貝屋✿~

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