1

Dreamweaver 8 將網站上傳到 Web 伺服器

Ren-Jie Wang 王仁傑 , Ph.D.

rjwang@ntit.edu.twhttp://rjwang.idv.st

http://home.scs.ntit.edu.tw/rjwang/資訊館 7F 辦公室

2

本章提要

1 申請免費個人網站空間 2 上傳你的網站 3 讓網址更好記－申請轉址服務 4 推廣你的網站

3

申請前的注意事項

網站空間的容量 免費網站空間可能從 2 MB 〜 10 MB 不等 ,

甚至也有人提供「無限空間」呢！你可先估量一下自己的網站共有幾 MB, 再去申請一個適合的網站空間。另外 , 有些網站則是採取小額付費制 (300 〜 1000 元不等 ), 只要繳交年費就可享用更大的網站空間、或是無廣告視窗、網站轉址、…等服務。

4

申請前的注意事項

是否可放 CGI 、 ASP 、 PHP 等程式 CGI 、 ASP 、 PHP 通常是用來製作計數器、

留言板、討論區等元件 , 或是其它互動式的表單處理。由於因為這些程式會加重伺服器的負擔 , 所以並不是所有免費網站空間都有支援哦！

5

申請前的注意事項

檔案的上傳方式 大部份的網站都允許你用 FTP 的方式來上傳

檔案 , 不過有些只能使用該網站裡的圖形介面來上傳 , 雖然操作方法比較簡單 , 但對於 Dreamweaver 來說反而不太方便呢！

6

哪裡找免費的網站空間？

只要在各大搜尋引擎網站 ( 如 Google 、 Yahoo! 奇摩 ) 輸入「免費網站」或「免費網頁」等關鍵字 , 就可以找到一堆免費網站空間的資源 , 以下列出幾個供大家參考：

7

1 申請免費個人網站空間

向「 Yahoo! 奇摩」申請個人網頁空間 請用瀏覽器連上 Yahoo! 奇摩的首頁 (http://tw.yaho

o.com), 然後點選個人網頁連結

8

向「 Yahoo! 奇摩」 申請個人網頁空間

9

1 申請免費個人網站空間

本課程提供每位同學 30MB 的免費個人網站空間 , 相關資訊如下 : 網頁伺服器 : home.scs.ntit.edu.tw 個人帳號 : sXXX 個人網頁網址 : http://home.scs.ntit.edu.tw/stu/sXXX/

10

2 上傳你的網站

設定欲上傳的伺服器位址 關於 FTP 主機位址 與遠端伺服器連接 遠端與本地端 上傳網頁 網站上傳後看不到圖片？ 上傳檔案時可能遇到的問題

11

設定欲上傳的伺服器位址

按下左邊窗格的定義遠端網站 , 設定遠端網站伺服器位址：

12

設定欲上傳的伺服器位址

13

設定欲上傳的伺服器位址

接下來的畫面 , 各位應該覺得很熟悉吧！在第 3 章中 , 我們曾用此交談窗來定義本地端的網站資料夾 ( 本地資訊步驟 ), 現在請切換到進階頁次 , 指定遠端網站伺服器的位址：

14

設定欲上傳的伺服器位址

15

設定欲上傳的伺服器位址

選好以 FTP 的方式上傳網站後 , 接著請進行以下的設定：

16

設定欲上傳的伺服器位址

17

設定欲上傳的伺服器位址

接著會出現提示交談窗告訴您會重新建立快取 , 請按下確定鈕 , 回到檔案視窗：

18

設定欲上傳的伺服器位址

19

關於 FTP 主機位址

要注意的是 , 「 WWW 網站的位址」和「 FTP 的上傳位址」是不一樣的 , 像 Tripod 這個網站 (www.tripod.com), 若要用 FTP 上傳 , 則 FTP 位址必須輸入： ftp.tripod.com, 所以一定要事先向網站空間提供者查清楚 FTP 上傳位址哦！

20

與遠端伺服器連接

咦？剛才不是說左邊的窗格會顯示遠端網站的檔案 , 怎麼現在還沒有顯示呢？這是因為我們還沒登入該伺服器 , 請按下連線至遠端主機鈕 , Dreamweaver 就會自動與遠端伺服器連接：

21

與遠端伺服器連接

22

遠端與本地端

在 Dreamweaver 中 , 上傳的網站伺服器通稱為遠端 (Remote), 而自己電腦裡的網站則稱為本地端 (Local) 。不要把「遠端」想得有多遠 , 不管網站伺服器是在台北、美國、你家樓下或是隔壁座位的電腦 , 只要是供你上傳的主機 , 都可叫做遠端網站 (Remote Site) 。

