網(wǎng)頁制作教學(xué)設(shè)計(公開課)

1、網(wǎng)頁制作教學(xué)設(shè)計（公開課）一體化課程教案（首頁）課程網(wǎng)頁制作授課教師課題（項目）名稱創(chuàng)意型網(wǎng)站開發(fā)審批學(xué)習(xí)任務(wù)創(chuàng)意型網(wǎng)站開發(fā)授課課時16授課日期授課年月日至年月曰班級13電商咼中項目（任務(wù)）描述小李剛剛通過應(yīng)聘進(jìn)入了一家網(wǎng)公司規(guī)模不大，主要業(yè)務(wù)是承接作。現(xiàn)在公司剛接了四個不同的務(wù)，由于公司人數(shù)不多，所以小其中一個網(wǎng)站的建設(shè)，由于時間小李選擇其中一個網(wǎng)站，并與策溝通和需求分析，完成資料的整單加工，設(shè)計出基本框架，再通具完成網(wǎng)頁版面的制作和內(nèi)容元后通過公司服務(wù)器發(fā)布網(wǎng)站到互頁制作公司，7各類網(wǎng)站的制J制作網(wǎng)站業(yè)、李要獨(dú)立負(fù)責(zé)I緊迫，現(xiàn)要求劃部進(jìn)行快速?理和素材的簡過網(wǎng)頁編輯工:素的編輯，最:聯(lián)網(wǎng)上

2、。教學(xué)目標(biāo)通過完成本次任務(wù)，學(xué)生能夠通過多方調(diào)研明確客戶需求，撰寫需求確認(rèn)分析說明書；通過組內(nèi)討論，做好網(wǎng)站開發(fā)詳細(xì)計劃，撰寫項目工作計劃表；通過小組分工合作，自主探究學(xué)習(xí)，設(shè)計有特色的網(wǎng)站；通過測試，發(fā)現(xiàn)存在問題并提出解決方案；能夠展示小組作品的優(yōu)勢和特色，并能客觀評價他人；通過基于工作情境的角色扮演，熟悉網(wǎng)站開發(fā)的工作流程，并從中獲得溝通表達(dá)，解決問題的經(jīng)驗，體驗團(tuán)隊合作與信息共享的樂趣。教學(xué)重點分析客戶需求；設(shè)計網(wǎng)站規(guī)劃書；創(chuàng)建網(wǎng)站站點；設(shè)計網(wǎng)頁版面布局；素材編輯與修辭；內(nèi)容頁制作與超鏈接。教學(xué)難點使用Dreamweaver進(jìn)行網(wǎng)頁布局；內(nèi)容頁制作；頁面間的超鏈接。學(xué)情分析根據(jù)客戶需求，

3、開發(fā)一個商務(wù)網(wǎng)站，進(jìn)行宣傳推廣商品。該網(wǎng)站以信息發(fā)布、產(chǎn)品介紹、在線銷售、顧客服務(wù)、提升品牌形象為主要功能和目的。學(xué)生在學(xué)習(xí)任務(wù)中首先要進(jìn)行客戶需求分析，制定網(wǎng)站設(shè)計書，并進(jìn)行創(chuàng)建站點和管理站點，然后在已創(chuàng)建的站點上進(jìn)行主頁、內(nèi)頁設(shè)計完善網(wǎng)站功能，并使用多種工具進(jìn)行網(wǎng)頁美工，最后發(fā)布與管理已建好的網(wǎng)站，根據(jù)公司的要求，更新和維護(hù)網(wǎng)站。教學(xué)策略本次教學(xué)任務(wù)在電商實驗班進(jìn)行授課，采用任務(wù)驅(qū)動，模塊演示的教學(xué)方法；以學(xué)生為中心：指導(dǎo)學(xué)生分組討論、模仿訓(xùn)練、小組展示。教學(xué)資源準(zhǔn)備場地教學(xué)樓409電子商務(wù)實驗室工具多媒體計算機(jī)、白板、幻燈機(jī)、資料柜、因特網(wǎng)耗材設(shè)計圖紙、彩色畫筆課前學(xué)習(xí)任務(wù)1、確定選擇四

