《《網(wǎng)頁設(shè)計(jì)與制作》教案.doc》由會(huì)員分享，可在線閱讀，更多相關(guān)《《網(wǎng)頁設(shè)計(jì)與制作》教案.doc（21頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

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