《Web前端開(kāi)發(fā)》課程標(biāo)準(zhǔn)（含課程思政）

《Web前端開(kāi)發(fā)》課程標(biāo)準(zhǔn)一、課程基本信息表1課程信息表課程名稱Web前端開(kāi)發(fā)授課單位工程科技學(xué)院課程編碼1019350課程類別（模塊）職業(yè)核心技術(shù)模塊前導(dǎo)課程計(jì)算機(jī)基礎(chǔ)、圖形圖像處理后續(xù)課程網(wǎng)站開(kāi)發(fā)與管理總學(xué)時(shí)90課程類型理論課是□總學(xué)分5實(shí)踐課是□考核性質(zhì)考試?yán)碚?實(shí)踐是□理實(shí)一體化是適用專業(yè)計(jì)算機(jī)應(yīng)用表2課程標(biāo)準(zhǔn)開(kāi)發(fā)團(tuán)隊(duì)名單1序號(hào)姓名工作單位職稱/職務(wù)注1：指參與課程標(biāo)準(zhǔn)制定的主要成員，包括校外專家二、課程定位和課程設(shè)計(jì)（一）課程性質(zhì)與作用本課程是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的職業(yè)核心技術(shù)模塊課程之一，是基于工作過(guò)程系統(tǒng)化的課程，是一門實(shí)踐性和應(yīng)用性都很強(qiáng)的課程。為計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)學(xué)生將來(lái)從事職場(chǎng)的web前端開(kāi)發(fā)崗位的發(fā)展打下良好基礎(chǔ)，并為該專業(yè)后續(xù)網(wǎng)站開(kāi)發(fā)與管理的學(xué)習(xí)打下網(wǎng)頁(yè)前端設(shè)計(jì)基礎(chǔ)。（二）課程基本理念本課程的設(shè)計(jì)“以能力為本位、以職業(yè)實(shí)踐為主線、以項(xiàng)目引導(dǎo)，以就業(yè)為導(dǎo)向”，打破了傳統(tǒng)的按照知識(shí)體系教授課程的模式，以學(xué)生日后在從事Web前端開(kāi)發(fā)行業(yè)中所需的實(shí)際技能為目標(biāo)，進(jìn)行基于工作項(xiàng)目和工作任務(wù)的課程開(kāi)發(fā)與設(shè)計(jì)，既保證滿足從事網(wǎng)站前端開(kāi)發(fā)所必須的專業(yè)知識(shí)、專業(yè)技能，又保持原有知識(shí)體系的完整性，既培養(yǎng)了學(xué)生的職業(yè)能力，同時(shí)也為學(xué)生的可持續(xù)發(fā)展奠定了基礎(chǔ)。（三）課程設(shè)計(jì)思路本課程是以“基于工作過(guò)程”為指導(dǎo)，通過(guò)對(duì)Web前端開(kāi)發(fā)所涉及到的崗位群進(jìn)行工作任務(wù)和職業(yè)能力分析，以項(xiàng)目引導(dǎo)，以就業(yè)為導(dǎo)向，以培養(yǎng)學(xué)生的職業(yè)技能為目標(biāo)、以學(xué)生為主體、以項(xiàng)目為載體，將知識(shí)、理論和實(shí)踐一體化的課程設(shè)計(jì)思路。在宏觀教學(xué)設(shè)計(jì)上突破以知識(shí)點(diǎn)的層次遞進(jìn)為體系的傳統(tǒng)模式，而是將職業(yè)工作過(guò)程系統(tǒng)化，以工作過(guò)程為參照系，按照工作過(guò)程來(lái)序化知識(shí)，培養(yǎng)學(xué)生規(guī)范、高效率、高質(zhì)量地應(yīng)用能力，使學(xué)生既學(xué)習(xí)崗位知識(shí)又培養(yǎng)學(xué)生職業(yè)素質(zhì)，鍛煉學(xué)生的方法能力與社會(huì)能力。每個(gè)項(xiàng)目的學(xué)習(xí)以“做”為中心，教和學(xué)都圍繞著做，在做中學(xué)，在學(xué)中做，做到“教、學(xué)、做”一體化，達(dá)到理論與實(shí)踐的統(tǒng)一，同時(shí)注重培養(yǎng)學(xué)生的自主學(xué)習(xí)能力和職業(yè)素養(yǎng)的提升。本課程思政內(nèi)容及單元的知識(shí)、技能按照相應(yīng)的專項(xiàng)能力在實(shí)際職業(yè)工作中出現(xiàn)的頻度、內(nèi)容的難度和要求掌握的程度進(jìn)行排序，如下所示：課程思政內(nèi)容：1.信息社會(huì)責(zé)任；2.樹(shù)立正確的技能觀；3.軟件工匠精神培養(yǎng)。三、課程目標(biāo)本著以項(xiàng)目引導(dǎo)，以就業(yè)為導(dǎo)向，以培養(yǎng)學(xué)生的職業(yè)技能為目標(biāo)、以學(xué)生為主體、以項(xiàng)目為載體，將知識(shí)、理論和實(shí)踐一體化的課程設(shè)計(jì)思路。根據(jù)《1+X認(rèn)證Web前端開(kāi)發(fā)的職業(yè)技能等級(jí)認(rèn)證標(biāo)準(zhǔn)》，確定本課程的知識(shí)目標(biāo)、能力目標(biāo)和素質(zhì)目標(biāo)。（一）工作任務(wù)目標(biāo)（1）掌握web知識(shí)，掌握HTML常用標(biāo)簽的語(yǔ)法及使用。（2）掌握CSS語(yǔ)法，CSS盒模型。（3）掌握使用DIV標(biāo)簽與CSS進(jìn)行網(wǎng)頁(yè)布局的方法與技巧。（4）掌握HTML5新增元素、CSS3新特性知識(shí)；（二）職業(yè)能力目標(biāo)（1）能夠熟練使用前端設(shè)計(jì)軟件進(jìn)行網(wǎng)頁(yè)制作。（2）能夠熟練使用HTML標(biāo)簽編寫(xiě)制作網(wǎng)頁(yè)。（3）能夠熟練使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局。（4）具有設(shè)計(jì)與制作CSS網(wǎng)頁(yè)特效的能力。（5）能夠建立“內(nèi)容”與“表現(xiàn)”相分離的網(wǎng)頁(yè)。（6）能夠使用CSS和腳本語(yǔ)言實(shí)現(xiàn)網(wǎng)頁(yè)交互效果。（三）素質(zhì)目標(biāo)1.職業(yè)態(tài)度和素質(zhì)要求（1）培養(yǎng)學(xué)生良好的心理品質(zhì)和職業(yè)道德素養(yǎng)；（2）提升學(xué)生對(duì)社會(huì)主義核心價(jià)值觀的領(lǐng)悟程度；（3）培養(yǎng)學(xué)生具有良好的溝通能力、團(tuán)隊(duì)協(xié)作能力；（4）培養(yǎng)學(xué)生具有出色的執(zhí)行能力和組織能力；（5）培養(yǎng)學(xué)生具有自主學(xué)習(xí)能力和知識(shí)應(yīng)用能力；（6）培養(yǎng)學(xué)生能夠嚴(yán)守商業(yè)秘密的個(gè)人品質(zhì)；（7）培養(yǎng)學(xué)生具有一定的知識(shí)創(chuàng)新能力。2.思政育人目標(biāo)（1）將習(xí)近平新時(shí)代中國(guó)特色社會(huì)理論、社會(huì)主義核心價(jià)值觀和中華優(yōu)秀傳統(tǒng)文化教育內(nèi)容融入到本課程的教學(xué)要求中，注重“術(shù)道結(jié)合”；（2）培養(yǎng)學(xué)生高度的信息社會(huì)責(zé)任感。在現(xiàn)實(shí)世界和虛擬空間中都能遵守相關(guān)法律法規(guī)，信守信息社會(huì)的道德與倫理準(zhǔn)則；具備較強(qiáng)的信息安全意識(shí)與防護(hù)能力，能有效維護(hù)信息活動(dòng)中個(gè)人、他人的合法權(quán)益和公共信息安全；關(guān)注信息技術(shù)創(chuàng)新所帶來(lái)的社會(huì)問(wèn)題，對(duì)信息技術(shù)創(chuàng)新所產(chǎn)生的新觀念和新事物，能從社會(huì)發(fā)展、職業(yè)發(fā)展的視角進(jìn)行理性的判斷和負(fù)責(zé)的行動(dòng)。（3）借鑒國(guó)內(nèi)成功實(shí)踐案例的優(yōu)秀經(jīng)驗(yàn)，剖析本行業(yè)領(lǐng)軍人物的奮斗故事，激發(fā)學(xué)生對(duì)社會(huì)主義核心價(jià)值觀的認(rèn)同感，培養(yǎng)學(xué)生誠(chéng)實(shí)、守信、堅(jiān)忍不拔的性格，提高學(xué)生在溝通表達(dá)、自我學(xué)習(xí)和團(tuán)隊(duì)協(xié)作方面的能力；（4）樹(shù)立正確的技能觀，努力提高自己的技能，為社會(huì)和人民造福，絕不利用自己的技能去從事危害公眾利益的活動(dòng)，包括構(gòu)造虛假信息和不良內(nèi)容、黑客行為和攻擊網(wǎng)站等，提倡健康的網(wǎng)絡(luò)道德準(zhǔn)則和交流活動(dòng)，鼓勵(lì)學(xué)生利用自己的所學(xué)的專業(yè)知識(shí)，積極參與社會(huì)科學(xué)普及活和應(yīng)用推廣活動(dòng)；（5）培養(yǎng)學(xué)生的軟件工匠精神，在潛移默化中培育社會(huì)主義核心價(jià)值觀，提高綜合職業(yè)素養(yǎng)，樹(shù)立社會(huì)主義職業(yè)精神。3.項(xiàng)目/任務(wù)的思政目標(biāo)（1）項(xiàng)目1/任務(wù)1：培養(yǎng)學(xué)生對(duì)前端設(shè)計(jì)師工作崗位及工作過(guò)程進(jìn)行感性認(rèn)知。通過(guò)欣賞各種類型的網(wǎng)站，培養(yǎng)學(xué)生的審美觀；通過(guò)欣賞政府部門的網(wǎng)站，引導(dǎo)學(xué)生樹(shù)立愛(ài)國(guó)意識(shí)；（2）項(xiàng)目1/任務(wù)2：理解并敬重工匠精神，在學(xué)習(xí)中努力發(fā)揚(yáng)工匠精神。（3）項(xiàng)目1/任務(wù)3：通過(guò)介紹Web相關(guān)知識(shí)，剖析本行業(yè)領(lǐng)軍人物的奮斗故事，激發(fā)學(xué)生對(duì)社會(huì)主義核心價(jià)值觀的認(rèn)同感，培養(yǎng)學(xué)生誠(chéng)實(shí)、守信、堅(jiān)忍不拔的性格；（4）項(xiàng)目1/任務(wù)4：通過(guò)制作慶祝建黨100周年的新聞活動(dòng)頁(yè)面，激發(fā)學(xué)生的愛(ài)國(guó)熱情；（5）項(xiàng)目2/任務(wù)1：讓學(xué)生了解CSS盒模型的重要性，培養(yǎng)學(xué)生的職業(yè)素質(zhì)和道德規(guī)范；做事認(rèn)真負(fù)責(zé)，一絲不茍，每一條語(yǔ)句都經(jīng)過(guò)周密思考，培養(yǎng)學(xué)生的軟件工匠精神。（6）項(xiàng)目2/任務(wù)2：在學(xué)習(xí)的過(guò)程中，培養(yǎng)學(xué)生的擔(dān)當(dāng)精神，弘揚(yáng)奮斗的精神，培養(yǎng)學(xué)生的職業(yè)素質(zhì)和道德規(guī)范；（7）項(xiàng)目2/任務(wù)3：通過(guò)DIV+CSS框架搭建，引導(dǎo)學(xué)生了解職業(yè)生涯規(guī)劃的重要性，培養(yǎng)學(xué)生做事有條理，有規(guī)劃，培養(yǎng)學(xué)生的軟件工匠精神。（8）項(xiàng)目3/任務(wù)1：通過(guò)網(wǎng)頁(yè)布局引導(dǎo)學(xué)生充分認(rèn)識(shí)人生規(guī)劃的意義與重要性，引導(dǎo)學(xué)生做好人生規(guī)劃。同時(shí)引導(dǎo)學(xué)生追求技術(shù)創(chuàng)新，服務(wù)國(guó)家技術(shù)發(fā)展。（9）項(xiàng)目3/任務(wù)2：通過(guò)素材案例引領(lǐng)，激發(fā)學(xué)生的愛(ài)國(guó)熱情。（10）項(xiàng)目3/任務(wù)3：通過(guò)利用HTML表單元素制作當(dāng)前熱點(diǎn)“華為事件”的調(diào)查問(wèn)卷頁(yè)面，激發(fā)學(xué)生的科技報(bào)國(guó)的理想信念，并勉勵(lì)同學(xué)們要開(kāi)闊眼界、提升境界、放眼未來(lái)做一個(gè)有大格局大情懷的時(shí)代新青年。（11）項(xiàng)目3/任務(wù)4：引導(dǎo)學(xué)生樹(shù)立安全保密意識(shí)，遵守行業(yè)規(guī)范，提倡健康的網(wǎng)絡(luò)道德準(zhǔn)則和交流活動(dòng)。（12）項(xiàng)目4/任務(wù)1：樹(shù)立正確的技能觀，努力提高自己的技能，為社會(huì)和人民造福；加深學(xué)生對(duì)專業(yè)知識(shí)技能學(xué)習(xí)的認(rèn)可度與專注度。（13）項(xiàng)目4/任務(wù)2：培養(yǎng)學(xué)生在設(shè)計(jì)前臺(tái)界面時(shí)的審美能力；提高學(xué)生綜合運(yùn)用所學(xué)知識(shí)的能力。（14）項(xiàng)目4/任務(wù)3：培養(yǎng)學(xué)生的計(jì)算思維、數(shù)字化創(chuàng)新與發(fā)展、信息社會(huì)責(zé)任；軟件行業(yè)規(guī)劃解析，培養(yǎng)學(xué)生的軟件工匠精神。（15）項(xiàng)目4/任務(wù)4：培養(yǎng)學(xué)生的創(chuàng)新思維，融會(huì)貫通的能力；培養(yǎng)學(xué)生的軟件工匠精神。四、課程內(nèi)容與要求高職院校主要以培養(yǎng)高技能人才為辦學(xué)定位思想，結(jié)合我校具體情況，以現(xiàn)代職教理念為指導(dǎo)，以培養(yǎng)應(yīng)用型人才為目標(biāo)，通過(guò)采用項(xiàng)目教學(xué)法，通過(guò)六個(gè)項(xiàng)目漸進(jìn)式教學(xué)，培養(yǎng)學(xué)生扎實(shí)、系統(tǒng)的web前臺(tái)頁(yè)面開(kāi)發(fā)能力。最終培養(yǎng)的人才應(yīng)該具有扎實(shí)的基本功，一定的相關(guān)專業(yè)知識(shí)，較強(qiáng)的應(yīng)用和開(kāi)發(fā)能力，較高的職業(yè)素養(yǎng)，以及獲取知識(shí)的能力，獨(dú)立思考的能力和創(chuàng)新能力?；陧?xiàng)目的實(shí)施工程，進(jìn)行項(xiàng)目的任務(wù)分解，為每個(gè)項(xiàng)目確定技能點(diǎn)與知識(shí)點(diǎn)。表1課程教學(xué)內(nèi)容、地點(diǎn)、學(xué)時(shí)安排總表序號(hào)項(xiàng)目任務(wù)學(xué)習(xí)成果授課地點(diǎn)授課教師學(xué)時(shí)/實(shí)踐學(xué)時(shí)1項(xiàng)目1Web頁(yè)面制作基礎(chǔ)任務(wù)1崗位任知作品機(jī)房宋麗萍2/1任務(wù)2網(wǎng)站制作流程介紹機(jī)房宋麗萍2/1任務(wù)3Web相關(guān)知識(shí)機(jī)房宋麗萍4/2任務(wù)4HTML基礎(chǔ)機(jī)房宋麗萍20/102項(xiàng)目2CSS基礎(chǔ)任務(wù)1CSS盒模型作品機(jī)房宋麗萍4/2任務(wù)2CSS屬性機(jī)房宋麗萍12/6任務(wù)3DIV+CSS搭建網(wǎng)頁(yè)框架機(jī)房宋麗萍6/33項(xiàng)目3HTML5技術(shù)任務(wù)1HTML5新增結(jié)構(gòu)化標(biāo)簽作品機(jī)房宋麗萍2/1任務(wù)2.浮動(dòng)及媒體元素的插入機(jī)房宋麗萍2/1任務(wù)3HTML5表單機(jī)房宋麗萍4/2任務(wù)4HTML5表單表單驗(yàn)證機(jī)房宋麗萍6/34項(xiàng)目4CSS3技術(shù)任務(wù)1CSS3邊框與背景作品機(jī)房宋麗萍4/2任務(wù)2CSS3文本與多列機(jī)房宋麗萍4/2任務(wù)3CSS3變形機(jī)房宋麗萍8/4任務(wù)4CSS3動(dòng)畫(huà)機(jī)房宋麗萍8/4注：學(xué)時(shí)設(shè)置應(yīng)與2021版人才培養(yǎng)方案保持一致。表2教學(xué)內(nèi)容與教學(xué)實(shí)施安排表項(xiàng)目一：Web頁(yè)面制作基礎(chǔ)任務(wù)1：崗位任知課時(shí)：2知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解網(wǎng)站制作的相關(guān)崗位。2.了解網(wǎng)站制作相關(guān)崗位所需技能。3.了解網(wǎng)頁(yè)的基本構(gòu)成元素4.了解網(wǎng)頁(yè)的技術(shù)構(gòu)成5.理解網(wǎng)站、網(wǎng)頁(yè)的概念6.掌握HTML文檔的基本結(jié)構(gòu)1.能夠了解網(wǎng)頁(yè)制作相關(guān)崗位及崗位所需技能；2.能夠了解網(wǎng)頁(yè)的基本構(gòu)成元素和技術(shù)構(gòu)成3.能夠正確理解網(wǎng)站、網(wǎng)頁(yè)的概念及web站點(diǎn)的工作原理4.能夠熟練編寫(xiě)HTML文檔的基本結(jié)構(gòu)培養(yǎng)學(xué)生對(duì)前端設(shè)計(jì)師工作崗位及工作過(guò)程進(jìn)行感性認(rèn)知。通過(guò)欣賞各種類型的網(wǎng)站，培養(yǎng)學(xué)生的審美觀；通過(guò)欣賞政府部門的網(wǎng)站，引導(dǎo)學(xué)生樹(shù)立愛(ài)國(guó)意識(shí)；教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：1.網(wǎng)站制作相關(guān)崗位所需技能。2.網(wǎng)站、網(wǎng)頁(yè)的概念；難點(diǎn)：HTML文檔的基本結(jié)構(gòu)教學(xué)方法案例教學(xué)法備注（如上課地點(diǎn)、授課老師等需特殊注明的）任務(wù)2：網(wǎng)站制作流程介紹課時(shí)：2知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解網(wǎng)站制作的工作流程2.了解網(wǎng)站開(kāi)發(fā)的工作環(huán)境1.能夠了解網(wǎng)站制作的工作流程2.能夠了解網(wǎng)站開(kāi)發(fā)的工作環(huán)境3.會(huì)寫(xiě)網(wǎng)站策劃書(shū)理解并敬重工匠精神，在學(xué)習(xí)中努力發(fā)揚(yáng)工匠精神。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：網(wǎng)站制作的工作流程難點(diǎn)：網(wǎng)站策劃書(shū)的編寫(xiě)教學(xué)方法自主探究、任務(wù)驅(qū)動(dòng)備注（如上課地點(diǎn)、授課老師等需特殊注明的）任務(wù)3.Web相關(guān)知識(shí)學(xué)時(shí)：4知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解Web的由來(lái)及其與Internet的關(guān)系；2.了解Web的相關(guān)概念。1.能夠了解Web前端開(kāi)發(fā)所需要掌握的內(nèi)容；2.能夠安裝與使用開(kāi)發(fā)軟件。通過(guò)介紹Web相關(guān)知識(shí)，剖析本行業(yè)領(lǐng)軍人物的奮斗故事，激發(fā)學(xué)生對(duì)社會(huì)主義核心價(jià)值觀的認(rèn)同感，培養(yǎng)學(xué)生誠(chéng)實(shí)、守信、堅(jiān)忍不拔的性格；教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：web的相關(guān)概念難點(diǎn)：HBuilder的使用教學(xué)方法自主探究、任務(wù)驅(qū)動(dòng)備注任務(wù)4.HTML基礎(chǔ)課時(shí)：20知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解HTML的歷史；2.精通HTML的結(jié)構(gòu)3.精通HTML的元素和屬性能夠熟練使用HTML標(biāo)簽編寫(xiě)網(wǎng)頁(yè)通過(guò)制作慶祝建黨100周年的新聞活動(dòng)頁(yè)面，激發(fā)學(xué)生的愛(ài)國(guó)熱情；教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：HTML標(biāo)簽；難點(diǎn)：HTML屬性教學(xué)方法自主探究、任務(wù)驅(qū)動(dòng)備注教學(xué)成果項(xiàng)目二：CSS基礎(chǔ)任務(wù)1CSS盒模型課時(shí)：4知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握CSS基本語(yǔ)法2.掌握把CSS樣式表應(yīng)用到網(wǎng)頁(yè)的方法3.了解CSS盒模型4.掌握使用CSS樣式設(shè)置內(nèi)邊距、外邊距和邊框的方法能夠掌握并使用盒模型技術(shù)讓學(xué)生了解CSS盒模型的重要性，培養(yǎng)學(xué)生的職業(yè)素質(zhì)和道德規(guī)范；做事認(rèn)真負(fù)責(zé)，一絲不茍，每一條語(yǔ)句都經(jīng)過(guò)周密思考，培養(yǎng)學(xué)生的軟件工匠精神。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：CSS基本語(yǔ)法難點(diǎn)：CSS盒模型教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注任務(wù)2CSS屬性課時(shí)：12知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1．掌握使用CSS屬性設(shè)置背景、文本、列表、表格、表單和鏈接的方法2.了解CSS定位的基本概念3.掌握CSS浮動(dòng)的設(shè)置4.掌握CSS絕對(duì)定位和相對(duì)定位的方法1.能夠熟練使用CSS技術(shù)對(duì)頁(yè)面元素進(jìn)行格式化2.能夠正確使用CSS定位技術(shù)對(duì)頁(yè)面元素進(jìn)行絕對(duì)定位和相對(duì)定位在學(xué)習(xí)的過(guò)程中，培養(yǎng)學(xué)生的擔(dān)當(dāng)精神，弘揚(yáng)奮斗的精神，培養(yǎng)學(xué)生的職業(yè)素質(zhì)和道德規(guī)范；教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：CSS常用屬性難點(diǎn)：CSS浮動(dòng)、定位教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注任務(wù)3DIV+CSS搭建網(wǎng)頁(yè)框架課時(shí)：6知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解塊級(jí)元素、行內(nèi)元素的區(qū)別；2.掌握DIV+CSS進(jìn)行網(wǎng)頁(yè)框架搭建的方法能夠利用DIV+CSS技術(shù)進(jìn)行網(wǎng)頁(yè)框架搭建通過(guò)DIV+CSS框架搭建，引導(dǎo)學(xué)生了解職業(yè)生涯規(guī)劃的重要性，培養(yǎng)學(xué)生做事有條理，有規(guī)劃，培養(yǎng)學(xué)生的軟件工匠精神。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：塊級(jí)元素、行內(nèi)元素的特點(diǎn)難點(diǎn)：DIV+CSS搭建網(wǎng)頁(yè)框架教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注項(xiàng)目三：HTML5技術(shù)任務(wù)1HTML5新增結(jié)構(gòu)化標(biāo)簽課時(shí)：2知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解HTML5中新增的文檔結(jié)構(gòu)標(biāo)簽。2.掌握網(wǎng)頁(yè)布局的方法。能夠綜合運(yùn)用HTML5新增的結(jié)構(gòu)化標(biāo)簽進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)，學(xué)會(huì)自主發(fā)現(xiàn)、自主探索的學(xué)習(xí)方法，學(xué)會(huì)正確評(píng)價(jià)作品。1.充分認(rèn)識(shí)人生規(guī)劃的意義與重要性，引導(dǎo)學(xué)生做好人生規(guī)劃。2.引導(dǎo)學(xué)生追求技術(shù)創(chuàng)新，服務(wù)國(guó)家技術(shù)發(fā)展。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：HTML5新增文檔結(jié)構(gòu)標(biāo)簽難點(diǎn)：利用HTML5新增的結(jié)構(gòu)化標(biāo)簽進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)。教學(xué)方法任務(wù)驅(qū)動(dòng)、主動(dòng)探究備注任務(wù)2浮動(dòng)及媒體元素的插入課時(shí)：2知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.了解float屬性的應(yīng)用。2.掌握網(wǎng)頁(yè)中音視頻的插入方法。1.能夠理解元素浮動(dòng)引起“塌陷”的原因及解決辦法。2.能夠利用audio和video標(biāo)簽在網(wǎng)頁(yè)中插入音視頻。通過(guò)素材案例引領(lǐng)，激發(fā)學(xué)生的愛(ài)國(guó)熱情。教學(xué)重點(diǎn)難點(diǎn)教學(xué)重點(diǎn)：1.元素浮動(dòng)引起“塌陷”的原因及解決辦法。2.audio和video標(biāo)簽。教學(xué)難點(diǎn)：元素浮動(dòng)引起“塌陷”的原因及解決辦法。教學(xué)方法任務(wù)驅(qū)動(dòng)、主動(dòng)探究備注任務(wù)3HTML5表單課時(shí)：4知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握創(chuàng)建表單的HTML標(biāo)記。2.掌握表單的CSS樣式控制。能夠設(shè)計(jì)制作表單頁(yè)面。通過(guò)利用HTML表單元素制作當(dāng)前熱點(diǎn)“華為事件”的調(diào)查問(wèn)卷頁(yè)面，激發(fā)學(xué)生的科技報(bào)國(guó)的理想信念，并勉勵(lì)同學(xué)們要開(kāi)闊眼界、提升境界、放眼未來(lái)做一個(gè)有大格局大情懷的時(shí)代新青年。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：創(chuàng)建表單的HTML標(biāo)記。難點(diǎn)：表單的CSS樣式控制。教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注任務(wù)4：HTML5表單驗(yàn)證課時(shí)：6知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握HTML5表單控件新增的屬性。2.掌握表單驗(yàn)證的設(shè)置方法。能夠?qū)Ρ韱雾?yè)面設(shè)置驗(yàn)證屬性，增強(qiáng)其安全性。引導(dǎo)學(xué)生樹(shù)立安全保密意識(shí)，遵守行業(yè)規(guī)范，提倡健康的網(wǎng)絡(luò)道德準(zhǔn)則和交流活動(dòng)。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：HTML5表單控件新增的屬性。難點(diǎn)：表單驗(yàn)證設(shè)置中正則表達(dá)式的定義方法。教學(xué)方法任務(wù)驅(qū)動(dòng)法、實(shí)踐演示法。備注項(xiàng)目四CSS3技術(shù)任務(wù)1CSS3邊框與背景課時(shí)：4知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握CSS3新增的邊框?qū)傩?.掌握CSS3新增的背景屬性能夠使用CSS3新增的邊框?qū)傩詣?chuàng)建美化邊框。樹(shù)立正確的技能觀，努力提高自己的技能，為社會(huì)和人民造福；加深學(xué)生對(duì)專業(yè)知識(shí)技能學(xué)習(xí)的認(rèn)可度與專注度。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：CSS3新增的邊框?qū)傩噪y點(diǎn)：CSS3新增的背景屬性教學(xué)方法任務(wù)驅(qū)動(dòng)式自主探究備注任務(wù)2CSS3文本與多列課時(shí)：4知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握CSS3文本屬性的應(yīng)用2.掌握CSS3字體效果的應(yīng)用3.掌握CSS3多列1.能夠使用CSS3技術(shù)實(shí)現(xiàn)各種文字特效；2.能夠使用CSS3多列實(shí)現(xiàn)仿報(bào)紙排版效果。培養(yǎng)學(xué)生在設(shè)計(jì)前臺(tái)界面時(shí)的審美能力；提高學(xué)生綜合運(yùn)用所學(xué)知識(shí)的能力。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：text—shadow屬性的應(yīng)用難點(diǎn)：CSS3多列屬性教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注任務(wù)3CSS3變形課時(shí)：8知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握transform屬性能夠?qū)崿F(xiàn)的變形類型；2.掌握平移、旋轉(zhuǎn)、縮放、翻轉(zhuǎn)四種變形屬性能夠利用CSS3變形屬性和方法實(shí)現(xiàn)圖形的變換培養(yǎng)學(xué)生的計(jì)算思維、數(shù)字化創(chuàng)新與發(fā)展、信息社會(huì)責(zé)任；軟件行業(yè)規(guī)劃解析，培養(yǎng)學(xué)生的軟件工匠精神。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：Transform屬性實(shí)現(xiàn)平移、旋轉(zhuǎn)、縮放、翻轉(zhuǎn)變形難點(diǎn)：3D轉(zhuǎn)換教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注任務(wù)4CSS3動(dòng)畫(huà)課時(shí)：8知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)1.掌握CSS3中的transition過(guò)渡動(dòng)畫(huà)效果的應(yīng)用2.掌握CSS3中的animation動(dòng)畫(huà)效果的應(yīng)用能夠使用CSS3的變形與動(dòng)畫(huà)屬性實(shí)現(xiàn)炫酷的動(dòng)畫(huà)效果。培養(yǎng)學(xué)生的創(chuàng)新思維，融會(huì)貫通的能力；培養(yǎng)學(xué)生的軟件工匠精神。教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：CSS3中的transition過(guò)渡動(dòng)畫(huà)效果的應(yīng)用難點(diǎn)：CSS3中的animation動(dòng)畫(huà)效果的應(yīng)用教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究備注注：在“項(xiàng)目/任務(wù)設(shè)計(jì)”中，要增加課程思政的案例，課程思政元素的融入應(yīng)不少于每門課程總學(xué)時(shí)的20%。五、課程實(shí)施（一）教材選用或編寫(xiě)1.推薦教材Web前端開(kāi)發(fā)（初級(jí)）工業(yè)和信息化教育與考試中心主編中國(guó)工信出版集團(tuán)2.教學(xué)參考資料職教云平臺(tái)的資源庫(kù)課程資源3.教材編寫(xiě)體例建議教材編寫(xiě)應(yīng)遵循“適用、實(shí)用、夠用”的原則1）適用：教材要以講解HTML、CSS、javascript、jQuery技術(shù)為主，符合課程能力要求及本課程的培養(yǎng)目標(biāo)；2）實(shí)用：教材應(yīng)以真實(shí)項(xiàng)目為載體，按照實(shí)際開(kāi)發(fā)過(guò)程組織編寫(xiě)內(nèi)容，強(qiáng)調(diào)理論與實(shí)踐結(jié)合的項(xiàng)目化教材，便于實(shí)現(xiàn)“理實(shí)一體”教學(xué)，符合高職學(xué)生培養(yǎng)要求。3）夠用：教材應(yīng)選擇難度適宜，內(nèi)容符合本課程標(biāo)準(zhǔn)要求的教材。（二）教學(xué)方法與手段建議教學(xué)方法：在本課程教學(xué)中，教學(xué)方法的選取應(yīng)強(qiáng)調(diào)突出現(xiàn)代高等職業(yè)教育的特色，把現(xiàn)德育思想和課程的具體內(nèi)容相結(jié)合，創(chuàng)造性的開(kāi)展教學(xué)，根