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

.教 案2012 2013 學(xué)年第 二 學(xué)期學(xué)部工程技術(shù)學(xué)部教研室(實驗室)動漫課 程 名 稱網(wǎng)頁設(shè)計與制作授 課 班 級11動漫主 講 教 師職 稱講師使 用 教 材網(wǎng)頁設(shè)計與制作案例教程主編：九州書源清華大學(xué)出版社 教 案（首頁） 至 12-13 學(xué)年第 二 學(xué)期課程名稱網(wǎng)頁設(shè)計與制作課程編碼總計：72 學(xué)時講課：36 學(xué)時實訓(xùn)：36 學(xué)時學(xué) 分4類別必修課（ ） 選修課（ ） 理論課（ ） 實踐課（ ）任課教師陳奮職稱 講師授課對象專業(yè)班級：11動漫、 共 個班基本教材和主要參考資料教材：網(wǎng)頁設(shè)計與制作案例教程主編：九州書源清華大學(xué)出版社參考資料：網(wǎng)頁設(shè)計與制作案例教程 主編:陳承歡教學(xué)目的要求 教學(xué)目的：本課程是動漫專業(yè)的一門職業(yè)技術(shù)必修課，目的是使學(xué)生掌握有關(guān)網(wǎng)站建設(shè)的基本概念、創(chuàng)建網(wǎng)站的方法和步驟、重點掌握利用Dreamweaver軟件來設(shè)計布局靜態(tài)網(wǎng)頁以及一些簡單的JavaScript腳本語言、熟練掌握網(wǎng)頁編寫語言html，能夠利用Dreamweaver來創(chuàng)建和設(shè)計一個網(wǎng)站，為以后學(xué)習(xí)Web動態(tài)網(wǎng)頁的開發(fā)奠定基礎(chǔ)。 教學(xué)要求：通過本課程的學(xué)習(xí)，要求學(xué)生掌握網(wǎng)站的相關(guān)概念，創(chuàng)建網(wǎng)站的方法和步驟，掌握網(wǎng)頁編寫語言html，DW軟件的使用。教學(xué)重點難點教學(xué)重點：網(wǎng)頁編寫語言html，如何利用DW來布局網(wǎng)頁，層，行為，模板，庫。教學(xué)難點：如何利用表格的布局模式以及框架進(jìn)行布局，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é)步驟： 舉例->講解->課堂練習(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)頁，使學(xué)生基本上了解了構(gòu)建網(wǎng)站的流程及網(wǎng)站有關(guān)的基礎(chǔ)知識，為以下各章打基礎(chǔ)。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注l PS概述l PS面板的基本操作l PS選區(qū)、圖層的操作l 建立網(wǎng)站之前的一些準(zhǔn)備工作l 與網(wǎng)站有關(guān)的一些概念n 網(wǎng)頁的概念與分類n 網(wǎng)站的概念、主題、風(fēng)格、名稱、結(jié)構(gòu)l 建立網(wǎng)站的過程l 網(wǎng)站的整體規(guī)劃l 定位網(wǎng)站的主題和風(fēng)格l 構(gòu)建出一個網(wǎng)站的目錄框架和鏈接框架l 發(fā)布網(wǎng)頁l 網(wǎng)頁語言html授課時間第 三、四 周課次2授課方式（請打）理論課 討論課 實踐課 習(xí)題課 其他課時安排8教學(xué)單元（教學(xué)章、節(jié)或主題）： PS路徑、通道、蒙版、DW基礎(chǔ)。目的、要求（分了解、熟悉、掌握三個層次）：掌握建立本地站點的過程，DW的集成環(huán)境，熟練使用對象面板與屬性面板，掌握簡單界面元素的編輯。通過實驗，能夠利用DW創(chuàng)建本地站點，制作幾張含有簡單界面元素的網(wǎng)頁，并進(jìn)行相關(guān)的鏈接。知識要點： 熟悉DW的集成環(huán)境，簡單界面元素的編輯，網(wǎng)頁的鏈接。技能要點： 能夠利用DW創(chuàng)建本地站點，制作幾張含有簡單界面元素的網(wǎng)頁，并進(jìn)行相關(guān)的鏈接。教學(xué)步驟： 舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、舉例講解。作業(yè)和思考題： 教材P30P34課后分析與小結(jié)： 通過學(xué)習(xí)，學(xué)生掌握了建立本地站點的過程，DW的工作界面的組成，熟練使用對象面板與屬性面板，簡單的界面元素：文字、圖像、Flash動畫的編輯方法，區(qū)分了文件路徑的三種表示方法，會懂得使用各種超級鏈接。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注l PS路徑、通道和蒙版的使用l 建立本地站點并管理站點l 制作簡單的靜態(tài)網(wǎng)頁l 使用對象面板在網(wǎng)頁中插入文字、水平線、圖像、Flash文件等簡單的元素l 熟練使用屬性面板設(shè)置對象的屬性l 多種超鏈接的設(shè)置方法l 利用頁面屬性設(shè)置頁面的屬性值實驗1：l 創(chuàng)建本地站點、整體控制頁面l 文本操作與圖像操作授課時間第 五、六 周課次2授課方式（請打）理論課 討論課 實踐課 習(xí)題課 其他課時安排8教學(xué)單元（教學(xué)章、節(jié)或主題）： 表格、框架和表單。目的、要求（分了解、熟悉、掌握三個層次）： 能夠熟練利用表格、框架進(jìn)行網(wǎng)頁的布局，掌握表單的制作和驗證。知識要點： 熟練掌握利用表格的布局模式進(jìn)行網(wǎng)頁的布局，表單的操作。技能要點： 表格布局模式的使用，表單的制作。教學(xué)步驟： 舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、舉例講解。作業(yè)和思考題： 教材P131P135課后分析與小結(jié)：表格對于網(wǎng)站內(nèi)容的定位是非常重要的。既可以利用表格來進(jìn)行各種數(shù)據(jù)的設(shè)定，也可以進(jìn)行文字區(qū)域及圖像的定位，并利用布局視圖來改變表格的布局。應(yīng)用框架來進(jìn)行頁面的優(yōu)化，方便用戶的瀏覽。通過制作表單來進(jìn)行調(diào)查、訂單、搜索界面等，完成數(shù)據(jù)的采集，同時要了解表單的處理。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注1 表格a) 創(chuàng)建表格b) 選擇表格c) 設(shè)置表格、單元格屬性d) 創(chuàng)建網(wǎng)站相冊2 布局表格a) 繪制布局表格b) 設(shè)置布局表格、單元格屬性c) 布局表格實例分析講解3 框架a) 創(chuàng)建框架b) 保存框架c) 框架的選擇、屬性、鏈接的設(shè)置d) 框架實例分析講解4 表單a) 創(chuàng)建表單b) 向表單添加對象c) 表單屬性的設(shè)置與后臺程序的鏈接d) 表單實例分析講解實驗2：l 利用表格布局模式進(jìn)行包含表單等網(wǎng)頁元素的布局設(shè)計l 利用框架進(jìn)行網(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é)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、個別輔導(dǎo)。作業(yè)和思考題： 教材P166P168課后分析與小結(jié)：層和div布局技術(shù)是DW的優(yōu)勢所在，一方面應(yīng)該熟練地使用層技術(shù)來完成頁面元素的精確定位，另一方面通過設(shè)置與層有關(guān)的行為來制作具有動態(tài)效果的網(wǎng)頁，不但能增加制作網(wǎng)頁的興趣，還會增加做好網(wǎng)頁的自信心。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注1 層的創(chuàng)建a) 創(chuàng)建新層b) 創(chuàng)建嵌套層c) 熟悉層面板與屬性面板2 層的基本操作a) 層的移動b) 調(diào)整層的大小c) 層的對齊、排列3 層的應(yīng)用a) 拖動層b) 顯示、隱藏層c) 層具體實例的分析講解4 Div標(biāo)簽的使用實驗3：l 利用層制作拼圖游戲l 利用層制作動態(tài)顯示的菜單l 利用div技術(shù)來布局網(wǎng)頁授課時間第 九、十 周課次2授課方式（請打）理論課 討論課 實踐課 習(xí)題課 其他課時安排8教學(xué)單元（教學(xué)章、節(jié)或主題）： 行為與時間軸目的、要求（分了解、熟悉、掌握三個層次）： 熟練掌握行為面板的使用方法，基本的行為操作，能利用時間軸創(chuàng)建沿路徑運(yùn)動的動畫，利用行為與時間軸和層的結(jié)合來制作動態(tài)交互網(wǎng)頁。知識要點： 行為與時間軸的概念。技能要點： 基本行為的操作，行為與時間軸和層的結(jié)合來制作動態(tài)交互網(wǎng)頁。教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題： 教材P211P212課后分析與小結(jié)：本章主要講述了使用DW自帶的行為來建立動態(tài)交互網(wǎng)頁的方法，時間軸動畫的制作，以及把時間軸和行為、層結(jié)合起來制作更為復(fù)雜的動畫，這部分知識對制作富有動感的網(wǎng)頁很有幫助。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注1 行為a) 熟悉行為面板b) 添加行為c) 修改行為d) 行為常用的事件e) 應(yīng)用行為i. 打開瀏覽器窗口ii. 播放聲音iii. 彈出信息iv. 設(shè)置文本v. 轉(zhuǎn)到URLvi. 檢查插件vii. 控制多媒體動畫viii. 顯示彈出式菜單2 時間軸a) 熟悉時間軸面板b) 利用時間軸進(jìn)行層的移動i. 直線移動的動畫ii. 拖動路徑制作曲線移動動畫iii. 記錄路徑制作曲線移動動畫c) 利用時間軸改變圖像d) 添加時間軸行為實驗4：l 利用行為與時間軸制作富有動態(tài)的網(wǎng)頁授課時間第 十一周課次1授課方式（請打）理論課 討論課 實踐課 習(xí)題課 其他課時安排4教學(xué)單元（教學(xué)章、節(jié)或主題）： 多媒體對象目的、要求（分了解、熟悉、掌握三個層次）： 熟悉插入Flash和修改其屬性的方法，了解插入和設(shè)置Flash視頻、FlashPaper文檔、文字和按鈕方法。知識要點： 熟悉插入Flash等多媒體對象和修改其屬性的方法。技能要點： 熟悉插入Flash等多媒體對象和修改其屬性的方法教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題： 教材P261-264課后分析與小結(jié)：本章介紹如何在網(wǎng)頁中插入多媒體對象，因為這類文件可以把聲音、圖像結(jié)合在一起，其界面動感十足，所以在網(wǎng)上非常流行。在網(wǎng)頁上不僅是插入這些對象，而且要保證相應(yīng)的文件能夠正常播放，學(xué)會安裝各種各樣的插件能豐富網(wǎng)頁的內(nèi)容。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注1 Flash的使用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é)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題： 教材P278-279課后分析與小結(jié)：建設(shè)網(wǎng)站時，可以在網(wǎng)頁中綜合應(yīng)用模板和庫的相關(guān)知識，即把庫放到模板中，讓模板和庫項目聯(lián)合來更新網(wǎng)站。使用這種方法可以更好地維護(hù)網(wǎng)頁，有利于減輕網(wǎng)站設(shè)計中的重復(fù)工作量。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注1 模板a) 熟悉資源面板b) 創(chuàng)建模板c) 編輯模板d) 創(chuàng)建可編輯區(qū)域e) 重復(fù)區(qū)域f) 模板的應(yīng)用g) 模板應(yīng)用實例分析與講解2 庫a) 創(chuàng)建庫b) 在文檔中插入庫項目c) 編輯庫項目d) 庫項目應(yīng)用實例分析與講解實驗5：l 利用模板和庫制作網(wǎng)站授課時間第 十四、十五 周課次2授課方式（請打）理論課 討論課 實踐課 習(xí)題課 其他課時安排8教學(xué)單元（教學(xué)章、節(jié)或主題）： CSS樣式、div+css布局目的、要求（分了解、熟悉、掌握三個層次）： 掌握創(chuàng)建CSS樣式表，熟練掌握CSS樣式的屬性項目設(shè)置方法，在文檔中如何應(yīng)用樣式表，會管理樣式表，div+css布局模式。知識要點： 熟練掌握CSS樣式的屬性項目設(shè)置方法，在文檔中如何應(yīng)用樣式表，div+css布局模式。技能要點： 熟練掌握CSS樣式的屬性項目設(shè)置方法，在文檔中如何應(yīng)用樣式表，div+css布局模式。教學(xué)步驟：舉例展示->講解->小結(jié)->實驗->講評教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、舉例講解、個別輔導(dǎo)。作業(yè)和思考題： 教材P187-190課后分析與小結(jié)：樣式表最大的一個優(yōu)點就在于可以在多個頁面甚至整個站點上應(yīng)用它。尤其是修改了外部樣式表時，它將自動更新所有使用它的網(wǎng)頁，從而完成大量的頁面修改工作。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注1 創(chuàng)建CSS樣式a) 熟悉CSS樣式面板b) 新建CSS樣式c) CSS樣式規(guī)則對話框d) 熟練操作規(guī)則定義對話框e) 編輯樣式f) 導(dǎo)入導(dǎo)出樣式實驗6：l 利用DIV+CSS樣式來統(tǒng)一整個網(wǎng)站授課時間第 十六十八 周課次3授課方式（請打）理論課 討論課 實踐課 習(xí)題課 其他課時安排12教學(xué)單元（教學(xué)章、節(jié)或主題）： 綜合練習(xí)目的、要求（分了解、熟悉、掌握三個層次）： 利用所學(xué)過的知識制作一個自選的網(wǎng)站。知識要點： CSS的使用，div布局模式的使用，模板和庫的使用，行為的使用等。技能要點： CSS的使用，div布局模式的使用，模板和庫的使用，行為的使用等。教學(xué)步驟： 舉例展示->講解->輔導(dǎo)教具及教學(xué)手段：（如：舉例講解、多媒體講解、模型講解、實物講解、掛圖講解、音像講解等） 多媒體講解、個別輔導(dǎo)。作業(yè)和思考題： 課后分析與小結(jié)： 主要是訓(xùn)練如何利用CSS的使用，div布局模式的使用，模板和庫的使用，行為的使用等來制作一個完整的網(wǎng)站，并進(jìn)行發(fā)布。第 頁教 學(xué) 內(nèi) 容（含時間分配）板書或旁注精選word范本！