HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教程（第2版）教案-單元設(shè)計 單元1 HTML5靜態(tài)網(wǎng)站開發(fā)概述

XXXXXX學(xué)院單元設(shè)計課程課程：內(nèi)容：單元1HTML5靜態(tài)網(wǎng)站開發(fā)概述學(xué)時：

設(shè)計摘要教學(xué) 課題單元1HTML5靜態(tài)網(wǎng)站開發(fā)概述課程學(xué)時安排2學(xué)時年級高職一年級所選教材湯佳陳曉男主編．《HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教材（第2版）》．高等教育出版社，2023年12月．一、教學(xué)背景創(chuàng)作思路：針對傳統(tǒng)教學(xué)無法解決的教學(xué)難題進(jìn)行設(shè)計，課程依托信息化教學(xué)環(huán)境，整合數(shù)字化教學(xué)資源，采用混合式教學(xué)模式，采用翻轉(zhuǎn)課堂的有力手段，采用“有效學(xué)習(xí)時間”的理念進(jìn)行項目化考核。以學(xué)生為中心，教師做引導(dǎo)，在項目教學(xué)的各環(huán)節(jié)充分運用HbuilderX開發(fā)工具、智慧職教MOOC、動畫、在線教學(xué)平臺等信息化手段解決教學(xué)重點難點問題。設(shè)計特色 ：1．教學(xué)過程項目化：依據(jù)“工學(xué)結(jié)合、職業(yè)情境、項目主導(dǎo)”人才培養(yǎng)模式，通過創(chuàng)設(shè)情境、針對實際問題精心設(shè)計單元引例，教師點評、小組互評，使學(xué)生自主探究，“做中學(xué)”，“學(xué)中做”，降低了學(xué)生學(xué)習(xí)難度，提高學(xué)習(xí)興趣和課堂參與度；2．教學(xué)資源數(shù)字化：豐富的課件、經(jīng)典作品、視頻等資源可供學(xué)生在線平臺學(xué)習(xí)；3．網(wǎng)絡(luò)平臺融合化：緊緊圍繞HbuilderX開發(fā)工具，融入智慧職教MOOC、動畫、在線教學(xué)平臺等信息化手段進(jìn)行教學(xué)完成教學(xué)目標(biāo)，突破重點、難點；4．學(xué)習(xí)評價多元化：結(jié)合作品展示、小組匯報等多種方式，采用學(xué)生自評、師生互評，以及評價平臺等多種手段形成動態(tài)化、多元化的評價體系。二、學(xué)習(xí)目標(biāo)與內(nèi)容1.學(xué)習(xí)目標(biāo) 知識目標(biāo)：了解開發(fā)工具HBuilderX以及相關(guān)使用技巧；掌握網(wǎng)站文件及文件夾的存儲路徑；了解網(wǎng)頁的命名規(guī)則及四大命名規(guī)范；掌握HTML5標(biāo)簽的組成結(jié)構(gòu)；了解并掌握HTML5代碼注釋的使用。能力目標(biāo)：能夠熟練、規(guī)范地新建網(wǎng)站及網(wǎng)頁；能夠熟練書寫HTML5標(biāo)簽及注釋；能夠熟練使用HBuilderX及快捷鍵。素質(zhì)目標(biāo)：總體目標(biāo)：熟悉代碼編寫規(guī)范。掌握規(guī)范化、標(biāo)準(zhǔn)化的代碼編寫習(xí)慣；具備勤學(xué)善問、舉一反三的鉆研精神；提升自學(xué)能力，有效學(xué)習(xí)保持競爭力。思政育人目標(biāo)：通過學(xué)習(xí)四種基本的編程命名規(guī)范，讓學(xué)生明白規(guī)范行事將會事半功倍；通過學(xué)習(xí)HBuilderX快捷鍵，可以熟練掌握工具，提高工作效率。2.學(xué)習(xí)主要內(nèi)容 （1）常用HTML5開發(fā)環(huán)境的搭建；（2）完成第一個HTML5頁面。3.學(xué)習(xí)重點及難點教學(xué)重點：網(wǎng)頁文件及子文件夾的存儲路徑；HTML5標(biāo)簽的組成結(jié)構(gòu)；HTML5標(biāo)簽的語法結(jié)構(gòu)。教學(xué)難點：網(wǎng)頁的命名規(guī)則及變量的四大命名規(guī)范；HTML5代碼注釋語法結(jié)構(gòu)及其作用。三、學(xué)情分析授課對象是高職一年級的學(xué)生，通過一學(xué)期的學(xué)習(xí)，已系統(tǒng)學(xué)習(xí)了《計算機(jī)應(yīng)用基礎(chǔ)》《程序設(shè)計基礎(chǔ)》課程，有一定的編程基礎(chǔ)，但對軟件開發(fā)基本流程的理解、自我規(guī)劃和管理能力、團(tuán)隊協(xié)作交流能力、自我學(xué)習(xí)解決問題的能力還有所欠缺，基于“課堂不保證做，課后保證不做”的現(xiàn)狀，需要采用翻轉(zhuǎn)課堂的有力手段監(jiān)督其課后學(xué)習(xí)情況，課堂主要用于作業(yè)檢查、解惑答疑、交流討論，從而達(dá)到更好的教學(xué)效果。四、學(xué)習(xí)環(huán)境選擇與學(xué)習(xí)資源設(shè)計1.學(xué)習(xí)環(huán)境（1）教學(xué)硬件：多媒體教室；（2）教學(xué)軟件：極域電子教室、PhotoShop、HBuilderX、谷歌瀏覽器等。2.學(xué)習(xí)資源類型（1）課程在線教學(xué)平臺（2）新形態(tài)一體化教材（3）職教云課堂3.學(xué)習(xí)資源內(nèi)容簡要說明智慧職教平臺《移動web開發(fā)》在線開放課程有多媒體課件、微視頻、試題庫等多種數(shù)字化資源；高等職業(yè)教育新形態(tài)一體化規(guī)劃教材《HTML5+CSS3網(wǎng)頁設(shè)計任務(wù)教材（第2版）》中二維碼標(biāo)注微課、課件，實現(xiàn)移動終端隨掃隨學(xué)。五、學(xué)習(xí)情境創(chuàng)設(shè)網(wǎng)站如今已經(jīng)是現(xiàn)代化社會人們生活和工作的重要組成部分人們可以通過上網(wǎng)來查詢搜索各種自己需要的信息資料可以在網(wǎng)上看到及時的時事新聞報道可以通過網(wǎng)絡(luò)進(jìn)行視頻聊天和實現(xiàn)商務(wù)貿(mào)易以及在網(wǎng)上購物等等。網(wǎng)站有哪些類型？網(wǎng)站的開發(fā)工具是什么？網(wǎng)站的開發(fā)語言和Java語言、C語言有什么區(qū)別？網(wǎng)頁的命名規(guī)范是怎樣的？網(wǎng)頁的文字、圖片和視頻又分別存放在哪里？這是我們這一章節(jié)需要解決的問題。六、教法學(xué)法設(shè)計1、項目化教學(xué)步驟：①創(chuàng)設(shè)情景、導(dǎo)入任務(wù)②演示錄屏、學(xué)生筆記③學(xué)生練習(xí)、教師巡視④集中講解，學(xué)生修改，上傳作業(yè)⑤重復(fù)2-4步⑥課堂小結(jié)⑦布置作業(yè)。2、教師教法（1）分階段演示法：將一個復(fù)雜案例分解成若干個步驟，分階段演示。（2）巡回指導(dǎo)法：逐個檢查學(xué)生的練習(xí)情況，并進(jìn)行答疑解惑。（3）錯誤總結(jié)法：將檢查巡視過程中發(fā)現(xiàn)的共性錯誤，進(jìn)行集中講解。（4）定期檢查法：針對期末項目考核，階段性檢查其作業(yè)情況，起到監(jiān)督和輔導(dǎo)的作用。3、學(xué)生學(xué)法（1）模仿案例法：學(xué)期初學(xué)生還未入門，學(xué)生根據(jù)教師的操作錄屏，模仿案例自主練習(xí)。（2）反復(fù)練習(xí)法：針對常用知識點，需要反復(fù)不斷練習(xí)，提高熟練程度。（3）綜合項目法：針對復(fù)雜案例，先進(jìn)行分析，分解成若干簡單案例，再進(jìn)行組合。（4）自由發(fā)揮法：底子薄弱的學(xué)生，照著書本敲代碼，練習(xí)打字維持課堂秩序即可。4、項目考核：人手一份，定期展示，錄像檢查。

