~✿翔霏の寶貝屋✿~

imageshack 青蛙網--圖片、Flash 上傳教學(二度空間)編輯製作

因格友為青蛙網無法上傳Flash一事在傷腦筋，引響了創作的意願，柏憲在休息期間為此事做了功課，由"品味人生部落格"提供之部分相關資訊，研究編制了以下教學希望對喜歡分享創作的格友有所幫助。(本文編輯日期：2008/09/07)

PS：有興趣引用的格友，非經柏憲同意，請勿任意改變本文任何圖片及文字與格式，也請勿將教學圖片用在本文以外之其它任何用途，本人保留編輯追訴權益。

欄位語法：

<embed src="http://img516.imageshack.us/img516/2183/20409160wm3.swf" width="128" height="128" wmode="transparent" allowScriptAccess="none">

貼語法路徑→管理部落格→管理自定欄位→填寫自定欄位名稱→將語法貼入自定欄位內容→按儲存

PS :重新修改時，語法建議重貼

自訂欄位檢圖說明範例→http://xs320.xs.to/xs320/07442/W6-5.jpg

以下上傳教學主要針對常用部分，其餘相關操作部分不在此教學範圍內，請格友自行研究

imageshack 青蛙網首頁連結：http://www.imageshack.us/

青蛙網上傳Flash...首先安裝 imageshack 站內提供的上傳軟體，點我下載 (下載完成出現青蛙圖示 exe 檔)

安裝畫面操作簡單，在此不多做解說，安裝之後即跳出新頁面自動產生 imageshack 的工具列，如圖 1：(點圖觀看放大圖)

建議申請會員，方便操作

安裝 imageshack 上傳工具後如未出現工具列，請依圖 2 方式操作：(點圖觀看放大圖)

登錄之後，開啟你的檔案資料夾，如圖 3：(點圖觀看放大圖)

進入資料夾後，可選擇兩個任一上傳工具點，如圖 4：(點圖觀看放大圖)

跳出上傳對話工具，依圖面參考方式進行操作，如圖 5：(點圖觀看放大圖)

或者以拖曳方式選擇更多檔案上傳，如圖 5-1：(點圖觀看放大圖) 2008/09/09新增

檔案上傳中進行畫面，如圖 6：(點圖觀看放大圖)

檔案上傳後，如果有需要刪除其它檔案，依圖面方式操作，如圖 7：(點圖觀看放大圖)

複製檔案連結網址，延伸圖 7 的按鈕操作，如圖 8：(點圖觀看放大圖)

設定檔案分類標籤，方便檔案資料夾管理，如圖 9：(點圖觀看放大圖)

另外開啟多檔案上傳視窗，如圖 10：(點圖觀看放大圖)

操作以下操作，請先瀏覽圖 14

選擇檔案壓縮，此操作..電腦中必須安裝ZIP壓縮軟體，本教學以WinRAR3.2版本做示範，如圖 11：(點圖觀看放大圖)

壓縮模式 ZIP，如圖 12：(點圖觀看放大圖)

已壓縮完成之 ZIP 壓縮檔畫面範例，如圖 13：(點圖觀看放大圖)

選擇壓縮檔案之檔案位置，如圖 14：(點圖觀看放大圖)

載入開啟先前製作之 ZIP 壓縮檔，如圖 15：(點圖觀看放大圖)

ZIP 壓縮檔就緒準備上傳，如圖 16：(點圖觀看放大圖)

ZIP 壓縮檔上傳成功後，即自動解壓縮依事先設定之檔案標籤位置排列在檔案資料夾中，如圖 17：(點圖觀看放大圖)

檔案連結資料倉，如圖 18：(點圖觀看放大圖)

亦可在檔案連結資料倉內改變檔案儲存標籤位置，如圖 19：(點圖觀看放大圖)

二度空間祝您使用愉快

 G5軟體簡單製作左右框圖

完成了更改原圖檔，現在我們就以這個喵喵圖來製作部落左右欄框

沒有 Ulead GIF Animator 5，這套製圖軟體的請下載以下載點↓

程式下載點↓
http://rongedu.myweb.hinet.net/sharedl/gif5.rar
下載完後，點按資料夾進去，先安裝主程式『英文版』再安裝中文化

