課件的制作與實(shí)現(xiàn)

計(jì)算機(jī)輔助教學(xué)理論與實(shí)踐課件的制作與實(shí)現(xiàn)第6章下一頁(yè)上一頁(yè)結(jié)束

*XXXXXXXXXXXXXXXXXX目錄6.1課件的編輯與制作

6.1.1程序設(shè)計(jì)語(yǔ)言6.1.2課件寫作語(yǔ)言6.1.3課件制作工具6.1.4多媒體著作系統(tǒng)6.1.5常用的課件寫作工具下一頁(yè)上一頁(yè)結(jié)束6.2制作工具的評(píng)價(jià)與選用

6.2.1基本要求

6.2.2評(píng)價(jià)及選用

第6章課件的制作與實(shí)現(xiàn)

*XXXXXXXXXXXXXXXXXX目錄6.3電子教案制作工具——PowerPoint6.3.1創(chuàng)建演示文稿6.3.2文本處理6.3.3插入圖片6.3.4聲音媒體6.3.5插入Flash動(dòng)畫6.3.6影片媒體6.3.7幻燈片切換6.3.8添加動(dòng)畫效果6.3.9演示文稿打包下一頁(yè)上一頁(yè)結(jié)束第6章課件的制作與實(shí)現(xiàn)

*XXXXXXXXXXXXXXXXXX目錄6.4二維動(dòng)畫制作軟件Flash6.4.1工作區(qū)簡(jiǎn)介6.4.2Flash中的基本概念6.4.3圖形的編輯6.4.4簡(jiǎn)單的動(dòng)畫設(shè)計(jì)6.4.5帶有簡(jiǎn)單動(dòng)作腳本的動(dòng)畫設(shè)計(jì)下一頁(yè)上一頁(yè)結(jié)束第6章課件的制作與實(shí)現(xiàn)

*XXXXXXXXXXXXXXXXXX目錄6.5移動(dòng)課件制作技術(shù)—HTML56.5.1移動(dòng)課件制作技術(shù)—HTML56.5.2HTML5屬性概要6.5.3Web頁(yè)面的實(shí)現(xiàn)6.5.4HTML5腳本6.5.5在HTML5中使用視頻6.5.6在HTML5中使用音頻6.5.7在HTML5中實(shí)現(xiàn)拖放6.5.8在HTML5中繪圖6.5.9一個(gè)簡(jiǎn)單的移動(dòng)課件示例下一頁(yè)上一頁(yè)結(jié)束第6章課件的制作與實(shí)現(xiàn)第6章課件的制作與實(shí)現(xiàn)下一頁(yè)上一頁(yè)結(jié)束

如何將腳本轉(zhuǎn)換成可在計(jì)算機(jī)上運(yùn)行的課件，是本節(jié)所要講述的問(wèn)題。目前常用的課件制作工具可分為四類：程序設(shè)計(jì)語(yǔ)言；課件寫作語(yǔ)言；課件制作工具和制作多媒體著作系統(tǒng)。6.1課件的編輯與制作XXXXXXXXXXXXXXXXXX6.1課件的編輯與制作

所謂程序設(shè)計(jì)語(yǔ)言，指的是Java、Jsp、Asp、Php、VC、C#、VisualBasic、VisualFoxPro等。迄今為止，程序設(shè)計(jì)語(yǔ)言已達(dá)千余種之多。下一頁(yè)上一頁(yè)結(jié)束

6.1.1程序設(shè)計(jì)語(yǔ)言XXXXXXXXXXXXXXXXXX6.1課件的編輯與制作

6.1.2課件寫作語(yǔ)言

下一頁(yè)上一頁(yè)結(jié)束

TUTOR、PILOT是國(guó)外早期廣泛流行的寫作語(yǔ)言的代表，課件寫作語(yǔ)言一般都有以下特點(diǎn)：1．表達(dá)方式簡(jiǎn)單易學(xué)；2．提供多種形式的人機(jī)交互形式；3．具有多種匹配及判斷的能力；4．支持多媒體編輯與處理；5．具有專用的課件制作與管理命令；6.具有數(shù)據(jù)庫(kù)管理功能。XXXXXXXXXXXXXXXXXX6.1課件的編輯與制作

