第一篇：《Dreamweaver中網頁布局的方法》教學設計
《Dreamweaver中網頁布局的方法》教學設計
授課班級:高一（3）授課教師:曹雪麗 授課時間：2004.5.12
教材分析: 1．教學目標
教學目標既是教學的出發點和歸宿又是師生雙邊活動的中介，因此，我參照《高中新課程標準》和高中學生現有的知識水平和認識特點確定了以下三個目標： A：知識目標
（1）、讓學生認識到網頁布局對整個網頁元素的組織編排的重要性。（2）、讓學生掌握在Dreamweaver中實現網頁布局的基本方法。
B：能力目標：讓學生能動手完成一個簡單的網頁布局的設計。C：情感目標：
（1）培養學生嚴謹求實的工作態度以及感受美、評價美的藝術情操。（2）培養學生在進行自主學習的過程中勇于克服困難，體驗到成功后的快樂。
2．教學重點、難點、關鍵 重點：插入表中表 難點、關鍵：表格的屬性設置 學情分析：
本節課的內容面向的對象是高中二年級的學生，對于學習這部分內容他們有三大優勢：第一，除信息技術課外許多課都在網絡課室上。因此，他們對網絡很熟悉且很熱愛，有一定的網絡知識。第二，他們有WORD部分關于表格和簡單的網頁制作基礎。第三，一部分同學有一些Dreamweaver的基礎，可在學生中起積極的促進作用。設計理念：
本節課的設計理念是以誘思探究學科教學論為理論依據，以充分發揮學生的主體地位為出發點，以培養學生自主學習能力全面提高學生素質為目的。是一節“誘思探究”理論的探索課。為此，在課前教師為學生準備了網絡布局學習資源網站，學生自己也已經以小組為單位確立了要本組要建立的網站的主題。整節課的內容安排是以從學生“動手”中發現問題，又在學生的“動手”中解決問題為主脈展開的。同時又通過評價環節中學生的之間的互評、點評將本節推向高潮，達到突出重點，攻破難點的目的。學習目標分析：
借助以前積累的知識、經驗及學習資源網自主探索，小組協作進而歸納、研究出網頁布局的內在規律性。教學策略的選擇與設計 1．教學方法：（1）誘思導學法（2）任務驅動—體驗探究法
（3）分層教學法（4）網絡探究教學法（5）激勵教學法 2．學法指導：形象探究法、經驗探究法、體驗探究法、協作式學習法。3．資源的設計與選擇： 結合本節內容設計了一個學習資源網站、傳奇電子教室系統、Dreamweaver網頁編輯軟件等。教學過程設計：
教學設計過程及設計思想 教學環節 教師活動 學生活動 設計思想 時間 新 課 的 引 入 ⌒ 教 師 監 控 ︶
1，相鄰兩同學為一組分別在瀏覽器中打開兩個不同的網頁作品相互欣賞評價，同時準備回答：
問題1：這兩個網頁有什么不同？你認為哪個更好一些？為什么？ 2，在Dreamweaver中打開該網頁并逐一刪除頁面元素同時繼續提問： 留在頁面上的是什么？ 1，回答問題1 帶著問題2觀察老師的操作
2，回憶Word中表格的插入方法及技巧
我以“誘思探究導學法”為指導思想,主要體現“誘”和“導”兩個環節。首先是“誘疑”使學生“生疑”；然后要“導向”，比如這里教師的操作：在Dreamweaver中刪除頁中的頁面元素后出現的表格，讓學生的思維沿著正確方向發展，最終達到“釋疑”的目的。2 分 鐘
點評：“誘思探究導學法”一句話，誘發思維動機，導正思維航向。這是突現教師基本功的地方，要“誘”得巧，“導”得妙。
新
課
學習
新
課
學習
布置 任務 ⌒ 教 師 監 控 ︶
[任務1]能根據資源網的指導學會表中表的使用，并完成本節的例題的表格制作。（必做題）
[任務2]能在布局的基礎上插入圖片及文字，完成一個如例題的簡單網頁制作。（提高題）
[任務3]能通過屬性的設計美化網頁。（先做題）1，學生可根據自己的具體情況選擇合適的任務。2，各組長明確任務。
在任務設計時我注意到這樣兩個因素；一是：為了一切學生，在設置任務時要充分考慮到學生的個別差異。體現分層教學的重要性。二是：以探索問題來引動和維持學習者學習的興趣和動機。2 分 鐘 學 法 指 導 ⌒ 教 師 監 控 ︶
指導學生帶著“任務”中的問題，利用教師準備的學習資源網自主學習，探索交流,小組互助，“助教”指導,量力而行完成操作任務。1，明確學習資源的使用方法，采取各種方法完成任務
利用教學資源自主學習及優生做好“助教”的角色互幫互學，既能激發他們的學習積極性，給他們一個鍛煉成長的機會，又能使更多的學生得到幫助，有利于全面提高學生動手動腦的能力，體現“因材施教”。1 分 鐘
點評：這兩部分的目的在于
一、體現分層教學的重要性。
二、培養學生養成由簡到繁、由易到難、循序漸進地解決問題的好習慣，同時學生之間的以教促教，以教幫教，以教帶教的方法有利于學生的全面發展。師
生 互
動
1，尋找學生在完成任務中會遇到第一個問題：“表格線互擾問題”并及時以該問題為切入點將學生的思維引入到本節的重點內容--表中表的使用。2，引導學生發現例子中的新問題—各部分表格線的差異，將本節的內容推向另一個熱點。
1，學生掌握表中表的使用方法
2，完成任務
3，注意到表格屬性的功能。
我是這樣設計本部分內容將重點放在以下兩個方面：
第一、在本節課師生以“任務”為主線，在學生不斷地發現問題，教師及時地鼓勵準確地導向，調控學生主動地探究，利用各種方法例如：教師搭建的網上學習資源，平時建立的小組協作關系等去想辦法解決問題。25 分鐘 師
生 互
動
3，評價小結是本節課的一個高潮部分。此時教師重點由上面技術點的引導轉到學生心理素質及與人交往能力的導向上。這一點其實比單純的學會上面的技術更為重要。在學生的自評中引導學生客觀評價自己。不能過分謙虛而失去在同學們面前表現自己才干的機會又不能過分張揚引起同學們的反感影響自己的形象。
4，由學生推選代表主持評價以調動學生積極參與評價的積極性 第二、充分利用評價方式對學生的激勵作用一改過去由教師為權威做法。此時，教師把主動權交給學生，使他們更具參與意識引發學習的主動性，學會正確地、善意地、藝術地評價他人和自己。從中學到做人的道理。12 分
鐘
點評：讓學生帶著真實的任務學習，這是任務驅動的精髓。這一部分是本節的重要內容，也是教學設計的一個難點。是對教師綜合運用“任務驅動—體驗探究”；“分層教學”“表揚激勵”等教學方法能力、如何引導學生選擇確實可行的學習方法能力的考驗。同時，通過評價的過程，潛移默化地鞏固知識，提高解決問題、評判是否的能力。知識遷移 學生活動
[問題1]用表格布局有什么優缺點，還有好方法嗎？ [問題2]在網絡資源中是否有其它的方法呢？ 采用小組形式討論
這里的想法主要是培養學生學會反思。3分鐘
點評：為學有余力的學生創造繼續發展的廣闊天空，激發他們的興趣，培養他們的創新精神。
課后反思： 成功的地方：
（1）課題引入時以誘發學生的思維動機，導正思維航向為目的，為學生的自主學習打下基礎。
（2）學習資源網站、小組互助、助教幫忙等形式為學生的自主學習創造了條件對培養學生養成由簡到繁、由易到難、循序漸 進地解決問題的好習慣起到積極的促進作用。
（3）評價方式的改革可達到引導學生客觀評價自己不能過分謙虛而失去在同學們面前表現自己才干的機會又不能過分張揚引起同學們的反感影響自己的形象。在互評、點評中要引導學生正確看待別人對自己的評價學會寬以等人；學會巧妙地運用語言藝術對存在問題的同學提出批評。同時通過點評，互評各自的作品，鞏固本節的知識點，達到強調重點，攻破難點的目的。
存在問題的地方：評價方式仍需大膽地放手，讓評價的形式更加多樣化，民主化。可充分發揮學生的主動作用讓他們去設計評價手段、評價量表等，這對于主體作用的體現及學生的創造性思維的發展都會產生積極的影響。
網絡
本節小結：由小組總結提交 結束 教師活動：
1． 分組欣賞網頁作品。
2． 教師操作演示在網頁中刪除元素從而引入表格布局的方法。設計思想
通過教師的誘和導達到誘發思維動機，導正思維航向的目的。教師監控： 1。布置學習任務。
2．對學生進行學法指導。使用學習資源、小組互助、助教幫忙。
設計思想
1.創造開放式的教學環境，學生為主體，體驗為紅線，鼓勵他們積極動腦、動手完成任務。2.教師的適時演示體現誘思探究法的思想宗詣。3.利用小組互助以教促教，以教幫教，以教帶教的方法有利于學生的全面發展。設計思想
通過評價的過程正確地、善意地、藝術地評價他人和自己。教會學生學會做人的道理。網絡
教師監控：小組互評及個案點評相結合強調難點，深化主題 開始
學生利用學習資源網站自主學習、探索交流、找出難點、小組互助，完成任務，深化主題。
教師尋找典型案例1表格線的互擾問題引出本節的重點表中表。典型案例2表格線的粗細問題引出難點屬性問題
教師：提出問題1及問題2 設計思想 培養學
（二）教學過程流程圖
第二篇：《Dreamweaver中網頁布局的方法》教學設計
資料
《Dreamweaver中網頁布局的方法》教學設計
授課班級:高一（3）授課教師:曹雪麗 授課時間：2004.5.12
教材分析: 1．教學目標
教學目標既是教學的出發點和歸宿又是師生雙邊活動的中介，因此，我參照《高中新課程標準》和高中學生現有的知識水平和認識特點確定了以下三個目標： A：知識目標
（1）、讓學生認識到網頁布局對整個網頁元素的組織編排的重要性。（2）、讓學生掌握在Dreamweaver中實現網頁布局的基本方法。
B：能力目標：讓學生能動手完成一個簡單的網頁布局的設計。C：情感目標：
（1）培養學生嚴謹求實的工作態度以及感受美、評價美的藝術情操。（2）培養學生在進行自主學習的過程中勇于克服困難，體驗到成功后的快樂。
2．教學重點、難點、關鍵 重點：插入表中表 難點、關鍵：表格的屬性設置
資料
學情分析：
本節課的內容面向的對象是高中二年級的學生，對于學習這部分內容他們有三大優勢：第一，除信息技術課外許多課都在網絡課室上。因此，他們對網絡很熟悉且很熱愛，有一定的網絡知識。第二，他們有WORD部分關于表格和簡單的網頁制作基礎。第三，一部分同學有一些Dreamweaver的基礎，可在學生中起積極的促進作用。設計理念：
本節課的設計理念是以誘思探究學科教學論為理論依據，以充分發揮學生的主體地位為出發點，以培養學生自主學習能力全面提高學生素質為目的。是一節“誘思探究”理論的探索課。為此，在課前教師為學生準備了網絡布局學習資源網站，學生自己也已經以小組為單位確立了要本組要建立的網站的主題。整節課的內容安排是以從學生“動手”中發現問題，又在學生的“動手”中解決問題為主脈展開的。同時又通過評價環節中學生的之間的互評、點評將本節推向高潮，達到突出重點，攻破難點的目的。學習目標分析：
借助以前積累的知識、經驗及學習資源網自主探索，小組協作進而歸納、研究出網頁布局的內在規律性。教學策略的選擇與設計 1．教學方法：（1）誘思導學法（2）任務驅動—體驗探究法
（3）分層教學法（4）網絡探究教學法（5）激勵教學法
資料
2．學法指導：形象探究法、經驗探究法、體驗探究法、協作式學習法。3．資源的設計與選擇： 結合本節內容設計了一個學習資源網站、傳奇電子教室系統、Dreamweaver網頁編輯軟件等。教學過程設計：
教學設計過程及設計思想 教學環節 教師活動 學生活動 設計思想 時間 新 課 的 引 入 ⌒ 教 師 監 控 ︶
1，相鄰兩同學為一組分別在瀏覽器中打開兩個不同的網頁作品相互欣賞
資料
評價，同時準備回答：
問題1：這兩個網頁有什么不同？你認為哪個更好一些？為什么？ 2，在Dreamweaver中打開該網頁并逐一刪除頁面元素同時繼續提問： 留在頁面上的是什么？ 1，回答問題1 帶著問題2觀察老師的操作
2，回憶Word中表格的插入方法及技巧
我以“誘思探究導學法”為指導思想,主要體現“誘”和“導”兩個環節。首先是“誘疑”使學生“生疑”；然后要“導向”，比如這里教師的操作：在Dreamweaver中刪除頁中的頁面元素后出現的表格，讓學生的思維沿著正確方向發展，最終達到“釋疑”的目的。2 分 鐘
點評：“誘思探究導學法”一句話，誘發思維動機，導正思維航向。這是突現教師基本功的地方，要“誘”得巧，“導”得妙。
資料
新
課
學習
資料
新
課
學習
布置 任務 ⌒ 教
資料
師 監 控 ︶
[任務1]能根據資源網的指導學會表中表的使用，并完成本節的例題的表格制作。（必做題）
[任務2]能在布局的基礎上插入圖片及文字，完成一個如例題的簡單網頁制作。（提高題）
[任務3]能通過屬性的設計美化網頁。（先做題）1，學生可根據自己的具體情況選擇合適的任務。2，各組長明確任務。
在任務設計時我注意到這樣兩個因素；一是：為了一切學生，在設置任務時要充分考慮到學生的個別差異。體現分層教學的重要性。二是：以探索問題來引動和維持學習者學習的興趣和動機。2 分 鐘 學 法 指 導 ⌒
資料
教 師 監 控 ︶
指導學生帶著“任務”中的問題，利用教師準備的學習資源網自主學習，探索交流,小組互助，“助教”指導,量力而行完成操作任務。1，明確學習資源的使用方法，采取各種方法完成任務
利用教學資源自主學習及優生做好“助教”的角色互幫互學，既能激發他們的學習積極性，給他們一個鍛煉成長的機會，又能使更多的學生得到幫助，有利于全面提高學生動手動腦的能力，體現“因材施教”。1 分 鐘
點評：這兩部分的目的在于
一、體現分層教學的重要性。
二、培養學生養成由簡到繁、由易到難、循序漸進地解決問題的好習慣，同時學生之間的以教促教，以教幫教，以教帶教的方法有利于學生的全面發展。師
生
資料
互
動
1，尋找學生在完成任務中會遇到第一個問題：“表格線互擾問題”并及時以該問題為切入點將學生的思維引入到本節的重點內容--表中表的使用。2，引導學生發現例子中的新問題—各部分表格線的差異，將本節的內容推向另一個熱點。
1，學生掌握表中表的使用方法
2，完成任務
3，注意到表格屬性的功能。
我是這樣設計本部分內容將重點放在以下兩個方面：
第一、在本節課師生以“任務”為主線，在學生不斷地發現問題，教師及時地鼓勵準確地導向，調控學生主動地探究，利用各種方法例如：教師搭建的網上學習資源，平時建立的小組協作關系等去想辦法解決問題。25 分鐘 師
生
資料
互
動
3，評價小結是本節課的一個高潮部分。此時教師重點由上面技術點的引導轉到學生心理素質及與人交往能力的導向上。這一點其實比單純的學會上面的技術更為重要。在學生的自評中引導學生客觀評價自己。不能過分謙虛而失去在同學們面前表現自己才干的機會又不能過分張揚引起同學們的反感影響自己的形象。
4，由學生推選代表主持評價以調動學生積極參與評價的積極性 第二、充分利用評價方式對學生的激勵作用一改過去由教師為權威做法。此時，教師把主動權交給學生，使他們更具參與意識引發學習的主動性，學會正確地、善意地、藝術地評價他人和自己。從中學到做人的道理。12 分
鐘
點評：讓學生帶著真實的任務學習，這是任務驅動的精髓。這一部分是本節的重要內容，也是教學設計的一個難點。是對教師綜合運用“任務驅動—體驗探究”；“分層教學”“表揚激勵”等教學方法能力、如何引導學生選擇確實可行的學習方法能力的考驗。同時，通過評價的過程，潛移默化地鞏固知識，提高解決問題、評判是否的能力。
資料
知識遷移 學生活動
[問題1]用表格布局有什么優缺點，還有好方法嗎？ [問題2]在網絡資源中是否有其它的方法呢？ 采用小組形式討論
這里的想法主要是培養學生學會反思。3分鐘
點評：為學有余力的學生創造繼續發展的廣闊天空，激發他們的興趣，培養他們的創新精神。
課后反思： 成功的地方：
（1）課題引入時以誘發學生的思維動機，導正思維航向為目的，為學生的自主學習打下基礎。
（2）學習資源網站、小組互助、助教幫忙等形式為學生的自主學習創造了條件對培養學生養成由簡到繁、由易到難、循序漸 進地解決問題的好習慣起到積極的促進作用。
（3）評價方式的改革可達到引導學生客觀評價自己不能過分謙虛而失去在同學們面前表現自己才干的機會又不能過分張揚引起同學們的反感影響自己的形象。在互評、點評中要引導學生正確看待別人對自己的評價學會寬以等人；學會巧妙地運用語言藝術對存在問題的同學提出批評。同時通過點評，互評各自的作品，鞏固本節的知識點，達到強調重點，攻破難
資料
點的目的。
存在問題的地方：評價方式仍需大膽地放手，讓評價的形式更加多樣化，民主化。可充分發揮學生的主動作用讓他們去設計評價手段、評價量表等，這對于主體作用的體現及學生的創造性思維的發展都會產生積極的影響。
網絡
本節小結：由小組總結提交 結束 教師活動：
1． 分組欣賞網頁作品。
2． 教師操作演示在網頁中刪除元素從而引入表格布局的方法。設計思想
通過教師的誘和導達到誘發思維動機，導正思維航向的目的。教師監控： 1。布置學習任務。
2．對學生進行學法指導。使用學習資源、小組互助、助教幫忙。
設計思想
1.創造開放式的教學環境，學生為主體，體驗為紅線，鼓勵他們積極動腦、動手完成任務。2.教師的適時演示體現誘思探究法的思想宗詣。3.利用小
資料
組互助以教促教，以教幫教，以教帶教的方法有利于學生的全面發展。設計思想
通過評價的過程正確地、善意地、藝術地評價他人和自己。教會學生學會做人的道理。網絡
教師監控：小組互評及個案點評相結合強調難點，深化主題 開始
學生利用學習資源網站自主學習、探索交流、找出難點、小組互助，完成任務，深化主題。
教師尋找典型案例1表格線的互擾問題引出本節的重點表中表。典型案例2表格線的粗細問題引出難點屬性問題
教師：提出問題1及問題2 設計思想 培養學
（二）教學過程流程圖
第三篇：Dreamweaver網頁設計教學計劃
《Dreamweaver網頁設計》教學方案
第一部分 說明
1．課程的性質與任務
“Dreamweaver網頁設計”是計算機網絡技術專業（專科）的一門統設必修課。本課程的主要任務是介紹利用Dreamweaver開發工具進行網頁設計，包括新建、編輯和設置一個Web站點；如何對頁面屬性進行基本的設置，如何設置、編輯CSS層疊式樣式表；如何排版文字、表格和層；如何進行基本的圖像處理；建立框架；模板和庫的使用和編輯；網站的發布與維護等基本知識與應用。目的是通過本課程的學習，培養學生的實際動手能力和計算機的操作能力，能夠運用所學的知識進行網頁設計。
2．與相關課程的銜接、配合、分工
先修課程：計算機應用基礎Photoshop圖像處理等。
后續課程：Flash動畫制作等。
３．課程的教學基本要求
本課程要求學生掌握基本的HTML語言。學會使用Dreamweaver開發工具進行網頁設計。這是一門重在實踐的科目，因此需要學生多上機、多進行實際操作，把老師所教授的各種網頁制作、版面設計以及程序熟練制作或調試出來，并且能夠在此基礎上有所創造、有更進一步的發揮。
4．課程教學要求的層次
1．掌握：
要求學生能夠全面掌握所學內容，并能夠用其分析、應用與Dreamweaver網頁設計相關的問題，能夠舉一反三。
2．理解：
要求學生能夠較好地理解與Dreamweaver網頁設計相關的問題，并且能夠進行簡單分析和判斷。
3．了解：
要求學生能夠一般地了解的所學內容。第二部分 媒體使用與教學過程建議
學時分配
課程教學總學時90學時，5學分。其中授課36學時，實訓54學時。
2．多種媒體教材的總體說明
1．本課程文字教材為合一型教材，文字教材作為學習的主要媒體，著重反映課程的基本知識和針對性、應用性，在形式上要便于自學。在內容上包括基本理論知識講解和實訓兩部分。
2．視頻媒體配合文字教材的講授，內容重點在于實訓及輔導。
3．CAI課件作為網絡教學媒體，可以在互連網上使用也可以單機使用。
3．教學環節
以主教材講授為主，其它媒體作為輔助教學資源，以學生自學為主。
4．主要教學媒體的使用與學時分配
內容
序號 1 2 3 4 5 6 7 8 9 10 11 12 13 14
第1章 Dreamweaver基礎
第2章 網頁設計語言基礎
第3章 文本和圖像處理
第4章 表格與頁面布局
第5章 創建超級鏈接
第6章 層與層動畫
第7章 框架與框架網頁
第8章 創建ＣＳＳ樣式表
第9章 資源、模板和庫
第10章 媒體對象的應用
第11章 表單處理
第12章 創建Web站點
第13章 制作動態網站
第14章 網站的維護和上傳
2學時 3學時 3學時 3學時 2學時 3學時 2學時 3學時 2學時 3學時 3學時 2學時 3學時 2學時
教學內容 理論學時
合計
36學時
第三部分 教學內容和教學要求
第1章 Dreamweaver基礎（2學時）
教學內容：
Dreamweaver 的歷史和簡介
Dreamweaver 的安裝過程
Dreamweaver 的全新界面
改進的設計與開發環境
主菜單介紹
對象控制面板介紹
教學要求：
掌握：Dreamweaver的基本特點、新增功能及界面組成。基本操作，如安裝、新建、打開、導入、保存、關閉等。
理解：新增功能、界面組成的優點。
了解：Dreamweaver可以為我們做些什么。
第2章 網頁設計語言基礎（3學時）
教學內容：
HTML及XHTML語言介紹
常用的網頁語法標記
教學要求：
理解：HTML及XHTML語言介紹，常用的網頁語法標記
第3章 文本和圖像處理（3學時）
教學內容：
文本屬性面板
編輯文本和插入對象
設置文本的格式
編號與項目符號
在網頁中插入圖像
圖像的應用
教學要求：
掌握：設置文本屬性和格式；編號與項目符號的使用；插入、編輯和排版圖像。
理解：如何進行圖像調整。
第4章 表格與頁面布局
教學內容：
表格的基本操作
單元格的基本操作
表格的自動套用格式
表格的創建
表格的編輯
創建布局單元和表格
教學要求：
掌握：如何插入、編輯表格，創建布局單元和表格。
理解：表格在網頁排版中的作用。
了解：使用頁面布局模式進行網頁排版的方法。
第5章 創建超級鏈接（2學時）
教學內容：
（3學時）
鏈接分類
創建超級鏈接
鏈接的四種狀態
創建Email鏈接
管理超級鏈接
教學要求：
掌握：創建超級鏈接和Email鏈接，會設置鏈接的各種狀態。
理解：超級鏈接幾種狀態之間的差別和共同點。
了解：創建Email鏈接中的各種技巧。
第6章 層與層動畫（3學時）
教學內容：
層的概念
創建層
層操作
層與表格的相互轉換
層動畫的概念與設計
教學要求：
掌握：層的概念與使用
理解：層動畫的概念與設計
第7章 框架與框架網頁（2學時）
教學內容：
框架的基本概念
創建框架和框架集
框架的使用
框架和框架集的屬性設置
教學要求：
掌握：框架和框架集的創建；框架的使用。
理解：使用框架的優缺點。
第8章 創建ＣＳＳ樣式表（3學時）
教學內容：
CSS層疊式樣式表
定義CSS樣式表
創建并鏈接到外部CSS樣式
設置CSS樣式的格式化參數
設置超鏈接顯示狀態
添加各種ＣＳＳ效果
教學要求：
掌握：內部ＣＳＳ和外部ＣＳＳ的添加方法，編輯ＣＳＳ屬性，使用ＣＳＳ進行頁面的排版，創建各種ＣＳＳ效果。
理解：使用CSS排版的優點。
了解：如何使用ＣＳＳ控制背景、鼠標以及添加其它特殊效果。
第9章 資源、模板和庫（2學時）
教學內容：
資源管理
模板的創建
模板的編輯
定義模板可編輯區域
創建，管理和編輯庫項目
教學要求：
掌握：模板的創建，模板的編輯，定義模板可編輯區域
理解：資源管理
了解：創建，管理和編輯庫項目
第10章 媒體對象的應用（3學時）
教學內容：
插入Flash對象
插入Shockwave對象
插入視頻
插入ActiveX控件與Java小程序
填加聲音
教學要求：
掌握：插入Flash對象、插入Shockwave對象、插入視頻、插入ActiveX控件與Java小程序、填加聲音
第11章 表單處理（3學時）
教學內容：
表單概述
表單對象
創建表單
處理表單
創建動態表單
教學要求：
掌握：創建表單、處理表單和設置表單參數。
理解：表單的概念和作用。
了解：如何使用表單創建交互式界面。
第12章 創建Web站點（2學時）
教學內容：
站點規劃
在Dreamweaver8中創建站點
管理站點與站點文件
使用站點地圖
為網站指定服務器技術
教學要求：
掌握：規劃站點、建立和管理站點；使用站點文件和地圖。
理解：創建站點的必要性。
了解：服務器技術的指定。
第13章 制作動態網站（3學時）
教學內容：
Access數據庫基礎
ODBC數據源設置
ASP與Web服務器配置
Dreamweaver8動態網站設計
創建與數據庫連接
教學要求：
掌握：數據源的設置，如何配置Web服務器，如何創建與數據庫的鏈接。
理解：數據庫在動態網站設計中角色的重要性。
了解：設置數據源和創建數據庫鏈接的技巧
第14章 網站的維護和上傳（2學時）
教學內容：
在本機中測試網站
預覽網頁效果
網站的查錯
發布網站到服務器
教學要求：
掌握：Dreamweaver8的測試、預覽和發布設置。
理解：網站排錯的必要性。
了解：如何發布網站到服務器。
實訓內容
（實訓分為必做和選做內容，可根據實際的實驗條件選做。實驗總計54學時）
實訓1：建立Web網頁（必做）
實訓2：文本及其格式化（必做）
實訓3：圖像（必做）
實訓4：超級鏈接（必做）
實訓5：表格和頁面布局（必做）
實訓6：框架（必做）
實訓7：層（必做）
實訓8：模板與庫（必做）
實訓9：表 單（必做）
實訓10：行 為（必做）
實訓11：多媒體組件的插入、使用代碼設計網頁與站點管理（必做）實驗12： 動態網站制作（選做）
實驗13：ASP與SQL Server數據庫相連（選做）
第四篇：Dreamweaver網頁設計實驗報告
實驗報告
專業
XXXXXX
班級
XX 班
學號
XXXXXX
姓名
XXX
報告完成日期
2012-12-26
指導教師
XXX
評語：
成績：
批閱教師簽名：
批閱時間：
一、制作時間
2012年12月18日至2012年12月26日。
二、實習內容
1、使用Dreamweaver制作網站，該網站為福建工程學院網站
2、網站不少于8個頁面，主頁和各模塊相關頁面；
3、頁面中包含文字、圖片；
4、使用CSS實現網頁相關頁面設置，要求在實現網頁內能夠顯示文字，圖片等信息；
5、使用網頁瀏覽器進行網站測試。
三、實習環境
1、硬件環境：計算機一臺；
2、軟件環境：Dreamweaver cs4；
3、測試環境：IE、firework等網頁瀏覽器。
四、網站總體設計
1、網站主題
本網頁是以福建工程學院網站為主題，針對不同的年齡階段的人給出了不同的學院的信息。
2、設計思路
首先構思了基本網頁的布局，主頁采取了常用的1-（1+1+1），附頁采用了1-（1+1），上了多個網 最后決定參照福建工程學院的官方網站進行制作，但是布局并不相同 素材取自福建工程學院官方網站，部分圖片取自百度，網站包括1個主頁7個子頁，子頁包含了所有的學校狀況，分別為：學校簡介、現任校領導、教學機構、管理機構、校紀校訓校歌、校園風光、新校區建設；采用了較難的二級菜單 和 JVAV技術實現導航欄上面的圖片進行4張輪播。
五、制作步驟
1.首先確定網頁的主題后，從網上查看各名校的網站，并從中尋找思路開始做網頁。經過長時間的瀏覽，最終選擇福建工程學院作為參照（網址：http://www.tmdps.cn）
2.受福建工程學院主頁的影響我自學了圖片輪播和二級菜單，從而制作了輪播圖片和二級菜單。
3.由于對于JVAV和表單的知識并不是非常了解所以有些地方需要實現的實現不出來放棄了，期中研究了最久的就是 導航輪播和下面的有塊區域的圖片輪播，結果因為不知道如何同時初始化2個JVAV函數 最后以失敗告終 只好放棄
4.本次制作最難的地方是導航菜單的二級菜單和圖片輪換
在制作過程中，遇到很多次的制作混亂，最后還是老師幫忙解決的。
5.原計劃那些JVAV代碼因為無法同時初始化他們放棄了 只好以一些列表代替
6.最后，將一些小細節的東西做了些處理，最后打包上交。
六、實習總結
這次是我們web的期末考試制作，通過這一次的制作，不僅鞏固了以前學過的知識，還學會很多課堂上未教授的東西。通過老師的講解、查閱資料，解決了很多制作上的困難，這一點我在這要好好感謝我們的XX老師和我們宿舍的學姐，謝謝她們幫我很大的忙。
七、參考文獻
《HTML+CSS網頁設計與布局》 《PHP編碼》
第五篇：Dreamweaver網頁設計+授課教案
Dreamweaver教案一(一課時)
教學目的：初步了解Dreamweaver的操作
教學重點：Dreamweaver的界面
教學難點：各個面板的調用
一、引入
為什么要用Dreamweaver而不用Frontpage？
Dreamweaver是Macromedia公司的出品，它以程序小、運行速度快、所制作網頁代碼少這些優點，贏得了網頁制作人員的喜愛。
例一：m1.htm和f1.htm的大小比較
例二：frontpage安裝程序和dreamweaver安裝程序的大小比較
例三：frontpage運行和dreamweaver啟動比較
二、Dreamweaver的安裝
三、Dreamweaver的界面
1．文檔窗口：主菜單、工具欄、底部啟動條、文檔編輯區
2．對象面板：標準、表格、表單、框架、特殊、文件頭、隱藏、字符
3．啟動面板：站點管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理
4．屬性面板：隨目前對象不同而內容不同
四、作業
1．寫出Dreamweaver對象界面中所有對象的名稱
2．新建一個空白網頁，寫出空白網頁的HTML代碼
Dreamweaver教案二(一課時)
教學目的：回憶原來學過的網頁的文字知識，熟悉 Dreamweaver的操作，熟悉屬性面板的 1
使用，掌握頁面屬性、文本屬性的設置
教學難點：向導圖片、預格式化、圖片的路徑
教學重點：常用屬性
一、復習引入
1．輸入文本
2．回車鍵的作用
3．如何輸入換行符：Shift+ENTER，或者是對象面板à符號
4．換行符對應的HTML標記
二、設置頁面屬性
1．打開頁面屬性對話框：右擊頁面，選擇頁面屬性（page properties）
2．設置標題顯示（Title）：
3．設置頁面背景（Background image）：選擇背景圖像，注意路徑
4．設置背景顏色Background：
5．設置本頁面中文字的顏色Text：在沒有設置其它的字體顏色前，這個文字顏色發生作用，一 旦對具體的文字設置顏色，這個設置就不起作用了
6．設置鏈接的各種顏色（Visited Links、Active Links、Links）
7．設置頁面邊界（Left Top）：使內容與邊框沒有空隙
8．設置文檔字符集（Document Encoding）：gb2312
9．設置向導圖片（Tracing Image）：用于設計時，下面的滑動條用于設置這個圖片的透明度（Transparent）
三、設置文本屬性
1．格式（Format）：
（1）樣式：段落（Paragraph），標題（Heading1）、??預先格式化的（preformatted）
*預先格式化的：可以輸入空格，可以按文本原來的樣子排列，缺點是不能實現自動換行
（2）字體：Default Font
（3）大小：Size
（4）顏色：
（5）其它：加粗、傾斜
（6）對齊：
2．鏈接（Link）：鏈接到文件，鏈接到地址，*相關（Relate to）：文檔（Document），站根目錄（SiteRoot）
3．目標（Target）：打開鏈接的目標_blank、_self、_parent、_top
4．項目符號、編號和縮進
四、作業
根據示例網頁，制作一個網頁
Dreamweaver 教案三(兩課時)
教學目的：掌握網頁中圖片的相關操作
教學重點：dreamweaver中設置圖片的屬性
教學難點： 圖像處理軟件的使用
一、復習引入 1．網頁的頁面背景顏色和文本顏色在HTML代碼中是如何表示的？
RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強 一共可以表示：256╳256╳256=16777216種 顏色 由于瀏覽器的關系，只有216種顏色能在瀏覽器中正常顯示，多于這個范圍的顏色，有的瀏覽器顯 示時就可能發生偏差，不能正常顯示。這個范圍我們稱之為網頁安全顏色范疇 2．網頁中運用顏色原則l 切忌采用過多的顏色；
l 背景顏色不要太深；
l 要保持整個網頁的色調統一；
l 要圍繞網頁主題選擇顏色
二、網頁中的圖像格式 *BMP：位圖格式 1． GIF：Graphics Interchange Format可交換的圖像格式 特點： l 只支持256種顏色 l 支持透明效果 l 可以交錯下載 l 可以實現動畫效果 l 文件所占用空間小 l 不能支持漸變色彩 l 更改圖片大小要從原文件改起 2． JPEG：Joint Photographic Experts Group聯合攝影專家組文件格式 特點： l 支持24位圖像 l 有損壓縮 3． GIF與JPEG比較
三、插入圖像 1． 插入圖像：InsertàImage；對象面板 2． 圖像 屬性： l 寬（W）高（H）：默認為圖片的大小，可以設置 其它尺寸，但圖片會變形 l 源文件（Src）： l 對齊（align）： l 鏈接（Link）：鏈接到的圖片 l 替代（Alt）：圖像注釋，當瀏覽器不能正常顯 示圖片時所出現的文字提示 l 地圖（Map）：制作映射圖 l 垂直邊距（V space）：與上邊界的距離 l 水平邊距（H space）與左邊界的距離 l 目標（Target）：當鏈接項有設置時發生作用 l 低品質源（Low Src）：低分辨率副本文件 l 邊框（Border）： l 編輯（Edit）：啟動圖像處理軟件來對圖像進行 編輯 l 重設大小（Reset size）：當用其它工具修改了 圖片大小時，如果不重設圖片的大小，則會變形或者在不小心改變了圖片的大小時使用此項
四、使用圖 像處理軟件
1、轉換圖像格式：打開，另存為
2、更改圖像尺寸：
3、更改圖像品質：另存為
五、作業 l 下列文件均放于同一文件夾下： 1． 在網上尋找透明背景的GIF圖片5張，JPEG圖片5張，其中，GIF要有動畫的至少一張，JPEG要有一 張風景的。2． 將找到的圖片放置在背景為藍色的頁面上 3． 改變第一 張GIF圖片的大小 4． 設置第二張GIF圖片的替代文字為“試一試” 5． 設 置第三張GIF圖片的鏈接為第三張JPEG圖片 6． 設置第四張GIF圖片的垂直邊距為5，水平邊距為9 7． 對第一張JPEG圖片設置映射4個，分別鏈接到第二、三、四、五張JPEG圖片 8． 運用圖像處理軟件，制作風景JPEG圖片的低品質圖片，并對網頁中該風景圖片設置低 品質源 l 不看電腦，寫出下列RGB值對應什么顏色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF
Dreamweaver教案四(三課時)
教學目的：掌握dreamweaver中表格的應用 教學難點：表格對應的HTML代碼
教學重點：表格的編輯
一、復習引入
1． 文字的定位：空 格、回車
2． 圖片的定位：垂 直邊距、水平邊距
二、表格
1． 插入表格：插入（Insert）à表格（table），或者在對象面板
2． 行數（row）
3． 列數（column）
4． 邊距（cell padding）：單元格中的內容與單元格邊框之間的距離
5． 間距（cell spacing）：單元格之間的距離
6． 寬度（width）：可以是像素（pixel）或百分比為單位（percent）
7． 邊框（boder）：
8． 屬性面板：只有 在選定整個表格時才出現表格屬性
9． 在表格中也可以 通過右擊，調出的快捷菜單中選擇表格來對表格進行設置
10． 清除行高和列寬按鈕
11． 改變列寬單位按鈕
12． 背景顏色：
13． 邊框顏色：設置整個表格的格線顏色
14． 背景圖像：
三、表格所對應的HTML代碼
1．表格：
2．行：
3．列：
四、選定
1． 單擊表格左上角 或邊框線
2． 在表格內單擊表 格任一處，右擊，選擇表格（table）à選定表格（select table）
3． 選擇所有單元格
4． 在文檔窗口的左 下角選擇標記
5． 選定行
6． 選定單元格
五、表格的編輯
1． 表格的嵌套
在網頁中，要進行復雜的定位，一般需要用到嵌套表格。不過，一般不超過三層。
2． 復制剪切粘貼
3． 插入行、列，刪 除行列
4． 合并單元格，拆 分單元格
5． 改變行、列、表 格的大小：拖放，屬性面板精確定義
6． 表格模板：命令（command）à格式化表格（format table）
六、導入表格數據
1． 文件導入導入表格數據
2． 數據文件
3． 定界符
4． 表格寬度
5． 單元格邊距和間距
6． 格式化首行
7． 邊框
七、學習網頁制作的方法
1． 學習網頁制作，要先模仿
2． 在瀏覽到合適的 網頁時，用“另存為”保存，再用dreamweaver來打開
八、作業
1． 將數據文件1.txt轉為表格
2． 模仿此頁制作頁面
Dreamweaver教案五(兩課時)
教學目的： 掌握框架
教學難點： 框架的編輯
教學重點： 框架的HTML代碼
一、復習引入
回憶：Frontpage中的框架應用
二、框架的應用
1． 重復出現在不同 網頁文檔中的元素：網頁標題、導航欄等等
三、建立框架
1． 將對象面板切換 到框架頁（Frame）
2． 插入不同的框架，一個區域對應于一個頁面
3． 在框架中打開原 有網頁：文件（File）à在框架中打開（Open in Frame）
四、保存框架
1． 選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會出現提示，逐個保存框架中的網頁
2． 保存時注意名稱
五、框架編輯
1． 框架面板：窗口（Windows）à其它（Other）à框架（Frame）調出框架面板
2． 選定框架組：單 擊整個框架組的邊框；或在框架面板中單擊整個框架的邊框
3． 框架屬性：名稱、源文件，滾動否，是否可以調整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等
4． 拆分框架：按 Alt鍵，拖動邊框；修改（Modify）à框架頁（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）
*注意區別：插入一個新的框架與拆分框架的區別
5． 鏈接打開的目標
六、框架所對應的HTML代碼
1． 框架組：
2． 通過設置：rows 或cols來設定是橫的還是豎的，是頂部還是底部
3． 框架組屬性： frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距
4． 框架項：
5． 框架屬性：src 指向的頁面，name框架名，scrolling是否有滾動條，noresize不能由用戶改變大小
6． 無框架提示