《Web前端開發(fā)》課程標(biāo)準(zhǔn)

、課程基本信息

表1課程信息表

課程名稱Web前端開發(fā)授課單位工程科技學(xué)院

課程編碼1019350課程類別（模塊）職業(yè)核心技術(shù)模塊

前導(dǎo)課程計(jì)算機(jī)基礎(chǔ)、圖形圖像處理

后續(xù)課程網(wǎng)站開發(fā)與管理

總學(xué)時(shí)90理論課是口

總學(xué)分5實(shí)踐課是口

課程類型

理論+實(shí)踐是口

考核性質(zhì)考試

理實(shí)一體化是，

適用專業(yè)計(jì)算機(jī)應(yīng)用

二、課程定位和課程設(shè)計(jì)

（-）課程性質(zhì)與作用

本課程是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的職業(yè)核心技術(shù)模塊課程之一，是

基于工作過程系統(tǒng)化的課程，是一門實(shí)踐性和應(yīng)用性都很強(qiáng)的課程。

為計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)學(xué)生將來從事職場(chǎng)的web前端開發(fā)崗位的發(fā)

展打下良好基礎(chǔ)，并為該專業(yè)后續(xù)網(wǎng)站開發(fā)與管理的學(xué)習(xí)打下網(wǎng)頁前

端設(shè)計(jì)基礎(chǔ)。

（二）課程基本理念

本課程的設(shè)計(jì)“以能力為本位、以職業(yè)實(shí)踐為主線、以項(xiàng)目引導(dǎo),

以就業(yè)為導(dǎo)向”，打破了傳統(tǒng)的按照知識(shí)體系教授課程的模式，以學(xué)

生日后在從事Web前端開發(fā)行業(yè)中所需的實(shí)際技能為目標(biāo)，進(jìn)行基于

工作項(xiàng)目和工作任務(wù)的課程開發(fā)與設(shè)計(jì)，既保證滿足從事網(wǎng)站前端開

發(fā)所必須的專業(yè)知識(shí)、專業(yè)技能，又保持原有知識(shí)體系的完整性，既

培養(yǎng)了學(xué)生的職業(yè)能力，同時(shí)也為學(xué)生的可持續(xù)發(fā)展奠定了基礎(chǔ)。

（三）課程設(shè)計(jì)思路

本課程是以“基于工作過程”為指導(dǎo)，通過對(duì)Web前端開發(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è)工作過程系統(tǒng)

