62680-HTML5 CSS3Web前端開發(fā)技術(shù)（任務(wù)式）（微課版）（第2版）-教學(xué)大綱

《HTML5+CSS3Web前端開發(fā)技術(shù)（第2版）》課程教學(xué)大綱學(xué)分：4學(xué)分學(xué)時(shí)：學(xué)時(shí)64（其中：理論學(xué)時(shí)32實(shí)踐學(xué)時(shí)：32）先修課程：圖形圖像處理、程序設(shè)計(jì)基礎(chǔ)、Internet應(yīng)用基礎(chǔ)后續(xù)課程：Web前端技術(shù)(JavaScript)適用專業(yè)：計(jì)算機(jī)類相關(guān)專業(yè)開課部門：計(jì)算機(jī)系一、課程的性質(zhì)與目標(biāo)《HTML5+CSS3Web前端開發(fā)技術(shù)》是面向計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)核心課，該課程的內(nèi)容適應(yīng)Web前端開發(fā)工作崗位群的實(shí)際要求。課程融入“1+X”Web前端開發(fā)技術(shù)技能等級(jí)證書的相關(guān)內(nèi)容，對(duì)接互聯(lián)網(wǎng)+大學(xué)生創(chuàng)新創(chuàng)業(yè)大賽，秉承“以賽促賽，賽證融合、以崗促賽，崗證融合、以創(chuàng)促課，專創(chuàng)融合”的思想，整合專業(yè)教育教學(xué)資源和內(nèi)容，構(gòu)建基于專業(yè)知識(shí)的模塊化課程內(nèi)容。通過本課程的學(xué)習(xí)，學(xué)生可以掌握網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域核心知識(shí)和技能，了解靜態(tài)網(wǎng)頁(yè)工作原理、靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)、靜態(tài)網(wǎng)站構(gòu)建和發(fā)布等內(nèi)容。本課程是一門基于真實(shí)項(xiàng)目的課程，具有較強(qiáng)的職業(yè)性、實(shí)踐性和技術(shù)性，學(xué)生在學(xué)習(xí)過程中既可以掌握與行業(yè)發(fā)展緊密結(jié)合的實(shí)用技能與知識(shí)，在操作實(shí)踐中提升實(shí)戰(zhàn)能力，同時(shí)又培養(yǎng)學(xué)生創(chuàng)新創(chuàng)造、團(tuán)隊(duì)協(xié)作、與人溝通的職業(yè)素質(zhì)及崗位適應(yīng)能力，對(duì)學(xué)生職業(yè)能力培養(yǎng)和職業(yè)素質(zhì)養(yǎng)成起到支撐和促進(jìn)作用，為職業(yè)能力的培養(yǎng)打下堅(jiān)實(shí)的基礎(chǔ)。二、教學(xué)條件要求操作系統(tǒng)：Windows7開發(fā)工具：HbuilderX三、課程的主要內(nèi)容及基本要求學(xué)習(xí)單元一工作任務(wù)搭建項(xiàng)目開發(fā)環(huán)境學(xué)時(shí)2任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生樹立遠(yuǎn)大的職業(yè)理想，以及為祖國(guó)信息技術(shù)事業(yè)做貢獻(xiàn)的決心。（2）培養(yǎng)學(xué)生自主學(xué)習(xí)、終身學(xué)習(xí)的意識(shí)。知識(shí)目標(biāo)（1）了解Web的相關(guān)概念。（2）了解當(dāng)前主流Web瀏覽器與常用Web開發(fā)工具。（3）了解HTML5的優(yōu)勢(shì)。技能目標(biāo)（1）掌握HBuilderX、Chrome瀏覽器的安裝與使用。（2）掌握在HBuilderX中進(jìn)行Web項(xiàng)目搭建的流程。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)Web概述√主流Web瀏覽器√常用Web開發(fā)工具√Web標(biāo)準(zhǔn)√√HTML5的優(yōu)勢(shì)√學(xué)習(xí)單元二工作任務(wù)制作課程基礎(chǔ)頁(yè)面學(xué)時(shí)2任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的創(chuàng)新精神和合作意識(shí)。（2）培養(yǎng)學(xué)生編程的規(guī)范意識(shí)和職業(yè)素養(yǎng)。知識(shí)目標(biāo)（1）掌握HTML5基礎(chǔ)語(yǔ)法。（2）掌握HTML5基礎(chǔ)標(biāo)簽。（3）掌握語(yǔ)義化結(jié)構(gòu)標(biāo)簽。技能目標(biāo)（1）能夠使用規(guī)范的HTML5結(jié)構(gòu)編寫代碼。（2）能夠使用HTML5標(biāo)簽定義網(wǎng)頁(yè)元素。（3）能夠熟練地使用HBuilderX編寫簡(jiǎn)單的HTML5頁(yè)面。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)HTML5基礎(chǔ)語(yǔ)法√HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽√√√HTML5常用標(biāo)簽√√HTML5實(shí)體字符√HTML5超鏈接、框架標(biāo)簽√√HTML5元素分類√學(xué)習(xí)單元三工作任務(wù)制作課程播放頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的創(chuàng)新精神。（2）培養(yǎng)學(xué)生的職業(yè)素養(yǎng)和服務(wù)意識(shí)。知識(shí)目標(biāo)（1）掌握無(wú)序列表、有序列表和定義列表的定義與特點(diǎn)。（2）掌握表格元素與表格的基礎(chǔ)結(jié)構(gòu)。（3）掌握HTML5媒體元素。35技能目標(biāo)（1）熟練使用無(wú)序列表制作頁(yè)面內(nèi)容。（2）熟練使用表格元素制作頁(yè)面內(nèi)容。（3）熟練使用HTML5媒體元素在頁(yè)面中嵌入音、視頻內(nèi)容。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)HTML5列表√√HTML5表格√√HTML5媒體元素√√學(xué)習(xí)單元四工作任務(wù)使用表單制作頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的勞動(dòng)精神和工匠精神。（2）培養(yǎng)學(xué)生適應(yīng)時(shí)代要求、主動(dòng)獲取新知識(shí)和新技能的意識(shí)。知識(shí)目標(biāo)（1）了解表單元素的定義。（2）掌握語(yǔ)義化表單的制作。（3）了解HTML5屬性初步驗(yàn)證表單的功能。51技能目標(biāo)（1）掌握使用表單元素制作用戶登錄頁(yè)面基礎(chǔ)內(nèi)容的方法。（2）掌握使用表單元素的屬性實(shí)現(xiàn)簡(jiǎn)單的表單驗(yàn)證功能的方法。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)表單概述√表單發(fā)送方式√常用表單控件√√表單驗(yàn)證的作用√表單驗(yàn)證的方法√√學(xué)習(xí)單元五工作任務(wù)在項(xiàng)目中引入CSS學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的紅色精神。（2）提升學(xué)生的思想道德素質(zhì)并培養(yǎng)學(xué)生的社會(huì)主義核心價(jià)值觀。知識(shí)目標(biāo)（1）掌握CSS3的外部樣式、內(nèi)部樣式與行內(nèi)樣式。（2）掌握CSS3的語(yǔ)法規(guī)則。（3）掌握CSS3的基礎(chǔ)選擇器、層次選擇器、結(jié)構(gòu)偽類選擇器、屬性選擇器。技能目標(biāo)（1）掌握使用CSS對(duì)文本內(nèi)容進(jìn)行美化的方法。（2）掌握使用基礎(chǔ)選擇器進(jìn)行頁(yè)面元素選擇和查找的方法。（3）掌握使用高級(jí)選擇器進(jìn)行頁(yè)面元素選擇和查找的方法。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)CSS3概述√CSS3基礎(chǔ)語(yǔ)法√√CSS3引入方式√CSS3基礎(chǔ)選擇器√√CSS3高級(jí)選擇器√√CSS3選擇器權(quán)重問題√學(xué)習(xí)單元六工作任務(wù)使用CSS3美化頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生主動(dòng)學(xué)習(xí)以及分析和解決問題的能力。（2）培養(yǎng)學(xué)生的職業(yè)素養(yǎng)和職業(yè)道德。知識(shí)目標(biāo)（1）了解常用的文字樣式。（2）掌握超鏈接的不同狀態(tài)樣式。（3）掌握列表的樣式。（4）掌握背景顏色的樣式。（5）掌握背景圖片的樣式。（6）理解背景漸變色樣式。98技能目標(biāo)使用CSS3樣式進(jìn)行常見頁(yè)面樣式的美化。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)文字樣式√√文本樣式√√超鏈接樣式√√√列表樣式√√背景樣式√√背景漸變√學(xué)習(xí)單元七工作任務(wù)使用盒子模型布局頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生團(tuán)隊(duì)合作和勇于探索的精神。（2）培養(yǎng)學(xué)生不斷創(chuàng)新、精益求精的工匠精神。知識(shí)目標(biāo)（1）了解CSS中盒子模型的結(jié)構(gòu)與特點(diǎn)。（2）了解盒子模型的尺寸計(jì)算。（3）了解CSS中兩種標(biāo)準(zhǔn)的盒子模型。技能目標(biāo)（1）熟練使用盒子模型進(jìn)行常規(guī)頁(yè)面布局。（2）熟練使用盒子模型進(jìn)行塊狀元素水平居中布局。（3）熟練地進(jìn)行圓角邊框的頭像制作。（4）掌握通過邊框陰影增加立體效果的方法。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)盒子模型結(jié)構(gòu)√盒子模型的組成√√計(jì)算盒子模型的尺寸√√IE盒子模型√√使用Chrome調(diào)試工具檢查盒子尺寸√邊框圓角√使用border-radius屬性制作特殊圖形√盒子陰影√學(xué)習(xí)單元八工作任務(wù)使用CSS3浮動(dòng)布局頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。（2）培養(yǎng)學(xué)生主動(dòng)學(xué)習(xí)的能力和獨(dú)立思考、分析及解決問題的能力。知識(shí)目標(biāo)（1）了解display屬性的4種狀態(tài)。（2）了解浮動(dòng)的特點(diǎn)。（3）了解如何清除浮動(dòng)。（4）了解浮動(dòng)導(dǎo)致塌陷的解決方法及方法的優(yōu)缺點(diǎn)。技能目標(biāo)（1）熟練使用浮動(dòng)的方式對(duì)元素進(jìn)行水平兩端布局或者水平排列布局。（2）熟練解決由浮動(dòng)導(dǎo)致的結(jié)構(gòu)塌陷問題。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)標(biāo)準(zhǔn)文檔流√display屬性√浮動(dòng)√√√清除浮動(dòng)√√學(xué)習(xí)單元九工作任務(wù)使用CSS3定位布局頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。（2）培養(yǎng)學(xué)生分析問題、解決問題的能力。知識(shí)目標(biāo)（1）了解使用position屬性實(shí)現(xiàn)的4種定位方式的特點(diǎn)。（2）了解如何使用z-index屬性調(diào)整定位元素的堆疊方式。技能目標(biāo)（1）掌握常見元素重疊覆蓋效果的實(shí)現(xiàn)。（2）掌握使用頁(yè)面固定定位實(shí)現(xiàn)功能按鈕的方法。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)定位概述√相對(duì)定位√√√絕對(duì)定位√√√固定定位√√黏性定位√√z-index√學(xué)習(xí)單元十工作任務(wù)利用CSS3動(dòng)畫美化頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生精益求精的工匠精神。（2）培養(yǎng)學(xué)生獨(dú)立思考的能力和崗位意識(shí)。知識(shí)目標(biāo)（1）了解實(shí)現(xiàn)2D變形的屬性transform。（2）了解實(shí)現(xiàn)過渡動(dòng)畫的屬性transition。（3）理解通過animation屬性實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)畫的過程。（4）了解輪播圖的概念。技能目標(biāo)（1）熟練使用變形與過渡制作常見的鼠標(biāo)交互特效。（2）掌握使用動(dòng)畫制作簡(jiǎn)單的循環(huán)特效的方法。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)變形√√過渡√√動(dòng)畫√√學(xué)習(xí)單元十一工作任務(wù)使用CSS3彈性盒子布局頁(yè)面學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的創(chuàng)新意識(shí)。（2）培養(yǎng)學(xué)生的職業(yè)素養(yǎng)。（3）培養(yǎng)學(xué)生與本專業(yè)發(fā)展相適應(yīng)的勞動(dòng)素養(yǎng)。知識(shí)目標(biāo)（1）了解彈性盒子的特點(diǎn)與優(yōu)勢(shì)。（2）掌握彈性盒子布局。技能目標(biāo)（1）掌握使用彈性盒子布局替換浮動(dòng)布局的方法。（2）熟練使用彈性盒子布局。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)彈性盒子√√彈性盒子容器屬性√√√彈性盒子項(xiàng)目屬性√√√學(xué)習(xí)單元十二工作任務(wù)使用CSS3媒體查詢實(shí)現(xiàn)頁(yè)面響應(yīng)式布局學(xué)時(shí)6任務(wù)目標(biāo)素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生的探究能力和終身學(xué)習(xí)的意識(shí)。（2）培養(yǎng)學(xué)生的適應(yīng)能力和與時(shí)俱進(jìn)的意識(shí)。知識(shí)目標(biāo)（1）了解頁(yè)面媒體查詢的原理。（2）掌握CSS3媒體查詢。（3）掌握CSS3的主要頁(yè)面樣式尺寸單位。技能目標(biāo)掌握使用媒體查詢的方式將PC端Web網(wǎng)頁(yè)改造為同時(shí)適應(yīng)移動(dòng)端與PC端的響應(yīng)式頁(yè)面的方法。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)媒體查詢與響應(yīng)式布局√√媒體查詢語(yǔ)法√√√媒體查詢的引入方式√em與rem√四、學(xué)時(shí)分配章目理論實(shí)踐合計(jì)搭建項(xiàng)目開發(fā)環(huán)境1學(xué)時(shí)1學(xué)時(shí)2學(xué)時(shí)制作課程基礎(chǔ)頁(yè)面1學(xué)時(shí)1學(xué)時(shí)2學(xué)時(shí)制作課程播放頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用表單制作頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)在項(xiàng)目中引入CSS3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用CSS3美化頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用盒子模型布局頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用CSS3浮動(dòng)布局頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用CSS3定位布局頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)利用CSS3動(dòng)畫美化頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用CSS3彈性盒子布局頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)使用CSS3媒體查詢實(shí)現(xiàn)頁(yè)面響應(yīng)式布局3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)合計(jì)32學(xué)時(shí)32學(xué)時(shí)64學(xué)時(shí)五、教學(xué)效果評(píng)價(jià)及方式本課程為考試課程，根據(jù)課程特點(diǎn)采用多階段、節(jié)點(diǎn)化、多方式的評(píng)價(jià)方式。構(gòu)建了素質(zhì)、知識(shí)和能力考核相結(jié)合，過程性考核和終結(jié)性考核相結(jié)合，理論考核和實(shí)踐考核相結(jié)合，校內(nèi)評(píng)價(jià)和校外評(píng)價(jià)相結(jié)合的四個(gè)結(jié)合；知識(shí)、能力、素質(zhì)、思政的四個(gè)維度、教師、學(xué)生、工程師的三個(gè)主體，課前、課中、課后的