第 6 章　網頁製作

第6章　網頁製作 實用資訊

目錄 • 6-1　網頁製作軟體及網頁文件 • 6-2　把Word文件變成網頁 • 6-3　網頁製作基本技巧 • 6-4　框架 • 6-5　發佈網頁文件 • 問題與解答

6-1　網頁製作軟體及網頁文件 • 6-1.1　網頁與HTML • 6-1.2　什麼是超連結

6-1　網頁製作軟體及網頁文件 • 由於目前市面上有非常多製作網頁的軟體，所以當您要製作網頁時，可先考慮自己的需求，再選擇一套最適合自己的軟體來製作網頁，例如：FrontPage、Dreamweaver、WebEditor……等。

FrontPage： • FrontPage是由微軟公司所發行的 Office系列軟體之一，FrontPage具有建立動態和複雜網站所需的專業設計、資料、編寫和發佈工具，可以協助您建立更完善的網站。

Dreamweaver： • Dreamweaver是由Macromedia（Macromedia已於2005 年4月被Adobe併購）所研發的網頁製作軟體，使用Dreamweaver製作網頁時，不需要懂HTML的標籤指令，只要套用面板上的功能，即可製作出漂亮的網頁了。

WebEditor： • WebEditor是利用JavaScript程式技巧來開發及整合企業的網路應用系統，Web Editor以專案導向的方式，直接在系統畫面新增及編輯控制項；Web Editor較適合用於多個團隊共同開發專案時使用。

6-1.1　網頁與HTML • 網頁文件是一種使用超文件標籤語言（HyperText Markup Language，簡稱為HTML）的資料檔案。 • 在瀏覽器（例如Internet Explorer或Netscape Navigator）中讀取網頁檔案資料時，會根據所使用的HTML標籤命令，而呈現不同的文件效果。 • 換句話說，把網頁文件載入瀏覽器時，不會顯示所有檔案內容，而是將標籤隱藏起來，並依照標籤的指示，顯示檔案中的資料內容。 • 連線到某一網頁後，可以利用瀏覽器的檢視原始檔功能，查詢網頁的原始檔案，呈現包含標籤命令的網頁文件。

以下就是查看網頁原始檔的操作示範：

網頁原始檔內容顯示如下：

網頁原始檔案內容的基本架構如下：

網頁文件原始檔案： • 網頁文件原始檔案的開頭和結尾必須使用“<HTML>”標籤。 • 原始檔案中可區分為“<HEAD>”和“<BODY>”兩個區域。 • 在“<HEAD>”區域可以設定文件的名稱、文件的類型、背景音樂等等；而在瀏覽器中顯示的網頁內容，則全部放在“< BODY >”區中。

6-1.2　什麼是超連結 • 超連結（Hyperlink）是網頁文件最重要的特性。具有超連結特性的文件，可在文件中點選文字、圖形或特定區域，連結到指定的文件位置。 • 在網頁文件中的超連結，有多種不同的連結形式，主要可概分為檔案和Web畫面兩類，檔案是指超連結同一台電腦上的檔案，而Web畫面是指超連結到其它電腦的檔案。

網頁元件的超連結形式：

6-2　把Word文件變成網頁 • 6-2.1　預覽Word文件的網頁效果 • 6-2.2　將Word文件變成網頁文件 • 6-2.3　建立新的網頁文件

6-2　把Word文件變成網頁 • 微軟發行的Office系列軟體，幾乎都可以將檔案直接轉換為網頁文件，尤其是Word產生的文件，也可以轉換為網頁文件，讓許多習慣以Word來編輯文件的使用者，不但可直接上手編輯網頁，也可以將過去的Word文件直接轉換為網頁。

6-2.1　預覽Word文件的網頁效果 • 預覽功能就是讓使用者預先看看效果，為了知道在Word中編輯的文件檔案，轉換為網頁文件後的效果，可以先使用Web畫面預覽功能啟動瀏覽器，看看Word文件在瀏覽器上顯示的效果。

以下就是預覽Web畫面的操作示範： • 執行預覽功能後會自動啟動瀏覽器，並顯示Word文件在瀏覽器上的顯示效果。

