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

ll頁腳內(nèi)容頁腳內(nèi)容PAGE34教 案2012～2013學(xué)年第二學(xué)期學(xué) 部 工程技術(shù)學(xué)部教研室(實驗室) 動漫課 程 名 稱 網(wǎng)頁設(shè)計與制授 課 班 級 11動漫主 講 教 師職 稱 講師使 用 教

網(wǎng)頁設(shè)計與制作案例教程主編：九州書源清華大學(xué)出版社教 案（首頁）課程課程編碼網(wǎng)頁設(shè)計與制作名稱學(xué)分4課程課程編碼網(wǎng)頁設(shè)計與制作名稱學(xué)分4學(xué)時類學(xué)別（）（）（）（）時學(xué)任時課陳奮職稱講師教師授授課專業(yè)班級：11動漫Ａ、Ｂ共２個班對象基本教材教材：網(wǎng)頁設(shè)計與制作案例教程和主主編：九州書源要清華大學(xué)出版社參參考資料：網(wǎng)頁設(shè)計與制作案例教程主編:陳承歡考資料學(xué)學(xué)教學(xué)目的：本課程是動漫專業(yè)的一門職業(yè)技術(shù)必修課，目的是使學(xué)生掌握有關(guān)網(wǎng)站建設(shè)的基本概念、創(chuàng)建網(wǎng)站的方法和步驟、重點掌握利用DreamweaverJavaScript腳本語言、熟練掌握網(wǎng)頁編寫DreamweaverWeb動態(tài)網(wǎng)頁的開發(fā)奠定基礎(chǔ)。目的教學(xué)要求：通過本課程的學(xué)習(xí)，要求學(xué)生掌握網(wǎng)站的相關(guān)概念，創(chuàng)建網(wǎng)站的方法和步驟，掌握網(wǎng)頁編寫語言html，DW軟件的使用。要求教學(xué)htmlDW來布局網(wǎng)頁，層，行為，模板，庫。教學(xué)難點：如何利用表格的布局模式以及框架進行布局，CSS樣式，行為，模板。重點難點《網(wǎng)頁設(shè)計與制作》課程教編制日期：2013年3 月3 日授課 第一、二周 課2時間 次方式（打√）

課時理論課√□討論課□實踐課□習(xí)題課□其他□ 8安排教學(xué)單元（教學(xué)章、節(jié)或主題：Photoshop基本操作、網(wǎng)頁與網(wǎng)站的概念。目的、要求（分了解、熟悉、掌握三個層次：了解網(wǎng)頁的基本概念、靜態(tài)網(wǎng)頁、動態(tài)網(wǎng)頁、使用數(shù)據(jù)庫的動態(tài)網(wǎng)頁。了解網(wǎng)站的概念、主題、名稱、風(fēng)格、結(jié)構(gòu)、發(fā)布。掌握網(wǎng)頁語言html。知識要點：網(wǎng)頁和網(wǎng)站的基本概念，網(wǎng)頁的分類，網(wǎng)頁語言html技能要點：要能夠從網(wǎng)絡(luò)上找出每一種類型的網(wǎng)頁，能夠利用html來編寫簡單網(wǎng)頁教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注PS概述教學(xué)步驟：舉例->講解->課堂練習(xí)->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解、Internet網(wǎng)絡(luò)。作業(yè)和思考題：初步構(gòu)想一個個人網(wǎng)站，包括網(wǎng)站名稱、網(wǎng)站的欄目板塊、網(wǎng)站的目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)，并預(yù)設(shè)網(wǎng)站的色彩搭配、網(wǎng)站的標(biāo)準(zhǔn)字體等。課后分析與小結(jié)：通過學(xué)習(xí)，介紹了和網(wǎng)站相關(guān)的幾個概念，從網(wǎng)站的整體規(guī)劃出發(fā)，綜合網(wǎng)站的主題、結(jié)構(gòu)、風(fēng)格、布局等多個方面闡述網(wǎng)站的制作構(gòu)思，以及如何使用DW發(fā)布網(wǎng)第 頁PS面板的基本操作PS選區(qū)、圖層的操作建立網(wǎng)站之前的一些準(zhǔn)備工作與網(wǎng)站有關(guān)的一些概念網(wǎng)頁的概念與分類網(wǎng)站的概念、主題、風(fēng)格、名稱、結(jié)構(gòu)建立網(wǎng)站的過程網(wǎng)站的整體規(guī)劃定位網(wǎng)站的主題和風(fēng)格構(gòu)建出一個網(wǎng)站的目錄框架和鏈接框架發(fā)布網(wǎng)頁網(wǎng)頁語言html授課 第三、四周 課2時間 次方式（打√）

