1、多媒體CAI課件制作基礎(chǔ)教程 （第四版）,第 五 章,網(wǎng)頁(yè)型課件設(shè)計(jì)Dreamweaver CS5,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,內(nèi) 容 提 要,網(wǎng)頁(yè)型課件與傳統(tǒng)課件相比，具有占用存儲(chǔ)空間小，易于在網(wǎng)上傳輸，易于共享等特點(diǎn)。網(wǎng)頁(yè)型課件能夠容納大量信息，能兼容多種素材的文件格式，并且是一個(gè)開(kāi)放的體系，有利于對(duì)課件進(jìn)行修改、增添和刪除。目前比較流行的網(wǎng)頁(yè)制作軟件是Adobe Dreamweaver CS5，該軟件是集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身的網(wǎng)頁(yè)制作軟件。 通過(guò)對(duì)本章的學(xué)習(xí)，讀者應(yīng)了解并掌握Adobe Dreamweaver CS5的功能特點(diǎn)和基本使用方法，并且能夠應(yīng)用該軟件制作

2、出圖文并茂的多媒體CAI課件。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.1 網(wǎng)頁(yè)型課件設(shè)計(jì),隨著課堂教學(xué)的不斷變革，傳統(tǒng)的理論講述已經(jīng)不能適應(yīng)現(xiàn)代的課堂教學(xué)。網(wǎng)絡(luò)課件的出現(xiàn)，擺脫了教材生硬的面孔，這種由文本、圖形、動(dòng)畫(huà)、聲音、視頻等多種媒體信息組合在一起，經(jīng)過(guò)加工和處理所形成的教學(xué)系統(tǒng)，圖文聲像并茂，表現(xiàn)力和感染力極強(qiáng)， 使學(xué)習(xí)過(guò)程變得輕松愉快。 目前，關(guān)于網(wǎng)絡(luò)課件的定義非常多，比較容易為大家接受的定義是：網(wǎng)絡(luò)課件是基于瀏覽器/服務(wù)器模式開(kāi)發(fā)的、能在互聯(lián)網(wǎng)或局域網(wǎng)中發(fā)布的課件。它有兩個(gè)方面的含義：在網(wǎng)上執(zhí)行和通過(guò)瀏覽器執(zhí)行。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2

3、Dreamweaver CS5的工作界面,Dreamweaver CS5作為Dreamweaver系列中的最新版本，在增強(qiáng)了面向?qū)I(yè)人士的基本工具和可視技術(shù)外，同時(shí)提供了功能強(qiáng)大、開(kāi)放式且基于標(biāo)準(zhǔn)的開(kāi)發(fā)模式，可以輕而易舉地制作出跨平臺(tái)和瀏覽器的動(dòng)感效果網(wǎng)頁(yè)型課件。 菜單欄 “插入”面板 “文檔”工具欄 “文檔”窗口 “屬性”面板 狀態(tài)欄 面板組,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.1 菜單欄,菜單欄提供了各種操作的標(biāo)準(zhǔn)菜單命令，它由“文件”、“編輯”、“查看”、“插入”、“修改”、“格式”、“命令”、“站點(diǎn)”、“窗口”和“幫助”等10個(gè)菜單命令組成，如圖5-2所示。,:計(jì)算

4、機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.2 “插入”面板,在“插入”面板中包含了可以向網(wǎng)頁(yè)文檔添加的各種元素，如文字、圖像、表格、按鈕、導(dǎo)航以及程序等。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.3 “文檔”工具欄,“文檔”工具欄主要包含了一些對(duì)文檔進(jìn)行常用操作的功能按鈕，通過(guò)單擊這些按鈕可以在文檔的不同視圖模式間進(jìn)行快速切換，如圖5-13所示。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.4 “文檔”窗口,“文檔”窗口也就是設(shè)計(jì)區(qū)，是Dreamweaver CS5進(jìn)行可視化編輯網(wǎng)頁(yè)的主要區(qū)域，可以顯示當(dāng)前文檔的所有操作效果，如插入文本、圖像、動(dòng)畫(huà)等，如圖5

5、-14所示。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.5 “屬性”面板,在“屬性”面板中可以查看并編輯頁(yè)面上文本或?qū)ο蟮膶傩?，如圖5-15所示。該面板中顯示的屬性通常對(duì)應(yīng)于標(biāo)簽的屬性，更改屬性通常與在“代碼”視圖中更改相應(yīng)的屬性具有相同的效果。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.6 狀態(tài)欄,Dreamweaver CS5中的狀態(tài)欄位于文檔窗口的底部，它的作用是顯示當(dāng)前正在編輯文檔的相關(guān)信息，如當(dāng)前窗口大小、文檔大小和估計(jì)下載時(shí)間等，如圖5-16所示。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.2.7 面板組,為使設(shè)計(jì)界面更加簡(jiǎn)潔，同時(shí)也為了獲得更

