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

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