寶貝培培的部落格

 

琳達教學：如何自製部落格版型 簡易型邊框
許多人在問如何自製部落框邊框，這也是在知識+常看到的問題
剛好；好友 葳姐 也在問，雖然教學是件很麻煩滴事~
所以希望各位，若琳達的教學真得對你有所幫助
請您正確的引用，這是老掉牙的話題了
但真得還是有很多人不懂得部落格裡的禮儀...XD
★要如何正確引用請參考★琳達教你如何引用BLOG文章★
★要外連帶走的請註明原出處：★Linda達令★
取琳達LOGO
   教學分享

http://tw.myblog.yahoo.com/linda590902/" target=blank>http://chuan0510.googlepages.com/chuan030.gif

" border=0>

琳達專屬分線


教學開始囉~
自製邊框所呈現的和製成的方法也分為幾種
也或者是運用語法而不需製作也是可以形成點或線的邊框效果
今天琳達就教學比較簡易型的，若能學成套用其它的分線也是有美美的效果喲~
琳達這就分別教學囉~好讓真得想學習的好友們都能自製自己喜歡的邊框
我們所需要的軟體是   (←下載點)軟體
先下載軟體，再按步就班來做喲~

首先；先找個搭配格子顏色的蕾絲或是分線，可參考素材：蕾絲分線素材
琳達選擇這款蕾絲 →  先存放在自家電腦空間裡
步驟一、打開 → U5軟體→點最上方的工具列的檔案(F)→按開啓圖像
圖像開啓後點右方的對象 - 1  再點左方工具的矩形，將不要的部份框起來(如圖示) 
再點上方工具例的剪刀去除框起來的部份
  → 
此時可參考右方對象-1 的W：寬 和 H：高，重新設定圖檔的尺寸
點編輯(E) → 按畫布大小(S) → 尺寸設定好後按確定(如圖示)

開始重新調整位置 (如圖示)，先按左方工具例的箭頭再按 2 的地方將圖檔置中

步驟二、各方面都OK後
按檔案(F)→點選最佳化精靈(M)→點三次的下一步→按完成→另存為(S)
存在你所知道的個人電腦空間裡再上傳至個人的網路空間取得網址
以上是製作邊框的下方部份 →

接下來是要製作上方的部份

同樣將剛才製作好的下方圖檔叫出來→將圖放大(點放大鏡)
點右方的對象 - 1  再按左方工具例的變形工具(如圖示)，旋轉角度打上180
再按向右旋轉的箭頭，此時圖檔巳上下反轉過來嚕~你發現了嗎?
  → 

上方圖檔OK後就重覆步驟二的部份囉~
上方圖檔 →
接下來我們要知道的是圖檔的高度(在圖檔的地方點滑鼠右鍵→點下方內容→就可以看到尺寸)
得知高度是45px ，再來選擇色碼表中的顏色→#ffa500  可參考貼琳達英文色碼表
再來選擇邊框內文底圖→
素材都有了，接下來複製下方的語法喔~
開始套入語法 【語法建議在記事本裡完成後再複製貼在自定樣式的語法裡】

	/*隱藏部落格邊框 Linda CSS*/ #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;} /*琳達自製框設定Linda CSS*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(邊框上方圖檔網址) bottom center;margin-right:0px;} .ycntmod .rctop div {background:transparent right top no-repeat;height:上方圖檔的高度px;font-size:0;position:relative;right:-0px;} .ycntmod .rcbtm {zoom:1;background:url(邊框下方圖檔網址) top center;margin-right:0px;} .ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:下方圖檔的高度px;font-size:0;position:relative;right:-0px;} .ycntmod .rcl {padding-left:0px;background:url(框內文底圖網址) repeat;border:邊框寬度px double 邊框顏色色碼;} .ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

語法範例及註解

語法範例

/*琳達自製框設定*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://img13.imageshack.us/img13/8784/01linda62.gif) bottom center;margin-right:0px;} .ycntmod .rctop div {background:transparent right top no-repeat;height:45px;font-size:0;position:relative;right:-0px;} .ycntmod .rcbtm {zoom:1;background:url(http://img4.imageshack.us/img4/2504/01linda61.gif) top center;margin-right:0px;} .ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:45px;font-size:0;position:relative;right:-0px;} .ycntmod .rcl {padding-left:0px;background:url(http://yunchan.vis.ne.jp/sos/tuki/hosi02.gif) repeat;border:3px double #ffa500;} .ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

語法註解

標題欄位若需要顯示邊框，只要將/*隱藏部落格邊框*/的部份刪除即可 margin-bottom:10px 代表欄位與欄位邊框之間的距離，大部份是在10~15px之間 height:45px 代表邊框的高度 border:3px double #ffa500 border代表邊的寬度 可選擇 2px~5px之間 double邊框樣式指令 ，可參考邊框樣式指令 #ffa500邊框的色碼 ，可參考琳達英文色碼表 邊框樣式指令：none(無邊框) 　　　　　　　dotted(點線) 　　　　　　　dashed(虛線) 　　　　　　　solid(實線) 　　　　　　　double(雙線) 　　　　　　　groove(立體凹線) 　　　　　　　ridge(立體凸線) 　　　　　　　inset(立體嵌入線) 　　　　　　　outset(立體隆起線)

預覽框樣式 

希望你會喜歡此教學