*** 2003/09/25 修正: 目前建議您直接從舊圖典藏直接連結 ***

 2002/10/23 

主題:如何在「自己的網頁」上展示「自己的線上繪圖作品和過程」

目的:有些人在自己的網頁/站連結自己的繪圖作品與過程,但是使用直接連到「繪圖留言版」之方式;

這方法不好,因為隨著新&舊的作品與過程的交替備份,舊的作品並不會永久保留於線上,

所以之前我們提供了「下載過程」,來提供使用者於「離線時」也能夠觀賞「作品與過程」;

 

本篇的主旨就在於利用「下載過程」+「個人網頁」來提供你永久

個人展示「作品與過程」的方式。

 

使用圖片:本說明使用「小哈」於「小哈工作坊 繪圖留言版 v08 所線上繪製之 [463]」為圖片和過程範例

使用服務:本說明使用「Yahoo!Kimo所提供之免費個人網頁服務」作為「個人網頁」上傳展示範例。

操作平台:Microsoft Windows, IE 5.0 以上

 

Step by step 開始:

步驟一: 首先,先觀賞一下自己的過程,如果沒啥問題,

按下你「線上繪圖」該張作品下面的「下載過程」。

步驟二:畫面會彈出視窗,仔細閱讀說明,照著步驟,

下載「四個」檔案;如硬碟已經有「播放元件」,則只需下載「兩個」檔案。

步驟三:記住,下載元件時(一個是 MgLine.zip,一個是 PCHViewer.jar),

存檔類型,請選「所有檔案」,不要直接「存檔」。

也就是,存到你的硬碟上,應該是一個 .zip 一個 .jar。

步驟四:下載完成後,使用瀏覽器開啟剛剛下載的 htm檔案(通常是 go_vovoXXXX.htm),

應該可以「離線」欣賞到你所繪製的過程。表示你已經成功下載你繪圖的過程。

步驟五:當然,也不要忘記儲存你這張圖(通常是 .png 檔),放到你剛剛下載的目錄。

步驟六:此時,你的工作目錄應該有「五個檔案」,他們分別是,

XXX.png (你的圖),XXX.pch (過程),go_vovoXXX.htm(網頁檔案),

以及兩個播放元件。(其中 XXX 代表你該張圖片的編號)

步驟七:接著,分成三組;

閱讀 (A) 如果你懂得如何撰寫網頁,並且稍微瞭解 Html 語法;

閱讀 (B) 如果你對網頁撰寫一點概念都沒有;或者有自己的網頁,但是是利用 site builder 建造出來的。

閱讀 (C) 如果你很熟習 http/html/FreeWebSite/Java(jar/applet) 等相關運作。

 

(A) 建立一個「介紹性」連結網頁,把 link 指向 go_vovo463.htm,並且以 463.png 為 image source;你可以隨意的安排版面、

或相對目錄,只要待會上傳時,<步驟六>那「五個檔案」,對應的起來即可

(B) 請按照步驟來...

b1. 開啟「記事本」,或你熟習的文字編輯器,先在同一個目錄存一個叫做「intro.html」的檔案;這檔案是「介紹檔」

b2. 繼續編輯,把上面那張圖裡面所有內容,從<head>到</body>,通通都打上去,然後按「檔案-->存檔」。

b3. 接著,你要去修改幾個地方:

b3-1: <title>和</title>中間的字,你可以改成你喜歡的字,例如「繪圖過程 2002/01/16」;不改也可。

b3-2: "go_vovo463.htm" 要改成你剛剛下載的那個 htm 檔名;一定要改

b3-3: "463.png" 要改成你那張作品的檔名;一定要改

b3-4: 在 </img> 和 </a> 中間有一段文字(介紹性文字),你可以改成你介紹此張圖片的文字;最好改一下。

b4. 存檔,此時你的工作目錄會有「六個檔案」,試著去開啟剛剛你存檔的那個 intro.html,你應該會看到你的作品,旁

邊有你改的說明文字,按下圖片或文字,就會連結到和<步驟四>一樣的離線播放畫面。

b5. 如果成功了,那就幾乎大功告成。

b6. 如果你想要展示多個「繪圖作品+過程」,請複製多個從 <a> 到 </a> 的內容,然後依照 b3-2 / b3-3 / b3-4 分別修改之。

(C) 請不要浪費時間看這個說明,快去工作。

步驟八:到免費的網路個人網頁去;本說明將會使用「雅虎奇摩」所提供給個人的免費網頁當例子。

這裡我也來分組:

閱讀 (A) ,如果你已經熟習使用網路上的申請&使用免費網頁的作法,或者已經有(Yahoo!Kimo 等免費)個人網頁。

閱讀 (B) ,如果你沒有任何申請網路上免費&使用網頁的經驗,而且你相信自己應該會申請一個,

並且會詳細閱讀該網站提供給你的服務與相關說明。。

閱讀 (C) ,如果你沒有任何申請網路上免費&使用網頁的經驗,而且你相信你看不懂(不想看)相關的申請註冊說明。

閱讀 (D) ,如果你很熟習 http/html/FreeWebSite/Java(jar/applet) 等相關運作。

 

(A) 登入,然後到<步驟九>;本例子的帳號是 vovo2000_com。

(B) 在此建議你去申請 Yahoo!Kimo,請到 http://home.kimo.com.tw/,然後進入「我要註冊」。

註冊完後,閱讀 (A) 。

(C) 放棄。 當個快樂的畫圖人。

(D) 你在步驟七就被淘汰了。

步驟九準備開始上傳網頁,按下「上傳網頁」連結。

步驟十:你可以用瀏覽器上傳,或者用你熟習的 FTP 軟體(如 WS_Ftp / CuteFtp 或微軟附贈的 console mode ftp)

把剛剛<步驟七>準備好的那「六個檔案」,一起傳上去。

步驟十一:確認檔案,耐心等待上傳完畢。(這句話是不是很熟悉?)

步驟十二:接著,檢查一下檔案總管,應該很順利的傳入「六個檔案」。

步驟十三:接著,驗收成果;以「雅虎奇摩」+「我的帳號 vovo2000_com」+「介紹檔」為例子,

他的網頁進入方式是「http://home.kimo.com.tw/vovo2000_com/intro.html」。

應該可以順利進入,如同<步驟七>那樣,看到你的圖片,和相關說明文字。

步驟十四:按下圖片或文字,就可以順利瀏覽繪圖過程。

接著你就可以把網址記錄下來,通知你的親朋好友來觀看你的過程,好好的炫耀一番。

當然,如果你的介紹檔intro.html 是照著步驟產生出來 e.g. <步驟七>-(B),看起來或許會有些簡陋,

你可以嘗試用一些好用的工具去修改他,如 Word / FrontPage / DreamWeaver。

 

使用版權宣告:

1. 不要隨意(e.g. 未經同意)拿別人的作品、繪圖過程,當自己的網站的內容。

一經檢舉、發現,列入禁止來往網域。

2. 不要拿掉播放過程 htm ( 也就是 go_vovoXXX.htm ) 檔案中的版權宣告&網址宣告文字、連結或按鈕;

一經檢舉、發現,列入禁止來往網域。


©All Rights Reserved by Vovo2000.Com | About Vovo2000 | 服務項目與條款 | 隱私權政策