網(wǎng)頁(yè)設(shè)計(jì)與制作教案

安徽科技學(xué)院教案課程名稱(chēng)：網(wǎng)頁(yè)制作授課方式：教學(xué)做一體化（18）授課學(xué)時(shí)：18學(xué)時(shí)授課教師：學(xué)院：信息與網(wǎng)絡(luò)工程學(xué)院系部：計(jì)算機(jī)公共教學(xué)部安徽科技學(xué)院教務(wù)處

第一部分網(wǎng)頁(yè)制作基礎(chǔ)課程：第2章DreamweaverCS6基本操作課時(shí)內(nèi)容DreamweaverCS6基本操作授課時(shí)間學(xué)時(shí)數(shù)2教學(xué)目標(biāo)認(rèn)識(shí)DreamweaverCS6的工作界面掌握網(wǎng)頁(yè)文檔的基本操作方法掌握頁(yè)面屬性的設(shè)置掌握設(shè)置并管理站點(diǎn)的方法和WEB服務(wù)器配置教學(xué)重點(diǎn)認(rèn)識(shí)DreamweaverCS6的工作界面教學(xué)難點(diǎn)設(shè)置頁(yè)面屬性和站點(diǎn)管理教學(xué)設(shè)計(jì)教學(xué)思路：首先，讓同學(xué)們認(rèn)識(shí)DreamweaverCS6的工作界面。然后進(jìn)行系統(tǒng)地介紹網(wǎng)頁(yè)文檔制作的基本操作方法及頁(yè)面的設(shè)置。最后學(xué)習(xí)對(duì)站點(diǎn)的管理以及設(shè)置方法。教學(xué)方法：讓同學(xué)們先回憶一下上節(jié)課所講內(nèi)容，然后讓同學(xué)們回答網(wǎng)頁(yè)是由哪幾部分組成的，了解同學(xué)們對(duì)上一章知識(shí)的掌握程度。教學(xué)手段：結(jié)合上章內(nèi)容在機(jī)房?jī)?nèi)進(jìn)行上機(jī)講解。教學(xué)資料及要求：課前要求學(xué)生預(yù)習(xí)本章內(nèi)容。教學(xué)內(nèi)容導(dǎo)入：什么是網(wǎng)頁(yè)，由哪幾部分組成？討論問(wèn)題：1、DreamweaverCS6的工作界面由哪幾部分組成？2、各部分的作用是什么？第2章DreamweaverCS6基本操作2.1了解網(wǎng)頁(yè)元素2.2DreamweaverCS6工作界面2.2.1標(biāo)題欄2.2.2菜單欄2.2.3插入面板2.2.4文檔工具欄2.2.5文檔窗口2.2.6狀態(tài)欄2.2.7屬性面板2.2.8面板組2.3網(wǎng)頁(yè)文檔的基本操作2.3.1創(chuàng)建網(wǎng)頁(yè)文檔2.3.2打開(kāi)網(wǎng)頁(yè)文檔2.3.3預(yù)覽網(wǎng)頁(yè)2.3.4保存網(wǎng)頁(yè)文檔2.3.5設(shè)置頁(yè)面屬性2.3.6應(yīng)用舉例——打開(kāi)、保存和設(shè)置網(wǎng)頁(yè)文件2.4站點(diǎn)管理2.4.1建立本地站點(diǎn)2.4.2在站點(diǎn)中添加新文件和文件夾2.4.3站點(diǎn)的編輯2.4.4站點(diǎn)測(cè)試與發(fā)布2.4.5應(yīng)用舉例——?jiǎng)?chuàng)建“mysite”本地站點(diǎn)2.5上機(jī)及項(xiàng)目實(shí)訓(xùn)2.5.1創(chuàng)建并規(guī)劃個(gè)人網(wǎng)站2.5.2配置“Internet信息服務(wù)”搭建站點(diǎn)測(cè)試環(huán)境2.6練習(xí)與提高本課小結(jié)了解DreamweaverCS6工作界面的組成部分及各部分的作用。掌握網(wǎng)頁(yè)文檔的基本操作。掌握頁(yè)面屬性的設(shè)置。對(duì)DreamweaverCS6站點(diǎn)的管理。思考題及作業(yè)（1）預(yù)覽網(wǎng)頁(yè)效果一般會(huì)注意哪些方面？（2）如何創(chuàng)建和規(guī)劃站點(diǎn)？（3）如何創(chuàng)建站點(diǎn)文件和文件夾？（4）設(shè)置頁(yè)面屬性，一般包括那幾個(gè)方面？

