Chapter 1 網站架設流程與空間申請 無論是網頁設計還是架設網站，除了依靠少許美術天份，再加上必要的設計技能外，還需要了解一些基本的概念，例如什麼是網站？什麼是網頁？如何較好地架設網站？每個設計師都必須知道這些基礎概念，才能夠設計更佳的網站。 大綱 下一章 開始 離開

目錄 1-1 網站與網頁的概念 1-2 網站架設流程 1-3 網站空間申請 1-4 課後習題 大綱 回首頁 離開

1-1 網站與網頁的概念 網站（Web Site或Site），最初的概念是網際網路（是全世界範圍內的電腦連為一體而構成的通訊網路的總稱）上的一個儲存空間，即是在網際網路上包含訪問者可以透過瀏覽器查看網頁的場所。 網站寄宿在網際網路伺服器上，具有獨立的伺服器、獨立IP位址（或網域名稱）等複雜的大型網站形式，同時也包括了主機、HomePage等簡單的網站形式。 下一節 下一頁 回目錄

1-1 網站與網頁的概念 補充說明：IP位址 連在某個網路上的兩台電腦在相互通訊時，在它們所傳送的資料封包裡含有某些附加資訊，這些附加資訊就是發送資料的電腦位址和接受資料的電腦位址。當網路中存在以IP協定為基礎的通訊時，這些發送和接受資料的位址就是IP位址。 網站建立後，就會被分配到一個固定的IP位址，瀏覽者可以透過IP位址在瀏覽器中進入網站。現在的IP網路使用32位元位址，以點符號分開，十進位表示，例如172.16.0.0。 下一節 上一頁 下一頁 回目錄

1-1 網站與網頁的概念 補充說明：位址格式 位址格式為：IP位址=網路位址＋主機位址或IP位址=主機位址＋子網位址＋主機位址。 1-1 網站與網頁的概念 補充說明：位址格式 位址格式為：IP位址=網路位址＋主機位址或IP位址=主機位址＋子網位址＋主機位址。 由於32位元位址格式的IP位址比較難記，基於方便管理網站，就使用了網域名稱代替IP位址，網域名稱類似於網際網路上的門牌號碼，是用於識別和定位網路上電腦的層次結構式字元標識，與該電腦的網際網路協定位址（即IP位址）相對應，但相對於IP位址而言，更便於使用者理解和記憶。 下一節 上一頁 下一頁 回目錄

1-1 網站與網頁的概念 網域名稱屬於網際網路上的基礎服務，基於網域名稱可以提供WWW、EMAIL、FTP等應用服務。例如我們常進入的GOOGLE網站，其網站網域名稱為www.google.com，所以我們很容易記憶該網站的網址：http://www.google.com/。 GOOGLE網站 以網域名稱進入網站 網站的IP位址 下一節 上一頁 下一頁 回目錄

1-1 網站與網頁的概念 了解上述的概念後，我們利用一個通俗的例子來說明網站概念：您找了一家汽車製造廠訂做了一輛汽車，然後申請了牌照，最後租用了一個停車場停放您的汽車，與此類似，網站就如同汽車，設計製作網站如同設計製造汽車，申請域名如同申請牌照，租用網站空間好比租用停車場。如此網站與網站連成一體，成為網際網路中的一員。 網站概念示意圖 下一節 上一頁 下一頁 回目錄

1-1 網站與網頁的概念 網站資料由什麼組成呢？網站最基本的組成元素是網頁。其實網站的另一個概念，可以認為是由許多網頁呈現網頁中的影像檔案、連結樣式等檔案組成的一個集合，即網站是一個整合個體，而網頁就是這個個體的主要成員。 網頁，就是開啟一個網站後所顯示的頁面，主要由文字、圖片、表格、多媒體物件等內容所組成。 下一節 上一頁 下一頁 回目錄

