1、網頁設計與制作課程教案一、課程定位本課程是計算機應用技術專業的一門專業基礎課程，該課程的學習能夠提升他們對網頁制作的興趣，讓他們學習網頁制作的基本技能，為后繼課程打下基礎，同時擴展其就業面，為就業做好準備。本課程的目的和任務是讓學生學會Dreameaver CS6、Flash和Fireworks的使用方法，并能夠使用這3款軟件制作出美觀實用的網頁。二、課程總目標掌握網頁制作的基本方法和技能，掌握網站建設的流程，能夠運用所學知識建設常用的網頁和網站，同時能夠美化網頁，設計人性化、藝術化的網站靜態頁面部分。（1） 知識目標：1.熟悉網頁制作的基本元素；2.掌握Dreamweaver CS6軟件的基

2、本操作方法；3.掌握在網頁中插入文字、圖片、聲音、flash等的方法；4.掌握常見的網頁布局方法，學會使用CSS美化網頁；5.掌握在網頁中使用表單和制作網頁特效的方法；6.掌握簡單圖形圖像的處理，能夠制作符合網頁主題的圖片和簡單動畫并巧妙地和網頁中內容搭配起來。7.掌握建設一個功能相對完善的網站的方法并能制作常用的網站的靜態頁面部分。（2） 職業能力培養目標1. 能夠根據網站開發需求，去尋找網頁設計和網站開發所需要的文字、圖片、動畫、聲音、視頻等素材并作美化處理；2能夠制作出符合主題色彩的網頁，網頁要求美化、被絕大多數瀏覽者接受和喜愛；3.能夠設計企業網站、政府門戶網站、學校網站等常見網站的基

3、本靜態頁面。（3） 素質目標1.具有勤奮學習的態度，嚴謹求實、創新的學習精神； 2.具有良好的心理素質和職業道德素質；3.具有高度責任心和良好的團隊合作精神；4.具有運用理論知識發現問題、分析問題并解決問題的能力，同時能夠不斷學習，不斷創新，讓自己的設計越來越完善，有止于至善的精神。（4） 職業技能證書考核要求：可以根據自身情況考取“全國計算機信息高新技術資格證”，“網頁設計制作員”，“網頁設計師”等職業技能證書。三、重點、難點章節及內容1.重點章節：1.2 網頁、網站相關術語簡介1.6 網站建設的基本流程2.3 Dreamweaver CS6的工作環境3.2 創建本地站點3.4 使用站點3.

4、5 網頁設計中的規范4.1 網頁文件的基本操作4.3 插入文本4.4 插入水平線4.5 插入其他基本元素4.6 創建列表5.1 超級鏈接概述5.2 創建超級鏈接5.3 使用dw制作各種超級鏈接6.1 插入圖像6.2 圖像的HTML標簽6.3 插入圖像對象6.4 創建圖像對象7.1 表格概述7.2 使用dwcs6創建表格7.3 表格的基本操作7.4在表格中添加內容8.1在網頁中插入Div8.2 使用AP Div排版8.3 操縱AP Div8.4 設置AP Div的屬性8.5 AP Div與表格的相互轉換8.6 AP Div的行為9.2 DWcs6k中框架的基本事件9.3 浮動框架10.2 創建表

5、單10.3 插入表單對象11.1 JavaScript11.2 行為12.1 插入媒體的使用12.2 音頻12.3 視頻文件13.1 CSS簡介13.2 CSS的結構和規則13.3 CSS樣式面版13.4 CSS樣式的建立14.1 使用庫項目14.2 模板15.1 測試網站15.2 發布網站15.3 管理站點和高級設置2.難點章節：3.2 創建本地站點3.4 使用站點4.4 插入水平線4.5 插入其他基本元素4.6 創建列表5.2 創建超級鏈接5.3 使用DW制作各種超級鏈接6.2 圖像的HTML標簽7.3 表格的基本操作7.4在表格中添加內容8.1在網頁中插入Div8.2 使用AP Div排

6、版8.3 操縱AP Div8.4 設置AP Div的屬性8.5 AP Div與表格的相互轉換8.6 AP Div的行為9.2 DWcs6中框架的基本事件9.3 浮動框架10.3 插入表單對象11.1 JavaScript11.2 行為13.3 CSS樣式面版13.4 CSS樣式的建立14.1 使用庫項目14.2 模板15.1 測試網站15.2 發布網站15.3 管理站點和高級設置四、實踐環節和內容總體設計（一）主要環節安排對于本課程的重點知識，主要采用操作演示、案例說明和任務驅動法來展開教學。本課程采用理實一體化教學模式，每一節課都要求學生將理論知識運用到實際操作中，用理論指導實踐，并逐步總結