課程：第3章課時(shí)內(nèi)容創(chuàng)建網(wǎng)頁(yè)基本對(duì)象授課時(shí)間學(xué)時(shí)數(shù)2教學(xué)目標(biāo)掌握文本的插入以及調(diào)整學(xué)會(huì)圖像的插入和編輯操作掌握創(chuàng)建超級(jí)鏈接的方法教學(xué)重點(diǎn)創(chuàng)建對(duì)象及超級(jí)鏈接的方法教學(xué)難點(diǎn)編輯網(wǎng)頁(yè)中創(chuàng)建的對(duì)象教學(xué)設(shè)計(jì)教學(xué)思路：首先，讓同學(xué)們先說(shuō)說(shuō)在Word、Excel中插入與編輯對(duì)象的方法。然后進(jìn)行系統(tǒng)地介紹在網(wǎng)頁(yè)中創(chuàng)建和編輯對(duì)象的方法。最后學(xué)習(xí)在網(wǎng)頁(yè)中創(chuàng)建超級(jí)鏈接的方法。2、教學(xué)方法：可以選擇一種同學(xué)們熟悉的，并且插入對(duì)象與編輯對(duì)象的方法要與在網(wǎng)頁(yè)中插入和編輯對(duì)象的方法基本相同的軟件，進(jìn)行比較講解，這樣既可以讓同學(xué)們快速地掌握其操作方法，又可以鞏固以前的知識(shí)。3、教學(xué)手段：利用多媒體并結(jié)合書(shū)本上的內(nèi)容進(jìn)行教學(xué)。4、教學(xué)資料及要求：課前要求學(xué)生了解在Word辦公軟件中創(chuàng)建超級(jí)鏈接的方法。教學(xué)內(nèi)容知識(shí)回顧：上一課時(shí)講的DreamweaverCS6的工作界面由哪幾部分組成？討論問(wèn)題：1、如何在網(wǎng)頁(yè)中插入對(duì)象？2、插入這些對(duì)象有何作用？3、怎樣對(duì)插入的對(duì)象進(jìn)行編輯？第3章創(chuàng)建網(wǎng)頁(yè)基本對(duì)象3.1文本的操作3.1.1插入文本3.1.2調(diào)整文本3.1.3插入特殊字符3.1.4插入文本列表3.1.5插入水平線3.1.6應(yīng)用舉例——在網(wǎng)頁(yè)中插入文本3.2插入和編輯圖像3.2.1插入圖像3.2.2編輯圖像3.2.3鼠標(biāo)經(jīng)過(guò)圖像3.2.4應(yīng)用舉例——在網(wǎng)頁(yè)中插入圖像3.3創(chuàng)建超級(jí)鏈接3.3.1超級(jí)鏈接的概念3.3.2超級(jí)鏈接的創(chuàng)建3.3.3應(yīng)用舉例——?jiǎng)?chuàng)建文本、圖像和電子郵件鏈接3.4上機(jī)及項(xiàng)目實(shí)訓(xùn)3.4.1制作“星牌服飾”網(wǎng)站3.4.2制作鼠標(biāo)經(jīng)過(guò)圖像3.5練習(xí)與提高本課小結(jié)掌握在網(wǎng)頁(yè)中插入對(duì)象的方法。掌握在網(wǎng)頁(yè)中編輯對(duì)象的方法。了解在網(wǎng)頁(yè)中創(chuàng)建超級(jí)鏈接的方法。思考題及作業(yè)（1）如何在頁(yè)面中插入圖像？（2）如何在頁(yè)面中創(chuàng)建一個(gè)錨記鏈接？（3）如何為自己的郵箱創(chuàng)建電子郵件鏈接？