製作 一 打開製圖軟體 G5 開啟圖像檔案

開啟你的製圖軟體G5

1  → 點按左上角的黃色資料夾→開啟圖像檔案

2  → 更改好的喵喵圖，我的檔案名稱12345點選，按開啟

製作 二 調整圖像秒數

圖像已經在我們的工作檯上

1 → 選擇工具點選，在圖像上點一下，出現四週黑色小虛線，才能進行下一步驟

2  → 這張圖檔只有兩畫格，我們先在第一畫格點按，然後按鍵盤上的 ↑shift不放，

    滑鼠在點按第二畫格，這樣一來兩張可同時調整秒數

3 → 對著兩畫格按滑鼠右鍵，會有個指令版，選擇 畫格內容(P)

4  → 出現另一個指令版，畫格屬性→延遲(D)調整秒數，這裡我調整30，等於延遲0.3秒，按確定

 PS ※ 調整秒數方面，可單獨一一調整，想要有的動作慢，妙數就調多一點。

     假如你製作的畫格不只兩畫格，同樣的先按第一畫格，按鍵盤↑shift不放，

    滑鼠在點按圖檔的最後一畫格，這樣就可同時調整秒數

製作 三  裁減框線上欄

1 → 選擇區工具---矩型，選出我們要裁減的範圍

2  → 點按工具列的編輯(E)，選擇裁減畫布(R)

裁減好上欄，先儲存

1  → 點按工具列的 檔案(F)，選擇另存為(A)→GIF檔案(G)

3 →面板指令→另存新檔，檔案名稱(N)  填上妳喜歡的檔名，這裡我填上000000做示範

4 → 填上名稱，直接按儲存(S)

 PS※ 要記得你將圖檔給存在哪了唷？

製作 五 裁減框線 中間部份

上欄儲存完成，按1 →復原

2 → 選擇工具區--矩型，選擇要裁減的中間部分

3  → 編輯(E)，點按裁減畫布(R)，一樣的裁減好中間另存新檔

PS ※ 復原鍵，箭頭往左復原上一張，箭頭往右復原下一張

製作 六 裁減框線下欄部份

中間部分儲存，我們在次的點按1 →復原， (這裡擋住了，請參考製作五)

 2 → 選擇區工具--矩型，選好下欄要裁減的範圍

3 → 一樣的，點按編輯(E)，裁減畫布(R)

製作 七 裁減完成 另存新檔

下欄我們也裁減好了，進行儲存動作，點按檔案，另存為，GIF檔案，打上檔案名稱，儲存即完成

 PS ※ → 圖檔製作好，必須上傳空間取得網址

  以下就是琳製作好的成品 ↓

完成左右裝飾圖框

以下是單獨使用左右框線圖必須搭配的語法↓加上語法標題本身的底色會消失

/*Nav module header左右標題文字大小顏色置中*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{font-size:110%;background:transparent; color:#34A01C;text-align:center;}
font-size:110%→ 標題字體大小 color:#34A01C→ 標題字體顏色 text-align →字體置中，不想要置中可刪除

※ 也可在標題裡加上底圖網址 ※ ↓
/*Nav module header左右標題底圖文字大小顏色置中*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{font-size:110%;background-image : url(網址) repeat;color:#000000;text-align:center;}
font-size:110% →標題字體大小 (括號內)複製適合的圖檔網址   color：#000000更改字體色

/*左右欄底圖透明度*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background:url(http:// );filter:alpha(opacity=0);}

加上此段語法，調整奇摩部落本身的左右內容透明度

/*left/right左右欄加框圖語法解說*/
/*左右欄上方框圖 */
.yc3sec .rctop, .yc3sub .rctop {background:url(上方網址) left top no-repeat;margin-right:0px;}
.yc3sec .rctop div, .yc3sub .rctop div {background:transparent right top no-repeat;height:上方高度px;font-size:0;position:relative;right:-0px;}

/*左右欄中間左側框圖 */
yc3sec .rcl, .yc3sub .rcl {padding-left:左邊離側寬度px;background:url(中間網址) repeat-y;}
這裡不用填上圖檔高度，而是調整標題跟內容字離左測邊的距離，數字大，標題內容文字往右移

