FrontPage製作網頁型課件教案設計

【教學目標】瞭解用FrontPage製作課件的優勢與不足，學會用FrontPage製作網頁型課件，用FrontPage製作網頁課件授課教案：。

【重點難點】重點是如何在FrontPage插入多媒體素材，難點是課件交互性的實現和網頁原始碼的應用。

【教學策略】教師實例演示，學生上機操作，教師輔導和點評。

【媒體選擇】主要採用FrontPage示範課件和實際操作講解相結合，並輔以文字教材、網上學習資源和教學光盤。

【教學內容】

現在越來越多的課件是用網頁製作工具來製作，並結合數據庫、ASP等技術來加強課件的交互性。網頁形式的課件可以集成豐富的多媒體資訊，具有交互性強、製作簡易、體積小、便於在網絡上發佈、傳播和更新等優點，適合於個別化學習、課堂教學和網絡教學。網頁課件的開發工具軟件有很多，包括：

語言編程如HTML、D HTML、ASP、JSP、PHP、JAVA、JavaScript、VBScritp、VRML等。

所見即所得的可視化編輯工具，如FrontPage、Dreamweaver、Flash、Authorware、PowerPoint、CourseBuilder等。

對於一般都有繁重教學任務在身的學科教師來說，沒有太多的精力去學習複雜的編程語言。可視化網頁編輯工具由於原始碼自動生成，使教師可以有更多的精力關注內容的表達和教學設計。

用FrontPage編制的網頁課件有較易操作的介面(與上網瀏覽網頁完全相同)，一門課程或一堂課的脈絡結構(知識結構)可以在主頁上用選單(樹形選單或彈出選單)或導航條的形式清楚地表明，可以列出教學目的、內容、重點難點、引言、概念性質、例題、練習、小結、作業等等，甚至操作注意事項。FrontPage被公認爲最好的入門級的網頁編輯工具。

一、FrontPage基本操作

1.啓動FrontPage：雙擊桌面上的FrontPage捷徑圖標；開始→程序→Microsoft FrontPage；右擊一個副檔名爲htm或html網頁檔案，選"編輯"。

2.開啟或隱藏視圖欄、檔案夾列表和網頁文檔

a.點"視圖→視圖欄"開啟或隱藏視圖欄。點"視圖→檔案夾列表"開啟或隱藏檔案夾列表。

b.右擊副檔名爲htm或html網頁檔案(如)，選"編輯"，系統默認用FrontPage開啟網頁。

c.點"檔案→開啟"或點常用工具欄中的"開啟"按鈕，從本地磁盤或網絡驅動器中開啟網頁文檔，從任意Web網站開啟網頁，開啟最近開啟過的網頁文檔。

3.在FrontPage編輯器中預覽網頁

a.點普通視圖按鈕，觀察剛纔開啟的網頁。

b.點HTML視圖按鈕，觀察網頁。

c.點預覽視圖按鈕，觀察網頁。

tPage視圖方式：網頁視圖，檔案夾視圖，報表視圖，導航視圖，超級連結接視圖，任務視圖。

5.儲存網頁：點"檔案→儲存(另存爲)"或點常用工具欄中的"儲存"按鈕，將新建的網頁或從萬維網上開啟的網頁儲存到本地磁盤，把自己喜歡的網頁作爲模板儲存。

6.關閉網頁：點"檔案→關閉"或文檔視窗中的"X"按鈕，關閉當前網頁。

二、設計網頁課件的框架結構

三、在網頁中插入表格、圖像、背景、剪貼畫、聲音、視頻和動畫等多媒體對象

1.插入表格

插入到網頁上的文字、圖片、音頻、視頻、動畫等元素，往往看起來顯得不夠整齊，爲了使網頁更美觀，我們利用表格來控制複雜的網頁佈局，即用表格來定位網頁元素。

(1)點"表格→插入→表格"，輸入行數、列數(如3列5行)，插入一個規則表格，設定表格的屬性。

(2)用"表格"工具欄上的按鈕或"表格"選單上的"插入行或列"命令來增加表格的行或列。

(3)用"表格"工具欄上的按鈕刪除一個單元或多個單元，刪除一行、多行或一列、多列，刪除整個表格，表格刪除後立即按"常用工具欄"中的"撤消"按鈕或按"Ctrl+Z"恢復表格；選擇單元格或單元格中的內容用鼠標把選擇的內容拖到新位置進行移動；按住CTRL鍵，再用鼠標把選擇的內容拖到新位置進行復制。

(4)選中需要拆分的單元，單擊"表格"工具欄上的按鈕或使用"表格"工具欄上的"筆"拆分單元格；選中需要合併的單元，單擊"表格"工具欄上的按鈕或單擊"表格"工具欄上的(擦除)按鈕合併單元格。經過處理，3列5行的表格變成1列4行。

2.插入圖像和背景圖象

將鼠標定位到要插入圖片的位置(如某個單元格內)，單擊"常用工具欄"上的"插入圖片"按鈕，從已建站點的圖片檔案夾中選擇合適的圖片，點擊"確定"。也可以在"圖片"對話框中點擊"插入一個計算機中的圖片"按鈕，FrontPage編輯器將開啟"選擇檔案"對話框，從本地磁盤中指定一個圖像檔案，教案《用FrontPage製作網頁課件授課教案：》。

