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

1、實(shí)用標(biāo)準(zhǔn)文案網(wǎng)頁(yè)設(shè)計(jì)與制作課程教案一、課程定位本課程是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的一門專業(yè)基礎(chǔ)課程，該課程的學(xué)習(xí)能夠提 開他們對(duì)網(wǎng)頁(yè)制作的興趣，讓他們學(xué)習(xí)網(wǎng)頁(yè)制作的基本技能，為后繼課程打下 基礎(chǔ)，同時(shí)擴(kuò)展其就業(yè)面，為就業(yè)做好準(zhǔn)備。本課程的目的和任務(wù)是讓學(xué)生學(xué)會(huì) Dreameaver CSa Flash和Fireworks的使用方法，并能夠使用這3款軟件制作出美觀實(shí)用的網(wǎng)頁(yè)。二、課程總目標(biāo)掌握網(wǎng)頁(yè)制作的基本方法和技能，掌握網(wǎng)站建設(shè)的流程，能夠運(yùn)用所學(xué)知 識(shí)建設(shè)常用的網(wǎng)頁(yè)和網(wǎng)站，同時(shí)能夠美化網(wǎng)頁(yè)，設(shè)計(jì)人性化、藝術(shù)化的網(wǎng)站靜 態(tài)頁(yè)面部分。（一）知識(shí)目標(biāo)：1 .熟悉網(wǎng)頁(yè)制作的基本元素；2 .掌握Dreamwe

2、aver CS6軟件的基本操作方法；3 .掌握在網(wǎng)頁(yè)中插入文字、圖片、聲音、flash等的方法；4 .掌握常見的網(wǎng)頁(yè)布局方法，學(xué)會(huì)使用 CSSI!化網(wǎng)頁(yè)；5 .掌握在網(wǎng)頁(yè)中使用表單和制作網(wǎng)頁(yè)特效的方法；6 .掌握簡(jiǎn)單圖形圖像的處理，能夠制作符合網(wǎng)頁(yè)主題的圖片和簡(jiǎn)單動(dòng)畫 并巧妙地和網(wǎng)頁(yè)中內(nèi)容搭配起來。7 .掌握建設(shè)一個(gè)功能相對(duì)完善的網(wǎng)站的方法并能制作常用的網(wǎng)站的靜 態(tài)頁(yè)面部分。（二）職業(yè)能力培養(yǎng)目標(biāo)1 .能夠根據(jù)網(wǎng)站開發(fā)需求，去尋找網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站開發(fā)所需要的文字、 圖片、動(dòng)畫、聲音、視頻等素材并作美化處理；2 .能夠制作出符合主題色彩的網(wǎng)頁(yè)，網(wǎng)頁(yè)要求美化、被絕大多數(shù)瀏覽 者接受和喜愛；3 .能夠

3、設(shè)計(jì)企業(yè)網(wǎng)站、政府門戶網(wǎng)站、學(xué)校網(wǎng)站等常見網(wǎng)站的基本靜態(tài) 頁(yè)面。（三）素質(zhì)目標(biāo)1 .具有勤奮學(xué)習(xí)的態(tài)度，嚴(yán)謹(jǐn)求實(shí)、創(chuàng)新的學(xué)習(xí)精神；2 .具有良好的心理素質(zhì)和職業(yè)道德素質(zhì)；3 .具有高度責(zé)任心和良好的團(tuán)隊(duì)合作精神；4 .具有運(yùn)用理論知識(shí)發(fā)現(xiàn)問題、分析問題并解決問題的能力，同時(shí)能夠 不斷學(xué)習(xí)，不斷創(chuàng)新，讓自己的設(shè)計(jì)越來越完善，有止于至善的精神。（四）職業(yè)技能證書考核要求：可以根據(jù)自身情況考取“全國(guó)計(jì)算機(jī)信息高新技術(shù)資格證”，“網(wǎng)頁(yè) 設(shè)計(jì)制作員”，“網(wǎng)頁(yè)設(shè)計(jì)師”等職業(yè)技能證書。三、重點(diǎn)、難點(diǎn)章節(jié)及內(nèi)容1 .重點(diǎn)章節(jié)：1.2 網(wǎng)頁(yè)、網(wǎng)站相關(guān)術(shù)語(yǔ)簡(jiǎn)介1.6 網(wǎng)站建設(shè)的基本流程2.3 Dreamweave

