Ch1.認識全球資訊網 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結 1.3 「網頁」、「首頁」與「網站」 1.4 網頁的幕後推手─HTML 1.5 網頁的藏身之處－伺服器 1.6 打開全球資訊網之窗
1.1 「網際網路」與「全球資訊網」 「網際網路(Internet)」提供多種資源和服務，「全球資訊網 (World Wide Web)」是其中之一。除了全球資訊網WWW之外，還包括E-Mail電子郵件、News網路論壇、BBS電子佈告欄、FTP檔案傳輸協定、以及IRC線上聊天等等，其中以E-Mail電子郵件和WWW全球資訊網的普及率最廣、使用率最高。
1.2 全球資訊網的基礎 – 網頁與超連結 「全球資訊網」中所有的資訊都是寫在「網頁(Webpage)」上。使用瀏覽器連上全球資訊網時，在視窗裡看到的畫面就是所謂的「網頁」，每個畫面代表一張網頁，「全球資訊網」是由千百萬張網頁集合在一起所構成的。 「網頁」除了可以記載文字、呈現靜態影像，還能夠撥放動畫、聲音、視訊影片。而最特殊之處，則在於「網頁」之間可以透過「超連結」彼此相連。我們可以在網頁裡的文字或圖片上建立「超連結」，閱讀網頁的訪客只要使用滑鼠在這些帶有超連結的文字與圖片上點一下，即可連結到另一張提供更多相關資訊的網頁，有時候甚至是圖片、影片、或者聲音。
1.3 「網頁」、「首頁」與「網站」 「網站(Website)」是數張「網頁」相互連結起來形成的網頁集團。全球資訊網上有由數以萬計的「網站」，每一個網站裡都包含數量不一的「網頁」。 「首頁(Homepage)」是進入網站時顯示的第一張網頁，它除了提供網站的簡介之外，還具有索引與導覽的功能。通常讀者看到首頁時，就應該能約略知道可以在此得到什麼樣的資訊，同時首頁就像一本書的目錄，能夠引領讀者閱覽網站中其他網頁的內容。 許多網頁集合起來組成網站，網站裡的第一張網頁就是首頁。 許多網頁集合起來組成網站，網站裡的第一張網頁就是首頁。
1.4 網頁的幕後推手─HTML 「網頁」是使用一種名為「HTML(HyperText Markup Language)」的語言所建構而成的，中文叫做「超文字標記語言」，此種語言包含多種定義文件內容的「標籤(Tag)」，「標籤」的長相是一對角括號＜＞，中間夾著英文。比方說<Font>就是專門用來設定文字樣式的標籤、<Table>是專門用來設定表格的標籤、<IMG SRC>則是用來設定圖片的標籤等等，這些「標籤」經過組合後便可架構出網頁的內容。 HTML是網頁資料在網路上流通的標準語言，因此只要是以HTML寫成的文件檔，就成為一頁頁可經由瀏覽器來閱讀的「網頁」。那麼我們要如何辨識網頁檔呢？很簡單，只要看到檔案的副檔名是.htm(Mac系統為.html)就沒錯了。
1.4 網頁的幕後推手─HTML HTML使用多種功能不同的標籤，結合起來架構出我們所看到的網頁內容。每個HTML標籤還可以結合一些屬性值，因此能夠產生更多的變化。以下是一個標籤的例子： ＜BODY TEXT=“#FFFFFF” BGCOLOR=“#339966”＞ 標籤 屬性 屬性值 屬性 屬性值 這是定義網頁內容(BODY)的標籤，表示將網頁中的文字(TEXT)色彩設定為“#FFFFFF”，背景色彩(BGCOLOR)設定為“#339966”。 此外，許多標籤必須由一組起始標籤加終止標籤組合而成，比如： ＜BODY TEXT="#FFFFFF" BGCOLOR=“#339966”＞...＜/BODY＞ HTML就是由許多上述形態的標籤所架構而成，而每張網頁的HTML基本結構應該如下： <HTML>-- 宣告本文件為HTML文件 <HEAD>-- 記錄網頁的相關資訊，如標題、編碼。 <TITLE>大頭的秘密基地</TITLE> <META HTTP=EQUIV=“Content-Type” CONTENT=“text/html; charset=big5”> </HEAD> <BODY>-- 定義網頁的內容與外觀 <P>歡迎光臨大頭的秘密基地！ </BODY> </HTML>
1.5 網頁的藏身之處－伺服器 我們製作好的網站必須放到「Web伺服器」上才有可能讓別人接觸到它。「伺服器(Server)」其實就只是一部電腦主機，就像我們在使用的個人電腦，只是伺服器的功能比較不一樣。「伺服器」一天24小時都連上Internet，它有較大的容量、較快的速度，主要的用途是存放檔案資源讓連上網際網路的使用者取用，而專門提供WWW網頁瀏覽的伺服器又可稱為「Web伺服器」，或者「WWW主機」。 全球資訊網上的網站都存放在Web伺服器裡供使用者存取。每一台伺服器所存放的網站數量不一，有的伺服器裡只有一個網站，有的則有上百上千個。
1.6 打開全球資訊網之窗 我們必須透過「瀏覽器(Browser)」才能看到伺服器裡的網頁內容和多媒體效果，目前市面上最受歡迎的兩大主流瀏覽器為網景的「Communicator通訊家」以及微軟的「Internet Explorer網際網路探險家」。 認識網址URL 使用瀏覽器閱覽全球資訊網時，必須在瀏覽器中輸入想要閱覽的網站網址，也就是所謂的URL(Uniform Resource Locator 統一資源定位器)，URL看起來就像這樣： http://www.nou.edu.tw 超文字傳輸協定 主機類型 機構或單位名稱 機構屬性 國別 URL前面的「http」是HyperText Transfer Protocal「超文件傳輸協定」的簡稱，其作用是要求指定的Web伺服器將網頁資訊傳回瀏覽器。 網域名稱Domain Name 「http://」後面的網域名稱(Domain Name)是URL的中心，也就是一般大家所認知的「網址」、「站台位址」，主要包含了四個部分，由左至右為：主機種類．單位機構名稱．性質碼．國別碼，從網址的結構我們可以得知網站主機所在的位置，以及網站所屬的單位機構屬性與名稱。
1.6 打開全球資訊網之窗 路徑與檔名 瀏覽網站裡的網頁時，可以發現URL網址的部分出現一些變化，也就是原本的網站網址後面多出了右斜線和網頁檔名，比如像這樣： http://www.sony.com.hk/aibo/main.html 路徑 檔名 網址最後面出現的檔名就是目前瀏覽器所顯示的網頁檔名，而夾在網域名稱與檔名之間，被右斜線所包夾的則是網頁檔所在的資料夾路徑。以上面這個網址來說，其意義就是在www.sony.com.hk主機中一個名為aibo的資料夾裡，存放了一個檔名為main.html的網頁。 IP Address 除了以英文顯示的Domain Name之外，有時候還可以看到網址呈現四組數字的型態，每一組數字的範圍在0~255之間，比如168.95.192.1，這種數字型態的組合稱為「IP Address(IP 位址)」，IP Address和Domain Name一樣，都是網路上某部主機的代號，在全球資訊網上可作為網站的網址。如果你同時擁有一個網站的IP Address網址與Domain Name網址，把它們輸入到瀏覽器中都可以得到相同的結果。
2.1 網站製作流程 通常建立一個新網站時，應該會歷經以下流程： 2.1 網站製作流程 通常建立一個新網站時，應該會歷經以下流程： 設定網站的主題與架構：決定網站的目的與主題，然後勾勒出每個主題所涵蓋的內容。 蒐集資料：根據網站內容著手蒐集所需的文件資料、網頁物件、圖片、檔案等等。 設計網站的版面與色彩：賞心悅目的美術設計能夠提升網站的吸引力，使網站更臻至完美。在開始著手編輯前，想想網頁中的文字、圖片位置要如何安排，要使用哪些顏色作為網站的主題色彩。
2.1 網站製作流程 編輯網頁：規劃好網站的藍圖、蒐集好所需資料之後，就可以開始動工製作網頁的內容。這裡就讓FrontPage來助我們一臂之力吧！ 找尋網頁空間上傳網頁：網頁製作完成後就要把它們上傳到全球資訊網上；在此之前，要先找好可供存放的網頁空間。上傳完成後網站就出爐囉！ 登錄搜尋引擎：網站設立完成，別忘了先測試一下是否能夠順利運作。測試OK之後，就可以到各大搜尋引擎去登錄註冊自己的網站網址，讓大家有機會一覽我們的傑作。 維護更新：定期上網檢視網站的狀態，必要時更新網站內容。維持網站內容的新鮮度是保持網站人氣不墜的不二法門。
2.1 網站製作流程 善用組織圖來規劃網頁 規劃網站內容時最常使用的方法就是繪製網站的結構圖，也就是所謂的「組織圖」，組織圖的起點通常是「首頁」，「首頁」是網站的主題頁，從主題頁開始向下延伸出幾個次主題，然後每個次主題再個別衍生出份量不一的內容。藉由繪製網站的組織圖，我們可以清楚掌握整個網站的架構，將資訊有條有理地組織歸納起來。
個人網頁環境說明 主機名稱－ miphp.nou.edu.tw 網址－ http://miphp.nou.edu.tw/~帳號 網頁存放目錄－ 老師public_html 941/學生/ public_html 首頁檔名稱可為－ index.html, index.htm, index.php 上傳工具－檔案傳輸 FTP，可上網抓取LeapFTP 帳號－”mi+學生學號” (老師為mi921367) 密碼－”身份字號的前八碼” ,如A1234567(英文字母請輸入大寫)
建立並上傳網頁之步驟 編輯網頁內容另存新檔(請用英文取名) 上傳檔案 打開IE瀏覽器（或使用FTP工具） 網址輸入： ftp://miphp.nou.edu.tw/mi+學號 輸入帳號與密碼 進入941/學號/public_html目錄 複製、貼上檔案 開啟IE，http://miphp.nou.edu.tw/~ mi+學號/index.html 檢視內容。