1-1 網站與網頁的概念 網頁的類型有很多種，例如一般網頁、框架網頁、表單網頁、動態網頁等等，不過即使一個網站有無數網頁，但進入網站時只能看到一個頁面，這個頁面我們通常稱為網站首頁。在首頁中顯示了網站的主要資訊，並可以透過網頁提供的連結，讓瀏覽者進入網站內其他網頁。不過需要注意：網站只能有一個首頁，而且目前網路預設以「index、default」為開頭的HTML、ASP、PHP等格式網頁為首頁，例如index.html、index.asp、default.html等。 網站中的網頁關係 網站首頁 網站其他網頁 首頁連結其他網頁 下一節 上一頁 回目錄

1-2 網站架設流程 所謂「兵馬未動，糧草先行」，良好的規劃與架構，是日後方便地管理以及維護網站的基礎。本節將為您介紹如何規劃網站，為理想中的網站，架構出一個雛型 。 初步規劃網站： 起初想建立網站時，都會很多想法，但想法多了反而不知道如何實行。此時，建議您先確定網站的類型與主題，其中包括網站欲吸引的目標群、網站風格以及未來發展的方向等等。 確定主題後，就要考慮網站需要那些網頁。事實上，網站是很多網頁的組合，其中包含的內容可能十分之多，如何將龐大的內容呈現在網頁上，而且不會讓瀏覽者覺得雜亂與無從下手？關於此類問題，就必須對網站內容進行適當的分類了。 上一節 下一節 下一頁 回目錄

1-2 網站架設流程 分類時，建議先繪製一個網站架構草圖，如此可以依照草圖更有目的地分類網站資料。當進行資料整理、分類時，建議將所有資料的重點內容挑出來，並分為3〜5類，然後再把具體的內容分配到每一類中，如此建立有序的層級關係，有利於瀏覽者快速尋找到所需要類別，進而在其中尋找到自己所需的部分。 依照網站主題繪製草圖 依照草圖分類內容 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 蒐集網站資料： 蒐集網站資料是網站規劃中非常必要的準備工作，蒐集資料的方向可依照網站面對的目標群與網頁風格進行。當歸類完畢後，就需要進行資料與素材的收集與整理工作。 就蒐集資料可以根據各個類別所需，來收集不同類型的資料與素材，其中包括網頁中所需的文字內容與圖片，插入到網頁中用以裝飾的插圖，背景圖片以及按鈕圖片等等。如果蒐集的素材不合適，亦可透過不同的軟體自行設計。 蒐集網站資料 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 建立網站結構： 建立網站結構，其實就是依照網站規劃草圖在FrontPage中建立導覽圖。因為在初始規劃時，可能有些想法還不成熟，而經過蒐集資料這一項工作後，這些概念基本上知道如何進行，即可在網站結構中落實，建立網站導覽圖。 網站導覽圖就是一個網站中網頁之間的層級結構圖，開始建立網站時最好是先設定網站首頁，然後根據蒐集與整理出來的內容，建立不同的子頁，進而組成一個完整的網站。 網站導覽圖 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 申請網站空間： 在完成網站規劃與資料蒐集後，就可以透過網路申請網站空間了。目前大部分的網站服務商都需要時間去審核申請資料，所以可以先進行申請網站空間的工作，然後在等待審核的時間就可以進行網頁設計工作，有效地利用空餘的時間。 網站空間目前大致有兩種，第一種是付費網站空間；第二種是免費網站空間。一般來說，付費網站空間比較穩定，而且安全性較佳，支援的功能亦較多；而免費網站空間最大的好處就是不用錢，但這種類型的網站經常需要附帶服務商的廣告，或者在功能上有所限制。 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 在申請網站空間時需要看清楚網站伺服器支援哪種服務，例如ASP、CGI、PHP等等，若需要利用FTP方式上傳檔案，就必須要求伺服器支援此技術。如果您不知道有哪些服務商提供網站申請服務，可以透過Google網站進行搜尋。 打開Google網站 輸入搜尋關鍵字 選取「搜尋所有網站」選項 單擊「Google搜尋」按鈕 Google網站搜尋結果 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 以下為各位提供部分申請網站空間的資料： 網站名稱 網址 上一節 下一節 上一頁 下一頁 回目錄 PC home個人網站 1-2 網站架設流程 以下為各位提供部分申請網站空間的資料： 網站名稱 網址 PC home個人網站 http://home.pchome.com.tw/ 提供10MB的免費個人空間，並享有個人網站提供的多樣化服務。 Yahoo!奇摩 http://tw.home.yahoo.com/ 提供15MB超大個人網頁空間，並可選取多種網頁樣式。另外提供免費討論區、留言版與圖庫使用。 章魚網 http://www.tacocity.com.tw/ 章魚網有分6MB和15MB兩種，15MB可以使用CGI但需要付費。 亞卓市 http://www.educities.edu.tw/ 提供3MB免費空間，需要電話認證，申請較麻煩，較適合班級網頁用。 Brinkster http://www.brinkster.com/ 一個外國網站，提供30MB網站空間，支援ASP空間，限制500MB流量。 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 設計網頁： 完成前期的準備工作後，就可以依照網站導覽圖，並使用FrontPage這套網頁設計軟體來設計網頁。 1-2 網站架設流程 設計網頁： 完成前期的準備工作後，就可以依照網站導覽圖，並使用FrontPage這套網頁設計軟體來設計網頁。 FrontPage提供不同的網頁設計功能，透過它可以設計不同風格的頁面，然後將蒐集的素材依照設計需求放置在頁面對應位置上，最後進行適當的美化、添加特效花樣，網頁設計工作才算大功告成。 利用蒐集的素材設計網頁 上一節 下一節 上一頁 下一頁 回目錄

