《《網(wǎng)頁設計與制作》教案.doc》由會員分享，可在線閱讀，更多相關《《網(wǎng)頁設計與制作》教案.doc（21頁珍藏版）》請在裝配圖網(wǎng)上搜索。

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