課程：第4章課時(shí)內(nèi)容布局頁(yè)面授課時(shí)間學(xué)時(shí)數(shù)2教學(xué)目標(biāo)掌握插入和編輯的表格方法認(rèn)識(shí)布局視圖模式掌握布局單元格和布局表格的創(chuàng)建和編輯掌握框架的使用方法教學(xué)重點(diǎn)創(chuàng)建以及編輯表格和框架的方法教學(xué)難點(diǎn)設(shè)置表格及框架的屬性教學(xué)設(shè)計(jì)教學(xué)思路：首先，讓同學(xué)們先說(shuō)說(shuō)對(duì)插入的表格可以進(jìn)行哪些編輯操作。然后進(jìn)行系統(tǒng)地介紹在網(wǎng)頁(yè)中插入表格和創(chuàng)建框架的方法。最后學(xué)習(xí)對(duì)插入表格和創(chuàng)建的框架進(jìn)行編輯操作。2、教學(xué)方法：講課前可以先講一個(gè)與網(wǎng)頁(yè)有關(guān)的小故事或做一個(gè)小游戲，活躍下氣氛，帶動(dòng)同學(xué)們的積極性。3、教學(xué)手段：利用多媒體，對(duì)表格和框架的編輯方法進(jìn)行詳細(xì)講解。4、教學(xué)資料及要求：課前要求學(xué)生了解布局頁(yè)面常用到的對(duì)象有哪些。教學(xué)內(nèi)容知識(shí)回顧：上一課時(shí)講的在網(wǎng)頁(yè)中插入對(duì)象與編輯對(duì)象的方法？討論問(wèn)題：1、為什么要使用表格和框架布局頁(yè)面呢？2、這樣做對(duì)網(wǎng)頁(yè)的整體效果起什么作用？3、又如何在網(wǎng)頁(yè)中插入表格和創(chuàng)建對(duì)象？第4章布局頁(yè)面4.1使用表格布局頁(yè)面4.1.1插入表格4.1.2選擇表格元素4.1.3輸入頁(yè)面元素4.1.4設(shè)置表格屬性4.1.5添加/刪除行或列4.1.6單元格的合并及拆分4.1.7應(yīng)用舉例——?jiǎng)?chuàng)建細(xì)線表格4.2使用框架布局網(wǎng)頁(yè)4.2.1創(chuàng)建框架網(wǎng)頁(yè)4.2.2拆分框架4.2.3保存框架和框架集4.2.4刪除框架4.2.5設(shè)置框架集及框架的屬性4.2.6應(yīng)用舉例——制作網(wǎng)站后臺(tái)框架頁(yè)面4.3上機(jī)及項(xiàng)目實(shí)訓(xùn)4.3.1制作網(wǎng)站后臺(tái)管理頁(yè)面4.3.2制作“探險(xiǎn)游”網(wǎng)頁(yè)4.4練習(xí)與提高本課小結(jié)1、掌握布局頁(yè)面的方法。2、掌握對(duì)創(chuàng)建的表格和框架進(jìn)行屬性設(shè)置。思考題及作業(yè)（1）如何創(chuàng)建表格和框架？（2）表格和框架在頁(yè)面中有什么用？

