《》教案20-20學(xué)年第學(xué)期課程名稱：授課教師：職稱：開課部門：年月日

《》教案首頁課程名稱授課專業(yè)班級授課教師職稱部門課程類型學(xué)位課□公共必修課□專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課非學(xué)位課□公共必修課專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課課程性質(zhì)□理論□實踐理論+實踐考核方式考試□考查課程教學(xué)總學(xué)時數(shù)64學(xué)分3.5學(xué)情分析大*年級的學(xué)生首次正式接觸WEB的相關(guān)概念，但是在之前的基礎(chǔ)課程中學(xué)過***（操作系統(tǒng)、計算機(jī)原理、Python編程、C語言編程）等相關(guān)專業(yè)方面基礎(chǔ)知識，具備有一定的計算機(jī)操作能力，與基礎(chǔ)應(yīng)用知識；并且在日常中大量使用電腦與手機(jī)等計算機(jī)設(shè)備，其中日常生活中也對于網(wǎng)頁的使用更是頗多。但對于WEB方面的專業(yè)知識沒有一個準(zhǔn)確、完整的知識體系構(gòu)建。教學(xué)方法談?wù)摲?、講授法、演示法、練習(xí)法、抽象法教材名稱《HTML5+CSS3Web前端開發(fā)技術(shù)》作者于麗娜出版社及出版時間人民郵電出版社2021.09參考書目作者出版社及出版時間教研室意見教研室主任簽字：年月日注：表中□選項請打“√”。每門課程只需填寫一次本表。

《》教案授課教師班級學(xué)時2授課日期教學(xué)任務(wù)《搭建項目開發(fā)環(huán)境》授課方式講授實踐授課地點多媒體教室實驗/實訓(xùn)室□企業(yè)主要參考資料教學(xué)PPT、微課、動畫、思維導(dǎo)圖課程思政視頻習(xí)題等教學(xué)目標(biāo)素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生團(tuán)隊合作精神和精益求精的工匠精神；2.培養(yǎng)學(xué)生編碼的規(guī)范意識、創(chuàng)新意識；3.培養(yǎng)學(xué)生愛國精神，樹立民族自信；4.培養(yǎng)學(xué)生自主學(xué)習(xí)和解決實際問題的能力。知識目標(biāo)：1.了解Web相關(guān)概念2.了解當(dāng)前主流Web瀏覽器與瀏覽器分類依據(jù)3.了解HTML5的優(yōu)勢能力目標(biāo)：1.掌握HBuilderX、Chrome瀏覽器的安裝與使用2.掌握在HBuilderX中進(jìn)行Web項目的搭建流程教學(xué)內(nèi)容WEB概述主流WEB瀏覽器常用WEB開發(fā)工具WEB標(biāo)準(zhǔn)HTML5的優(yōu)勢重點難點教學(xué)重點：WEB體系WEB標(biāo)準(zhǔn)開發(fā)環(huán)境的搭建教學(xué)難點：1.瀏覽器的工作原理教學(xué)方法談?wù)摲ā⒅v授法、演示法、練習(xí)法素材資源R文本素材R實物展示RPPT幻燈片□音頻素材R視頻素材R動畫素材R圖形/圖像素材□網(wǎng)絡(luò)資源□其他課后作業(yè)任務(wù)一：總結(jié)提升任務(wù)二：能力進(jìn)階教學(xué)反思注：教案按授課次數(shù)填寫，每次授課均應(yīng)填寫一份本表。重復(fù)班授課可不另填寫教案。?

