HTML5CSS3Web前端設(shè)計基礎(chǔ)教程（第3版）教案-教學(xué)設(shè)計 任務(wù)17 PC端頁面布局規(guī)劃與實現(xiàn)-8課時-課堂教學(xué)設(shè)計

課堂教學(xué)設(shè)計課程名稱Web前端開發(fā)/網(wǎng)頁設(shè)計與制作授課時數(shù)8授課班級授課時間授課地點授課形式多媒體教學(xué)參考資料參考教材《HTML5+CSS3Web前端設(shè)計基礎(chǔ)教程（第3版）（微課版）》，人民郵電出版社，2024年專業(yè)教學(xué)標(biāo)準(zhǔn)《Web前端開發(fā)》課程標(biāo)準(zhǔn)職業(yè)技能標(biāo)準(zhǔn)Web前端開發(fā)職業(yè)技能等級標(biāo)準(zhǔn)（標(biāo)準(zhǔn)代碼：510001）校本補充材料中國大學(xué)MOOC（/）其他資源媒體資源智能課堂、微課、PPT、配套素材等環(huán)境資源多媒體教室教學(xué)目標(biāo)知識目標(biāo)掌握Photoshop切片并輸出的操作方法鞏固導(dǎo)航和圖文列表的實現(xiàn)方法技能目標(biāo)掌握從效果圖到Web頁面的整個工作過程素質(zhì)目標(biāo)引導(dǎo)學(xué)生樹立崇高的理想信念，促使學(xué)生不斷提升思維能力引導(dǎo)學(xué)生打開思路，踐行創(chuàng)新精神和創(chuàng)新思維方式教學(xué)重點頁面布局規(guī)劃分析教學(xué)難點頁面的實現(xiàn)學(xué)情分析學(xué)生已經(jīng)能夠使用HTML+CSS搭建基本頁面，但缺乏對崗位工作流程的認(rèn)知。教學(xué)總體設(shè)計依據(jù)教學(xué)標(biāo)準(zhǔn)要求，結(jié)合學(xué)生學(xué)情，動態(tài)調(diào)整應(yīng)用“翻轉(zhuǎn)課堂”模式的教學(xué)比重，以邊講邊練、分組討論、實踐操作、課堂小結(jié)的路徑組織實施教學(xué)過程。課外拓展有針對性的安排訓(xùn)練，同時培養(yǎng)學(xué)生發(fā)現(xiàn)問題、自主解決問題的意識和習(xí)慣，進(jìn)而提高綜合素養(yǎng)。教學(xué)環(huán)節(jié)(時間安排)教學(xué)內(nèi)容教學(xué)活動技術(shù)資源教學(xué)隨記(教學(xué)過程中記錄)教師學(xué)生課前準(zhǔn)備(提前2-3天發(fā)布教學(xué)任務(wù))1.在互聯(lián)網(wǎng)上，查找界面設(shè)計類網(wǎng)站，閱讀1篇網(wǎng)頁設(shè)計類文章，并下載10張網(wǎng)頁設(shè)計優(yōu)秀作品。（推薦網(wǎng)站：優(yōu)設(shè)、花瓣、UI中國等）2.預(yù)習(xí)微課視頻3.發(fā)布討論話題任務(wù)下達(dá)、課前準(zhǔn)備任務(wù)獲取、課前準(zhǔn)備PPT、微課、網(wǎng)絡(luò)資源課堂教學(xué)（一）情境創(chuàng)設(shè)[20分鐘]1.回顧上節(jié)課基本知識。2.挑選1-2位同學(xué)，上臺分享課前優(yōu)秀網(wǎng)頁設(shè)計作品。3.明確課程的學(xué)習(xí)目標(biāo)和預(yù)期成果，讓學(xué)生對學(xué)習(xí)路徑有一個清晰的認(rèn)識。理論講授明確任務(wù)知識獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（二）知識學(xué)習(xí)[150分鐘]1.引入企業(yè)案例，對照即將完成制作的效果圖，闡述背景和意義。按照網(wǎng)頁開發(fā)流程，以邊講邊練的形式，講解Photoshop在Web前端的常見操作（1）創(chuàng)建空白文檔（2）標(biāo)尺與參考線（3）吸管工具及其簡單操作（4）切片輸出2.課堂提問：Web前端開發(fā)中，圖片常用的格式有哪些？3.以UI設(shè)計師角色，對擬進(jìn)行實現(xiàn)的效果圖進(jìn)行頁面布局規(guī)劃分析，重點引導(dǎo)學(xué)生對項目實踐進(jìn)行整體構(gòu)思。（1）分析效果圖版面布局（2）首頁的實現(xiàn)（3）列表頁的實現(xiàn)（4）內(nèi)容頁的實現(xiàn)案例教學(xué)知識獲取智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（三）仿真演練[170分鐘]1.認(rèn)真聆聽教師的演示操作講解，上機操作Photoshop和DW，進(jìn)行實踐演練。對于出現(xiàn)的問題，首先復(fù)看微課視頻，自行動腦思考，再進(jìn)行同學(xué)間幫助，解決不了的，由教師進(jìn)行指導(dǎo)答疑。2.教師即時的反饋和指導(dǎo)，幫助學(xué)生及時糾正錯誤，加深理解。實踐指導(dǎo)實踐訓(xùn)練智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資料等。課堂教學(xué)（四）總結(jié)評價[20分鐘]1.回顧本節(jié)知識點，對本章節(jié)的重點難點進(jìn)行歸納和總結(jié)。2.點評同學(xué)在自主演練過程中大家的表現(xiàn)情況，對于出現(xiàn)較多的共性問題，再次統(tǒng)一講解和演示。3.強調(diào)“講誠信，強規(guī)范，保質(zhì)量”的核心職業(yè)素養(yǎng)。作業(yè)點評課程小結(jié)查漏補缺吸收整理智能課堂、微課、PPT、多媒體電腦、互聯(lián)網(wǎng)資