1、- 1 -Frontpage Express網頁製作軟體簡易教學講義By 莊靜圓1998 年 11 月基本觀念的建立一、什麼是 Homepage 組成概念：Tags Html Homepage WWW InternetHomepage 由 Html 文件構成的；在 homepage 上的文字大小及顏色、插圖、音樂、表格、清單等都是由 Html 來控制的。Html HyperText MakeUp Language，是一種標籤(Tags)語言，實際上只是一種純文字檔，需透過瀏覽器(IE 或 Netscape)才可以看到美麗多元化的檔。Tags 數個 Tags 可以構成 Html，而 Tags 是
2、以來表示，在Html 包括了起始標籤及終止標籤，但不每一種標籤都有起始及終止標籤，有的只有終止標籤。- 2 -二、Homepage 的優點思考 Homepage 可以做什麼？可以呈現什麼樣的效果？三、寫作 homepage 的工具傳統是自己寫指令（Html） ，現在有許多類似 Word 介面的軟體出現，不再需要自己撰寫複雜的指令，但最好還是要對指令有基本的認識。製作 Homepage 的工具如記事本、Word、Html abc、Frontpage Express 、HotDog.等多種編輯體。本次教學所使用的編輯軟體 FrontPage Express，有 WYSIWYG 的功能（What Y
3、ou See Is What You Get） ，也就是所見即所得 ，你現在所看到的，也將會和在 WWW 上看到的一樣。不用自己撰寫指令，且是中文介面，使用介面也亦操作。四、寫 Homepage 的基本注意事項 取檔名時，最好都使用英文，且在八個位元以內（也就是八個英文字母以內） ；並注意檔名最好要和該內容有相關，以免日後混淆、不知道哪個檔案是哪個內容。 首頁最好取名為 index.html 或 default.html（以 index.html 較好） ，因為若這完全是屬於你自己的網頁而你想掛上網時，一般的 Server 會有這樣的要求。 內容中所插入的圖檔、音樂檔、視訊檔等，或做超連結自己
4、的檔案時，都不要寫出路徑，只要直接寫出檔名即可，以免日後掛上網會產生路徑的錯誤。 一定要將所有檔案（包括 Html 檔、圖案檔、聲音檔、視訊檔）放在同一個資料夾內。 在 Homepage 中，只支援兩種圖檔，JPG（JPEG）及 GIF 檔：音樂檔也只支援 MID檔及 WAV 檔。 FrontPage Express 簡易教學一、啟動 FrontPage Express 方法：開始 程式集 Internet Explorer FrontPage Express，如圖一。 啟動 FrontPage Express 後，畫面顯示如圖二。二、介面簡要說明圖一 啟動 FrontPage Express
5、 圖二 FrontPage Express 介面狀態工具列- 3 -P.S.若某一工具列沒有出現，請到功能表中的 檢視 點選。三、功能表的介紹 檔案：功能和一般 Word 一樣，可以開啟舊檔、開啟新檔、存檔 等其中還包括了畫面內容，可設定 Homepage 的檔名、背景音樂、背景處理、邊界空間等。 編輯：文字的複製、剪下、貼上、還原（只能還原一次）等。 （見圖五） 檢視：可以選擇是否要將各工具列呈現在畫面（使用介面）上。 （見圖六） 插入：可插入各種 Homepage 的效果，包括了水準線、特殊符號、圖像、音樂、捲動式字幕（只有 Internet Explorer 支援） 。 （見圖八）功能表
6、 格式工具列表單工具列標準工具列網頁編輯區圖三 FrontPage Express 介面說明圖四 檔案功能表- 4 - 格式：主要是字型（大小、顏色、粗體、斜體、體形）的設定。 （見圖七）三、文字排版 步驟一先在網頁編輯區打上一些文字，並反白。 步驟二（1）使用下列工具可以更改原來的字型樣式（格式工具列） 。（2）另一種更改原來的字型樣式的方法（格式 字型）也有特殊樣式，如字的閃爍等。粗體變大變小斜體底線字的顏色文字向左、中間、右對齊在文字前加上號碼或符號（若要更改號碼或符號則格式分項和符號 ）文字向前或向後縮排改變字的字形圖五 編輯功能表圖六 檢視功能表圖七 格式功能表 圖八 插入功能表圖九
7、 文字排版範例- 5 -一般大小，等於是三號大小。打字機的字較一般小一點。四、背景處理（格式 背景） 背景可用兩種方法處理（1）單一顏色（2）圖案（浮水印：背景不會因捲軸捲動而跟著動） 超連結顏色的設定五、插入水準線（插入 水準線） 修改水準線的樣式快按兩下，即可修改水準線的寬度、高度、對齊方式、顏色等。六、插入圖像（插入 圖像）水準線快按兩下- 6 - 步驟一使用瀏覽來選擇檔案。（只支援 JPG 或 GIF 檔） 步驟二可修改圖的大小，並利用向前或向後縮格來移動圖的位置。 double click 圖片，可修改圖片的內容。（替代顯示：若網路上無法 download 所要替代的）七、背景音樂（
8、插入 背景音樂） 步驟一使用瀏覽來選擇檔案。 （只支援 WAV 或 MID 檔） 步驟二在網頁編輯區上任一地方按滑鼠右鍵，選擇畫面內容，勾選不線次數 ，即可一直重複播放。或在檔案功能表下選擇畫面內容。八、捲動式字幕（插入 捲動式字幕）滑鼠點上圖形，周邊出現小方點可拉放圖形的大小圖十 插入圖片- 7 - 先輸入文字，再加以設定所要的速度、呈現方式、次數、背景顏色等。 （效果要在瀏覽器上才看得見）九、表格（表格 插入表格） 法一：在表格功能表上選擇插入表格 法二：在標準工具列中選擇插入表格。滑鼠按著拖曳不放，選擇所要的欄數及列數，選好即可放開。 修改表格內容在表格的工具列下選擇可以有許多針對表格所
9、作的功能。基本的插入或刪除欄、列，要先將遊標移到所要工作的儲存格裡，才會有效果。在進階的功能，如表格裡的顏色、表格外框寬度等，則可選擇表格內容或儲存格內容來設定。十、超連結（插入 連結） 可以插入超連結的有兩種，一種是已經在 WWW 上的，另一種是自己的 Homepage 的檔案。除此之外，還可以插入讓別人寄信給你的連結。 選擇功能表下的插入中的連結 。可插入 WWW 上的位置，以http、ftp、gopher 等為開頭的，也有可以讓別人寄信給你的連結 mailto為開頭的。在這些後面再打上位置即可圖十二 修改表格圖十一 插入表格預設值是在左邊- 8 -十一、儲存檔案 在檔案功能表中選擇儲存檔
10、案 ，或在標準工具列中選擇儲存檔案 。 FrontPage Express 有 Web 發佈精靈的功能，也就是不用藉著 Ftp 將檔案傳到 WWW 上，可以由內部設定將以做好的 Homepage 送到你的 Server。 （當然是要先有連線，且申請好你放網頁的空間）不過，在我們尚未完成整個 Homepage 時，都是先將檔案存在自己的硬碟裡。十二、使用精靈 精靈可以幫你先建立好格式，減去你一些設計的時間，不過，由於格式都是預先設定好了，受到很多的限定。 使用精靈：檔案功能表開啟新檔。可選擇精靈樣式，而一般空白畫面就是一般畫面。 見圖十三。十三、使用 Html 指令修改細部插入自己已經做好的Ho
11、mepage，不過這些檔案要在插入前都先在 FrontPage Express 中開啟了。插入自己將要做的 Homepage，除了連結，也會幫你開啟一個新檔。Web 發佈精靈開始 程式集 Internet ExplorerWeb 發佈精靈將網頁存在自己的硬碟裡- 9 - 可以在檢視功能表下選擇HTML ，來看你的 Homepage 的 Html 指令。這時，若你對這些指令有基本的認識，就可以對細部加以修改。 （見圖十四）十四、檔案上傳-FTP FTP 是可以將你的 Homepage 檔案上傳（Upload） 、也可以將你的 Homepage 檔案下載（Download）的一個工具。 見圖十五。
12、製作 Homepage 的網路資源在 WWW 上有很多教你如何製作 Homepage 的資源，在上面可以找到相關的線上學習教材，也可以找到很多共用資源，如各種動、靜態圖檔或音樂檔等。我們可以藉著各搜尋引擎來找尋，以下是幾個常用的網站名稱及其 URL。蕃薯藤 http:/www.yam.org.tw/奇摩站 http:/.tw/哇塞中文網 http:/ 使用精靈 圖十四 Html 指令原貌圖十五 WS_FTP 的開始介面- 10 -蓋世引擎 http:/gais.cs.ccu.edu.tw/Yahoo（英） http:/ 範例一（蕃薯藤 http:/www.yam.org.tw/） 若是要專門找
13、尋音樂檔，則可在搜尋引擎裡的長方格中鍵入 mid 或 midi 這種關鍵檢索字。 從網路上抓下（download）圖檔或音樂檔的方法：對著該物件按下滑鼠右鍵另存圖片（Internet Explorer）或圖片另存新檔（Netscape） 。我的第一個烘培機創作經過短短的時間學會了基本的 Homepage 製作，就真正來替自己做一個屬於自己的第一個烘培機！ 先前準備工作1. 紙上草擬你所要呈現的 Homepage 內容。2. 上網找尋（download）你所要用的相關圖檔或音樂檔。3. 可以利用掃描器掃描自己所要的圖片，將它存成電腦圖檔（.JPG 或.GIF） 。 電腦網路/WWW HTML 編
14、寫 圖形圖案 網頁製作資源共用- 11 -PS.若是照片或有較多的顏色的圖片，最好存成 JPG 檔，以免顏色失真。4. 找到 FrontPage Express 的軟體使用。5. 開始設計 本次主題 -我的烘培機 。請至少包含以下幾項：1. 自我介紹的文字排版。2. 背景的處理。3. 善用水準線分排版，將資料分類。4. 利用表格做出一個自己的履歷表。5. 好站蒐集（自己上網找尋自己喜歡的網站，並做連結） 。6. 插入圖片或照片，背景音樂檔（勿過多圖片及音樂檔，以免下載速度慢，且要切合內容） 。7. 要自己製作出至少三面 Homepage 以做連結。8. Email 的連結。9. 其他可以把重要的記錄在這裡喔！
