社區教育培訓網站：社區網頁製作與網站管理課程10jj03-03
[回首頁]、[本編目錄]、[上一編]、[下一編]
第三週、FrontPage網頁編輯程式簡介與操作練習
課程教師：鄭錦德
一、網站架構初步規劃
1. 檔案系統
每位學員在電腦室的電腦中，都有一個專屬的個人資料夾(如kasumi/)。在這個資料夾中，新增三個資料夾text/、program/、www/，其目的如下所示：
- kasumi/
- text/：存放下載的文字檔
- program/：存放下載的程式
- www/：存放個人網站的所有檔案
2. 網站初步架構
本課程學員的個人網站的架構初步規劃如下：
圖1
請各位學員在自己的www目錄中，先新增好intro/、plan/、practice/、recommend/等資料夾：
- www/
- intro/：存放「自我介紹」網頁，與此網頁中所用到的其他檔案。
- plan/：存放「網站規劃」網頁，與此網頁中所用到的其他檔案。
- practice/：存放本課程中的練習檔案。
- recommend/：存放「網站推薦」網頁，與此網頁中所用到的其他檔案。
3. 網站練習參考範本
請每位學員依照「月霞的個人網站」為範本，來練習製作初步的個人網站。
或是依照自己的網站規劃來建立資料夾，新增資料夾存放各種網頁。
二、用FrontPage編輯網頁
1. 新增網頁、儲存網頁
- 瀏覽器視窗標題設定：
- 此標題為出現在「瀏覽器視窗的標題」，而非「網頁中的標題」。
- 通常「瀏覽器視窗的標題」和「網頁中的標題」的內容是一樣的。
- 「瀏覽器視窗的標題」一定要設定，不然讀者使用瀏覽器的「上一頁」、「下一頁」時會非常不方便，看到此網頁欲加入「我的最愛」、或是「書籤」時會很麻煩，使用Windows系統的「工作列」時也會不方便。
- 設定方法：
- 設定「網頁內容」：在網頁中按滑鼠右鍵→選「網頁內容」，或從「檔案」→「網頁內容」即可進入。
- 「網頁內容」中的「標題」即為設定「瀏覽器視窗的標題」之處。
- 存檔：
- 將檔案存在上述www/的檔案系統中。
- 副檔名一定要儲存成.html而不是.htm。
- 檔名只能用英文小寫與數字，不要使用中文，也不要使用特殊符號。
2. 網頁中的文章結構指定
「文章結構」先於「樣式設計」：編輯網頁時，先將文章鍵入，或從其他程式貼入。接著將網頁中的「文章結構」一一指定好，而不用先急著指定文字字形、文字大小、樣式等。文章結構利用FrontPage工具列的「結構樣式表」來指定。
一篇文章的基本結構如下：
標題作者區
- 標題 header1
- 作者 p
- 日期 p
本文區
- 標題2(章節或大小標) header2
- 標題3(章節或大小標) header3
- 標題4(章節或大小標) header4
- 標題5(章節或大小標) header5
- 標題6(章節或大小標) header6
- 內文(段落) p
- 引言 blockquote
- 無碼條列 ul
- 有碼條列 ol
- 定義式條列 dl
- 表格 table
- 插圖 img
連絡資料
- 出版單位與連絡資料
3. 超連結製作
連結至其他網站的超連結
編輯「其他網站推薦」時會用到：
- 用途：
- 用來連結世界各地任何的網頁，也就是自己網站之外的網頁。讓他人可以透過自己縝密分類、整理的推薦網頁去觀看到網際網路上更多相關的資訊。
- 製作方法：
- 先將要製作超連結的文字選取好。
- 建立超連結：利用「插入」→「超連結」來輸入網址(按Control-K亦可)。將網址從瀏覽器中複製貼到建立超連結視窗中的「URL」一欄中。
- 「推薦網站」網頁編排練習：
- 已經編排好的「推薦網站」範本：recommend-demo.html
- 請學員參照上述範本練習編輯連結至其他網站的超連結。
- 請學員將自己平常最常去的幾個網站或是讓你印象深刻的網站，將這些網站連結在recommend.html中製作。除了製作連結之外，亦需要以文字簡略的描述一下這些網站的內容。
圖2
連結至自己網站的超連結
- 用途：
- 編輯「網站使用者界面」時會用到，如自己網站的首頁「首頁」連到自己網站其他內容網頁的連結，其他網頁回到首頁的連結等。
- 製作方法：
- 先將要製作超連結的文字選取好。
- 建立超連結：利用「插入」→「超連結」來建立(按Control-K亦可)。
- 選取所欲連結的網頁：在「URL」欄的右邊，有個長得像是「檔案總管」的圖示。按這個圖示，並將所欲連結的網頁選出即可。
圖3
同一網頁內的超連結(anchor)
- 用途：
- 主要是用於一篇網頁太過冗長時，文章需要參照或是快速瀏覽的時候可以利用書籤的連結方式達到方便閱讀的功用。參看圖3。
- 網頁內連結練習：
- 已經編排好的網頁內連結範本：anchor-demo.html
- 請學員下載為去編輯的網頁：anchor-practice.html(請按右鍵下載)
圖4
網頁中可以寄信的超連結(mailto)
- 用途：
- 提供他人寄信的功能。主要是讓他人在觀賞自己的網頁之後，可以經由寄信的方式與網頁編輯者作意見交流的功能。
- mailto功能練習：
- 已經加上mailto功能的「推薦網站」範本：mailto-demo.html
- 請學員將自己編輯的網頁一一加上mailto的超連結。
圖5
4. 用瀏覽器預覽
- 編輯完後記得一定要存檔。
- 存檔後可用瀏覽器來預覽：按FrontPage工具列中列表機右邊有放大鏡的圖示，即為用瀏覽器來預覽的按鈕，點一下就會自動開啟Netscape或是IE來預覽此網頁。
三、網頁上傳
- 網頁上傳至自己的www帳號中，需要利用FTP程式。
- 先下載常用的FTP程式：WS_FTP95.exe。
- FTP程式的功用
- 利用FTP程式上傳網頁到網路上
- 用瀏覽器檢視網頁，網址初步介紹。
- 利用FTP程式下載檔案的介紹。
- FTP程式安裝與下載，請參看電腦生活與網際網路介紹教材「第十六章、網路原理初探--網路世界的資料傳輸」
四、本週習題作業
- 若在課堂上未能完成本章第一節中所描述的「學員初步實習網站」，回家後請利用FTP程式下載至家中的電腦中繼續編輯完成。
- 若需要FrontPage程式，請向班代索取。
- 閱讀(上週未閱讀完的請繼續閱讀)：
- 《看圖例學HTML》，1-25頁
- 《FRONTPAGE 2000 中文版學習手冊》，1-44頁
- 《青草湖社區大學「電腦生活與網際網路介紹」教材》
- 網站規劃研究與青草湖社區大學網站製作：「電腦生活與網際網路介紹」F組學員實習成果
mailto:jdz@mail.bamboo.hc.edu.tw