4、個不同類型的網(wǎng)站中的哪一個花卉、海洋公園、環(huán)保、潮流 廣州市技師學(xué)院廣州市高級技工學(xué)校課后任務(wù)布置1、優(yōu)化網(wǎng)站2、對網(wǎng)站進(jìn)行維護(hù)管理教學(xué)反思廣州市技師學(xué)院廣州市高級技工學(xué)校廣州市技師學(xué)院廣州市高級技工學(xué)校創(chuàng)意型網(wǎng)站開發(fā)一一主題網(wǎng)站建設(shè)學(xué)習(xí)任務(wù)：建設(shè)主題網(wǎng)站學(xué)習(xí)目標(biāo)通過完成本次任務(wù)，學(xué)生能夠通過多方調(diào)研明確客戶需求，撰寫需求確認(rèn)分析說明書；通過組內(nèi)討論，做好網(wǎng)站開發(fā)詳細(xì)計劃，撰寫項目工作計劃表；通過小組分工合作，自主探究學(xué)習(xí)，設(shè)計有特色的網(wǎng)站；通過測試，發(fā)現(xiàn)存在問題并提出解決方案；能夠展示小組作品的優(yōu)勢和特色，并能客觀評價他人；通過基于工作情境的角色扮演，熟悉網(wǎng)站開發(fā)的工作流程，并從中獲得溝通表

5、達(dá)，解決問題的經(jīng)驗，體驗團(tuán)隊合作與信息共享的樂趣。建議課時：16課時廣州市技師學(xué)院廣州市高級技工學(xué)校資訊【任務(wù)描述】小李剛剛通過應(yīng)聘進(jìn)入了一家網(wǎng)頁制作公司，公司規(guī)模不大，主要業(yè)務(wù)是承接各類網(wǎng)站的制作?，F(xiàn)在公司剛接了四個不同的制作網(wǎng)站業(yè)務(wù)，分別是花卉、海洋公園、環(huán)保、潮流，由于公司人數(shù)不多，所以小李要獨(dú)立負(fù)責(zé)其中一個網(wǎng)站的建設(shè)，由于時間緊迫，現(xiàn)要求小李選擇其中一個網(wǎng)站，并與策劃部進(jìn)行快速溝通和需求分析，完成資料的整理和素材的簡單加工，設(shè)計出基本框架，再通過網(wǎng)頁編輯工具完成網(wǎng)頁版面的制作和內(nèi)容元素的編輯，最后通過公司服務(wù)器發(fā)布網(wǎng)站到互聯(lián)網(wǎng)上。明確任務(wù)后，教師幫助學(xué)生理解任務(wù)要求、分析任務(wù),并介紹創(chuàng)

6、建站點、繪制草圖、表格在頁面布局中的作用，同時提供獲取資訊的方法和途徑等信息。學(xué)生根據(jù)老師的提示及任務(wù)，尋找完成任務(wù)所需要的資料。例如：1、瀏覽相關(guān)主題網(wǎng)站，參考網(wǎng)頁布局結(jié)構(gòu)2、制作網(wǎng)站總體設(shè)計說明書3、收集網(wǎng)頁素材資源，包括圖片、介紹文字、視頻等。決策決策廣州市技師學(xué)院廣州市高級技工學(xué)校在教師協(xié)調(diào)下學(xué)生自愿分組，進(jìn)行探究式學(xué)習(xí)，學(xué)生經(jīng)過討論以小組方式擬定工作過程，確定網(wǎng)頁素材，網(wǎng)頁表格的添加方式，輔助的選用，美化設(shè)計等，教師聽取學(xué)生的決策意見，提出可行性方面的質(zhì)疑，提供指導(dǎo)意見，幫助形成方案并指導(dǎo)學(xué)生進(jìn)行方案優(yōu)化，最終做出決策，形成團(tuán)隊實施方案。1、用戶訪談，收集需求通過“策劃部門充分溝通，

