第6章網頁製作.ppt

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