網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)(公開(kāi)課)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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