七、教學(xué)過程設(shè)計（2學(xué)時）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺發(fā)布課程學(xué)習(xí)內(nèi)容：常用HTML5開發(fā)環(huán)境的搭建；完成第一個HTML5頁面；使用<marquee>標(biāo)簽制作滾動字幕；使用<a>標(biāo)簽實現(xiàn)超鏈接；使用<a>標(biāo)簽實現(xiàn)錨點鏈接。1、通過智慧職教云平臺發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別是什么？查看在線學(xué)習(xí)平臺公告，提前通過平臺或者掃描新形態(tài)一體化教材上的對應(yīng)知識點的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿觲eb開發(fā)》課程在線教學(xué)平臺新形態(tài)一體化教材職教云課堂設(shè)計意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運用信息技術(shù)手段進(jìn)行知識獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時間：5分鐘教學(xué)內(nèi)容師生活動教學(xué)方法教學(xué)手段教師學(xué)生打開學(xué)校官網(wǎng)，查看網(wǎng)站內(nèi)容由哪些元素組成（文字、圖片、視頻），點擊右鍵“查看網(wǎng)頁源代碼”演示網(wǎng)頁代碼結(jié)構(gòu)。打開教材提供的網(wǎng)頁案例，演示滾動字幕的頁面效果。打開教材提供的網(wǎng)頁案例，演示超鏈接頁面效果、錨點鏈接效果。設(shè)疑：（1）整個網(wǎng)站由哪些元素組成？（2）一個網(wǎng)頁由哪些元素組成？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動地參與到學(xué)習(xí)活動中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時間：5分鐘教學(xué)內(nèi)容師生活動教學(xué)方法教學(xué)手段教師學(xué)生代碼的注釋和命名規(guī)范的重要性。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識傳授與價值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識探究時間：20分鐘教學(xué)內(nèi)容師生活動教學(xué)方法教學(xué)手段教師學(xué)生HBuilderX的下載安裝及使用；網(wǎng)站的建立及文件的存儲；網(wǎng)頁的建立及規(guī)范命名；HTML代碼結(jié)構(gòu)及注釋；<marquee>標(biāo)簽制作滾動字幕；<a>標(biāo)簽實現(xiàn)超鏈接和錨點鏈接。1、引導(dǎo)學(xué)生借助在線課程平臺獲取知識進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺獲取知識進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺2、課件設(shè)計意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識點，為了讓學(xué)生能夠直觀感性地理解知識點，由教師首先進(jìn)行講解演示，結(jié)合知識點講解案例，為接下來的學(xué)生實踐訓(xùn)練提前做好鋪墊。步驟5：實踐訓(xùn)練時間：10分鐘教學(xué)內(nèi)容師生活動教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。靜態(tài)網(wǎng)頁的開發(fā)工具有哪些？下載安裝HBuilderX。靜態(tài)網(wǎng)頁的開發(fā)工具有很多，例如：DreamWeaver、FrontPage、WebStorm、vscode、HBuilder、HBuilderX等，在此我們采用的開發(fā)工具為HBuilderX，不僅因為其便捷智能、更因為他是我們優(yōu)秀的國產(chǎn)軟件，大家可以從https://www.dcloud.io/網(wǎng)站進(jìn)行下載安裝。列舉常用的四種變量命名法。（1）駱駝命名法變量一般用駱駝命名法標(biāo)識。駝峰法的意思是：除第一個單詞之外，其他單詞首字母大寫。例如：intmyStudentCount;變量myStudentCount的第一個單詞全部小寫，后面的單詞首字母大寫。（2）帕斯卡命名法單字之間不以空格斷開或連接號（-）、底線（_）連結(jié)，第一個單字首字母采用大寫字母；后續(xù)首字母亦用大寫字母，例如：FirstName、LastName。每一個單字的首字母都采用大寫字母的命名格式，被稱為“Pascal命名法”，也有人稱之為“大駝峰式命名法”（UpperCamelCase）,為駝峰式大小寫的子集。例如：ShowMessage();stringPassWord;（3）匈牙利命名法匈牙利命名法基本原則：變量名=屬性+類型+對象描述例如：m_lpszStr,表示指向一個以0字符結(jié)尾的字符串的長指針成員變量。（4）下劃線命名法下劃線命名法（UnderScoreCase）與帕斯卡（Pascal）及駝峰命名法（Camel）區(qū)別就是邏輯斷點（單詞）用的是下劃線隔開，還是比較容易區(qū)分的