第二部分Flash動(dòng)畫(huà)制作基礎(chǔ)課程：第8章課時(shí)內(nèi)容FlashCS6基礎(chǔ)授課時(shí)間學(xué)時(shí)數(shù)2教學(xué)目標(biāo)認(rèn)識(shí)Flash動(dòng)畫(huà)了解FlashCS6的工作界面掌握Flash文檔的創(chuàng)建和保存教學(xué)重點(diǎn)Flash動(dòng)畫(huà)的應(yīng)用和其文檔的基本操作教學(xué)難點(diǎn)認(rèn)識(shí)FlashCS6的工作界面教學(xué)設(shè)計(jì)1、教學(xué)思路：首先，先講Flash動(dòng)畫(huà)在網(wǎng)頁(yè)中起什么作用，能使網(wǎng)頁(yè)達(dá)到一個(gè)什么效果。然后進(jìn)行系統(tǒng)地介紹Flash動(dòng)畫(huà)的應(yīng)用和認(rèn)識(shí)FlashCS6工作界面。最后學(xué)習(xí)Flash文檔的基本操作方法。2、教學(xué)方法：讓同學(xué)們以小組的形式進(jìn)行討論Flash動(dòng)畫(huà)的應(yīng)用領(lǐng)域。3、教學(xué)手段：利用多媒體并結(jié)合網(wǎng)頁(yè)中插入的Flash動(dòng)畫(huà)進(jìn)行講解。4、教學(xué)資料及要求：課前要求學(xué)生預(yù)習(xí)本章內(nèi)容。教學(xué)內(nèi)容討論問(wèn)題：1、Flash動(dòng)畫(huà)具體是指什么？2、在網(wǎng)頁(yè)中起什么作用？第8章FlashCS6基礎(chǔ)8.1認(rèn)識(shí)Flash動(dòng)畫(huà)8.1.1Flash動(dòng)畫(huà)的原理及應(yīng)用領(lǐng)域8.1.2Flash動(dòng)畫(huà)在網(wǎng)頁(yè)方面的應(yīng)用8.1.3認(rèn)識(shí)FlashCS6工作界面8.1.4應(yīng)用舉例——設(shè)置文檔屬性8.2Flash文檔的基本操作8.2.1Flash文檔的創(chuàng)建8.2.2Flash文檔的保存8.2.3Flash文檔的打開(kāi)8.2.4應(yīng)用舉例——新建Flash廣告動(dòng)畫(huà)8.3上機(jī)及項(xiàng)目實(shí)訓(xùn)8.3.1制作“公司印章”Flash文檔8.3.2制作“個(gè)人名片”Flash文檔8.3.3制作“個(gè)人印章”Flash文檔8.4練習(xí)與提高本課小結(jié)1、了解Flash的應(yīng)用領(lǐng)域。2、認(rèn)識(shí)FlashCS6的工作界面。3、掌握Flash文檔的基本操作。思考題及作業(yè)（1）Flash主要應(yīng)用于哪些方面？（2）FlashCS6的工作界面由哪幾部分組成？（3）如何新建一個(gè)Flash動(dòng)畫(huà)？（4）打開(kāi)和關(guān)閉FlashCS6的方法分別有哪些？（5）如何預(yù)覽動(dòng)畫(huà)效果？

