《多媒體CAI課件制作應(yīng)用教程》第五章 Dreamweaver網(wǎng)頁(yè)型課件設(shè)計(jì)

高等學(xué)校計(jì)算機(jī)應(yīng)用規(guī)劃教材《多媒體CAI課件制作應(yīng)用教程》第五

章

Dreamweaver網(wǎng)頁(yè)型課件設(shè)計(jì)學(xué)習(xí)目標(biāo)網(wǎng)頁(yè)型效果的課件與傳統(tǒng)課件相比，具有占用存儲(chǔ)空間小，易于在網(wǎng)上傳輸，易于共享等特點(diǎn)。網(wǎng)頁(yè)型課件能夠容納大量信息，能兼容多種素材的文件格式，并且是一個(gè)開(kāi)放的體系，有利于對(duì)課件進(jìn)行修改、增添和刪除。目前比較流行的網(wǎng)頁(yè)制作軟件是AdobeDreamweaverCS6，該軟件是世界頂級(jí)軟件廠商Adobe公司推出的一款擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)設(shè)計(jì)軟件。該軟件支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種網(wǎng)頁(yè)編輯模式，可以無(wú)需編寫任何代碼就能快速創(chuàng)建Web頁(yè)面。通過(guò)對(duì)本章的學(xué)習(xí)，讀者應(yīng)了解并掌握AdobeDreamweaverCS6的功能特點(diǎn)和基本使用方法，并且能夠應(yīng)用該軟件制作出圖文并茂的多媒體CAI課件。5.1網(wǎng)頁(yè)型課件制作入門

隨著課堂教學(xué)的不斷變革，傳統(tǒng)的理論講述已經(jīng)不能適應(yīng)現(xiàn)代的課堂教學(xué)。網(wǎng)絡(luò)課件的出現(xiàn)，擺脫了教材生硬的面孔，這種由文本、圖形、動(dòng)畫、聲音、視頻等多種媒體信息組合在一起，經(jīng)過(guò)加工和處理所形成的教學(xué)系統(tǒng)，圖文聲像并茂，表現(xiàn)力和感染力極強(qiáng)，使學(xué)習(xí)過(guò)程變得輕松愉快。網(wǎng)頁(yè)型課件概述認(rèn)識(shí)DreamweaverCS65.1.1網(wǎng)頁(yè)型課件概述

目前，關(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í)行。網(wǎng)絡(luò)課件具有以下優(yōu)點(diǎn)。5.1.2認(rèn)識(shí)DreamweaverCS6

Dreamweaver

CS6作為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è)型課件。5.2站點(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é)將主要介紹在Dreamweaver中創(chuàng)建站點(diǎn)的方法。使用向?qū)?chuàng)建本地站點(diǎn)使用高級(jí)模式創(chuàng)建本地站點(diǎn)站點(diǎn)的打開(kāi)和管理創(chuàng)建與管理站點(diǎn)文件5.2.1使用向?qū)?chuàng)建本地站點(diǎn)

使用向?qū)?chuàng)建本地站點(diǎn)的方法很簡(jiǎn)單，通過(guò)【菜單欄】中的【站點(diǎn)】|【新建站點(diǎn)】命令即可實(shí)現(xiàn)。

5.2.2使用高級(jí)模式創(chuàng)建本地站點(diǎn)

有一個(gè)【高級(jí)設(shè)置】標(biāo)簽，用戶可通過(guò)該標(biāo)簽下的選項(xiàng)對(duì)站點(diǎn)的具體參數(shù)進(jìn)行設(shè)置。5.2.3站點(diǎn)的打開(kāi)和管理

選擇【窗口】|【文件】命令，打開(kāi)【文件】面板，其中顯示了當(dāng)前站點(diǎn)中的所有文件。5.2.4創(chuàng)建與管理站點(diǎn)文件

創(chuàng)建好本地站點(diǎn)后，可以根據(jù)需要?jiǎng)?chuàng)建各欄目文件夾和文件，對(duì)于創(chuàng)建好的站點(diǎn)，也可以進(jìn)行再次編輯或刪除和復(fù)制這些站點(diǎn)。5.3文檔的基本操作

DreamweaverCS6提供了多種創(chuàng)建文檔的方法，可以創(chuàng)建一個(gè)新的空白HTML文檔，或使用模板創(chuàng)建新文檔。創(chuàng)建空白網(wǎng)頁(yè)文檔打開(kāi)和保存文檔設(shè)置文檔屬性5.3.1創(chuàng)建空白網(wǎng)頁(yè)文檔

空白網(wǎng)頁(yè)文檔是DreamweaverCS6最常用的文檔。選擇【文件】｜【新建】命令，或按Ctrl+N鍵，即可打開(kāi)【新建文檔】對(duì)話框。5.3.2打開(kāi)和保存文檔

打開(kāi)和保存網(wǎng)頁(yè)文檔的方法非常簡(jiǎn)單。在打開(kāi)網(wǎng)頁(yè)文檔時(shí)，可以選中所需打開(kāi)的文檔，也可以打開(kāi)最近的文檔。5.3.3設(shè)置文檔屬性

