教案模板【經(jīng)典

1、網(wǎng)頁(yè)設(shè)計(jì)與制作教學(xué)設(shè)計(jì)教學(xué)對(duì)象16.1、16.2教學(xué)時(shí)間90分鐘教學(xué)課題 常用標(biāo)簽設(shè)計(jì)理念1.HTML是一門靜態(tài)網(wǎng)頁(yè)的設(shè)計(jì)語(yǔ)言，學(xué)好它對(duì)后面學(xué)習(xí)動(dòng)態(tài)網(wǎng)頁(yè)的開發(fā)提供了保障。2.讓學(xué)生學(xué)會(huì)常用的標(biāo)簽。3.以案例的方式來(lái)教學(xué)，能讓學(xué)生舉一反三，融會(huì)貫通。 教材分析網(wǎng)頁(yè)的本質(zhì)是使用標(biāo)簽語(yǔ)言編寫一篇“文章”，它通過(guò)瀏覽器的解析能夠?qū)㈨?yè)面中的元素表示出來(lái)，那么作為網(wǎng)頁(yè)的設(shè)計(jì)者就必須對(duì)這種標(biāo)簽語(yǔ)言有所了解。教學(xué)目標(biāo)知識(shí)通過(guò)教師講解、師生互動(dòng)等方式，使學(xué)生掌握html常用標(biāo)簽的用法，并能夠把握靜態(tài)網(wǎng)頁(yè)的整體結(jié)構(gòu)。技能通過(guò)老師的講解與總結(jié)使學(xué)生能夠運(yùn)用html標(biāo)簽進(jìn)行靜態(tài)網(wǎng)頁(yè)的開發(fā)。情感、態(tài)度價(jià)值觀目標(biāo)通過(guò)學(xué)習(xí)

2、，引導(dǎo)學(xué)生對(duì)網(wǎng)頁(yè)開發(fā)產(chǎn)生興趣，讓學(xué)生熟悉靜態(tài)網(wǎng)頁(yè)的結(jié)構(gòu)以及今后網(wǎng)頁(yè)開發(fā)的方向。教學(xué)重點(diǎn)1.html常用標(biāo)記的用法2.HTML文檔結(jié)構(gòu)與基本語(yǔ)法教學(xué)難點(diǎn)1.表單標(biāo)簽與表單設(shè)計(jì)。教學(xué)方法1.任務(wù)驅(qū)動(dòng)法：給學(xué)生一個(gè)小的題目，讓學(xué)生通知?jiǎng)倢W(xué)的知識(shí)來(lái)完成任務(wù)，編寫程序；2.案例教學(xué)法：用設(shè)計(jì)案例的方式，讓學(xué)生能熟練運(yùn)用所學(xué)知識(shí)。教學(xué)后記教學(xué)流程 教學(xué)內(nèi)容與時(shí)間分配教師行為學(xué)生行為教學(xué)理念（設(shè)計(jì)意圖）導(dǎo)入（13分）【PPT1】：HTML教師：HTML是一種標(biāo)簽語(yǔ)言，而不是一種編程語(yǔ)言，這種語(yǔ)言的結(jié)構(gòu)很簡(jiǎn)單，只要明白了各種標(biāo)簽的使用方法便學(xué)懂了HTML。HTML是一種用于描述網(wǎng)頁(yè)文檔的超文本標(biāo)記語(yǔ)言。【PP

3、T2】：HTML文檔教師：HTML文檔的擴(kuò)展名為“.htm”或“.html”，兩者并無(wú)差別?！綪PT3】 HTML標(biāo)簽教師：標(biāo)簽（tag，也稱標(biāo)記） 是用一對(duì)尖括號(hào)“括起來(lái)的單詞或單詞縮寫，它是HTML文檔的主要組成部分。每個(gè)標(biāo)簽都有特定的描述功能，HTML文檔就是通過(guò)不同功能的標(biāo)簽來(lái)控制Web頁(yè)面內(nèi)容的?！綪PT4】HTML的結(jié)構(gòu) 教師：HTML文檔結(jié)構(gòu)很簡(jiǎn)單，由最外層的 標(biāo)簽組成 ，里面是文檔的頭部和主體。在Dreamweaver中新建一個(gè)HTML文檔可以清晰看到其基本結(jié)構(gòu)，如圖2-2所示。學(xué)生思考學(xué)生回答 教學(xué)內(nèi)容與時(shí)間分配教師行為學(xué)生行為教學(xué)理念（設(shè)計(jì)意圖）正文講授一、什么是HTML文

4、檔，及其定義（416分）【PPT5】XHTML教師：XHTML是The Extensible Hyper Text Markup Language(可擴(kuò)展超文本標(biāo)識(shí)語(yǔ)言) 的縮寫，它是一種標(biāo)記語(yǔ)言，不需要編譯便可直接由瀏覽器執(zhí)行，表現(xiàn)方式與超文本置標(biāo)語(yǔ)言（HTML）類似。在XHTML文檔中必須進(jìn)行文件類型聲明（DOCTYPE declaration），必須存在html、head、body元素，而且title元素還要位于head元素中。掌握文檔類型聲明部分、名字空間、head元素、title元素、body元素【PPT6】：XHTML的語(yǔ)法規(guī)則 教師：所有的標(biāo)簽都必須關(guān)閉，即便是空標(biāo)簽也必須關(guān)閉；

5、所有標(biāo)簽的屬性必須是小寫；所有標(biāo)簽的屬性值必須用英文格式的雙引號(hào)括起來(lái)；所有標(biāo)簽都必須合理嵌套；明確屬性值，且不能簡(jiǎn)寫?！綪PT7】： HTML5教師： HTML5是對(duì)HTML標(biāo)準(zhǔn)的第五次修訂，其主要的目標(biāo)是將互聯(lián)網(wǎng)語(yǔ)義化，以便更好地被人類和機(jī)器閱讀，并同時(shí)降低Internet程序（RIA）對(duì)Flash、Silverlight和JavaFX一類瀏覽器插件的依賴，以便提供更好地支持各種媒體的嵌入。【PPT8】：XHTML的結(jié)構(gòu) 教師：標(biāo)簽：用來(lái)描述一節(jié)或一個(gè)完整Web頁(yè)面的介紹性信息，該標(biāo)記可以包括所有的通常放在頁(yè)面頭部的標(biāo)志。標(biāo)簽：用于放置主站點(diǎn)的導(dǎo)航信息。標(biāo)簽：描述一個(gè)有主題的內(nèi)容組，如章節(jié)

6、、頁(yè)眉、頁(yè)腳或文檔中的其他部分。標(biāo)簽：article元素是將section進(jìn)行打包形成 一個(gè)文檔或網(wǎng)站獨(dú)立的部分，例如一篇雜志或報(bào)紙文章，或一篇博客文章?！綪PT9】：HTML5特性教師：實(shí)現(xiàn)Web應(yīng)用程序；更好地呈現(xiàn)內(nèi)容學(xué)生思考學(xué)生傾聽學(xué)生回答 讓學(xué)生對(duì)HTML文檔的結(jié)構(gòu)有個(gè)總體的把握多媒體技術(shù)的有效運(yùn)用教學(xué)內(nèi)容與時(shí)間分配教師行為學(xué)生行為教學(xué)理念（設(shè)計(jì)意圖）正文講授二、HTML標(biāo)記的用法（416分）正文講授三、列表標(biāo)簽的用法 【PPT10】:網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程 使用記事本創(chuàng)建網(wǎng)頁(yè)、保存網(wǎng)頁(yè)、啟動(dòng)瀏覽器進(jìn)行瀏覽【PPT11】：常用標(biāo)簽教師：標(biāo)題標(biāo)簽:段落標(biāo)簽：換行標(biāo)簽：超鏈接標(biāo)簽:圖像標(biāo)簽:列

