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

下載本文檔

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

文檔簡介

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

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

鞏固課堂小結(jié)(

溫馨提示

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

最新文檔

評論

0/150

提交評論