第十五章 WWW網頁的製作 計算機概論編輯小組
大綱 HTML簡介 FrontPage 2000簡介 開啟與儲存網頁 編排文字 設定超連結 加入圖片 插入背景音樂與視訊 設計表格 網頁程式設計 計算機概論
15.1 HTML簡介 定義 規定網頁如何編寫的格式。 超文字標記語言（HyperText Markup Language，縮寫為HTML） 計算機概論 圖15.1
15.1 HTML簡介 (Cont.) HTML的基本術語 標籤(Tag) <HTML>, </HTML> (結束標籤） 屬性(Attribute) <HFON SIZE = +2> 元件 在標籤和對應的結束標籤的部分稱為元件 計算機概論
15.1 HTML簡介 (Cont.) <HTML>…</HTML>: HTML文件 <HEAD>…</HEAD>: 檔頭元件 <BODY>…</BODY>: 主體元件 <P>…</P>:段落 <FONT SIZE =+2> </FONT> <B>…</B>: 粗體 <IMG>: image <HR>:水平線 <A>…</A>: 建立超連結(Hyperlink) 計算機概論
15.2 FrontPage 2000簡介 FrontPage 2000（簡稱為FP2000）是微軟公司最新出版的網頁編輯與網站管理軟體。 FP2000能夠讓你像用Word一樣方便地編寫網頁，而不需要瞭解前一節所敘述的HTML。 FP2000的WYSIWYG功能也讓你在編寫同時就可以看到網頁的編排效果，不需要再透過瀏覽器來檢視，非常的方便。 計算機概論
FP2000開啟後的視窗畫面 圖15.2 計算機概論
FG2000工具列說明 計算機概論
15.2.1 開啟與瀏覽網站目錄 開啟網站目錄的方法 1.選取【檔案】功能表中的【開啟Web】功能。 2. 在下圖所示的對話框中選取一個你要用來作為網站目錄的資料夾。 計算機概論
開啟網站目錄之後，你可以用檢視列上的按鈕來瀏覽其中的資料。 網站目錄開啟之後，FP2000的畫面將如下圖所示，，其中的資料夾清單顯示目前的目錄樹結構。你可以用一般工具列上的按鈕 （即圖中圈起來的按鈕）來開啟或關閉資料夾清單。 開啟網站目錄之後，你可以用檢視列上的按鈕來瀏覽其中的資料。 計算機概論
檢視模式 網頁編輯模式：可以編寫網頁、編輯網頁原始檔、以及預覽網頁，也可以利用資料夾清單選取不同的網頁來進行編輯。 計算機概論
資料夾檢視模式：這個模式可以讓你像使用Windows檔案總管程式一樣的來瀏覽資料夾。 計算機概論
報告檢視模式：你可以用滑鼠雙擊其中任一列以觀看進一步的資訊。 你也可以選擇【檢視】功能表中的【報告】子功能表來指定顯示報告的項目。 計算機概論
導覽檢視模式：如果你使用導覽列的話（請參閱說明文件中有關導覽列的解釋），畫面將出現導覽列連結的網頁結構。 計算機概論
超連結檢視模式：這個模式標示出網頁之間超連結的結構。 你可以選擇網站目錄或子資料夾來顯示以首頁（檔名為defalut.htm或index.htm的網頁）為開頭的超連結的結構。 計算機概論
工作檢視模式：這個模式標示出網站工作的分派與執行狀態。 你可以用【編輯】功能表中的【工作】子功能表來新增或修改工作的內容。 計算機概論
15.3 開啟與儲存網頁 開啟新的網頁 1. 選取【檔案】功能表中的【開新檔案 > 網頁】功能。 15.3 開啟與儲存網頁 開啟新的網頁 1. 選取【檔案】功能表中的【開新檔案 > 網頁】功能。 2.在下一頁所示的對話框中，選擇【一般】標籤。你可以從中選取所需的網頁範本。若要空白網頁來自行設計的話，請選擇左上角的「一般網頁」。 3.按下右下角的【確定】按鈕。 若只是要開啟新的空白網頁，你可以利用一般工具列上的按鈕 。 計算機概論
儲存網頁 你可以用【檔案】功能表中的【儲存檔案】（或按鈕 ）將編寫完成的網頁儲存起來。當儲存一份尚未命名的新網頁時，螢幕上會出現如下圖的對話框： 計算機概論
開啟舊網頁 你可以用【檔案】功能表中的【開啟舊檔】來開啟儲存在磁碟中的網頁檔。點選這項功能後，螢幕上將出現如下圖的開啟檔案對話框。 計算機概論
15.4 編排文字 HTML所提供的文字編排格式： 寫意式（semantic） 根據詞句的用途（如做為標題）或形式（如一段引言）來設定其外觀。 寫實式（physical） 直接地設定文字的字型、字體、大小、或顏色。 計算機概論
FG2000文字編排步驟 1.以滑鼠拉選出欲設定格式的詞句範圍使其成為黑底白字的形式。 2. 以滑鼠點選所需的格式設定按鈕，將之應用在所選出的詞句上。 計算機概論
15.4.1 編排段落 自動迴轉跳行（auto wrapping） 中斷目前的輸入行 只想斷行但並不希望結束目前段落 輸入文字達到編輯視窗的右邊界時，接下來的輸入文字會自動地移至下一行的起始位置。 中斷目前的輸入行 必須敲入【Enter】鍵。 只想斷行但並不希望結束目前段落 敲入【Shift+Enter】合鍵來取代【Enter】鍵。 計算機概論
設定段落對齊模式的快速按鈕 計算機概論
將數個段落條列化 的快速按鈕 計算機概論
項目符號對話框 編號對話框 計算機概論
FP2000的多媒體藝廊提供了一組圖片項目符號： 計算機概論
計算機概論
15.4.2 設定樣式 寫意式的編排是利用樣式按鈕選單 來設定。 一般：用於文件中採用預設格式化的一般內容文字上。 寫意式的編排是利用樣式按鈕選單 來設定。 一般：用於文件中採用預設格式化的一般內容文字上。 格式化：用來保留選取範圍內字間空白的個數與跳行的設定。瀏覽器通常是使用電報字體（如 Courier）來顯示其間的文字。此類的編排常用來製作簡單的表格、增加段落間的行數、或顯示電腦程式碼。 地址：用於編排網頁作者或維護人的聯絡資訊（如電子郵件地址或網址）。 計算機概論
標題1, …, 標題6：將所選定的文字設定成一至六級的標題。適當的標題可以標示出文件的內容大綱而有利於閱讀。傳統上，標題1是用於文件標題，標題2是作為章標題，標題3是作為節標題‥‥等等。標題文字的顯示通常有別於一般的內容文字，不過標題設定是為了標示標題，因此請勿用它來達成改變字型或文字大小的效果。 標號清單：標號條列中的項目。 項目清單：符號項目條列的項目 功能表清單：功能表條列的項目 定義清單：定義條列的項目 計算機概論
15.4.3 設定文字的外觀 文字的大小、字體與顏色等外觀可以利用以下的快速按鈕來直接設定： 計算機概論
15.5 設定超連結 超連結跳躍的目標可以在你的硬碟上、學校的學術網路上、公司的商業網路上或在Internet上。超連結也可以跳躍至目前網頁或其他網頁的特定位置。你甚至可以使用超連結來跳至如圖片、音效、和影片之類的多媒體檔案。 計算機概論
15.5.1 制式資源位址（URL） 當超連結之目的 地是在你的硬碟上或網路上其他的電腦時，目的地指定的方式是採用制式資源位址（Uniform Resource Locator，縮寫為URL）的格式： protocol://server domain name:port number/path name protocol是資料在Internet上傳輸所使用的的通訊協定。常用的協定有：http、ftp、mailto、news、gopher、和telnet。 server domain name是伺服器的網路地址。 port number是通訊協定所使用的通訊埠號碼，如果省略的話，則採用預設的號碼。由於安裝通訊軟體時，多半都是採用預設的通訊埠號碼，因此我們在寫URL時通常可以省略這一部份。 path name是網頁在伺服器電腦的虛擬路徑位址。 計算機概論
URL例子 計算機概論
URL例子 計算機概論
連結至本機磁碟機上的檔案時，採用簡化的檔案URL 例子 計算機概論
15.5.2 建立超連結 步驟 1. 選取你想顯示為超連結的文字（或圖片 ），然後點選【插入超連結】按鈕 。 1. 選取你想顯示為超連結的文字（或圖片 ），然後點選【插入超連結】按鈕 。 2. 螢幕上會出現如下圖所示的對話框。請在「URL」欄中，輸入目標的URL，或利用右側的按鈕來設定目標的URL。如果跳躍的目的是本機檔案的話，你可以按一下 然後用從檔案清單中選取。 計算機概論
計算機概論
15.5.3 變更超連結 步驟 1.在超連結文字（或圖片）上按一下滑鼠右鍵。 2. 在彈出的快顯功能表中，選取【超連結內容】。 3. 在出現的對話框中，更改超連結的URL目標。 計算機概論
15.5.4 移除超連結 步驟 1. 在超連結文字（圖片）上按一下滑鼠右鍵。 2. 在彈出的快顯功能表中，選取【超連結內容】。 3. 在出現的對話框中，刪除URL欄中的內容，使其完全空白。 計算機概論
15.6 加入圖片 加進來的圖片，並不是直接地併入在HTML文件檔案之中，而是以圖形檔的形式獨立於HTML文件檔案之外；兩者之間是靠HTML文件檔案中的 <IMG> 標籤連結起來。 HTML文件檔案與圖形檔案是分開儲存的。 計算機概論
15.6.1 圖形檔的格式- GIF 所有圖形式的瀏覽器都支援GIF和JPEG這兩種圖形檔格式。 GIF（Graphics Interchange Format）是由美國的電腦通訊服務提供商 CompuServe所制訂的圖形交換檔格式。 特色： GIF圖形檔的副檔名通常是gif或GIF。 一張GIF圖形最多允許256種不同的顏色，因此比較適於儲存顏色較少的圖形如設計圖案等。 圖形的資料量利用壓縮的技巧使之減少。由於是採用不失真的壓縮方式，因此解壓縮後仍能夠「原圖重現」。 計算機概論
提供設定透明色的功能。 提供交錯顯示功能，圖形由模糊到清晰。 提供簡單的動畫功能。 計算機概論
15.6.1 圖形檔的格式- JPEG JPEG是由攝影家聯合會（Join Photographic Expert Group）所提出的一種圖形檔案格式。 特色： JPEG圖形檔的副檔名通常是jpg或jpeg等。 一張JPEG圖片中可以有2^24（約一千六百萬）種不同的顏色，因此適於儲存顏色繁雜的圖片如相片等。 JPEG圖檔採用失真式的壓縮方式來提高壓縮率。 計算機概論
15.6.2 設定網頁的底色或底圖 如果沒有經過特別的處理，FP2000將以瀏覽器預設的顏色做為網頁的底色（通常是灰色或白色）。 方法 網頁的底色或底圖可以用【格式】功能表中的【背景】指令來設定。 計算機概論
15.6.3 加入水平線 水平線經常在網頁中用來分隔出文字內容的邏輯區段。 方法 將游標移至你想插入線條的地方。 選取功能表【插入】中的【水平線】。 計算機概論
15.6.4 插入圖片 方法 1.將游標移至你想加入圖片的位置。然後選擇以下的兩種方式之一插入圖片。 2a. 點選一般工具列上的【插入圖片】按鈕 ，螢幕上將出現如下圖的對話框： 可以從中選取一個圖片檔案，或指定圖片的URL位置。 計算機概論
2b.從【插入】功能表的【圖片】指令中選取【美工圖案】。此時螢幕上將出現如下圖的多媒體藝廊視窗： 計算機概論
2c.當你儲存網頁時，會出現如下圖所示的對話框： 你可以重新命名圖片的檔名或變更儲存的資料夾位置，然後點選「確定」按鈕即可。轉換成的GIF格式圖檔會存放在網頁目錄內或你所指定的資料夾內。 計算機概論
15.6.5 文繞圖效果 方法 先開啟前述的「圖片內容」對話框，按一下左下角的「樣式」按鈕。 螢幕上會出現一個「修改樣式」對話框。按住左下角的「格式」按鈕，並在出現的選單中選取「樣式」。並在「位置」對話框做選定即可。 計算機概論
「左」和「右」兩個選項可以用來產生文繞圖的效果 計算機概論
15.7 插入背景音樂與視訊 插入背景音樂 插入的聲音檔可以是WAV、MID、AU、AIF、RMI、SND、以及 MP2 (MPEG audio) 等格式。 步驟 在網頁空白處按下滑鼠右鍵，然後按一下快顯功能表中的「網頁內容」。 在「一般」索引標籤中的「背景聲音」底下，於「位置」方塊中，鍵入您要播放的聲音檔案，或按一下「瀏覽」來找出檔案。 圖15.1 計算機概論
若要持續地播放音樂，請選擇「不限次數」核取方塊。 若只要播放固定次數的音樂，請清除「不限次數」核取方塊，然後在「迴圈數」方塊中鍵入您想播放音樂的次數。 計算機概論
加入視訊 步驟 在網頁檢視視窗中，指到您想要插入視訊的插入點。 在「插入」功能表，指到「圖片」，然後按一下「視訊」。 若視訊檔案不在 Web 上，按一下「檔案」按鈕 。 瀏覽到視訊檔案並選擇它，你插入的電影短片檔可以是AVI、MOV、以及 MPEG等格式。 計算機概論
插入視訊後，你可在視訊圖片上，按下滑鼠右鍵，從快顯功能表中選「圖片內容」，來開啟如下圖所示的對話框： 計算機概論
加入跑馬燈文字 跑馬燈文字是一種在網頁上捲動的文字，可用來 Web 畫面的效果。 步驟 選取【插入】功能表的【元件】選單中的【跑馬燈】指令。螢幕上會出現如下圖所示的「跑馬燈」對話框： 計算機概論
在其它的欄中設定以下的項目：捲動的方向、速度、表現方式、文字對齊方式、跑馬燈佔據的空間大小、重複播放的次數、以及跑馬燈的背景顏色。 在「文字」欄中，鍵入您所要捲動的文字。 在其它的欄中設定以下的項目：捲動的方向、速度、表現方式、文字對齊方式、跑馬燈佔據的空間大小、重複播放的次數、以及跑馬燈的背景顏色。 所有版本的 Microsoft IE（除verson 1.0）都支援跑馬燈文字，但其他如Netscape瀏覽器並不支援跑馬燈文字，在這些瀏器中只會呈現這些文字，但不會捲動。 計算機概論
15.8 設計表格 表格的結構 計算機概論
15.8.1 選取表格中的項目 技巧 計算機概論
15.8.2 建立表格 步驟 將游標移至你想建立表格的位置。 點選快速按鈕【插入表格】 。此時按鈕的下方會出現如右圖所示的格狀視窗。 用滑鼠在格狀視窗上拉選出你想要的列和欄數，再按一下滑鼠。譬如：下圖所示的拉選範圍將建立一個三列四欄的表格。 計算機概論
15.8.3 表格工具列 顯示表格工具列的方法 勾選【檢視】功能表的【工具列】選單中的表格，來開啟表格工具列。 說明 計算機概論
計算機概論
15.8.4 增刪列或欄 加入新的一列 刪除列： 步驟 將游標移至你欲插入新列的下一列任一儲存格中。 點選「插入列」快速按鈕 ，一個空白列即會出現在上方。 刪除列： 方法 拉選出欲刪除的一列（或多列）的所有儲存格。 點選「刪除儲存格」快速按鈕 ，來刪除所拉選的儲存格。 計算機概論
增加一欄： 刪除欄： 步驟 將游標移至欲插入新欄的右側欄之任一儲存格。 點選「插入欄」快速按鈕 ，一個空白欄即會出現在左方。 方法 點選「插入欄」快速按鈕 ，一個空白欄即會出現在左方。 刪除欄： 方法 拉選出欲刪除的一欄（或多欄）的所有儲存格。 點選「刪除儲存格」快速按鈕 ，來刪除所拉選的儲存格。 計算機概論
15.8.5 調整列高或欄寬 步驟 多個列的高度度均等 將游標移至該欄位的上邊格線（或下邊格線）上，使得游標的形狀變成黑色的垂直雙箭頭。 拖曳格線來變更列的高度。 多個列的高度度均等 方法 先選取這些列，然後選用表格工具列上的「最適列高」按鈕 。 計算機概論
15.8.6 設定表格屬性 步驟 將游標移至欲設定屬性的表格區域內。 點選【表格】工具列【內容】選單中的「表格」指令。螢幕上將出現如下圖的表格屬性對話框。 計算機概論
15.8.6 設定表格屬性 步驟 將游標移至欲設定屬性的表格區域內。 點選【表格】工具列【內容】選單中的「表格」指令。螢幕上將出現如下圖的表格屬性對話框。 計算機概論
15.8.6 設定表格屬性 步驟 將游標移至欲設定屬性的表格區域內。 點選【表格】工具列【內容】選單中的「表格」指令。螢幕上將出現如下圖的表格屬性對話框。 計算機概論
15.8.7 設定儲存格屬性 步驟 將游標移至欲設定屬性的儲存格內，或以滑鼠拉選出多個欲設定屬性的儲存格。 點選【表格】工具列【內容】選單中的「儲存格」指令。螢幕上將出現如下圖的儲存格屬性對話框： 計算機概論
15.8.9 用表格來排版 表格除了用來製作一般的資料表以外，也常用來安排網頁的版面配置。 當表格用來做網頁的版面配置時，我們通常會在「表格內容」對話框中，把表格的長和寬設定成固定的像素大小、以及把框線的大小改成0來隱藏表格的格線。 計算機概論
計算機概論
15.9 網頁程式設計 達到網頁進階功能的技術 客戶端（client-side）網頁程式 CGI (Common Gateway Interface) 程式 伺服端（server-side）網頁程式 Java網頁程式 計算機概論
15.9.1 客戶端網頁程式 常用兩種程式語言 JavaScript 網景通訊公司（Netscape Communications）和昇陽公司（Sun Microsystems）所共同制訂的一種腳本語言（script language）。Netscape瀏覽器和微軟公司的Internet Explorer瀏覽器都具有執行JavaScript程式碼的能力。 與C程式語言相類似。 JavaScript是一種以物件為基礎的（object based）程式語言。 計算機概論
物件包括：呈現網頁的視窗、網頁的網址、之前瀏覽過的網址、網頁的HTML文件等等。 JavaScript程式碼是利用 <SCRIPT> 標籤加在HTML文件中。 JavaScript通常用於： 檢查表單（form）資料的正確性 動態產生網頁 控制瀏覽器畫面 提供複雜的瀏覽方式 產生動畫效果 計算機概論
微軟公司制訂來對抗JavaScript的一個腳本語言。 VBScript是脫胎於微軟公司的Visual Basic程式語言。 不是一種以物件為基礎的程式語言，而是利用傳統的呼叫函式方式來處理網頁上的物件和事件。 目前只有Internet Explorer瀏覽器支援VBScript，而Netscape 3.0則無法處理VBScript。 如果希望更方便地運用微軟公司的其他軟體技術（如MS Office或ActiveX）於你的網頁中的話，VBScript應該是較佳的選擇。 計算機概論
15.9.2 CGI 程式 通閘道介面（Common Gateway Interface，縮寫為CGI）是一種程式撰寫的規則，依據這個規則製作的程式稱為CGI程式。 計算機概論
CGI程式可以用任何適當的電腦語言來撰寫，如傳統的C或C++ 程式語言、UNIX系統下的shell script或Perl腳本語言、或Windows 系統下的Visual Basic程式語言等等。 取得從瀏覽器傳過來的資料（包括表單的資料和瀏覽器的資訊等）、 利用作業系統所提供的資源（如檔案和工具程式等）、 查詢或存取資料庫系統中的資料、 經由WWW伺服程式傳送MIME（Multipurpose Internet Mail Extension）格式的文件（如純文字、圖片、HTML等）至瀏覽器顯示。 計算機概論
15.9.3 伺服端網頁程式 Active Server Pages (ASP) 是微軟公司所發展出來的一種伺服器端的技術。 ASP是微軟公司在Windows系統上的技術，並不適用其他種類的電腦系統。 ASP提供一個指令環境，讓你可在其中建立互動式的 Web 網頁，並建構功能強大的 Web 應用程式。 當伺服器接到來自 ASP 檔案要求時，它會處理檔案中所包含的伺服器端指令，建構出 Web 網頁並傳回給瀏覽器。 計算機概論
PHP並非使用VBScript或JavaScript來撰寫程式，而是用PHP內建的一種程式語言來撰寫。 除了伺服器端的指令之外，ASP 檔尚可包含 HTML (內含相關之用戶端指令) 及 COM 元件呼叫，指示它去執行某些任務，例如：連接到資料庫或處理商業邏輯。 如果你使用Unix作業系統，可以改用PHP（是PHP: Hypertext Preprocessor一詞的縮寫）。PHP也如ASP一樣，把程式碼寫在網頁裏，然後透過伺服器處理。 PHP並非使用VBScript或JavaScript來撰寫程式，而是用PHP內建的一種程式語言來撰寫。 這套語言的語法類似C、Perl、和Java，所以你熟悉這些程式語言的話，應該很容易上手。 目前PHP已發展到4.0版。 計算機概論
15.9.4 Java網頁程式 Java是昇陽公司所發展出來的一套物件導向程式語言。 原本的目標是用於發展消費性電子產品的控制軟體。 HotJava是第一個能夠執行Java Applet（網頁上的Java應用程式）的瀏覽器。 隨後網景公司的Netscape瀏覽器和微軟公司的Internet Explorer也開始支援執行Java Applet的功能。 Java是一個與C++ 非常類似的物件導向高階程式語言，不過Java去除了C++ 中一些非必要的元件，因此Java的語法與概念遠比C++ 簡單，也因而比較容易學習。 Java程式在執行之前，必須先編譯（compile）成位元指令碼（byte code），位元指令碼是昇陽公司所制訂的一種具有嚴謹規範的Java虛擬機器（Java virtual machine）指令碼。 一般的電腦並不能夠直接地執行位元指令碼，而必須透過位元指令碼解譯器（interpreter）程式才能夠執行。 計算機概論
昇陽公司提供了一套Java發展工具集（Java Developers Kit，簡稱JDK），JDK有Solaris、Windows和Linux等不同的平台版本。 javac：Java的編譯程式 java：位元指令碼的解譯器程式 jdb：Java的除錯工具程式 appletviewer：Java Applet的觀看程式 計算機概論