網頁制作教學設計(公開課)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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