1-2 網站架設流程 發佈網站： 待申請網站通過，並且完成網頁設計後，就可以將網站發佈到網路。發佈網站需要設定遠端伺服器的位址、登入用戶名稱、用戶密碼等資料，這些都會在申請網站成功後，由服務商提供。發佈網站後，還需要經常更新網頁，以便能夠維持網站的時效性與吸引力。 利用FrontPage上傳網站 上一節 下一節 上一頁 回目錄

1-3 網站空間申請 關於個人網站而言，可以申請免費空間，因為這種網站空間申請速度較快，而且不需要繳費，雖然空間不大，但對於小型網站來說，應該足夠了。 下面將以「章魚網（http://www.tacocity.com.tw/）」為例，說明申請免費網站空間的流程。 步驟一、加入「章魚網」會員： 輸入「章魚網」網址 按下Enter鍵，打開網站首頁 單擊「免費加入」連結文字 上一節 下一節 下一頁 回目錄

1-3 網站空間申請 補充說明：加入會員以獲取免費網站空間 1-3 網站空間申請 補充說明：加入會員以獲取免費網站空間 「章魚網」提供6M與15M網站空間，但必須先成為會員，然後才可以啟用免費空間的服務。 「章魚網」申請免費空間公告 上一節 下一節 上一頁 下一頁 回目錄

1-3 網站空間申請 步驟二、同意會員服務條款： 上一節 下一節 上一頁 下一頁 回目錄 進行此步驟前，請先閱讀會員服務條款 1-3 網站空間申請 步驟二、同意會員服務條款： 進行此步驟前，請先閱讀會員服務條款 單擊「同意，繼續進行下一步」按鈕 上一節 下一節 上一頁 下一頁 回目錄

1-3 網站空間申請 步驟三、輸入帳號資料： 輸入個人帳號資料 單擊「送出資料」按鈕 上一節 下一節 上一頁 下一頁 回目錄

1-3 網站空間申請 步驟四、填寫個人資料： 填寫資料後，單擊「送出資料」按鈕 在表單上填寫個人資料 送出資料後，網站系統會發送一封郵件到您指定的電子信箱中，取得認證信件後，即可進行最後一個步驟的認證步驟了。 上一節 下一節 上一頁 下一頁 回目錄