7、經驗，掌握專業技能。在實踐的過程中鍛煉學生思考問題、分析問題、解決問題的能力，達到掌握網頁制作和設計的技能的目的。對于課程的難點知識，主要用實際操作和案例法分析，將操作的注意事項給學生做演示和分解說明，這樣化解難點，讓學生通過操作、思考和總結，盡快掌握相應知識。（二）內容總體設計1課堂教學中的實踐環節本課程全部為理實一體化教學模式，概念、軟件界面、操作步驟都通過運用知識對實際問題的解決方面來展開教學。概念采用理解后再記憶的模式，或者采用邊操作邊理解，這樣達到更加深刻的記憶和更加透徹的理解。每一堂課都針對基本知識點進行操作和練習，同時就這些知識點如何應用的自己設計的網頁中布置任務，讓學生主動運用

8、知識，培養學生創新能力、主動學習能力和思考能力。2教學見習通過本門課程的學習，需要同學們制定出相應的實習計劃，并記錄相關的實訓內容，注重在實習階段對所學知識的鞏固和提高，以達到根據理論知識，指導日后工作實踐的目的。具體實習內容報告如下：第一、收集網站所需信息。第二、運用DWCS6所學內容進行網頁外觀整體設計。第三、對所完成的網頁頁面進行合理的切片處理，并按照網頁設計效果完成網站整體框架的構建，。第四、搭建網站所需數據庫。第五、網站的虛擬建設和初步完善。五、教學進程計劃表（含理論教學和實踐教學統籌）時間安排（周次）章節（序號）教 學 內 容學時數理論實踐實驗總學時1第1章網頁制作基礎知識2222

9、第2章認識Dreamweaver cs62243、第3章站點設計2244國慶放假5第4章制作簡單網頁2246第5章使用Dreamweaver c6制作各種超級鏈接2247第6章網頁中使用圖像2248第7章表格的使用2249第8章在網頁中插入Div 并使用AP Div排版22410第8章設置AP Div的屬性AP Div與表格的相互轉換AP Div的行為22411第9章創建和使用框架22412第10章制作表單頁面22413第11章JavaScript網頁動態特效22414第12章網頁中使用多媒體22415第13章CSS樣式表22416第14章庫和模板22417第15章站點的維護和上傳22418考

10、核制作具體網站044六、教學資料收集和配置設計1、針對本課程，在教學資料的收集中，我主要借助了教材、參考書和網絡教學資源；2、通過網上名師的視頻講解，分析重難點講解的技巧，達到更好的教學效果；3、借助實際操作演示、任務驅動法、案例法讓學生更加深刻認知到知識點的使用方法和技巧；4、借助實訓提升學生的學習興趣，讓學生練習如何使用知識，如何操作軟件，并且循序漸進地使用知識美化、改善網頁，到達牢固掌握知識的目的。七、可利用的教學方法（落實到章節）時間安排（周次）章節（序號）教 學 內 容教學方法1第1章網頁制作基礎知識講授法、討論法、直觀演示法2第2章認識Dreamweaver cs6講授法、直觀演示

11、法、任務驅動法3第3章站點設計講授法、直觀演示法、任務驅動法4國慶放假5第4章制作簡單網頁講授法、直觀演示法、任務驅動法6第5章使用Dreamweaver c6制作各種超級鏈接講授法、直觀演示法、任務驅動法7第6章網頁中使用圖像講授法、直觀演示法、任務驅動法8第7章表格的使用講授法、討論法、直觀演示法、任務驅動法9第8章在網頁中插入Div 并使用AP Div排版講授法、直觀演示法、任務驅動法10第8章設置AP Div的屬性AP Div與表格的相互轉換AP Div的行為講授法、直觀演示法、任務驅動法11第9章創建和使用框架講授法、直觀演示法、任務驅動法12第10章制作表單頁面講授法、討論法、直觀

12、演示法、任務驅動法13第11章JavaScript網頁動態特效講授法、討論法、直觀演示法、任務驅動法14第12章網頁中使用多媒體講授法、討論法、直觀演示法、任務驅動法15第13章CSS樣式表講授法、直觀演示法、任務驅動法16第14章庫和模板講授法、直觀演示法、任務驅動法17第15章站點的維護和上傳講授法、直觀演示法、任務驅動法18考核制作具體網站八、作業布置與批改設計1.作業內容要求：作業的主要內容為上機操作完成規定的實訓項目，書面作業為教材上的練習題和模擬試題。2.作業形式與題量：課堂講授完畢后將實訓教材課后習題選擇一部分作為課堂練習或課后練習，并布置上機操作內容。以達到測試學生課堂學習情況和課后對所學知識的復習鞏固和加以實際操作應用的目的。3、作業批改設計對于書面作業，可抽調適量的作業進行評閱，對發現的主要和傾象性的問題，由教師在課堂上進行集體評講；對于上機操作的實作題，可由學生上傳后評閱，并對發現的重點、難點問題進行集中講評。九、采用的教材和學生選讀的參考書課堂采用的教材： 網頁設計與制作 清華大學出版社 趙旭霞 劉素轉 王曉娜 主編 課堂采用的參考書 Dreamweaver網頁設計標準教材.顧群業,王曉峰 中國電力出版社 網頁設計與制作 作者是詹青龍、郭永燦 清華大學出版社網頁設計與制作 孫振業主編，高等教