Web前端開(kāi)發(fā)課程教案授課題目第一章網(wǎng)站開(kāi)發(fā)基礎(chǔ)教學(xué)課型理論課■討論課口實(shí)驗(yàn)課□習(xí)題課口實(shí)踐課□其它□首次授課時(shí)間第一周學(xué)時(shí)2學(xué)時(shí)教學(xué)場(chǎng)所固定座位教室口移動(dòng)座位教室口智慧型互動(dòng)教室口實(shí)驗(yàn)(實(shí)訓(xùn))室■校外實(shí)踐基地口戶外□其它口●掌握與Web開(kāi)發(fā)相關(guān)的基礎(chǔ)知識(shí)獻(xiàn)”的價(jià)值觀2、思政元素：孟晚舟事件，引導(dǎo)學(xué)生分析和解決問(wèn)題不能只看表面，而是要找到本質(zhì)，樹(shù)立正確的世界觀3、思政元素：“Web前端開(kāi)發(fā)工程師”職業(yè)信息，引導(dǎo)學(xué)生了解所學(xué)課程的知識(shí)體系，并能根據(jù)課程知識(shí)體系做好職業(yè)規(guī)劃并努力，樹(shù)立學(xué)生積極向上的價(jià)值觀4、思政素材：編草鞋的魯國(guó)人經(jīng)典傳統(tǒng)故事，引導(dǎo)學(xué)生正確做好自身定位，回歸本職，樹(shù)立正確的價(jià)值觀5、思政素材：HTML5標(biāo)準(zhǔn)規(guī)范的制定和發(fā)布背景，引導(dǎo)學(xué)生在做好職業(yè)規(guī)劃的基礎(chǔ)上，并為之努力，遇到挫折及時(shí)調(diào)整并堅(jiān)持，不放棄的精神教學(xué)方法：講授、討論、演示程的了解和興趣課程小節(jié)——知識(shí)總結(jié)：對(duì)知識(shí)點(diǎn)進(jìn)行總結(jié)歸納課后思考——知識(shí)應(yīng)用：布置課后思考和作業(yè)1.課程介紹(15分鐘)1.1引導(dǎo)學(xué)生了解本課程：術(shù)；CSS技術(shù)；JavaScript技術(shù)；設(shè)計(jì)可用的網(wǎng)站“怎樣學(xué)?”:課前(使用在線資源),課中(重點(diǎn)內(nèi)容歸納，講解常見(jiàn)錯(cuò)誤明確指出，重點(diǎn)反復(fù)強(qiáng)調(diào)，熱點(diǎn)內(nèi)容討論),課后作業(yè)與思考，實(shí)踐(合作學(xué)習(xí));自動(dòng)學(xué)習(xí)1.2教材與參考資料：聶常紅，《Web前端開(kāi)發(fā)技術(shù)——HTML、CSS、JavaScript(第3版)》(第2版).◆網(wǎng)頁(yè)設(shè)計(jì)，html,cssjs相關(guān)參考書(shū)：[1]趙豐年，《網(wǎng)頁(yè)設(shè)計(jì)與制作(HTML5+CSS3+JavaScript)(第4版)(微課版)》,人民郵電出版社，2020年郵電出版社，2020年.(HTML+CSS+JavaScript)》,人民郵電出版社，2016年.(2)菜鳥(niǎo)教程在線網(wǎng)絡(luò)資源：(3)在線網(wǎng)絡(luò)教學(xué)平臺(tái)：超星爾雅“學(xué)習(xí)通”,QQ學(xué)習(xí)群，微信時(shí)間安排理論：20實(shí)踐：12教學(xué)質(zhì)量過(guò)程考核+項(xiàng)目目標(biāo)考核課堂表現(xiàn)，實(shí)踐練習(xí)項(xiàng)目目標(biāo)考核(40%):期末綜合項(xiàng)目重視頁(yè)面的源代碼，善于觀察比較，發(fā)現(xiàn)細(xì)微的不同，注重細(xì)節(jié)，追求完美，抓住重點(diǎn)，勤于實(shí)踐2.網(wǎng)站開(kāi)發(fā)的基礎(chǔ)知識(shí)(重點(diǎn)知識(shí)，45分鐘)2.1互聯(lián)網(wǎng)的訪問(wèn)過(guò)程(15分鐘)問(wèn)題：想要瀏覽某一個(gè)網(wǎng)頁(yè)，我們應(yīng)該怎么做?第一步，我們需要的是一臺(tái)能連入互聯(lián)網(wǎng)的終端設(shè)備，可以是手機(jī)，計(jì)算機(jī)接著，我們打開(kāi)瀏覽器，在地址欄中輸入網(wǎng)頁(yè)的地址然后，等待服務(wù)器提過(guò)信息，并在瀏覽器中顯示出來(lái)。Safari瀏覽器覽，瀏覽網(wǎng)頁(yè)是從遠(yuǎn)程計(jì)算機(jī)中獲取內(nèi)容，然后再本地計(jì)算機(jī)上顯示的過(guò)程瀏覽器，服務(wù)器瀏覽網(wǎng)站是從遠(yuǎn)程計(jì)算機(jī)中獲取內(nèi)容，然后在本地計(jì)算機(jī)顯示出來(lái)。提供內(nèi)容信息的計(jì)算機(jī)就稱為服務(wù)器，訪問(wèn)◆WWW=Web服務(wù)器+信息資源+瀏覽器是被全球人贊揚(yáng)的英國(guó)科學(xué)家。他發(fā)明萬(wàn)維網(wǎng)的初衷是在1980年，他想創(chuàng)建一個(gè)以protocol://hostname[:port]/path/[;parameters][?query]#hostname指的是存放資源的服務(wù)器名稱或者主機(jī)的IP地址。port指的端口號(hào)(端口號(hào)為80可以省略)。2.2互聯(lián)網(wǎng)的工作機(jī)制：(15分鐘)做了什么?(1)瀏覽器中輸入將要訪問(wèn)頁(yè)面的URL地址。由DNS進(jìn)行域名地址解析，找b結(jié)果服務(wù)器賀源地址據(jù)庫(kù)服務(wù)器執(zhí)行查詢操作Web服務(wù)器將Web服務(wù)器將面發(fā)送瀏覽器瀏覽器到服務(wù)器IP地址，向該地址所指向的Web服務(wù)器發(fā)出請(qǐng)求。(2)Web服務(wù)器根據(jù)瀏覽器送來(lái)的請(qǐng)求，把URL地址轉(zhuǎn)換成頁(yè)面所在服務(wù)器(3)如果URL指向靜態(tài)HTML文檔，Web服務(wù)器使用HTTP協(xié)議把該文檔直]接送給瀏覽器。如果HTML文檔中嵌入了ASP、PHP或JSP程序!硼市WA服條器問(wèn)，則服務(wù)器將查詢指令發(fā)送給數(shù)據(jù)庫(kù)服務(wù)器，對(duì)數(shù)據(jù)庫(kù)執(zhí)行查詢操作。(5)瀏覽器解釋HTML文檔，在客戶端屏幕上展示結(jié)由互聯(lián)網(wǎng)的工作機(jī)制引出基本概念：的集合。網(wǎng)站有域名、網(wǎng)站空間、網(wǎng)頁(yè)3部分組提問(wèn)：是不是大家看到的靜止不動(dòng)的頁(yè)面就是靜面呢?靜態(tài)網(wǎng)頁(yè)網(wǎng)頁(yè)文件中包含需要在服務(wù)器上執(zhí)行的程序代碼。動(dòng)態(tài)網(wǎng)頁(yè)需要后臺(tái)數(shù)據(jù)庫(kù)與Web服務(wù)器交互，利用數(shù)據(jù)庫(kù)實(shí)現(xiàn)數(shù)據(jù)更新和查詢服務(wù)。動(dòng)態(tài)網(wǎng)頁(yè)擴(kuò)展名一般附孟晚舟事件：2018年12月1日，華為的首席財(cái)務(wù)官孟晚舟在加拿大溫哥華機(jī)場(chǎng)轉(zhuǎn)機(jī)為則據(jù)理力爭(zhēng)，要求將孟晚舟保釋。為此加拿大舉行了三次聽(tīng)證會(huì)，在收取5000萬(wàn)元3.制作網(wǎng)站的標(biāo)準(zhǔn)和常見(jiàn)技術(shù)(15分鐘)3.1制作網(wǎng)站的標(biāo)準(zhǔn)和常見(jiàn)技術(shù)(10分鐘)網(wǎng)頁(yè)部分的標(biāo)準(zhǔn)通過(guò)三部分來(lái)描述：結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和結(jié)構(gòu)、表現(xiàn)和行為對(duì)應(yīng)于3種常用的技術(shù)，即(X)HTMLCSS:(CascadingStyleSheets,層疊樣式表)是標(biāo)準(zhǔn)的布局語(yǔ)言，用來(lái)排版和顯示此知識(shí)點(diǎn)融入思政素材“Web前端開(kāi)發(fā)工程師”,引導(dǎo)學(xué)生了解課程知識(shí)體系，做Web前端開(kāi)發(fā)工程師優(yōu)勢(shì)：入門門檻低，就業(yè)好：從2012年至今，“Web前端工程師”3.2常用開(kāi)發(fā)工具(5分鐘)文檔編輯工具Notepad++4.網(wǎng)站建設(shè)流程(15分鐘)明確網(wǎng)站的定位確定網(wǎng)站的主題明確網(wǎng)站的定位確定網(wǎng)站的主題網(wǎng)站的整體規(guī)劃收集資料與素材設(shè)計(jì)制作網(wǎng)頁(yè)頁(yè)面網(wǎng)站的測(cè)試與發(fā)布網(wǎng)站的維護(hù)與推廣前期策劃中期制作后期維護(hù)◆明確網(wǎng)站的定位◆確定網(wǎng)站的主題去，這樣，要使自己不貧窮，難道可能嗎?”理解站點(diǎn)功能形成鮮明的主題特色要突出◆網(wǎng)站的整體規(guī)劃首先羅列網(wǎng)站的內(nèi)容根據(jù)內(nèi)容列出一個(gè)結(jié)構(gòu)化的藍(lán)圖根據(jù)情況設(shè)計(jì)各個(gè)頁(yè)面之間的鏈接規(guī)劃網(wǎng)站的內(nèi)容應(yīng)包括欄目的設(shè)置、目錄結(jié)構(gòu)、網(wǎng)站的風(fēng)格每個(gè)目錄下分別為圖像文件創(chuàng)建一個(gè)子目錄images5.HTML基礎(chǔ)(10分鐘)HTML(HypertextMarkupLanguage)即超文本標(biāo)記語(yǔ)言，它是構(gòu)(Page)的主要工具。w3c推薦標(biāo)準(zhǔn)w3c推薦標(biāo)準(zhǔn)