《網(wǎng)頁設(shè)計與制作》-網(wǎng)頁設(shè)計基礎(chǔ)-終稿

《網(wǎng)頁設(shè)計與制作》教案設(shè)計

《網(wǎng)頁設(shè)計與制作》教案《網(wǎng)頁設(shè)計與制作》教案網(wǎng)頁設(shè)計基礎(chǔ)知識(HTML及Dreamweaver)授教題目授課課程網(wǎng)頁設(shè)計與制作授課班級517計算機應(yīng)用技術(shù)課程性質(zhì)專業(yè)基礎(chǔ)課理論授課授課時數(shù)90分鐘4節(jié)課授課類型理論+實踐2019年09月18日授課地點多功能一體化教室授課時間教材選用【選用教材】《網(wǎng)頁設(shè)計與制作》（——Dreamweaver+Flash+Photoshop+HTML5+CSS3）中國公信出版集團.人民郵電出版社.老虎工作室，譚雪松等主編【參考教材】黑馬程序員.《網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+JavaScript）》.人民郵電出版社官方旗艦店.2017丁士鋒等著.《網(wǎng)頁制作與網(wǎng)站建設(shè)實戰(zhàn)大全》.中國礦業(yè)清華大學(xué)出版社.2013本教材采用大量精美案例插圖，以充分和積極性。主旨以理論夠用為度、突出實踐設(shè)計與操作為原則，注重網(wǎng)頁制作基本配有實例或操作練習(xí)，將理論學(xué)習(xí)與技能訓(xùn)練融為一體，合，以綜合演練為基礎(chǔ)框架，以實用性為切入點，由此達到與實調(diào)動學(xué)生學(xué)習(xí)興，趣增強學(xué)習(xí)的主動性教材分析技能的培養(yǎng)，每一知識點教、學(xué)、練緊密結(jié)踐工作的無縫對接。學(xué)生學(xué)到了知識的同時又培養(yǎng)了實用技能。教學(xué)內(nèi)容引人入勝，實用性強，提高理解與訓(xùn)練的積極性和自覺性語言通俗易教學(xué)內(nèi)容分析懂、選材實用生動，不講不明白的話。學(xué)生有一定的平面設(shè)計基礎(chǔ)，已經(jīng)學(xué)過程序設(shè)計基礎(chǔ)及Photoshop、Flash等學(xué)生分析基礎(chǔ)知識，理論基礎(chǔ)已準(zhǔn)備齊全，對設(shè)計有一定的了解，但是對網(wǎng)頁設(shè)計與制作的工具及多種工具的配合使用技能有待學(xué)習(xí)。1.掌握網(wǎng)頁、網(wǎng)站及主頁的概念；知識2.掌熟悉網(wǎng)頁設(shè)計的基礎(chǔ)知識；3.目標(biāo)明確網(wǎng)頁中的主要元素；4.掌握最基本的網(wǎng)頁設(shè)計工具HTML和Dreamweaver。1.掌握各種網(wǎng)頁制作工具的配合使用。能力2.學(xué)習(xí)網(wǎng)站的整體規(guī)劃的手法。教學(xué)目標(biāo)目標(biāo)3.體味網(wǎng)站的設(shè)計一般流程。情感能結(jié)合主流網(wǎng)站設(shè)計與網(wǎng)頁布局的具體設(shè)計用途，合理的運用頁面元目標(biāo)素，表達感情、傳遞信息。2《網(wǎng)頁設(shè)計與制作》教案1.掌握網(wǎng)頁設(shè)計的基礎(chǔ)知識；2.掌握網(wǎng)頁設(shè)計的一般流程；教學(xué)重點3.分認識最基本的網(wǎng)頁設(shè)計及開發(fā)工具Dreamweaver、HTML5，掌握它們的功能和用途。能夠比較HTML5與Dreamweaver在設(shè)計與制作網(wǎng)頁時的異同，綜合利用所學(xué)知識進行設(shè)計與制作網(wǎng)頁。教學(xué)難點1.講授法2.討論法3.操作演示法4.案例分析法5.實踐法教學(xué)方式：講授□√探究□√問答□√實驗□√演示□√練習(xí)□√其他□√1.板書2.演示3.上機實踐4.講練結(jié)合教學(xué)方法分析教學(xué)手段分析教學(xué)手段：板書□√多媒體□√微視頻□√分組□√案例□√音像□√其他□√1.教師：PPT課件、預(yù)習(xí)視頻資料、案例、一體化教室、練習(xí)素材、軟件；教學(xué)準(zhǔn)備2.學(xué)生：課本、電腦或智能終端、筆記、移動存儲器；3.教具：教學(xué)軟件、視頻資料、案例、多媒體電腦教室預(yù)約、測。試一、預(yù)習(xí)內(nèi)容―――引出課題四、發(fā)言討論―――激發(fā)興趣二、情景導(dǎo)入―――導(dǎo)入學(xué)習(xí)三、網(wǎng)頁鑒賞―――學(xué)習(xí)新知五、拓展延伸―――拓展升華六、作業(yè)練習(xí)——―鞏固知識教學(xué)總體設(shè)計【設(shè)計說明】：網(wǎng)頁設(shè)計基礎(chǔ)知識（HTML及Dreamweaver）教學(xué)應(yīng)注重培養(yǎng)學(xué)生的設(shè)計能力，提升學(xué)生鑒賞優(yōu)秀網(wǎng)頁的審美能力和探究能力，這4節(jié)課旨在以學(xué)生為主體、教師為主導(dǎo)，通過學(xué)生、教師、作品間的對話，來個現(xiàn)對網(wǎng)頁設(shè)計主體風(fēng)格的把握。理清由“網(wǎng)頁設(shè)計”“文本”“電子書籍”等區(qū)別和功效。從而深入學(xué)習(xí)網(wǎng)頁設(shè)計與制作，使自己制作的網(wǎng)頁功能更強大，內(nèi)容更美觀。教學(xué)時間分配引導(dǎo)5分鐘；授新課內(nèi)容30分鐘；討論與提問5分鐘；總結(jié)與布置作業(yè)5分鐘利用網(wǎng)絡(luò)課程平臺，讓學(xué)生與老師在線交流或留言，針對教學(xué)進行評價。另外，教學(xué)評價設(shè)計學(xué)生可以上傳作品，進行自評和互評，學(xué)生可以用它對自己的學(xué)習(xí)進行綜合評價，相互促進，取長補短。上課存在哪些不足？教、學(xué)是否達到預(yù)期效果？課堂反思哪些知識好講授，易接受？哪些知識難講，學(xué)生不易懂？哪些按教學(xué)計劃實現(xiàn)預(yù)期效果，哪些沒達到理想狀態(tài)，原因是什么樣3《網(wǎng)頁設(shè)計與制作》教案教學(xué)過程設(shè)計步驟時間主要任務(wù)教師活動學(xué)生活動目的意圖預(yù)習(xí)材料發(fā)學(xué)習(xí)平臺搭建、微課視頻發(fā)學(xué)生自學(xué)提前掌握靠自覺能掌握的內(nèi)容。放放及預(yù)習(xí)內(nèi)容提示課前預(yù)習(xí)提問與引導(dǎo)提問：網(wǎng)頁發(fā)展簡史？引入新的授課內(nèi)復(fù)習(xí)鞏固并網(wǎng)頁有哪些元素？回答老師問題，隨老第一步容，調(diào)動學(xué)生學(xué)習(xí)HTML-文本、標(biāo)題、圖師講授進入對新課的興趣，便于學(xué)生對內(nèi)容的把握。導(dǎo)入新授內(nèi)例圖：（5分鐘）容像、鏈接、表格網(wǎng)頁了解。導(dǎo)入：HTML5語法特點及語法規(guī)則1.利用板書展示基本概念和基本理論；認真聆聽老師講授內(nèi)語法及要點利用板書、講授和容，牢記HTML語法及講授新的課概念、特性第二步程內(nèi)容：操作演示（15×4分HTML基礎(chǔ)知2.演示演示讓學(xué)生理解HTML編碼設(shè)計網(wǎng)★觀察老師的編碼方頁的方法和步驟。規(guī)則。語法及設(shè)計網(wǎng)頁過鐘）識。程，在編碼中強調(diào)可能出現(xiàn)法和設(shè)計過程的問題。HTML文檔編碼格式過程演示展示圖片，引導(dǎo)同學(xué)發(fā)現(xiàn)編學(xué)生回顧本次授課內(nèi)討論與提問碼中易出現(xiàn)的問題、原因，容，思考繪畫過程中問題：易出提出如何解決。出現(xiàn)的問題及原因。通過相互學(xué)習(xí)加第三步現(xiàn)的問題解決的方法：HTML標(biāo)簽正確出現(xiàn)的問題：開始深理解，通過解疑（5×4分“＜”與結(jié)束標(biāo)釋難促進對講述討論：出現(xiàn)使用，強調(diào)標(biāo)簽特點，開始標(biāo)簽鐘）的原因，解標(biāo)簽“＜”與結(jié)束標(biāo)簽“／簽“／＞”位置不對。內(nèi)容的掌握。決的方法＞”成對出現(xiàn)，后者比前者出現(xiàn)的原因：后者多一個“／”。忘記“／”。1.結(jié)合板書和演示范畫口頭總結(jié)本次課程內(nèi)容；全面總結(jié)復(fù)習(xí)，指重點內(nèi)容：語法規(guī)則語法隨老師總結(jié)快速記憶出易出現(xiàn)的問題各類標(biāo)簽寫法和復(fù)習(xí)，記錄作業(yè)內(nèi)防止出現(xiàn)在畫面2.板書布置作業(yè)內(nèi)容；求。中，為學(xué)生１-１６代碼運行習(xí)做準(zhǔn)備。3.介紹涉及的參考書目。第四步總結(jié)與布置特點（5分鐘）作業(yè)容及要繪畫練P91.圖4《網(wǎng)頁設(shè)計與制作》教案教學(xué)活動過程設(shè)計意圖一、復(fù)習(xí)鞏固已學(xué)知識，導(dǎo)入新課。PPT展示本節(jié)課的預(yù)習(xí)內(nèi)容，檢查預(yù)習(xí)（1分鐘）１．提問：網(wǎng)頁發(fā)展簡史？網(wǎng)頁有哪些元素？２．了解學(xué)勤：學(xué)生思考討論，點名回答。３．歸納：（1）網(wǎng)頁設(shè)計發(fā)展經(jīng)歷了四個階段，每個階段的特征。了解當(dāng)下最流行的開發(fā)技術(shù)及工具，探究網(wǎng)頁發(fā)展趨勢。PPT展示例圖，便于直觀理解。（２）網(wǎng)頁有網(wǎng)頁的構(gòu)成元素很豐富，可以是文字，也可以是圖片，甚至可以將一些多媒體文件如音頻、視頻等插入到網(wǎng)頁里。網(wǎng)頁構(gòu)成元有1.文本2.圖像3.鏈接4.表格5.表單6.導(dǎo)航條7.其他元素。（1分鐘）歸納學(xué)生回答內(nèi)容，總結(jié)網(wǎng)頁設(shè)計發(fā)展經(jīng)歷了四個階段，每個階段的特征。鼓勵回答正確的同學(xué)，引起學(xué)生學(xué)習(xí)興趣。４．導(dǎo)入：展示網(wǎng)頁案例，提出問題，是采用什么開發(fā)技術(shù)實的現(xiàn)，引入ＨＴＭＬ。（1分鐘）案例展示（1分鐘）二、新授課程網(wǎng)頁設(shè)計基礎(chǔ)知識(HTML及Dreamweaver)》視頻點評。教學(xué)內(nèi)容《①以上為第一環(huán)節(jié)：復(fù)習(xí)鞏固，引入案例，導(dǎo)入新課。（4分鐘）１．２．１HTML基本概念及特征一、HTML基本概念及特征理論講授（5×4分鐘）１．概念：HTML英文是HypertextMarkedLanguage，即超文本標(biāo)記語PPT信息化教言，是一種用來制作超文本文件的簡單標(biāo)記語言。學(xué)，必要的板書。★２．特征：5《網(wǎng)頁設(shè)計與制作》教案（1）標(biāo)簽都用（2）標(biāo)簽如“<html>”和“</html>”，第一個叫開始標(biāo)簽（3）標(biāo)簽“<”和“>”框起來。一般情況下是成對出現(xiàn)的，結(jié)束標(biāo)簽比起始標(biāo)簽多一個“/”。，第二個叫結(jié)束標(biāo)簽。可以嵌套，但是先后順序必須保持一致。補充材料知識，對HTML二、HTML文檔格式基本知識加深一個完整的HTML文件包括標(biāo)題、段落、列表、表格以及各種了解。嵌入對象，這些對象統(tǒng)稱為HTML元素。HTML中使用標(biāo)簽這些元素，HTML文件就是由各種HTML標(biāo)簽來分割并且描述（1分鐘）和元素組成的。<html><head><title>這是我做的第一個網(wǎng)頁</title></head><body>網(wǎng)頁設(shè)計與制作第二課</body></html>★*重點、難點三、HTML基本結(jié)構(gòu)（解說補充，并編輯運行代碼，驗證理論結(jié)果）簡練的語言總1.2.2HTML常用標(biāo)簽結(jié)，易于記憶。1.文本標(biāo)簽<font>（1分鐘）文本標(biāo)簽有3個屬性，分別是：Color(功能是：定義字體顏色的)如：color=“#ff0000”Size（功能是：定義文字的大小）如：Size=“15”Face（功能是：定義文字的字）體如：Face=“黑體”理論講授（5分鐘）PPT展示繪畫步驟圖教師在準(zhǔn)備好的代碼演示ＨＴＭＬ及展示網(wǎng)頁效果。2.標(biāo)題標(biāo)簽在演示的過程中講解操作要求。②第一次開展，第二環(huán)節(jié)：新課講授、案例分析、操作演示；6《網(wǎng)頁設(shè)計與制作》教案（5分鐘）③第三環(huán)節(jié)：布置任務(wù)，分發(fā)素材，強化重點；（2分鐘）④第四環(huán)節(jié)：材料分析，案例驅(qū)動，操作示范；⑤第五環(huán)節(jié)：重點重復(fù)，必要時示范，突破難點；★3.圖像標(biāo)簽（2分鐘）★*重點、難點簡練的語言總結(jié)，易于記憶。⑥第六環(huán)節(jié)：分組合作，上機實踐，提升能力；（5分鐘）★4.鏈接標(biāo)簽理論講授PPT展示編碼步驟邊講邊練教師在準(zhǔn)備好的代碼演示ＨＴＭＬ及展示網(wǎng)頁效果?！?.表格標(biāo)簽在演示的過程中講解操作要求。4個案例，每個案例重復(fù)②③④⑤⑥（5分鐘）7《網(wǎng)頁設(shè)計與制作》教案PPT展示不同類型圖片，學(xué)生針對代碼進行討論。提醒學(xué)生練習(xí)的重要性ＨＴＭＬ代碼要求：★重點強調(diào)演示編碼與運頁面標(biāo)題標(biāo)記是一個特殊的標(biāo)記，它設(shè)置的內(nèi)容并不顯示在頁面中，而行技法是顯示在瀏覽器的標(biāo)題欄，用來說明文件的用途。因此，在設(shè)置該標(biāo)記的教師總結(jié)解決時候，要使其能夠體現(xiàn)整個頁面的主題。一般情況下，每個HTML頁面都應(yīng)方法，總結(jié)本該有標(biāo)題。次課重點內(nèi)容，學(xué)生快速在HTML文件中，標(biāo)題信息設(shè)置在頁面的頭部，也就是位于<HEAD>與記憶，加深印</HEAD>標(biāo)記之間。標(biāo)題標(biāo)記以<TITLE>開始，以</TITLE>結(jié)束，是一個雙標(biāo)象。記，成對出現(xiàn)。其語法是：<TITLE>標(biāo)題內(nèi)容</TITLE>三、提問與討論⑦以上為第七IE瀏覽器來查看HTML文件環(huán)節(jié)：課堂總結(jié)；編寫好文件的源代碼并保存后，就可以通過的頁面效果了。上級演練尋找易出現(xiàn)的問題、原因、解決方法。（2分鐘）出現(xiàn)的問題出現(xiàn)的原因畫面出不來→查錯／其他錯誤但效果不是預(yù)期的→查詢代碼解決的方法詢代碼→代碼錯／語法畫面出來了，→代碼錯／語法錯／其他錯誤錯／其他錯誤／美化設(shè)計符合預(yù)期效果→查詢代碼→研究代碼→修改代碼→舉一反三畫面出來了，效果不好→查詢代碼→代碼錯／語法畫面出來了，符合預(yù)期效果→查詢代碼→修改代碼畫面出來了，適當(dāng)補充四、考核了解網(wǎng)頁設(shè)計按照課前測試占25%，教師課堂評價占10%，小組成員互評占20%，與制作常識和背景，幫助學(xué)程的考核成績，并記錄在課后作業(yè)測試占45%，通過excel計算學(xué)生本次課生更好地理解學(xué)生的平時成五、課堂總結(jié)與布置作業(yè)（一）課堂總結(jié)績記分冊上。知識。8《網(wǎng)頁設(shè)計與制作》教案適當(dāng)板書作業(yè)本次課程內(nèi)容主要認識了一下網(wǎng)站開發(fā)以及HTML的基本概念，讓讀內(nèi)容及要求，者能夠?qū)W(wǎng)站開發(fā)有一個總體的了解。然后通過一個實例給讀者展現(xiàn)了一學(xué)生按要求完成作業(yè)。個HTML所包含的基本內(nèi)容，以及不同標(biāo)記顯示效果，讓讀者對HTML有了⑧以上為第八一個直觀的認識。本章還介紹了HTML文件的基本標(biāo)記，包括文件類型標(biāo)記、環(huán)節(jié)：考核（考核機制設(shè)置）；HTML頭標(biāo)記、HTML主體標(biāo)記和頁面標(biāo)題?？梢哉f，這些標(biāo)記是HTML文（2分鐘）件中不可缺少的。主要內(nèi)容有：1.HTML基本概念及特征2.HTML文檔格式教師，通過微信群、qq群發(fā)布作業(yè)，針對課程需要為學(xué)3.HTML常用標(biāo)簽4.HTML運行環(huán)境及網(wǎng)頁設(shè)計步驟與要求，運行時易出現(xiàn)的問題、原因、生推薦相關(guān)知識，教師將課堂資料上傳到學(xué)校網(wǎng)絡(luò)課程平臺，供學(xué)生隨時查閱，教師布置下一章Dreamweaver解決方法。（二）布置作業(yè)訓(xùn)練目的——了解運用HTML設(shè)計網(wǎng)頁的基本方法，加深對HTML的理軟件利用HTML綜合設(shè)計網(wǎng)頁的預(yù)習(xí)任務(wù)。解和認識，為將來運用不同的方法設(shè)計網(wǎng)頁打下基礎(chǔ)。課題時—間—4課時。課堂作業(yè)：學(xué)生，進行在1.什么是HTML語言？P7線測試教師發(fā)2.HTML語言的一般格式？P7+P8布的作業(yè)，學(xué)生通過手機或電腦上網(wǎng)學(xué)習(xí)教師推薦的相關(guān)知識，預(yù)習(xí)下一章節(jié)關(guān)于需求價