《HTML5+CSS3網(wǎng)頁基礎(chǔ)》課程標(biāo)準(zhǔn)

《HTML5+CSS3網(wǎng)頁基礎(chǔ)》課程標(biāo)準(zhǔn)一、課程性質(zhì)與任務(wù)課程編碼020190001課程類別專業(yè)基礎(chǔ)課課程名稱HTML5+CSS3網(wǎng)頁基礎(chǔ)英文名稱HTML5+CSS3WebFoundation建議修讀學(xué)期第一學(xué)期總學(xué)時數(shù)48理論學(xué)時16實訓(xùn)學(xué)時8其他學(xué)時24考核方式過程性評價+綜合實踐+課程貢獻適用專業(yè)計算機應(yīng)用技術(shù)專業(yè)二、專業(yè)核心素養(yǎng)與課程目標(biāo)（一）專業(yè)核心素養(yǎng)1.能夠進行計算機組裝與維護的能力。2.能夠進行網(wǎng)絡(luò)設(shè)備維護的能力。3.能夠進行網(wǎng)頁制作的能力。4.能夠進行數(shù)據(jù)信息處理的能力。（二）課程目標(biāo)通過本課程的學(xué)習(xí)，能夠掌握HTML5標(biāo)簽的基本用法，能使用CSS3和HTML5控制文本、圖片等樣式，能對常見頁面進行合理布局，學(xué)會制作各種企業(yè)、門戶、電商類網(wǎng)站，同時為以后的后續(xù)Web前端開發(fā)打下堅實的基礎(chǔ)。具體目標(biāo)如下：1.掌握網(wǎng)頁設(shè)計常用工具的使用方法（支撐畢業(yè)要求3、4、5）。2.能夠?qū)W(wǎng)頁元素進行編輯（支撐畢業(yè)要求1、2、5、7）。3.能夠?qū)W(wǎng)頁元素進行美化（支撐畢業(yè)要求1、2、5、7）。4.能夠?qū)W(wǎng)頁進行合理布局及美化（支撐畢業(yè)要求1、2、5、7）。5.能夠制作簡單的交互網(wǎng)頁（支撐畢業(yè)要求1、2、5、7）。三、課程結(jié)構(gòu)表一課程結(jié)構(gòu)模塊主題學(xué)時網(wǎng)頁編碼規(guī)范網(wǎng)頁編碼的基本要求及軟件使用2HTML5標(biāo)簽網(wǎng)頁構(gòu)成的基本元素及屬性設(shè)置16初識CSS3通過CSS3美化網(wǎng)頁元素12CSS3選擇器優(yōu)化樣式表8盒子模型網(wǎng)頁布局基礎(chǔ)知識4網(wǎng)頁布局對網(wǎng)頁整體進行布局6四、課程內(nèi)容序號項目名稱學(xué)習(xí)目標(biāo)（包括知識、技能、情感、任務(wù)等目標(biāo)）學(xué)習(xí)內(nèi)容學(xué)時教學(xué)方法教學(xué)條件1編碼規(guī)范知識目標(biāo)：1.了解HTML5發(fā)展歷程，熟悉HTML5瀏覽器支持情況。2.理解HTML5基本語法，掌握HTML5語法新特性。技能目標(biāo)：1.能使用開發(fā)環(huán)境創(chuàng)建項目。素質(zhì)目標(biāo)：1.體驗互聯(lián)網(wǎng)的強大。2.感受技能的發(fā)展迅速。1.HTML5概述2.HTML5基礎(chǔ)2小組討論法網(wǎng)絡(luò)平臺混合式教學(xué)案例教學(xué)法1.云桌面系統(tǒng)2.超星學(xué)習(xí)通平臺3.智慧職教專業(yè)群教學(xué)資源庫4.開發(fā)工具Hbuilder2HTML5標(biāo)簽知識目標(biāo)：1.掌握文本控制標(biāo)簽的用法.2.掌握HTML圖像標(biāo)簽、列表標(biāo)簽、容器標(biāo)簽超鏈接標(biāo)簽的用法技能目標(biāo)：1.能使用文本控制標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記，列表標(biāo)簽?zāi)軌蛑谱骱唵蔚木W(wǎng)頁。素質(zhì)目標(biāo)：1.通過專業(yè)學(xué)習(xí)感受標(biāo)準(zhǔn)化帶來的便捷1.文本控制標(biāo)簽2.列表標(biāo)簽3.容器標(biāo)簽4.圖像標(biāo)簽5.超鏈接標(biāo)簽6.絕對路徑和相對路徑7.階段案例：制作HTML5B百科頁面16小組討論法網(wǎng)絡(luò)平臺混合式案例教學(xué)法1.云桌面系統(tǒng)2.超星學(xué)習(xí)通平臺3.智慧職教專業(yè)群教學(xué)資源庫4.開發(fā)工具Hbuilder3初識CSS3知識目標(biāo)：1.掌握CSS基礎(chǔ)選擇器的書寫規(guī)則，2.熟悉CSS文本樣式屬性設(shè)置方法3.熟悉CSS超鏈接樣式屬性。4.理解CSS優(yōu)先級。技能目標(biāo)：1.能夠運用CSS選擇器定義標(biāo)記樣式。2.能夠運用相應(yīng)的屬性定義文本樣式。3.能用運用列表樣式設(shè)置列表效果。4.能夠區(qū)分復(fù)合選擇器權(quán)重的大小。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生規(guī)范書寫代碼的專業(yè)素養(yǎng)。2.培養(yǎng)學(xué)生的自學(xué)能力。3．提高學(xué)生的職業(yè)素養(yǎng)，重視客戶體驗，站在客戶的角度考慮問題。1.CSS核心基礎(chǔ)2.CSS文本樣式和外觀屬性3.CSS控制列表樣式4.CSS高級特性5.階段案例：制作活動通知頁面12線上線下混合教學(xué)模式討論法對比法案例教學(xué)法游戲法自主學(xué)習(xí)法案例教學(xué)法競賽法1.云桌面系統(tǒng)2.超星學(xué)習(xí)通平臺3.智慧職教專業(yè)群教學(xué)資源庫4.開發(fā)工具Hbuilder4CSS3選擇器知識目標(biāo)：1.掌握CSS3中新增加的屬性選擇器，能夠運用屬性選擇器為頁面中的元素添加樣式。2.理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素間的關(guān)系。3.掌握常用的結(jié)構(gòu)化偽類選擇器，能夠為相同名稱的元素定義不同樣式。4.掌握偽元素選擇器的使用，能夠在頁面中插入所需要的文字或圖片內(nèi)容。5.掌握CSS偽類，會使用CSS偽類實現(xiàn)超鏈接特效。技能目標(biāo)：1.能使用css選擇器，設(shè)置頁面對象的樣式素質(zhì)目標(biāo)：1.通過新知識體驗勤奮學(xué)習(xí)的重要性1．屬性選擇器2．關(guān)系選擇器3．結(jié)構(gòu)化偽類選擇器4．偽元素選擇器5．鏈接偽類6．階段案例：制作網(wǎng)頁設(shè)計軟件8線上線下混合式教學(xué)模式討論法對比法案例教學(xué)法游戲法自主學(xué)習(xí)法案例教學(xué)法1.云桌面系統(tǒng)2.超星學(xué)習(xí)通平臺3.智慧職教專業(yè)群教學(xué)資源庫4.開發(fā)工具Hbuilder5CSS盒子模型知識目標(biāo)：1.掌握盒子的相關(guān)屬性，能夠制作常見的盒子模型效果。2.掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。3.理解漸變屬性的原理，能夠設(shè)置漸變背景。4.熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符號技能目標(biāo)：1.能利用盒子模型原理，對頁面進行合理的設(shè)置素質(zhì)目標(biāo)：1.通過設(shè)置屬性，體驗工作的嚴(yán)謹(jǐn)性1．盒子模型概述2．盒子模型相關(guān)屬性3．背景屬性4．CSS3漸變屬性5．階段案例：制作音樂排行榜4線上線下混合式教學(xué)模式討論法對比法案例教學(xué)法游戲法自主學(xué)習(xí)法案例教學(xué)法1.云桌面系統(tǒng)2.超星學(xué)習(xí)通平臺3.智慧職教專業(yè)群教學(xué)資源庫4.開發(fā)工具Hbuilder6網(wǎng)頁布局知識目標(biāo)：1.理解元素的浮動，能夠為元素設(shè)置浮動樣式。2.熟悉清除浮動的方法，可以使用不同方法清除浮動。3.掌握元素的定位，能夠為元素設(shè)置常見的定位模式。技能目標(biāo)：1、能使用浮動與定位技術(shù)對頁面合理布局素質(zhì)目標(biāo)：具有創(chuàng)新意識具有學(xué)習(xí)意識1．元素的浮動2．Overflow屬性3．元素的定位4．元素的類型與轉(zhuǎn)換5．階段案例：制作網(wǎng)頁焦點圖6線上線下混合式教學(xué)模式討論法對比法案例教學(xué)法游戲法自主學(xué)習(xí)法案例教學(xué)法1.云桌面系統(tǒng)2.超星學(xué)習(xí)通平臺3.智慧職教專業(yè)群教學(xué)資源庫4.開發(fā)工具Hbuilder五、學(xué)業(yè)質(zhì)量（一）學(xué)業(yè)質(zhì)量內(nèi)涵學(xué)業(yè)質(zhì)量是學(xué)生在完成本課程學(xué)習(xí)后的學(xué)業(yè)成就表現(xiàn)。學(xué)業(yè)質(zhì)量標(biāo)準(zhǔn)是以本課程的核心素養(yǎng)及表現(xiàn)水平為主要維度，結(jié)合課程內(nèi)容，對學(xué)生學(xué)業(yè)成就表現(xiàn)的總體刻畫。依據(jù)不同水平學(xué)業(yè)成就表現(xiàn)的關(guān)鍵特征，學(xué)業(yè)質(zhì)量標(biāo)準(zhǔn)明確將學(xué)業(yè)質(zhì)量劃分為不同水平，并描述了不同水平學(xué)習(xí)結(jié)果的具體表現(xiàn)?！禜TML5+CSS3網(wǎng)頁基礎(chǔ)》學(xué)業(yè)質(zhì)量以HTML5標(biāo)簽、CSS3樣式設(shè)置、網(wǎng)頁布局、交互頁面制作等方面的核心素養(yǎng)為基礎(chǔ)，結(jié)合《HTML5+CSS3網(wǎng)頁基礎(chǔ)》的內(nèi)容，重點描述了高職學(xué)生在網(wǎng)頁制作過程中的解決問題的能力和表現(xiàn)。（二）課程目標(biāo)與畢業(yè)要求的對應(yīng)關(guān)系《HTML5+CSS3網(wǎng)頁基礎(chǔ)》學(xué)業(yè)質(zhì)量設(shè)置三個水平。這三個水平是根據(jù)課程項目本身的復(fù)雜程度、問題情境對相關(guān)知識、技能、思維品質(zhì)的要求以及課程項目涉及的情感態(tài)度和價值觀念等進行劃分的。每一級水平主要表現(xiàn)為學(xué)生在不同復(fù)雜程度的情境中，運用知識、技能以及各種重要概念、方法和觀念解決問題的關(guān)鍵特征。水平一：（及格水平要求）根據(jù)教學(xué)任務(wù)，學(xué)生能夠理解最基本的定義，能實現(xiàn)最基本最簡單的操作，能對基礎(chǔ)知識做出正確的判斷，能掌握基本的技能操作。水平二：（良好水平要求）學(xué)生在能夠掌握基礎(chǔ)知識，基本技能操作能獨立完成，同時對于綜合簡單案例能夠自己獨立完成，或?qū)Υ嬖诘囊蓡柲軌蚶镁W(wǎng)絡(luò)工具找到解決方法。水平三：（優(yōu)秀水平要求）學(xué)生能夠獨立完成綜合的項目，能對為學(xué)習(xí)的技能，通過網(wǎng)絡(luò)學(xué)習(xí)掌握技能，并能夠應(yīng)用到項目中去。表二課程指標(biāo)課程目標(biāo)權(quán)重指標(biāo)點畢業(yè)要求P（1）5%A（5）A（7）K（5）K（7）Q（3）G（5）P（2）20%K（1）K（2）K（5）K（7）A（1）A（5）A（7）Q（1）Q（2）Q（3）G（1）G（2）G（5））P（3）30%K（1）K（2）K（5）K（7）A（1）A（5）A（7）Q（1）Q（2）Q（3）G（1）G（2）G（5）P（4）30%K（1）K（2）K（5）K（7）A（1）A（5）A（7）Q（1）Q（2）Q（3）G（1）G（2）G（5）P（5）15%K（1）K（2）K（5）K（7）A（1）A（5）A（7）Q（1）Q（2）Q（3）G（1）G（2）G（5）六、課程實施（一）教學(xué)要求《HTML5+CSS3網(wǎng)頁基礎(chǔ)》是計算機應(yīng)用技術(shù)專業(yè)基礎(chǔ)課、軟件技術(shù)專業(yè)的一門專業(yè)必修課，要求學(xué)生能熟練使用Hbuilder教學(xué)軟件完成案例和項目，能熟練使用超星平臺進行自主學(xué)習(xí)，完成老師布置的任務(wù)。通過本課程的學(xué)習(xí)，要求學(xué)生掌握HTML5標(biāo)簽的基本用法，能使用CSS3和HTML5控制文本、圖片等樣式，能對頁面進行合理布局，能掌握網(wǎng)頁頁面代碼結(jié)構(gòu)，能夠制作簡單的交互頁面，為以后的web程序設(shè)計打下堅實的基礎(chǔ)。（二）學(xué)業(yè)水平評價1.課程教學(xué)評價表三課程教學(xué)評價表課程教學(xué)目標(biāo)考核內(nèi)容實施方式課程目標(biāo)1軟件下載創(chuàng)建項目環(huán)境安裝、創(chuàng)建項目課程目標(biāo)2文本控制標(biāo)簽圖像標(biāo)簽超鏈接標(biāo)簽絕對路徑和相對路徑列表標(biāo)簽表格標(biāo)簽1.分組討論，總結(jié)展示2.階段案例3.對所學(xué)內(nèi)容的貢獻1）提出一個有質(zhì)量的問題+1分。2）解決一個有質(zhì)量的問題回答質(zhì)量+2—+5分3）提供一個在線運行的案例，并能實現(xiàn)+5分課程目標(biāo)3CSS核心基礎(chǔ)設(shè)置文本樣式設(shè)置列表樣式CSS高級特性CSS選擇器1.分組討論，總結(jié)展示2.課堂小測3.階段案例4.對所學(xué)內(nèi)容的貢獻1）提出一個有質(zhì)量的問題+1分。2）解決一個有質(zhì)量的問題回答質(zhì)量+2—+5分3）提供一個在線運行的案例，并能實現(xiàn)+5分課程目標(biāo)4盒子模型屬性盒子模型新增屬性元素類型及轉(zhuǎn)換布局常用屬性布局類型1.分組討論，總結(jié)展示2.課堂小測3.階段案例4.對所學(xué)內(nèi)容的貢獻1）提出一個有質(zhì)量的問題+1分。2）解決一個有質(zhì)量的問題回答質(zhì)量+2—+5分3）提供一個在線運行的案例，并能實現(xiàn)+5分2.課程成績評定方式3.課程目標(biāo)達成度評價方式表四教學(xué)目標(biāo)權(quán)重課程教學(xué)目標(biāo)討論發(fā)言課堂小測階段案例課堂表現(xiàn)試卷分值權(quán)重分值權(quán)重分值權(quán)重分值權(quán)重分值權(quán)重課程目標(biāo)110010%10020%10020%10010%10040%課程目標(biāo)210010%10020%10020%10010%10040%課程目標(biāo)310010%10020%10020%10010%10040%課程目標(biāo)410010%10020%10020%10010%10040%課程目標(biāo)達成度計算方法：1.課程分目標(biāo)達成度=課程分目標(biāo)下各評定方式的“學(xué)生平均成績/分值*權(quán)重”之和。2.整體課程目標(biāo)達成度：各課程分目標(biāo)達成度的最小值。（三）教材選擇《HTML5+CSS3網(wǎng)頁設(shè)計與制作》編者黑馬程序員人民郵電出版社（四）課程資源開發(fā)與學(xué)習(xí)環(huán)境創(chuàng)設(shè)1.主要參考書目（1）《HTML5+CSS3從入門到精通（標(biāo)準(zhǔn)版）》未來科技、中國水利水電出版社、9787517054160、2017年8月第一版（2）《HTML5從入門到精通》明日科技、清華大學(xué)出版社、9787302458203、2017年6月第二版2.其它學(xué)習(xí)資源1.課前視頻：2.學(xué)業(yè)報告：每次課前為學(xué)生提供學(xué)業(yè)報告，報告中包含教師提供的本次課的重點、難點。重難點的解決辦法、學(xué)法指導(dǎo)，課前必備知識和技能等；包含需要學(xué)生完成的課堂討論記錄，案例，案例實現(xiàn)思路等。3.常用網(wǎng)站。（五）教師團隊建設(shè)為打造一支高執(zhí)行力、負(fù)責(zé)任、付出、共贏的教師團隊，增強教師的歸屬感，激發(fā)感恩情懷，凡事主動積極，感恩付出。發(fā)揮團隊的整體力量，促進教師的專業(yè)成長，提升核心發(fā)展力，團隊建設(shè)如下：1.課程組教師每周集體教研至少一次，總結(jié)一周來學(xué)生狀態(tài)和反饋。2.根據(jù)學(xué)生反饋及時修改教學(xué)設(shè)計，調(diào)整教學(xué)方法。3.每兩個星期集中學(xué)習(xí)教育教學(xué)理論，按教學(xué)能力大賽要求，努力創(chuàng)新改革教學(xué)模式。4.學(xué)習(xí)線上資源創(chuàng)建方法，建設(shè)線上資源。（六）教學(xué)管理1.過程管理。嚴(yán)格按照教學(xué)過程的規(guī)律來決定教學(xué)工作的順序，每學(xué)期初制定計劃，通過階段檢查和總結(jié)等措施來輔助實現(xiàn)課程目標(biāo)。2.業(yè)務(wù)管理。嚴(yán)格按照二級認(rèn)證標(biāo)準(zhǔn)準(zhǔn)備教案、視頻等課前資料，每周檢查。3.質(zhì)量管理。通過查看學(xué)業(yè)報告，檢查教師的教學(xué)質(zhì)量，通過檢查教案，查看教師的工作態(tài)度。4.監(jiān)控管理。對教學(xué)的過程和情況進行了解和監(jiān)測，找出反映教學(xué)質(zhì)量的資料和數(shù)據(jù)，發(fā)現(xiàn)教學(xué)中存在的問題，分析產(chǎn)生問題的原因，提出糾正存在問題的建議。