化，以工作過程為參照系，按照工作過程來序化知識(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.樹立正確的技能觀；

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前端開發(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)簽的語法及使用。

（2）掌握CSS語法，CSS盒模型。

（3）掌握使用DIV標(biāo)簽與CSS進(jìn)行網(wǎng)頁布局的方法與技巧。

（4）掌握HTML5新增元素、CSS3新特性知識(shí)；

（二）職業(yè)能力目標(biāo)

（1）能夠熟練使用前端設(shè)計(jì)軟件進(jìn)行網(wǎng)頁制作。

（2）能夠熟練使用HTML標(biāo)簽編寫制作網(wǎng)頁。

（3）能夠熟練使用DIV+CSS進(jìn)行網(wǎng)頁布局。

（4）具有設(shè)計(jì)與制作CSS網(wǎng)頁特效的能力。

（5）能夠建立“內(nèi)容”與“表現(xiàn)”相分離的網(wǎng)頁。

（6）能夠使用CSS和腳本語言實(shí)現(xiàn)網(wǎng)頁交互效果。

（三）素質(zhì)目標(biāo)

1.職業(yè)態(tài)度和素質(zhì)要求

造福，絕不利用自己的技能去從事危害公眾利益的活動(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)，樹立社會(huì)主義職業(yè)精神。

3.項(xiàng)目/任務(wù)的思政目標(biāo)

（1）項(xiàng)目1/任務(wù)1：培養(yǎng)學(xué)生對(duì)前端設(shè)計(jì)師工作崗位及工作過程

進(jìn)行感性認(rèn)知。通過欣賞各種類型的網(wǎng)站，培養(yǎng)學(xué)生的審美觀；通過

欣賞政府部門的網(wǎng)站，引導(dǎo)學(xué)生樹立愛國意識(shí)；

（2）項(xiàng)目1/任務(wù)2：理解并敬重工匠精神，在學(xué)習(xí)中努力發(fā)揚(yáng)

工匠精神。

（3）項(xiàng)目1/任務(wù)3：通過介紹Web相關(guān)知識(shí)，剖析本行業(yè)領(lǐng)軍

人物的奮斗故事，激發(fā)學(xué)生對(duì)社會(huì)主義核心價(jià)值觀的認(rèn)同感，培養(yǎng)學(xué)

生誠實(shí)、守信、堅(jiān)忍不拔的性格；

（4）項(xiàng)目1/任務(wù)4：通過制作慶祝建黨100周年的新聞活動(dòng)頁

面，激發(fā)學(xué)生的愛國熱情；

（5）項(xiàng)目2/任務(wù)1：讓學(xué)生了解CSS盒模型的重要性，培養(yǎng)學(xué)

生的職業(yè)素質(zhì)和道德規(guī)范；做事認(rèn)真負(fù)責(zé)，一絲不茍，每一條語句都

經(jīng)過周密思考，培養(yǎng)學(xué)生的軟件工匠精神。

（6）項(xiàng)目2/任務(wù)2：在學(xué)習(xí)的過程中，培養(yǎng)學(xué)生的擔(dān)當(dāng)精神，弘揚(yáng)

奮斗的精神，培養(yǎng)學(xué)生的職業(yè)素質(zhì)和道德規(guī)范;

(7)項(xiàng)目2/任務(wù)3：通過DIV+CSS框架搭建，引導(dǎo)學(xué)生了解職

業(yè)生涯規(guī)劃的重要性，培養(yǎng)學(xué)生做事有條理，有規(guī)劃，培養(yǎng)學(xué)生

的軟件工匠精神。

(8)項(xiàng)目3/任務(wù)1：通過網(wǎng)頁布局引導(dǎo)學(xué)生充分認(rèn)識(shí)人生規(guī)劃

的意義與重要性，引導(dǎo)學(xué)生做好人生規(guī)劃。同時(shí)引導(dǎo)學(xué)生追求技

術(shù)創(chuàng)新，服務(wù)國家技術(shù)發(fā)展。

(9)項(xiàng)目3/任務(wù)2：通過素材案例引領(lǐng)，激發(fā)學(xué)生的愛國熱情。

(10)項(xiàng)目3/任務(wù)3：通過利用HTML表單元素制作當(dāng)前熱點(diǎn)“華

為事件”的調(diào)查問卷頁面，激發(fā)學(xué)生的科技報(bào)國的理想信念，并

勉勵(lì)同學(xué)們要開闊眼界、提升境界、放眼未來做一個(gè)有大格局大

情懷的時(shí)代新青年。

(11)項(xiàng)目3/任務(wù)4：引導(dǎo)學(xué)生樹立安全保密意識(shí)，遵守行業(yè)

規(guī)范，提倡健康的網(wǎng)絡(luò)道德準(zhǔn)則和交流活動(dòng)。

(12)項(xiàng)目4/任務(wù)1：樹立正確的技能觀，努力提高自己的技能,

為社會(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)，通過采用

項(xiàng)目教學(xué)法，通過六個(gè)項(xiàng)目漸進(jìn)式教學(xué)，培養(yǎng)學(xué)生扎實(shí)、系統(tǒng)的web

前臺(tái)頁面開發(fā)能力。最終培養(yǎng)的人才應(yīng)該具有扎實(shí)的基本功，一定的

相關(guān)專業(yè)知識(shí)，較強(qiáng)的應(yīng)用和開發(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í)安排總表

學(xué)時(shí)/

序?qū)W習(xí)授課授課

項(xiàng)目任務(wù)實(shí)踐

號(hào)成果地點(diǎn)教師

學(xué)時(shí)

任務(wù)1崗位任知機(jī)房宋麗萍2/1

項(xiàng)目1

任務(wù)2網(wǎng)站制作流程介紹作品機(jī)房宋麗萍2/1

1Web頁面制

任務(wù)3Web相關(guān)知識(shí)機(jī)房宋麗萍4/2

作基礎(chǔ)

任務(wù)4HTML基礎(chǔ)機(jī)房宋麗萍20/10

任務(wù)1CSS盒模型機(jī)房宋麗萍4/2

項(xiàng)目2任務(wù)2CSS屬性機(jī)房宋麗萍12/6

2作品

CSS基礎(chǔ)

任務(wù)3D1V+CSS搭建網(wǎng)頁

機(jī)房宋麗萍6/3

框架

任務(wù)1HTML5新增結(jié)構(gòu)化標(biāo)

機(jī)房宋麗萍2/1

簽

任務(wù)2.浮動(dòng)及媒體元素的

機(jī)房宋麗萍2/1

3插入作品

項(xiàng)目3

任務(wù)3I1TML5表單機(jī)房宋麗萍4/2

HTML5技術(shù)

任務(wù)4HTML5表單表單驗(yàn)

機(jī)房宋麗萍6/3

證

任務(wù)1CSS3邊框與背景機(jī)房宋麗萍4/2

任務(wù)2CSS3文本與多列機(jī)房宋麗萍4/2

項(xiàng)目4

4作品

CSS3技術(shù)任務(wù)3CSS3變形機(jī)房宋麗萍8/4

任務(wù)4CSS3動(dòng)畫機(jī)房宋麗萍8/4

注：學(xué)時(shí)設(shè)置應(yīng)與2021版人才培養(yǎng)方案保持一致。

表2教學(xué)內(nèi)容與教學(xué)實(shí)施安排表

項(xiàng)目一：Web頁面制作基礎(chǔ)

任務(wù)1：崗位任知課時(shí)：2

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.了解網(wǎng)站制作的相1.能夠了解網(wǎng)頁制培養(yǎng)學(xué)生對(duì)前端設(shè)計(jì)師工

關(guān)崗位。作相關(guān)崗位及崗位作崗位及工作過程進(jìn)行感性認(rèn)

2.了解網(wǎng)站制作相關(guān)所需技能；知。通過欣賞各種類型的網(wǎng)站，

崗位所需技能。2.能夠了解網(wǎng)頁的培養(yǎng)學(xué)生的審美觀；通過欣賞政

3.了解網(wǎng)頁的基本構(gòu)基本構(gòu)成元素和技府部門的網(wǎng)站，引導(dǎo)學(xué)生樹立愛

成元素術(shù)構(gòu)成國意識(shí)；

4.了解網(wǎng)頁的技術(shù)構(gòu)3.能夠正確理解網(wǎng)

成站、網(wǎng)頁的概念及

5.理解網(wǎng)站、網(wǎng)頁的概web站點(diǎn)的工作原

念理

6.掌握HTML文檔的基4.能夠熟練編寫

本結(jié)構(gòu)HTML文檔的基本結(jié)

構(gòu)

重點(diǎn)：1.網(wǎng)站制作相關(guān)崗位所需技能。

2.網(wǎng)站、網(wǎng)頁的概念；

教學(xué)重點(diǎn)難點(diǎn)難點(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)站制作的工1.能夠了解網(wǎng)站制理解并敬重工匠精神，在學(xué)習(xí)

作流程作的工作流程中努力發(fā)揚(yáng)工匠精神。

2.了解網(wǎng)站開發(fā)的工2.能夠了解網(wǎng)站開

作環(huán)境發(fā)的T作環(huán)境

3.會(huì)寫網(wǎng)站策劃書

教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：網(wǎng)站制作的工作流程

難點(diǎn)：網(wǎng)站策劃書的編寫

教學(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的由來及1.能夠了解Web前通過介紹Web相關(guān)知識(shí)，剖析

其與Internet的關(guān)端開發(fā)所需要掌握本行業(yè)領(lǐng)軍人物的奮斗故事，激發(fā)

系；的內(nèi)容；學(xué)生對(duì)社會(huì)主義核心價(jià)值觀的認(rèn)

2.了解Web的相關(guān)概2.能夠安裝與使用同感，培養(yǎng)學(xué)生誠實(shí)、守信、堅(jiān)忍

念。開發(fā)軟件。不拔的性格；

教學(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的歷史；能夠熟練使用HTML通過制作慶祝建黨100周年

2.精通HTML的結(jié)構(gòu)標(biāo)簽編寫網(wǎng)頁的新聞活動(dòng)頁面，激發(fā)學(xué)生的愛國

3.精通HTML的元素和熱情；

屬性

重點(diǎn)：HTML標(biāo)簽;

教學(xué)重點(diǎn)難點(diǎn)

難點(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基本語法能夠掌握并使用盒模讓學(xué)生了解CSS盒模型的重

2.掌握把CSS樣式表型技術(shù)要性，培養(yǎng)學(xué)生的職業(yè)素質(zhì)和道德

應(yīng)用到網(wǎng)頁的方法規(guī)范；做事認(rèn)真負(fù)責(zé)，一絲不茍，

3.了解CSS盒模型每一條語句都經(jīng)過周密思考，培養(yǎng)

4.掌握使用CSS樣式學(xué)生的軟件工匠精神。

設(shè)置內(nèi)邊距、外邊距和

邊框的方法

重點(diǎn)：CSS基本語法

教學(xué)重點(diǎn)難點(diǎn)

難點(diǎn)：CSS盒模型

教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究

備注

任務(wù)2CSS屬性課時(shí)：12

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.掌握使用CSS屬性1,能夠熟練使用在學(xué)習(xí)的過程中，培養(yǎng)學(xué)生的

設(shè)置背景、文本、列表、CSS技術(shù)對(duì)頁面元素?fù)?dān)當(dāng)精神，弘揚(yáng)奮斗的精神，培養(yǎng)

表格、表單和鏈接的方進(jìn)行格式化學(xué)生的職業(yè)素質(zhì)和道德規(guī)范；

法2.能夠正確使用CSS

2.了解CSS定位的基定位技術(shù)對(duì)頁面元素

本概念進(jìn)行絕對(duì)定位和相對(duì)

3.掌握CSS浮動(dòng)的設(shè)定位

置

4.掌握CSS絕對(duì)定位

和相對(duì)定位的方法

重點(diǎn)：CSS常用屬性

教學(xué)重點(diǎn)難點(diǎn)

難點(diǎn)：CSS浮動(dòng)、定位

教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究

備注

任務(wù)3DIV+CSS搭建網(wǎng)頁框架課時(shí):6

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.了解塊級(jí)元素、行內(nèi)能夠利用DIV+CSS技通過DIV+CSS框架搭建,引

元素的區(qū)別；術(shù)進(jìn)行網(wǎng)頁框架搭建導(dǎo)學(xué)生了解職業(yè)生涯規(guī)劃的重

2.掌握DIV+CSS進(jìn)行要性，培養(yǎng)學(xué)生做事有條理，

網(wǎng)頁框架搭建的方法有規(guī)劃，培養(yǎng)學(xué)生的軟件工匠

精神。

教學(xué)重點(diǎn)難點(diǎn)重點(diǎn)：塊級(jí)元素、行內(nèi)元素的特點(diǎn)

難點(diǎn)：DIV+CSS搭建網(wǎng)頁框架

教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究

備注

項(xiàng)目三：HTML5技術(shù)

任務(wù)1HTML5新增結(jié)溝化標(biāo)簽課時(shí):2

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

L了解HTML5中新增能夠綜合運(yùn)用HTML51.充分認(rèn)識(shí)人生規(guī)劃的意義

的文檔結(jié)構(gòu)標(biāo)簽。新增的結(jié)構(gòu)化標(biāo)簽進(jìn)與重要性，引導(dǎo)學(xué)生做好人生規(guī)

2.掌握網(wǎng)頁布局的方行網(wǎng)頁布局設(shè)計(jì)，學(xué)劃。

法。會(huì)自主發(fā)現(xiàn)、自主探2.引導(dǎo)學(xué)生追求技術(shù)創(chuàng)新，服

索的學(xué)習(xí)方法，學(xué)會(huì)務(wù)國家技術(shù)發(fā)展。

正確評(píng)價(jià)作品。

教學(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)頁布局設(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屬性的1.能夠理解元素浮動(dòng)引起通過素材案例引領(lǐng)，激發(fā)學(xué)

應(yīng)用?！八荨钡脑蚣敖鉀Q辦法。生的愛國熱情。

2.掌握網(wǎng)頁中音視頻2.能夠利用audio和video

的插入方法。標(biāo)簽在網(wǎng)頁中插入音視頻，

教學(xué)重點(diǎn)：1.兀素浮動(dòng)引起“塌陷”的原因及解決辦法。

教學(xué)重點(diǎn)難點(diǎn)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)建表單的能夠設(shè)計(jì)制作表單頁通過利用HTML表單元素制作

HTML標(biāo)記。面O當(dāng)前熱點(diǎn)“華為事件”的調(diào)查問卷

2.掌握表單的CSS樣頁面，激發(fā)學(xué)生的科技報(bào)國的理想

式控制。信念，并勉勵(lì)同學(xué)們要開闊眼界、

提升境界、放眼未來做一個(gè)有大格

局大情懷的時(shí)代新青年。

重點(diǎn)：創(chuàng)建表單的HTML標(biāo)記。

教學(xué)重點(diǎn)難點(diǎn)

難點(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表單控能夠?qū)Ρ韱雾撁嬖O(shè)置驗(yàn)證屬引導(dǎo)學(xué)生樹立安全保密意

件新增的屬性。性，增強(qiáng)其安全性。識(shí)，遵守行業(yè)規(guī)范，提倡健

2.掌握表單驗(yàn)證的設(shè)康的網(wǎng)絡(luò)道德準(zhǔn)則和交流活

置方法。動(dòng)。

重點(diǎn)：HTML5表單控件新增的屬性。

教學(xué)重點(diǎn)難點(diǎn)

難點(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新增的能夠使用CSS3新增的樹立正確的技能觀，努力提高

邊框?qū)傩赃吙驅(qū)傩詣?chuàng)建美化邊自己的技能，為社會(huì)和人民造福；