網(wǎng)頁(yè)文檔的屬性主要包括頁(yè)面標(biāo)題、背景圖像、背景顏色、文本和鏈接顏色、邊距等。選擇【修改】|【頁(yè)面屬性】命令，打開(kāi)【頁(yè)面屬性】對(duì)話框，如圖5-33所示，可以設(shè)置有關(guān)網(wǎng)頁(yè)文檔的所有屬性。表格和框架是DreamweaverCS6中最常用的布局工具，表格在網(wǎng)頁(yè)中不僅可以排列數(shù)據(jù)，還可以對(duì)頁(yè)面中的圖像、文本、動(dòng)畫等元素進(jìn)行準(zhǔn)確的定位，使頁(yè)面顯得整齊有序、分類明確，便于瀏覽。使用框架規(guī)劃網(wǎng)頁(yè)，可以把網(wǎng)頁(yè)分成幾個(gè)部分，每個(gè)部分都是一個(gè)獨(dú)立的HTML頁(yè)。本章主要介紹使用表格和利用框架規(guī)劃網(wǎng)頁(yè)布局?？梢暬硎褂帽砀袷褂每蚣?.4規(guī)劃網(wǎng)頁(yè)型課件布局

5.4.1可視化助理

DreamweaverCS6提供了【標(biāo)尺】和【網(wǎng)格】功能，用于輔助設(shè)計(jì)網(wǎng)頁(yè)文檔?！緲?biāo)尺】功能可以輔助測(cè)量、組織和規(guī)劃布局。【網(wǎng)格】功能可以使絕對(duì)定位的網(wǎng)頁(yè)元素在移動(dòng)時(shí)自動(dòng)靠齊網(wǎng)格，還可以通過(guò)指定網(wǎng)格設(shè)置更改網(wǎng)格或控制靠齊行為。5.4.2使用表格

表格是網(wǎng)頁(yè)中非常重要的元素，是網(wǎng)頁(yè)排版的主要手段，可以幫助設(shè)計(jì)者高效、準(zhǔn)確地定位各種網(wǎng)頁(yè)數(shù)據(jù)，直觀、鮮明地表達(dá)設(shè)計(jì)者的思想，向?yàn)g覽者提供條理清晰的多樣化信息。5.4.3使用框架

框架是將瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)，并且各個(gè)框架之間不存在干擾，在網(wǎng)頁(yè)模板出現(xiàn)之前，框架技術(shù)是最常用的布局網(wǎng)頁(yè)工具之一。在對(duì)Dreamweaver

CS6有了一定的認(rèn)識(shí)并掌握了網(wǎng)頁(yè)的布局方法后，就可以在網(wǎng)頁(yè)型課件中插入各種媒體元素了，包括文本、動(dòng)畫、視頻、聲音等。插入文本插入圖像應(yīng)用導(dǎo)航條插入Flash動(dòng)畫插入聲音5.5在課件中插入媒體元素

5.5.1插入文本

文本是網(wǎng)頁(yè)中最常見(jiàn)也是運(yùn)用最廣泛的元素之一，是網(wǎng)頁(yè)內(nèi)容的核心部分。在DreamweaverCS6中可以直接輸入文本，也可以從其他文檔中復(fù)制文本和導(dǎo)入文本。5.5.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ò)圖像)。5.5.3應(yīng)用導(dǎo)航條

導(dǎo)航條是由一個(gè)或多個(gè)圖像組成，它的顯示隨著動(dòng)作的改變而改變，它就像圖書目錄一樣，在瀏覽網(wǎng)站時(shí)起到指引方向的作用，能夠快速地找到所需的內(nèi)容。5.5.4插入Flash動(dòng)畫

Flash動(dòng)畫是網(wǎng)頁(yè)上最流行的動(dòng)畫格式。在DreamweaverCS6中，F(xiàn)lash動(dòng)畫也是最常用的多媒體插件之一，它將聲音、圖像和動(dòng)畫等內(nèi)容加入到一個(gè)文件中并能制作較好的動(dòng)畫效果，同時(shí)使用了優(yōu)化的算法將多媒體數(shù)據(jù)進(jìn)行壓縮，使文件變得很小，因此，非常適合在網(wǎng)上傳播。5.5.5插入聲音

在網(wǎng)頁(yè)型課件中插入聲音可以使課件聲情并茂，插入的聲音既可以在網(wǎng)頁(yè)中通過(guò)控制按鈕播放，又可以作為網(wǎng)頁(yè)的背景音樂(lè)。超鏈接是網(wǎng)頁(yè)中至關(guān)重要的元素之一，它可以實(shí)現(xiàn)頁(yè)面之間的互相跳轉(zhuǎn)，從而有機(jī)地將網(wǎng)站中的每個(gè)頁(yè)面聯(lián)系起來(lái)。超鏈接的分類絕對(duì)和相對(duì)路徑創(chuàng)建超鏈接的方法5.6在課件中使用超鏈接

5.6.1超鏈接的分類

在DreamweaverCS6中，可以創(chuàng)建下列幾種類型的鏈接。5.6.2絕對(duì)和相對(duì)路徑

從作為鏈接起點(diǎn)的文檔到作為鏈接目標(biāo)的文檔之間的文件路徑，對(duì)于創(chuàng)建鏈接至關(guān)重要。一般來(lái)說(shuō)，鏈接路徑可以分為絕對(duì)路徑與相對(duì)路徑兩類。5.6.3創(chuàng)建超鏈接的方法

在DreamweaverCS6中，可以隨時(shí)隨地在所需的位置創(chuàng)建各種超級(jí)鏈接，并且可以通過(guò)多種方法來(lái)創(chuàng)建超鏈接，可以在【屬性】面板中創(chuàng)建、使用菜單命令創(chuàng)建或使用【指向文件】圖標(biāo)來(lái)創(chuàng)建超鏈接。網(wǎng)頁(yè)型課件制作完成后，設(shè)計(jì)者需要將該課件發(fā)布到WWW服務(wù)器上，才能讓因特網(wǎng)上的其他用戶瀏覽到課件的效果。本節(jié)主要來(lái)介紹如何測(cè)試和管理要發(fā)布的課件站點(diǎn)。測(cè)試