廣州東華職業(yè)學院

廣州東華職業(yè)學院Web前端開發(fā)課程標準課程名稱Web前端開發(fā)課程代碼6221998課程性質專業(yè)核心課學分4開設單位信息工程學院理論學時27適用專業(yè)軟件技術實踐學時27適合年級一年級總學時54考核評價方式考試選用教材Web前端開發(fā)（初級）（下冊）教材出版社電子工業(yè)出版社教材作者工業(yè)和信息化部教育與考試中心課程定位1.課程性質本課程是軟件技術專業(yè)開設的專業(yè)核心課程，屬于必修課程。2.課程作用《Web前端開發(fā)》在專業(yè)人才培養(yǎng)方案中的定位是專業(yè)核心課程，通過本課程的學習，使學生掌握網(wǎng)頁開發(fā)的主流編程語言，包括HTML5、CSS3、jQuery，熟練使用常用的開發(fā)編輯器如HBuilderX，并能運用網(wǎng)頁開發(fā)語言和編輯器開發(fā)相對成熟且適配性良好的項目，促進學生提高動手實踐能力和綜合職業(yè)能力，形成創(chuàng)新意識以及團隊協(xié)作精神。。3.課程銜接在課程設置上，課程內容重點學習HTML5、CSS3、jQuery；后續(xù)課程有《Vue框架開發(fā)》和《移動應用開發(fā)》，這兩門課都需要用到HTML5、CSS3、jQuery相關知識和編程思想。教學設計思路本課程以企業(yè)前端項目模塊項目為載體，與企業(yè)合作開發(fā)12個學習情境；根據(jù)崗位（群）工作任務要求，結合課程在人才培養(yǎng)方案中的地位和作用，確定教學目標，選取教學內容；本課程采用行動導向教學模式；基于混合式教學理念組織教學，堅持以學生為中心，真正做到教、學、做、評融為一體，并有機融入思政元素。三、教學目標（一）課程總體目標通過本課程學習，使學生能熟練運用HTML5中的文字、鏈接、列表、表格、表單、圖像、多媒體、框架元素標志及CSS3新屬性中的過渡動畫設計出多窗口網(wǎng)頁、動態(tài)網(wǎng)頁；掌握HBuilderX進行網(wǎng)站的導入、規(guī)劃、管理、發(fā)布的相關技術及網(wǎng)頁制作的操作技能，能獨立設計中小型Web項目。（二）課程具體目標通過本課程的學習，學生要達到以下目標：（1）知識目標1.熟悉HTML5語言的作用和開發(fā)環(huán)境，能夠編寫HTML5代碼；2.掌握常用的HTML5標簽，能夠實現(xiàn)基本的圖文信息顯示；3.理解HTML5頁面框架的作用，能夠針對需求進行框架的設計；4.掌握各類HTML5表單元素標簽，能夠進行表單設計；5.掌握各類HTML5多媒體元素標簽，能夠進行多媒體頁面設計；6.掌握CSS3樣式的基本使用方法，能夠應用CSS3樣式表美化頁面；7.掌握CSS3網(wǎng)頁布局的方法，能夠結合DIV標簽進行頁面布局；8.掌握jQuery的語法特點，能使用jQuery輕量級框架快速實現(xiàn)邏輯與功能。（2）能力目標1.能獨立進行資料收集與整理、具備用戶需求的理解能力；2.能根據(jù)項目需求，具備項目頁面的設計與實現(xiàn)能力；3.能根據(jù)靜態(tài)頁面設計原則與CSS3技術規(guī)范，實現(xiàn)頁面美化與布局；4.具有綜合應用HTML5語言、CSS3樣式、DIV布局進行頁面的設計、編碼、調試、維護能力；5.能使用jQuery輕量級框架快速實現(xiàn)邏輯與功能。（3）素質目標1.養(yǎng)成善于思考、深入研究的良好自主學習的習慣以及工匠精神；2.通過項目案例教學，培養(yǎng)學習者的分析問題、解決問題的能力；3.具有吃苦耐勞、團隊協(xié)作精神，溝通交流和書面表達能力；4.通過課外拓展訓練、培養(yǎng)學習者的創(chuàng)新意識；5.具有愛崗敬業(yè)、遵守職業(yè)道德規(guī)范、誠實、守信的高尚品質。（4）其它目標課程在教學過程中，突出學生主體，采用項目+案例教學，啟發(fā)學生善于觀察、自主思考、獨立分析問題與解決問題的能力。通過以學生為主體的學習，使學生在觀察、思維、推理與判斷、分析與解決問題能力方面有明顯的提高，對生產(chǎn)型實踐中遇到的問題能通過分析處理并舉一反三得到正確、靈活的解決，體現(xiàn)注重實際應用技能的培養(yǎng)目標。四、教學重難點1.教學重點及處理方法能使用HTML5新標簽實現(xiàn)響應性布局網(wǎng)頁。該教學重點可以通過與舊標簽的對比以理解新標簽的特點和優(yōu)勢，通過項目導入，實際感受HTML5新標簽的使用場景；能使用CSS3新屬性實現(xiàn)過渡動畫以及幀動畫等網(wǎng)頁特效。該教學重點可以通過項目模塊演示以直觀呈現(xiàn)CSS3新屬性的效果與作用，通過項目導入，實際感受CSS3新屬性的使用場景；能使用jQuery實現(xiàn)DOM選擇器及單一功能。該教學重點可以通過實際項目模塊分解代碼實現(xiàn)及功能演示，與原生JavaScript對比以體現(xiàn)jQuery輕量級框架的特點和優(yōu)勢，通過項目導入，實際感受jQuery輕量級框架的使用場景；教學難點及處理方法能使用CSS3盒模型實現(xiàn)頁面的響應式排版。該教學難點可以通過講解盒模型原理以及定位屬性加深學生對盒模型的理解，通過百分比布局實現(xiàn)響應式的排版與不同分辨設備的適配；能使用jQuery輕量級框架實現(xiàn)各類型事件的監(jiān)聽。該教學難點可以通過學習各類型事件的觸發(fā)原理，以及對比原生JavaScript的事件監(jiān)聽達到觸類旁通效果，通過項目導入，實際感受jQuery輕量級框架事件監(jiān)聽的使用場景；五、課程內容和教學安排在內容選取上，根據(jù)人才培養(yǎng)目標、崗位要求和前后續(xù)課程的銜接，統(tǒng)籌考慮和選取教學內容。表1教學內容和教學安排表序號單元名稱（工作任務、教學單元或模塊）教學內容教學要求（按知識、能力、素質（含課程思政）三方面進行描述）理論課時實踐課時1Web簡介（1）網(wǎng)頁、網(wǎng)站及主頁的概念；（2）網(wǎng)頁中的主要元素；（3）各種網(wǎng)頁制作工具；（4）網(wǎng)站的整體規(guī)劃；掌握網(wǎng)頁、網(wǎng)站及主頁的概念；了解網(wǎng)頁中的主要元素；了解各種網(wǎng)頁制作工具；了解網(wǎng)站的整體規(guī)劃；了解網(wǎng)站的設計流程202HTML5基礎HTML5概述HTML5全局屬性HTML5元素HTML5的預留字符熟悉網(wǎng)頁結構了解HTML5全局屬性與事件熟悉HTML5常用元素熟悉HTML5預留字符443CSS3基礎CSS3概述與發(fā)展CSS3樣式單的使用CSS3的兩個特性CSS3的基本語法了解CSS3的發(fā)展熟悉CSS3樣式單的使用熟悉CSS3特性熟悉CSS3的語法特點224CSS3選擇器元素選擇器通配符選擇器屬性選擇器派生選擇器Id選擇器類選擇器偽類選擇器偽元素選擇器熟悉掌握各種選擇器的使用了解選擇器的優(yōu)先級了解選擇器權重的計算225CSS3屬性背景屬性字體屬性文本屬性尺寸屬性列表屬性表格屬性內容屬性掌握CSS3的各種屬性熟悉各種屬性的使用場景446CSS盒模型與布局屬性CSS邊距CSS邊框CSS輪廓CSS浮動屬性CSS定位屬性掌握CSS的邊框以及內外邊距的屬性設置熟悉CSS浮動以及清除浮動熟悉CSS的四種定位能快速使用CSS布局屬性完成靜態(tài)頁面的布局647Jquery語法基礎Jquery的基礎知識分支循環(huán)數(shù)組字符串操作正則表達式對象函數(shù)了解Jquery發(fā)展熟悉Jquery基礎語法知識熟悉判斷分支以及幾種循環(huán)特點掌握數(shù)組的定義以及操作掌握字符串的各種操作熟悉正則表達式的語法以及組成熟悉對象的聲明和實例化熟悉使用各種內置函數(shù)和自定義函數(shù)688Jquery對象模型BOM對象BOM操作DOM對象DOM操作熟悉各種BOM對象，以及掌握對BOM對象的操作熟悉各種DOM對象，以及掌握對DOM對象的操作掌握節(jié)點的獲取以及操作449Jquery事件處理窗口事件鼠標事件鍵盤事件事件的冒泡與捕獲掌握各類事件的使用方法能實現(xiàn)對事件的冒泡及捕獲24學時合計：64學時（其中實踐教學學時比例為50%）理論學時：32實踐學時：32六、教學策略1.教學模式理論+實操的教學模式教學方法（含學習建議）教學采用“四階段教學法”，將“教、學、練、做”融為一體。教學體現(xiàn)“教師為主導，學生為主體，訓練為主線”的原則，課堂上可以采用“四階段教學法”：

