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

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

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

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