課理論課√□討論課□實踐課√□習(xí)題課√□其 時8他□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題：PS路徑、通道、蒙版、DW基礎(chǔ)。目的、要求（分了解、熟悉、掌握三個層次：掌握建立本地站點的過程，DW的集成環(huán)境，熟練使用對象面板與屬性面板，掌握簡單界面元素的編輯。通過實驗，能夠利用DW行相關(guān)的鏈接。知識要點：熟悉DW的集成環(huán)境，簡單界面元素的編輯，網(wǎng)頁的鏈接。技能要點：能夠利用DW創(chuàng)建本地站點，制作幾張含有簡單界面元素的網(wǎng)頁，并進行相關(guān)的鏈接。教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注PS路徑、通道和蒙版的使用建立本地站點并管理站點制教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解。作業(yè)和思考題：P30~P34課后分析與小結(jié)：DW的工作界面的組成，熟練使用對象面板與屬性面板，簡單的界面元素：文字、圖像、Flash動畫的編輯方法，區(qū)分了文件路徑的三種表示方法，會懂得使用各種超級鏈接。第 頁作簡單的靜態(tài)網(wǎng)頁作簡單的靜態(tài)網(wǎng)頁使用對象面板在網(wǎng)頁中插入文字、水平線、圖像、Flash文件等簡單的元素熟練使用屬性面板設(shè)置對象的屬性多種超鏈接的設(shè)置方法利用頁面屬性設(shè)置頁面的屬性值1：創(chuàng)建本地站點、整體控制頁面文本操作與圖像操作授課 第五、六周 課2時間 次方式（打√）

課理論課√□討論課□實踐課□習(xí)題課√□其他 時8□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題表格、框架和表單。目的、要求（分了解、熟悉、掌握三個層次：能夠熟練利用表格、框架進行網(wǎng)頁的布局，掌握表單的制作和驗證。知識要點：熟練掌握利用表格的布局模式進行網(wǎng)頁的布局，表單的操作。技能要點：表格布局模式的使用，表單的制作。教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注1．表教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解。作業(yè)和思考題：P131~P135課后分析與小結(jié)：表格對于網(wǎng)站內(nèi)容的定位是非常重要的。既可以利用表格來進行各種數(shù)據(jù)的設(shè)定，也可以進行文字區(qū)域及圖像的定位，并利用布局視圖來改變表格的布局。應(yīng)用框架來進行頁面的優(yōu)化，方便用戶的瀏覽。通過制作表單來進行調(diào)查、訂單、搜索界面等，完成數(shù)據(jù)的采集，同時要了解表單的處理。第 頁格創(chuàng)建表格選擇表格設(shè)置表格、單元格屬性創(chuàng)建網(wǎng)站相冊布局表格繪制布局表格設(shè)置布局表格、單元格屬性布局表格實例分析講解框架創(chuàng)建框架保存框架框架的選擇、屬性、鏈接的設(shè)置架的選擇、屬性、鏈接的設(shè)置d)架實例分析講解框4．表單a)建表單創(chuàng)b)表單添加對象向c)單屬性的設(shè)置與后臺程序的鏈接表d)單實例分析講解表2：利用表格布局模式進行包含表單等網(wǎng)頁元素的布局設(shè)計利用框架進行網(wǎng)頁的布局設(shè)計授課 第七、八周 課2時間 次方式（打√）

課理論課□討論課□實踐課√□習(xí)題課√□其他 時8□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題層、div布局目的、要求（分了解、熟悉、掌握三個層次：通過學(xué)習(xí)，學(xué)生要熟練掌握層的概念，層的常用具體的操作，包括層的創(chuàng)建、屬性的設(shè)置、層的移動、排列、拖動、顯示、隱藏，div布局。知識要點：布局。

層的概念，層的創(chuàng)建、屬性的設(shè)置、層的移動、排列、拖動、顯示、隱藏，div技能要點：層的創(chuàng)建、屬性的設(shè)置、層的移動、排列、拖動、顯示、隱藏,層的精確定位，div布局。教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注1．層教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、個別輔導(dǎo)。作業(yè)和思考題：P166~P168課后分析與小結(jié)：divDW的優(yōu)勢所在，一方面應(yīng)該熟練地使用層技術(shù)來完成頁面元素的精確定位，另一方面通過設(shè)置與層有關(guān)的行為來制作具有動態(tài)效果的網(wǎng)頁，不但能增加制作網(wǎng)頁的興趣，還會增加做好網(wǎng)頁的自信心。第 頁的創(chuàng)建創(chuàng)建新層創(chuàng)建嵌套層熟悉層面板與屬性面板層的基本操作層的移動調(diào)整層的大小層的對齊、排列層的應(yīng)用拖動層顯示、隱藏層層具體實例的分析講解Diviv標(biāo)簽的使用3：利用層制作拼圖游戲利用層制作動態(tài)顯示的菜單利div技術(shù)來布局網(wǎng)頁授課 第九、十周 課2時間 次方式（打√）

