琳達教學：如何自製部落格版型 簡易型閃圖邊框

琳達教學：如何自製部落格版型 簡易型閃圖邊框
目前琳達的版型邊框教學及製作都是簡易型的
對於想要學習創作分享的好友可有多種選擇運用發揮
漸進式的學習，在後面難度較高，前面有學會的，到後面必能融會貫通
第一課敎學  琳達教學：如何自製部落格版型 簡易型邊框
第二課教學  琳達教學：如何自製部落格版型 簡易型小圖邊框

琳達專屬分線


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

取琳達LOGO
   教學分享

琳達專屬分線

今天的教學所運用到的軟體是    (←下載點)軟體

所需要的圖檔素材是閃圖    或是可參考 → 
首先打開U5軟體開啟閃圖圖檔 

或是按檔案(F)開啓圖像( I ) 都可以
檔案開啟後按編輯(E) 畫布大小(S)

寬度可設在3~7之間，高度建議設在25~30之間，要記得按確定喔~
此時你可以按  預覽 觀看，這是製作邊框的兩側所要的素材
預覽觀看成品覺得可以時要記得按回編輯
此時就要做儲存動作了，還記得如何儲存嗎~
 按檔案(F)  最佳化精靈(M)  點三下的下一步  完成  另存為  存在你所知道地方
打上檔案名稱(都要是英文滴喔~) 上傳至個人網路空間取得網址   

所使用到的圖檔   and 預覽樣式	套入語法	語法範例
	/*Shared rounded corner for all modules Linda 閃框*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(上框閃圖網址) left top repeat-x;margin-right:5px;} .ycntmod .rctop div {background:url(右上角閃圖網址) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(下框閃圖網址) left bottom repeat-x;margin-right:5px;} .ycntmod .rcbtm div {background:url(右下角閃圖網址) right bottom no-repeat;height:5px;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;}	/*Shared rounded corner for all modules Linda 閃框*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://img13.imageshack.us/img13/4472/lindass001.gif) left top repeat-x;margin-right:5px;} .ycntmod .rctop div {background:url(http://img13.imageshack.us/img13/4472/lindass001.gif) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://img13.imageshack.us/img13/4472/lindass001.gif) left bottom repeat-x;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://img13.imageshack.us/img13/4472/lindass001.gif) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:5px;background:#ffffff url(http://img10.imageshack.us/img10/6268/snagitlindac072.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:5px;background:#ffffff url(http://img10.imageshack.us/img10/6268/snagitlindac072.gif) 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:5px 設定上下框線的高度數值
background:#ffffff  若框裡內文部份需要上底色，可在url的前面(要空一格)加上色碼，不然它可是透明的框底喲~
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:15px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:transparent repeat;margin-right:0px;} .ycntmod .rctop div {background:transparent right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcbtm {zoom:1;background:transparent repeat;margin-right:0px;} .ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcl {padding:3px;background:url(閃框圖檔網址);} .ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;}

/*Shared rounded corner for all modules by Linda*/ #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;} .ycntmod {width:100%;position:relative;margin-bottom:15px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:transparent repeat;margin-right:0px;} .ycntmod .rctop div {background:transparent right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcbtm {zoom:1;background:transparent repeat;margin-right:0px;} .ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;} .ycntmod .rcl {padding:3px;background:url(http://img13.imageshack.us/img13/4472/lindass001.gif);} .ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;}

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

若中間文章區也要加底圖
/*文章內文及文章區底色及文字顏色設定*/
.yc3pribd .mbd,.yc3pribd .mft{ padding:10px;background:url(內文底圖網址);color:#000000;}
自己動手做看看，其實也是超簡單滴吧~

註解：color 是文字的顏色，可參考色碼表

希望你會喜歡此教學，下一篇教學開始要教進階型 分線邊框~待續XD~