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

·理論講授·模擬演練項目4利用CSS3新增的選擇器制作網(wǎng)頁學時10學習目標掌握CSS3中新增加的屬性選擇器，能夠運用屬性選擇器為頁面中的元素添加樣式理解關(guān)系選擇器的用法，能夠準確判斷元素與元素間的關(guān)系掌握常用的結(jié)構(gòu)化偽類選擇器，能夠為相同名稱的元素定義不同樣式掌握偽元素選擇器的使用，能夠在頁面中插入所需要的文字或圖片內(nèi)容掌握CSS偽類，會使用CSS偽類實現(xiàn)超鏈接特效學習內(nèi)容教學方法和建議屬性選擇器的應(yīng)用關(guān)系選擇器的用法偽元素選擇器的使用CSS偽類選擇器的應(yīng)用案例驅(qū)動啟發(fā)式講授法示范法項目5利用盒子模型布局網(wǎng)頁學時12學習目標掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像理解漸變屬性的原理，能夠設(shè)置漸變背景理解元素的浮動，能夠為元素設(shè)置浮動樣式熟悉清除浮動的方法，可以使用不同方法清除浮動掌握元素的定位，能夠為元素設(shè)置常見的定位模式學習內(nèi)容教學方法和建議盒子的相關(guān)屬性背景屬性的設(shè)置方法漸變屬性的應(yīng)用設(shè)置浮動樣式清除浮動的方法元素的定位·理論講授·模擬演練項目6利用CSS3美化列表樣式學時10學習目標熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符號掌握利用列表與CSS3結(jié)合制作網(wǎng)頁導航熟練利用列表與CSS3制作列表欄目學習內(nèi)容教學方法和建議設(shè)置列表項目符號列表制作導航利用列表制作新聞欄目·理論講授·模擬演練項目7利用CSS3美化表格和表單樣式學時12學習目標了解表單功能，能夠快速創(chuàng)建表單掌握表格與表單相關(guān)元素，能夠準確定義不同的表單控件掌握表單樣式的控制，能夠美化表單界面學習內(nèi)容教學方法和建議表單功能表格與表單相關(guān)元素表單樣式的控制·理論講授·模擬演練項目8利用CSS3制作網(wǎng)頁特效學時12學習目標理解過渡屬性，能夠控制過渡時間、動畫快慢等常見過渡效果。掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。掌握CSS3中的動畫，能夠熟練制作網(wǎng)頁中常見的動畫效果。學習內(nèi)容教學方法和建議transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性transition屬性認識transform2D轉(zhuǎn)換3D轉(zhuǎn)換@keyframesanimation-name屬性animation-duration屬性animation-timing-function屬性animation-delay屬性animation-iteration-count屬性animation-direction屬性animation屬性·理論講授·模擬演練項目9實戰(zhàn)開發(fā)——制作信息技術(shù)網(wǎng)站首頁學時12學習目標掌握站點的建立，能夠建立規(guī)范的站點。利用HTML5與CSS3綜合完成首頁面的制作。學習內(nèi)容教學方法和建議建立站點站點初始化設(shè)置效果圖分析頁面布局定義公共樣式制作頭部、導航及視頻內(nèi)容制作內(nèi)容部分（新品）制作內(nèi)容部分（試裝）制作內(nèi)容部分（評測）制作腳部（信息注冊）及版權(quán)信息部分·理論講授·模擬演練四、學時分配與建議序號內(nèi)容講課實訓總課時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實戰(zhàn)開發(fā)——制作信息技術(shù)網(wǎng)站首頁391210綜合復(fù)習與實訓24611理論與實操考試66合計3981120說明1．學習材料選用與編寫（1）本課程采用電子工業(yè)出版社教材《網(wǎng)頁設(shè)計與開發(fā)（HTML5+CSS3）》，該教材采用項目+案例模式編寫,體現(xiàn)了先進性和實踐性，將理論與實踐有機結(jié)合，突出實踐能力的培養(yǎng)。（2）無論是選用教材還是編寫新教材，應(yīng)力爭突出應(yīng)用性，避免把職業(yè)能力簡單理解為單純的技能操作，同時要具有前瞻性。能將本專業(yè)領(lǐng)域的發(fā)展趨勢及實際業(yè)務(wù)操作中的新知識、新技術(shù)和新方法及時納入其中。內(nèi)容做到簡明扼要，突出重點，圖文并茂，并具有可操作性。2．教學組織與設(shè)計（1）以完成模擬項目小組的工作任務(wù)為教學內(nèi)容。重點是教會學生如何完成工作任務(wù)，知識、技能學習結(jié)合任務(wù)完成過程來進行。（2）圍繞工作任務(wù)學習的需要，以典型產(chǎn)品為載體設(shè)計“工作項目”，組織教學。本課程基于任務(wù)驅(qū)動進行教學內(nèi)容設(shè)計，學生按項目任務(wù)進行訓練。（3）本課程教學重點是：循環(huán)語句和分支語句、組合數(shù)據(jù)類型的使用。本課程教學難點是：組合數(shù)據(jù)類型的使用，函數(shù)的定義和使用。3.補充說明：同個課程不同年級可能存在每個項目分配課時不一樣的問題，主要是根據(jù)當前學期總課時進行適當調(diào)配，課時多時每個項目會在原來基礎(chǔ)上增加一些課外補充實訓，課時少時會在原有基礎(chǔ)上適當減少一些補充實訓內(nèi)容，盡量完成本項目基本任務(wù)。XXX班XX學年度第X學期授課計劃序號周次課時數(shù)教學內(nèi)容教學方式課外作業(yè)備注116項目一：利用HTML5制作圖文混排頁面任務(wù)1第一個網(wǎng)頁的創(chuàng)建任務(wù)2頁面格式化標簽的應(yīng)用任務(wù)3HTML5標簽屬性的應(yīng)用任務(wù)4文本樣式標簽的應(yīng)用任務(wù)5文本格式化標簽的應(yīng)用任務(wù)6文本語義標簽的應(yīng)用任務(wù)7圖像標簽的應(yīng)用理實一體復(fù)習項目一所學標簽意義226項目一：利用HTML5制作圖文混排頁面任務(wù)8超鏈接標簽的應(yīng)用任務(wù)9音頻和視頻標簽的應(yīng)用項目實戰(zhàn)制作杭州亞運會精彩賞析課后拓展任務(wù)與項目總結(jié)理實一體項目一課后習題336項目二：利用HTML5搭建網(wǎng)頁結(jié)構(gòu)任務(wù)1ul元素的應(yīng)用任務(wù)2ol元素的應(yīng)用任務(wù)3dl元素的應(yīng)用任務(wù)4列表的嵌套應(yīng)用任務(wù)5header元素的應(yīng)用任務(wù)6nav元素的應(yīng)用任務(wù)7article、section、aside、footer元素的應(yīng)用理實一體復(fù)習項目二所學標簽意義446項目二：利用HTML5搭建網(wǎng)頁結(jié)構(gòu)任務(wù)8figure和figcaption元素的應(yīng)用任務(wù)9hgroup元素的應(yīng)用任務(wù)10details和summary元素的應(yīng)用項目實戰(zhàn)制作“青少年心理健康教育”頁面課后拓展任務(wù)與項目總結(jié)理實一體項目二課后習題XXX班XX學年度第X學期授課計劃序號周次課時數(shù)教學內(nèi)容教學方式課外作業(yè)備注556項目三：利用CSS3美化網(wǎng)頁文本任務(wù)1行內(nèi)式的應(yīng)用任務(wù)2內(nèi)嵌式的應(yīng)用任務(wù)3鏈入式的應(yīng)用任務(wù)4導入式的應(yīng)用任務(wù)5標簽選擇器和類選擇器的應(yīng)用任務(wù)6ID選擇器的應(yīng)用任務(wù)7通配符選擇器的應(yīng)用任務(wù)8標簽指定式選擇器的應(yīng)用任務(wù)9后代選擇器的應(yīng)用理實一體CSS3基礎(chǔ)知識記憶666項目三：利用CSS3美化網(wǎng)頁文本任務(wù)10并集選擇器的應(yīng)用任務(wù)11字體樣式屬性的應(yīng)用任務(wù)12@font-face的應(yīng)用任務(wù)13文本外觀屬性的應(yīng)用任務(wù)14文本裝飾與文本陰影屬性的應(yīng)用任務(wù)15文本溢出屬性的應(yīng)用任務(wù)16CSS3層疊性和繼承性的應(yīng)用任務(wù)17CSS3優(yōu)先級的應(yīng)用項目實戰(zhàn)制作“反詐小課堂”頁面理實一體項目三課后習題776項目三：利用CSS3美化網(wǎng)頁文本課后拓展任務(wù)與項目總結(jié)項目四：利用CSS3新增的選擇器制作網(wǎng)頁任務(wù)1屬性選擇器的應(yīng)用任務(wù)2子代選擇器的應(yīng)用任務(wù)3兄弟選擇器的應(yīng)用任務(wù)4:root選擇器的應(yīng)用任務(wù)5:not選擇器的應(yīng)用任務(wù)6:only-child選擇器的應(yīng)用理實一體CSS3新增選擇器知識點記憶XXX班XX學年度第X學期授課計劃序號周次課時數(shù)教學內(nèi)容教學方式課外作業(yè)備注886項目四：利用CSS3新增的選擇器制作網(wǎng)頁和:last-child選擇器的應(yīng)用f-type(n)和:nth-last-of-type(n)選擇器的應(yīng)用任務(wù)10:before選擇器的應(yīng)用任務(wù)11:after選擇器的應(yīng)用任務(wù)12鏈接偽類選擇器的應(yīng)用項目實戰(zhàn)制作“安全教育”頁面課后拓展任務(wù)與項目總結(jié)理實一體項目四課后習題996項目五利用盒子模型布局網(wǎng)頁 任務(wù)1盒子模型基本屬性的應(yīng)用 任務(wù)2border屬性的應(yīng)用任務(wù)3border-radius屬性的應(yīng)用 任務(wù)4padding和margin屬性的應(yīng)用任務(wù)5box-sizing屬性的應(yīng)用任務(wù)6box-shadow屬性的應(yīng)用任務(wù)7float屬性的應(yīng)用任務(wù)8盒子模型清除浮動的應(yīng)用任務(wù)9position屬性的應(yīng)用理實一體盒子模型相關(guān)屬性意義記憶與背誦10106項目五利用盒子模型布局網(wǎng)頁任務(wù)10背景屬性的應(yīng)用 任務(wù)11opacity屬性的應(yīng)用 任務(wù)12漸變屬性的應(yīng)用 任務(wù)13重復(fù)漸變屬性的應(yīng)用 任務(wù)14使用盒子模型布局網(wǎng)頁項目實戰(zhàn)制作“消防安全知識教育”頁面 課后拓展任務(wù)與項目總結(jié)理實一體項目五課后習題XXX班XX學年度第X學期授課計劃序號周次課時數(shù)教學內(nèi)容教學方式課外作業(yè)備注11116期中考試項目六利用CSS3美化列表樣式任務(wù)1設(shè)置列表項目符號任務(wù)2制作橫向?qū)Ш?任務(wù)3制作立體導航 理實一體補充任務(wù)12126任務(wù)4制作下拉式菜單導航 任務(wù)5制作下拉式面板導航項目6利用CSS3美化列表樣式任務(wù)6制作旅游攻略欄目 任務(wù)7設(shè)計圖片列表版式 項目實戰(zhàn)制作“青年教育宣傳”頁面拓展任務(wù)與項目總結(jié)理實一體項目六課后習題13136項目七利用CSS3美化表格和表單樣式任務(wù)1設(shè)置表格的背景顏色 任務(wù)2設(shè)置表格的邊框樣式任務(wù)3設(shè)置單元格的邊框樣式 任務(wù)4設(shè)置表頭的樣式任務(wù)5制作網(wǎng)頁通訊錄任務(wù)6制作用戶登錄表單任務(wù)7制作并美化用戶注冊表單理實一體表格和表單相關(guān)標記和屬性記憶背誦14146項目7利用CSS3美化表格和表單樣式任務(wù)8制作并美化用戶信息注冊表單項目實戰(zhàn)制作“景點排行榜”頁面課后拓展任務(wù)與項目總結(jié)理實一體項目七課后習題XXX班XX學年度第X學期授課計劃序號周次課時數(shù)教學內(nèi)容教學方式課外作業(yè)備注15156項目八利用CSS3制作網(wǎng)頁特效任務(wù)1定義平移效果