教學(xué)過程及內(nèi)容一、導(dǎo)入新課【約5分鐘】教師：同學(xué)們，我是大家這學(xué)期Web前端開發(fā)這門課程的教師——**，很榮幸能和大家一起學(xué)習(xí)這門課程的知識。接下來我們來一起學(xué)習(xí)本課程的第一章節(jié)——搭建項目開發(fā)環(huán)境。本任務(wù)我們要學(xué)習(xí)HBuilderX開發(fā)工具的安裝和使用。安裝HBuilderX是一款國產(chǎn)軟件，是非常優(yōu)秀的HTML5前端開發(fā)工具，HBuilderX讓我們看到了國產(chǎn)編輯器的曙光，希望同學(xué)們努力學(xué)習(xí)，學(xué)成知識，報效祖國。我們把HBuilderX作為網(wǎng)頁代碼的編輯工具；安裝Chrome瀏覽器作為網(wǎng)頁效果測試工具；并在搭建好的開發(fā)環(huán)境中，編寫一個輸出“你好，中國”的簡單網(wǎng)頁項目，驗證我們的開發(fā)環(huán)境是否搭建成功。最后在開發(fā)工具中安裝相應(yīng)的插件，從而提高開發(fā)效率。二、新知識點、技能點講解【約x分鐘】新課講解1：【約10分鐘】教師：認(rèn)識Web要先知道什么是Internet。Internet，中文音譯名為因特網(wǎng)，正式名稱為國際互聯(lián)網(wǎng)，是所有由使用一定規(guī)則的公用交互語言進(jìn)行通信的計算機(jī)連接而成的巨大全球網(wǎng)絡(luò)。所有在互聯(lián)網(wǎng)中的計算機(jī)設(shè)備即是網(wǎng)絡(luò)中的節(jié)點，可以和與該節(jié)點相連通的節(jié)點進(jìn)行通信，再有附近的節(jié)點將信息發(fā)送到遠(yuǎn)端目標(biāo)節(jié)點逐節(jié)點傳遞。從而實現(xiàn)了萬物互聯(lián)，萬物互通的互聯(lián)網(wǎng)。那同學(xué)們，你是怎么理解生活中的互聯(lián)網(wǎng)呢？互聯(lián)網(wǎng)是什么樣子的呢？大家分組一起討論，之后分享每一組的總結(jié)。學(xué)生：平時通過百度搜索資料、或者在線聊天、上網(wǎng)課都用到了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)是一種網(wǎng)狀結(jié)構(gòu)的線，實現(xiàn)了信息通信?；ヂ?lián)網(wǎng)需要有類似路由器的硬件支持，并且需要很多。平時上網(wǎng)會用到域名，也就是網(wǎng)站地址的名字。......教師：Web是Internet的一個應(yīng)用，就是我們?nèi)粘Ｉ钪性L問得到各種網(wǎng)站的網(wǎng)頁的集合。他們之間通過超鏈接來指引瀏覽的路徑方向。我們在這些內(nèi)容的指引下，通過各種各樣的瀏覽器工具進(jìn)行網(wǎng)絡(luò)信息的獲取的行為，也就是我們常說的網(wǎng)上沖浪。新課講解2：【約10分鐘】教師：我們平時進(jìn)行網(wǎng)絡(luò)資料搜索、視頻瀏覽、信息網(wǎng)上提交等活動中，使用到的瀏覽工具，常稱為瀏覽器、用戶代理等。那我們平時使用的網(wǎng)頁瀏覽器有哪些？都有什么特點呢？學(xué)生：有IE瀏覽器，很早前用哥哥姐姐的電腦上，就默認(rèn)使用ie瀏覽器。做程序員的表格用的是一款叫做火狐的瀏覽器，說是可以用來進(jìn)行開發(fā)測試，程序員都用這款。我的新電腦上默認(rèn)有一款EDGE瀏覽器，是系統(tǒng)新推出的，用起來和別的瀏覽器都差不多。還有360瀏覽器、QQ瀏覽器......教師：在我們網(wǎng)上沖浪的過程中，必備的工具軟件就是Web瀏覽器，常簡稱瀏覽器。我們當(dāng)前常用到的主流瀏覽器有微軟公司的IE瀏覽器，由于是Windows系統(tǒng)強(qiáng)制默認(rèn)安裝的瀏覽器，所以在互聯(lián)網(wǎng)發(fā)展早期壟斷了主流瀏覽器市場。如今Windows10中不僅有IE瀏覽器，還默認(rèn)安裝了微軟公司期望用來替代老舊IE瀏覽器的的新一代瀏覽器——Edge（經(jīng)典版）。Mozilla公司的FireFox瀏覽器，中文為火狐瀏覽器，是一個開源的自由的瀏覽器。谷歌的Chrome，是為了打破由微軟統(tǒng)治瀏覽器的局面而推向市場的一款瀏覽器軟件，由谷歌的開源瀏覽器項目Chromium定制開發(fā)而來，因內(nèi)置強(qiáng)大的JavaScriptV8引擎，并且具有簡潔、快速、安全的特點，迅速占領(lǐng)了當(dāng)前瀏覽器市場的絕對份額，一躍成為當(dāng)前的瀏覽器行業(yè)領(lǐng)導(dǎo)者。除了上述的幾款主流瀏覽器，我們?nèi)粘Ｊ褂弥羞€有360極速瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、Opera瀏覽器、百分瀏覽器等等。這些瀏覽器大多是基礎(chǔ)Chromium的內(nèi)核進(jìn)行本土化之后的產(chǎn)品，給特定用戶群體提供一些專用功能。其功能、界面外觀、實際操作上與Chrome瀏覽器基本一致，并且均支持安裝Chrome原生的插件。新課講解3：（重點/難點）【約10分鐘】教師：俗話說：“工欲善其事必先利其器”，要進(jìn)行網(wǎng)頁開發(fā)也是一樣的，選擇一款好的開發(fā)工具是非常必要的?？梢蚤_發(fā)網(wǎng)頁的工具非常多，我們該如何選擇開發(fā)“利器”呢？這里有主流的幾款開發(fā)工具推薦給大家——SublimeText、VSCode、HBuilderX。HbuilderX是一款國產(chǎn)的代碼編輯工具，是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。HBuilderX的編寫用到了Java、C、Web和Ruby。HBuilderX本身主體是由Java編寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。快，是HBuilderX的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率。新課講解4：【約15分鐘】教師：HTML文件就是我們在瀏覽器中通過輸入網(wǎng)址，從服務(wù)器獲取到的內(nèi)容的載體。頁面中可以包含文字、圖片、音頻、視頻等信息均是由HTML為我們提供。通俗地講，我們上網(wǎng)的過程就是在不同HTML頁面之間跳轉(zhuǎn)瀏覽的過程。不同瀏覽器之間想要得到相同或近似的效果，就需要能夠?qū)TML文件的解析統(tǒng)一化標(biāo)準(zhǔn)化，那么對應(yīng)的標(biāo)準(zhǔn)是什么？Web標(biāo)準(zhǔn)，并不是一個單一的標(biāo)準(zhǔn)，是由一系列標(biāo)準(zhǔn)組成的集合。網(wǎng)頁主要是由三部分組成——HTML，即頁面結(jié)構(gòu)標(biāo)準(zhǔn)；CSS，即頁面樣式標(biāo)準(zhǔn)；Javascript，即頁面行為標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)的起草、制定與發(fā)布，通常由萬維網(wǎng)聯(lián)盟（W3C）或者類似的組織進(jìn)行。HTML5標(biāo)準(zhǔn)是在HTML4基礎(chǔ)上的擴(kuò)展，其中新標(biāo)準(zhǔn)添加了大量的語義化標(biāo)簽，讓代碼含義更明確，便于搜索引擎解析識別，也便于開發(fā)者合理劃分頁面結(jié)構(gòu)，提高代碼可讀性。HTML5的標(biāo)準(zhǔn)中，將大量需要配合javascript腳本實現(xiàn)的動態(tài)交互效果，數(shù)據(jù)處理和多媒體播放功能，都包含到了HTML5標(biāo)準(zhǔn)之中。使得促使瀏覽器廠商將這些功能在瀏覽器中實現(xiàn)，降低了開發(fā)者的開發(fā)難度。還將之前一些繁瑣的設(shè)定內(nèi)容簡化。HTML5的優(yōu)勢不僅僅體現(xiàn)在網(wǎng)頁中，如今大量的嵌入式設(shè)備的開發(fā)框架中，或完全引入或借鑒改良HTML標(biāo)準(zhǔn)來進(jìn)行應(yīng)用頁面的設(shè)計與實現(xiàn)。例如火爆的微信小程序，網(wǎng)易云音樂，迅雷等等。新課講解5：【約15分鐘】教師：演示操作上機(jī)任務(wù)-安裝Chrome瀏覽器學(xué)生：跟做新課講解6：【約15分鐘】教師：演示操作上機(jī)任務(wù)-安裝HBuilderX開發(fā)IDE學(xué)生：跟做新課講解7：【約15分鐘】教師：演示操作上機(jī)任務(wù)-使用HBuilderX創(chuàng)建項目學(xué)生：跟做教學(xué)總結(jié)【約5分鐘】本單元主要概述了Web的概念，然后講述了主流的瀏覽器，Web標(biāo)