23

上傳網頁

經過前面的設定後 , 終於可以開始上傳網頁了 , 由於這是我們第一次上傳 , 所以當然是要將所有的檔案都送上去。請在右半邊窗格 ( 本地端 ) 點選最上層的根目錄( 或是選取所有檔案 ), 再按下上傳檔案鈕 , 即可將整個網站內容上傳到左半邊的遠端網站裡：

24

上傳網頁

25

上傳網頁

26

上傳網頁

檔案上傳完畢後 , 你就可以開啟瀏覽器 , 輸入自己所申請的網址 , 以參觀、測試自己的網站。

27

上傳網頁

28

上傳網頁

以後若要再將網站上傳到同樣的遠端主機 , 就不必再重新設定 FTP 主機位址 , 只要輕輕按一下 鈕 , 就可以立即與遠端網站連接。

29

網站上傳後看不到圖片？

網站上傳後 , 若在瀏覽自己的網頁時 , 發現要顯示圖片的地方出現 圖示 , 表示該圖片無法顯示 , 其原因可能有以下幾項：本地端的圖片檔案可能沒有放在網站資料夾下 , 以致於沒有上傳。插入圖片時使用了絕對路徑 , 而非相對路徑 (參見第 5 章的說明 ) 。檔名大小寫不同 , 或是使用了中文檔名。圖片的格式不支援 ( 一般瀏覽器僅支援 JPG 、GIF 、 PNG 3 種 ) 。

30

上傳檔案時可能遇到的問題

有些情況會使得檔案無法成功上傳 , 例如 , 在上傳整個網站的過程中 , 突然網路斷線或是遠端網站暫停服務 , 那麼 , 上傳狀態的交談窗會出現檔案活動未完成的訊息提示您。

31

上傳檔案時可能遇到的問題

32

上傳檔案時可能遇到的問題

33

上傳檔案時可能遇到的問題

在關閉了提示訊息後 , 若沒有進一步處理該檔案的上傳狀況 , 在下次開啟 Dreamweaver 時 , 檔案面板下方會顯示 圖示 , 提醒您上次傳檔時曾發生錯誤：

34

上傳檔案時可能遇到的問題

您可以按下紀錄鈕檢視哪些檔案尚未上傳後 , 再次連線到遠端網站重新上傳這些檔案。

35

8-3 讓網址更好記 －申請轉址服務

什麼是轉址服務？ 申請正式網址 申請轉址服務

36

什麼是轉址服務？

不論你是申請付費或是免費的網頁空間 , 通常只要在完成申請的手續後 , 便可取得一個網址 , 這個網址就是將來別人連結到你的網站的住址。然而通常網站空間服務提供者給的網址都不太好記。例如： http://home.kimo.com.tw/cute/yourname 。

37

什麼是轉址服務？

轉址服務簡單地說就是：「可以讓你的網址變得又短又好記」。例如 idv.st 這個提供轉址服務的網站 , 只要加入會員後 , 就會依據你所申請的帳號加上該站台的網域名稱來當做你的網址 , 假設你申請的帳號為 "digital", 則你的網址就是 "http://digital.idv.st", 不論你網站的原本網址是什麼 , 只要事先設定好轉址服務 , 別人要連結到你的網站 , 只要打這個簡易的網址就可以了。

38

什麼是轉址服務？

不管你的網址有多難記、或是一直不停地換網址 , 只要做好第一步的登記工作 , 別人就可以永遠用同一個簡單的網址連上你的網站。

目前提供轉址服務的網站 , 大多為免費 , 不過也有些較具規模的站台是採取收費的方式來提供服務 , 費用的計算方式 , 大多是年繳 200 〜 350 元之間不等 ( 有些網站還規定得利用線上刷卡才提供此服務 ) 。

39

什麼是轉址服務？

不過既然是採取收費制 , 所提供的服務當然就會比較好一點 , 至於要選擇免費或是收費的轉址服務 , 就得視你的需求而定 , 以下提供幾家提供免費轉址服務的網站供您參考：

40

申請正式網址