所謂課件制作工具是指專門為制作課件（或?qū)ｉT為制作某一學(xué)科的課件）而開(kāi)發(fā)設(shè)計(jì)的工具軟件。這種系統(tǒng)專用性強(qiáng)，使用簡(jiǎn)單，一般都具有學(xué)科特點(diǎn)。下一頁(yè)上一頁(yè)結(jié)束

6.1.3課件制作工具XXXXXXXXXXXXXXXXXX6.1課件的編輯與制作

制作多媒體著作系統(tǒng)又叫多媒體開(kāi)發(fā)環(huán)境，一般由一組實(shí)現(xiàn)各種功能的工具軟件組組成，典型的多媒體著作系統(tǒng)由媒體編輯處理工具、多媒體集成工具、作品演播環(huán)境等幾部分構(gòu)成。媒體編輯處理工具主要完成對(duì)課件制作中所要用到的媒體素材進(jìn)行采集、編輯等處理工作，使媒體素材達(dá)到課件制作的需要。媒體編輯處理工具可分為：文本編輯、圖形/圖象編輯、聲音編輯、動(dòng)畫制作、視頻采集與編輯等幾類。下一頁(yè)上一頁(yè)結(jié)束

6.1.4多媒體著作系統(tǒng)XXXXXXXXXXXXXXXXXX6.1課件的編輯與制作

6.1.5常用的課件寫作工具下一頁(yè)上一頁(yè)結(jié)束

目前創(chuàng)作課件的工具很多，但大致可分為五種主要類型。1．幀頁(yè)型2．圖標(biāo)型3．時(shí)序型4．網(wǎng)頁(yè)制作型5．程序型XXXXXXXXXXXXXXXXXX6.2制作工具的評(píng)價(jià)與選用

對(duì)于課件制作者來(lái)說(shuō)，懂得如何對(duì)寫作工具進(jìn)行評(píng)價(jià)是十分重要的，常言道“磨刀不誤砍柴工”，只有學(xué)會(huì)了對(duì)寫作工具進(jìn)行評(píng)價(jià)，才能有的放矢的選用更適合自己使用的工具，才能多快好省地開(kāi)發(fā)出好的課件來(lái)。下一頁(yè)上一頁(yè)結(jié)束XXXXXXXXXXXXXXXXXX6.2制作工具的評(píng)價(jià)與選用

6.2.1基本要求下一頁(yè)上一頁(yè)結(jié)束

從課件制作的角度來(lái)看，一個(gè)理想的課件制作工具，應(yīng)能滿足以下要求，才能很好的完成課件制作任務(wù)。1．制作出的課件適應(yīng)性強(qiáng)，可應(yīng)用于不同的軟硬件環(huán)境，以便在不同的教學(xué)環(huán)境下使用。2．能很好的表述課件的邏輯結(jié)構(gòu)和教學(xué)思想。3．提供適合教學(xué)需要的交互方式、對(duì)話界面，以適應(yīng)學(xué)生提問(wèn)、練習(xí)及測(cè)驗(yàn)的操作。4．具有數(shù)據(jù)儲(chǔ)存與處理的能力，用于滿足如學(xué)生分?jǐn)?shù)統(tǒng)計(jì)、身份驗(yàn)證、隨機(jī)出題等數(shù)據(jù)處理的要求。6.2制作工具的評(píng)價(jià)與選用5．能靈活控制和改變課件的執(zhí)行順序，按要求跳轉(zhuǎn)到指定的教學(xué)內(nèi)容中，以此實(shí)現(xiàn)因時(shí)、因地、因人施教的教學(xué)原則。6．可以按需要使用不同的媒體進(jìn)行教學(xué)，并有良好的媒體播放與控制能力及同步協(xié)調(diào)能力。7．具有教師與課件同時(shí)表達(dá)教學(xué)內(nèi)容的能力，如提供白版等。8．具有鏈接其它資源及課件的能力。9．具有很好的容錯(cuò)能力，此功能可以很好的避免由于誤操作而引起的教學(xué)故障。10．易學(xué)、易用。對(duì)于不同類型的課件，使用的開(kāi)發(fā)工具的要求也不盡相同。下一頁(yè)上一頁(yè)結(jié)束6.2.1基本要求6.2制作工具的評(píng)價(jià)與選用