右擊網頁空白處，選"網頁屬性"快捷命令，單擊"網頁屬性"對話框的"背景"選項卡，先選中"背景圖片"複選框，選擇合適的圖像作爲背景圖插入網頁，點擊"確定"按鈕。

3.插入剪貼畫

點"插入"→"圖片"→"剪貼畫"命令，選擇一幅剪貼畫，單擊"插入"按鈕，或直接雙擊剪貼畫。

4.插入聲音或視頻剪輯

選擇"插入"→"進階"→"插件"命令，開啟"插件屬性"對話框，單擊"瀏覽"按鈕，開啟"選擇插件數據源"對話框，從站點檔案夾或本地計算機上指定要播放的聲音或視頻檔案。調整網頁中插件圖標到合適的尺寸。

5.修改圖像屬性

右擊網頁中的圖像，選"圖片屬性"命令，在"常規"選項方式下指定圖像的格式(例如jpg和質量75)；在"文字"框內簡單地描述圖像；單擊"外觀"選項卡，指定圖像無邊框即邊框線寬度爲0，指定圖像與相鄰的文字或圖像之間的水平間隔和縱向間隔，要改變圖像的大小，首先選中"大小"框內的"指定大小"複選框，然後分別指定圖像的寬度和高度。熟悉"圖片"工具欄：創建自動縮略圖；調整圖像的黑白對比度和亮度；給圖像加上斜面邊界；把彩色圖像變成黑白圖像；把圖像翻轉；修正圖像；裁剪圖像；淡化圖像；把圖像恢復原樣；在GIF格式的圖像上寫文字；使GIF圖像透明等。

6.插入水平線美化網頁

網頁水平線用於把網頁分隔成幾個部分。新建或開啟網頁文檔，把插入點移到要插入水平線的地方，單擊"插入"選單上的"水平線"命令。要把水平線插入在下一行，就把插入點定在行尾。在水平線上單擊鼠標右鍵，在彈出的選單中選擇"水平線屬性"命令，也可直接雙擊該水平線，設定水平線的寬度、水平線的對齊方式和水平線的顏色。

四、在課件網頁中使用書籤和超級連結接

1.書籤的作用

書籤用於在長網頁內部快速跳轉和定位。

2.創建書籤網頁

從Web網頁上覆制一篇比較長的文字，粘貼(選擇性粘貼：無格式文字)到新建網頁中。選擇要標記的位置，單擊"插入"選單中的"書籤"命令。FrontPage編輯器將顯示"書籤"對話框。在"書籤"框中鍵入書籤名稱(最好用西文命名)，書籤名稱應具有較好的描述性，然後單擊"添加"按鈕。可看到標籤小旗出現在期望定位的位置上。用同樣的方法創建其它書籤。

在網頁頂端創建系列提綱(目錄)文字，選中其中一個，右擊文字，選"超連結"，在"連結到"欄中點"本文檔中的位置"，在書籤列表中選中合適的書籤，確定。用同樣的方法給其它的提綱(目錄)文字建立超連結。儲存網頁，在IE中預覽。

3.超級連結

使用超級連結，不僅可使站內的網頁成爲一個有機整體，還可使不同的站點之間建立聯繫。例如，在製作"網上學習資源"網頁時，需要給所列出的大量的網上學習資源的標題文字設定超連結，以便訪問者透過點擊網頁上的標題文字開啟相對應的學習資源。首先選中標題目文字，然後單擊標準工具欄上的"超級連結"按鈕，在彈出的"創建超連結"對話框中指定超級連結所對應的網頁，或在URL文字方塊中填入網頁的地址即可。

4.創建圖像熱點作爲超級連結接

新建或開啟包含有複雜圖片(如地圖或大型儀器圖片)的網頁。練習創建圖像熱點作爲超級連結接。例如，在世界地圖片上的"國家地區"區域處創建一個熱點，指定它跳轉到"按國家地區查詢"的主頁上。方法是：首先單擊圖像，編輯器將顯示"圖片"工具欄，選擇"圖片"工具欄上的"圖片"按鈕，把遊標移到圖像上，遊標將變成筆狀，按住鼠標左鍵在圖像上畫出熱點。釋放鼠標後，FrontPage編輯器自動開啟"創建超級連結"對話框，在此指定該熱點要跳轉的目標網頁或網址。製作好後在IE瀏覽器中預覽。

5.改變超級連結的.外觀

選擇某文字超級連結，單擊"格式"選單上的"背景"命令，開啟"網頁屬性"對話框的"背景"選項。把該超級連結的顏色改爲另一種更醒目的顏色，預覽一下，看超級連結文字是否發生變化。試着用不同的顏色表示未訪問過的超級連結(Hyperlink)、訪問過的超級連結(Visited Hyperlink)和將要訪問的超級連結(Active Hyperlink)。看看改變超級連結的外觀的效果。

6.編輯超級連結屬性

