Lesson 6: Frontpage 2003 (I)

* Frontpage 2003 screen shot

6.1 Introduction

• 功能表列: Frontpage 的功能選單，包含檔案 (File)、編輯 (Edit)、插入(Insert)、格式(Format)、工具(Tools)、表格(Table)、框架(Frames)等等選單。
  　
• 工具列:  顯示經常使用的功能按鈕。
  　
• 工作模式鈕: 切換不同的網頁工作模式，包含設計 (Design)、分割 (Split)、程式碼 (Code)、預覽 (Preview)。
  　
• 狀態列: 顯示目前的網頁編輯狀態資訊。
  　
• 網頁編輯區: 網頁內容編輯區。
  　
• 工作窗格: 隨時匯集與目前編輯工作相關的各項功能列表。
  　
• 網頁檔名標籤: 同時開啟多個網頁編輯時，可以從檔名標籤中快速切換工作檔案。
  
  　

6.2  文字與圖形的編輯

• 編輯段落文字
  
  1. 段落的對齊與縮排:
  在網頁上輸入文字並按下Enter鍵後，即形成一個段落。到工具列點選一種段落對齊鈕 -- > 工具列點選增加縮排鈕。
  
  2. 設定段落格式:
  工具列點選樣式欄旁邊的鈕，從選單中選擇樣式名稱。標題格式有6組，標題1的字體最大，標題6最小。段落格式還有編號清單、項目清單，目錄清單等等。
  
  3. 建立條列項目式段落:
  選好要加上項目符號的段落，到工具列選項目符號鈕。選子項目的段落，選增加縮排鈕。
  
  4. 更換項目符號 (List Properties):
  預設的項目符號為 ● ，編號則是阿拉伯數字的 123。到功能表列選擇格式 -- > 項目符號即編號 -- > 清單內容視窗中選擇符號模式，按確定。
  
  
  
  　
• 網頁圖片的編輯
  
  Note: 網頁上常用的圖片格式是 .gif 和 .jpg.  jpg檔色彩較多，通常用在相片圖形上。gif顏色數較少，通常用在卡通漫畫圖形上，GIF98a 格式可支援動畫。
  
  1. 在網頁上插入圖片:
  工具列點選檔案插入圖片鈕。
  
  2. 調整圖片大小
  按滑鼠右鍵，選擇圖片內容 (Picture Properties) --> 選擇外觀，勾選指定大小和保持比例，在寬度輸入新的圖片寬度。
  
  　
• 圖片背景
  
  1. 設定網頁背景色:
  功能表列選擇格式 (Format)，從選單中選擇背景 。跳出網頁內容視窗後，從背景選單中選擇其他色彩。
  
  2. 用圖片當背景: 按右鍵下載背景檔案 (background.zip)
  功能表列選擇格式 (Format)，從選單中選擇背景 。跳出網頁內容視窗後，選擇設定格式，勾選背景圖片。記得將圖片放在跟首頁同一個檔案夾裡。
  
  3. 設定對齊方式:
  
  在圖片上按滑鼠右鍵。從功能表中選擇圖片內容。跳出圖片內容視窗後，選擇外觀標籤。選擇一種對齊方式 (不對齊、靠左對齊、靠右對齊)。按確定。
  
  
  
  
  　

6.3  音效與影片

• 插入背景音樂: (支持 wav, asf, mid, ra, rm 等等)
  功能表的格式 --> 一般標籤 --> 按瀏覽 --> 在想要插入的音樂檔上快按兩下滑鼠右鍵。在網頁內容視窗中廻圈數設定次數，再按確定。
  　
• 播放與停止音效: 以 Window Media Player 控制。練習檔案: symphony 9.wav
  
  1. 選擇插入位置。功能表列中的插入，點選 Web 元件鈕。
  2. 跳出視窗後，在元件類型中選擇進階控制項 --> 選擇外掛程式 (Plug-in)，按完成鈕。
  3. 跳出外掛程式內容視窗後，點選瀏覽鈕。
  4. 從查詢選單中選擇音效檔案 (如 wav 檔案)。
  5. 跳回外掛程式內容視窗後，調整外掛程式的大小 (如: 高 45, 寬: 200)。
  6. 完成後，將網頁切換到預覽模式，就可看到如下的控制鈕。
  7. 將網頁切換到程式碼模式，在 embed 的後面加上 autostart="false"，如此聲音檔案就不會自動播放。
  
  
  
  　
• 影片播放控制: 練習檔案: 06-02-01.avi
  
  1. 選擇插入位置。功能表列中的插入，點選 Web 元件鈕。
  2. 跳出視窗後，在元件類型中選擇進階控制項 --> 選擇外掛程式 (Plug-in)，按完成鈕。
  3. 跳出外掛程式內容視窗後，點選瀏覽鈕。
  4. 從查詢選單中選擇視訊檔案 (如 wma, avi 檔案)。
  5. 跳回外掛程式內容視窗後，設定影片的大小 (如: 高 250, 寬: 300)。按確定。

6.4  插入超連接

• 插入超連接 (Hyperlink)
  
  1. 選擇想要插入超連接的文字或圖形，點選 插入超連接鈕。
  2. 跳出插入超連接視窗後，從查詢選單中選擇想要連接的網頁資料夾。從清單中選擇網頁。
  　
• 插入E-mail超連結
  
  1. 選擇想要插入E-mail超連接的文字或圖形，點選 插入超連接鈕。
  2. 跳出插入超連接視窗後，選電子郵件信箱鈕，在電子郵件信箱欄輸入 mailto: email地址。在主旨欄輸入郵件主旨。點選確定。
  　
• 在網頁中加入書籤
  
  1. 移到要插入書籤的位置，到功能表列選擇插入，從選單中選擇書籤。
  2. 跳出書籤視窗後，在書籤名稱欄輸入名稱，按確定。
  3. 選取要設成超連接的文字，點選插入超連接，跳出插入超連接視窗後，點選書籤鈕。
  4. 跳出選擇於文件中的位置視窗後，從清單中選擇要連接的書籤名稱，按確定。
  5. 跳回插入超連接視窗後，網址欄會出現書籤名稱，按確定鈕。

        按此連接:  書籤一   書籤二

6.5 進階編輯技巧

• 互動式按鈕
  
  1. 功能表列選擇插入，從選單中選擇互動式按鈕。
  2. 跳出互動式按鈕視窗後，選擇一種按鈕樣式，在文字欄輸入按鈕上要顯示的文字，點選瀏覽。
  
  
  
  
  3. 跳出編輯超連接視窗後，選擇現存的檔案或網頁鈕，選擇要連接的網頁，按確定。
  4. 跳回互動式按鈕視窗後，選擇字型，設定文字的字型、樣式、大小、顏色，按確定。
  5. 完成如下按鈕，在互動按鈕上按右鍵，選按鈕內容即可重新設定按鈕的內容。
  
  
  
  　
• 網頁切換動態效果
  
  1. 功能表列選擇格式，從選單中選擇網頁切換。
  2. 跳出網頁切換視窗後，從事件選單中選擇一種事件 (如: 進入網頁)。
  3. 在切換效果清單中選擇一種切換效果，選確定。按此連接。
  
  　

Reference:

1. 精彩 Frontpage 2003。網奕資訊, 2004。 
2. 多媒體應用。網奕資訊, 2004。 
3. 多媒體網頁設計。松崗
4. Microsoft Frontpage 2003 魔法書。旗標出版。

Last Updated 4/2009