[教學] 部落格邊框教學 -簡易篇***

，描述：想取得免費上傳空間的網址?請進來吧...

邊框教學 -簡易篇

很多人都想製作屬於自己的專屬邊框來打造自己的部落格所以我這次的教學就是部落格邊框教學-簡易篇

為什麼要稱呼為簡易篇畢竟不懂語法以及語法尺寸的朋友很多

就連我都是一各語法白痴

所以我這次要用簡單的教學讓大家輕鬆製作邊框等到都熟練了我門在去學習真正的語法還不遲

首先我們先了解部落格邊框語法的基本指示區塊

/*shared rounded corner for all modules部落格邊框語法←在此可以輸入中文名稱*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://邊框左上角橫幅圖片網址01.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(http://邊框右上角直幅圖片網址02.gif) right top no-repeat;height:98px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(http://邊框左下角橫幅圖片網址03.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(http://邊框右下角直幅圖片網址04.gif) right bottom no-repeat;height:152px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:6px;background:url(http://邊框左邊框線圖片網址05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:6px;background:url(http://邊框右邊框線圖片網址06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

部落格的一般邊框框線是由6張圖片配合著語法組合而成

既然稱為簡易篇當然我們一開始不可能自己去編輯語法我的小方法就是

請各位可以運用一各自己認為大小符合自己條件的邊框

例如我製作好發表過的邊框語法裡如上述所說的他會有6張圖片網址

每張圖片都依序另存在自己的電腦裡面

我就取一各最近做的邊框來運用吧

首先我先取他的左上角圖片另存在自己電腦裡在使用我最愛用的動畫軟體G5來製作

Ulead GIF Animator 5註冊版+中文化下載：http://rongedu.myweb.hinet.net/sharedl/gif5.rar

接下來來試著做看看吧

步驟一剛提到的請先將六張圖片分別另存在自己的電腦後我們來開啟第一張圖片

步驟二開啟圖片後我們取的是他的尺寸來製作所以請將裡面的圖片逐一刪除

步驟三加入圖像將自己收集而來的圖片素材加入到畫格裡

步驟四加入自己喜歡的素材圖片後一定不夠邊框的長度點圖片後使用上方的複製貼上的工具來增加整體感
在這你就可以開始做自己想要的發揮意境你可以加些小東西例如娃娃或是字體

步驟五同上述提到你可以再自行增加一些喜歡的素材圖片使得你的邊框更為生動喔現在就發揮你的想像力吧!!

步驟六每個人的風格不同當然也有很多人喜歡靜態的邊框來佈置自己的部落格喜歡動態可使用下方工具來增加畫格
喜愛靜態的朋友則不需~

步驟七發揮自己的想像來製作出自己喜歡的邊框效果但是儲存前請記得一定要來看看預覽圖

步驟八當預覽後沒有需要修改的地方時將圖片做儲存動作請記得一定要儲存GIF檔案
儲存步驟在圖片裡

基本邊框共有六張圖片來構成我取第一張來作示範其實方式都相同
都是分別開啟圖片來製作出整體感
底下是邊框分割的示意圖供大家參考

當你六張圖片全部製作完成後想自己使用或是想分享給大家使用

你可以自己製作預覽圖

也可以順便看看自己還未放在網頁上呈現出來的是怎樣的效果

一切\準備就緒後就是將六張圖片分別上傳至網路取得圖片網址

想取得免費上傳空間請點[url=http://allyoucanupload.webshots.com/]

取得網址後在分別將網址貼在語法中簡單來說妳可以隨意取走甜心製作的邊框語法

這篇邊框教學屬於簡易篇跟其他懂語法製作邊框的達人

當然還是有所差距希望大家一起加油喔!!

去掉甜心裡面的圖片網址再將你的新網址黏貼進去

不過請千萬記得圖片尺寸一定要是跟你取走的語法是相同的

不然出現的會是很搞笑的邊框喔!!

制成品: