HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn) 教案 第1章 概述_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn) 教案 第1章 概述_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn) 教案 第1章 概述_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn) 教案 第1章 概述_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn) 教案 第1章 概述_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。21.1HTML、CSS的概念該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：掌握HTML、CSS、容器等概念。理解HTML與CSS的關(guān)系。能力目標(biāo)：具備使用記事本編寫簡(jiǎn)單HTML頁(yè)面的能力。素養(yǎng)目標(biāo)：（1）“衣冠楚楚”強(qiáng)調(diào)在校生學(xué)生著裝禮儀。（2）“搜索引擎收錄強(qiáng)調(diào)的是HTML內(nèi)容”，內(nèi)在美大于外在美。（1）HTML、CSS、容器等概念。（2）HTML與CSS的關(guān)系。HTML、CSS、容器概念。?通過(guò)上網(wǎng)或詢問(wèn)，讓學(xué)生充分理解網(wǎng)頁(yè)中的容器的概念及本質(zhì)。記事本編寫簡(jiǎn)單HTML頁(yè)面。通過(guò)將復(fù)雜的標(biāo)簽挑選出常見(jiàn)的框架類標(biāo)簽進(jìn)行講述，有意識(shí)地讓學(xué)生對(duì)代碼縮進(jìn)量有個(gè)初步的認(rèn)識(shí)。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)引入簡(jiǎn)述網(wǎng)頁(yè)的概念，了解本課程的目標(biāo)。互聯(lián)網(wǎng)之所以讓人著迷，源于各式各樣的網(wǎng)站。構(gòu)成網(wǎng)站的網(wǎng)頁(yè)，則為核心內(nèi)容，也是我們課程學(xué)習(xí)的對(duì)象。聽(tīng)講講授網(wǎng)頁(yè)概念，演示一些網(wǎng)頁(yè)專題網(wǎng)站。講授法，讓學(xué)生了解課程目標(biāo)，知識(shí)的應(yīng)用場(chǎng)景。知識(shí)講授1.1HTML、CSS概念HTML5重點(diǎn)強(qiáng)調(diào)HTML標(biāo)簽盡可能成對(duì)標(biāo)簽出現(xiàn)，即“開(kāi)始標(biāo)簽”和“結(jié)束標(biāo)簽”，開(kāi)始/結(jié)束標(biāo)簽內(nèi)部的代碼塊就是它的子孫元素。簡(jiǎn)單理解的話，H5強(qiáng)調(diào)的“對(duì)標(biāo)簽”可以形容成“龍頭鳳尾”。開(kāi)始標(biāo)簽表現(xiàn)為<標(biāo)簽A>，結(jié)束標(biāo)簽對(duì)應(yīng)的</標(biāo)簽A>，比如<body>和</body>，<div>和</div>，<ul>和</ul>。以免“亂點(diǎn)鴛鴦譜”，在茫茫代碼海中找到配對(duì)標(biāo)簽，依賴于代碼書(shū)寫時(shí)的“縮進(jìn)”。知識(shí)點(diǎn)：HTML搭配CSS記憶關(guān)鍵詞：衣冠楚楚關(guān)鍵詞解析：HTML標(biāo)簽搭建內(nèi)容（人），CSS展示外觀樣式（著裝）。對(duì)于搜索引擎收錄網(wǎng)頁(yè)的標(biāo)準(zhǔn)來(lái)說(shuō)，它只關(guān)注內(nèi)容；對(duì)于瀏覽者而言，更希望見(jiàn)到CSS將內(nèi)容打扮出令人愉悅的視覺(jué)效果。聽(tīng)講【教師演示】查看某一個(gè)網(wǎng)頁(yè)的源代碼或者網(wǎng)頁(yè)中某一局部的代碼。觀察HTML結(jié)構(gòu)和CSS代碼。“成對(duì)出現(xiàn)的標(biāo)簽”。根據(jù)成語(yǔ)進(jìn)行思政解說(shuō)。演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。怎么理解HTML結(jié)構(gòu)的容器概念？想象一雙雙鞋子以怎樣一層層外包裝的方式裝入集裝箱。CSS為什么稱之為層疊樣式表，怎么理解“層疊”這個(gè)字眼？層疊，一層一層疊加作用在對(duì)象上。比如“請(qǐng)想象出你家里養(yǎng)的斑點(diǎn)狗”。為什么我們不會(huì)想象成三花貓呢？回答問(wèn)題提問(wèn)任務(wù)實(shí)施【案例1】打開(kāi)資源包根目錄，在瀏覽器中運(yùn)行“第1章-內(nèi)容與樣式分離的意義.html”，效果如圖1-2所示，頁(yè)面中包含了大量尺寸不一的圖片。圖1-2頁(yè)面效果（1）頁(yè)面的圖片調(diào)整為統(tǒng)一的200px寬，150px高的尺寸。（2）采用內(nèi)容與表現(xiàn)分離的思路修改代碼，把添加的寬高屬性都刪除，同時(shí)在<head>標(biāo)簽內(nèi)部添加<style>標(biāo)簽，敲入代碼。（3）保存該文檔，在瀏覽器中的運(yùn)行效果。敲打代碼教師扮演部門主管，要求員工（學(xué)生）把該頁(yè)面的圖片調(diào)整為統(tǒng)一的200px寬，150px高的尺寸。巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分使用記事本打開(kāi)、編輯、保存文件無(wú)錯(cuò)誤操作。20HTML代碼的編寫快速無(wú)誤輸入代碼。30CSS代碼的編寫能以正確縮進(jìn)形式輸入正確代碼。30圖像文件位置能正確將圖像放置在對(duì)應(yīng)文件夾，圖片路徑正確。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過(guò)本課的學(xué)習(xí)：（1）理解HTML與CSS的概念與關(guān)系。（2）通過(guò)“修改圖片尺寸”案例深刻認(rèn)識(shí)CSS對(duì)于網(wǎng)頁(yè)后期維護(hù)所起的重要作用。（3）掌握簡(jiǎn)單HTML頁(yè)面的代碼輸入與運(yùn)行。（4）借“衣冠楚楚”成語(yǔ)思考學(xué)校著裝規(guī)定，內(nèi)在美的意義。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。21.2網(wǎng)頁(yè)制作初學(xué)者上手工具該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）了解各主流網(wǎng)頁(yè)瀏覽器。（2）了解Hbuilder軟件的功能。能力目標(biāo)：具備下載、安裝hbuilder軟件的能力。具備使用搜索引擎求解問(wèn)題的能力。素養(yǎng)目標(biāo)：（1）“工欲善其事必先利其器”，強(qiáng)調(diào)在行動(dòng)前應(yīng)多了解規(guī)矩、背景的意識(shí)。（2）國(guó)產(chǎn)軟件為編程“利器”，培養(yǎng)對(duì)中國(guó)科技力量的自豪感。網(wǎng)頁(yè)制作初學(xué)者上手工具h(yuǎn)builder軟件的功能、百度搜索引擎的使用。通過(guò)與學(xué)生溝通其上網(wǎng)搜索喜好，拉進(jìn)師生距離，寓教于樂(lè)。正確、高效使用特定關(guān)鍵字搜索相關(guān)網(wǎng)頁(yè)。通過(guò)提問(wèn)，讓學(xué)生思考特定目標(biāo)下的關(guān)鍵字的選定。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)HTML與CSS的關(guān)系？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入挑選一款能提供“代碼提示”的網(wǎng)頁(yè)編輯器，能讓我們事半功倍。聽(tīng)講講授，演示。教師對(duì)成語(yǔ)進(jìn)行思政講解。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。知識(shí)講授1.2.1選擇高效的代碼編輯器HBuilder對(duì)于初學(xué)者而言，所考慮的優(yōu)點(diǎn)。1.2.2安裝調(diào)試用的瀏覽器?！咎釂?wèn)】電腦端常用的網(wǎng)頁(yè)瀏覽器？移動(dòng)端常用的瀏覽器？1.2.3善于使用搜索引擎求解問(wèn)題【提問(wèn)】同學(xué)們使用搜索引擎經(jīng)常搜索什么內(nèi)容？常用的關(guān)鍵字？1.搜索引擎基本用法（1）輸入多個(gè)關(guān)鍵詞。（2）“減號(hào)”可以盡可能屏蔽掉不想看到的關(guān)鍵詞。2.百度高級(jí)用法詳解選擇百度搜索欄右上角“設(shè)置”菜單下的“高級(jí)搜索”。聽(tīng)講并回答問(wèn)題演示任務(wù)達(dá)到的效果，講解代碼教師提問(wèn)聯(lián)系成語(yǔ)進(jìn)行思政講解。演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施一個(gè)初中畢業(yè)準(zhǔn)備讀技工院校的同學(xué)，別人推薦了大數(shù)據(jù)技術(shù)這個(gè)專業(yè)，他應(yīng)該如何了解該專業(yè)是否適合自己。將查詢的結(jié)果匯總到“姓名.docx”文檔中。使用百度搜索巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分關(guān)鍵字的選擇正確輸入合理的關(guān)鍵字，無(wú)冗余的字眼。30關(guān)鍵字的組合關(guān)鍵字組合表達(dá)正確30查詢結(jié)果的識(shí)別識(shí)別并篩除不合理、不權(quán)威的結(jié)果30文字的整理格式整齊、悅目10總分互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課的學(xué)習(xí)：（1）了解各主流網(wǎng)頁(yè)瀏覽器。（2）掌握Hbuilder軟件的下載、安裝。（3）能使用搜索引擎求解問(wèn)題。（4）通過(guò)對(duì)國(guó)產(chǎn)軟件的了解，培養(yǎng)對(duì)中國(guó)科技力量的自豪感。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。2本章基礎(chǔ)練習(xí)該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：掌握新建基本HTML項(xiàng)目。掌握網(wǎng)站常見(jiàn)頁(yè)面文件的命名規(guī)則。掌握常規(guī)Hbuilder快捷鍵操作。能力目標(biāo)：具備使用Hbuilder創(chuàng)建項(xiàng)目及相關(guān)結(jié)構(gòu)的能力。具備Hbuilder中使用快捷鍵提高編碼速度的能力。素養(yǎng)目標(biāo)：激發(fā)創(chuàng)新思維與探索精神：鼓勵(lì)學(xué)生在Hbuilder中查找快捷鍵功能，不斷探索新知，培養(yǎng)解決問(wèn)題的能力。（2）強(qiáng)調(diào)學(xué)習(xí)程序需要通過(guò)大量的代碼輸入練習(xí)，方能“唯手熟爾”。Hbuilder軟件相關(guān)操作網(wǎng)站常見(jiàn)頁(yè)面文件的命名規(guī)則，常規(guī)Hbuilder快捷鍵操作。通過(guò)觀察企業(yè)或校園網(wǎng)各頁(yè)面的命名來(lái)讓學(xué)生了解文件命名規(guī)則。通過(guò)類比window或其他軟件的快捷鍵來(lái)關(guān)聯(lián)hbuilder快捷鍵。常規(guī)Hbuilder快捷鍵操作。通過(guò)類比window或其他軟件的快捷鍵來(lái)關(guān)聯(lián)hbuilder快捷鍵。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)使用百度搜索引擎，關(guān)鍵字應(yīng)該如何選擇？回答問(wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入歐陽(yáng)修的《賣油翁》賣油翁：“無(wú)他，但手熟爾?！甭?tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示強(qiáng)調(diào)Hbuilder快捷鍵操作知識(shí)講授1. 網(wǎng)站常見(jiàn)頁(yè)面的命名。首頁(yè)、新聞欄目頁(yè)、企業(yè)介紹頁(yè)，分別為index.html、news.html、about_us.html（或者profile.html）2. 鍵盤輸入技巧3. 盡可能雙手脫離鼠標(biāo)，操作都采用鍵盤去執(zhí)行。☆思政講解：有些同學(xué)手機(jī)打字、聊天發(fā)表情的速度賊快，但讓他在電腦當(dāng)中打字猶如云泥之別。部分同學(xué)的觀點(diǎn)：（1）未來(lái)語(yǔ)音識(shí)別技術(shù)成熟，完全可以考語(yǔ)音錄入。（2）個(gè)人拼音基礎(chǔ)差，無(wú)法做到快速打字，干脆不學(xué)。反駁觀點(diǎn)（1）：比如在公司內(nèi)，一堆人用麥克風(fēng)進(jìn)行文字錄入，像不像一大堆客服人員不停接電話，市場(chǎng)般吵鬧。反駁觀點(diǎn)（2）拼音不行，五筆輸入法來(lái)湊。4. 強(qiáng)調(diào)絕大部分的標(biāo)簽成對(duì)出現(xiàn)，利用自動(dòng)代碼提示功能完成結(jié)束標(biāo)簽的生成。5. 在指定的瀏覽器中運(yùn)行網(wǎng)頁(yè)。聽(tīng)講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過(guò)程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施使用Hbuilder新建基本HTML項(xiàng)目，整理相關(guān)目錄及文件，并通過(guò)常規(guī)快捷鍵的操作完成指定的代碼。【練習(xí)1】：Hbuilder新建一個(gè)基本HTML項(xiàng)目，并將所需圖片放置在img文件夾?！揪毩?xí)2】在D盤創(chuàng)建一個(gè)website的文件夾，然后在Hbuilder中打開(kāi)該目錄，陸續(xù)新建3個(gè)空白html文檔，如圖1-21所示。擬定分別為網(wǎng)站的首頁(yè)、新聞欄目頁(yè)、企業(yè)介紹頁(yè)，將這些文檔分別保存為index.html、news.html、about_us.html（或者profile.html）?！揪毩?xí)3】Hbuilder快捷鍵操作實(shí)踐。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開(kāi)發(fā)能力。任務(wù)擴(kuò)展在hbuilder軟件的“工具”——“自定義快捷鍵”命令中，可以查看更多的快捷鍵，也可以自行定義（但不推薦）。教師演示個(gè)性化教學(xué)，旨在給學(xué)習(xí)能力強(qiáng)的同學(xué)提供課外學(xué)習(xí)資料。任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過(guò)程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20HTML代碼的編寫快速無(wú)誤輸入代碼。30CSS代碼的編寫能以正確縮進(jìn)形式輸入正確代碼。30快捷鍵運(yùn)用以標(biāo)準(zhǔn)手勢(shì)輸入快捷鍵。20總分說(shuō)明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過(guò)本課的學(xué)習(xí)：（1）掌握新建基本HTML項(xiàng)目。（2）掌握網(wǎng)站常見(jiàn)頁(yè)面文件的命名規(guī)則。（3）掌握常規(guī)Hbuilder快捷鍵操作，提高編碼速度。（4）在Hbuilder中查找快捷鍵功能，不斷探索新知。（5）學(xué)習(xí)程序需要通過(guò)大量的代碼輸入練習(xí)，方能“唯手熟爾”。聽(tīng)講歸納本任務(wù)的開(kāi)展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁(yè)布局。120HTML5基礎(chǔ)語(yǔ)法與文檔結(jié)構(gòu)，語(yǔ)義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見(jiàn)布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁(yè)布局能力和動(dòng)態(tài)表現(xiàn)效果。2本章擴(kuò)展練習(xí)該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁(yè)相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：鞏固Hbuilder快捷鍵操作了解新聞列表所涉及的ul標(biāo)簽結(jié)構(gòu)。能力目標(biāo)：具備快速構(gòu)建代碼的能力。具備獨(dú)立完成局部頁(yè)面效果的能力。素養(yǎng)目標(biāo)：（1）從新聞列表內(nèi)容引導(dǎo)學(xué)生關(guān)注社會(huì)熱點(diǎn)問(wèn)題，如數(shù)字鴻溝、網(wǎng)絡(luò)安全、隱私保護(hù)等，培養(yǎng)他們的社會(huì)責(zé)任感，鼓勵(lì)他們將所學(xué)技術(shù)用于服務(wù)社會(huì)、改善民生，成為有擔(dān)當(dāng)、有情懷的技術(shù)人才。通過(guò)hbuilder快捷鍵操作快速進(jìn)行ul標(biāo)簽結(jié)構(gòu)代碼的輸入，完成對(duì)應(yīng)的分組練習(xí)。常規(guī)Hbuilder快捷鍵操作。通過(guò)上機(jī)敲打代碼，強(qiáng)調(diào)快捷鍵操作來(lái)加強(qiáng)快速編寫代碼的能力。新聞列表布局的代碼實(shí)現(xiàn)。通過(guò)快捷鍵快速構(gòu)建，了解ul、li標(biāo)簽的結(jié)構(gòu)及意義。運(yùn)用實(shí)例演示法，通過(guò)實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問(wèn)題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過(guò)提問(wèn)或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過(guò)任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無(wú)誤達(dá)到任務(wù)要求復(fù)習(xí)搜索2023年中國(guó)百?gòu)?qiáng)企業(yè)名單，并以本人學(xué)號(hào)對(duì)應(yīng)的百?gòu)?qiáng)排名找到相關(guān)企業(yè)的官網(wǎng)，將官網(wǎng)首頁(yè)進(jìn)行局部的截圖（包含網(wǎng)址即可），保存為“姓名+企業(yè)名稱.jpg”文件?；卮饐?wèn)題教師提問(wèn)，演示。思維導(dǎo)圖法或問(wèn)題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入企業(yè)網(wǎng)站或?qū)ｎ}網(wǎng)站頁(yè)面中，經(jīng)常包含大量的看上去屬于一個(gè)結(jié)構(gòu)體的元素集合，無(wú)論是純文字，或是純圖片，或者圖文結(jié)合，只要是構(gòu)成布局的小單元結(jié)構(gòu)一致，我們基本上可以通過(guò)hbuilder快捷鍵操作快速進(jìn)行代碼的輸入，這個(gè)場(chǎng)景經(jīng)常使用<ul>列表標(biāo)簽。聽(tīng)講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授1.hbuilder快捷鍵2.新聞列表的常見(jiàn)布局。3.ul標(biāo)簽的代碼結(jié)構(gòu)【練習(xí)4】完成下圖紅色區(qū)域效果對(duì)應(yīng)的HTML代碼，如圖1-34所示。盡可能快速寫完HTML結(jié)構(gòu)代碼，先使用<Ctrl>+<C>鍵和<Ct

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論