網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）電子教案 02.前端開(kāi)發(fā)工具及流程_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）電子教案 02.前端開(kāi)發(fā)工具及流程_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）電子教案 02.前端開(kāi)發(fā)工具及流程_第3頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作教案授課教師授課班級(jí)授課日期課題前端開(kāi)發(fā)工具及流程計(jì)劃學(xué)時(shí)2教學(xué)目標(biāo)知識(shí)目標(biāo)了解前端開(kāi)發(fā)的流程。了解前端開(kāi)發(fā)的常用工具。熟悉常用的瀏覽器工具。能力目標(biāo)會(huì)使用前端開(kāi)發(fā)工具開(kāi)發(fā)網(wǎng)頁(yè)。會(huì)使用瀏覽器工具瀏覽網(wǎng)頁(yè)。素質(zhì)目標(biāo)了解前端開(kāi)發(fā)的崗位需求，為自己制定合適的職業(yè)規(guī)劃。教學(xué)重點(diǎn)前端開(kāi)發(fā)流程Hbulider的使用方法教學(xué)難點(diǎn)HTML文檔的基本結(jié)構(gòu)。編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。教學(xué)模式及教學(xué)方法理實(shí)一體化、線上+線下混合教學(xué)模式項(xiàng)目教學(xué)法、任務(wù)驅(qū)動(dòng)法、講授法。教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)課前導(dǎo)學(xué)1.觀看學(xué)習(xí)平臺(tái)相關(guān)微課視頻。2.讓學(xué)生下載多個(gè)瀏覽器，至少3個(gè)。3.完成課前測(cè)試題。課中踐學(xué)【復(fù)習(xí)前課】復(fù)習(xí)上一次課所學(xué)的關(guān)于前端開(kāi)發(fā)的相關(guān)概念?！局R(shí)儲(chǔ)備】任務(wù)1.3：前端開(kāi)發(fā)工具一、知識(shí)儲(chǔ)備新知學(xué)習(xí)1：常見(jiàn)的前端開(kāi)發(fā)工具1．HBuilderX（1）編輯器——編輯文件的主要區(qū)域，可以在垂直和水平方向上并排打開(kāi)任意數(shù)量的編輯器。（2）項(xiàng)目管理器——包含諸如資源管理器之類的不同視圖，可在處理項(xiàng)目時(shí)為您提供幫助。（3）工具欄——顯示了常用工具。（4）狀態(tài)欄——有關(guān)打開(kāi)的項(xiàng)目和編輯的文件的信息。（5）控制臺(tái)——可以在編輯器區(qū)域下方顯示不同的面板，以獲取輸出或調(diào)試信息，錯(cuò)誤和警告或集成終端。面板也可以向右移動(dòng)以獲得更多垂直空間。（6）迷你地圖——顯示在窗口右側(cè)，提供了源代碼的高級(jí)概述，這對(duì)于快速導(dǎo)航和理解代碼很有用。（7）預(yù)覽窗口——顯示了正在編輯的網(wǎng)頁(yè)預(yù)覽的結(jié)果。2．EditPlus3．AdobeDreamweaver4．SublimeText5．VisualStudioCode新知學(xué)習(xí)2：瀏覽器工具1．IE瀏覽器2．Edge瀏覽器3．Chrome瀏覽器4．Firefox瀏覽器5．Safari瀏覽器6．Opera瀏覽器二、知識(shí)拓展Web工作原理用戶通過(guò)客戶端瀏覽器訪問(wèn)Internet上的網(wǎng)站或者其他網(wǎng)絡(luò)資源時(shí)，通常需要在客戶端的瀏覽器的地址欄中輸入需要訪問(wèn)的網(wǎng)站的URL，然后通過(guò)域名服務(wù)器進(jìn)行全球域名解析，并根據(jù)解析結(jié)果決定訪問(wèn)指定IP地址（InternetPvotocoladdress）的網(wǎng)站或網(wǎng)頁(yè)。獲取網(wǎng)站IP地址后，客戶端瀏覽器向指定IP地址上的Web服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求；Web服務(wù)器響應(yīng)客戶端的請(qǐng)求，將用戶所需要的HTML文本、圖片和構(gòu)成該網(wǎng)頁(yè)的其他一切文件發(fā)送給用戶。任務(wù)1.4前端開(kāi)發(fā)流程及HTML文檔的基本結(jié)構(gòu)一、知識(shí)儲(chǔ)備新知學(xué)習(xí)1：前端開(kāi)發(fā)流程1．需求分析2．原型設(shè)計(jì)3．UI設(shè)計(jì)4．頁(yè)面編碼5．測(cè)試和調(diào)試6．發(fā)布和維護(hù)新知學(xué)習(xí)2：HTML文檔的基本結(jié)構(gòu)一個(gè)HTML文檔由4個(gè)部分組成，各部分介紹如下。1．文檔聲明部分2．html標(biāo)簽對(duì)3．head標(biāo)簽對(duì)4．body標(biāo)簽對(duì)<!DOCTYPEhtml><html><head><!--頭部信息,如<title>標(biāo)簽定義的網(wǎng)頁(yè)標(biāo)題--></head><body><!--主體信息,包含網(wǎng)頁(yè)顯示的內(nèi)容--></body></html>三、操作實(shí)施1．創(chuàng)建項(xiàng)目2．創(chuàng)建HTML文檔3．輸入頁(yè)面代碼4．保存并預(yù)覽網(wǎng)頁(yè)四、任務(wù)拓展布置拓展任務(wù)：完成“靜夜思”網(wǎng)頁(yè)。（學(xué)生可在完成基本任務(wù)的前提下，完成拓展任務(wù)。）【項(xiàng)目小結(jié)】通過(guò)本項(xiàng)目的學(xué)習(xí)，主要了解了Web前端開(kāi)發(fā)的主要技術(shù)、開(kāi)發(fā)工具和開(kāi)發(fā)流程，掌握了HTML文檔的基本結(jié)構(gòu)，會(huì)利用HBuilderX創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)?！卷?xiàng)目延伸】請(qǐng)同學(xué)們?cè)诰W(wǎng)上搜索學(xué)習(xí)了更多的前端開(kāi)發(fā)的拓展知識(shí)，比如前端開(kāi)發(fā)的編碼規(guī)范等。課后拓學(xué)1.完成任務(wù)1.3的課后練習(xí)。2.完成任務(wù)1.4的課后練習(xí)。3.掃碼觀看任務(wù)2.1中的微課視頻，預(yù)習(xí)新課。4.完成項(xiàng)目延伸任務(wù)，將結(jié)果文件上傳至教學(xué)平臺(tái)。通過(guò)學(xué)習(xí)平臺(tái)學(xué)習(xí)相關(guān)內(nèi)容，讓學(xué)生養(yǎng)成自主學(xué)習(xí)的習(xí)慣。養(yǎng)成課前復(fù)習(xí)的好習(xí)慣。學(xué)習(xí)國(guó)產(chǎn)軟件的優(yōu)點(diǎn)，增強(qiáng)民族自信。了解各種瀏覽器的

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論