婷婷的部落格

◆首先 先認識一下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 寬度)。

下次有時間再來講解關於版面欄位 各別設定