附錄1課程教學(xué)進度表課程教學(xué)進度表（2021—2022學(xué)年第一學(xué)期）課程名稱網(wǎng)頁設(shè)計與制作周課時4任課教師王建敏系（部院）名稱人工智能系專業(yè)名稱計算機應(yīng)用技術(shù)班級名稱計應(yīng)23級三年制周次學(xué)時單元標(biāo)題項目名稱項目任務(wù)54網(wǎng)頁規(guī)范課程介紹創(chuàng)建站點1、建立站點2、資源分類3、新建網(wǎng)頁64國慶節(jié)休息74HTML5標(biāo)簽1、制作圖文混排新聞1、分析新聞模塊效果圖2、搭建新聞模塊結(jié)構(gòu)3、控制新聞模塊圖像4、控制新聞模塊文本849292CSS3基礎(chǔ)制作活動通知頁面1、分析活動通知頁面效果圖2、搭建活動通知頁面結(jié)構(gòu)3、定義活動通知頁面樣式104114124CSS3選擇器制作招聘頁面1、分析招聘頁面效果圖2、搭建招聘頁面結(jié)構(gòu)3、定義招聘頁面樣式134144盒子模型制作音樂排行榜1、分析音樂排行榜效果圖2、制作音樂排行榜頁面結(jié)構(gòu)3、定義音樂排行榜CSS樣式154164網(wǎng)頁布局制作通欄Banner1、分析通欄banne