HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版）課程標(biāo)準(zhǔn)

XXX職業(yè)技術(shù)學(xué)院202X級《WEB開發(fā)基礎(chǔ)》課程標(biāo)準(zhǔn)課程代碼XXXXXX課程性質(zhì)專業(yè)平臺課課程學(xué)分4總學(xué)時(shí)64適用專業(yè)軟件技術(shù)專業(yè)制(修)訂日期202X-X-XX執(zhí)筆審核課程定位本課程是軟件技術(shù)專業(yè)群的平臺課，是培養(yǎng)學(xué)生B/S架構(gòu)項(xiàng)目開發(fā)的基礎(chǔ)必修課程。本課程主要培養(yǎng)學(xué)生的網(wǎng)站設(shè)計(jì)和開發(fā)能力，通過“教、學(xué)、做”一體化教學(xué)，使學(xué)生能熟練掌握PC端網(wǎng)頁、WebApp自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站的開發(fā)規(guī)范和制作技巧，培養(yǎng)學(xué)生的創(chuàng)新能力、審美能力、自學(xué)能力、溝通能力、解決問題能力、自我管理能力、團(tuán)隊(duì)協(xié)作能力，為后續(xù)課程及其他程序設(shè)計(jì)課程的學(xué)習(xí)和應(yīng)用打下基礎(chǔ)。先修課程：《計(jì)算機(jī)應(yīng)用基礎(chǔ)》《程序設(shè)計(jì)基礎(chǔ)》。后續(xù)課程：《JavaWeb應(yīng)用開發(fā)》《Vue前端應(yīng)用開發(fā)》《微信平臺應(yīng)用開發(fā)》等。課程目標(biāo)（一）總體目標(biāo)通過本課程的學(xué)習(xí)，學(xué)生能了解WWW、HTTP、HTML5、CSS3的定義、概念和作用；了解服務(wù)器、客戶端、瀏覽器的概念和作用，熟悉web項(xiàng)目規(guī)劃和需求分析的基本方法，具備web網(wǎng)頁設(shè)計(jì)、制作及站點(diǎn)管理的基本知識和基本技能，學(xué)生能夠獨(dú)立制作中小型的網(wǎng)站。熟練掌握HTML5語言中的各種文本格式、字符格式、段落設(shè)置、列表、標(biāo)記的使用方法；熟練CSS3樣式表制作方法和技巧；熟悉PC端網(wǎng)站、WebApp自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站的排版技巧，根據(jù)前端設(shè)計(jì)師的任職要求，參照計(jì)算機(jī)程序員職業(yè)標(biāo)準(zhǔn)和網(wǎng)站開發(fā)和網(wǎng)頁制作的職業(yè)資格標(biāo)準(zhǔn)，改革課程體系和教學(xué)內(nèi)容。課程內(nèi)容突出職業(yè)能力培養(yǎng)，體現(xiàn)基于職業(yè)崗位分析和能力為導(dǎo)向的課程設(shè)計(jì)理念，以真實(shí)工作任務(wù)或社會產(chǎn)品為載體組織教學(xué)內(nèi)容，在真實(shí)工作情境中采用新的教學(xué)方法和手段進(jìn)行實(shí)施。（二）具體目標(biāo)課程教學(xué)目標(biāo)具體體現(xiàn)為專業(yè)知識、專業(yè)技能和專業(yè)素質(zhì)三方面的目標(biāo)。（1）專業(yè)知識目標(biāo)①掌握HTML5與CSS3基礎(chǔ)知識及最新技術(shù)。②熟悉企業(yè)網(wǎng)站制作具體流程。③掌握不同類型靜態(tài)網(wǎng)站的開發(fā)技巧。④掌握常見HTML5跨平臺開發(fā)工具。⑤掌握網(wǎng)站開發(fā)的基本規(guī)范及原則。（2）專業(yè)技能目標(biāo)①具有分析問題、解決問題的能力。②具有建立實(shí)驗(yàn)假設(shè)、探索查閱知識的能力。③能夠運(yùn)用系統(tǒng)性思維分析和解決問題。④具有學(xué)習(xí)的熱情和興趣，能進(jìn)行自主學(xué)習(xí)和自我評價(jià)，具有良好的變通能力、一定的創(chuàng)造性思維和批判性思維。⑤具備扎實(shí)的HTML5與CSS3開發(fā)基礎(chǔ)。=6\*GB3⑥能夠獨(dú)立進(jìn)行整體操作規(guī)劃及規(guī)范編寫。=7\*GB3⑦能負(fù)責(zé)地完成任務(wù)，具有嚴(yán)格的時(shí)間觀念以及時(shí)間管理意識，能了解本專業(yè)職業(yè)成長過程，并能做好個(gè)人的職業(yè)規(guī)劃。=8\*GB3⑧遵紀(jì)守法，愛崗敬業(yè)，具有良好的職業(yè)道德和職業(yè)形象。（3）專業(yè)素質(zhì)目標(biāo)①具有較強(qiáng)的專業(yè)學(xué)習(xí)、執(zhí)行和創(chuàng)新能力。②具有自覺的規(guī)范意識、團(tuán)隊(duì)協(xié)作意識和協(xié)作能力。③能運(yùn)用各種交流手段進(jìn)行良好地表達(dá)和交流。④具有使用英語進(jìn)行閱讀和交流的能力。⑤具有較強(qiáng)的環(huán)境適應(yīng)、人際交往和組織管理能力。（4）思政育人目標(biāo)①將習(xí)近平新時(shí)代中國特色社會理論、社會主義核心價(jià)值觀和中華優(yōu)秀傳統(tǒng)文化教育內(nèi)容融入到課程的教學(xué)要求中，注重“術(shù)道結(jié)合”；②借鑒國內(nèi)成功實(shí)踐案例的優(yōu)秀經(jīng)驗(yàn)，剖析軟件行業(yè)的奮斗故事，激發(fā)學(xué)生對社會主義核心價(jià)值觀的認(rèn)同感，培養(yǎng)學(xué)生誠實(shí)、守信、堅(jiān)韌不拔的性格，提高學(xué)生在溝通表達(dá)、自我學(xué)習(xí)和團(tuán)隊(duì)協(xié)作方面的能力；③樹立正確的技能觀，努力提高自己的技能，為社會和人民造福，絕不利用自己的技能去從事危害公眾利益的活動(dòng)，包括構(gòu)造虛假信息和不良內(nèi)容、制造電腦病毒、參與盜版活動(dòng)、非法解密存取、黑客行為和攻擊網(wǎng)站等，提倡健康的網(wǎng)絡(luò)道德準(zhǔn)則和交流活動(dòng)，鼓勵(lì)學(xué)生利用自己的所學(xué)的專業(yè)知識，積極參與社會科學(xué)普及活動(dòng)和應(yīng)用推廣活動(dòng)；④培養(yǎng)學(xué)生的軟件工匠精神，在潛移默化中培育社會主義核心價(jià)值觀，提高綜合職業(yè)素養(yǎng)，樹立社會主義職業(yè)精神。（5）職業(yè)資格證書目標(biāo)通過本課程的學(xué)習(xí)，學(xué)生可以參加以下職業(yè)資格證書考試。①全國計(jì)算機(jī)等級考試二級Web程序設(shè)計(jì)考試；②“1+X”Web前端開發(fā)職業(yè)技能等級初級、中級考試；③程序員考試。序號單元名稱學(xué)時(shí)安排1HTML5靜態(tài)網(wǎng)站開發(fā)概述22HTML5中常用標(biāo)簽的使用63CSS基本應(yīng)用84CSS3高級應(yīng)用85頁面局部布局126頁面整體布局167Bootstrap5框架簡介128HTML5+CSS3綜合案例0主要內(nèi)容課程知識點(diǎn)序號章節(jié)知識點(diǎn)技能點(diǎn)德育點(diǎn)1HTML5靜態(tài)網(wǎng)站開發(fā)概述(1)常用HTML5開發(fā)環(huán)境的搭建；(2)完成第一個(gè)HTML5頁面。(1)了解開發(fā)工具HBuilderX以及相關(guān)使用技巧；(2)掌握網(wǎng)站文件及文件夾的存儲路徑；(3)了解網(wǎng)頁的命名規(guī)則及四大命名規(guī)范；(4)掌握HTML5標(biāo)簽的組成結(jié)構(gòu)；(5)了解并掌握HTML5代碼注釋的使用?？傮w目標(biāo)：熟悉代碼編寫規(guī)范。(1)掌握規(guī)范化、標(biāo)準(zhǔn)化的代碼編寫習(xí)慣；(2)具備勤學(xué)善問、舉一反三的鉆研精神；(3)提升自學(xué)能力，有效學(xué)習(xí)保持競爭力。2HTML5中常用標(biāo)簽的使用(1)使用<marquee>標(biāo)簽制作滾動(dòng)字幕；(2)使用<a>標(biāo)簽實(shí)現(xiàn)超鏈接；(3)使用<a>標(biāo)簽實(shí)現(xiàn)錨點(diǎn)鏈接；(4)使用文本類標(biāo)簽實(shí)現(xiàn)文本的顯示；(5)使用文本格式類屬性實(shí)現(xiàn)文本的特殊顯示效果；(6)使用轉(zhuǎn)義字符顯示特殊符號；(7)使用圖像類標(biāo)簽顯示圖像及圖像映射；(8)<iframe>標(biāo)簽的使用；(1)以<marquee>標(biāo)簽為例掌握標(biāo)簽屬性；(2)掌握HTML5中常用的文字類標(biāo)簽及其屬性的使用；(3)掌握HTML5中常用的圖像類標(biāo)簽及其屬性的使用；(4)掌握HTML5中常用的多媒體類標(biāo)簽及其屬性的使用?？傮w目標(biāo)：培養(yǎng)良好的代碼輸入習(xí)慣。(1)開發(fā)網(wǎng)站必須堅(jiān)持質(zhì)量優(yōu)先的技術(shù)操守；(2)知其然、知其所以然、知其所以必然；(3)面對困難，以創(chuàng)新思維解決問題攻克難關(guān)。(9)多媒體標(biāo)簽的使用；(10)表單的簡單應(yīng)用；(11)表單格式驗(yàn)證。3CSS基本應(yīng)用(1)使用CSS設(shè)置body樣式；(2)CSS元素選擇器的使用；(3)內(nèi)聯(lián)式、嵌入式、外部式樣式的使用；(4)測試樣式優(yōu)先級；(5)創(chuàng)建盒子模型；(6)CSS中float屬性的使用；(7)常用文本樣式屬性的使用；(8)常用圖片樣式屬性的使用；(9)position的4種定位方式的使用；(10)Chrome瀏覽器調(diào)試基本技巧。(1)理解層疊樣式表CSS的基本概念及相關(guān)使用技巧；(2)掌握CSS的語法，熟悉常用CSS屬性的含義；(3)理解盒子模型基礎(chǔ)，掌握浮動(dòng)屬性的基本概念；(4)掌握常用的文本樣式和圖片樣式的設(shè)置以及圖片背景的使用；(5)理解定位的概念，掌握常用的定位方法。總體目標(biāo)：初具發(fā)現(xiàn)問題，面對問題，解決問題的能力。(1)具備快速定位和解決問題的能力；(2)具備自我驅(qū)動(dòng)，獨(dú)立思考的能力；(3)具備積極推進(jìn)項(xiàng)目，不斷自我提高的能力。4CSS3高級應(yīng)用(1)FontAwesome圖標(biāo)的使用；(2)CSS3圖片背景的使用；(3)制作搜索框；(4)制作無間隙滾動(dòng)文字和圖片；(5)制作輪播文字和圖片；(6)制作多種文字特效；(7)制作圖片遮罩和懸停特效。(1)掌握使用第三方字體圖標(biāo)庫的使用方法；(2)掌握CSS3特色模塊的使用方法；(3)掌握CSS3動(dòng)畫的基本屬性及使用方法；(4)掌握CSS3文本、圖片等元素的高級使用方法。總體目標(biāo)：實(shí)踐出真知。(1)具備信息搜集與篩選能力；(2)具備創(chuàng)新精神，提高用戶體驗(yàn)；(3)提高代碼閱讀能力和重構(gòu)能力。5頁面局部布局(1)圖文混排與文字溢出；(2)中英文混合標(biāo)題；(3)閱讀更多內(nèi)容；(4)制作文字選項(xiàng)卡與圖片選項(xiàng)卡；(5)制作內(nèi)容折疊與菜單折疊；(6)制作導(dǎo)航條；(7)制作文字列表、圖文混排列表和縮略圖列表；(8)制作登錄界面；(9)制作評論區(qū)。(1)掌握常用的頁面制作方法；(2)掌握常用的頁面布局方法?？傮w目標(biāo)：深入理解局部和整體的關(guān)系。(1)加強(qiáng)代碼復(fù)用性，模塊化思維能力；(2)加強(qiáng)時(shí)間觀念，提高工作效率；(3)嘗試采用不同的方法實(shí)現(xiàn)同一個(gè)效果。6頁面整體布局(1)960網(wǎng)格系統(tǒng)在網(wǎng)頁制作中的使用；(2)clearfix和clear的使用；(3)常用經(jīng)典布局；(4)常用彈性布局；(5)表格基本知識；(6)使用表格制作個(gè)人簡歷；(7)使用表格制作QQ郵箱；(8)使用基于lib-flexible庫的rem單位制作自適應(yīng)網(wǎng)站。(1)掌握常用的頁面制作方法；(2)掌握常用的頁面布局方法（包括彈性布局）；(3)掌握表格的基礎(chǔ)知識，包括標(biāo)簽常用屬性及其描述；(4)掌握使用表格制作簡歷及百分比網(wǎng)頁的方法；(5)掌握采用rem制作自適應(yīng)webApp的方法?？傮w目標(biāo)：培養(yǎng)新時(shí)代的“工匠精神”。(1)開發(fā)軟件必須堅(jiān)持質(zhì)量優(yōu)先的技術(shù)操守；(2)面對重復(fù)性工作，不抱怨不放棄；(3)面對困難，以創(chuàng)新思維解決問題攻克難關(guān)。7Bootstrap5框架簡介(1)Bootstrap5基礎(chǔ)知識；(2)制作柵格化布局頁面；(3)制作響應(yīng)式導(dǎo)航欄；(4)制作響應(yīng)式輪播圖；(5)制作響應(yīng)式文字和圖片；(6)制作完整的響應(yīng)式網(wǎng)站。(1)掌握Bootstrap5安裝使用；(2)了解并掌握柵格化布局；(3)學(xué)會使用響應(yīng)式導(dǎo)航欄；(4)學(xué)會使用響應(yīng)式輪播圖；(5)學(xué)會使用文字和圖片排版；(6)掌握完整的響應(yīng)式網(wǎng)站開發(fā)流程；(7)掌握Bootstrap5常用類?？傮w目標(biāo)：培養(yǎng)繼往開來的創(chuàng)新精神。(1)新技術(shù)新框架不斷涌現(xiàn)，需要不斷學(xué)習(xí)；(2)提升自學(xué)能力，打造個(gè)人核心競爭力；(3)工作只是起點(diǎn)終身學(xué)習(xí)更能贏得未來。8HTML5+CSS3綜合案例(1)靜態(tài)網(wǎng)頁開發(fā)的基本流程；(2)期末大作業(yè)。(1)掌握網(wǎng)頁開發(fā)的基本流程；(2)結(jié)合案例鞏固網(wǎng)頁制作的知識?？傮w目標(biāo)：培養(yǎng)更新觀念、終身學(xué)習(xí)、與時(shí)俱進(jìn)的精神。(1)以項(xiàng)目經(jīng)理的角色完成網(wǎng)站開發(fā)；(2)團(tuán)隊(duì)協(xié)作精神及集體合作意識；(3)高效利用時(shí)間完成工作計(jì)劃任務(wù)。教學(xué)建議（一）教學(xué)方式建議從企業(yè)項(xiàng)目研發(fā)的實(shí)際問題出發(fā)，精心準(zhǔn)備各種典型案例，構(gòu)建課程的宏觀教學(xué)設(shè)計(jì)。例如，公司網(wǎng)站、網(wǎng)上鮮花直銷、個(gè)人網(wǎng)站精選、書籍專賣等。以若干個(gè)案例為載體，形成循序漸進(jìn)、種類多樣的項(xiàng)目群，構(gòu)建完整的教學(xué)設(shè)計(jì)布局。1、教學(xué)采用“四階段教學(xué)法”，將“教、學(xué)、練、做”融為一體。教學(xué)體現(xiàn)“教師為主導(dǎo)，學(xué)生為主體，訓(xùn)練為主線”的原則，課堂上可以采用“四階段教學(xué)法”：