6、大的操作空間，Dreamweaver CS5中類型相同或功能相近的面板分別被組織到不同的面板下，然后這些面板被組織在一起，構(gòu)成面板組。 這些面板都是折疊的，通過(guò)標(biāo)題左角處的展開(kāi)箭頭可以對(duì)面板進(jìn)行折疊或展開(kāi)，并且可以和其他面板組?？吭谝黄稹Ｃ姘褰M還可以?？康郊傻膽?yīng)用程序窗口中。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.3 創(chuàng)建站點(diǎn),一個(gè)網(wǎng)頁(yè)型的課件，就相當(dāng)于一個(gè)簡(jiǎn)易的網(wǎng)站，在制作課件也就是建立網(wǎng)站之前，首先要設(shè)計(jì)并規(guī)劃好整個(gè)站點(diǎn)需要有哪些頁(yè)面，有哪些功能，繼而才能進(jìn)行具體的網(wǎng)頁(yè)制作過(guò)程。創(chuàng)建好一個(gè)本地站點(diǎn)后，可以進(jìn)行管理站點(diǎn)操作，還可以創(chuàng)建文檔并將其保存在站點(diǎn)文件夾中。本節(jié)將主要介

7、紹在Dreamweaver中創(chuàng)建站點(diǎn)的方法。 使用向?qū)?chuàng)建本地站點(diǎn) 使用高級(jí)模式創(chuàng)建本地站點(diǎn),:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.3.1 使用向?qū)?chuàng)建本地站點(diǎn),使用向?qū)?chuàng)建本地站點(diǎn)的方法很簡(jiǎn)單，通過(guò)“菜單欄”中的“站點(diǎn)”|“新建站點(diǎn)”命令即可實(shí)現(xiàn)。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.3.2 使用高級(jí)模式創(chuàng)建本地站點(diǎn),在圖5-18中，有一個(gè)“高級(jí)設(shè)置”標(biāo)簽，用戶可通過(guò)該標(biāo)簽下的選項(xiàng)對(duì)站點(diǎn)的具體參數(shù)進(jìn)行設(shè)置。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.4 管理站點(diǎn),創(chuàng)建好本地站點(diǎn)后，可以進(jìn)行一些基本的編輯操作，主要包括編輯、刪除和復(fù)制站點(diǎn)等。 打開(kāi)站點(diǎn)

8、“管理站點(diǎn)“”對(duì)話框 創(chuàng)建與管理站點(diǎn)文件,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.4.1 打開(kāi)站點(diǎn),選擇“窗口”|“文件”命令，打開(kāi)“文件”面板，顯示了當(dāng)前站點(diǎn)中的所有文件。單擊面板右側(cè)的“展開(kāi)/折疊以顯示本地和遠(yuǎn)端站點(diǎn)”按鈕 ，如圖5-23所示，展開(kāi)“文件”面板。在右側(cè)顯示了站點(diǎn)或遠(yuǎn)程服務(wù)器站點(diǎn)上的文件，右側(cè)則顯示了本地站點(diǎn)的所有文件，如圖5-24所示。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.4.2 “管理站點(diǎn)”對(duì)話框,“管理站點(diǎn)”對(duì)話框主要是對(duì)本地站點(diǎn)進(jìn)行管理操作，選擇“站點(diǎn)”|“管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，如圖5-25和圖5-26所示，在該對(duì)話框中顯

9、示了創(chuàng)建的本地站點(diǎn)。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.4.3 創(chuàng)建與管理站點(diǎn)文件,創(chuàng)建好本地站點(diǎn)后，可以根據(jù)需要?jiǎng)?chuàng)建各欄目文件夾和文件，對(duì)于創(chuàng)建好的站點(diǎn)，也可以進(jìn)行再次編輯，或刪除和復(fù)制這些站點(diǎn)。 創(chuàng)建文件夾和文件 重命名文件和文件夾 刪除文件和文件夾,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.5 文檔的基本操作,Dreamweaver CS5提供了多種創(chuàng)建文檔的方法，可以創(chuàng)建一個(gè)新的空白HTML文檔，或使用模板創(chuàng)建新文檔。 創(chuàng)建空白網(wǎng)頁(yè)文檔 打開(kāi)和保存文檔 設(shè)置文檔屬性,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.5.1 創(chuàng)建空白網(wǎng)頁(yè)文檔,空白+網(wǎng)頁(yè)文檔

