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

下載本文檔

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

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論