4、r CS6 的工作環(huán)境3.2 創(chuàng)建本地站點(diǎn)3.4 使用站點(diǎn)3.5 網(wǎng)頁(yè)設(shè)計(jì)中的規(guī)范4.1 網(wǎng)頁(yè)文件的基本操作4.3 插入文本4.4 插入水平線4.5 插入其他基本元素4.6 創(chuàng)建列表5.1 超級(jí)鏈接概述5.2 創(chuàng)建超級(jí)鏈接5.3使用dw制作各種超級(jí)鏈接文檔實(shí)用標(biāo)準(zhǔn)文案6.1 插入圖像6.2 圖像的HTM標(biāo)簽6.3 插入圖像對(duì)象6.4 創(chuàng)建圖像對(duì)象7.1 表格概述7.2 使用dwcs6創(chuàng)建表格7.3 表格的基本操作7.4 在表格中添加內(nèi)容8.1 在網(wǎng)頁(yè)中插入Div8.2 使用AP Div排版8.3 操縱 AP Div8.4 設(shè)置AP Div的屬性8.5 AP Div 與表格的相互轉(zhuǎn)換8.6 AP

5、 Div 的行為9.2 DWcs6k中框架的基本事件9.3 浮動(dòng)框架10.2 創(chuàng)建表單10.3 插入表單對(duì)象11.1 JavaScript11.2 行為12.1 插入媒體的使用12.2 音頻12.3 視頻文件13.1 CSS 簡(jiǎn)介13.2 CSS的結(jié)構(gòu)和規(guī)則13.4 CSS樣式的建立14.1 使用庫(kù)項(xiàng)目14.2 模板15.1 測(cè)試網(wǎng)站15.2 發(fā)布網(wǎng)站15.3 管理站點(diǎn)和高級(jí)設(shè)置1.2 點(diǎn)章節(jié)：1.3 創(chuàng)建本地站點(diǎn)3.4 使用站點(diǎn)3.5 插入水平線3.6 插入其他基本元素3.7 創(chuàng)建列表5.2 創(chuàng)建超級(jí)鏈接5.3 使用DVtiJ作各種超級(jí)鏈接6.2 圖像的HTM標(biāo)簽6.3 表格的基本操作6.4

6、 在表格中添加內(nèi)容8.1 在網(wǎng)頁(yè)中插入Div8.2 使用AP Div排版8.3 操縱 AP Div8.4 設(shè)置AP Div的屬性8.5 AP Div 與表格的相互轉(zhuǎn)換8.6 AP Div 的行為9.2 DWcs6中框架的基本事件9.3 浮動(dòng)框架10.3插入表單對(duì)象文檔實(shí)用標(biāo)準(zhǔn)文案11.1 JavaScript11.2 行為11.3 CSS樣式面版11.4 CSS樣式的建立14.1 使用庫(kù)項(xiàng)目14.2 模板15.1 測(cè)試網(wǎng)站15.2 發(fā)布網(wǎng)站15.3 管理站點(diǎn)和高級(jí)設(shè)置四、實(shí)踐環(huán)節(jié)和內(nèi)容總體設(shè)計(jì)（一）主要環(huán)節(jié)安排對(duì)于本課程的重點(diǎn)知識(shí)，主要采用操作演示、案例說明和任務(wù)驅(qū)動(dòng)法來展 開教學(xué)。本課程采用

7、理實(shí)一體化教學(xué)模式，每一節(jié)課都要求學(xué)生將理論知識(shí)運(yùn) 用到實(shí)際操作中，用理論指導(dǎo)實(shí)踐，并逐步總結(jié)經(jīng)驗(yàn)，掌握專業(yè)技能。在實(shí)踐 的過程中鍛煉學(xué)生思考問題、分析問題、解決問題的能力，達(dá)到掌握網(wǎng)頁(yè)制作 和設(shè)計(jì)的技能的目的。對(duì)于課程的難點(diǎn)知識(shí)，主要用實(shí)際操作和案例法分析，將操作的注意事項(xiàng) 給學(xué)生做演示和分解說明，這樣化解難點(diǎn)，讓學(xué)生通過操作、思考和總結(jié)，盡 快掌握相應(yīng)知識(shí)。（二）內(nèi)容總體設(shè)計(jì)1 .課堂教學(xué)中的實(shí)踐環(huán)節(jié)本課程全部為理實(shí)一體化教學(xué)模式，概念、軟件界面、操作步驟都通過運(yùn) 用知識(shí)對(duì)實(shí)際問題的解決方面來展開教學(xué)。概念采用理解后再記憶的模式，或 者采用邊操作邊理解，這樣達(dá)到更加深刻的記憶和更加透徹的理