6-2.2　將Word文件變成網頁文件 • 一般Word製作的文件，儲存檔案的副檔名為.doc，而利用另存成Web網頁功能，可將一般Word的文件轉換為網頁文件，將檔案儲存為副檔名為.htm（或html）的檔案。

以下就是把Word文件轉換為網頁文件的操作示範：以下就是把Word文件轉換為網頁文件的操作示範：

將Word文件轉換為網頁文件的補充說明： • 將Word文件儲存成網頁文件後，除了產生一個副檔名為.htm的檔案外，同時會產生一個相同主檔名的資料夾，在資料夾中會存放文件中用到的圖形、聲音、影片等相關檔案。 • 在另存新檔視窗中，預設儲存的檔案類型是單一檔案網頁（.mht或.mhtml），如果選擇儲存成此項，則Word會將文件中所有圖片與格式都儲存成一個檔案，而不會再另外建立資料夾來存放。此功能可以提昇了傳送網頁檔案或上傳的方便性，不過目前必須是Internet Explorer 4.0以上的版本才有支援此種格式。

存成單一檔案和ㄧ般網頁檔案的圖示如下所示：存成單一檔案和ㄧ般網頁檔案的圖示如下所示：

文件變成網頁文件後，畫面顯示如下： • 將文件變成網頁文件後，開啟瀏覽器，然後開啟所存的網頁文件，畫面顯示如下：

已篩選的網頁： • 如果在另存新檔視窗中的檔案類型選單中選擇已篩選的網頁，也可以將文件儲存成網頁格式。 • 將文件儲存成已篩選的網頁，雖然與儲存成網頁的文件大致上相同，但只要開啟原始檔來比較，就可以明顯的看出兩份文件的差別；其中，已篩選網頁的原始檔會顯得比較簡潔。

未篩選網頁的原始檔：

已篩選網頁的原始檔：

6-2.3　建立新的網頁文件 • 雖然Word可以將一般文件轉換為網頁文件，但仍有許多限制（有些資料格式無法轉換）。 • 所以，若所製作的文件確定要以網頁的形式呈現，則最好的方式是直接建立一個新的網頁文件檔。

以下就是建立新網頁文件的操作示範：

6-3　網頁製作基本技巧 • 6-3.1　建立超連結 • 6-3.2　連結至書籤的位置 • 6-3.3　套用主題 • 6-3.4　設定頁面的標題

6-3　網頁製作基本技巧 • 這一節不探討Word的一般編輯技巧（例如：設定字型、樣式、顏色、背景圖案等等），將介紹Word用來設計網頁的功能，包括建立超連結、書籤、套用主題、設定頁面標題等內容。

6-3.1　建立超連結 • 網頁文件中的文字和圖形資料都可以設定超連結，而超連結的內容可為檔案名稱、Web畫面的網址，或者郵件信箱等。

以下就是建立文字與網址超連結的操作示範：

完成後： • 完成後，在Word中先按住鍵盤上的鍵，再點選設定超連結的文字，就可以連結至指定的網址。

6-3.2　連結至書籤的位置 • 超連結除了可以連結至檔案、Web畫面、電子郵件地址外，也可以連結至該份文件中的位置。 • 想要連結至該份文件中的位置前，必須先設定書籤的位置，然後再將文字或圖形連結至書籤。

以下就是設定書籤位置的操作示範：

以下就是將文字連結至書籤的操作示範：

完成後： • 完成後，在Word中按住鍵盤上的鍵，然後點選設定連結的文字，就會連結至所指定的書籤位置，畫面顯示如下：

6-3.3　套用主題 • Word內建各式各樣的網頁主題，任何一個網頁文件套用主題後，就可以立即更換整個畫面的視覺效果，而更改的項目包括背景圖案、標題樣式、項目符號等。 • 善加利用內建主題的套用，可以讓網頁更多采多姿！

以下就是套用主題的操作示範：

套用主題效果後： • 套用主題效果後，原來的背景、水平線、項目符號圖案……等，都會變更成該主題所設定的樣式，畫面顯示如下：

6-3.4　設定頁面的標題 • 只要在儲存檔案時先行設定頁面的標題，就可以設定網頁中的頁面標題。

以下就是設定頁面標題的示範：

第 6 章 網頁製作