2.掌握CSS3新增的框。加深學(xué)生對(duì)專業(yè)知識(shí)技能學(xué)習(xí)的

背景屬性認(rèn)可度與專注度。

重點(diǎn)：CSS3新增的邊框?qū)傩?/p>

教學(xué)重點(diǎn)難點(diǎn)

難點(diǎn)：CSS3新增的背景屬性

教學(xué)方法任務(wù)驅(qū)動(dòng)式自主探究

備注

任務(wù)2CSS3文本與多列課時(shí):4

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.掌握CSS3文本屬1.能夠使用CSS3技術(shù)培養(yǎng)學(xué)生在設(shè)計(jì)前臺(tái)界面時(shí)

性的應(yīng)用實(shí)現(xiàn)各種義字特效；的審美能力；提高學(xué)生綜合運(yùn)用所

2.掌握CSS3字體效2.能夠使用CSS3多列學(xué)知識(shí)的能力。

果的應(yīng)用實(shí)現(xiàn)仿報(bào)紙排版效

3.掌握CSS3多列果。

重點(diǎn)：text-shadow屬性的應(yīng)用

教學(xué)重點(diǎn)難點(diǎn)

難點(diǎn)：CSS3多列屬性

教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究

備注

任務(wù)3CSS3變形課時(shí)：8

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.掌握transform屬能夠利用CSS3變形屬培養(yǎng)學(xué)生的計(jì)算思維、數(shù)字化

性能夠?qū)崿F(xiàn)的變形類性和方法實(shí)現(xiàn)圖形的創(chuàng)新與發(fā)展、信息社會(huì)責(zé)任；

型；變換軟件行業(yè)規(guī)劃解析，培養(yǎng)學(xué)生

2.掌握平移、旋轉(zhuǎn)、的軟件工匠精神。

縮放、翻轉(zhuǎn)四種變形屬

性

教學(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)畫課時(shí)：8

知識(shí)目標(biāo)技能目標(biāo)素養(yǎng)目標(biāo)

1.掌握CSS3中的能夠使用CSS3的變形培養(yǎng)學(xué)生的創(chuàng)新思維，融會(huì)貫

transition過渡動(dòng)畫與動(dòng)畫屬性實(shí)現(xiàn)炫酷通的能力；培養(yǎng)學(xué)生的軟件工

效果的應(yīng)用的動(dòng)畫效果。匠精神。

2.掌握CSS3中的

animation動(dòng)畫效果

的應(yīng)用

重點(diǎn)：CSS3中的transition過渡動(dòng)畫效果的應(yīng)用

教學(xué)重點(diǎn)難點(diǎn)

難點(diǎn)：CSS3中的animation動(dòng)畫效果的應(yīng)用

教學(xué)方法任務(wù)驅(qū)動(dòng)自主探究

備注

注：在“項(xiàng)目/任務(wù)設(shè)計(jì)”中，要增加課程思政的案例，課程思政元素的融

入應(yīng)不少于每門課程總學(xué)時(shí)的20%。

五、課程實(shí)施

（一）教材選用或編寫

1.推薦教材

Web前端開發(fā)（初級(jí)）工業(yè)和信息化教育與考試中心主編中國

工信出版集團(tuán)

2.教學(xué)參考資料

職教云平臺(tái)的資源庫課程資源

3.教材編寫體例建議

教材編寫應(yīng)遵循“適用、實(shí)用、夠用”的原則

1）適用：教材要以講解HTML、CSS、javascript、jQuery技術(shù)

為主，符合課程能力要求及本課程的培養(yǎng)目標(biāo)；

2）實(shí)用：教材應(yīng)以真實(shí)項(xiàng)目為載體，按照實(shí)際開發(fā)過程組織編

寫內(nèi)容，強(qiáng)調(diào)理論與實(shí)踐結(jié)合的項(xiàng)目化教材，便于實(shí)現(xiàn)“理實(shí)一體”

教學(xué)，符合高職學(xué)生培養(yǎng)要求。

3）