web前端技術(shù)應(yīng)用 教案 項目二 任務(wù)一 制作網(wǎng)頁頭部_第1頁
web前端技術(shù)應(yīng)用 教案 項目二 任務(wù)一 制作網(wǎng)頁頭部_第2頁
web前端技術(shù)應(yīng)用 教案 項目二 任務(wù)一 制作網(wǎng)頁頭部_第3頁
web前端技術(shù)應(yīng)用 教案 項目二 任務(wù)一 制作網(wǎng)頁頭部_第4頁
web前端技術(shù)應(yīng)用 教案 項目二 任務(wù)一 制作網(wǎng)頁頭部_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

《Web前端技術(shù)應(yīng)用》教學(xué)設(shè)計項目二任務(wù)一課題了解網(wǎng)站的開發(fā)流程課程名稱Web前端技術(shù)應(yīng)用授課班級學(xué)時安排2學(xué)時執(zhí)教老師授課形式理實一體教學(xué)目標知識1.能說出web前端開發(fā)的主要開發(fā)流程；技能能熟練對項目進行市場調(diào)查；能熟練利用切圖工具獲取素材；能完成頁面框架搭建；素養(yǎng)1.通過前端開發(fā)流程進行，提升團隊協(xié)作能力；2.養(yǎng)成細致縝密的編程習(xí)慣；課程思政通過編寫與調(diào)試程序，讓學(xué)生切身體會到任何一個小疏忽都會導(dǎo)致程序運行錯誤。讓學(xué)生明確在今后的工作崗位上養(yǎng)成認真、細心和嚴謹?shù)淖黠L。教學(xué)重點Div+css框架搭建；教學(xué)難點Div+css框架搭建；教學(xué)方法分析法、討論法、演示法、引導(dǎo)式教學(xué)。教學(xué)環(huán)境軟件環(huán)境：Win7及以上操作系統(tǒng)，HBuilder硬件環(huán)境：多媒體教室或軟件實訓(xùn)室，計算機教學(xué)資源：PPT、微課視頻教學(xué)過程教學(xué)環(huán)節(jié)教師活動學(xué)生活動設(shè)計意圖新課導(dǎo)入(3分鐘)創(chuàng)設(shè)情境：在日常工作中，如果客戶告訴我們一個他的需求，比如我想做一個垃圾科普網(wǎng)站，你拿到這個項目后，你應(yīng)該做些什么？今天我們的課程就是為了解決當我們拿到一個項目過后，我們應(yīng)該從哪些地方著手，最后開發(fā)出一款客戶能夠滿意的產(chǎn)品出來。集中注意力，思考問題回答問題教學(xué)

過渡目標展示(2分鐘)PPT展示本課題要完成的目標并適當解說觀看了解活動1網(wǎng)頁測試的三種類型(15分鐘)前面我們已經(jīng)掌握了網(wǎng)站的開發(fā)流程了，也獲得了相應(yīng)的素材，現(xiàn)在我們要進行一個網(wǎng)頁框架的搭建。一．概念講解通常框架搭建所涉及到的兩個知識點是div和css.其中div是html的一個標簽名，css是叫層疊樣式表。Ppt展示二．項目實操演練DIV框架搭建結(jié)構(gòu)梳理通過前面的微課，我們已經(jīng)掌握了hbuilder開發(fā)工具的一個正確使用，下面我們進行一個練習(xí)框架的搭建，框架如下圖：第一步：有多少個模塊，我們搭建多少個div.如上圖為4個div,可先創(chuàng)建4個div,并為每個div,命名class屬性。<body> <divclass="one">1</div> <divclass="two">2</div> <divclass="three">3</div> <divclass="four">4</div></body>第二步：為了便于觀看，為每個div設(shè)置不同的顏色效果如下：代碼如下：.one{height:30px; background-color:antiquewhite;}.two{background-color:aqua;}.three{background-color:blue;}.four{background-color:gray;}第三步：進行寬高設(shè)計Height=像素值，單位為px.如本練習(xí)：第四步：內(nèi)容填充如第二部分分為左右兩部分，就代表第二部分里面是需要另外兩個div的。所以這里需要修改html和css代碼<divclass="two">2 <divclass="twLeft">左</div> <divclass="twRight">右</div></div>Css樣式為：將第二個div設(shè)置為彈性布局里面的兩個子元素分別設(shè)置寬度和背景顏色.twLeft{ width:30%; height:100%; background-color:green;}.twRigh{ width:70%; height:100%; background-color:yellow;}學(xué)生聽教師講解，理解鏈接測試的類型根據(jù)老師講解，完成練習(xí)一步一練，達到掌握的目的達成教學(xué)目標活動2網(wǎng)頁實操（20分鐘）1.完成框架搭建練習(xí)工作根據(jù)前面老師的演示，完成里面所有的布局工作。分步驟完成老師演示的內(nèi)容。完成相應(yīng)的代碼編寫工作。學(xué)生上機實操展示評價（3分鐘）按生生互評、教師點評的方式評價學(xué)生完成的作品情況。完成練習(xí)計算正確率回憶

鞏固課堂小結(jié)(

溫馨提示

  • 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)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論