第1個(gè)階段，案例引入，提出問題。根據(jù)在線開放課程視頻學(xué)習(xí)的知識點(diǎn)，案例演示，提出問題，講解案例應(yīng)用背景，給學(xué)生一個(gè)切入點(diǎn)，建立感性認(rèn)識。目的是激發(fā)學(xué)生的學(xué)習(xí)興趣、讓學(xué)生感到學(xué)有所用，從而明確本次課的教學(xué)目標(biāo)。

第2個(gè)階段，學(xué)生自主學(xué)習(xí)，嘗試解決問題。充分利用我校以及互聯(lián)網(wǎng)網(wǎng)絡(luò)教學(xué)資源，引導(dǎo)學(xué)生自主學(xué)習(xí)，找到解決問題的方法和操作技能，培養(yǎng)學(xué)生的自主學(xué)習(xí)意識和學(xué)習(xí)方法。學(xué)生在學(xué)習(xí)和嘗試解決問題過程中，發(fā)現(xiàn)問題，提出問題，在問題的引導(dǎo)下學(xué)習(xí)相關(guān)的知識和操作技能。

第3個(gè)階段，歸納總結(jié)，引申提高。在每次課結(jié)束前，引導(dǎo)學(xué)生進(jìn)行歸納總結(jié)。對本次課的實(shí)際意義、重點(diǎn)、難點(diǎn)、容易出錯(cuò)處等及時(shí)進(jìn)行總結(jié)。并針對案例的不足之處，進(jìn)行引申和提高。注意在這個(gè)階段，強(qiáng)調(diào)的是“引導(dǎo)”學(xué)生，而不是老師講解。