電子教案課程：第10章課時(shí)內(nèi)容元件和“庫(kù)”面板授課時(shí)間學(xué)時(shí)數(shù)1教學(xué)目標(biāo)掌握元件的創(chuàng)建方式認(rèn)識(shí)“庫(kù)”面板“庫(kù)”面板的使用與管理教學(xué)重點(diǎn)元件的創(chuàng)建方式和“庫(kù)”面板的使用教學(xué)難點(diǎn)元件的創(chuàng)建與使用教學(xué)設(shè)計(jì)1、教學(xué)思路：首先，讓同學(xué)們認(rèn)識(shí)元件，然后在系統(tǒng)地進(jìn)行介紹元件的創(chuàng)建、使用以及認(rèn)識(shí)“庫(kù)“面板，最后學(xué)習(xí)哭的管理和使用。2、教學(xué)方法：可以通過(guò)實(shí)例對(duì)不同的元件進(jìn)行操作使用。3、教學(xué)手段：結(jié)合實(shí)例進(jìn)行上機(jī)操作。4、教學(xué)資料及要求：課前要求學(xué)生預(yù)習(xí)下章內(nèi)容。教學(xué)內(nèi)容討論問(wèn)題：1、元件的含義是什么？2、如何進(jìn)行庫(kù)的管理？第10章元件和“庫(kù)”面板10.1元件的創(chuàng)建10.1.1元件的概念10.1.2圖形元件10.1.3按鈕元件10.1.4影片剪輯元件10.1.5應(yīng)用舉例——制作“短靴”動(dòng)畫(huà)10.2“庫(kù)”面板10.2.1認(rèn)識(shí)“庫(kù)”面板10.2.2庫(kù)的管理和使用10.2.3應(yīng)用舉例——清理未用項(xiàng)目10.3上機(jī)及項(xiàng)目實(shí)訓(xùn)10.3.1繪制毛筆10.3.2文字分離本課小結(jié)1、掌握元件的概念及創(chuàng)建元件2、了解“庫(kù)”面板的使用及管理思考題及作業(yè)（1）？（2）通過(guò)什么方式可以將圖形轉(zhuǎn)換為圖形元件？（3）如何將“庫(kù)”面板中的圖形文件拖到編輯區(qū)域中？課程：第11章課時(shí)內(nèi)容用時(shí)間軸創(chuàng)建動(dòng)畫(huà)授課時(shí)間學(xué)時(shí)數(shù)5教學(xué)目標(biāo)了解時(shí)間軸的組成幀和關(guān)鍵幀的創(chuàng)建及屬性設(shè)置方法了解創(chuàng)建動(dòng)畫(huà)的類(lèi)型和方法使用引導(dǎo)層和遮罩層創(chuàng)建動(dòng)畫(huà)教學(xué)重點(diǎn)時(shí)間軸與關(guān)鍵幀教學(xué)難點(diǎn)通過(guò)時(shí)間軸創(chuàng)建動(dòng)畫(huà)教學(xué)設(shè)計(jì)1、教學(xué)思路：首先，讓同學(xué)們先了解時(shí)間軸的組成部分。然后在系統(tǒng)地介紹在時(shí)間軸中插入幀和創(chuàng)建動(dòng)畫(huà)的方法。最后學(xué)習(xí)特殊圖層的應(yīng)用。2、教學(xué)方法：可先上同學(xué)們看一些通過(guò)時(shí)間軸創(chuàng)建的動(dòng)畫(huà)效果。3、教學(xué)手段：可采用比較典型的例子進(jìn)行上機(jī)操作講解。4、教學(xué)資料及要求：課前要求學(xué)生們對(duì)前面講過(guò)的知識(shí)動(dòng)手進(jìn)行操作。教學(xué)內(nèi)容知識(shí)回顧：上一課時(shí)講的元件和“庫(kù)“面板的使用？討論問(wèn)題：1、為什么本章的重點(diǎn)是時(shí)間軸的使用呢？2、為什么要用時(shí)間軸創(chuàng)建動(dòng)畫(huà)？第11章用時(shí)間軸創(chuàng)建動(dòng)畫(huà)11.1時(shí)間軸與關(guān)鍵幀11.1.1時(shí)間軸的組成11.1.2時(shí)間軸中的圖層11.1.3插入幀11.1.4應(yīng)用舉例——插入幀11.2創(chuàng)建動(dòng)畫(huà)11.2.1逐幀動(dòng)畫(huà)：人名書(shū)寫(xiě)11.2.2傳統(tǒng)運(yùn)動(dòng)動(dòng)畫(huà)：小球直線運(yùn)動(dòng)11.3特殊圖層的應(yīng)用11.3.1引導(dǎo)層：小球曲線運(yùn)動(dòng)11.3.2遮罩層：MTV字母遮罩層動(dòng)畫(huà)制作。本課小結(jié)1、掌握插入幀的方法。2、掌握創(chuàng)建逐幀動(dòng)畫(huà)的方法。3、了解特殊圖層的應(yīng)用思考題及作業(yè)（1）時(shí)間軸由哪幾部分組成？（2）根據(jù)動(dòng)畫(huà)樣式的不同，補(bǔ)間動(dòng)畫(huà)可以分為哪兩種類(lèi)型？（3）創(chuàng)建動(dòng)畫(huà)補(bǔ)間可以通過(guò)哪幾種方式？（4）建引導(dǎo)層的方法有哪幾種？課程：第12章課時(shí)內(nèi)容導(dǎo)入聲音和視頻授課時(shí)間學(xué)時(shí)數(shù)4教學(xué)目標(biāo)了解聲音的類(lèi)型和可以導(dǎo)入的視頻格式掌握聲音和視頻的導(dǎo)入方法了解聲音和音效的設(shè)置方法教學(xué)重點(diǎn)導(dǎo)入聲音和視頻教學(xué)難點(diǎn)處理聲音教學(xué)設(shè)計(jì)1、教學(xué)思路：首先，讓同學(xué)們說(shuō)說(shuō)導(dǎo)入聲音和視頻的方法。然后進(jìn)行系統(tǒng)地介紹對(duì)導(dǎo)入的聲音進(jìn)行處理的方法。最后學(xué)習(xí)導(dǎo)入視頻。2、教學(xué)方法：可以先放一些聲音或簡(jiǎn)短的視頻，這樣同學(xué)們可以很輕松的融入學(xué)習(xí)中。3、教學(xué)手段：利用多媒體并結(jié)合相關(guān)實(shí)例進(jìn)行教學(xué)。4、教學(xué)資料及要求：課前要求學(xué)生從網(wǎng)上下載不同格式的聲音和視頻。教學(xué)內(nèi)容知識(shí)回顧：上一課時(shí)講的使用時(shí)間軸創(chuàng)建動(dòng)畫(huà)？討論問(wèn)題：1、常見(jiàn)的聲音和視頻格式有哪些？2、Flash支持的聲音和視頻格式有哪些？