PAGE1PAGE第11章jQuery在HTML5中的應(yīng)用課程名稱jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程項(xiàng)目名稱jQuery在HTML5中的應(yīng)用任務(wù)名稱jQuery在HTML5中的應(yīng)用課時(shí)5項(xiàng)目性質(zhì)□演示性□驗(yàn)證性□設(shè)計(jì)性√綜合性授課班級(jí)授課日期授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)1.了解HTML5的新特性。2.了解瀏覽器對(duì)HTML5的支持。3.掌握jQuery與HTML編程的常用功能。能力目標(biāo)1.能夠熟練使用HTML5能力。2.能夠熟練使用jQuery與HTML5的編程能力。素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生綜合應(yīng)用的能力。2.培養(yǎng)學(xué)生知識(shí)學(xué)習(xí)的能力。教學(xué)內(nèi)容1.任務(wù)描述2.任務(wù)展示與實(shí)現(xiàn)（1）使用HTML5+jQuery實(shí)現(xiàn)文件上傳進(jìn)度條的顯示（2）使用HTML5+jQuery實(shí)現(xiàn)圖片旋轉(zhuǎn)效果（3）使用jQuery插件在HTML5中實(shí)現(xiàn)聲音播放（4）學(xué)生動(dòng)手操作3.教師講解本任務(wù)涉及的知識(shí)點(diǎn)4.任務(wù)小結(jié)教學(xué)重點(diǎn)1.HTML5的基礎(chǔ)知識(shí)2.如何在網(wǎng)站開(kāi)發(fā)中綜合使用jQuery+HTML53.編寫jQuery代碼教學(xué)難點(diǎn)1.如何在網(wǎng)站開(kāi)發(fā)中綜合使用jQuery+HTML5教學(xué)準(zhǔn)備1.裝有jQuery的電腦2.教學(xué)課件PPT3.教材：《jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程》作業(yè)設(shè)計(jì)1．綜合實(shí)例：旅游信息網(wǎng)前臺(tái)頁(yè)面設(shè)計(jì)教學(xué)過(guò)程教學(xué)內(nèi)容與過(guò)程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）做好課前“5分鐘”教學(xué)管理（多媒體、實(shí)訓(xùn)室），做好上課前的各項(xiàng)準(zhǔn)備工作（打開(kāi)電腦、打開(kāi)課件、打開(kāi)軟件、打開(kāi)U盤中的素材位置、打開(kāi)授課計(jì)劃、教案等），吸引學(xué)生注意力?！菊n前說(shuō)明】本章主要介紹了HTML5的基礎(chǔ)、HTML5的新特性、瀏覽器對(duì)HTML5的支持、在網(wǎng)站開(kāi)發(fā)中綜合使用jQuery+HTML5等知識(shí)點(diǎn)。其中重點(diǎn)介紹了在網(wǎng)站開(kāi)發(fā)中綜合使用jQuery+HTML5，包括文件上傳、Canvas繪圖、圖片選擇等。【目的】使學(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評(píng)方式等方面明確學(xué)習(xí)本單元知識(shí)的要求和目標(biāo)。一、HTML5基礎(chǔ)HTML5是基于各種各樣的理念進(jìn)行設(shè)計(jì)的，這些設(shè)計(jì)理念體現(xiàn)了對(duì)可能性和可行性的新認(rèn)識(shí)。1．兼容性2．實(shí)用性和用戶優(yōu)先3．化繁為簡(jiǎn)二、jQuery與HTML5編程通過(guò)多個(gè)案例紹在jQuery程序中調(diào)用HTML5的API來(lái)完成一些常見(jiàn)功能。案例：1.使用jCanvas插件繪制一個(gè)淺藍(lán)色的正方形（實(shí)例位置：源碼\第11章\11-2）。（1）創(chuàng)建index.html，引入jquery文件和jCanvas插件文件。代碼如下：<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript"src="../js/jcanvas.min.js"></script>（2）在頁(yè)面中添加<canvas>元素，具體代碼如下：<canvaswidth="300"height="200"></canvas>（3）編寫jQuery代碼，使用jCanvas插件的drawRect()方法實(shí)現(xiàn)繪制一個(gè)淺藍(lán)色的正方形。具體代碼如下：$(function(){ $("canvas").drawRect({ fillStyle:"lightblue", x:150,y:80, width:100, height:100 })})綜合實(shí)例：旅游信息網(wǎng)前臺(tái)頁(yè)面設(shè)計(jì)旅游信息網(wǎng)是介紹關(guān)于長(zhǎng)春旅游信息的網(wǎng)站，該網(wǎng)站主要包括主頁(yè)、自然風(fēng)光頁(yè)、人文氣息頁(yè)、美食頁(yè)、旅游景點(diǎn)頁(yè)、名校簡(jiǎn)介頁(yè)及留下足跡頁(yè)等頁(yè)面。通過(guò)學(xué)習(xí)，學(xué)生能夠掌握HTML5基礎(chǔ)、jQuery與HTML5編程API接口等功能。本節(jié)課主要運(yùn)用案例教學(xué)法，通過(guò)對(duì)jQuery與HTML5編程的深入理解，掌握jQuery與HTML5編程的特點(diǎn)及優(yōu)勢(shì)，深入探討jQuery與HTML5的編程方法，通過(guò)實(shí)例的方法加強(qiáng)對(duì)jQuery與HTML5編程的掌握，達(dá)到能夠獨(dú)立熟練運(yùn)用jQuery與