多媒體CAI課件制作基礎(chǔ)教程(第三版)課件 第06章_使用Dreamweaver_CS3制作網(wǎng)頁型課件

第6章 使用Dreamweaver CS3制作網(wǎng)頁型課件,隨著網(wǎng)絡(luò)的興起和發(fā)展，網(wǎng)絡(luò)課件已成為日常教學工作不可分割的一部分。而Macromedia公司的Dreamweaver CS3順應(yīng)時代潮流，以其可以精確控制網(wǎng)頁元素的HTML語言和所見即所得的編輯環(huán)境的完美組合成為眾多網(wǎng)絡(luò)課件設(shè)計工具的首選。網(wǎng)頁型課件與傳統(tǒng)課件相比，具有占用存儲空間小，易于在網(wǎng)上傳輸、流通，易于共享等特點。網(wǎng)頁型課件能夠容納大量信息，能兼容多種素材的文件格式，并且是一個開放的體系，有利于對課件進行修改、增添和刪除。 通過對本章的學習，讀者應(yīng)了解并掌握Dreamweaver CS3的功能特點和基本使用方法，并且能夠應(yīng)用該軟件制作出圖文并茂的多媒體CAI課件 。,6.1 多媒體與多媒體技術(shù),隨著課堂教學的不斷變革，傳統(tǒng)的理論講述已經(jīng)不能適應(yīng)現(xiàn)代的課堂教學。網(wǎng)絡(luò)課件的出現(xiàn)，擺脫了教材生硬的面孔，這種由文本、圖形、動畫、聲音、視頻等多種媒體信息組合在一起，經(jīng)過加工和處理所形成的教學系統(tǒng)，圖文聲像并茂，表現(xiàn)力和感染力極強， 使學習過程變得輕松愉快 。 網(wǎng)絡(luò)課件具有以下優(yōu)點。 共享性：一個網(wǎng)絡(luò)課件可以同時供很多人使用。例如：學?？梢詫⒕W(wǎng)絡(luò)課件放到校園網(wǎng)上，這樣所有連接校園網(wǎng)的教室都可以同時使用這些課件。 易用性：通過瀏覽器直接使用，方式簡單統(tǒng)一。 交互性：人機交互、人與人即學習者與學習者、學習者與教師之間的交互，還可以通過論壇、留言本、電子信箱、新聞組、博客等手段進行交互。 開放性：設(shè)計幾種情境模式，讓不同水平的學生按各自的要求，進行相應(yīng)的學習。 方便性：通過動態(tài)的后臺管理，教師增減內(nèi)容，調(diào)用資源方便、快捷。,6.2 Dreamweaver CS3工作界面,Dreamweaver CS3是美國Macromedia公司出品的一款網(wǎng)頁編輯工具，它集網(wǎng)頁制作和網(wǎng)站管理于一身，是專門為網(wǎng)頁設(shè)計者開發(fā)的可視化網(wǎng)頁編輯工具。利用它設(shè)計的網(wǎng)頁可以跨越平臺和瀏覽器限制，使得它也成為目前最受歡迎的工具軟件之一 。 文檔視圖 插入欄 文檔工具欄 屬性面板 其他界面元素,6.2.1 文檔視圖,文檔窗口顯示當前文檔，可以選擇下列任一視圖。 設(shè)計視圖：用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境。在該視圖中，Dreamweaver CS3顯示文檔的完全可編輯的可視化表 示形式，類似于在瀏覽器中查看頁面時看到的內(nèi)容。 代碼視圖：用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼(如 PHP 或 ColdFusion標記語言)以及任何其他類型代碼的手工編碼環(huán)境。 代碼和設(shè)計視圖：用于在單個窗口中同時看到同一文檔的代碼視圖和設(shè)計視圖 。,6.2.2 插入欄,選擇插入工具欄中相應(yīng)的命令，可以向網(wǎng)頁中添加文字、圖像、表格、按鈕、導航以及程序等各種設(shè)計元素。根據(jù)類別不同，“插入”工具欄由 “常用”、“布局”、“表單”、“數(shù)據(jù)”、Spry、“文本”和“收藏夾”組成 。,6.2.3 文檔工具欄,“文檔”工具欄中主要包含了一些對文檔進行常用操作的功能按鈕，用戶通過單擊這些按鈕可以在文檔的不同視圖模式間進行快速切換，如圖6-9所示 。,6.2.4 屬性面板,屬性面板用于檢查和編輯當前選定頁面元素(如文本和插入的對象等)的最常用屬性，如圖6-10所示 。,6.2.5 其他界面元素,在Dreamweaver CS3的工作界面中，還包括狀態(tài)欄、標簽選擇器和面板組等一些比較常用的界面元素。 狀態(tài)欄位于文檔窗口的底部，它的作用是提供與用戶正在編輯的文檔有關(guān)的某些信息，如當前窗口大小、文檔大小和估計下載時間等。狀態(tài)欄時刻顯示著當前文檔窗口的尺寸(以像素為單位)，用戶也可以單擊“窗口大小”按鈕，在打開的“窗口大小”菜單中將文檔窗口的大小調(diào)整到預(yù)定義或自定義尺寸 。,6.3 站點的創(chuàng)建和管理,使用Dreamweaver制作網(wǎng)絡(luò)課件最常用的方法就是在用戶的本地磁盤上創(chuàng)建并編輯頁面，然后將這些頁面上傳到一個遠程Web服務(wù)器供公眾訪問。通常，在編輯頁面之前首先要創(chuàng)建站點 。 創(chuàng)建站點 管理站點,6.3.1 創(chuàng)建站點,站點是一系列具有相關(guān)主題、相似設(shè)計的文檔的組合。Dreamweaver CS3是一個站點創(chuàng)建和管理工具，使用它不僅可以創(chuàng)建單獨的文檔，還可以創(chuàng)建完整的Web站點。 創(chuàng)建Web站點的第一步是規(guī)劃，為了達到最佳效果，在創(chuàng)建任何Web站點之前，應(yīng)對站點的結(jié)構(gòu)進行設(shè)計和規(guī)劃。決定要創(chuàng)建多少頁面，每個頁面顯示什么內(nèi)容，頁面布局的外觀以各頁面之間的鏈接關(guān)系 。,6.3.2 管理站點,當站點創(chuàng)建完成后，文件面板將顯示當前站點的新本地根文件夾，也就是剛剛創(chuàng)建的Net Courseware站點，如圖6-16所示 。,6.4 文檔的處理,文檔的處理是網(wǎng)絡(luò)課件制作中的基本操作，它包括打開和編輯文檔，設(shè)置文檔屬性、定義文檔標題等內(nèi)容 。 文檔的基本操作 在文檔中插入對象 文本格式化操作 使用可視化向?qū)гO(shè)計網(wǎng)頁,6.4.1 文檔的基本操作,文檔是頁面基本元素的集合。文檔的基本操作包括創(chuàng)建新文檔、打開現(xiàn)有文檔、保存文檔 。 創(chuàng)建新文檔 打開已有文檔 保存文檔,6.4.2 在文檔中插入對象,在文檔中可以使用菜單插入對象，也可以使用插入欄實現(xiàn)。 1. 使用菜單插入對象 以插入圖像為例，可以通過以下步驟在文檔中插入對象： (1) 選擇“插入”“圖像”命令，打開“選擇圖像源文件”對話框，在對話框中指定要插入圖像的位置和名稱。 (2) 單擊“確定”按鈕，即可將Dreamweaver CS3所允許格式的圖像插入到當前文檔窗口插入點所在的位置。 2. 使用插入欄插入對象 選擇“窗口”“插入”命令，可以打開或關(guān)閉插入欄，前面已經(jīng)介紹過，常用的插入欄有8種類型。 以插入圖像為例，步驟如下：選擇“常用”插入欄，單擊插入欄中的“圖像”按鈕，打開“選擇圖像源文件”對話框，后面的步驟與使用菜單插入過程相同，不再贅述 。,6.4.3 文本格式化操作,文本是網(wǎng)頁中重要的內(nèi)容。良好的文本格式，能夠很好地體現(xiàn)文本的層次，激發(fā)讀者的閱讀興趣。在文檔中構(gòu)建豐富的字體、多種的段落格式以及賞心悅目的文本效果，對于課件制作是必不可少的要求。 在Dreamweaver CS3中，文本的格式化操作非常簡單，Dreamweaver就像一個普通的字處理程序一樣，用戶幾乎憑借直覺，就可以完成對文本的格式化操作 。,6.4.4 使用可視化向?qū)гO(shè)計網(wǎng)頁,Dreamweaver CS3提供了3種可視化向?qū)В糜谳o助用戶設(shè)計網(wǎng)頁和估計網(wǎng)頁在瀏覽器中的外觀，分別是“標尺”、“網(wǎng)格”和“跟蹤圖像” 。 使用“標尺”和“網(wǎng)格” 使用跟蹤圖像,6.5 網(wǎng)頁布局,網(wǎng)絡(luò)課件精彩與否的因素是什么呢？色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，除了這些，還有一個非常重要的因素 網(wǎng)頁布局。Dreamweaver CS3提供了多種方法來創(chuàng)建和控制網(wǎng)頁布局，包括使用表格布局頁面、使用框架布局頁面和使用層布局頁面 。 網(wǎng)頁布局基礎(chǔ) 創(chuàng)建基于表格的頁面布局 創(chuàng)建基于框架的頁面布局 創(chuàng)建基于層的頁面,6.5.1 網(wǎng)頁布局基礎(chǔ),一開始，網(wǎng)頁呈現(xiàn)在設(shè)計者面前的時候，它就像一張白紙，可以任意發(fā)揮設(shè)計者的才思和創(chuàng)意。不過要明白，雖然可以控制一切能控制的東西，但假如設(shè)計者忽略一種約定俗成的標準或者不能符合大多數(shù)訪問者的瀏覽習慣，那么這樣的網(wǎng)頁布局無疑是失敗的 。,6.5.2 創(chuàng)建基于表格的頁面布局,在Dreamweaver CS3中，表格有標準模式、擴展模式及布局模式3種模式。標準模式是最基本的表格模式；擴展模式是標準模式的擴充，在這種模式下用戶可以方便地選擇表格進行編輯；布局模式是Dreamweaver CS3為方便頁面布局而專門設(shè)計的一種模式，與前兩種模式相比，這種模式下表格和單元格邊框是沒有寬度的 。,6.5.3 創(chuàng)建基于框架的頁面布局,使用框架可以方便地實現(xiàn)網(wǎng)頁的定位，與其他定位方式不同的是，使用框架可以將一個瀏覽器窗口劃分為多個區(qū)域，在每個區(qū)域都可以顯示不同的HTML文檔。 框架實際上由兩部分組成，即框架與框架集。框架就是網(wǎng)頁中被分割開的各個部分，每個部分都是一個完整的HTML網(wǎng)頁。網(wǎng)頁中的各個框架組成框架集，框架集實際也是一個HTML文檔，用于定義文檔中框架的結(jié)構(gòu)、數(shù)量、尺寸及裝入框架的頁面文件，所以框架集并不顯示在瀏覽器中，只是存儲了一些框架如何顯示的信息。就如圖6-37所示的框架而言，其中就包含了框架集與3個框架，因此，與之對應(yīng)的HTML文檔也就有4個 。,6.5.4 創(chuàng)建基于層的頁面,使用圖層可以將頁面上的元素精確定位，圖層中可以加入文本、圖片、表格、插件，也可以在其中嵌套另一個圖層。層與層之間相互獨立，互不干擾。 在Dreamweaver CS3中，可以通過在網(wǎng)頁文檔中新建層，然后將頁面元素放置于層中的方式，精確定位插入的頁面元素，并可以控制元素的上下順序、顯示或隱藏，還可利用時間軸同時在屏幕上移動一個或多個層 。,6.6 使用超鏈接,超鏈接是網(wǎng)絡(luò)課件制作中的重要內(nèi)容，一個網(wǎng)絡(luò)課件有了合理的超鏈接才能使課件功能分布更合理，整體效率更高 。 超鏈接基礎(chǔ) 創(chuàng)建超鏈接,6.6.1 超鏈接基礎(chǔ),超鏈接與URL(每個網(wǎng)頁惟一的一個地址，稱作統(tǒng)一資源定位器 URL)以及網(wǎng)頁文件的存放路徑是緊密相關(guān)的。定義超鏈接其實就是指定一個URL地址來訪問它指向的Internet資源。一般來說，超鏈接路徑可分為絕對路徑和相對路徑兩類 。 URL 絕對路徑 相對路徑,6.6.2 創(chuàng)建超鏈接,Dreamweaver CS3可以為文本、圖像、聲音文件等創(chuàng)建超鏈接，以鏈接到其他文檔或文件。當在本地站點內(nèi)移動或重命名文檔或其他鏈接文件時，Dreamweaver 可自動更新指向文檔的鏈接 。 創(chuàng)建鏈接的類型和方法 創(chuàng)建網(wǎng)頁間超鏈接 創(chuàng)建網(wǎng)頁內(nèi)超鏈接 創(chuàng)建電子郵件鏈接 創(chuàng)建空鏈接和腳本鏈接 創(chuàng)建圖形熱點鏈接,6.7 向網(wǎng)頁中添加內(nèi)容,在完成了頁面布局、網(wǎng)頁之間的鏈接關(guān)系后，就需要將文字、圖像、聲音、視頻等多種素材添加到課件中。 通過Dreamweaver CS3“插入”菜單中的命令，或插入欄中的“常用”類別工具欄的“圖像”和“媒體”等按鈕，可以把多種素材添加到網(wǎng)頁中，充實網(wǎng)絡(luò)課件的內(nèi)容 。 插入文本和圖像 添加聲音和視頻 添加Flash媒體對象 添加表單對象,6.7.1 插入文本和圖像,網(wǎng)頁型課件中，文本和圖像是最基本的組成元素。使用文字可以很好地表達課件的層次和重點；使用圖像可以生動地傳達用文字無法體現(xiàn)的內(nèi)容。使用文本和圖像可以直觀地開展教學，突出講課的重點 。,6.7.2 添加聲音和視頻,在網(wǎng)頁課件中適當?shù)丶尤肼曇簦绫尘耙魳?、課文朗讀等，會使整個課件更活潑。視頻文件既有聲音又有圖像，具有很強的表現(xiàn)力，對于觀賞性、操作性很強的科目，在課件中適當?shù)厥褂靡曨l會起到很好的教學效果 。 添加聲音 添加視頻,6.7.3 添加Flash媒體對象,在以前的Dreamweaver版本中，在網(wǎng)頁上只能插入Flash動畫和按鈕，而且動畫本身與所在頁面并沒有什么直接關(guān)系，要使動畫具有交互性也必須在制 作動畫時就做好，還需要有一定的編程經(jīng)驗以及XML語言知識。而在 Dreamweaver CS3中，只需設(shè)置一些參數(shù)就可以實現(xiàn)動態(tài)交互的Flash動畫效果 。 添加Flash文本 插入Flash按鈕 制作網(wǎng)頁動畫,6.7.4 添加表單對象,表單是Internet用戶與服務(wù)器進行信息交流的重要工具，在網(wǎng)頁中有著廣泛的應(yīng)用，如留言板、搜索引擎、注冊程序等。通常，一個表單中會包含多個對象，也稱為控件。一個完整的表單包括表單對象和應(yīng)用程序兩個基本組件。其中，表單對象在網(wǎng)頁中起描