◆首先 先認識一下YAHOO BLOG的整體框線語法
/*for all modules 整體框線*/
.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;}
以上這組語法所指的邊框線，包含「標題欄位」、「邊欄位」、「文章欄位」的邊框；
位置可以參考下圖▼
◆邊框圖製作方式：
製作邊框圖一般分成六部份拼接：
左上方(下圖 top 1 位置)、左上角(下圖 top 2 位置)、
右下方(下圖 bottom 1 位置)、右下角(下圖 bottom 2 位置)、
左邊線(下圖 left 位置)、右邊線(下圖 right 位置)。
◆這次針對"整體框線"，先了解關於製作圖片時所要注意圖的寬度與高度設定：
● 三區欄位寬度都不一樣，一組圖片要怎設定?
語法設定後，會依欄位寬度自動調整縮短或拉長圖片顯示區域，
所以在製作圖片 top 1 與 bottom 1 時得配合框線要包裹最寬的欄位，
也就是「標題欄位」，
面板三欄式標題欄位寬度約984px，二欄式標題欄位寬度約750px；
所以在圖 top 1 與 bottom 1 部分的寬 和哉習慣製作到寬990px；
會自動調整所以你要製做的更寬也可以。
top 2 與 bottom 2可以依照轉角圖案剪裁所需的寬，
如果在轉角處沒有圖案的區限，圖片寬度約5~15px最佳。
left 與 right 這左右兩邊線， 製作時兩張圖片寬度最好一樣，
圖片不要太寬，這邊要注意的是「邊欄位」的標準寬度只有150px，
left 與 right 左右邊線條是往欄位內推， 如果圖片製作的太寬，
「邊欄位」會因為圖片關係而縮窄喔! 所以
left 與 right 兩張的圖寬製作在5~10px內最佳，
除非你把「邊欄位」用語法加寬，當然left 與 right 圖片也可以製作的寬一點。
●圖片製作好套入語法後，卻無法完美銜接怎麼回事?
圖 top 1 和 top 2 圖片高度必須一樣，製作時要注意兩張圖案的位置是否一樣能銜接。
圖 bottom 1 和 bottom 2 圖片高度必須一樣，也要注意圖案的位置是否一樣能銜接。
圖 left 與 right 圖片高度也最好一樣，這組會依欄位高度自動重覆圖片，
所以不需製作的太高(長)，製作時要注意圖案上方與下方是否能銜接。
參考縮小範例圖1:
參考縮小範例圖2:
◆語法設定
/*for all modules 整體框線*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url( 左上方top1圖網址 ) left top no-repeat;margin-right:5px; }
.ycntmod .rctop div {background:url( 右上角top2圖網址 ) right top no-repeat;height:10px;font-size:0;position:relative;right:-5px; }
.ycntmod .rcbtm {zoom:1;background:url( 左下方bottom1圖網址) left bottom no-repeat;margin-right:5px; }
.ycntmod .rcbtm div {background:url( 右下角bottom2圖網址 ) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-5px; }
.ycntmod .rcl {padding-left:5px;background:url( 左邊線left圖網址 ) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url( 右邊線right圖網址 ) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
說明:
◎margin-bottom:10px; 欄與欄之間相距數值。
◎height:10px; 圖片高度數值，語法內有兩個，第一個設定的是上方的圖高度(圖 top1、top2 高)，
第二個設定的是下方圖高度(圖 bottom1、bottom2 高)。
◎margin-right:5px;、right:-5px; 這一樣各有兩組， 依照top 2和bottom 2寬度設定一樣的數值，
以上語法預定top 2和bottom 2圖寬是5px；
如果top 2和bottom 2兩張圖不一樣寬，例如top2 寬15px、bottom 2寬30px，
就取小的數值，全部設定為margin-right:15px、right:-15px(注意是負數-)。
◎padding-left:5px; 設定左邊線寬度數值(圖 left 寬度)。
◎padding-right:5px; 設定右邊線寬度數值(圖 right 寬度)。
下次有時間再來講解關於版面欄位 各別設定框線圖部分。 ^ ^
