HTML5+CSS3網頁設計與制作課程教學大綱

所屬專業名稱/代碼計算機應用技術、計算機網絡技術、軟件技術、大數據技術、云計算技術應用、物聯網應用技術、人工智能技術課程類型專業基礎課課程代碼課程類型理論+實踐選修/必修必修課使用教材教材名稱版本時間出版社作者是否高職HTML5+CSS3任務驅動教程(第2版)（微課版）2024.12電子工業出版社趙峰等是課時數學分總課時理論學時平時實訓集中實訓實踐課時/比例（%）4642434666%主要授課方式/地點課堂講授與實訓結合/一體化教室主要考試/考核方法綜合作品考核一、課程定位與學習目標（一）課程定位1.人才培養目標定位分析《HTML5+CSS3網頁設計與制作》課程在計算機類專業群中占據著極為關鍵的基礎地位，是群內所有專業的一門核心專業基礎課程。作為專業群中對接“web前端開發工程師”這一重要職業崗位的首門先導課程，它不僅是引領學生踏入專業領域的重要起點，更是著重培養學生滿足該職業崗位任職要求所必備基本能力的關鍵課程。通過系統地開展本課程的學習，能夠切實提升學生在網站開發、維護以及管理方面的基礎能力與素養，為學生今后職業生涯發展打下良好的基礎。2.創新創業與課程融合情況分析在《HTML5+CSS3網頁設計與制作》課程教學中，深度踐行任務驅動式教學模式。課程圍繞豐富多樣的靜態網站開發任務展開詳盡剖析，引導學生從多個維度與視角對網站開發流程進行實踐操作與復用。這種教學模式不僅強化了學生對知識的理解與掌握，更著力于激發學生的創新思維與創業意識。通過課程的系統學習，學生能夠在深刻理解和熟練運用所學知識技能的基礎上，實現創新性地設計和高效維護靜態網站的教學目標，為今后在相關領域內開展創新創業活動積累寶貴經驗與能力，真正做到將創新創業理念無縫融入課程教學之中。3.課程思政、思政課程融合情況分析《HTML5+CSS3網頁設計與制作》課程所涵蓋的技術遵循國際通用的web標準，鑒于互聯網具備傳播迅速、范圍廣泛的顯著特性，這無疑對網站開發人員的職業道德水準提出了更為嚴苛的要求。在課程的具體實施進程中，深度貫徹將職業道德教育與專業技術教學緊密融合的理念，不僅注重傳授先進的專業技術知識，更著力培養學生形成正確的價值觀與職業操守，致力于造就一批既熟練掌握前沿技術，又具備高尚道德品質的web開發專業人才。與此同時，積極引導學生秉持互聯網時代開放包容的精神，以海納百川的胸懷主動學習國際先進的技術經驗，進而能夠憑借自身所學，更優質、更高效地服務于中國企業的發展，為推動國家互聯網事業的進步貢獻力量，實現課程思政與專業教學的有機統一。（二）學習目標1、素質目標（1）培養學生能夠獨立自主地通過多種渠道查閱和搜索資料，進而有效解決在學習和實踐過程中遇到的簡單問題的能力，提升其自主學習與問題解決的素養。（2）著重塑造學生作為信息技術領域從業人員所必需的創新意識，鼓勵學生突破傳統思維的束縛，勇于嘗試新技術、新方法；同時，大力弘揚工匠精神，使學生在專業領域中追求精益求精、注重細節，對工作秉持高度負責的態度。（3）幫助學生養成良好的編碼風格，注重代碼的規范性、可讀性和可維護性，同時養成及時添加準確注釋的習慣。此外，強化學生在團隊協作中的溝通交流能力，培養其團隊合作精神，使其具備適應職業環境的綜合素質。2、知識目標（1）引導學生全面了解web站點的運行機制和工作原理，熟悉服務器搭建的基本流程和關鍵要點，為后續深入學習網站開發奠定堅實的理論基礎。（2）讓學生熟練掌握HTML語言中常見標記和屬性的用法，深入理解其在網頁結構構建中的重要作用，能夠準確、靈活地運用這些標記和屬性實現網頁的基本布局和內容呈現。（3）使學生深入掌握CSS3的各種用法，包括但不限于樣式設置、選擇器應用、動畫效果等。并且能夠根據不同的實際項目需求和場景，準確判斷并選擇合適的布局結構，實現網頁的美觀與高效展示。（4）幫助學生系統掌握網站測試的方法和流程，了解不同類型測試的目的和要點，能夠運用相關工具對網站進行全面測試。同時，熟悉網站發布的各個環節和注意事項，確保網站能夠順利上線并穩定運行。3、能力目標（1）通過系統的課程學習和實踐操作，培養學生具備扎實的基本網站開發能力，能夠獨立完成小型網站的設計與開發工作；具備一定的網站維護能力，能夠及時處理網站運行過程中出現的問題；具備基本的網站管理能力，包括對網站內容、用戶信息等方面的管理。（2）使學生熟練掌握HTML5和CSS3的基本編碼技巧和規范，能夠運用這兩種技術進行高效編碼，實現網頁的各種功能和效果，為成為合格的web前端開發人員奠定堅實的技術基礎。4、思政目標（1）培養學生正確的價值觀和職業道德觀，使其深刻認識到網站開發在互聯網生態中的重要責任。引導學生在網站開發過程中，遵守法律法規和行業規范，尊重知識產權，杜絕惡意代碼和不良信息的傳播，樹立良好的職業操守。（2）強化學生的愛國主義情懷和民族自豪感。通過課程教學，讓學生了解我國在互聯網技術領域取得的成就和貢獻，激勵學生努力學習專業知識，運用所學技術為推動我國互聯網產業的發展貢獻力量，服務于國家和社會。（3）培養學生的全球視野和開放思維。在學習國際通用的web標準和先進技術的過程中，引導學生以開放、包容的心態看待不同文化背景下的技術創新，促進文化交流與技術融合，提升學生在全球化背景下的競爭力和適應能力。（4）培育學生的社會責任感和使命感。讓學生明白網站開發不僅是為了滿足商業需求，更應關注社會公共利益和用戶需求，鼓勵學生運用技術解決社會問題，開發出有益于社會發展和人民生活的優質網站。（三）參考學分學時4學分64學時二、教學條件（一）學習場地、設施要求1．教學做一體化的教室；2．64bit計算機，內存至少8G；3．HbuliderX等。（二）其他要求教學做一體化機房授課。三、課程教學團隊擔《HTML5+CSS3網頁設計與制作》這門課程的主講教師，應具備深厚且豐富的web前端開發實踐經驗，在項目開發過程中積累了大量寶貴的實操技巧與應對策略。同時，主講教師需深入熟悉Web前端開發相關職業技能等級證書的各項要求，對證書所涵蓋的知識體系、技能標準以及考核要點有著清晰且準確的把握。憑借自身扎實的專業素養和實踐能力，能夠獨立且高質量地完成教學項目的設計、實施與指導工作。此外，面對Web開發過程中頻繁出現的各類常見問題，主講教師應具備敏銳的洞察力和高效的解決能力，能夠迅速分析問題根源并提出切實可行的解決方案，從而為學生提供專業、可靠的技術支持與引導，確保學生在學習過程中獲得優質的教學體驗與專業成長。四、教學方法在《HTML5+CSS3網頁設計與制作》課程的教學中，采用任務驅動式的教學模式。整門課程緊密圍繞網絡項目的前端頁面開發流程展開，精心設計一系列具有針對性和挑戰性的任務，讓學生在完成任務的過程中逐步掌握知識與技能。課程堅持理論與實踐緊密結合、相輔相成的原則。一方面，通過系統的理論講解，讓學生深入理解網頁設計與制作的原理和方法；另一方面，借助豐富的實踐活動，使學生能夠將理論知識應用于實際操作，以實踐加深對理論的理解和掌握。在教學過程中，采用“教學做”一體化的課堂活動，同時融入討論、體驗等多樣化的教學方法，充分調動學生的學習積極性和主動性，有效提升學生在實際項目中的操作能力與綜合素養。為促進學生之間的交流與合作，培養學生的團隊協作精神和自主學習能力，課程設置了小組討論環節。在小組討論中，學生們相互交流想法、分享經驗，彼此學習、共同進步，實現知識的互補和能力的提升。教師通過對各小組項目成果的公開點評，搭建起學生小組之間相互學習的平臺。在點評過程中，不僅關注項目的技術實現，更著重對學生的職業素質和創新意識進行評價和培養，引導學生樹立正確的職業態度和價值觀，激發學生的創新思維。此外，為適應信息化時代的教學需求，課程適度引入信息化技術手段。充分利用在線課程資源、微課視頻等多種信息化教學資源，輔助課堂教學，拓展學生的學習渠道，豐富教學內容和形式，為學生提供更加便捷、高效、個性化的學習體驗，助力學生更好地掌握課程知識和技能。五、教學資源建設及信息化應用情況（一）教材根據國家《職業院校教材管理辦法》，基于高等職業院校培養高端技能型人才的目標，教材的選取優先選用職業教育國家規劃教材，也可選用結合教學項目開發校本講義或教材。（二）參考資源本課程教學資源豐富，已建成比較完成的電子資源庫，包含任務素材、微課視頻、思考與課后習題等，方便學生線上學習。（三）其它學習資源1．bilibili網站視頻學習資源2.W3choool官方教程六、課程內容設計（一）課程內容學習模塊教學任務學習內容（支撐知識）教學方法及手段成果形式參考學時模塊一網頁設計基礎知識任務一HBuilderX的安裝HBuilderX的新增功能案案例教學法直觀演示法講述法 任務驅動法安裝HBuilderX2任務二網站的建立網頁、網站、首頁靜態網頁和動態網頁IP地址、域名和URLHTTP和FP任務三網頁的基本知識網頁的基本結構網頁的基本內容網頁的表現網頁的行為網頁的Web標準模塊二HTML5開發基礎任務一編寫一個簡單的HTML5HTML簡介HTML的基本結構項目教學法情境教學法直觀演示法任務驅動法編寫一個簡單的HTML5頁面8任務二設置“在線學習網”的首頁文件頭部信息設置“在線學習網”的首頁文件頭部信息項目三文本與段落任務一文字的基本排版段落換行預格式化水平線各級標題制作“報刊資源建設”網頁4任務二對文字進行加強描述強調文本作品標題小型文本標記文本的更改文本的上下標時間和日期其他相關元素任務三使用塊級元素和行內元素塊級元素行內元素<span>標記任務四特殊符號的使用字符實體任務五添加注釋旁注注釋模塊四網頁中的圖像與多媒體技術任務一制作“在線學習網”的平面作品展示頁面網頁中的圖像使用<img>標記插入圖像1.制作“在線學習網”的平面作品展示頁面2.制作“在線學習網”的廣告作品展示頁面3.制作“在線學習網”的多媒體作品展示頁面8任務二制作“在線學習網”的廣告作品展示頁面使用<object>標記在網頁中插入Flash動畫使用<embed>標記在網頁中插入多媒體內容任務三制作“在線學習網”的多媒體作品展示頁面網頁中的多媒體內容使用<video>標記在網頁中插入視頻用<audio>標記在網頁中插入音頻模塊五應用表格布局頁面任務一圖書借閱詳情頁面的制作表格的基本結構創建表格表格的其他元素1.圖書借閱詳情頁面的制作2.課程表的制作3.學院首頁頁面的制作6任務二課程表的制作跨行跨列設置背景顏色設置任務三學院首頁頁面的制作對齊方式的設置寬度、高度的設置背景圖片的設置模塊六創建網頁中的超鏈接任務一創建“在線學習網”頁面的超鏈接創建超鏈接超鏈接的類型創建“在線學習網”頁面的超鏈接4模塊七網頁表單設計任務一注冊頁面的設計了解表單輸入元素input1.注冊頁面的設計2.讀者留言板的設計4任務二讀者留言板的設計拉選擇框元素select多行文本域textarea模塊八網頁的CSS樣式設計任務一網頁大標題的樣式設計什么是CSSCSS的應用1.網頁大標題的樣式設計2.網頁中的文字排版3.制作新聞列表排行8任務二網頁中的文字排版CSS字體樣式任務三制作產品分類1.列表的應用模塊九使用DIV+CSS布局頁面任務一網頁中的圖文混排CSS盒子模型CSS浮動與定位1.網頁中的圖文混排2.網頁中的全圖排版3.多行多列式布局8任務二網頁中的全圖排版CSS背景控制任務三多行多列式布局CSS代碼優化模塊十使用CSS3美化網站元素任務一使用CSS3設計網站導航CSS3背景漸變及陰影CSS超鏈接樣式1.使用CSS3設計網站導航2.使用CSS3美化表格3.使用CSS3美化表單8任務二使用CSS3美化表格1.HTML表格的特殊應用任務三使用CSS3美化表單1.CSS屬性選擇器模塊十一綜合案例任務一學校網站的頁面設計1.綜合應用所學知識學校網站的頁面設計4課時合計=SUM(ABOVE)64（二）課程資源建設本課程分為11個模塊，每個教學模塊又包含一個或多個任務，共64個課時。采用任務驅動的模式，按照"任務描述