網(wǎng)頁設(shè)計(jì)與開發(fā)（HTML5+CSS3）- 教學(xué)大綱

網(wǎng)頁設(shè)計(jì)與開發(fā)教學(xué)大綱(本課程采用授課+任務(wù)驅(qū)動(dòng)教學(xué)模式)課程性質(zhì)和任務(wù)本課程是移動(dòng)互聯(lián)網(wǎng)應(yīng)用技術(shù)(五年高技)專業(yè)必修的一門專業(yè)課，作為用于培養(yǎng)學(xué)生專業(yè)基本能力和基本素養(yǎng)的重要組成部分。本課程涉及網(wǎng)頁基礎(chǔ)、HTML標(biāo)記、CSS樣式、網(wǎng)頁布局、變形與動(dòng)畫等內(nèi)容，通過本課程的學(xué)習(xí)，學(xué)生能夠了解網(wǎng)頁web發(fā)展歷史及其未來方向，熟悉網(wǎng)頁設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見的網(wǎng)頁布局效果及變形和動(dòng)畫效果，學(xué)會(huì)制作各種企業(yè)、門戶、電商類網(wǎng)站。本課程基于工作過程開發(fā)內(nèi)容，以行動(dòng)為導(dǎo)向進(jìn)行教學(xué)內(nèi)容設(shè)計(jì)，以學(xué)生為主體，以案例實(shí)訓(xùn)為手段，設(shè)計(jì)除理論學(xué)習(xí)與技能掌握相融合的課程內(nèi)容體系。二、課程教學(xué)目標(biāo)以培養(yǎng)高素質(zhì)、高技能應(yīng)用型人才為目標(biāo)，通過以情境化、項(xiàng)目制為特色的實(shí)踐教學(xué)，將本課程專業(yè)知識系統(tǒng)地融于實(shí)踐全過程。從而培養(yǎng)學(xué)生獨(dú)立與協(xié)作工作的能力，提升學(xué)生自主學(xué)習(xí)的興趣，鍛煉學(xué)生通過自主學(xué)習(xí)掌握工作思路與方法的能力，切實(shí)提高學(xué)生的職業(yè)技能和處理實(shí)際問題的綜合素質(zhì)。1．專業(yè)能力目標(biāo)培養(yǎng)學(xué)生熟練使用HTML5相關(guān)標(biāo)記及屬性，制作簡單的網(wǎng)頁頁面的能力。培養(yǎng)學(xué)生熟練掌握全局屬性的應(yīng)用，能夠使頁面元素實(shí)現(xiàn)相應(yīng)的操作。培養(yǎng)學(xué)生熟練使用CSS選擇器定義標(biāo)記樣式的能力。培養(yǎng)學(xué)生熟練使用運(yùn)用屬性選擇器為頁面中的元素添加樣式的能力。培養(yǎng)學(xué)生熟練使用CSS控制列表樣式的能力。培養(yǎng)學(xué)生熟練使用為元素設(shè)置常見的定位模式的能力。培養(yǎng)學(xué)生熟練掌握創(chuàng)建表單的能力。培養(yǎng)學(xué)生熟練利用CSS3制作網(wǎng)頁特效的能力。2．社會(huì)能力目標(biāo)培養(yǎng)學(xué)生的溝通能力及團(tuán)隊(duì)協(xié)作能力。培養(yǎng)學(xué)生分析問題、解決問題的能力。培養(yǎng)學(xué)生勇于創(chuàng)新、敬業(yè)樂觀的工作作風(fēng)。培養(yǎng)學(xué)生的質(zhì)量意識、安全意識、環(huán)保意識。培養(yǎng)學(xué)生愛崗敬業(yè)的態(tài)度與社會(huì)責(zé)任心。3．方法能力目標(biāo)培養(yǎng)學(xué)生收集與整理資料的能力。培養(yǎng)學(xué)生制定、實(shí)施工作計(jì)劃的能力。培養(yǎng)學(xué)生利用各種信息媒體，獲取新知識、新技術(shù)的能力。培養(yǎng)學(xué)生時(shí)間管理與規(guī)劃工作的能力。培養(yǎng)學(xué)生分析問題、解決問題的能力。三、課程內(nèi)容和要求項(xiàng)目1利用HTML5制作圖文混排頁面學(xué)時(shí)12學(xué)習(xí)要求了解HTML5發(fā)展歷程理解HTML5瀏覽器支持情況熟悉HTML5基本語法,掌握HTML5語法新特性掌握HTML5相關(guān)標(biāo)記及屬性，能夠制作簡單的網(wǎng)頁頁面學(xué)習(xí)內(nèi)容教學(xué)方法和建議創(chuàng)建第一個(gè)HTML5頁面HTML5文檔基本格式創(chuàng)建圖文混排的網(wǎng)頁·理論講授·模擬演練項(xiàng)目2利用HTML5搭建網(wǎng)頁結(jié)構(gòu)學(xué)時(shí)12學(xué)習(xí)要求掌握結(jié)構(gòu)元素的使用，可以使頁面分區(qū)更明確理解分組元素的使用，能夠建立簡單的標(biāo)題組掌握頁面交互元素的使用，能夠?qū)崿F(xiàn)簡單的交互效果理解文本層次語義元素，能夠在頁面中突出所標(biāo)記的文本內(nèi)容掌握全局屬性的應(yīng)用，能夠使頁面元素實(shí)現(xiàn)相應(yīng)的操作學(xué)習(xí)內(nèi)容教學(xué)方法和建議結(jié)構(gòu)元素的使用頁面交互元素的使用文本層次語義元素的使用搭建網(wǎng)頁結(jié)構(gòu)框架理論講授模擬演練案例驅(qū)動(dòng)啟發(fā)式項(xiàng)目3利用CSS3美化網(wǎng)頁文本學(xué)時(shí)14學(xué)習(xí)要求掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器定義標(biāo)記樣式熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式理解CSS優(yōu)先級，能夠區(qū)分復(fù)合選擇器權(quán)重的大小學(xué)習(xí)內(nèi)容教學(xué)方法和建議CSS基礎(chǔ)選擇器與樣式表CSS文本樣式屬性CSS3優(yōu)先級