8、解。每一堂課 都針對(duì)基本知識(shí)點(diǎn)進(jìn)行操作和練習(xí)，同時(shí)就這些知識(shí)點(diǎn)如何應(yīng)用的自己設(shè)計(jì)的 網(wǎng)頁(yè)中布置任務(wù)，讓學(xué)生主動(dòng)運(yùn)用知識(shí)，培養(yǎng)學(xué)生創(chuàng)新能力、主動(dòng)學(xué)習(xí)能力和 思考能力。2 .教學(xué)見習(xí)通過本門課程的學(xué)習(xí)，需要同學(xué)們制定出相應(yīng)的實(shí)習(xí)計(jì)劃，并記錄相關(guān)的 實(shí)訓(xùn)內(nèi)容，注重在實(shí)習(xí)階段對(duì)所學(xué)知識(shí)的鞏固和提高，以達(dá)到根據(jù)理論知識(shí)， 指導(dǎo)日后工作實(shí)踐的目的。具體實(shí)習(xí)內(nèi)容報(bào)告如下：第一、收集網(wǎng)站所需信息。第二、運(yùn)用DWCS6學(xué)內(nèi)容進(jìn)行網(wǎng)頁(yè)外觀整體設(shè)計(jì)。第三、對(duì)所完成的網(wǎng)頁(yè)頁(yè)面進(jìn)行合理的切片處理，并按照網(wǎng)頁(yè)設(shè)計(jì)效果完成網(wǎng) 站整體框架的構(gòu)建，。第四、搭建網(wǎng)站所需數(shù)據(jù)庫(kù)。第五、網(wǎng)站的虛擬建設(shè)和初步完善。五、教學(xué)進(jìn)程計(jì)劃表（

