HTML5+CSS3網(wǎng)頁設計任務教程（第2版）課程標準

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

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

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

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

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

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