10、是Dreamweaver CS5最常用的文檔。選擇“文件”“新建”命令，或按Ctrl+N鍵，即可打開(kāi)“新建文檔”對(duì)話框，如圖5-31所示。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.5.2 打開(kāi)和保存文檔,打開(kāi)和保存網(wǎng)頁(yè)文檔的方法非常簡(jiǎn)單。在打開(kāi)網(wǎng)頁(yè)文檔時(shí)，可以選中所需打開(kāi)的文檔，也可以打開(kāi)最近的文檔。 打開(kāi)網(wǎng)頁(yè)文檔 打開(kāi)最近打開(kāi)的文檔 保存網(wǎng)頁(yè)文檔,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.5.3 設(shè)置文檔屬性,網(wǎng)頁(yè)文檔的屬性主要包括頁(yè)面標(biāo)題、背景圖像、背景顏色、文本和鏈接顏色、邊距等。選擇“修改”|“頁(yè)面屬性”命令，打開(kāi)“頁(yè)面屬性”對(duì)話框，如圖5-36所示，可以設(shè)置有關(guān)

11、網(wǎng)頁(yè)文檔的所有屬性。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.6 規(guī)劃網(wǎng)頁(yè)型課件布局,表格和框架是Dreamweaver CS5中最常用的布局工具，表格在網(wǎng)頁(yè)中不僅可以排列數(shù)據(jù)，還可以對(duì)頁(yè)面中的圖像、文本、動(dòng)畫(huà)等元素進(jìn)行準(zhǔn)確的定位，使頁(yè)面顯得整齊有序、分類明確，便于瀏覽。使用框架規(guī)劃網(wǎng)頁(yè)，可以把網(wǎng)頁(yè)分成幾個(gè)部分，每個(gè)部分都是一個(gè)獨(dú)立的HTML頁(yè)。本章主要介紹使用表格和利用框架規(guī)劃網(wǎng)頁(yè)布局。 可視化助理 使用表格 使用框架,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.6.1 可視化助理,Dreamweaver CS5提供了“標(biāo)尺”和“網(wǎng)格”功能，用于輔助設(shè)計(jì)網(wǎng)頁(yè)文檔?！皹?biāo)尺”

12、功能可以輔助測(cè)量、組織和規(guī)劃布局。“網(wǎng)格”功能可以使絕對(duì)定位的網(wǎng)頁(yè)元素在移動(dòng)時(shí)自動(dòng)靠齊網(wǎng)格，還可以通過(guò)指定網(wǎng)格設(shè)置更改網(wǎng)格或控制靠齊行為 使用標(biāo)尺 使用網(wǎng)格 使用跟蹤圖像功能,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.6.2 使用表格,表格是網(wǎng)頁(yè)中非常重要的元素，是網(wǎng)頁(yè)排版的主要手段，可以幫助設(shè)計(jì)者高效、準(zhǔn)確地定位各種網(wǎng)頁(yè)數(shù)據(jù)，直觀、鮮明地表達(dá)設(shè)計(jì)者的思想，向?yàn)g覽者提供條理清晰的多樣化信息。 插入表格 調(diào)整表格合適大小 更改列寬和行高 添加和刪除行、列 拆分和合并單元格 設(shè)置表格屬性 設(shè)置單元格、行和列的屬性,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.6.3 使用框架,框架

13、是將瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)，并且各個(gè)框架之間不存在干擾，在網(wǎng)頁(yè)模板出現(xiàn)之前，框架技術(shù)是最常用的布局網(wǎng)頁(yè)工具之一。 框架的概念 創(chuàng)建框架網(wǎng)頁(yè) 在HTML網(wǎng)頁(yè)文檔中應(yīng)用框架 保存框架,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.7 在課間中插入媒體元素,在對(duì)Dreamweaver CS5有了一定的認(rèn)識(shí)并掌握了網(wǎng)頁(yè)的布局方法后，就可以在網(wǎng)頁(yè)型課件中插入各種媒體元素了，包括文本、動(dòng)畫(huà)、視頻、聲音等。 插入文本 插入圖像 應(yīng)用導(dǎo)航條 插入Flash動(dòng)畫(huà) 插入聲音,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.7.1 插入文本,文本是網(wǎng)頁(yè)中最常見(jiàn)也是運(yùn)用最廣