從不同的角度評(píng)價(jià)一個(gè)寫作工具，會(huì)得出不同的結(jié)論。而作為課件制作者，其評(píng)價(jià)寫作工具的目的在于選擇更適合自己需要的工具。一般來(lái)說(shuō)，可采取下列方法進(jìn)行評(píng)價(jià)?？砂凑账O(shè)計(jì)課件類型、功能、規(guī)模等因素來(lái)與候選的工具逐個(gè)進(jìn)行評(píng)選，看能否完成設(shè)計(jì)要求。具體的可考慮以下幾點(diǎn)。1．工具的基本特性（1）對(duì)開(kāi)發(fā)支持環(huán)境及課件運(yùn)行環(huán)境的要求；（2）開(kāi)發(fā)工具功能的評(píng)選。下一頁(yè)上一頁(yè)結(jié)束6.2.2評(píng)價(jià)及選用6.2制作工具的評(píng)價(jià)與選用

2.開(kāi)發(fā)者的需求在評(píng)價(jià)選用開(kāi)發(fā)工具時(shí)還應(yīng)從開(kāi)發(fā)者的角度進(jìn)行考慮。如：自身所擁有的開(kāi)發(fā)設(shè)備情況，開(kāi)發(fā)經(jīng)費(fèi)的承受能力，開(kāi)發(fā)隊(duì)伍的知識(shí)結(jié)構(gòu)與素質(zhì)等因素。

3.最終用戶的需求在評(píng)價(jià)與選用開(kāi)發(fā)工具時(shí)還應(yīng)考慮課件最終使用者的因素。如課件的運(yùn)行環(huán)境的要求，使用者的年齡、文化層次、計(jì)算機(jī)操作水平等因素。下一頁(yè)上一頁(yè)結(jié)束6.2.2評(píng)價(jià)及選用XXXXXXXXXXXXXXXXXX6.3電子教案制作工具——PowerPoint

不論哪種工具制作課件，都要符合課件制作的原則，適應(yīng)課堂教學(xué)設(shè)計(jì)的需要，能解決教學(xué)中的實(shí)際問(wèn)題，提高課堂教學(xué)效率。合適的多媒體制作工具往往也是一件成功多媒體課件的關(guān)鍵，制作工具的選擇決定課件開(kāi)發(fā)效率。選擇多媒體制作工具，應(yīng)考慮到編程環(huán)境、超級(jí)鏈接能力、媒體集成能力、動(dòng)畫創(chuàng)作能力、易學(xué)習(xí)性、易使用性、文檔是否豐富等。一般情況下我們不會(huì)選擇一種工具來(lái)開(kāi)發(fā)整個(gè)課件，而是針對(duì)各種情況選擇多種制作工具來(lái)協(xié)作完成。PowerPoint是微軟公司的Office組件之一，目前通用版本為2013，簡(jiǎn)單易用的特點(diǎn)使廣大一線教師非常鐘愛(ài)，大大減少課件開(kāi)發(fā)周期。下一頁(yè)上一頁(yè)結(jié)束6.3電子教案制作工具——PowerPoint6.3.1創(chuàng)建演示文稿

一份演示文稿通常由一張“標(biāo)題”幻燈片和若干張“普通”幻燈片組成。啟動(dòng)PowerPoint2013，選擇“文件”→“新建”命令，出現(xiàn)“新建演示文稿”任務(wù)窗口，它提供了多種創(chuàng)建演示文稿的方法。下一頁(yè)上一頁(yè)結(jié)束圖6-1創(chuàng)建演示文稿6.3電子教案制作工具——PowerPoint6.3.2文本處理

