邊框教學 -簡易篇
很多人都想製作屬於自己的專屬邊框 來打造自己的部落格 所以我這次的教學就是部落格邊框教學-簡易篇
為什麼要稱呼為簡易篇 畢竟不懂語法以及語法尺寸的朋友很多
就連我都是一各語法白痴
所以我這次要用簡單的教學讓大家輕鬆製作邊框 等到都熟練了 我門在去學習真正的語法還不遲
首先我們先了解部落格邊框語法的基本指示區塊
/*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/]
取得網址後 在分別將網址貼在語法中 簡單來說 妳可以隨意取走甜心製作的邊框語法
這篇邊框教學屬於簡易篇 跟其他懂語法製作邊框的達人
當然還是有所差距 希望大家一起加油喔!!
去掉甜心裡面的圖片網址 再將你的新網址黏貼進去
不過請千萬記得 圖片尺寸一定要是跟你取走的語法是相同的
不然出現的會是很搞笑的邊框喔!!
制成品:
| 歡迎光臨 公仔箱論壇 (http://5.39.217.76/) | Powered by Discuz! 7.0.0 |