·理論講授·模擬演練項(xiàng)目4利用CSS3新增的選擇器制作網(wǎng)頁學(xué)時(shí)10學(xué)習(xí)目標(biāo)掌握CSS3中新增加的屬性選擇器，能夠運(yùn)用屬性選擇器為頁面中的元素添加樣式理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素間的關(guān)系掌握常用的結(jié)構(gòu)化偽類選擇器，能夠?yàn)橄嗤Q的元素定義不同樣式掌握偽元素選擇器的使用，能夠在頁面中插入所需要的文字或圖片內(nèi)容掌握CSS偽類，會(huì)使用CSS偽類實(shí)現(xiàn)超鏈接特效學(xué)習(xí)內(nèi)容教學(xué)方法和建議屬性選擇器的應(yīng)用關(guān)系選擇器的用法偽元素選擇器的使用CSS偽類選擇器的應(yīng)用案例驅(qū)動(dòng)啟發(fā)式講授法示范法項(xiàng)目5利用盒子模型布局網(wǎng)頁學(xué)時(shí)12學(xué)習(xí)目標(biāo)掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像理解漸變屬性的原理，能夠設(shè)置漸變背景理解元素的浮動(dòng)，能夠?yàn)樵卦O(shè)置浮動(dòng)樣式熟悉清除浮動(dòng)的方法，可以使用不同方法清除浮動(dòng)掌握元素的定位，能夠?yàn)樵卦O(shè)置常見的定位模式學(xué)習(xí)內(nèi)容教學(xué)方法和建議盒子的相關(guān)屬性背景屬性的設(shè)置方法漸變屬性的應(yīng)用設(shè)置浮動(dòng)樣式清除浮動(dòng)的方法元素的定位·理論講授·模擬演練項(xiàng)目6利用CSS3美化列表樣式學(xué)時(shí)10學(xué)習(xí)目標(biāo)熟悉CSS控制列表樣式的方式，能夠運(yùn)用背景圖像定義列表項(xiàng)目符號掌握利用列表與CSS3結(jié)合制作網(wǎng)頁導(dǎo)航熟練利用列表與CSS3制作列表欄目學(xué)習(xí)內(nèi)容教學(xué)方法和建議設(shè)置列表項(xiàng)目符號列表制作導(dǎo)航利用列表制作新聞欄目·理論講授·模擬演練項(xiàng)目7利用CSS3美化表格和表單樣式學(xué)時(shí)12學(xué)習(xí)目標(biāo)了解表單功能，能夠快速創(chuàng)建表單掌握表格與表單相關(guān)元素，能夠準(zhǔn)確定義不同的表單控件掌握表單樣式的控制，能夠美化表單界面學(xué)習(xí)內(nèi)容教學(xué)方法和建議表單功能表格與表單相關(guān)元素表單樣式的控制·理論講授·模擬演練項(xiàng)目8利用CSS3制作網(wǎng)頁特效學(xué)時(shí)12學(xué)習(xí)目標(biāo)理解過渡屬性，能夠控制過渡時(shí)間、動(dòng)畫快慢等常見過渡效果。掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。掌握CSS3中的動(dòng)畫，能夠熟練制作網(wǎng)頁中常見的動(dòng)畫效果。學(xué)習(xí)內(nèi)容教學(xué)方法和建議transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性transition屬性認(rèn)識transform2D轉(zhuǎn)換3D轉(zhuǎn)換@keyframesanimation-name屬性animation-duration屬性animation-timing-function屬性animation-delay屬性animation-iteration-count屬性animation-direction屬性animation屬性·理論講授·模擬演練項(xiàng)目9實(shí)戰(zhàn)開發(fā)——制作信息技術(shù)網(wǎng)站首頁學(xué)時(shí)12學(xué)習(xí)目標(biāo)掌握站點(diǎn)的建立，能夠建立規(guī)范的站點(diǎn)。利用HTML5與CSS3綜合完成首頁面的制作。學(xué)習(xí)內(nèi)容教學(xué)方法和建議建立站點(diǎn)站點(diǎn)初始化設(shè)置效果圖分析頁面布局定義公共樣式制作頭部、導(dǎo)航及視頻內(nèi)容制作內(nèi)容部分（新品）制作內(nèi)容部分（試裝）制作內(nèi)容部分（評測）制作腳部（信息注冊）及版權(quán)信息部分·理論講授·模擬演練四、學(xué)時(shí)分配與建議序號內(nèi)容講課實(shí)訓(xùn)總課時(shí)1利用HTML5制作圖文混排頁面48122利用HTML5搭建網(wǎng)頁結(jié)構(gòu)48123利用CSS3美化網(wǎng)頁文本68144利用CSS3新增的選擇器制作網(wǎng)頁46105利用盒子模型布局網(wǎng)頁48126利用CSS3美化列表樣式48127利用CSS3美化表格和表單樣式48128利用CSS3制作網(wǎng)頁特效48129實(shí)戰(zhàn)開發(fā)——制作信息技術(shù)網(wǎng)站首頁391210綜合復(fù)習(xí)與實(shí)訓(xùn)24611理論與實(shí)操考試66合計(jì)3981120說明1．學(xué)習(xí)材料選用與編寫（1）本課程采用電子工業(yè)出版社教材《網(wǎng)頁設(shè)計(jì)與開發(fā)（HTML5+CSS3）》，該教材采用項(xiàng)目+案例模式編寫,體現(xiàn)了先進(jìn)性和實(shí)踐性，將理論與實(shí)踐有機(jī)結(jié)合，突出實(shí)踐能力的培養(yǎng)。（2）無論是選用教材還是編寫新教材，應(yīng)力爭突出應(yīng)用性，避免把職業(yè)能力簡單理解為單純的技能操作，同時(shí)要具有前瞻性。能將本專業(yè)領(lǐng)域的發(fā)展趨勢及實(shí)際業(yè)務(wù)操作中的新知識、新技術(shù)和新方法及時(shí)納入其中。內(nèi)容做到簡明扼要，突出重點(diǎn)，圖文并茂，并具有可操作性。2．教學(xué)組織與設(shè)計(jì)（1）以完成模擬項(xiàng)目小組的工作任務(wù)為教學(xué)內(nèi)容。重點(diǎn)是教會(huì)學(xué)生如何完成工作任務(wù)，知識、技能學(xué)習(xí)結(jié)合任務(wù)完成過程來進(jìn)行。（2）圍繞工作任務(wù)學(xué)習(xí)的需要，以典型產(chǎn)品為載體設(shè)計(jì)“工作項(xiàng)目”，組織教學(xué)。本課程基于任務(wù)驅(qū)動(dòng)進(jìn)行教學(xué)內(nèi)容設(shè)計(jì)，學(xué)生按項(xiàng)目任務(wù)進(jìn)行訓(xùn)練。（3）本課程教