《Web前端開發》課程標準

、課程基本信息

表1課程信息表

課程名稱Web前端開發授課單位工程科技學院

課程編碼1019350課程類別（模塊）職業核心技術模塊

前導課程計算機基礎、圖形圖像處理

后續課程網站開發與管理

總學時90理論課是口

總學分5實踐課是口

課程類型

理論+實踐是口

考核性質考試

理實一體化是，

適用專業計算機應用

二、課程定位和課程設計

（-）課程性質與作用

本課程是計算機應用技術專業的職業核心技術模塊課程之一，是

基于工作過程系統化的課程，是一門實踐性和應用性都很強的課程。

為計算機應用技術專業學生將來從事職場的web前端開發崗位的發

展打下良好基礎，并為該專業后續網站開發與管理的學習打下網頁前

端設計基礎。

（二）課程基本理念

本課程的設計“以能力為本位、以職業實踐為主線、以項目引導,

以就業為導向”，打破了傳統的按照知識體系教授課程的模式，以學

生日后在從事Web前端開發行業中所需的實際技能為目標，進行基于

工作項目和工作任務的課程開發與設計，既保證滿足從事網站前端開

發所必須的專業知識、專業技能，又保持原有知識體系的完整性，既

培養了學生的職業能力，同時也為學生的可持續發展奠定了基礎。

（三）課程設計思路

本課程是以“基于工作過程”為指導，通過對Web前端開發所涉

及到的崗位群進行工作任務和職業能力分析，以項目引導，以就業為

導向，以培養學生的職業技能為目標、以學生為主體、以項目為載體,

將知識、理論和實踐一體化的課程設計思路。在宏觀教學設計上突破

以知識點的層次遞進為體系的傳統模式，而是將職業工作過程系統

化，以工作過程為參照系，按照工作過程來序化知識，培養學生規范、

高效率、高質量地應用能力，使學生既學習崗位知識又培養學生職業

素質，鍛煉學生的方法能力與社會能力。

每個項目的學習以“做”為中心，教和學都圍繞著做，在做中學,

在學中做，做到“教、學、做”一體化，達到理論與實踐的統一，同

時注重培養學生的自主學習能力和職業素養的提升。

木課程課程思政內容及單元的知識、技能按照相應的專項能力在

實際職業工作中出現的頻度、內容的難度和要求掌握的程度進行排

序，如下所示：

課程思政內容：

1.信息社會責任;

2.樹立正確的技能觀；

3.軟件工匠精神培養。

三、課程目標

本著以項目引導，以就業為導向，以培養學生的職業技能為目標、

以學生為主體、以項目為載體，將知識、理論和實踐一體化的課程設

計思路。根據《1+X認證Web前端開發的職'業技能等級認證標準》，

確定本課程的知識目標、能力目標和素質目標。

（一）工作任務目標

（1）掌握web知識，掌握HTML常用標簽的語法及使用。

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

（3）掌握使用DIV標簽與CSS進行網頁布局的方法與技巧。

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

（二）職業能力目標

（1）能夠熟練使用前端設計軟件進行網頁制作。

（2）能夠熟練使用HTML標簽編寫制作網頁。

（3）能夠熟練使用DIV+CSS進行網頁布局。

（4）具有設計與制作CSS網頁特效的能力。

（5）能夠建立“內容”與“表現”相分離的網頁。

（6）能夠使用CSS和腳本語言實現網頁交互效果。

（三）素質目標

1.職業態度和素質要求

造福，絕不利用自己的技能去從事危害公眾利益的活動，包括構造虛

假信息和不良內容、黑客行為和攻擊網站等，提倡健康的網絡道德準

則和交流活動，鼓勵學生利用自己的所學的專業知識，積極參與社會

科學普及活和應用推廣活動；

（5）培養學生的軟件工匠精神，在潛移默化中培育社會主義核

心價值觀，提高綜合職業素養，樹立社會主義職業精神。

3.項目/任務的思政目標

（1）項目1/任務1：培養學生對前端設計師工作崗位及工作過程

進行感性認知。通過欣賞各種類型的網站，培養學生的審美觀；通過

欣賞政府部門的網站，引導學生樹立愛國意識；

（2）項目1/任務2：理解并敬重工匠精神，在學習中努力發揚

工匠精神。

（3）項目1/任務3：通過介紹Web相關知識，剖析本行業領軍

人物的奮斗故事，激發學生對社會主義核心價值觀的認同感，培養學

生誠實、守信、堅忍不拔的性格；

（4）項目1/任務4：通過制作慶祝建黨100周年的新聞活動頁

面，激發學生的愛國熱情；

（5）項目2/任務1：讓學生了解CSS盒模型的重要性，培養學

生的職業素質和道德規范；做事認真負責，一絲不茍，每一條語句都

經過周密思考，培養學生的軟件工匠精神。

（6）項目2/任務2：在學習的過程中，培養學生的擔當精神，弘揚

奮斗的精神，培養學生的職業素質和道德規范;

(7)項目2/任務3：通過DIV+CSS框架搭建，引導學生了解職

業生涯規劃的重要性，培養學生做事有條理，有規劃，培養學生

的軟件工匠精神。

(8)項目3/任務1：通過網頁布局引導學生充分認識人生規劃

的意義與重要性，引導學生做好人生規劃。同時引導學生追求技

術創新，服務國家技術發展。

(9)項目3/任務2：通過素材案例引領，激發學生的愛國熱情。

(10)項目3/任務3：通過利用HTML表單元素制作當前熱點“華

為事件”的調查問卷頁面，激發學生的科技報國的理想信念，并

勉勵同學們要開闊眼界、提升境界、放眼未來做一個有大格局大

情懷的時代新青年。

(11)項目3/任務4：引導學生樹立安全保密意識，遵守行業

規范，提倡健康的網絡道德準則和交流活動。

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

為社會和人民造福；加深學生對專業知識技能學習的認可度與專注

度。

(13)項目4/任務2：培養學生在設計前臺界面時的審美能力；

提高學生綜合運用所學知識的能力。

(14)項目4/任務3：培養學生的計算思維、數字化創新與發展、

信息社會責任；軟件行業規劃解析，培養學生的軟件工匠精神。

(15)項目4/任務4：培養學生的創新思維，融會貫通的能力；

培養學生的軟件工匠精神。

四、課程內容與要求

高職院校主要以培養高技能人才為辦學定位思想，結合我校具體

情況，以現代職教理念為指導，以培養應用型人才為目標，通過采用

項目教學法，通過六個項目漸進式教學，培養學生扎實、系統的web

前臺頁面開發能力。最終培養的人才應該具有扎實的基本功，一定的

相關專業知識，較強的應用和開發能力，較高的職業素養，以及獲取

知識的能力，獨立思考的能力和創新能力。

基于項目的實施工程，進行項目的任務分解，為每個項目確定技

能點與知識點。

表1課程教學內容、地點、學時安排總表

學時/

序學習授課授課

項目任務實踐

號成果地點教師

學時

任務1崗位任知機房宋麗萍2/1

項目1

任務2網站制作流程介紹作品機房宋麗萍2/1

1Web頁面制

任務3Web相關知識機房宋麗萍4/2

作基礎

任務4HTML基礎機房宋麗萍20/10

任務1CSS盒模型機房宋麗萍4/2

項目2任務2CSS屬性機房宋麗萍12/6

2作品

CSS基礎

任務3D1V+CSS搭建網頁

機房宋麗萍6/3

框架

任務1HTML5新增結構化標

機房宋麗萍2/1

簽

任務2.浮動及媒體元素的

機房宋麗萍2/1

3插入作品

項目3

任務3I1TML5表單機房宋麗萍4/2

HTML5技術

任務4HTML5表單表單驗

機房宋麗萍6/3

證

任務1CSS3邊框與背景機房宋麗萍4/2

任務2CSS3文本與多列機房宋麗萍4/2

項目4

4作品

CSS3技術任務3CSS3變形機房宋麗萍8/4

任務4CSS3動畫機房宋麗萍8/4

注：學時設置應與2021版人才培養方案保持一致。

表2教學內容與教學實施安排表

項目一：Web頁面制作基礎

任務1：崗位任知課時：2

知識目標技能目標素養目標

1.了解網站制作的相1.能夠了解網頁制培養學生對前端設計師工

關崗位。作相關崗位及崗位作崗位及工作過程進行感性認

2.了解網站制作相關所需技能；知。通過欣賞各種類型的網站，

崗位所需技能。2.能夠了解網頁的培養學生的審美觀；通過欣賞政

3.了解網頁的基本構基本構成元素和技府部門的網站，引導學生樹立愛

成元素術構成國意識；

4.了解網頁的技術構3.能夠正確理解網

成站、網頁的概念及

5.理解網站、網頁的概web站點的工作原

念理

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

本結構HTML文檔的基本結

構

重點：1.網站制作相關崗位所需技能。

2.網站、網頁的概念；

教學重點難點難點：HTML文檔的基本結構

教學方法案例教學法

備注（如上課地點、授課老師等需特殊注明的）

任務2：網站制作流程介紹課時：2

知識目標技能目標素養目標

1.了解網站制作的工1.能夠了解網站制理解并敬重工匠精神，在學習

作流程作的工作流程中努力發揚工匠精神。

2.了解網站開發的工2.能夠了解網站開

作環境發的T作環境

3.會寫網站策劃書

教學重點難點重點：網站制作的工作流程

難點：網站策劃書的編寫

教學方法自主探究、任務驅動

備注（如上課地點、授課老師等需特殊注明的）

任務3.Web相關知識學時:4

知識目標技能目標素養目標

1.了解Web的由來及1.能夠了解Web前通過介紹Web相關知識，剖析

其與Internet的關端開發所需要掌握本行業領軍人物的奮斗故事，激發

系；的內容；學生對社會主義核心價值觀的認

2.了解Web的相關概2.能夠安裝與使用同感，培養學生誠實、守信、堅忍

念。開發軟件。不拔的性格；

教學重點難點重點：web的相關概念

難點：HBuilder的使用

教學方法自主探究、任務驅動

備注

任務4.HTML基礎課時:20

知識目標技能目標素養目標

1.了解HTML的歷史；能夠熟練使用HTML通過制作慶祝建黨100周年

2.精通HTML的結構標簽編寫網頁的新聞活動頁面，激發學生的愛國

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

屬性

重點：HTML標簽;

教學重點難點

難點：HTML屬性

教學方法自主探究、任務驅動

備注

教學成果

項目二：CSS基礎

任務1CSS盒模型課時:4

知識目標技能目標素養目標

1.掌握CSS基本語法能夠掌握并使用盒模讓學生了解CSS盒模型的重

2.掌握把CSS樣式表型技術要性，培養學生的職業素質和道德

應用到網頁的方法規范；做事認真負責，一絲不茍，

3.了解CSS盒模型每一條語句都經過周密思考，培養

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

設置內邊距、外邊距和

邊框的方法

重點：CSS基本語法

教學重點難點

難點：CSS盒模型

教學方法任務驅動自主探究

備注

任務2CSS屬性課時：12

知識目標技能目標素養目標

1.掌握使用CSS屬性1,能夠熟練使用在學習的過程中，培養學生的

設置背景、文本、列表、CSS技術對頁面元素擔當精神，弘揚奮斗的精神，培養

表格、表單和鏈接的方進行格式化學生的職業素質和道德規范；

法2.能夠正確使用CSS

2.了解CSS定位的基定位技術對頁面元素

本概念進行絕對定位和相對

3.掌握CSS浮動的設定位

置

4.掌握CSS絕對定位

和相對定位的方法

重點：CSS常用屬性

教學重點難點

難點：CSS浮動、定位

教學方法任務驅動自主探究

備注

任務3DIV+CSS搭建網頁框架課時:6

知識目標技能目標素養目標

1.了解塊級元素、行內能夠利用DIV+CSS技通過DIV+CSS框架搭建,引

元素的區別；術進行網頁框架搭建導學生了解職業生涯規劃的重

2.掌握DIV+CSS進行要性，培養學生做事有條理，

網頁框架搭建的方法有規劃，培養學生的軟件工匠

精神。

教學重點難點重點：塊級元素、行內元素的特點

難點：DIV+CSS搭建網頁框架

教學方法任務驅動自主探究

備注

項目三：HTML5技術

任務1HTML5新增結溝化標簽課時:2

知識目標技能目標素養目標

L了解HTML5中新增能夠綜合運用HTML51.充分認識人生規劃的意義

的文檔結構標簽。新增的結構化標簽進與重要性，引導學生做好人生規

2.掌握網頁布局的方行網頁布局設計，學劃。

法。會自主發現、自主探2.引導學生追求技術創新，服

索的學習方法，學會務國家技術發展。

正確評價作品。

教學重點難點重點：HTML5新增文檔結構標簽

難點：利用HTML5新增的結構化標簽進行網頁布局設計，

教學方法任務驅動、主動探究

備注

任務2浮動及媒體元素的插入課時：2

知識目標技能目標素養目標

1.了解float屬性的1.能夠理解元素浮動引起通過素材案例引領，激發學

應用。“塌陷”的原因及解決辦法。生的愛國熱情。

2.掌握網頁中音視頻2.能夠利用audio和video

的插入方法。標簽在網頁中插入音視頻，

教學重點：1.兀素浮動引起“塌陷”的原因及解決辦法。

教學重點難點2.audio和video標簽。

教學難點：元素浮動引起“塌陷”的原因及解決辦法。

教學方法任務驅動、主動探究

備注

任務3HTML5表單課時:4

知識目標技能目標素養目標

1.掌握創建表單的能夠設計制作表單頁通過利用HTML表單元素制作

HTML標記。面O當前熱點“華為事件”的調查問卷

2.掌握表單的CSS樣頁面，激發學生的科技報國的理想

式控制。信念，并勉勵同學們要開闊眼界、

提升境界、放眼未來做一個有大格

局大情懷的時代新青年。

重點：創建表單的HTML標記。

教學重點難點

難點：表單的CSS樣式控制。

教學方法任務驅動自主探究

備注

任務4：HTML5表單驗證課時：6

知識目標技能目標素養目標

1.掌握HTML5表單控能夠對表單頁面設置驗證屬引導學生樹立安全保密意

件新增的屬性。性，增強其安全性。識，遵守行業規范，提倡健

2.掌握表單驗證的設康的網絡道德準則和交流活

置方法。動。

重點：HTML5表單控件新增的屬性。

教學重點難點

難點：表單驗證設置中正則表達式的定義方法。

教學方法任務驅動法、實踐演示法，

備注

項目四CSS3技術

任務1CSS3邊框與背景課時：4

知識目標技能目標素養目標

1.掌握CSS3新增的能夠使用CSS3新增的樹立正確的技能觀，努力提高

邊框屬性邊框屬性創建美化邊自己的技能，為社會和人民造福；

2.掌握CSS3新增的框。加深學生對專業知識技能學習的

背景屬性認可度與專注度。

重點：CSS3新增的邊框屬性

教學重點難點

難點：CSS3新增的背景屬性

教學方法任務驅動式自主探究

備注

任務2CSS3文本與多列課時:4

知識目標技能目標素養目標

1.掌握CSS3文本屬1.能夠使用CSS3技術培養學生在設計前臺界面時

性的應用實現各種義字特效；的審美能力；提高學生綜合運用所

2.掌握CSS3字體效2.能夠使用CSS3多列學知識的能力。

果的應用實現仿報紙排版效

3.掌握CSS3多列果。

重點：text-shadow屬性的應用

教學重點難點

難點：CSS3多列屬性

教學方法任務驅動自主探究

備注

任務3CSS3變形課時：8

知識目標技能目標素養目標

1.掌握transform屬能夠利用CSS3變形屬培養學生的計算思維、數字化

性能夠實現的變形類性和方法實現圖形的創新與發展、信息社會責任；

型；變換軟件行業規劃解析，培養學生

2.掌握平移、旋轉、的軟件工匠精神。

縮放、翻轉四種變形屬

性

教學重點難點重點：Transform屬性實現平移、旋轉、縮放、翻轉變

形

難點：3D轉換

教學方法任務驅動自主探究

備注

任務4CSS3動畫課時：8

知識目標技能目標素養目標

1.掌握CSS3中的能夠使用CSS3的變形培養學生的創新思維，融會貫

transition過渡動畫與動畫屬性實現炫酷通的能力；培養學生的軟件工

效果的應用的動畫效果。匠精神。

2.掌握CSS3中的

animation動畫效果

的應用

重點：CSS3中的transition過渡動畫效果的應用

教學重點難點

難點：CSS3中的animation動畫效果的應用

教學方法任務驅動自主探究

備注

注：在“項目/任務設計”中，要增加課程思政的案例，課程思政元素的融

入應不少于每門課程總學時的20%。

五、課程實施

（一）教材選用或編寫

1.推薦教材

Web前端開發（初級）工業和信息化教育與考試中心主編中國

工信出版集團

2.教學參考資料

職教云平臺的資源庫課程資源

3.教材編寫體例建議

教材編寫應遵循“適用、實用、夠用”的原則

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

為主，符合課程能力要求及本課程的培養目標；

2）實用：教材應以真實項目為載體，按照實際開發過程組織編

寫內容，強調理論與實踐結合的項目化教材，便于實現“理實一體”

教學，符合高職學生培養要求。

3）