1-4 課後習題 選擇題 回目錄 離 開

1-4 課後習題_選擇題 1.（ ）以下關於網際網路的定義，哪項是正確？ A.兩台或以上的本地電腦連在一起，就構成網際網路。 1-4 課後習題_選擇題 1.（ ）以下關於網際網路的定義，哪項是正確？ A.兩台或以上的本地電腦連在一起，就構成網際網路。 B.全世界範圍內的電腦連為一體而構成的通訊網路的總稱。 C.凡可以上網的電腦都稱為網際網路。 D.可以互相通訊的電腦連體。 2.（ ）什麼是網站？ A.是在網際網路上包含訪問者可以透過瀏覽器查看的網頁的 場所。 B.可以儲存多個網頁的地方。 C.一本只包含網頁檔案的網路空間。 D.以上都正確。 看答案 下一頁 回目錄

1-4 課後習題_選擇題 3.（ ）網站最基本的組成元素是什麼？ A.影像。 B.文字。 C.網頁。 D.連結。 1-4 課後習題_選擇題 3.（ ）網站最基本的組成元素是什麼？ A.影像。 B.文字。 C.網頁。 D.連結。 4.（ ）以下哪個檔案可以作為網站首頁？ A.about.html。 B.index.html。 C.info.asp。 D.default.txt 看答案 上一頁 下一頁 回目錄

1-4 課後習題_選擇題 5.（ ）網站導覽圖是什麼？ A.網站導覽圖就是一個網站中網頁之間的層級結構圖。 1-4 課後習題_選擇題 5.（ ）網站導覽圖是什麼？ A.網站導覽圖就是一個網站中網頁之間的層級結構圖。 B.網站導覽圖就是一個網站與網站的關係圖。 C.網站導覽圖其實是一種網頁影像。 D.網站導覽圖就是一個網頁之間的連結關係圖。 看答案 上一頁 回目錄

1-4 課後習題_選擇題答案 1.（B）以下關於網際網路的定義，哪項是正確？ A.兩台或以上的本地電腦連在一起，就構成網際網路。 1-4 課後習題_選擇題答案 1.（B）以下關於網際網路的定義，哪項是正確？ A.兩台或以上的本地電腦連在一起，就構成網際網路。 B.全世界範圍內的電腦連為一體而構成的通訊網路的總稱。 C.凡可以上網的電腦都稱為網際網路。 D.可以互相通訊的電腦連體。 2.（A）什麼是網站？ A.是在網際網路上包含訪問者可以透過瀏覽器查看的網頁的 場所。 B.可以儲存多個網頁的地方。 C.一本只包含網頁檔案的網路空間。 D.以上都正確。 選擇題 下一頁 回目錄

1-4 課後習題_選擇題答案 3.（C）網站最基本的組成元素是什麼？ A.影像。 B.文字。 C.網頁。 D.連結。 1-4 課後習題_選擇題答案 3.（C）網站最基本的組成元素是什麼？ A.影像。 B.文字。 C.網頁。 D.連結。 4.（B）以下哪個檔案可以作為網站首頁？ A.about.html。 B.index.html。 C.info.asp。 D.default.txt 選擇題 上一頁 下一頁 回目錄

1-4 課後習題_選擇題答案 5.（A）網站導覽圖是什麼？ A.網站導覽圖就是一個網站中網頁之間的層級結構圖。 1-4 課後習題_選擇題答案 5.（A）網站導覽圖是什麼？ A.網站導覽圖就是一個網站中網頁之間的層級結構圖。 B.網站導覽圖就是一個網站與網站的關係圖。 C.網站導覽圖其實是一種網頁影像。 D.網站導覽圖就是一個網頁之間的連結關係圖。 選擇題 上一頁 回目錄