第1個階段，案例引入，提出問題。根據(jù)課前導入的知識點，案例演示，提出問題，講解案例應用背景，給學生一個切入點，建立感性認識。目的是激發(fā)學生的學習興趣、讓學生感到學有所用，從而明確本次課的教學目標。

第2個階段，教師實操、講解，學生學習、實操。教師教授邊知識點邊結合知識點進行案例實操，引導學生學習與思考，項目導入，給學生分配課堂任務，引導學生自主完成任務，培養(yǎng)學生的自主學習意識和學習方法。學生在學習和嘗試解決問題過程中，發(fā)現(xiàn)問題，提出問題，在問題的引導下學習相關的知識和操作技能。

第3個階段，歸納總結，引申提高。在每次課結束前，引導學生進行歸納總結。對本次課的實際意義、重點、難點、容易出錯處等及時進行總結。并針對案例的不足之處，進行引申和提高。注意在這個階段，強調的是“引導”學生，而不是老師講解。

第4個階段，舉一反三、學以致用。案例源于生活，最終要應用于生活。為了使學生能學以致用、舉一反三、觸類旁通，每次教學結束時及時布置相關的課后練習，使學生在課后進一步復習鞏固，并且將課后作業(yè)納入形成性考核的內容之一。同時給出下一次課的學習內容，提示學生在課下完成自主學習和案例練習。教學手段教學中采用電子演示文稿、投影、多媒體聯(lián)機演示、網(wǎng)絡教學等各種先進的教學手段，使課堂教學生動活潑、引人入勝，提高了教學效果，同時提高了教學效率。包括：