/*左右欄中間右側框圖*/
.yc3sec .rcr, .yc3sub .rcr {padding-right:右邊離測寬度px;background:transparent right repeat-y;}
而這段語法是調整標題跟內容字離右測邊的距離，數字大標題內容文字往左移
左右調整依你喜愛，其中一邊數字大就偏離另一邊，這裡建議數字填上一樣讓文字集中於中間部份，
但不宜數字過大，大概在0-----10以內

/*左右欄下方框圖*/
.yc3sec .rcbtm, .yc3sub .rcbtm {background:url(下方網址) left bottom no-repeat;margin-right:0px;}
.yc3sec .rcbtm div, .yc3sub .rcbtm div {background:transparent right bottom no-repeat;height:下方高度px;font-size:0;position:relative;right:-0px;}

製作 八 製作裁剪、語法多樣化

這裡的示範簡略，範例只裁減左右側，其它地方裁減都跟『喵喵』製作方法一樣

假如如你只想製作上方跟下方的左右框圖，/*左右欄中間左框圖*/不放圖檔，而改由顏色代替，就用以下語法
不想有底色background:#F2657F則把色碼數字刪除，只留下#

/*left/right左右欄加框圖--上下兩圖檔中間底色外圍虛線色*/
/*左右欄上方框圖 */
.yc3sec .rctop, .yc3sub .rctop {background:url(http://carolinebetty.googlepages.com/caroline2-22.gif ) left top no-repeat;margin-right:0px;}
.yc3sec .rctop div, .yc3sub .rctop div {background:transparent right top no-repeat;height:109px;font-size:0;position:relative;right:-0px;}
/*左右欄中間左側框圖*/
.yc3sec .rcl,.yc3sub .rcl {padding-left:0px;background:#F2657F repeat-y;border:1px dotted #000000;}
/*左右欄中間右側框圖*/
.yc3sec .rcr, .yc3sub .rcr {padding-right:0px;background:transparent right repeat-y;}
/*左右欄下方框圖*/
.yc3sec .rcbtm, .yc3sub .rcbtm {background:url(http://carolinebetty.googlepages.com/caroline2-21.gif ) left bottom no-repeat;margin-right:0px;}
.yc3sec .rcbtm div, .yc3sub .rcbtm div {background:transparent right bottom no-repeat;height:87px;font-size:0;position:relative;right:-0px;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

/*left/right左右欄加框圖--上下兩圖檔中間底色外圍虛線色語法解說*/
/*左右欄上方框圖 */
.yc3sec .rctop, .yc3sub .rctop {background:url(上方網址 ) left top no-repeat;margin-right:0px;}
.yc3sec .rctop div, .yc3sub .rctop div {background:transparent right top no-repeat;height:上方高度px;font-size:0;position:relative;right:-0px;}
/*左右欄中間左側框圖*/
.yc3sec .rcl,.yc3sub .rcl {padding-left:0px;background:#底圖色 repeat-y;border:虛線尺寸px dotted #虛線色;}
/*左右欄中間右側框圖*/
.yc3sec .rcr, .yc3sub .rcr {padding-right:0px;background:transparent right repeat-y;}
/*左右欄下方框圖*/
.yc3sec .rcbtm, .yc3sub .rcbtm {background:url(下方網址 ) left bottom no-repeat;margin-right:0px;}
.yc3sec .rcbtm div, .yc3sub .rcbtm div {background:transparent right bottom no-repeat;height:下方高度px;font-size:0;position:relative;right:-0px;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

或則你製作的圖檔分為上方、下方、左側、右側，而中間透明或你想加上底圖顏色就加入以下語法↓
但記得左右側方的圖檔，製作時不宜過寬

/*left/right左右欄加框圖--上下左右四圖檔*/
/*左右欄上方框圖 */
.yc3sec .rctop, .yc3sub .rctop {background:url(http://i234.photobucket.com/albums/ee170/MichelleRuby/caroline2-24.gif) left top no-repeat;margin-right:0px;}
.yc3sec .rctop div, .yc3sub .rctop div {background:transparent right top no-repeat;height:41px;font-size:0;position:relative;right:-0px;}
/*左右欄中間左側框圖 */
.yc3sec .rcl, .yc3sub .rcl {padding-left:6px;background:url(http://i234.photobucket.com/albums/ee170/MichelleRuby/caroline2-25.gif) #EEC4D6 repeat-y;}
/*左右欄中間右側框圖*/
.yc3sec .rcr, .yc3sub .rcr {padding-right:6px;background:url(http://i234.photobucket.com/albums/ee170/MichelleRuby/caroline2-27.gif) right repeat-y;}
/*左右欄下方框圖*/
.yc3sec .rcbtm, .yc3sub .rcbtm {background:url(http://i234.photobucket.com/albums/ee170/MichelleRuby/caroline2-26.gif) left bottom no-repeat;margin-right:0px;}
.yc3sec .rcbtm div, .yc3sub .rcbtm div {background:transparent right bottom no-repeat;height:25px;font-size:0;position:relative;right:-0px;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

首先我們先來複製↑ 2 將文章分類全部文字反藍按右鍵複製，接下來↓

這張↑是我們發表文章的地方，圖1左邊的地方，就是我將剛剛所複製的文章分類貼在發表文章的地方

圖2右邊，這裡我們將不要的刪除，(注意蛤)不要把連結給刪除了，連結就是字體下方一條線，這條線刪除就不能連結了喔

刪除多餘的部份後，我們可依個人喜愛(圖↑1)，將文字靠左或靠右，琳的文章分類只有四個字，所以我選擇字體置中，【文字若比較多就放左或右，依個人喜愛的啦】

選擇好妳的文字位置後，直接加入喜歡的圖檔【ㄚ，不要太大溜，嘟嘟好就好嘿】

放圖檔時可按空白鍵，讓圖檔跟字體有點距離(按一次或兩次空白鍵就夠了喔)

字體顏色也可自行做變化(但是注意蛤，有常常換版型的，字體也就要跟著更改喔)

更改完後，1↑將觀看HTML原始碼打勾，我們要複製原始碼

全部字體點左鍵反藍，按右鍵複製(全部喔)

複製完語法你可直接按左上方的格名回到部落或按取消文章發表回到部落。

最後一個步驟了，我們到管理自訂欄位設定

管理部落格→管理自訂欄位點按後，來到預覽圖的畫面↑

1 將所複製的原始碼，按右鍵直接貼上，填上名稱，分類名稱可自行打上不同的，就是不能超過七個字嘿，完成了按儲存。

文章分類可調整位置，2 ↑按版型設定，調整你想要放置的位置，都好了回到管理部落格首頁瞧瞧，呵呵~~Ok~~~OK粉Ok~~~YA‵‵成功

 隨藝創作

 製作參考

 語法記錄

 巧妙連結

 偶然收藏

 隨筆琳廳

所自訂的文章分類都可任意更改與變化位置，把原始碼語法收藏好，貼在記事本上，隨時想更改圖樣、字體，只要複製、貼在管理自定欄位即可。

以上範例語法，除了文章連結點勿更改，綠色部分都可斟酌更改。

<p align=center><img src="小圖網址" />&nbsp;<a href="文章連結點 "><font color=#更改字體顏色 size=字體大小>分類名稱</font></a></p>

 再來就是假如你不想這樣的麻煩，每次更換面板，

有時字體又會跟所換的版型不搭，所以你也可將語法內的顏色或字體大小設定刪除

字體顏色大小由版型設定來決定，這樣你就不用這樣麻煩，反覆的重新設定

比如---↓我將<font color=#8e8e8e size=3> 這段刪除，它就隨著版型設定決定

<p class=text align=left><img src="http://i234.photobucket.com/albums/ee170/MichelleRuby/oline822.gif" />&nbsp;<a href="http://tw.myblog.yahoo.com/jw!YFl.6UmaHk9bFp1B_BIetSfj/archive?l=f&amp;id=71">隨藝創作</font></a></p>

<p class=text align=left><img src=" 小圖網址 " />&nbsp;<a href=" 文章連結點 ">分類名稱</font></a></p>