。例如：show_message();stringuser_name;添加注釋的作用。寫程序時，我們應(yīng)該注重注釋的質(zhì)量和適度。過多的注釋會使程序變得混亂和難以維護(hù)，不夠的注釋會使程序容易出錯和難以理解。注釋應(yīng)該提供有關(guān)程序的必要信息，其目的是解釋代碼的含義，而不是簡單地復(fù)述代碼。為了寫出清晰明了的注釋，我們應(yīng)該遵循以下的注釋規(guī)則：（1）在注釋前空兩個空格，與代碼保持一定的間距。（2）注釋復(fù)雜的程序模塊，以便于理解模塊的功能和實現(xiàn)。使用注釋可以使得復(fù)雜代碼更容易理解。（3）對變量命名、類等的含義加以解釋，以方便以后理解。同時，應(yīng)說明變量和類的生命周期以及使用方式。（4）不要注釋無意義的代碼，這樣只會浪費時間和空間。（5）在注釋中使用簡潔明了的句子，使用標(biāo)點符號和大小寫字母。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實踐。1、通過平臺提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點；4、動手實踐。1、課程在線教學(xué)平臺2、職教云課堂設(shè)計意圖為了鞏固本次課所授知識，提高學(xué)生利用所學(xué)知識進(jìn)行實踐訓(xùn)練的能力，讓學(xué)生自主地完成實戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時，讓學(xué)生在自主探究中體驗成功的樂趣，增強(qiáng)對新知識的索取能力。步驟6：引例實現(xiàn)時間：30分鐘教學(xué)內(nèi)容師生活動教學(xué)方法教學(xué)手段教師學(xué)生常用HTML5開發(fā)環(huán)境的搭建：搭建過程詳見教材第2頁。完成第一個HTML5頁面：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>第一個HTML5頁面</title> </head> <body> <!--內(nèi)容主體開始--> HelloHTML5! <!--內(nèi)容主體結(jié)束--> </body></html>使用<marquee>標(biāo)簽制作滾動字幕：<marqueescrollamount="5"width="200px"height="50px"bgcolor="bisque"onMouseOut="this.start();"onMouseOver="this.stop();">弘毅守正，盈科匠心</marquee>使用<a>標(biāo)簽實現(xiàn)超鏈接：<ahref="">新浪的鏈接，直接鏈接</a><br/> <ahref=""target="_blank">百度的鏈接，彈出鏈接</a><br/> <ahref="contact.html"target="_blank">本地鏈接，彈出鏈接</a><br/> <ahref="###">空鏈接</a>使用<a>標(biāo)簽實現(xiàn)錨點鏈接：<h1>錨點鏈接</h1> <ahref="#mark">頁面內(nèi)鏈接</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <pid="mark"style="color:red;font-size:36px;">目標(biāo)</p>1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實現(xiàn)。1、分組討論；2、引例實現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