7、了解專題網(wǎng)站的基本要求,瀏覽策劃部門提供的資料，收集各種需求網(wǎng)站名稱腳本支持純HTML所用域名數(shù)據(jù)庫支持否負(fù)責(zé)部門策劃部聯(lián)系人需求訪談記錄廣州市技師學(xué)院廣州市高級技工學(xué)校2、引導(dǎo)需求要點通過與用戶溝通，引導(dǎo)用戶提出具體需求指導(dǎo)用戶選擇與網(wǎng)站主題相關(guān)的域名，要便于訪問者使用根據(jù)所能提供的條件，明確網(wǎng)站建設(shè)的規(guī)模根據(jù)用戶的實際情況確定主頁要呈現(xiàn)的內(nèi)容和方式明確網(wǎng)站所米用的語言明確頁面的寬度和色彩風(fēng)格廣州市技師學(xué)院廣州市高級技工學(xué)校明確導(dǎo)航項目和子頁內(nèi)容呈現(xiàn)方式明確開發(fā)時間和后期維護(hù)要求3、需求說明確認(rèn)網(wǎng)站名稱腳本支持所用域名數(shù)據(jù)庫支持負(fù)責(zé)部門聯(lián)系人需求要點客戶意見和確認(rèn)字計劃在需求分析的基礎(chǔ)上，網(wǎng)

8、站建設(shè)負(fù)責(zé)人根據(jù)實際情廣州市技師學(xué)院廣州市高級技工學(xué)校況，明確實施目標(biāo)，確定實施方案，并將其遞交給客戶，由其負(fù)責(zé)人簽字確認(rèn)XXXXX公司網(wǎng)站建設(shè)方案書、背景著重陳述建站的意義和目的一、系統(tǒng)分析1、開發(fā)環(huán)境明確所米用的網(wǎng)頁腳本語言，靜態(tài)網(wǎng)頁這部分要求比較簡單2、版面要求陳述版面的寬度、長度、色彩搭配、總體風(fēng)格等情況3、支持語言明確選擇簡體中文，還是米用多語言二、設(shè)計方案1、網(wǎng)站結(jié)構(gòu)建議以列表的方式將網(wǎng)站各欄目分層呈現(xiàn)出來2、分塊說明對每一欄目進(jìn)行詳細(xì)說明，也可以配合簡圖四、網(wǎng)站測試與維護(hù)陳述網(wǎng)站測試驗收的環(huán)節(jié)，明確后期的維護(hù)工作如何開展以及雙方的職責(zé)廣州市技師學(xué)院廣州市高級技工學(xué)校五、進(jìn)度安排陳

9、述網(wǎng)站開發(fā)各階段時間和總工期六、費(fèi)用說明建議以列表的方式羅列域名、服務(wù)器配置、網(wǎng)站開發(fā)、更新維護(hù)、推廣等各環(huán)節(jié)的費(fèi)用客戶意見：字：工作計劃表:計劃計劃內(nèi)容計劃完成時間負(fù)責(zé)人設(shè)計網(wǎng)站規(guī)劃書創(chuàng)建網(wǎng)站的站占八、繪制首頁的頁面布局草圖，規(guī)劃網(wǎng)站頁面布局結(jié)構(gòu)制作網(wǎng)站首頁制作網(wǎng)站分頁發(fā)布網(wǎng)站布局結(jié)構(gòu)制作網(wǎng)站首頁制作網(wǎng)站分頁發(fā)布網(wǎng)站廣州市技師學(xué)院廣州市高級技工學(xué)校實施學(xué)生根據(jù)計劃方案完成設(shè)計和模擬，做好相關(guān)資料的記錄，教師監(jiān)督學(xué)生的學(xué)習(xí)過程，通過【引導(dǎo)問題】和【學(xué)習(xí)思考】培養(yǎng)學(xué)生分析問題、解決問題的能力，糾正學(xué)習(xí)偏差。教師下發(fā)學(xué)習(xí)任務(wù)，學(xué)生根據(jù)學(xué)習(xí)任務(wù)做好完成任務(wù)的計劃，教師對任務(wù)重點難點進(jìn)行講解和分析，學(xué)