以下幾小節(jié)的內(nèi)容均以小學(xué)語(yǔ)文教學(xué)中的《江雪》為例，介紹演示文稿制作中常用的文本處理方法。下一頁(yè)上一頁(yè)結(jié)束圖6-3輸入標(biāo)題和副標(biāo)題6.3電子教案制作工具——PowerPoint6.3.3插入圖片

插入一張新幻燈片，選擇菜單欄中的“插入”→“圖片”→“來(lái)自文件”命令，打開(kāi)“插入圖片”對(duì)話框，在“查找范圍”下拉列表框中，找到事先準(zhǔn)備好的圖片文件“江雪.jpg”，單擊選中，然后單擊“插入”按鈕。下一頁(yè)上一頁(yè)結(jié)束圖6-7設(shè)置圖片尺寸6.3電子教案制作工具——PowerPoint6.3.4聲音媒體

插入聲音文件。下一頁(yè)上一頁(yè)結(jié)束圖6-8“插入聲音”幻燈片中顯示的聲音文件6.3電子教案制作工具——PowerPoint6.3.5插入Flash動(dòng)畫

幻燈片中插入flash影片，可以形象的說(shuō)明要說(shuō)明的教學(xué)問(wèn)題。下一頁(yè)上一頁(yè)結(jié)束圖6-10PowerPoint選項(xiàng)6.3電子教案制作工具——PowerPoint6.3.6影片媒體

選擇菜單欄中的“插入”→“視頻”→“PC上的視頻”命令，打開(kāi)“插入視頻文件”對(duì)話框，選擇需要的視頻素材，單擊“確定”按鈕。下一頁(yè)上一頁(yè)結(jié)束圖6-14視頻播放屬性框6.3電子教案制作工具——PowerPoint6.3.7幻燈片切換

在PowerPoint2013中，用戶可以分別給每張幻燈片的切換增加動(dòng)畫效果，即由一張幻燈片切換到另一張幻燈片時(shí)，切換效果可以用多種不同的形式將下一張幻燈片顯示到屏幕上。如果演示文稿是一個(gè)有四張幻燈片組成的文件，幻燈片切換操作步驟如下：在第一張幻燈片中，選擇“切換”命令，打開(kāi)如圖6-15所示的“幻燈片切換”窗口。選擇“頁(yè)面卷曲”切換效果。單擊“播放”按鈕可以為當(dāng)前幻燈片設(shè)置這種切換效果，如果希望所有的幻燈片都設(shè)置成這種切換效果，單擊“全部應(yīng)用”按鈕。下一頁(yè)上一頁(yè)結(jié)束圖6-15幻燈片切換6.3電子教案制作工具——PowerPoint6.3.8添加動(dòng)畫效果

所謂動(dòng)畫效果，就是當(dāng)打開(kāi)幻燈片時(shí)，幻燈片中的各個(gè)主要對(duì)象不是一次全部顯示，而是按照某種規(guī)律，以動(dòng)畫的效果逐個(gè)被顯示出來(lái)。在幻燈片中使用動(dòng)畫效果將使演示文稿更生動(dòng)。本例的動(dòng)畫效果設(shè)置步驟如下。執(zhí)行“動(dòng)畫”命令，如圖6-16所示。下一頁(yè)上一頁(yè)結(jié)束圖6-16“動(dòng)畫”任務(wù)窗口6.3電子教案制作工具——PowerPoint6.3.9演示文稿打包

如果播放演示文稿的計(jì)算機(jī)沒(méi)有安裝PowerPoint2013，又沒(méi)有安裝其他播放器，可以在制作演示文稿的計(jì)算機(jī)上，將演示文稿的播放器一并打包，然后拷貝到播放演示文稿的計(jì)算機(jī)中解壓播放。下一頁(yè)上一頁(yè)結(jié)束圖6-18“打包成CD”對(duì)話框XXXXXXXXXXXXXXXXXX6.4二維動(dòng)畫制作軟件Flash