（1）利用極域多媒體教學系統(tǒng)廣播教學。把學生的共同問題（需要提示的重點）通過“廣播教學”，邊講邊演示，使學生即時看到操作效果。

（2）利用網(wǎng)絡將課堂教學延伸到課外，學生根據(jù)需要通過網(wǎng)絡學習有關的內容，并進行在線答疑和討論。4.課程思政實施策略采用啟發(fā)式、知識潛意識、專題嵌入式、隱性融入是，將課堂教學和社會服務結合起來。從前端開發(fā)過程中的現(xiàn)象出發(fā)，運用馬克思哲學原理分析現(xiàn)象，解釋前端開發(fā)的原理與本質，結合jQuery面向對象的思想，進一步將思想宗旨教育內容潤物細無聲的融入，并進一步啟發(fā)學生思考，采用發(fā)散思維的課堂頭南風吧方式，鼓勵學生積極思考，引導學生發(fā)表自己的觀點，激發(fā)學生對前端開發(fā)概念和原理的拓展，完成對新知識的生化遷移運用，從而達到課堂思政的目的。七、教學組織與實施教學組織與實施的五個環(huán)節(jié)：（一）備課：消化課程標準，分析學情、編制教案和PPT等。（二）上課：完成教學目標。（三）作業(yè)與批改：按教學大綱(課程標準)和教科書的要求布置作業(yè)，作業(yè)的目的要明確，每項作業(yè)都有明確的意圖，為鞏固學生知識、技能訓練服務。（四）課后輔導：根據(jù)學生個別差異、因材施教。（五）教學