如果你的網站是放在虛擬主機或有固定 IP 的主機上 , 可考慮向財團法人台灣網路資源中心 TWNIC (http://www.twnic.net) 這個機構付費申請一個正式的網址 (http://anne.idv.tw) , 不僅具有個人的特色也方便記憶。

41

申請轉址服務

底下我們以 idv.st 這個網站為例 , 來說明如何申請轉址服務 , 其他網站的申請方式大致一樣 , 你可以在網站上找到詳細的使用說明 , 只要按照步驟一步步操作就可以完成申請了。

首先請連上 idv.st 網站 (http://www.idv.st), 然後如下操作：

42

申請轉址服務

43

申請轉址服務

連結到會員使用條款網頁 , 請詳細閱讀後按下同意鈕 , 繼續其他申請步驟。

44

申請轉址服務

開始填寫專屬網址及個人基本資料。

45

申請轉址服務

填寫完基本資料就算完成會員登記了！

46

申請轉址服務

趕快開啟瀏覽器來看看剛才輸入的網址是否能正常轉換。

47

8-4 推廣你的網站

好不容易將網站上傳到 Internet 上了 , 但是網海茫茫 , 別人怎麼知道你的網站到底在哪裡呢？這就要靠「廣告」來打知名度了；當然這裡不是要你花大錢去電視上做廣告 , 其實 Internet 就是一個超大型的廣告媒體哦！

48

推廣你的網站

廣發 E-mail 英雄帖 在各大 BBS 或新聞群組發佈消息 到各大搜尋引擎網站登錄 在網站中加入友好連結 讓網頁更容易被搜尋

49

廣發 E-mail 英雄帖

要推廣你的網站 , 最簡單的方法就是發 E-mail 給每個親朋好友 , 並簡單介紹一下網站的內容、特色 , 請他們到你的網站來逛逛。如果不太好意思這樣做 , 也可以在 E-mail 的簽名檔中加上網站位址、簡介 , 這樣不管是寄信給別人、或發佈信件到 BBS 、新聞群組 , 都可以名正言順地替網站打打廣告。

50

在各大 BBS 或 新聞群組發佈消息

每天有很多人在 BBS 及新聞群組 (News) 上閒逛 , 因此你可以把網站簡介發佈在相關的討論群組裡 , 例如 http://bbs.openfind.com.tw 。但切記不要一次發很多封 ,也不要到不相干的討論群組裡打廣告 , 否則反而會被人家嫌 , 造成反效果呢！

51

到各大搜尋引擎網站登錄

假設你今天想去逛逛有關電影介紹的網站 , 但完全不知道網址 , 這時你會到哪裡查詢呢？對了！想必 Yahoo! 奇摩、蕃薯藤、Google 、…等搜尋網站將是你的第一選擇；因此我們最好也向這些搜尋站台登錄自己的網站 , 讓別人在尋找相關資料時能發現你精心設計的網站！

52

到各大搜尋引擎網站登錄

53

在網站中加入友好連結

若是你的親朋好友也有建立網站 , 那麼大家不妨互相交換一下網站的連結 , 或是製作網站的 Logo, 交換放在別人的網站裡 , 透過這樣網網相連的方式 , 也能夠為自己的網站提高知名度哦！

54

讓網頁更容易被搜尋

在網頁中加入關鍵字 修改網頁關鍵字 為什麼加入關鍵字網頁會容易被搜尋

55

在網頁中加入關鍵字

當我們在製作網頁時 , 可以在網頁中加入一些隱藏的關鍵字 ( 不會顯示在網頁上 ),使瀏覽者更容易透過搜尋引擎找到你的網頁。請在 Dreamweaver 中開啟要新增關鍵字的網頁 , 然後如下操作：

56

在網頁中加入關鍵字

57

修改網頁關鍵字

日後若要修改網頁關鍵字的內容 , 或想將此功能刪除 , 請執行『檢視 / 檔頭內容』命令 , 開啟檔頭內容檢視區 , 選取關鍵字圖示 , 即可在屬性面板中做修改：

58

修改網頁關鍵字

59

為什麼加入關鍵字 網頁會容易被搜尋

一般搜尋網站藉由登錄手續所建立的網站資料庫 , 是搜尋引擎進行網站查詢的來源。而查詢較為詳細的網頁查詢 , 則是由稱為 Robot 的機器人程式 , 主動瀏覽 Internet 中上億上萬的連結網頁 , 並抓取回網頁中的資料建立成資料庫 , 做為搜尋引擎進行網頁查詢的資料來源。

60

為什麼加入關鍵字 網頁會容易被搜尋

搜尋網站的 Robot 程式會先瀏覽網頁 <head> </head> 標籤之間 , 是否有 <metaname= "keywords" > , 若有則做為網頁供搜尋比對用的關鍵字。不過網路太浩瀚無垠了 , 等搜尋網站的 Robot 程式抓到你的網頁資料 , 約需一個月以上 , 所以要等效果出來 , 就更要有耐心了。