《網頁制作》教學設計（精選8篇）
作為一名優秀的教育工作者，通常會被要求編寫教學設計，借助教學設計可以提高教學質量，收到預期的教學效果。那么寫教學設計需要注意哪些問題呢？下面是小編整理的《網頁制作》教學設計，歡迎閱讀與收藏。
《網頁制作》教學設計 篇1
一、教材或教學內容分析
本章內容在本教材中的位置處于第五章，是在文字處理（Word2000）和網絡基礎及因特網應用兩章之后。學生所學的文字處理軟件Word和將要學習的網頁制作軟件Frontpage同是Microsoft公司的產品，在軟件的使用上有很多的共通之處，所以在學習frontpage的時候，很多內容可以讓學生自學，而不必面面俱到地在課上講授。而第四章網絡基礎及因特網的應用又為學生對網頁的理解奠定了基礎，學生對網頁中的基本元素——文字、圖片、動畫、聲音等都有所了解，而網頁的制作就是將這些元素重新組合到網頁上，學生要學的就是這種組合的方法。所以說，雖然大多數學生以前都未接觸過網頁的制作，但有了以上這些基礎，學起來就輕松多了。
本章內容按照學生已有的基礎，我對教學內容分了一下類，也為教學的組織工作打下一點基礎。本章內容主要由網頁基礎知識、網站的建立和管理、網頁的制作、創建超鏈接、圖片的處理、網頁框架。
重點是網頁的制作和創建超鏈接，學會了這些就可以開始簡單的網頁制作了。
難點是網頁框架，這部分相互之間關系比較復雜，必要時，老師在對各組個別輔導時，可以給予分別講解。 這個分類可以為組長安排各個組員的任務提供參考，使分工更加合理。
二、教學對象的分析
信息技術課雖然已經成為初中的必修科目，但是城鄉學生之間掌握情況的差異卻相當大，條件好一點的初中學生不僅已經熟練掌握了課本上的內容，還對一些常用軟件有所了解；而差一點的可以說是從高中開始才正式接觸到信息技術知識的學習，他們需要多鍛煉、多指導，所以協作學習對學生的學習幫助很大。
三、教學策略的選擇及媒體的使用
在教學策略的選擇上，我使用的是任務驅動和協作學習相結合的方法。
任務驅動就是要求本章內容學習完之后，每個小組都要完成自己班級網站的制作，并在全班進行評比，選擇最好的作為班級主頁掛到學校主頁上去，這有助于激發學生參與學習的積極性。
協作學習則是讓學生在學習過程中互幫互助，用較短的時間、教少的精力學到更多的東西，完成一個集體項目，讓他們在學習之后獲得成就感。因此在媒體的選擇上，我們使用的是TOP2000系統。TOP2000系統有利于教師進行分組教學和學生作品的點評及成果的展示。教學過程開始之前，教師把學生按座位分成四組，每個組都按學生對計算機的掌握程度平均分配，保證每個組都有計算機操作方面比較突出的，也有相對比較差的，使其形成能夠互幫互助的學習小組。并由他們自己選出組長各一名，然后由組長根據組員的情況，確定在班級主頁制作過程中主要完成什么任務，也就是說起到一個組織者的作用。做過網頁的人都知道，做網頁是一項比較費時的工作，而要學生在較短的時間內制作出像樣的網頁是比較困難的.，而在這個過程中，網頁的設計占去了相當多的一部分時間，組長把任務分到各組員頭上以后，組員就可根據自己要完成的任務相對集中的做某方面的工作，做完以后，組員之間進行經驗交流，告訴組員自己的網頁是如何制作出來的，在完成自己的網頁后，再重復一遍制作過程花費的時間的不多的。這樣，其他組員就可在較短的時間之內掌握比較先進的網頁制作方法，而不必再花那么多時間去探索。因為每位組員都必須自己完成一個任務，所以在這個過程中，也同樣有自己探索學習的機會和介紹自己經驗的機會，使組內的每個學生都在學習中獲得成就感。
四、教學過程
教學進程
教師活動
學生活動
1、課前準備
課前將本章內容的基本結構、內容的歸類、網頁基礎知識、網頁素材做成一個網站，供學生參考，網站上的內容可根據學生以后在學習中的要求添加。根據學生對已有的網頁制作的情況進行分組。
學生根據自己的分組情況選出組織能力較強、計算機水平較高的人做組長，協作小組形成。
2、教師布置任務，作必要講解
第一節課，教師簡單介紹網頁基礎知識，并給各小組布置任務——用下面的時間完成班級網頁的制作，并對組長進行本章基本內容及本章內容的分類的介紹，讓他們對本章內容有總體上的把握。
在教師對網頁基礎知識講解的基礎上，瀏覽教師制作的網站，繼續學習；
課后各組設計自己的班級主頁，組長根據網站上教師對本章內容的分類給學生布置任務。
3、教師指導分工情況，學生開始自主學習
第二節課教師對組長對全組的分工情況給予檢查，提出意見和建議。
學生根據分工制作網頁，學習可以跟著課本上自學，也可根據以前學習Word的經驗自己摸索制作過程，不懂之處可向會的同學請教，還可以相互之間討論，在網頁的設計方面也可以相互之間多商量，發揚互幫互助的精神。
4、學生自主學習，教師指導、監督
下面三節課，老師在每組各用10分鐘時間檢查他們上節課的網頁制作情況，并對他們碰到的問題給予提示或解決，起指導和監督作用。
學生繼續學習、制作網頁。
五、階段總結
四節課的制作以后，各組員所制作的網頁都初見雛形，所以教師組織一堂課，由各組展示自己的作品。教師在學生評講完后，給予總結。
各組分別展示自己的作品，其他組對他們可以提出意見或建議，也可從其他組的學到好的創意。由組長在課后寫一份階段總結，從而指導以后的工作。
六、學生自主學習，教師指導、監督
下面四節課，老師仍然對每組各花10分鐘時間輪流檢查他們上節課的網頁制作情況，并對他們碰到的問題給予提示或解決，起指導和監督作用。
學生繼續學習、制作網頁。
七、各組將內容匯總，形成班級主頁
教師對各組出現的問題提出建議或意見。
組長或組長安排人將各組的主頁進行匯總，形成一個完整的班級主頁，對欠缺的地方進行修補。
八、班級網站制作完成，展示與總結
老師請其他信息技術教師來做評委，對各組做的網站提出意見或建議，評出最佳網站、最佳創意等獎，讓大家的付出都有所收獲。
各組分別展示自己組所制作的班級主頁。
課后：
大家集中各組的優勢，將班級主頁完成，掛到學校主頁上。
《網頁制作》教學設計 篇2
一、教學目標：
1、知識與技能：
（1）了解框架結構網頁的概念及在網頁中的作用，了解它與表格網頁的區別。
（2）掌握框架結構網頁的建立、框架結構的拆分、框架的刪除等。
（3）掌握框架中頁面設置及保存的方法，如設置初始網頁按鈕、新建網頁按鈕等。
2、過程與方法：
（1）能夠區分框架結構屬性設置與網頁屬性設置的不同點。
（2）通過框架結構網頁設計，使學生對網頁的整體結構有更進一步的認識。
3、情感態度與價值觀：
（1）能夠將表格與框架結構網頁結合使用，在創作中體驗樂趣。
（2）培養學生網頁設計的審美意識、創新意識。
二、教學重點難點：
1、教學重點：
（1）框架網頁的作用和功能，框架的建立與屬性設置。
（2）框架中各個頁面之間的關聯，每個框中頁面的設置方法。
（3）框架網頁的保存方法。
2、教學難點：
（1）框架結構網頁中框架屬性與頁面屬性的設置方法。
（2）理解框架結構的多頁面存儲方法及各頁面之間的`關聯。
三、教學過程：
1、創設情境、導入新課
（1）教師展示一組表格制作的網頁，引導學生找出它們的共同特點。并提問如何快捷地制作這種網頁（學生回答：使用復制、粘貼快捷地制作）。
（2）教師又提問：有沒有更好的方法呢？相同的區域我們能否只做一遍呢？從而導入新課——框架網頁的制作。
設計意圖：通過對比、比較，引導學生思考，激發學生學習的樂趣。
2、任務驅動、自主學習
（1）教師展示一個框架網頁，引導學生理解框架網頁的概念。
（2）出示任務一：框架網頁的新建與保存。教師要求學生先閱讀教材中的操作步驟，再嘗試完成書本第227頁的實踐學習。
（3）教師講解框架結構中的每個框都是一個獨立的選項文件，即網頁文件，因此當框架確定之后，需要為每個框分別指定其網頁文件的來源，可以通過每個框中的“新建網頁”按鈕和“設置初始網頁”按鈕進行選擇。
（4）學生理解框架網頁的概念，通過閱讀教材中的內容，自學新建框架網頁的操作，初步了解“新建網頁”和“設置初始網頁”兩個按鈕的不同，并認真聆聽教師的講解，注意觀察，按要求模仿操作。
（5）出示任務二：相關頁面的制作與設置。教師要求學生先閱讀教材中的操作步驟，再嘗試完成書本第228、229頁的實踐學習。
（6）學生制作相關頁面，同時也是對前面所學內容的復習和回顧。教師反饋學生的操作情況，開展評比活動，對表現好的學生給與表揚。
（7）出示任務三：框架網頁屬性的設置。學生自主探究學習，有問題可向教師尋求幫助。教師基礎扎實的同學完成任務后可進行拓展學習。
（8）教師請學生示范操作，并說明自己設置的方法和原因。同時鼓勵做的比較好的學生。
設計意圖：培養學生的自主學習能力，對于課堂教學難點，學生在教師的講解后模仿操作，有效突破難點。
3、展示作品、課堂小結
（1）教師給出一些常見的框架結構應用界面，如Web郵箱頁面等，引導學生總結本課內容，并讓學生分組，推進一些優秀作品在全班展示。
（2）教師點評，并鼓勵完成作品比較好的學生。
設計意圖：拓展學生的視野，使學生了解框架的應用方法。展示優秀作品鼓勵學生，激發學生的創作欲望。
四、教學反思：
1、本節課是在學習完簡單網頁、表格布局網頁、交互式網頁的基礎上，進一步頁的設計方法。由于學生已經具備了一定的網頁設計基礎知識與技能，所以教師可以根據學生的實際情況，采用更靈活
的教學方法。教師可以簡單介紹框架結構網頁的功能及框架的建立與編輯方法，以及框架屬性設置與網頁屬性設置的方法與區別。然后由學生根據教師提供的學案及演示動畫，完成框架網頁設計任務。
《網頁制作》教學設計 篇3
教學目標：
1、讓學生掌握在網頁中插入表格的方法以及表格的修改
2、學會利用表格來規劃網頁
3、培養學生創新的能力以及動手操作的能力
教學重、難點：
利用表格來規劃網頁，從中培養學生的創新能力
教學過程：
一、情境導入
同學們你們善于觀察嗎？老師先考考你們，我們一起來看一組圖片，你們看看在那里看過呢？學校緩臺的窗臺上。你們的觀察能力真的很強啊，對，這些都是我們學校美術的特色作口，盤畫。其實，我們做過很多作品：有手工作品，語文課中的作文、書法等都是作品，這節課我們以繪畫作口品為例，做一個學習園地網頁，把我們的'作品展示到自己的班級網站中，以便我們更好的努力學習。現在我們就一起來制作吧！
二、新知探究
首先我們來打開上節課的班級網站，在這個網站中新建一個網頁，并保存成“學習園地”。
教師講解：如何制作學習園地網頁。
1、制作網頁的標題：輸入文字，并設置文字的格式。
2、插入表格：單擊“表格”中的“插入表格”并對表格屬性進行設置。如：行、列的操作，對齊方式等。同時講解什么是行，什么是列，以及單元格的概念。
3、修改表格：調整表格行高和列寬。
4、在學生學會插入表格的基礎上，來設計網頁，展示作品。并講解在單元格中可以插入圖片、文字。那我們就一起快快去做吧！插入圖片，并在圖片的上面或下面進行圖片的注釋。
5、進一步設置單元格的背景，來美化網頁。
6、設置超鏈接：通過導航欄目，設置文字超鏈接。選中文字，點擊右鍵選擇超鏈接在列表中選擇你要鏈接的網頁，單擊“確定”按鈕。
7、學生在教師的講解后，學生自己動手操作制作網頁。教師進行指導。（伴隨音樂）
三、作品評價
1、生評：從網頁設計上，美觀程度上，知識落實上重點評價。
2、師評：對學生作品進行評價，并對其它學生的評價加以更完整的解釋。
四、總結
我們這節課主要是利用了表格來設計網頁，以使來美化我們的網頁，通過繪畫作品的展示，學習更多的知識。
《網頁制作》教學設計 篇4
教學目標：
1、知識與技能：
（1）理解框架的概念及用途。
（2）掌握框架網頁的新建、制作、編輯與保存，了解框架的拆分方法。
（3）初步掌握將框架結構與表格布局結合使用來制作網頁。
2、過程與方法：
（1）通過對表格網頁的分析，體驗新知識（框架結構網頁）的優點，從而促進其學習新知識。
（2）理解框架的概念與組成，學會分析網站的結構。
3、情感態度與價值觀：
（1）通過以"人與動物"為主題的框架結構網頁制作活動，了解更多有關人與動物和諧相處的知識，通過故事趣聞，增強學生關注動物的興趣和意識。
（2）能夠將表格與框架結構網頁結合使用，在創作中體驗樂趣。
教學重、難點：
1、重點：框架的概念、用途， 創建、編輯與保存框架網頁的方法。
2、難點：框架的拆分。
教學方法：
對比教學法、探究學習法、模仿學習法。
教學準備：
整理、歸類相關素材，并按要求擺放。
教學過程：
1、引入
老師展示一組利用表格制作的網頁，要求學生仔細觀察，找出它們的一個共同特點（學生答：網頁上方和左側內容都是相同的，僅右下部分內容不一樣），并提問如何快捷地制作這種網頁？（學生答：使用復制粘貼快捷地制作）
盡管復制、粘貼能為我們節省時間，但有沒有更好的方法呢？相同的區域我們能否只做一遍呢？今天我們要學習的內容——框架網頁制作，就能給我們帶來更多便捷。（讓學生明確框架網頁使用的場合）
2、 新授
（1）框架網頁概念
由以上例子入手，再展示一個框架網頁，教師引導學生理解框架網頁的概念
（2）框架網頁的新建與保存
教師要求學生先閱讀教材中的操作步驟，再嘗試進行探究操作。
任務1 創建"橫幅和目錄"結構的框架網頁，新建top和left頁面，并學會保存。
框架結構中的每個框都是一個獨立的選項文件，即網頁文件，因此當框架確定之后，需要為每個框分別指定其網頁文件的來源，可以通過每個框中的"新建網頁"按鈕和"設置初始網頁"按鈕進行選擇。在top和left頁面中，單擊"保存"按鈕，隨即開始保存。
此處為教學難點，可先由框架的概念入手，再針對保存頁面中的藍色部分，教師進行講解，教會學生注意觀察。
學生要理解框架網頁的概念，通過閱讀教材中的內容，自學新建框架網頁的操作，初步了解"新建網頁"和"設置初始網頁"兩個按鈕的不同，并認真聆聽教師的講解，注意觀察，按要求模仿操作。
設計意圖：培養學生自主
學習能力，課堂教學難點在教師的講解后模仿操作，有效突破難點。
（3）相關頁面的制作與設置
框架網頁中相關頁面的制作，需要結合表格來布局，插入文字、圖片和交互式按鈕。
任務2 top和left頁面的制作。
要求：
○1top頁面內插入1行2列的表格，左邊單元格插入logo圖片，右邊單元格插入banner圖片。
○2 left頁面內插入5行1列的表格，在每個單元格內依次插入交互式按鈕（共4個），交互式按鈕文字為展示介紹的'相關內容概括，在第5個單元格內插入一個郵箱指示的圖片。
○3調整表格邊框的粗細。
○4為main區域設置初始頁面。（該網頁由教師提供現成的）
學生制作相關頁面，同時也是對前面所學內容的復習和回顧。老師反饋學生的操作情況，開展比一比、評一評活動，對表現好的學生給予表揚。
（4）框架網頁屬性的設置
創建好框架網頁后，可以根據實際需要改變框架的屬性。
任務3 調整框架的大小、設置框架的邊框、設置框架窗口中的滾動條等。
提高任務：框架的拆分。
學生自主探究學習，可向老師尋求幫助。完成設置后請同學示范操作，并說明自己設置的方法和原因。操作基礎扎實的同學完成任務后可進行擴展學習。
3、 總結與評價
老師可以給出一些常見的框架結構應用界面，如Web郵箱頁面等，引導學生總結本課內容，梳理課堂知識，并讓學生分組，推薦一些優秀作品進行全班展示。
設計意圖：開拓學生的視野，使學生了解框架的應用，教會學生要善于總結，要學會學習的方法。
《網頁制作》教學設計 篇5
教學目標：
1、知識與技能
（1）了解超級鏈接的含義及鏈接源和鏈接目標的含義，掌握同一站點內以及不同站點間網頁超級鏈接的創建方法。
（2）掌握網頁內書簽的作用及創建書簽鏈接方法，掌握交互式按鈕、框架網頁內超級鏈接的設置方法。
（3）理解熱區鏈接的含義及創建方法。
2、過程與方法
（1）通過創建網頁超級鏈接的操作，使學生了解網頁中創建超級鏈接的基本方法，破除對網頁鏈接的神秘感。
（2）通過對不同對象設置超級鏈接的操作，使學生總結出操作的規律，培養學生自主學習與操作的能力。
（3）通過網頁不同的超級鏈接方法，拓展學生思維，創建多種形式的網頁鏈接。
3、情感態度與價值觀
（1）通過鏈接我國主要自然保護區網頁，激發學生熱愛祖國、熱愛自然、熱愛生命的激情。
（2）完成超級鏈接，使學生感受成功的喜悅和快樂。
教學重、難點：
1、教學重點：
（1）超級鏈接的含義及鏈接源和鏈接目標的含義。
（2）超鏈接的制作方法——給文字、圖片制作超鏈接，制作書簽鏈接，給交互式按鈕制作超鏈接，框架頁面內的超鏈接，圖片區域制作超鏈接等。
2、教學難點
（1）書簽鏈接中名稱及對應鏈接位置的設定。
（2）在框架頁面中制作超鏈接時，目標對象所選擇的顯示窗口形式。
教學方法與教學手段：
任務驅動法、討論探究法、講解與演示法、類比知識遷移法。
教學準備：
"動物——人類的朋友"站點，包括未鏈接的網頁，如歡迎頁、表格頁、框架頁，表單頁等。
教學過程：
1、引入
展示兩個主頁，一個已經創建了鏈接，一個沒有創建鏈接，讓學生進行比較并找出區別，引出本課課題——超級鏈接。
提出：我們在先前的'學習中，哪個軟件中的相關操作與它類似？什么是超級鏈接？找一個例子，分析鏈接源和鏈接目標分別是什么？
學生展開交流，通過對比找出不同點，并積極思考，回答老師的問題。
設計意圖：通過對比操作、交流，再輔以知識遷移，明確本節課教學內容。
2、新授
（1）站內超級鏈接
引導學生回顧PowerPoint中超鏈接的制作方法（教師提示：右擊鏈接源，利用快捷菜單制作超鏈接），輔以教材中的內容，讓學生自行探究并完成以下操作：
任務1同一站點內不同頁面之間的鏈接
○1制作首頁（歡迎頁）到表格頁的超鏈接。
○2給表格頁內交互式按鈕設置超級鏈接，鏈接到相關頁面。
○3給框架頁內交互式按鈕設置超級鏈接，鏈接到相關頁面。
教師巡視，及時指導，安排學生示范操作并講解如何制作超鏈接。
交互式按鈕的超鏈接制作要求在框架網頁中演示操作。老師可以提問學生：演示者操作的對嗎？有沒有問題？
引導學生發現問題：超鏈接制作完成后需要檢驗（保存后預覽）。
教師講解，突破難點，再交由學生操作。
以上是同一站點內不同網頁之間的鏈接，有時一個頁面中內容過多，需要不斷拖動滾動條實現閱讀，能否實現快速跳轉呢？
任務2同一站點內同一頁面內的跳轉（鏈接）：在"動物趣聞"頁面內制作書簽鏈接。
教師講解：由生活中的書簽引入，介紹"書簽鏈接"的概念，然后再演示如何操作。
提示：書簽鏈接的雙向性問題（返回）。
學生認真聽講后模仿制作，教師巡視進行指導并反饋學生的完成情況。
（2）站間超級鏈接
僅憑我們課堂上制作的這些頁面還不足以詳細介紹我們的主題，此時我們還可以借助超鏈接，鏈接到因特網上的其他網站，以豐富我們的內容。
任務3借助熱區鏈接，為"友情鏈接"頁面制作超鏈接，鏈接我國一些自然保護區網站。
有了以上基礎，可安排學生自學教材中有關熱區鏈接的相關內容，學生探究操作后教師再安排學生進行演示，輔助以提問的形式檢驗學生的自學情況。
3、總結與評價
開展同學間的互助，檢驗其鏈接完成情況，推薦優秀同學做展示。引導學生分類總結本節課的知識點。
《網頁制作》教學設計 篇6
1、教學目標知識與技能：靈活運用添加超鏈接和在網頁中插入表格方法，根據網頁內容進行頁面布局，完善網頁,掌握網頁布局的技能和技巧。
過程與方法：培養學生加工信息和應用信息的能力及培養學生思維能力，規劃能力、創新能力、及合作能力。
情感與態度：使學生感受中國源遠流長的歷史文明，并通過網頁傳遞給世界；幫助學生樹立良好的信息道德意識；讓學生享受成就感，樹立自信心。
2、學生分析初中二年級學生感知能力較強,理解能力和抽象思維較弱；學生基本學會使用在網頁中插入表格的方法，但分析信息、處理信息和應用信息能力較弱；對教學內容的了解程度較強。
3、內容分析
教學重點：利用表格對網頁頁面進行布局。
教學難點：怎樣合理、美觀地設計網頁頁面布局。
此部分教學內容在整個網頁設計知識體系中處于綜合處理信息的重要部分。
4、教學策略設計
（1）．教學方法設計
我根據教學主題及其教學目標確定的教學指導思想是以學生為主體，以學生自己的親身體驗展開探究式小組合作學習。本節課采用研究體驗式教學法,建構主義模式下的任務驅動式教學法組織教學。首先設計“總任務”，再細分成若干“小任務”，實現教學目標。
（2）．教-學流程和教-學活動的設計思路
整個教學活動，尤其是學習活動，我采用探究式學習法，又稱研究性學習，我強調的是學生在教師指導下，根據各自的興趣、愛好和條件，再結合與自己有相同或相近的興趣、愛好的同學組成合作伙伴，共同選擇西安不同的旅游景點，確定研究課題，借助“表格布局”功能規劃七天的旅游行程，獨立自主結合小組合作開展研究，進行合理的網頁布局設計，達到從中培養創新精神和創造能力及審美能力的一種學習方式，實現“雙贏”。建構主義學習理論認為，學習過程不是學習者被動地接受知識，而是積極地建構知識的過程，把學過的網頁設計知識綜合應用起來，由于建構主義學習活動是以學習者為中心，而且是真實的，并且以完成特定的任務為動力，因而學習者就更具有興趣和動機，能夠鼓勵學習者進行批判型思維，能夠更易于提供個體的學習風格，展現自己的獨特思維，不受現有網頁模式的拘束。基于構建主義的探究性學習模式，我的設想是整個教學過程是動態的，學生是學習的主體，教師是學生學習環境的創設者、學習動力的激發者、學習過程的指引者和學生學習的協作者。
（3）．應用信息技術的依據或考慮
信息技術在本次教-學活動有不可替代的功能。利用信息技術中計算機技術進行網頁設計，實現教學目標，完成讓世界各地的人實現“網上游古都”。在教學中計劃通過探究式教學方式，小組合作學習方式和“任務驅動式”教學策略，自主設計網頁，發布網頁，運用網絡使信息技術的這些潛在優勢發揮作用并真正促進學生能夠結合實際應用，通過自主實踐，完成“網上游古都”任務，并同時完成了學習任務，進一步建構了自己的知識體系，并實時地享受到巨大的成就感。
（三）、教與學的過程
1．教與學的過程
活動內容
教師活動
學生活動
設計意圖
創設情境
激發興趣
［創設情境］
“要想了解中國上下五千年文明歷史，請到西安來！”近幾年，越來越多的外地游客涌向西安。“十一黃金周”即將來臨，大家想不想用網頁形式向外地游客介紹宣傳西安，讓更多的人來西安，領略其古老的魅力！我們上節課把利用搜索引擎找到的有關西安的歷史文物古跡的`文字信息和圖片信息整理制作成有關不同景點的網頁，但信息是否顯得很零散？怎樣把景點信息整合規劃，讓人們先在網上一飽眼福，輕松網上游古都？
設計一個含有指向各旅游景點網頁的超鏈接的主頁。
提供信息活條件，激發起學生的興趣。
［導語］
我們可在主頁中制作一個西安旅游景點導航欄，但怎樣合理規劃各旅游景點，并且使頁面布局美觀，整潔，分類清晰？
利用“表格”。
為細化任務埋下伏筆；并且激發學生的認知沖突。
［出示課題］
今天我們就圍繞“西安七日游”，在主頁中利用表格規劃設計旅游行程，本節課的課題是《“黃金周”—規劃網上西安七日游》
學生明確本節課課題，初步了解任務。
出示課題，介紹總任務。
［分組方法］
根據對各旅游景點的興趣及當初搜索信息的分工情況及本節課任務分工，四人一小組。
學生進行分組
為細化任務做準備
出示任務
明確分工
［出示總任務］
每個組圍繞主題，利用表格規劃設計旅游行程，并建立好超鏈接，利用主頁展示出來。
學生明確任務
明確總任務
［作品形式及分工參考］
形式：創建并完善主頁，并展示整個網站。
分工參考：
內容版式規劃
整理七個旅游景點網頁
超鏈接的建立與維護
作品演示解說
學生明確匯報形式，分工參考。
使學生明確各自任務后，通過研究，探討，操作，通過電腦媒體來完成任務。
活動內容
教師活動
學生活動
設計意圖
出示任務
明確分工
[角色分工]
學生自由分組后,共同研究選組長，組長進行給組員分配任務。
學生共同研究選組長,并協調分配好任務.
鍛煉學生自主協調分工能力。
［出示作品評價標準］
教師出示作品評價標準：
作品內容：設計含有七個鏈接網頁的主頁，資料豐富，內容準確。
技術表現：頁面布局設計合理，顏色搭配和諧，主題突出，作品演示運行正常，操作熟練。
創新特色：作品布局規劃有獨特之處，有新意。
提示學生有三條幫助熱線：
1、組長2、鄰座學習伙伴3、教師4、自學課件
學生明確要求。
培養學生的創新能力，規劃能力，思維能力和合作能力。
學生研究探索合作交流創作作品
［創作作品］
播放舒緩音樂，為學生營造自由和諧氣氛。
（提示學生利用網上鄰居把各組員的作品組合在一起，共同完成此任務。）
學生根據角色分工，按小組形式開始完善網站。
學生體會了超鏈接的作用，練習了超鏈接的使用，理解了表格強大的頁面布局功能；培養學生處理信息和應用信息的能力；通過學生間交流合作，老師及時點撥與指導，培養學生發現問題和解決問題的能力。
［展示作品］
下面請各組派代表，到教師機前展示以下你們的旅游行程。其他同學觀察后，可提意見或建議。
由小組代表展示組內作品，并詳細說明旅游景點規劃的呈現形式，內容選擇及整體構思。
鍛煉學生口語表達能力和分析說明問題能力。
合作成功展示作品成果匯報交流探討
［交流探討］
教師引導學生探討頁面布局的方法和技巧；談看完作品后，對其改進意見；進行組間互評和組內自評。
評出“最受歡迎獎”（即如果此網站上傳到網上，點擊率最高），“最具創意獎”“最佳布局獎”作品。
學生間相互交流探討。
培養學生合作交流能力。
［教師點評及檢測］
教師從頁面布局，整體規劃合理性，創意等幾方面進行點評。
學生思考，怎樣完善作品。
教師鼓勵學生發展創新思維，頁面布局規劃能力，邏輯思維能力及合作能力。
教師或其他同學提問頁面布局的方法。
學生代表演示
及時檢測學生對表格的掌握情況。
你受到的最大啟示和收到的最大收獲？成功經驗和失敗教訓？
學生回答
鞏固知識，培養情感
[完成旅游規劃，培養情感]
同學們已熟練掌握表格的使用方法，并且加工和應用信息的能力增強。
悠久的歷史積淀和豐富的人文資源，使西安居中國六大古都之首，是世界四大文明古都之一，著名的旅游中心城市。希望你們熱愛中國博大精深的歷史，感受西安古老的魅力！
學生感悟。
全課總結，培養道德情感。
全課總結知識延伸
［達到目標，知識延伸］
網站制作好了，怎樣讓世界各地的人都看到你們的網站呢？
想當我們的故鄉—大慶的小導游嗎？趕快制作一個“鐵人故鄉—大慶”的網站吧！
學生思考。
學生課后實踐。
為激發下一節課內容（上傳主頁）的興趣奠定基礎。
讓學生可把本課內容應用到實際生活中去。
培養學生自發探究能力。
2．關鍵環節提煉
利用信息技術創設情境，播放一段自拍的錄像，內容大體是：一位外國友人，想要來中國四大古都之一“西安”旅游，但想要自助游，想借助因特網，先在網上了解一下西安，并參考一下旅游行程。通過此錄像激發學生興趣并利用信息技術呈現問題，使學生產生認知沖突，培養學生發現問題、分析問題、解決問題的能力。我通過學生利用信息技術完成此項任務，促進學生對基礎知識、基本技能的學習。我利用信息技術，尤其是網絡提供的有關“西安”豐富的旅游景點介紹資源，幫助和拓展學生的學習。讓學生借助信息技術手段開展探索、總結并進行創作。我利用信息技術展示學生自評，學生互評，教師評價的評價表，為學生的學習提供評價、反饋和矯正。我利用網頁自學課件和網絡教室教學廣播系統支持師生間、生生間的交流對話。
3.教學反思
本節課主題明確、集中，讓學生分成小組，合作探究學習，給出特定的總任務，有利于學習效果評判的可比較性，也便于學生之間的廣泛交流和良性競爭。通過利用信息技術規劃規劃網上西安七日游，對西安七個主要景點的介紹，讓世界了解西安，每個學生在共同完成“網上游古都”網站作品后，讓每個學生都有完成任務和宣傳中國源遠流長的文明歷史的成就感，并感到自豪。
本節課，在小組合作學習過程中，學生之間互學互教，彼此交流探討，經歷了提出問題、分析問題和解決問題過程，每個學生都承擔一定學習任務，防止濫竽充數，促進了學生的參與程度、認知深度，高質量地實現了課程的目標，增強學生的責任感。但個別學生沒有認識到合作學習的重要意義，自主探究能力較弱，容易喪失信心。
教學實際實施過程，有學生提出：我對中國的少數民族文化感興趣，能否制作一個宣傳中國五十六個少數民族文化的特色網站？于是我了解到學生對中國的不同文化感興趣，可在課外活動小組完成此任務或作為課外自主探究性學習課題來探究。
本節課讓學生掌握了“表格”的妙用，還提高了加工信息和應用信息的能力，而且使學生感悟到了中國上下五千年的博大精深，對祖國更加熱愛。
（四）、教學評析：
在新課程標準的理念中，明確提出要關注全體學生，建設有特色的信息技術課程。在教材因篇幅的限制，提供給學生感知的背景材料極其有限，“信息”且都處于“靜止、儲存”狀態，不利于學生的感知和抽象概括。因此，允許教師在不改變教材內容、體系、結構的前提下，經教學法的加工，營造引入新課的“情境問題”的氛圍。學生在積極的參與、體驗、研究并在已有知識經驗的支持下，自主能動地探索，實現知識的再創造。
教學活動在面向全體的同時更注重學生情感的交流協作意識與因材施教。更注重學生個性培養和創新智能的開發。
學生自主性學習，需要有一個適應的過程，開始階段，布置任務要明確具體。
學生之間的交流和幫助比較少，自主學習的能力還要不斷提高等。
附：學生學習過程及典型成果
另附：小組成員分工表
第________組組長________作品題目______________
小組成員
主要負責工作
《網頁制作》教學設計 篇7
【教學目標】
了解用FrontPage制作課件的優勢與不足，學會用FrontPage制作網頁型課件，用FrontPage制作網頁課件
授課教案：
【重點難點】
重點是如何在FrontPage插入多媒體素材，難點是課件交互性的實現和網頁源代碼的應用。
【教學策略】
教師實例演示，學生上機操作，教師輔導和點評。
【媒體選擇】
主要采用FrontPage示范課件和實際操作講解相結合，并輔以文字教材、網上學習資源和教學光盤。
【教學內容】
現在越來越多的課件是用網頁制作工具來制作，并結合數據庫、 ASP等技術來加強課件的交互性。
網頁形式的課件可以集成豐富的多媒體信息，具有交互性強、制作簡易、體積小、便于在網絡上發布、傳播和更新等優點，適合于個別化學習、課堂教學和網絡教學。
網頁課件的開發工具軟件有很多，包括： 語言編程如 HTML 、 DHTML 、 ASP 、 JSP 、 PHP 、 JAVA 、 JavaScript 、 VBScritp 、 VRML等。
所見即所得的可視化編輯工具，如 FrontPage 、 Dreamweaver 、Flash 、 Authorware 、 PowerPoint 、 CourseBuilder 等。
對于一般都有繁重教學任務在身的學科教師來說，沒有太多的精力去學習復雜的編程語言。
可視化網頁編輯工具由于源代碼自動生成，使教師可以有更多的精力關注內容的表達和教學設計。
用FrontPage編制的網頁課件有較易操作的界面（與上網瀏覽網頁完全相同），一門課程或一堂課的脈絡結構（知識結構）可以在主頁上用菜單（樹形菜單或彈出菜單）或導航條的形式清楚地表明，可以列出教學目的、內容、重點難點、引言、概念性質、例題、練習、小結、作業等等，甚至操作注意事項。
FrontPage 被公認為最好的入門級的網頁編輯工具。
一、FrontPage基本操作
啟動 FrontPage ： 雙擊桌面上的 FrontPage 快捷方式圖標； 開始→程序→Microsoft FrontPage ；右擊一個擴展名為 htm 或 html 網頁文件，選“編輯”。
2. 打開或隱藏視圖欄、文件夾列表和網頁文檔
a. 點“視圖→ 視圖欄”打開或隱藏視圖欄。
點“視圖 → 文件夾列表”打開或隱藏文件夾列表。
b. 右擊擴展名為 htm 或 html 網頁文件（ 如 index.htm ） ，選“編輯”，系統默認用 FrontPage打開網頁。
c. 點“文件→打開”或點 常用工具欄中的“打開”按鈕， 從本地磁盤或網絡驅動器中打開網頁文檔，從任意 Web網站打開網頁，打開最近打開過的網頁文檔。
3. 在 FrontPage 編輯器中預覽網頁 a.點普通視圖按鈕，觀察剛才打開的 index.htm 網頁。
b. 點HTML 視圖按鈕，觀察 index.htm 網頁。
c.點預覽視圖按鈕，觀察 index.htm 網頁。
4.FrontPage 視圖方式：網頁視圖，文件夾視圖，報表視圖，導航視圖，超級鏈接接視圖，任務視圖。
5. 保存網頁： 點“文件 →保存（另存為）”或點常用工具欄中的“保存”按鈕，將新建的網頁或從萬維網上打開的網頁保存到本地磁盤，把自己喜歡的網頁作為模板保存。
6. 關閉網頁： 點“文件 →關閉”或文檔窗口 中的“ X”按鈕，關閉當前網頁。
二、設計網頁課件的框架結構
三、在網頁中插入表格、圖像、背景、 剪貼畫、聲音、視頻和動畫等多媒體對象
1. 插入表格 插入到網頁上的文本、圖片、音頻、視頻、動畫等元素，往往看起來顯得不夠整齊，為了使網頁更美觀，我們利用表格來控制復雜的網頁布局，即 用表格來定位 網頁元素 。
（1） 點“表格→ 插入 → 表格”，輸入行數、列數（如 3 列 5 行），插入一個規則表格， 設置表格的屬性。
（2）用“表格”工具欄上的 按鈕或“表格”菜單上的“插入行或列”命令來增加 表格的 行或列。
（3）用“表格”工具欄上的按鈕刪除一個單元或多個單元，刪除一行、多行或一列、多列，刪除整個表格，表格刪除后立即按“常用工具欄”中的“撤消”按鈕或按“Ctrl+Z ”恢復表格；選擇單元格或單元格中的內容用鼠標把選擇的內容拖到新位置進行移動；按住 CTRL鍵，再用鼠標把選擇的內容拖到新位置進行復制。
（4）選中需要拆分的單元，單擊“表格”工具欄上的按鈕或使用“表格”工具欄上的“筆”拆分單元格；選中需要合并的單元，單擊“表格”工具欄上的按鈕或單擊“表格”工具欄上的（擦除 ） 按鈕合并單元格。
經過處理， 3 列 5 行的表格 變成 1 列 4 行。
2. 插入圖像和背景圖象將鼠標定位到要插入圖片的位置（如某個單元格內），單擊“常用工具欄”上的“插入圖片”按鈕，從已建站點的圖片文件夾中 選擇 合適的圖片，點擊“確定”。
也可以 在“圖片”對話框中點擊“插入一個計算機中的圖片”按鈕， FrontPage編輯器將打開“選擇文件”對話框，從本地磁盤中指定一個圖像文件。
右擊網頁空白處，選“ 網頁屬性 ”快捷命令，單擊“ 網頁屬性”對話框的“背景”選項卡，先選中“背景圖片”復選框，選擇合適的圖像作為背景圖插入網頁，點擊“確定”按鈕。
3. 插入剪貼畫點“插入”→“圖片”→“剪貼畫”命令，選擇一幅剪貼畫，單擊“插入”按鈕，或直接雙擊剪貼畫。
4. 插入聲音或視頻剪輯選擇“插入”→“高級”→“插件”命令，打開“插件屬性”對話框，單擊“瀏覽”按鈕，打開“選擇插件數據源”對話框，從站點文件夾或本地計算機上指定要播放的聲音或視頻文件。
調整網頁中插件圖標到合適的尺寸。
5. 修改圖像屬性右擊網頁中的圖像，選“圖片屬性”命令，在“常規”選項方式下指定圖像的格式（例如 jpg 和質量 75）；在“文本”框內簡單地描述圖像；單擊“外觀”選項卡，指定圖像無邊框即邊框線寬度為 0，指定圖像與相鄰的文字或圖像之間的水平間隔和縱向間隔，要改變圖像的大小，首先選中“大小”框內的“指定大小”復選框，然后分別指定圖像的寬度和高度。
熟悉“圖片”工具欄：創建自動縮略圖；調整圖像的黑白對比度和亮度；給圖像加上斜面邊界；把彩色圖像變成黑白圖像；把圖像翻轉；修正圖像；裁剪圖像；淡化圖像；把圖像恢復原樣；在GIF 格式的圖像上寫文字；使 GIF 圖像透明等。
6. 插入水平線美化網頁網頁水平線用于把網頁分隔成幾個部分。
新建或打開網頁文檔，把插入點移到要插入水平線的地方，單擊“插入”菜單上的`“水平線”命令。
要把水平線插入在下一行，就把插入點定在行尾。
在水平線上單擊鼠標右鍵，在彈出的菜單中選擇“水平線屬性”命令，也可直接雙擊該水平線，設置水平線的寬度、 水平線的對齊方式和水平線的顏色。
四、在課件網頁中使用書簽和超級鏈接接
1. 書簽的作用書簽用于在長網頁內部快速跳轉和定位。
2. 創建書簽網頁 從 Web網頁上復制一篇比較長的文本，粘貼（選擇性粘貼：無格式文本）到新建網頁中。
選擇要標記的位置，單擊“插入”菜單中的“書簽”命令。
FrontPage編輯器將顯示“書簽”對話框。
在“書簽”框中鍵入書簽名稱（最好用西文命名），書簽名稱應具有較好的描述性，然后單擊“添加”按鈕。
可看到標簽小旗出現在期望定位的位置上。
用同樣的方法創建其它書簽。
在網頁頂端創建系列提綱（目錄）文本，選中其中一個，右擊文本，選“超鏈接”，在“鏈接到”欄中點“本文檔中的位置”，在書簽列表中選中合適的書簽，確定。
用同樣的方法給其它的提綱（目錄）文本建立超鏈接。
保存網頁，在IE 中預覽。
3. 超級鏈接 使用超級鏈接，不僅可使站內的網頁成為一個有機整體，還可使不同的站點之間建立聯系。
例如，在制作“網上學習資源”網頁時，需要給所列出的大量的網上學習資源的標題文字設置超鏈接，以便訪問者通過點擊網頁上的標題文字打開相對應的學習資源。
首先選中標題目文字，然后單擊標準工具欄上的“超級鏈接”按鈕，在彈出的“創建超鏈接”對話框中指定超級鏈接所對應的網頁，或在URL 文本框中填入網頁的地址即可。
4.創建圖像熱點作為超級鏈接接新建或打開包含有復雜圖片（如地圖或大型儀器圖片）的網頁。
練習創建圖像熱點作為超級鏈接接。
例如，在世界地圖片上的“國家地區”區域處創建一個熱點，指定它跳轉到“按國家地區查詢”的主頁上。
方法是：首先單擊圖像，編輯器將顯示“圖片”工具欄，選擇“圖片”工具欄上的“圖片”按鈕，把光標移到圖像上，光標將變成筆狀，按住鼠標左鍵在圖像上畫出熱點。
釋放鼠標后，FrontPage 編輯器自動打開“創建超級鏈接”對話框，在此指定該熱點要跳轉的目標網頁或網址。
制作好后在 IE瀏覽器中預覽。
5. 改變超級鏈接的外觀選擇某文字超級鏈接，單擊“格式”菜單上的“背景”命令，打開“網頁屬性”對話框的“背景”選項。
把該超級鏈接的顏色改為另一種更醒目的顏色，預覽一下，看超級鏈接文字是否發生變化。
試著用不同的顏色表示未訪問過的超級鏈接（Hyperlink） 、訪問過的超級鏈接 （Visited Hyperlink） 和將要訪問的超級鏈接 （ActiveHyperlink） 。
看看改變超級鏈接的外觀的效果。
6. 編輯超級鏈接屬性右擊超級鏈接，選“超級鏈接屬性”，FrontPage編輯器將打開，在URL框內鍵入新的網頁文件名或網址。
觀察改變后的效果。
7. 取消超級鏈接右擊超級鏈接，選“取消超級鏈接”命令。
五、插入活動元素 - 讓課件網頁活起來
1. 制作懸停按鈕定位插入點，單擊“插入” / “組件” /“懸停按鈕”，打開“懸停按鈕”對話框。
把動態按鈕默認標簽“按鈕文本”，改成所需的按鈕文字，單擊“字體”按鈕，在打開的“字體”（字體）對話框里設置您所需標簽的字體。
要為動態按鈕創建超級鏈接，可直接在“鏈接到”框內鍵入要跳轉的URL ，也可單擊“瀏覽”按鈕，從當前打開的網站、 WWW、本地磁盤中指定跳轉目標。
可重新指定按鈕的前景顏色，不過如果按鈕顯示的是圖像，前景顏色無效。
當用戶把鼠標移到動態按鈕上時，按鈕的顏色將自動發生變化，這是動態按鈕最大的特色，至于顏色是怎樣變化的，可通過“效果”和“效果顏色”框設定。
還可改變按鈕的寬度和高度（以像素為單位）。
《網頁制作》教學設計 篇8
一、教材分析
首頁之外的其他網頁在結構上很相似，為了給這些網站增加一些亮點，故在網頁中插入了交互式按鈕，交互式按鈕不僅具有超鏈接功能，在使用過程中還會發生變化，更能引起學生的學習興趣。
二、教學目標
1、知識性目標
（1）了解交互式按鈕的功能；
（2） 了解計算機主機包括的部件；
（3）了解網頁動態效果。
2、技能性目標
（1）會設置網頁的目錄；
（2）學會插入、修改交互式按鈕；
（3）學會復制表格。
3、情感性目標
（1）加深對計算機硬件的認識；
（2）培養學生分工協作的`精神。
三、教學重、難點
1、教學重點
（1）交互式按鈕的功能；
（2）插入、修改交互式按鈕。
2、教學重點
（1）交互式按鈕；
（2）復制表格。
四、教學準備
制作一個具有幾個漂亮交互式按鈕的網頁。
五、教學過程
1、導入
教師：現在我們的首頁已經做好了，可是其他的網頁還沒做，但是一節課內無法做太多的，今天呀我們就來學習制作“主機”網頁吧！其余的以后在做.
2、學習新課。
（1）指導學生用表格布局；
教師：用表格對網頁進行布局方法，前一堂課我們學習了，現在就請同學們，對照課本用表格給 “主機”網頁進行設置。
學生看書練習。
（2）指導學生學習插入交互式按鈕；
教師：在網頁內經常會插入具有超鏈接功能的按鈕，單擊這些按鈕，便可打開其他網頁，請同學們看下面具有交互式按鈕的網頁。
屏幕展示。
教師：下面我們就來學習如何制作交互式按鈕。
教師示范講解，學生觀察。
學生練習、老師巡視指導。
3、鞏固練習。
請同學們試著完成書中本課的“試一試”中的練習，在遇到困難時可小組同學相互幫助，也可以舉手問老師。
4、總結評價。
教師總結后，請同學根據自己掌握的知識情況和收獲，在本節課的“評一評”中打上自己的成績。
【《網頁制作》教學設計】相關文章：
網頁制作教學設計12-03
制作網頁教學設計10-07
網頁制作的教學設計01-30
網頁制作教學設計優秀10-17
《制作網頁》教學設計（精選5篇）12-04
網頁設計與制作報告11-17
網頁制作教學設計（通用8篇）04-16
《網頁制作》教學設計（通用5篇）12-04
網頁制作的教學設計(優選3篇)03-28