第4個(gè)階段，舉一反三、學(xué)以致用。案例源于生活，最終要應(yīng)用于生活。為了使學(xué)生能學(xué)以致用、舉一反三、觸類旁通，每次教學(xué)結(jié)束時(shí)及時(shí)布置相關(guān)的課后練習(xí)，使學(xué)生在課后進(jìn)一步復(fù)習(xí)鞏固，并且將課后作業(yè)納入形成性考核的內(nèi)容之一。同時(shí)給出下一次課的學(xué)習(xí)內(nèi)容，提示學(xué)生在課下完成視頻學(xué)習(xí)和在線測試。2、充分利用現(xiàn)代化教學(xué)手段，提高教學(xué)效果教學(xué)中采用電子演示文稿、大屏幕多媒體聯(lián)機(jī)演示、網(wǎng)絡(luò)教學(xué)等各種先進(jìn)的教學(xué)手段，使課堂教學(xué)生動(dòng)活潑、引人入勝，提高了教學(xué)效果，同時(shí)提高了教學(xué)效率。包括：

（2）利用網(wǎng)絡(luò)將課堂教學(xué)延伸到課外，學(xué)生根據(jù)需要通過網(wǎng)絡(luò)學(xué)習(xí)有關(guān)的內(nèi)容，并進(jìn)行在線答疑和討論。教師的課件和教學(xué)用資料都已都上傳到教學(xué)資源下載中心，方便學(xué)生課外學(xué)習(xí)和復(fù)習(xí)。（二）教材建議必須依據(jù)本課程標(biāo)準(zhǔn)選用或編寫教材。要充分體現(xiàn)項(xiàng)目課程設(shè)計(jì)思想，以項(xiàng)目為載體實(shí)施教學(xué)，項(xiàng)目選取要科學(xué)、符合該門課程的工作邏輯、能形成系列，讓學(xué)生在完成項(xiàng)目的過程中逐步提高職業(yè)能力，同時(shí)要考慮可操作性。教材內(nèi)容要反映新技術(shù)，并在內(nèi)容選取上本著理論與實(shí)踐一體化的原則，注重動(dòng)態(tài)網(wǎng)站開發(fā)的實(shí)際訓(xùn)練，使學(xué)生能夠及時(shí)、準(zhǔn)確地掌握web項(xiàng)目開發(fā)的最新知識。建議選擇高等教育出版社的《HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版）》（ISBN978-7-04-060659-1）作為本課程教材。（三）實(shí)訓(xùn)條件建議（1）教學(xué)硬件：機(jī)房、網(wǎng)絡(luò)。（2）教學(xué)軟件：PhotoShop、HBuilderX、谷歌瀏覽器、教學(xué)廣播軟件。（3）教師準(zhǔn)備：教材、教案及課件、網(wǎng)頁素材。（四）考核方式建議本課程考核采用形成性考核方式，總評成績由形成性考核的各項(xiàng)成績組成，全面考核學(xué)生的動(dòng)手能力、基礎(chǔ)理論和平時(shí)學(xué)習(xí)狀況，分?jǐn)?shù)比例為：序號考核環(huán)節(jié)考核內(nèi)容比例1在線學(xué)習(xí)評價(jià)完成在線課程視頻學(xué)習(xí)、作業(yè)、測驗(yàn)、討論及理論考試30%2學(xué)習(xí)態(tài)度評價(jià)課堂紀(jì)律、出勤率、實(shí)訓(xùn)態(tài)度、儀容儀表20%3項(xiàng)目成果評價(jià)1、PC端網(wǎng)站(1)頁面不得低于5個(gè)，頁面名稱一律采用英文表示，5個(gè)頁面都以圖片為效果圖進(jìn)行修改；(2)自己處理的圖片至少5個(gè)，類型不得相同，至