右擊超級連結，選"超級連結屬性"，FrontPage編輯器將開啟，在URL框內鍵入新的網頁檔案名或網址。觀察改變後的效果。

7.取消超級連結

右擊超級連結，選"取消超級連結"命令。

五、插入活動元素-讓課件網頁活起來

1.製作懸停按鈕

定位插入點，單擊“插入”/“組件”/“懸停按鈕”，開啟“懸停按鈕”對話框。把動態按鈕默認標籤“按鈕文字”，改成所需的按鈕文字，單擊“字型”按鈕，在開啟的“字型”（字型）對話框裏設定您所需標籤的字型。要爲動態按鈕創建超級連結，可直接在“連結到”框內鍵入要跳轉的URL，也可單擊“瀏覽”按鈕，從當前開啟的網站、WWW、本地磁盤中指定跳轉目標。可重新指定按鈕的前景顏色，不過如果按鈕顯示的是圖像，前景顏色無效。當用戶把鼠標移到動態按鈕上時，按鈕的顏色將自動發生變化，這是動態按鈕最大的特色，至於顏色是怎樣變化的，可透過“效果”和“效果顏色”框設定。還可改變按鈕的寬度和高度（以像素爲單位）。動態按鈕還有一些進階用法，單擊“自訂”按鈕，在“自訂”對話框可設定播放聲音或音樂和在動態按鈕上顯示圖像等。

2.製作橫幅廣告

定位插入點後，單擊“插入”/“組件”/“橫幅廣告管理器”命令，開啟“橫幅廣告管理器”對話框。單擊“添加”按鈕從圖片目錄下分別獲取圖片序列（例如01.gif ~04.gif），設定寬度、高度、漸變效果、顯示每幅圖片時間。要爲橫幅廣告創建一個超級連結，只需在“連結”框內鍵入跳轉目標的URL，或者單擊“瀏覽”按鈕定位跳轉目標。

3.製作字幕

定位插入點後，單擊“插入”/“組件”/“字幕”命令，開啟“字幕屬性”對話框。在“文字”框內鍵入要顯示的字幕內容，設定文字遊動“方向”、“速度”、“表現方式”、“文字對齊方式”等選項。在“表現方式”框內，可指定字幕遊動的方式，默認是“滾動條”，如果選“幻燈片”，表示當第一個字元而不是最後一個字元觸及左邊界時就停止遊動，如果選“交替”，表示像鐘擺那樣在左右邊界內擺來擺去。可任意設定字幕的寬度和高度，字幕的寬度和高度既可以按像素的絕對值給出，也可以按Web瀏覽器視窗的百分比給出。默認情況下，字幕周而復始，不停地遊動，周而復始。您可讓字幕只遊動若干次，方法是，不選中“連續”複選框，然後在“次數”框內選擇要遊動的次數。此外，還可給整個字幕加上“背景顏色”。

4、插入Flash動畫

方法一：“插入”→“Web組件…”→“進階控件”→“插件”

（1）將鼠標定位到要插入Flash動畫的位置，單擊選單命令“插入”→“Web組件…”，在“插入Web組件”對話框中“組件類型”列表框中選“進階控件”，再在右邊點選“插件”，單擊“完成”按鈕。

（2）單擊“插件屬性”對話框中的“瀏覽”按鈕，開啟“選擇插件數據源”對話框，選擇要插入的swf課件，單擊“開啟”按鈕。

（3）返回“插件屬性”對話框，設定合適的“高度”、“寬度”等項，單擊“確定”按鈕。雙擊插入到網頁中的插件，或右擊，選“插件屬性”，均可開啟“插件屬性”對話框，進行修改。

方法二：“插入”→“Web組件…”→“進階控件”→“ ActiveX控件”

（1）用插件的方法播放課件，操作簡單、實用，但如果要對課件進行更多的控制，應在“插入Web組件”對話框中點選“ActiveX控件”，單擊“下一步”， 開啟“插入ActiveX控件”對話框，在控件列表框中檢視是否有 “Shockwave Flash Object”，如果有，點選它，單擊“完成”按鈕。如果沒有，則點擊“自訂”按鈕，開啟“自訂ActiveX控件列表”對話框，勾選“Shockwave Flash Object”控件，單擊“確定”按鈕，返回“插入Web組件”對話框，點選新增加的“Shockwave Flash Object”，單擊“完成”按鈕。

（2）這時網頁中會出現一塊白色矩形區域。用鼠標雙擊它，在彈出的“ActiveX控件屬性”視窗中有三個選項卡，選“Flash 屬性”，設定好各選項。圖中各選項的含義是：

影片URL：輸入或粘貼要插入的Flash動畫的連結地址；

品質：默認爲“High”（高質量播放），推薦選擇“Best”（最優播放）；

比例：推薦選擇“Show All”（完全顯示）；

播放：務必勾選；

循環：是否勾選該項取決於Flash動畫的內容，通常要勾選該項；

顯示選單：通常勾選該項；

視窗模式：默認爲Window，通常無須更改；

其它選項如“嵌入影片”、“設計字型”、“排列”、“背景顏色”通常按默認設定即可。