Flash是Macromedia公司推出的一款非常成功的矢量動(dòng)畫制作軟件，同時(shí)也是很優(yōu)秀的網(wǎng)絡(luò)交互動(dòng)畫制作工具。它不僅能制作出很多特殊的動(dòng)畫效果，還能配合Dreamweaver、Fierworks等網(wǎng)頁(yè)開(kāi)發(fā)軟件制作出精美的網(wǎng)頁(yè)畫面，很多優(yōu)秀的教學(xué)課件、網(wǎng)絡(luò)動(dòng)畫、網(wǎng)頁(yè)都是用flash制作的。Flash從推出到現(xiàn)在經(jīng)歷了很多不同的版本，在此以AdobeFlashCS6為例，介紹一下其主要功能的應(yīng)用。下一頁(yè)上一頁(yè)結(jié)束6.4二維動(dòng)畫制作軟件Flash6.4.1工作區(qū)簡(jiǎn)介

安裝完成AdobeFlashCS6以后，可以在Windows的“開(kāi)始”菜單中將其啟動(dòng)，進(jìn)入AdobeFlashCS6的工作界面，如圖6-19所示：下一頁(yè)上一頁(yè)結(jié)束圖6-19AdobeFlashCS6工作界面6.4二維動(dòng)畫制作軟件Flash6.4.2Flash中的基本概念

1.幀幀是動(dòng)畫播放的基本單位，每一個(gè)動(dòng)畫都是由多個(gè)幀組成的，每個(gè)幀代表一個(gè)動(dòng)作，幀頻可以改變每秒鐘幀的數(shù)量，一般默認(rèn)為12幀每秒。幀可分為兩種類型，普通幀和關(guān)鍵幀，其中關(guān)鍵幀又可分為空白關(guān)鍵幀和有內(nèi)容的關(guān)鍵幀。

2.圖層圖層就像繪畫時(shí)使用的透明的紙，幾個(gè)圖層疊加在一起，透過(guò)沒(méi)有繪畫的區(qū)域，可以看到下面圖層中所繪制的對(duì)象，上面圖層的對(duì)象會(huì)遮擋住下面圖層的對(duì)象。下一頁(yè)上一頁(yè)結(jié)束6.4二維動(dòng)畫制作軟件Flash6.4.2Flash中的基本概念

3.元件元件是一個(gè)可以重復(fù)使用的小部件，它可以獨(dú)立于主動(dòng)畫進(jìn)行播放，在一定意義上說(shuō)，它也是一個(gè)小動(dòng)畫。

4.庫(kù)在Flash中，庫(kù)是存放各種對(duì)象的集合，其中包括創(chuàng)建的各種元件和從外部導(dǎo)入的各種圖形對(duì)象等。下一頁(yè)上一頁(yè)結(jié)束6.4二維動(dòng)畫制作軟件Flash6.4.3圖形的編輯

常用工具如下：線條工具鉛筆工具橢圓工具和矩形工具任意變形工具下一頁(yè)上一頁(yè)結(jié)束鋼筆工具6.4二維動(dòng)畫制作軟件Flash6.4.4簡(jiǎn)單的動(dòng)畫設(shè)計(jì)1．變形動(dòng)畫下一頁(yè)上一頁(yè)結(jié)束2．引導(dǎo)動(dòng)畫3．遮罩動(dòng)畫6.4二維動(dòng)畫制作軟件Flash6.4.5帶有簡(jiǎn)單動(dòng)作腳本的動(dòng)畫設(shè)計(jì)

ActionScript語(yǔ)句是Flash中提供的一種動(dòng)作腳本語(yǔ)言，它具備了強(qiáng)大的交互功能，能夠提供動(dòng)畫與用戶之間的交互，并使得用戶對(duì)動(dòng)畫元件的控制得到加強(qiáng)。通過(guò)對(duì)其中相應(yīng)的語(yǔ)句進(jìn)行調(diào)用，使Flash實(shí)現(xiàn)了一些特殊的功能。如對(duì)動(dòng)畫的播放和停止進(jìn)行控制、控制動(dòng)畫中的音效、指定鼠標(biāo)動(dòng)作、制作游戲和創(chuàng)建交互的網(wǎng)頁(yè)等。下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML5

