web前端技術(shù)應(yīng)用 教案 項(xiàng)目一 任務(wù)二 了解網(wǎng)站開發(fā)流程

《Web前端技術(shù)應(yīng)用》教學(xué)設(shè)計(jì)項(xiàng)目一任務(wù)二了解網(wǎng)站的開發(fā)流程課題了解網(wǎng)站的開發(fā)流程課程名稱Web前端技術(shù)應(yīng)用授課班級(jí)學(xué)時(shí)安排2學(xué)時(shí)執(zhí)教老師授課形式理實(shí)一體教學(xué)目標(biāo)知識(shí)1.能說出web前端開發(fā)的主要開發(fā)流程；技能能熟練對(duì)項(xiàng)目進(jìn)行市場(chǎng)調(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)頁的開發(fā)流程(15分鐘)響應(yīng)前面提出的問題開發(fā)一個(gè)網(wǎng)站框架的總體流程：首先經(jīng)過市場(chǎng)調(diào)查、繪制網(wǎng)站效果圖，利用切圖獲取素材，其次搭建DIV+CSS，最后書寫代碼、完成網(wǎng)站的開發(fā)。市場(chǎng)調(diào)查明確調(diào)查什么？需求分析，分析主題是什么？風(fēng)格選擇何種比較合適？網(wǎng)站的域名和空間如何設(shè)計(jì)；團(tuán)隊(duì)協(xié)作這一步通常由產(chǎn)品經(jīng)理、客戶和網(wǎng)站設(shè)計(jì)人員共同完成；網(wǎng)頁設(shè)計(jì)原則主題風(fēng)格切合常規(guī)、不失新意，其他頁面要和主題風(fēng)格相統(tǒng)一；3.繪制網(wǎng)站效果圖，這一步通常由開發(fā)人員和UI設(shè)計(jì)師共同完成。第一步：要確定好網(wǎng)站的主題，可根據(jù)網(wǎng)站的應(yīng)用方向搜索相關(guān)資料，將自己認(rèn)為比較好的網(wǎng)站頁面都保存起來?？梢杂脕碜鳛樗ňW(wǎng)站主題的一個(gè)參考。第二步：要在紙上畫出心中的大概草圖，繪制出整個(gè)網(wǎng)站的主要框架結(jié)構(gòu)，頂部、中部、底部等。第三步：網(wǎng)站效果圖的元素效果填充，如按鈕立體效果、網(wǎng)頁所涉及的圖片設(shè)計(jì)等。第四步：完成設(shè)計(jì)，導(dǎo)出效果圖，通常為psd文件。4.使用切圖工具獲取素材第一步：利用Photoshop軟件，導(dǎo)入設(shè)計(jì)好的psd文件。第二步：打開參考線，利用切圖工具，適合批量切圖、小圖標(biāo)等。盡量標(biāo)記出所切圖片的寬高、像素值等。8|Web前端技術(shù)應(yīng)用第三步：保存所切圖形為所需的圖片格式，可以是gif、png、jpeg等。教師演示切圖，保存等；學(xué)生聽教師講解，理解鏈接測(cè)試的類型達(dá)成教學(xué)目標(biāo)活動(dòng)2網(wǎng)頁實(shí)操（20分鐘）1.完成環(huán)保網(wǎng)的切圖工作根據(jù)前面老師的演示，完成里面所有元素的一個(gè)切圖工作。學(xué)生上機(jī)實(shí)操展示評(píng)價(jià)（3分鐘）按生生互評(píng)、教師點(diǎn)評(píng)的方式評(píng)價(jià)學(xué)生完成的作品情況。完成練習(xí)計(jì)算正確率回憶

鞏固課堂小結(jié)(2分鐘)通過本節(jié)課的學(xué)習(xí)，