Dreamweaver 8 將網站上傳到 Web 伺服器
description
Transcript of Dreamweaver 8 將網站上傳到 Web 伺服器
1
Dreamweaver 8 將網站上傳到 Web 伺服器
Ren-Jie Wang 王仁傑 , Ph.D.
[email protected]://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 程式抓到你的網頁資料 , 約需一個月以上 , 所以要等效果出來 , 就更要有耐心了。