HTML是英文HyperTextMarkupLanguage的縮寫，中文含義是“超文本標(biāo)志語(yǔ)言”，是一種建立網(wǎng)頁(yè)文件的語(yǔ)言，其透過(guò)標(biāo)記式的指令(Tag)，將文字、圖片、聲音、影像等連結(jié)顯示出來(lái)，通過(guò)瀏覽器解釋瀏覽。HTML5是由W3C（WorldWideWebConsortium）起草制定的HTML第5版標(biāo)準(zhǔn)。下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.1HTML5元素

以下是一個(gè)基本HTML文檔結(jié)構(gòu):<html><body><p>這是一個(gè)段落。</p></body></html>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.2HTML5屬性概要

1.文本<h1align="center">這是顯示位置居中字體大小級(jí)別為1的標(biāo)題</h1><palign="left">這段文字是左對(duì)齊</p><h2style="background-color:red">背景顏色為紅色的標(biāo)題</h2><pstyle="background-color:green">背景顏色為綠色的一段文字</p><pstyle="font-family:仿宋;color:red;font-size:20px;">一段文字</p><ahref="/"target="_blank">百度</a>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.2HTML5屬性概要2.背景頁(yè)面背景顏色（Bgcolor）設(shè)置為黑色：<bodybgcolor="#000000">背景（Background）設(shè)置為圖片：<bodybackground="clouds.gif">下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.2HTML5屬性概要3.表格下面是一個(gè)簡(jiǎn)單表格的HTML5程序：<tableborder="1"><tr><td>第1行，第1列</td><td>第1行，第2列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td></tr><tr><td>第3行，第1列</td><td>第3行，第2列</td></tr></table>下一頁(yè)上一頁(yè)結(jié)束在瀏覽器顯示如圖6-51所示：

圖6-51表格6.5移動(dòng)課件制作技術(shù)—HTML56.5.3Web頁(yè)面的實(shí)現(xiàn)

下面是使用HTML5編寫的一個(gè)簡(jiǎn)單Web頁(yè)面的程序

<!DOCTYPEHTML><html><head><METAcharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-

scale=1">

<basehref="/"target="_blank"/>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.3Web頁(yè)面的實(shí)現(xiàn)