9、含理論教學(xué)和實(shí)踐教學(xué)統(tǒng)籌）時(shí)間安排 （周次）章1 (>#)教學(xué)內(nèi)容學(xué)時(shí)數(shù)理論實(shí)踐 實(shí)驗(yàn)總學(xué) 時(shí)1第1章網(wǎng)貝制作基礎(chǔ)知識(shí)2222第2章認(rèn)識(shí) Dreamweaver cs62243、第3章站點(diǎn)設(shè)計(jì)2244國(guó)慶放假5弟4早制作簡(jiǎn)單網(wǎng)貝2246弟5早使用 Dreamweaverc6制作各種超級(jí)鏈 接2247弟6早網(wǎng)貝中使用圖像2248第7章表格的使用2249第8章在網(wǎng)貝中插入Div并使用AP Div排版22410第8章設(shè)置AP Div的屬性 AP Div與表格的相 互轉(zhuǎn)換 AP Div的行為22411第9章創(chuàng)建和使用框架22412第10章制作表單貝聞22413第11章JavaScript 網(wǎng)貝動(dòng)

10、 態(tài)特效22414第12章網(wǎng)貝中使用多媒體22415第13章csS羊式表22416第14章庫(kù)和模板22417第15章站點(diǎn)的維護(hù)和上傳22418考核制作具體網(wǎng)站044六、教學(xué)資料收集和配置設(shè)計(jì)1、針對(duì)本課程，在教學(xué)資料的收集中，我主要借助了教材、參考書和網(wǎng) 絡(luò)教學(xué)資源；2、通過網(wǎng)上名師的視頻講解，分析重難點(diǎn)講解的技巧，達(dá)到更好的教學(xué) 效果；3、借助實(shí)際操作演示、任務(wù)驅(qū)動(dòng)法、案例法讓學(xué)生更加深刻認(rèn)知到知識(shí) 點(diǎn)的使用方法和技巧；4、借助實(shí)訓(xùn)提升學(xué)生的學(xué)習(xí)興趣，讓學(xué)生練習(xí)如何使用知識(shí)，如何操作軟件，并且循序漸進(jìn)地使用知識(shí)美化、改善網(wǎng)頁(yè)，到達(dá)牢固掌握知識(shí)的目的 七、可利用的教學(xué)方法（落實(shí)到章節(jié)）時(shí)間安排

11、 （周次）章1 (>#)教學(xué)內(nèi)容教學(xué)方法1第1章網(wǎng)貝制作基礎(chǔ)知識(shí)講授法、討論法、直觀 演示法2第2章認(rèn)識(shí) Dreamweaver cs6講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法3第3章站點(diǎn)設(shè)計(jì)講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法4國(guó)慶放假5弟4早制作簡(jiǎn)單網(wǎng)頁(yè)講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法6弟5早使用 Dreamweaver c6 制作 各種超級(jí)鏈接講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法7弟6早網(wǎng)頁(yè)中使用圖像講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法8第7章表格的使用講授法、討論法、直觀 演示法、任務(wù)驅(qū)動(dòng)法9第8章在網(wǎng)貝中插入Div并使用AP Div排版講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法10第8章設(shè)置AP Div的屬

12、性AP Div與表格的相互轉(zhuǎn)換AP Div的行為講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法11第9章創(chuàng)建和使用框架講授法、直觀演不法、 任務(wù)驅(qū)動(dòng)法12第10章制作表單貝聞講授法、討論法、直觀 演示法、任務(wù)驅(qū)動(dòng)法13第11章JavaScript網(wǎng)頁(yè)動(dòng)態(tài)特效講授法、討論法、直觀 演示法、任務(wù)驅(qū)動(dòng)法14第12章網(wǎng)貝中使用多媒體講授法、討論法、直觀 演示法、任務(wù)驅(qū)動(dòng)法15第13章CSS羊式表講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法16弟14早庫(kù)和模板講授法、直觀演示法、 任務(wù)驅(qū)動(dòng)法17第15章站點(diǎn)的維護(hù)和上傳講授法、宜觀演示法、 任務(wù)驅(qū)動(dòng)法18考核制作具體網(wǎng)站八、作業(yè)布置與批改設(shè)計(jì)1 .作業(yè)內(nèi)容要求：作業(yè)的主要內(nèi)容為上

13、機(jī)操作完成規(guī)定的實(shí)訓(xùn)項(xiàng)目，書面 作業(yè)為教材上的練習(xí)題和模擬試題。2 .作業(yè)形式與題量：課堂講授完畢后將實(shí)訓(xùn)教材課后習(xí)題選擇一部分作為 課堂練習(xí)或課后練習(xí)，并布置上機(jī)操作內(nèi)容。以達(dá)到測(cè)試學(xué)生課堂學(xué)習(xí)情況和 課后對(duì)所學(xué)知識(shí)的復(fù)習(xí)鞏固和加以實(shí)際操作應(yīng)用的目的。3、作業(yè)批改設(shè)計(jì)對(duì)于書面作業(yè)，可抽調(diào)適量的作業(yè)進(jìn)行評(píng)閱，對(duì)發(fā)現(xiàn)的主要和傾象性的問 題，由教師在課堂上進(jìn)行集體評(píng)講；對(duì)于上機(jī)操作的實(shí)作題，可由學(xué)生上傳后 評(píng)閱，并對(duì)發(fā)現(xiàn)的重點(diǎn)、難點(diǎn)問題進(jìn)行集中講評(píng)。九、采用的教材和學(xué)生選讀的參考書課堂采用的教材：網(wǎng)頁(yè)設(shè)計(jì)與制作清華大學(xué)出版社 趙旭霞 劉素轉(zhuǎn) 王曉娜 主編課堂采用的參考書Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)教材.顧群業(yè)，王曉峰 中國(guó)電力出版社網(wǎng)頁(yè)設(shè)計(jì)與制作作者是詹青龍、郭永燦 清華大學(xué)出版社網(wǎng)頁(yè)設(shè)計(jì)與制作 孫振業(yè)主