10、生認(rèn)真做好知識點記錄，并安排好完成計劃的時間和步驟,重點掌握重要知識點，使學(xué)習(xí)計劃能夠按時完成，根據(jù)計劃方案操作完成設(shè)計任務(wù)，并做好相關(guān)記錄。由于剛開始接觸網(wǎng)頁制作，學(xué)生對軟件的使用都還沒有基礎(chǔ)，因此，本任務(wù)應(yīng)先由教師分模塊演示并講解一些重要操作，學(xué)生同步進(jìn)行模仿訓(xùn)練。而對知識掌握得相對比較熟練、操作比較快的學(xué)生，在操作過程中如果遇到問題，教師可引導(dǎo)學(xué)生查找相關(guān)的教材、教學(xué)參考書中的相關(guān)內(nèi)容或通過網(wǎng)絡(luò)獲取相關(guān)內(nèi)容，弓I導(dǎo)他們解決問題。而那些對知識把握得較慢的學(xué)生，則可詳細(xì)廣州市技師學(xué)院廣州市高級技工學(xué)校講解或建議學(xué)生反復(fù)學(xué)習(xí)相關(guān)章節(jié)的內(nèi)容。鼓勵小組成員在工作過程中互相幫助，解決在完成任務(wù)中所遇

11、到的問題。任務(wù)一：準(zhǔn)備工作一、任務(wù)目標(biāo)能夠瀏覽并整理客戶提供的資料和素材。能夠通過網(wǎng)絡(luò)搜索獲得素材。二、任務(wù)實現(xiàn)小組整理提供的資料和素材，對不足夠的素材通過網(wǎng)絡(luò)查找補(bǔ)充客戶提供的資料和素材往往隨機(jī)存放，顯得比較混亂。為了便于認(rèn)識需求和后續(xù)的制作，需要將其整理、歸類。在此過程中，利用資源管理器運(yùn)行文件夾整理，熟悉文件夾和文件的建立、復(fù)制、移動、刪除等操作，從而增強(qiáng)對客戶業(yè)務(wù)流程的認(rèn)識，拓展后續(xù)制作的思路任務(wù)二：站點建立與管理一、任務(wù)目標(biāo)能夠建立站點與主頁，規(guī)劃好站點目錄文件結(jié)構(gòu)，并對站點文件實施管理，二、任務(wù)實現(xiàn)站點創(chuàng)建與管理（1）新建站點廣州市技師學(xué)院廣州市高級技工學(xué)校站點不同于網(wǎng)頁，一個站點

12、不僅包含大量的網(wǎng)頁文件，還包括圖片、動畫。、視頻、音頻等文件，并且這些文件是相互關(guān)聯(lián)的，需要通過創(chuàng)建一個站點來對網(wǎng)站各類元素進(jìn)行集中管理。(2)站點管理可以通過在站點中創(chuàng)建、復(fù)制、刪除文件夾和文件對象來構(gòu)建網(wǎng)站文件系統(tǒng)。一個網(wǎng)站編輯工具可以創(chuàng)建許多站點，可以對它們進(jìn)行統(tǒng)一管理，包括站點信息的修改、站點的復(fù)制與刪除、站點的導(dǎo)出與導(dǎo)入等操作。網(wǎng)站目錄結(jié)構(gòu)規(guī)劃在所創(chuàng)建的站點中規(guī)劃好目標(biāo)結(jié)構(gòu)。多站點管理將站點導(dǎo)出，當(dāng)系統(tǒng)重裝或更換計算機(jī)后可以重新導(dǎo)入文件，減少重新工作量。任務(wù)三：網(wǎng)頁版面布局一、任務(wù)目標(biāo)認(rèn)識常見的版面布局，能夠依據(jù)用戶需求，利用布局表格工具設(shè)計并制作出網(wǎng)頁框架。二、任務(wù)實現(xiàn)小組討論制定

13、網(wǎng)站主要布局形式并繪制草圖。小組制作版面布局，并定稿任務(wù)四：圖片編輯與修辭廣州市技師學(xué)院廣州市高級技工學(xué)校、任務(wù)目標(biāo)能夠運(yùn)用網(wǎng)頁編輯軟件插入圖片對象，并對圖片進(jìn)行編排能夠運(yùn)用簡單的處理，使其適合網(wǎng)頁呈現(xiàn)。二、任務(wù)實現(xiàn)小組成員通過瀏覽整理后的資料包，找到合適的圖片，插入網(wǎng)頁相應(yīng)的位置，如果圖片大小與頁要求不符，不要在網(wǎng)頁編輯軟件中對圖片進(jìn)行大范圍，拉伸或縮小，要借助其他圖像處理軟件進(jìn)行處理后再插入，圖片插入網(wǎng)頁后會彈出保存對話框此時保存的文件名不要使用中文，瀏覽器對中文文件名不能很好的支持。任務(wù)五：文字編輯與修辭任務(wù)目標(biāo)能夠運(yùn)用網(wǎng)頁編輯軟件輸入文字，并對文字、段落進(jìn)行排版，使其適合網(wǎng)頁呈現(xiàn)。二、