14、泛的元素之一，是網(wǎng)頁(yè)內(nèi)容的核心部分。在Dreamweaver CS5中可以直接輸入文本，也可以從其他文檔中復(fù)制文本和導(dǎo)入文本。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.7.2 插入圖像,圖像是網(wǎng)頁(yè)上最基本的元素之一，制作精美的圖像可以大大增強(qiáng)網(wǎng)頁(yè)的視覺(jué)效果。在網(wǎng)頁(yè)中插入圖像通常是用于添加圖形界面(如按鈕)、創(chuàng)建具有視覺(jué)感染力的內(nèi)容(如照片、背景等)或交互式設(shè)計(jì)元素(如鼠標(biāo)指針經(jīng)過(guò)圖像)。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.7.3 應(yīng)用導(dǎo)航條,導(dǎo)航條是由一個(gè)或多個(gè)圖像組成，它的顯示隨著動(dòng)作的改變而改變，它就像圖書(shū)目錄一樣，在瀏覽網(wǎng)站時(shí)起到指引方向的作用，能夠快速地找

15、到所需的內(nèi)容。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.7.4 插入Flash動(dòng)畫(huà),Flash動(dòng)畫(huà)是網(wǎng)頁(yè)上最流行的動(dòng)畫(huà)格式。在Dreamweaver CS5中，F(xiàn)lash動(dòng)畫(huà)也是最常用的多媒體插件之一，它將聲音、圖像和動(dòng)畫(huà)等內(nèi)容加入到一個(gè)文件中并能制作較好的動(dòng)畫(huà)效果，同時(shí)使用了優(yōu)化的算法將多媒體數(shù)據(jù)進(jìn)行壓縮，使文件變得很小，因此，非常適合在網(wǎng)上傳播。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.7.5 插入聲音,在網(wǎng)頁(yè)型課件中插入聲音可以使課件聲情并茂，插入的聲音既可以在網(wǎng)頁(yè)中通過(guò)控制按鈕播放，又可以作為網(wǎng)頁(yè)的背景音樂(lè)。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.

16、8 使用超鏈接,超鏈接是網(wǎng)頁(yè)中至關(guān)重要的元素之一，它可以實(shí)現(xiàn)頁(yè)面之間的互相跳轉(zhuǎn)，從而有機(jī)地將網(wǎng)站中的每個(gè)頁(yè)面聯(lián)系起來(lái) 超鏈接的分類 絕對(duì)和相對(duì)路徑 創(chuàng)建超鏈接的方法,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.8.1 超鏈接的分類,在Dreamweaver CS5中，可以創(chuàng)建下列幾種類型的鏈接。 頁(yè)間鏈接：利用該鏈接可以跳轉(zhuǎn)到其他文檔或文件，如圖形、電影、PDF或聲音文件。 頁(yè)內(nèi)鏈接：也稱為錨記鏈接，利用它可以跳轉(zhuǎn)到本站點(diǎn)指定文檔的位置。 E-mail鏈接：使用該鏈接，可以啟動(dòng)電子郵件程序，允許用戶書(shū)寫(xiě)電子郵件，并發(fā)送到指定地址。 空鏈接及腳本鏈接：它允許用戶附加行為至對(duì)象或創(chuàng)建一個(gè)執(zhí)行JavaScript代碼的鏈接。,:計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列系列叢書(shū)官方網(wǎng)站 :,5.8.2 絕對(duì)和相對(duì)路徑,從作為鏈接起點(diǎn)的文檔到作為鏈接目標(biāo)的文檔之間的文件路徑，對(duì)于創(chuàng)建鏈接至關(guān)重要。一般來(lái)說(shuō)，鏈接路徑可以分為絕對(duì)路徑與相對(duì)路徑兩類。 絕對(duì)路徑指包括服務(wù)器協(xié)議在內(nèi)的完全路徑，比如：http:/www.xdchiang/dreamweaver/ index.htm(此處使用的協(xié)議是最常用的http協(xié)議)。使用絕對(duì)路徑與鏈接的源端點(diǎn)無(wú)關(guān)，只要目標(biāo)站點(diǎn)地址不變，無(wú)論文檔在站點(diǎn)中如何移動(dòng)，都可以正常實(shí)現(xiàn)跳轉(zhuǎn)而不會(huì)發(fā)生錯(cuò)誤。如果所要鏈接當(dāng)前站點(diǎn)之