<TITLE>HTML5頁(yè)面</TITLE><styletype="text/css">a{padding:16px;font-size:20px;text-decoration:none;}a:hover{border:solid1px#ccc;background-color:#eee;}</style></head>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.3Web頁(yè)面的實(shí)現(xiàn)

<body><palign="center">我的網(wǎng)頁(yè)課件制作</p><ahref="index.html">測(cè)試頁(yè)面</a></body></html>該頁(yè)面在安卓系統(tǒng)手機(jī)中瀏覽器下執(zhí)行的頁(yè)面效果如圖6-52所示。下一頁(yè)上一頁(yè)結(jié)束圖6-52頁(yè)面效果6.5移動(dòng)課件制作技術(shù)—HTML56.5.4HTML5腳本

在新建的頁(yè)面中增加一個(gè)文本框“txtContent”和一個(gè)按鈕“請(qǐng)點(diǎn)擊我”；當(dāng)單擊按鈕時(shí)，通過(guò)頁(yè)面中加入的JavaScript腳本代碼獲取文本框中的內(nèi)容，并且顯示在瀏覽頁(yè)面中，其代碼如下：下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.4HTML5腳本

<scripttype="text/javascript"async="true">functionBtn_Click(){varstrTxt=document.getElementById("txtContent").value;varstrDiv=document.getElementById("divShow");strDiv.style.display="block";strDiv.innerHTML="您輸入的字符是："+strTxt;}</script>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.4HTML5腳本

頁(yè)面效果如圖6-53所示。下一頁(yè)上一頁(yè)結(jié)束圖6-53頁(yè)面效果6.5移動(dòng)課件制作技術(shù)—HTML56.5.5在HTML5中使用視頻

網(wǎng)頁(yè)中的視頻，大多數(shù)是通過(guò)插件（比如Flash）來(lái)顯示的，然而，并非所有的瀏覽器或者智能終端都擁有同樣的插件。HTML5的出現(xiàn)很好的解決了這一問(wèn)題。

HTML5規(guī)定了一種通過(guò)video元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。video元素支持三種視頻格式：Ogg、MPEG4和WebM。在HTML5中顯示視頻代碼如下：<videosrc="movie.ogg"width="320"height="240"controls="controls">您的瀏覽器不支持video元素。</video>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.6在HTML5中使用音頻

在瀏覽的網(wǎng)頁(yè)時(shí)，大多數(shù)音頻是通過(guò)插件（比如Flash）來(lái)播放的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過(guò)audio元素來(lái)表現(xiàn)音頻的標(biāo)準(zhǔn)方法。

audio元素能夠播放聲音文件或者音頻流。audio元素支持三種音頻格式：OggVorbis、MP3和Wav。播放音頻的語(yǔ)句格式為：<audiosrc="song.ogg"controls="controls">下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.7在HTML5中實(shí)現(xiàn)拖放

在HTML5中，任何元素都能夠拖放。拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。一般來(lái)說(shuō)InternetExplorer9、Firefox、Opera12、Chrome10和Safari5等瀏覽器及以上版本支持拖放。以下為一個(gè)簡(jiǎn)單的拖放實(shí)例的源程序：<!DOCTYPEHTML><html><head><styletype="text/css">#div1{width:600px;height:200px;padding:10px;border:1pxsolid#001100;}</style>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.7在HTML5中實(shí)現(xiàn)拖放<title>拖放</title><scripttype="text/javascript">functionallowDrop(ev){ev.preventDefault();}functiondrag(ev){ev.dataTransfer.setData("Text",ev.target.id);}下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.7在HTML5中實(shí)現(xiàn)拖放functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div><imgid="drag1"src="img.jpg"draggable="true"ondragstart="drag(event)"width="336"height="69"/></body></html>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.7在HTML5中實(shí)現(xiàn)拖放下一頁(yè)上一頁(yè)結(jié)束圖6-54拖放頁(yè)面效果

瀏覽效果如圖6-54所示，選擇圖片可將其拖動(dòng)到矩形框中。6.5移動(dòng)課件制作技術(shù)—HTML56.5.8在HTML5中繪圖

1.canvas元素繪圖<canvasid="myCanvas"width="200"height="100"></canvas>

（1）繪制矩形腳本<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,120,60);</script>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.8在HTML5中繪圖下一頁(yè)上一頁(yè)結(jié)束圖6-55矩形框效果繪制效果如圖6-55所示。6.5移動(dòng)課件制作技術(shù)—HTML56.5.8在HTML5中繪圖

1.canvas元素繪圖（2）繪制線條腳本通過(guò)指定從何處開(kāi)始，在何處結(jié)束，來(lái)繪制線條，JavaScript代碼如下：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>下一頁(yè)上一頁(yè)結(jié)束6.5移動(dòng)課件制作技術(shù)—HTML56.5.8在HTML5中繪圖

1.canvas元素繪圖（2）繪制線條腳本canvas元素：<canvasid="myCanvas"width="400"height="200"style="border:1pxsolid#c0c0c0;">您的瀏覽器不支持canvas元素。</canvas>繪制效果如圖6-56所示。下一頁(yè)上一頁(yè)結(jié)束

圖6-56線條效果6.5移動(dòng)課件制作技術(shù)—HTML56.5.8在HTML5中繪圖

1.canvas元素繪圖（3）繪制圓形腳本通過(guò)規(guī)定尺寸、顏色和位置，來(lái)繪制圓形，JavaScript代碼如下：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>下一頁(yè)上一頁(yè)結(jié)束