14、任務(wù)實現(xiàn)小組確定導(dǎo)航和欄目標(biāo)題，使用哪種類型的導(dǎo)航。文本區(qū)域的排版，在排版中使用CSS樣式，使網(wǎng)站的風(fēng)格統(tǒng)一。任務(wù)六：內(nèi)容頁制作與超鏈接一、任務(wù)目標(biāo)能夠使用網(wǎng)頁編輯工具，制作出與主頁風(fēng)格一致、廣州市技師學(xué)院廣州市高級技工學(xué)校圖文并茂的內(nèi)容頁。能夠使用超鏈接技術(shù)，實現(xiàn)網(wǎng)頁之間的鏈接，建立頁面之間的關(guān)聯(lián)。二、任務(wù)實現(xiàn)1、內(nèi)容頁制作主頁制作完畢后，還有大量的內(nèi)容頁需要制作，一般情況下，主頁與內(nèi)容頁的風(fēng)格應(yīng)保持一致，小組成員各自負(fù)責(zé)一個分頁面的制作。2.超鏈接小組把所有完成任務(wù)好的頁面進(jìn)行超鏈接，并沒測試。填寫主頁尾部電子郵箱，并做好電子郵箱的鏈接。填寫主頁尾部QQ并做好對應(yīng)QQ用戶的應(yīng)用程序的鏈接。

15、任務(wù)七：網(wǎng)站發(fā)布一、任務(wù)目標(biāo)能夠通過常用FTP客戶端工具上傳網(wǎng)站文件，實時網(wǎng)站對外發(fā)布，并能進(jìn)行網(wǎng)站文件的維護(hù)管理。二、任務(wù)實現(xiàn)將制好的網(wǎng)站通過leapFTP工具上傳至指定的FTP服務(wù)器。檢查1、小組自我檢查評價自己的作品。分析不足之處，提廣州市技師學(xué)院廣州市高級技工學(xué)校出改進(jìn)措施等，完成小組和個人工作日志填與。2、繼續(xù)修改作品。3、提交作品。4、展示成果：小組相互展示自己的工作成果，評估作品完成質(zhì)量，關(guān)注團(tuán)隊合作，敬業(yè)勤業(yè)等職業(yè)素養(yǎng)的評估，并提出修改建議。5、修改并完善作品。6、教師檢查作品。7、交流并總結(jié)經(jīng)驗：教師對網(wǎng)頁進(jìn)行分析測試，重點對做得不理想的地方進(jìn)行分析，針對學(xué)生在完成任務(wù)過程中遇到的普遍問題進(jìn)行點評，并將技術(shù)文件歸檔,提供規(guī)范化技術(shù)文檔供學(xué)生參考。同時教師指引學(xué)生歸納總結(jié)，引導(dǎo)學(xué)生獨(dú)立構(gòu)建自己的經(jīng)驗和知識體系。評價1、教師指導(dǎo)學(xué)生對自己的作品進(jìn)行評價，包括學(xué)生的自評和學(xué)生互評。2、教師指導(dǎo)學(xué)生對其它同學(xué)的作品進(jìn)行評價。3、教師對學(xué)生的作品進(jìn)行評價。4、指導(dǎo)學(xué)生填寫作品評價表和個人考核評價表。小組作品檢查表廣州市技師學(xué)院廣州市高級技工學(xué)校班級：學(xué)生姓名:學(xué)號：作品簡述檢查主體檢查內(nèi)容改進(jìn)前改進(jìn)后小組自檢存在問題改進(jìn)意見成績評定小組互檢建議成績評定互評人簽名綜合檢查建議成績評定教師簽名注：1、學(xué)生互評，可以由學(xué)習(xí)小組長或者其他學(xué)生完成互評。2、綜合評定，可由任課