7、表標(biāo)簽: 表單標(biāo)簽：【PPT13】：表格標(biāo)簽教師：:在HTML中表格由table元素以及一個(gè)或多個(gè)tr、th或td元素組成，可以將任何東西（如圖像、表單，甚至另一個(gè)表格）放進(jìn)表格內(nèi)。講解表格標(biāo)簽的示例，如圖2-31所示。學(xué)生思考學(xué)生討論回答用例子的方式來(lái)區(qū)分有序列表和無(wú)序列表教學(xué)內(nèi)容與時(shí)間分配教師行為學(xué)生行為教學(xué)理念（設(shè)計(jì)意圖）（二）超鏈接【PPT15】：表單標(biāo)簽 教師： 表單讓HTML和XHTML真正具有互交性，使用表單可以創(chuàng)建用來(lái)獲取和處理用戶輸入數(shù)據(jù)的文檔，同時(shí)還可以生成個(gè)性化的回應(yīng)，特別是在電子商務(wù)網(wǎng)站應(yīng)用方面，表單更具有無(wú)限的潛能。標(biāo)簽用于為用戶輸入創(chuàng)建HTML表單。在文檔主體中，表

8、單可以被放置于任何位置，只要將表單的元素都放在標(biāo)簽與結(jié)束標(biāo)簽中就可以，此外form元素是塊級(jí)元素，其前后會(huì)產(chǎn)生換行。Action屬性說(shuō)明了接收和處理表單數(shù)據(jù)的應(yīng)用程序的URL，通常Web管理員將表單處理應(yīng)用程序放在Web服務(wù)器上名為“cgi-bin“目錄下。Method屬性用于規(guī)定使用何種方法發(fā)送表單數(shù)據(jù)，共有兩種方法POST方法和GET方法。Id屬性和name屬性：id屬性允許用戶使用一個(gè)唯一的字符串來(lái)標(biāo)記控件，這樣程序或者超鏈接就可以直接引用它們。Name屬性就是控件的名稱，可以重復(fù)?！綪PT16】： 標(biāo)簽教師：標(biāo)簽用于定義表單控件，根據(jù)不同type的屬性值，輸入字段擁有很多種形式?！綪P

9、T17】：HTML5新增標(biāo)簽 教師：video標(biāo)簽 ：HTML5視頻標(biāo)簽video是新增元素之一。該標(biāo)簽將改善用戶Web體驗(yàn)，讓用戶在輕松愉快的民用情況下觀看視頻。標(biāo)簽支持的視頻格式，在不同瀏覽器中的兼容性見表2-2。音頻格式IE9Firefox3.5Opera10.5Chrome10Safari3.0OggPPPMPEG4PPPWebMPPP表2-2音頻標(biāo)簽:HTML5規(guī)定了一種通過(guò)audio元素來(lái)包含音頻的標(biāo)準(zhǔn)方法，與video元素類型類似，audio元素能夠播放聲音文件或者頻流。對(duì)學(xué)生進(jìn)行學(xué)練結(jié)合的方式進(jìn)行講解課堂小結(jié)（1819分）【PPT18】：小結(jié)教師：（注意速度，和學(xué)生一起回顧）今天我們所學(xué)的三個(gè)問題：是什么，為什么，怎么樣。著重掌握如何HTML文檔中常用標(biāo)簽的用法的結(jié)構(gòu)，特別是HTML5中視頻標(biāo)簽 和音頻標(biāo)簽【PPT19】：教師：最后再送大家一句話，”天才是等于1%的智商加上99%的汗水” 學(xué)生：回答略多次強(qiáng)調(diào)教學(xué)重難點(diǎn)，給學(xué)生良好的暗示。德育滲透教學(xué)內(nèi)容與時(shí)間分配教師行為學(xué)生行為教學(xué)理念（設(shè)計(jì)意圖）延伸閱讀及作業(yè)設(shè)計(jì)（1920分）【PPT21】：延伸閱讀教師：關(guān)于HTML文檔中如何創(chuàng)建漂亮的表格，我們下一節(jié)課再做進(jìn)一步的了解。，請(qǐng)同學(xué)們結(jié)合我們的延伸閱讀完成