課理論課√□討論課□實踐課□習(xí)題課√□其他 時8□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題行為與時間軸目的、要求（分了解、熟悉、掌握三個層次：熟練掌握行為面板的使用方法，基本的行為操作，能利用時間軸創(chuàng)建沿路徑運動的動畫，利用行為與時間軸和層的結(jié)合來制作動態(tài)交互網(wǎng)頁。知識要點：行為與時間軸的概念。技能要點：基本行為的操作，行為與時間軸和層的結(jié)合來制作動態(tài)交互網(wǎng)頁。教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注1．行教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題：P211~P212課后分析與小結(jié)：DW作，以及把時間軸和行為、層結(jié)合起來制作更為復(fù)雜的動畫，這部分知識對制作富有動感的網(wǎng)頁很有幫助。第 頁為熟悉行為面板添加行為修改行為行為常用的事件應(yīng)用行為打開瀏覽器窗口播放聲音彈出信息設(shè)置文本轉(zhuǎn)URL檢查插件控制多媒體動畫顯示彈出式菜單時間軸熟悉時間軸面板利用時間軸進行層的移動直線移動的動畫拖動路徑制作曲線移動動畫記錄路徑制作曲線移動動畫利用時間軸改變圖像添加時間軸行為實驗4：利用行為與時間軸制作富有動態(tài)的網(wǎng)頁授課 第十一周 課1時間 次方式（打√）

課理論課√□討論課□實踐課√□習(xí)題課√□其 時4他□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題多媒體對象目的、要求（分了解、熟悉、掌握三個層次：熟悉插入Flash和修改其屬性的方法，了解插入和設(shè)置Flash視頻、FlashPaper文檔、文字和按鈕方法。知識要點：熟悉插入Flash等多媒體對象和修改其屬性的方法。技能要點：熟悉插入Flash等多媒體對象和修改其屬性的方法教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注1．F教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題：P261-264課后分析與小結(jié)：本章介紹如何在網(wǎng)頁中插入多媒體對象，因為這類文件可以把聲音、圖像結(jié)合在一起，其界面動感十足，所以在網(wǎng)上非常流行。在網(wǎng)頁上不僅是插入這些對象，而且要保證相應(yīng)的文件能夠正常播放，學(xué)會安裝各種各樣的插件能豐富網(wǎng)頁的內(nèi)容。第 頁lashlash的使用a)Flash對象的方法插b)置屬性、參數(shù)設(shè)2．放視頻播3．放聲音播授課 第十二、十三周 課2時間 次方式（打√）

課理論課√□討論課□實踐課√□習(xí)題課√□其 時8他□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題模板和庫目的、要求（分了解、熟悉、掌握三個層次：掌握創(chuàng)建模板的方法，在模板中如何定義可編輯區(qū)域，如何應(yīng)用模板建立具有統(tǒng)一風(fēng)格的網(wǎng)頁并更新當(dāng)前站點，學(xué)會編輯庫項目并應(yīng)用庫項目提高工作效率。知識要點：技能要點：模板和庫的使用教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注1．模教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題：P278-279課后分析與小結(jié)：建設(shè)網(wǎng)站時，可以在網(wǎng)頁中綜合應(yīng)用模板和庫的相關(guān)知識，即把庫放到模板中，讓模板和庫項目聯(lián)合來更新網(wǎng)站。使用這種方法可以更好地維護網(wǎng)頁，有利于減輕網(wǎng)站設(shè)計中的重復(fù)工作量。第 頁板熟悉資源面板創(chuàng)建模板編輯模板創(chuàng)建可編輯區(qū)域重復(fù)區(qū)域模板的應(yīng)用模板應(yīng)用實例分析與講解庫創(chuàng)建庫在文檔中插入庫項目編輯庫項目庫項目應(yīng)用實例分析與講解5：利用模板和庫制作網(wǎng)站授課 第十四、十五周 課2時間 次方式（打√）

課理論課√□討論課□實踐課√□習(xí)題課□其他 時8□ 安排教學(xué)單元（教學(xué)章、節(jié)或主題：CSS樣式、div+css布局目的、要求（分了解、熟悉、掌握三個層次：CSSCSS布局模式。知識要點：模式。

熟練掌握CSS樣式的屬性項目設(shè)置方法，在文檔中如何應(yīng)用樣式表，div+css布局技能要點：模式。

熟練掌握CSS樣式的屬性項目設(shè)置方法，在文檔中如何應(yīng)用樣式表，div+css布局教學(xué)內(nèi)容（含時間分配）板書或旁注教學(xué)內(nèi)容（含時間分配）板書或旁注1．CSS樣式創(chuàng)教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等）多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題：P187-190課后分析與小結(jié)：樣式表最大的一個優(yōu)點就在于可以在多個頁面甚至整個站點上應(yīng)用它。尤其是修改了外部樣式表時，它將自動更新所有使用它的網(wǎng)頁，從而完成大量的頁面修改工作。第 頁a)a)CSS樣式面板熟b)CSS新c)SS樣式規(guī)則對話框Cd)練操作規(guī)則定義對話框熟e)輯樣式編f)入導(dǎo)出樣式導(dǎo)6：利DIV+CSS樣式來統(tǒng)一整個網(wǎng)站授課 第十六－十八周 課3時間 次方式（打√）

課理論課√□討論課□實踐課√□習(xí)題課□其他 時 1□ 安 2排教學(xué)單元（教學(xué)章、節(jié)或主題綜合練習(xí)目的、要求（分了解、熟悉、掌