製作網頁教學設計

作爲一位傑出的教職工，就難以避免地要準備教學設計，教學設計一般包括教學目標、教學重難點、教學方法、教學步驟與時間分配等環節。那麼寫教學設計需要注意哪些問題呢？下面是小編整理的製作網頁教學設計，歡迎大家借鑑與參考，希望對大家有所幫助。

製作網頁教學設計1

一、課程基本信息

課程編號：

中文名稱：網頁設計與製作

英文名稱：Web Design and Production課程類別：選修課適用專業：所有專業

開課學期：20xx—20xx第2學期總學時：24學時總學分：1課程簡介：

本課程突出網頁設計與製作的現代特點，從Internet的基礎知識入手，重點介紹HTML超文本標記語言，以及所見即所得的網頁設計製作工具Dreamweaver的基本操作流程。從靜態頁面到動態頁面由淺入深的介紹網頁設計與製作全過程。採用案例分析和親自實踐的`方式突出、突破課程的重點和難點。並指導每一名選課的同學爲自己建一個博客網站，以此提高同學對網頁設計與製作的興趣和愛好。參考書：

1、網頁設計與製作教程，熊前興閔聯營，科學出版社；

2、網站與網頁設計，張貴明，清華大學出版社；

3、網頁美術設計原理及實戰策略，王曉峯焦燕，清華大學出版社；

4、網站建設典型案例，張梟，清華大學出版社；

二、課程教學目標：

網頁和網站是Internet的重要組成部分，企業、公司和機構通過網站來宣傳推介自己的技術和產品，個人發佈主頁展示自己的風采，人們從不同類型的網站來獲取需要的信息。因此，設計與製作網頁已經成爲計算機應用技術的一個重要方面。本課程的主要教學目的是使學生掌握網頁設計與製作的基礎知識，能運用網頁工具設計和製作常用網頁。

三、理論教學內容與要求

第一章、網頁的基礎知識（1學時）

（1）Internet基礎知識

（2）www簡介

（3）網頁製作的技術和工具介紹

第二章、超文本編輯語言HTML（8學時）

（1）HTML文件的基本結構

（2）文字和段落標記

（3）列表標記

（4）圖片標記

（5）表格標記

（6）超鏈接標記

（7）表單標記

（8）框架標記

第三章、JavaScript語言（4學時）

（1）JavaScript語言簡介

（2）JavaScript編程基礎

（3）基於對象的JavaScript語言

（4）JavaScript程序實例

第四章、層疊樣式表CSS（1學時）

（1）CSS概述

（2）CSS屬性

第五章、可視化網頁設計工具

（1）網頁的基本操作

（2）圖像、表格與超鏈接

（3）表單與框架

（4）添加網頁元素

（5）發佈站點

第六章、動態網頁設計語言ASP（4學時）

（1）ASP簡介

（2）VBScript腳本基礎

（3）ASP的內置對象

（4）實用文件

第七章、利用AD0訪問數據庫（1學時）

（1）數據庫的連接

（2）數據庫的檢索

（3）數據庫的操作

總結複習（1學時）

四、實驗教學內容與要求

五、作業

六、考覈方式

期末考覈每個同學爲自己設計製作一個博客網站。

七、成績評定

1、自制網站（80%）

2、平時考勤、作業（20%）平時成績分配：

平時考勤5次，每次2分，共佔10%作業5次，每次2分，共佔10%

八、執行大綱時應注意的問題

根據學生對課程內容的掌握和理解程度會對進度做適當的調整。

製作網頁教學設計2

　　一、教材分析

本課是FRONTPAGE中一節基礎內容課，也是FRONTPAGE以後知識學習的鋪墊。本節課以製作一個簡單網頁爲教學任務，學習目的明確，步驟清楚，希望完成任務而初步掌握簡單製作步驟的指導思想。同時對學生網頁的創作能力、網頁佈局和色彩搭配能力進行激發與培養。併爲其以後進一步學習網頁製作而打下良好的基礎。本節課的重點是網頁常用編輯器以及網頁設計佈局，難點是網頁的設計及佈局。教師重點在導，學生重點在實踐與創新。爲了合理利用上課時間，將用已有部分拓展知識和演示範例利用網絡下傳至學生機，以利於學生上課的實踐與創新。

　　二、學情分析

我校的大部分學生在國小就接受過系統的信息技術課程學習，具備了一定的計算機操作能力，加上初

一、八年級也學完了word execl powerpoint的知識，應該說學生都具備了一定的基礎。但也有部分學生基礎沒有打好，但基本的操作應該沒有多大問題。因此，在教學過程中關於frontpage的打開與保存，這裏我讓學生自己去學習，教師只給予必要的提示。而關於HTML和講授網頁佈局的過程時，有必要要教師先演示一下，這也是本節課的重難點。

　　三、教學目標分析：

1、知識目標：

通過本節的教學，學生將瞭解常用的網頁製作軟件，掌握frontpage的操作界面，並能親自嘗試做出簡單的網頁作品。

2、過程與方法

學生將通過教師的引導，學會通過自主的研究探索，主動獲取知識，並運用知識解決問題，逐步地培養自己的創新精神和實踐能力。這對於學生以後的進一步學習很有幫助。具體過程：課題引入-----教師提示------學生上機自主學習------問題反饋-----教師演示-----學生完成作品-----優秀作品點評-----教師小結-----鞏固練習-----課後探究、實踐。

3、情感、態度與價值觀①活動教學激發學生學習frontpage的興趣。

②培養他們自主學習、互相協作的良好學習習慣以及自主創新精神。

4、重點、難點

重點：瞭解常用的網頁製作軟件，掌握frontpage的操作界面。

難點：網頁的合理佈局和色彩搭配。

四、教法闡述

爲了實現以上教學目標，結合教材特點，本課採用的主要教學方法有“任務驅動法”、“創設情境法”等。通過學生已經受過的美術教育和信息技術教育（課程整合），創設一個Inter網頁在線的情境（創設情境法），設置一個個任務，讓學生運用已學知識，自己動手，有機完成課堂設計的各種操作（任務驅動法）（包括：瞭解常用軟件的概況，利用word對frontpage的操作界面熟練掌握，完成自己的第一個網頁設計。）以任務驅動的方式查漏補缺，使教學內容合理流動，水到渠成。教學中，啓發、誘導貫穿始終，充分調動學生的學習積極性，注意調節課堂教學氣氛，使學生變被動學習爲主動愉快的學習，使課堂能在生動、有趣、高效中進行。

五、學法指導

本課教給學生的學法是“接受任務——思考討論——合作操練”。建構主義學習理論強調以學生爲中心，要求學生由知識的灌輸對象轉變爲信息加工的主體。故此本課教學過程中，巧妙設計，讓學生帶着一個個任務通過課堂討論、相互合作、實際操作等方式，自我探索，自主學習，使學生在完成任務的過程中不知不覺實現知識的傳遞、遷移和融合。

六、教學設計

1、收集資料，激發興趣。

在這一環節中，教師利用課前準備好的前期省市獲獎網頁作品，並將之融合到課件中。教師結合國中學生特點和鄉土教育，故利用屏幕廣播播放《我的家鄉》和《思品齋》，讓學生共同欣賞，從而引導學生的創作慾望，激發其興趣。

設計意圖：通過網頁實例的導入，將課堂氣氛調節得比較活躍，讓學生更容易進入學習狀態，爲以下的學習做好鋪墊。

2、初識網頁製作軟件。在激發了學生學習興趣後，教師趁勢提出：你們也想製作這樣的作品來表達自己的想法嗎？順勢引出“三劍客”的概念，引導學生了解常見的html編輯器。

設計意圖：通過學生感興趣的問題設問，吸引學生的注意力，激發學生的學習興趣。

3、層層攻關（任務驅動逐步提高分層教學）

欣賞過網頁，教師就提出與學生共同製作簡單的網頁的想法。在授課中我安排了多次的動手製作活動，製作難度由淺入深，旨在通過學生自己動手動腦，形成自主探究進而創作的能力。

（1）第一關：基本任務：邊學邊做，牛刀小試

由於是初次製作，所以不易過難過複雜，所以選擇了讓學生自主進入frontpage的界面，因爲有office前面知識做鋪墊，學生進入操作界面並可以在較短的時間內熟悉基本的操作界面，又有助於形成學生內心的成就感，提高學生繼續學習的積極性。後巡迴輔導並觀察哪些學生用的方法最快、最簡便。

學生：自主學習、互相協作，也可以參考教師已下傳上操作方法或正確樣例。設計意圖：這是第一關任務，對於已有計算機操作基礎的學生來說相對較簡單。所以我這裏給出提示與操作方法後讓學生自己去過這第一關。讓學生學會操作，並嘗試不同的操作方法來解決問題。（2）第二關：進階任務：由學到創，拓展提升

在學習完成第一個環節後，教師趁勢提出html的概念，實例中字體、大小、顏色變化，引導學生觀察普通、html、預覽的不同，以及相關的操作方法。在此基礎上，教師進一步設置了拓展問題，讓學生設計自己的網頁，並通過簡單網頁的製作體會html的具體含義。最後教師選擇相關學生進行總結，教師注意點評。

學生：根據剛纔學習的知識和教師提供的素材。先完成自己的作品並與同學進行交流和溝通。學生通過不斷的實踐，簡單修改html的方法，並進行演示。

設計意圖：這是第二關任務，其中html也是本節課的重難點，所以教師先用一種常用方法演示html的內容，而修改讓學生自主學習完成。同時讓學生相互進行交流，有助於提高他們的學習積極性與成就感，又可以培養他們之間互相幫助學習的良好習慣。方法多樣讓學生學會用不同的操作方法來解決實際問題，但得讓他們自己去實踐，這有助於培養他們自主學習的'良好習慣。（3）第三關：挑戰任務：展翅高飛，自由創作

在學習製作完第二個環節後，引導學生進入“網頁達人”的環節，本環節主要講解網頁的佈局等知識，由教師演示常見的網頁佈局格式，並簡單的給學生進行點評和原理分析。在此基礎上，引導學生結合自己的上網經歷仔細對比異同，同時歸納適合個人網頁的佈局和顏色搭配方式。

設計意圖：在第二關的基礎上，對出現的問題，進行分析、演示。讓學生在掌握操作技術的基礎上對網頁佈局和顏色搭配有進一步的認識，在此基礎上形成對學生審美觀的培養。完成第三關操作任務即完成自己的作品。讓學生能設計出有創意的作品，培養他們的創新精神。考慮到學生之間的差異，在這裏只對背景和圖片的接觸和了解，讓計算機基礎好的一些學生能探索出新的知識操作。

4、評價作品教師總結 評價作品

（1）學生互評：通過教師設置的共享文件夾了解其他學生作品，學生互相發表意見。

（2）學生自己推薦：認爲自己作品好的學生可以舉手向老師推薦。（3）教師總結評價：教師對學生們評價出的優秀作品以及自己推薦的作品作評價並結合作品完成的時間前後評選出前5位優秀作品並進行表揚。

設計意圖：培養學生評價他人作品的能力。互相欣賞作品可以讓學生來檢測自己的學習成果，知道彼此之間的差距。讓學生有成就感，從而激發學生的學習積極性，進一步活躍了課堂氣氛。

教師總結

教師結合學生作品和上課的具體情況總結本節課的主要內容，注意強調知識目標和情感態度價值觀的總結。

5、知識競答大比拼

教師演示準備好的一個知識競答遊戲，學生觀看大屏幕，搶答題目。設計意圖：用遊戲形式的鞏固練習即讓學生對本節課的知識學習得到反饋，進一步鞏固所學知識，又可以活躍課堂氣氛。

6、課後探究實踐

教師給出提示，引導學生自主學習，充分挖掘他們的學習潛力

設計意圖：讓學生在課後有思考問題的空間，進一步激發他們學習frontpage的興趣。培養他們自主學習計算機其他操作知識。

製作網頁教學設計3

　　一、教材分析

《網頁製作》教學是信息基礎必修教材中第六章第1節信息集成中網站製作簡介的有關內容。編輯網頁所使用的是軟件是Frontpage20xx，該軟件的使用與以前所學的word有類似的地方，軟件操作具有一定的遷移性。

二、學情分析

學生在之前已經學習了word的有關操作，具備網上獲取信息和一定的信息處理能力。Frontpage20xx的使用與word有很多類似的地方，學生較容易上手。

三、教學目標

知識與技能：瞭解網頁的基本元素；掌握網頁製作中網頁元素的應用；懂得利用表格佈局網頁的基本思想；

過程與方法：通過實踐體驗對比，得出結論。親歷網頁製作的過程。情感態度與價值觀：在與同伴合作完成簡單網頁的製作過程中，培養與他人合作交流的意識和習慣，通過設計學校網頁，培養學生熱愛學校的情感。

四、教學重點、難點

教學重點：網頁製作中網頁元素的應用

教學難點：利用表格佈局網頁

五、教學方法：合作探究法、任務驅動

六、教學過程

（一）情境導入

師：用PPT展示一組美麗的學校風景圖片，師生共同欣賞。同學們一看就知道這是我們白蒲中學的風景圖片。我校曾被評爲江蘇省十佳花園學校，請大家思考一下如何讓更多的人瞭解我們學校的美呢？大家有什麼好的方法嗎？

生回答：通過網絡發佈，需要製作網頁（如回答不在話題上，引導）

師：本節課我們就一起來學習製作《美麗的蒲中校園》網頁，宣傳學校的美。學校將組織評選同學們設計的優秀網頁作品，放在學校網站上。

（二）新課講授

師：這裏，老師挑選了去年學生設計的優秀網頁作品，我們一起來欣賞。展示校園頁面，提問：這個頁面中由哪些元素構成的？

生：文字、圖片、動畫、聲音、超鏈接等。

師：網頁裏的這些元素是通過什麼工具集成起來的`呢？在這裏，老師向大家介紹office20xx中的frontpage20xx來製作網頁，它具有功能強大、簡單易用的特點。

教師演示啓動frontpage20xx的步驟，啓發學生：界面和學過的哪個軟件比較相似？教師點擊相關菜單，引導。由於都是office套件的一種，所以和word界面很相似，演示界面和功能。演示打開站點bpzx，站點打開後，觀察網站文件夾的結構，介紹images文件夾與_private文件夾的作用。後綴名爲.htm，代表的是網頁文件。其中，表示網站的主頁名稱。點擊視圖下的網頁，切換到網頁窗口，點擊文件夾，切換到站點文件夾窗口，點擊bpzx站點文件夾，便於我們打開網頁文件。

師：剛纔同學們的都非常好，在製作網頁前，我們先來放鬆一下，來玩拼圖。請同學們打開D盤的《網頁製作》學案，完成實踐一。

實踐一：2個小實驗

實驗1：啓動Frontpage後，點擊“文件”“打開站點”，找到D盤下的bpzx文件夾。雙擊文件夾列表裏的文件，學生嘗試拼湊圖形。

實驗2：雙擊文件夾列表裏的文件，學生嘗試拼湊圖形，將圖形按順序拖到表格的單元格里，並適當拖到表格的邊框，能拼湊成功嗎？

學生操作，發現實驗1中的圖形總有1個無法拖動，拼湊不成功，實驗2在表格中拼湊圖形成功。

教師啓發學生思考，引導學生觀察一開始出示的網頁，發現圖片、文字、動畫等網頁元素排列整齊。

師：是什麼在起作用？

師生共同得出：利用表格佈局網頁。得出：表格的定位。

師：利用表格的佈局功能。表格的佈局功能可以對頁面元素進行定位，使網頁清晰美觀、富有條理。表格中可以包含多種類型的內容，如圖像、文本、多媒體文件。

師：在網站文件夾裏有一張利用表格佈局的“美麗的蒲中校園”網頁，今天，老師要請你們當網頁設計師，完成“美麗的蒲中”網頁製作。製作學校風景，需要什麼樣的素材？學生回答：圖片。老師已經預先把素材準備好了，大家可以打開acde瀏覽素材，選擇合適的素材。

實踐二：雙擊文件夾視圖裏的。

任務一：請大家從D盤的sucai文件夾中，從7張校園風景圖片中挑選其中一張，插入網頁表格的適當位置。文字材料直接從sucai文件夾中的word文檔中複製。注意頁面的保存，保存時要注意：網站中用到的圖像、聲音、視頻文件應有條理地存放到指定文件夾中。當保存圖片時，要把圖片保存到images文件夾中。

學生自主操作，4人一組合作學習。教師巡迴輔導。操作中的操作步驟要點參考《網頁製作》學案。

任務二：在單元格中各插入gif圖像動畫、歡迎字幕和flash動畫,，以實現頁面的動態效果。注意保存和預覽。

可能的問題：1、圖片屬性設置2、flash動畫的插入教師展示一部分學生的作品，點評，小結。學生再次練習完善。

師：剛纔，同學們的表現都非常出色，要想使自己的網頁更漂亮、更受歡迎嗎？

實踐三：

任務一：美化頁面操作小貼士：

操作右擊網頁空白處，“網頁屬性”，“常規”，輸入標題。切換到“背景”，設置背景色。設置背景圖片：可勾選“背景圖片”，“瀏覽”。

任務二：打開頁面，對“美麗校園”創建超鏈接到。操作小貼士：

創建超鏈接：選定文字，“插入”、“超鏈接”，選定超鏈接的網頁。學生合作學習，教師巡迴輔導。教師展示學生作品，點評，小結。

教師提醒學生，做好後的網頁，在瀏覽器裏預覽，發現有邊框線，如何解決？學生自主探究。

三、課堂總結

製作網頁教學設計4

教學目標：

1、讓學生掌握在網頁中插入表格的方法以及表格的修改

2、學會利用表格來規劃網頁

3、培養學生創新的能力以及動手操作的能力

教學重、難點：

利用表格來規劃網頁，從中培養學生的創新能力

教學過程：

一、情境導入

同學們你們善於觀察嗎？老師先考考你們，我們一起來看一組圖片，你們看看在那裏看過呢？學校緩臺的窗臺上。你們的觀察能力真的很強啊，對，這些都是我們學校美術的特色作口，盤畫。其實，我們做過很多作品：有手工作品，語文課中的作文、書法等都是作品，這節課我們以繪畫作口品爲例，做一個學習園地網頁，把我們的作品展示到自己的班級網站中，以便我們更好的努力學習。現在我們就一起來製作吧！

二、新知探究

首先我們來打開上節課的班級網站，在這個網站中新建一個網頁，並保存成“學習園地”。

教師講解：如何製作學習園地網頁。

1、製作網頁的標題：輸入文字，並設置文字的格式。

2、插入表格：單擊“表格”中的“插入表格”並對錶格屬性進行設置。如：行、列的操作，對齊方式等。同時講解什麼是行，什麼是列，以及單元格的概念。

3、修改表格：調整表格行高和列寬。

4、在學生學會插入表格的基礎上，來設計網頁，展示作品。並講解在單元格中可以插入圖片、文字。那我們就一起快快去做吧！插入圖片，並在圖片的上面或下面進行圖片的註釋。

5、進一步設置單元格的背景，來美化網頁。

6、設置超鏈接：通過導航欄目，設置文字超鏈接。選中文字，點擊右鍵選擇超鏈接在列表中選擇你要鏈接的.網頁，單擊“確定”按鈕。

7、學生在教師的講解後，學生自己動手操作製作網頁。教師進行指導。（伴隨音樂）

三、作品評價

1、生評：從網頁設計上，美觀程度上，知識落實上重點評價。

2、師評：對學生作品進行評價，並對其它學生的評價加以更完整的解釋。

四、總結

我們這節課主要是利用了表格來設計網頁，以使來美化我們的網頁，通過繪畫作品的展示，學習更多的知識。

製作網頁教學設計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、知識與技能：

（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郵箱頁面等，引導學生總結本課內容，梳理課堂知識，並讓學生分組，推薦一些優秀作品進行全班展示。

設計意圖：開拓學生的視野，使學生了解框架的應用，教會學生要善於總結，要學會學習的方法。

製作網頁教學設計7

一、教學目標：

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、本節課是在學習完簡單網頁、表格佈局網頁、交互式網頁的基礎上，進一步頁的設計方法。由於學生已經具備了一定的網頁設計基礎知識與技能，所以教師可以根據學生的實際情況，採用更靈活

的教學方法。教師可以簡單介紹框架結構網頁的功能及框架的'建立與編輯方法，以及框架屬性設置與網頁屬性設置的方法與區別。然後由學生根據教師提供的學案及演示動畫，完成框架網頁設計任務。

網頁製作教學設計5

一、學習內容分析

《H5快速製作網頁》是蘇教版《國中信息技術》8年級第3章《主題網站設計與製作》第2節《製作網頁》中第1課時的內容。H5是指第5代HTML標記語言，其搭建的站點可方便地應用於PC、Android、iOS等多種平臺，它爲互聯網內容的呈現提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。通俗地說，H5是一種創建網頁的方式，用H5創建的網頁以文字、圖片、動畫、聲音等相結合的富媒體出現，頁面圖文並茂、生動活潑、傳達方便、易於推廣。

二、學習者分析

本節課的學習對象是八年級的學生，處於這一年齡段的學生，思維活躍，具備一定的理解能力和較強的自學能力。通過前面的學習，學生已熟練使用WPS、Photoshop等軟件，也掌握了規劃設計主題網站的方法。本節課以iH5軟件工具爲平臺，學習用H5快速製作網頁。然而學生從未接觸過iH5，對於陌生軟件的學習，有些畏難情緒，覺得無從下手。但是在日常生活中，他們經常能接觸到各種各樣的手機H5網頁，如企業宣傳、個人簡歷、邀請函、紀念冊等，這些H5網頁給大家帶來了全新的體驗，技術本身帶來的新奇感讓學生心生嚮往。

三、學習目標

知識與技能：能列舉H5網頁的特點；掌握在iH5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設置對象屬性的方法，理解舞臺、頁面、對象之間的層級關係。

過程與方法：通過製作校園文化藝術節邀請函，經歷製作H5網頁的基本過程。

情感態度及價值觀：感悟網頁製作並非難事，軟件使用有共通之處。

四、教學過程

（一）創設情境，初認H5

以藝載德、以藝促智，一年一度的校園文化藝術節又開始了，同學們踊躍報名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”爲主題的彙報演出，充分展示八年級同學的青春活力和精神面貌。

思考：本次演出將要邀請家長參加，你會選擇什麼樣的方式來做出邀請呢？（口頭傳達、短信、紙質邀請函等）

活動1：體驗“校園文化藝術節邀請函H5”，初認H5。

（1）二人一組，一位同學在手機瀏覽器中打開；另一位同學在電腦瀏覽器中打開（網址：https://xxxxxx）。瀏覽後回答以下問題：

不同平臺的瀏覽效果是否一致？爲什麼？

這支H5中具有哪些媒體元素？

用戶能參與其中嗎？

你會用什麼方式推廣這支H5？

小結：

（1）H5具有跨平臺、支持多媒體、可交互、易推廣等優勢。以上特點使得H5可能成爲我們發出邀請的首選。

（2）“校園文化藝術節邀請函H5”爲何如此吸引人？觀看視頻，思考到底什麼是H5？

小結：H5是指第5代HTML標記語言，也指用H5語言製作的一切數字產品。通俗地說，H5是一種創建網頁的方式。用H5創建的網頁圖文並茂、生動活潑、傳達方便、易於推廣。

設計意圖：與H5相關的概念性知識抽象、枯燥難懂，如果採用講授法，學生並不容易理解。因此本節課創設了學生現實生活中的情境，以製作校園文化藝術節邀請函H5爲主題，設計了4個問題，每個問題目標指向明確，容易引起學生的共鳴，激發學生的思考並得出結論。通過微視頻用通俗易懂的語言幫助學生進一步認識H5，內化知識。

（二）根據需求，規劃H5

凡事預則立，不預則廢，要製作彙報演出邀請函，首先對每個頁面的內容、素材等進行一個簡單規劃。

活動2：根據需求，選擇素材，規劃邀請函。

設計意圖：學生已經學習過網站的規劃，所以容易理解規劃的重要性。教師通過搭建“規劃表”這個支架，引導學生根據製作校園文化藝術節邀請函的需求，對所要製作的邀請函進行初步的規劃，幫助學生理清楚每個頁面的內容和所需添加的元素。

（三）知識遷移，製作H5

能夠用於開發H5網頁的工具很多，今天以iH5軟件工具爲平臺，學習使用H5快速製作網頁。

活動3：找“共性”，探“個性”，認識iH5軟件。

（1）使用課前申請的賬號，登錄網址：，進入在線編輯平臺。

（2）對比Photoshop界面，認識iH5界面，找出相同之處和不同之處。

小結：相同之處：_______________________（菜單欄、工具面板、編輯區）

不同之處：_______________________（對象樹面板）

（3）比較PS中的圖層面板和iH5中的對象樹面板，思考對象樹面板的作用。

小結：對象樹面板可以用來管理舞臺中的對象，對象樹中的層級關係爲：舞臺→頁面→文本、圖片等素材，每個頁面中的對象上層覆蓋下層。

活動4：利用iH5軟件，製作邀請函H5。

（1）觀看操作指導微視頻，自主探究頁面的製作，完成以下問題：

設置背景：選中頁面1，在屬性面板中找到_____________選項，添加背景圖片。

添加文字：選中頁面1，在工具面板中選擇_____________選項。

添加圖片：選中頁面1，在工具面板中選擇_____________選項。

小結：添加文字、圖片的一般步驟：選擇位置—添加對象。

（2）展示學生作品，師生共同分析存在的問題，尋求解決方式。

問題1：首頁、內容頁都播放同一素材。

原因分析：素材全部都添加在了舞臺之中，其層級關係在內容頁和首頁的上一級。

問題2：內容頁沒有顯示內容。

原因分析：素材全部都添加在了首頁之中，而不是對應的內容頁中。

設計意圖：遷移是人類認知的一個普遍特徵，因爲新的學習總是建立在原有學習基礎之上。學生原有的知識是Photoshop軟件使用，將Photoshop和iH5進行對比，引導學生髮現界面組成的“共性”與“個性“，讓學生初步認識對象樹面板，學會利用對象樹面板來管理素材。在製作H5時採用局部“翻轉課堂”的形式，通過高效、簡短的微視頻和幾個思考題，引導學生思考探究；在學生遇到問題和困難時，師生共同分析問題，解決問題。給學生“瑞士奶酪式”知識建構時間，使學生從規律的獲得到知識的應用有一個過渡和漸進的過程。

（四）自主探究，美化H5

活動5：美化完善邀請函H5。

（1）邀請函中的標題、內容文字等選用什麼樣的字體、字號合適？如何設置？

（2）如何改變圖片大小，修改圖片的亮度、對比度等？

（3）如何設置元素的動態效果，使得網頁更生動？

小結：

（1）選中文字或圖片——屬性面板——修改設置。“邀請函”等標題文字字號一般選用大些，宜用飽滿的字體，以達到醒目的作用；內容用於提供具體信息，文字字號可以小些。

（2）圖片選用要符合主題，色彩和諧。字體顏色與背景要有一定的對比度。（3）選擇要添加動態效果的對象——選擇動效命令。注意：設置合理、適度的動態效果，可以給觀賞者帶來較好的視覺體驗。

設計意圖：對邀請函的美化可分成兩個部分：一是對邀請函中的文字、圖片進行美化，二是合理設置動態效果。單從技術角度來講，這些操作是比較簡單的，只要學會設置屬性面板即可。但是邀請函的美化不是天馬行空，隨心所欲，還需要一定的藝術欣賞能力。因此首先讓學生帶着問題思考如何設置文字、圖片？設置動效時需要注意的問題？得出一定的結論後，讓學生帶着構思去美化邀請函，以減少學生操作的盲目性。

（五）作品展示，共析H5

活動6：發佈和評價作品。

（1）對於製作好的作品，將其發佈到網上，這樣其他人就可以通過電腦和手機訪問你的作品。請保存當前的網頁併發布到網上。

（2）同桌之間用發佈的網址或二維碼相互訪問對方的作品。

（3）根據評價表對同桌的作品進行評價。

（4）根據同伴及老師意見進一步修改作品。

設計意圖：學生在製作完成邀請函後，進行保存，發佈就可以瀏覽到自己的成品，極大地提高了學生的學習興趣。將學生的作品進行展示，師生共同賞析作品，根據評價表進行點評，給出建議，然後進一步完善作品。

（六）知識梳理，展望H5

展示思維導圖，梳理本節課內容：

總結利用iH5製作網頁的基本過程：

觀看視頻，結束本課：隨着信息技術的高速發展，H5可謂是無處不在。H5可以是各種宣傳網頁、在線遊戲，甚至戶外大屏中的互動也是H5。在未來5-10年內，H5或將會成爲移動互聯網領域的主宰者。

設計意圖：藉助思維導圖，將關鍵知識點結構化，清晰形象地呈現出各知識點的脈絡關係，有助於學生從整體上把握知識，完成知識的建構。最後觀看H5應用視頻，瞭解H5的日常應用，對未來展望，進行情感昇華。

製作網頁教學設計8

一、教材依據

遼寧師範大學出版社國中信息技術八年級上冊，第二單元《網站設計與製作》，活動1“創建個人網站”以及活動2中的關於部分FrontPage20xx的內容。

二、設計思想

【教學指導思想】

信息技術課是一門實踐性很強、極富創造性、具有明顯時代發展性特點的課程。而現代教育理論提倡以學生爲中心，強調學生“學”的主動性，學生是信息加工的主體，教師的作用體現在組織、指導、幫助和促進學生的學習、充分發揮學生的主動性、積極性和創造性，從而使學生最有效地進行學習，達到最優的教學效果。因此本課題遵循“教師主導，學生主體”的設計理念，讓學生在教師的引導下，對所學的內容進行探索、分析、研究，在實踐操作中培養學生科學的態度和價值觀，同時培養學生的學習興趣。

【教學對象分析】

.學生的知識能力

教學對象是八年級的學生，這一階段的學生正處在抽象邏輯思維逐步形成的過程中，但形象思維仍是獲取知識的重要思維方式。而本節課中涉及到的HTML語言有其枯燥難懂的一面，學生在理解上存在着一定的難度，所以教師在教學設計中希望能通過學生自己的雙眼、雙手以及思考來發現新知識，從而減輕他們對新知識的畏懼、降低理解的難度。

學生心理特點分析

國中學生活潑好動、好奇心強、求知慾旺、視野廣泛，對信息技術充滿興趣，大部分學生都能熟練使用瀏覽器瀏覽網頁，他們對上網和網頁有着極大的興趣。所以在本課題中教師利用學生的這種心理設計了一個趣味導入，從趣味引入學生感興趣的網頁，使學生在課堂中保持着較高的學習積極性。

【教學內容分析】

本節課是新授課且是第二單元《網站設計與製作》的第一節課，教師將這節課的重心放在了“啓下”上，目的是激發學生的學習興趣和他們的求知慾，爲順利開展以後的教學活動打好基礎、做好鋪墊。本節課的教學內容有兩個方面，一是初識HTML語言，二是初識FrontPage20xx的窗口組成。教師設計的重點並不是讓學生充分理解HTML語言的結構，而是通過HTML語言能夠有效地引出製作網頁的軟件FrontPage20xx，繼而使學生能順其自然產生使用FrontPage20xx製作網頁的興趣。

教學內容的整合：課本上將初識HTML語言和FrontPage20xx的窗口組成分在了兩個活動中，考慮到信息技術課一星期一個班只有一節課，如果第一節課只講HTML語言，不涉及製作網頁的軟件FrontPage20xx，會令學生感到枯燥，同時這種枯燥感很可能會維持一個星期直到下節課，這樣學生對製作網頁的興趣就遠不如將兩個教學內容結合起來的高，也不利於今後的教學活動開展。所以教師將本節課的重心放在讓學生理解HTML語言與FrontPage20xx之間的聯繫上。

　　三、教學目標

【知識與技能】

（１）瞭解網頁與網站的有關知識；

（２）瞭解HTML標識性語言的功能及結構；

（３）認識構成網頁的基本元素；

（４）瞭解常用的製作網頁的軟件；

（５）瞭解網站策劃與定位的重要性，掌握網站的規劃流程；

（６）瞭解網站設計軟件FrontPage20xx的窗口組成；

（７）學會設計有意義的網站主題，收集網站相關資料，畫出網站的結構圖。

【過程與方法】

（１）趣味導入新課的內容，極大地發揮學生主體、教師主導的作用；

（２）適時引導學生產生新的問題，再通過教師的講解與演示、對比和學生的自主學習來解決問題。

【情感態度與價值觀】

（１）強烈的求知慾激發學生的學習興趣和學習積極性；

（２）瞭解信息技術的前沿知識後，學生會對信息技術課保持新鮮感和興趣感；

（３）學生在不斷實現自己主體地位的同時，也獲得了新知識，更從中體會到了學習的快樂。

四、教學重點和難點

重點：

1、認識構成網頁內容的基本元素，理解網頁佈局的特點；

2、瞭解HTML標識性語言的功能及結構；

3、學會啓動FrontPage20xx，瞭解網站設計軟件FrontPage20xx的窗口組成，理解各組成部分的功能；

4、網站主題的確立，規劃網站結構圖，學會創建新站點的基本方法。

難點：

1、理解HTML標識性語言的結構及應用HTML語言編寫簡單網頁；

2、網站如何定位；

3、如何收集網站的相關信息；

4、在導航視圖模式下建立網站結構。

五、教學準備

①蒐集常用的網頁製作軟件的相關信息；

②打開多媒體電腦教室的教師機和學生機，保證電腦教室的廣播系統工作正常；

③共享班級文件夾；

④示例的班級網站及網頁。

六、教學模式選擇

“學生主體，教師主導”的教學模式。

七、教學過程

1.情境引入：向學生展示一組優秀網站、網頁，激發學生創作自己個人網站的興趣和慾望。學生在觀看，欣賞網站時，受到激勵產生想製作一個網頁的衝動。在師生欣賞網頁作品時複習回顧已學並已淡忘的基礎知識。問題：網頁的構成元素及佈局？教師分析案例，與學生共同回顧文字的插入、圖片的插入和設置、動畫的插入和設置、表格的相關操作等相關知識。讓學生在案例中回顧基礎，激發靈感。並引入本節主題，自己動手製作網頁。

2.展示模板：

教師向學生展示本節課要完成的網頁。要求學生會模仿製作出該網頁模板，並能夠自己創作出新的網頁模板。

3.本節任務：

1）網頁與網站有什麼區別？

2）一個網頁由哪些元素組成？對照給出的網頁分析網頁的組成元素—標題圖片，標題欄，水平線，滾動字幕，圖片，文字及背景等等。

3)用Photoshop處理素材，達到給出網頁中圖片標題，並設計出突出自己主題的網站標題。拓展：用photoshop軟件，畫圖軟件，或flash軟件設計自己需要的網頁圖片。

4）要求學生會模仿製作出該網頁模板，並能夠根據自己確立的主題製作一個網頁模板。學生自主完成模板仿製，並自主探究設計一個複合自己設計主題的網頁模板。小組內成員可相互交流，教師巡視，隨時解決學生在學習過程中遇到的`問題，並注意收集有共性的問題，並適時給以學生以點撥。尤其關注一下學困生。

5）小組選出最佳模板，探究完善此模板，然後以此模板設計網頁。

4.評價展示：

作品完成，提交給教師機，自我評價，小組互評，選出小組最佳作品提交展示，師生共同賞析評價，挖掘作品優點，並指出改進之處。培養大家的審美能力，並挖掘大家的創新能力。

5.課堂小結

師生共同回顧這節課的基礎知識與基本技能，並加強網絡道德意識，注意版權。

八、教學反思

在信息技術教學中，必須以新的教學理念和教學理論爲指導，根據新的課程標準，探索適合信息技術課堂教學的教與學的新策略和新模式來挖掘學生潛能，提高學生素質。

以前我總認爲信息技術課就是教會學生如何操作，課堂中總是採用“教師講，學生聽”的傳統模式，是“學”跟着“教”走，只要“我說你做”就可以了。現在我嘗試着做一些改進，在本課題中圍繞“學生主體、教師主導”的設計理念去設計每個教學環節，積極體現學生的主體作用，努力提高學生的學習效果。

實踐證明我的想法是好的，但是在實踐中難免有疏忽和做的不夠細的地方。比如：由於我的觀察不全面，忽略了個別學生學習中的心理障礙，有些學生的畏難情緒影響到他的整個學習效果；課堂學習氣氛熱烈但不夠和諧。這些都說明了一個問題：我僅僅注重了學生整體主體的體現，而忽略了個體。經過思考，我認爲在這節課的教學設計中可以多增加個體展示的機會，特別是那些學習有困難的學生，我應該多關注他們的動態，多幫助他們。

本課的教學目標是掌握使用FrontPage製作網頁的基本方法；重點是掌握在網頁中插入文字和圖片的方法；難點在於插入表格規劃網頁的結構。

備課時，發現教材以一個標題，一張圖片以及一篇文章的簡單結構示例，如果完全依照教材進行授課，勢必無法突破難點。於是設計了一個將學生前期製作的環保報刊，利用FrontPage軟件製成網頁的環節來幫助學生突破難點。並取學生環保報刊中具典型結構的五份。製作出引導學生分析結構，規劃框架的演示片備用。

課堂以自主探究的模式展開，同學們在以往的學習中已掌握了在Word中插入表格、圖片等方法，在FrontPage中他們很順利地完成了教材呈現的目標。基本掌握了單張網頁的製作方法。

接下來就是突破難點的訓練。面對演示片呈現出的任務及教材相關提示。此時，問題集中到如何插入一個佈局表格來實現規劃好的結構。而教材上完全沒有提示學生探究FrontPage “表格”與Word “表格”功能的異同。少數同學開始試着插入適合自己網頁結構的框架表格，而大部分的同學則完全沒有考慮結構問題，做起直接的搬移，將FrontPage當成Word來用。直到出現無法將圖片，文字放置到設想位置時，才意識到教材中“FrontPage通常用表格來安排網頁中各種內容（文章、圖形等）的版面位置。”這問話的含義是否明確。急着尋求解決的辦法。我便讓哪些意識到要先插入適當結構框架表的學生來說說他們的想法。並及時出示與學生思維一致的演示片，將探究FrontPage “表格”功能的提示呈現給他們。同時利用極域教室的功能，向全體同學展示同伴的探究結果，讓學生不同的思緒方式及智慧產生碰撞，相互啓示，順利突破教學難點。

製作網頁教學設計9

1、教學目標知識與技能：靈活運用添加超鏈接和在網頁中插入表格方法，根據網頁內容進行頁面佈局，完善網頁,掌握網頁佈局的技能和技巧。

過程與方法：培養學生加工信息和應用信息的能力及培養學生思維能力，規劃能力、創新能力、及合作能力。

情感與態度：使學生感受中國源遠流長的歷史文明，並通過網頁傳遞給世界；幫助學生樹立良好的信息道德意識；讓學生享受成就感，樹立自信心。

2、學生分析國中二年級學生感知能力較強,理解能力和抽象思維較弱;學生基本學會使用在網頁中插入表格的方法，但分析信息、處理信息和應用信息能力較弱;對教學內容的瞭解程度較強。

3、內容分析

教學重點：利用表格對網頁頁面進行佈局。

教學難點：怎樣合理、美觀地設計網頁頁面佈局。

此部分教學內容在整個網頁設計知識體系中處於綜合處理信息的重要部分。

4、教學策略設計

（1）．教學方法設計

我根據教學主題及其教學目標確定的教學指導思想是以學生爲主體，以學生自己的親身體驗展開探究式小組合作學習。本節課採用研究體驗式教學法,建構主義模式下的任務驅動式教學法組織教學。首先設計“總任務”，再細分成若干“小任務”，實現教學目標。

（2）．教-學流程和教-學活動的設計思路

整個教學活動，尤其是學習活動，我採用探究式學習法，又稱研究性學習，我強調的是學生在教師指導下，根據各自的興趣、愛好和條件，再結合與自己有相同或相近的興趣、愛好的同學組成合作夥伴，共同選擇西安不同的旅遊景點，確定研究課題，藉助“表格佈局”功能規劃七天的旅遊行程，獨立自主結合小組合作開展研究，進行合理的網頁佈局設計，達到從中培養創新精神和創造能力及審美能力的一種學習方式，實現“雙贏”。建構主義學習理論認爲，學習過程不是學習者被動地接受知識，而是積極地建構知識的過程，把學過的網頁設計知識綜合應用起來，由於建構主義學習活動是以學習者爲中心，而且是真實的，並且以完成特定的任務爲動力，因而學習者就更具有興趣和動機，能夠鼓勵學習者進行批判型思維，能夠更易於提供個體的學習風格，展現自己的獨特思維，不受現有網頁模式的拘束。基於構建主義的探究性學習模式，我的設想是整個教學過程是動態的，學生是學習的主體，教師是學生學習環境的創設者、學習動力的激發者、學習過程的指引者和學生學習的協作者。

（3）．應用信息技術的依據或考慮

信息技術在本次教-學活動有不可替代的功能。利用信息技術中計算機技術進行網頁設計，實現教學目標，完成讓世界各地的人實現“網上游古都”。在教學中計劃通過探究式教學方式，小組合作學習方式和“任務驅動式”教學策略，自主設計網頁，發佈網頁，運用網絡使信息技術的這些潛在優勢發揮作用並真正促進學生能夠結合實際應用，通過自主實踐，完成“網上游古都”任務，並同時完成了學習任務，進一步建構了自己的知識體系，並實時地享受到巨大的`成就感。

（三）、教與學的過程

1．教與學的過程

活動內容

教師活動

學生活動

設計意圖

創設情境

激發興趣

［創設情境］

“要想了解中國上下五千年文明歷史，請到西安來！”近幾年，越來越多的外地遊客涌向西安。“十一黃金週”即將來臨，大家想不想用網頁形式向外地遊客介紹宣傳西安，讓更多的人來西安，領略其古老的魅力！我們上節課把利用搜索引擎找到的有關西安的歷史文物古蹟的文字信息和圖片信息整理製作成有關不同景點的網頁，但信息是否顯得很零散？怎樣把景點信息整合規劃，讓人們先在網上一飽眼福，輕鬆網上游古都？

設計一個含有指向各旅遊景點網頁的超鏈接的主頁。

提供信息活條件，激發起學生的興趣。

［導語］

我們可在主頁中製作一個西安旅遊景點導航欄，但怎樣合理規劃各旅遊景點，並且使頁面佈局美觀，整潔，分類清晰？

利用“表格”。

爲細化任務埋下伏筆;並且激發學生的認知衝突。

［出示課題］

今天我們就圍繞“西安七日遊”，在主頁中利用表格規劃設計旅遊行程，本節課的課題是《“黃金週”—規劃網上西安七日遊》

學生明確本節課課題，初步瞭解任務。

出示課題，介紹總任務。

［分組方法］

根據對各旅遊景點的興趣及當初搜索信息的分工情況及本節課任務分工，四人一小組。

學生進行分組

爲細化任務做準備

出示任務

明確分工

［出示總任務］

每個組圍繞主題，利用表格規劃設計旅遊行程，並建立好超鏈接，利用主頁展示出來。

學生明確任務

明確總任務

［作品形式及分工參考］

形式：創建並完善主頁，並展示整個網站。

分工參考：

內容版式規劃

整理七個旅遊景點網頁

超鏈接的建立與維護

作品演示解說

學生明確彙報形式，分工參考。

使學生明確各自任務後，通過研究，探討，操作，通過電腦媒體來完成任務。

活動內容

教師活動

學生活動

設計意圖

出示任務

明確分工

[角色分工]

學生自由分組後,共同研究選組長，組長進行給組員分配任務。

學生共同研究選組長,並協調分配好任務.

鍛鍊學生自主協調分工能力。

［出示作品評價標準］

教師出示作品評價標準：

作品內容：設計含有七個鏈接網頁的主頁，資料豐富，內容準確。

技術表現：頁面佈局設計合理，顏色搭配和諧，主題突出，作品演示運行正常，操作熟練。

創新特色：作品佈局規劃有獨特之處，有新意。

提示學生有三條幫助熱線：

1、組長2、鄰座學習夥伴3、教師4、自學課件

學生明確要求。

培養學生的創新能力，規劃能力，思維能力和合作能力。

學生研究探索合作交流創作作品

［創作作品］

播放舒緩音樂，爲學生營造自由和諧氣氛。

（提示學生利用網上鄰居把各組員的作品組合在一起，共同完成此任務。）

學生根據角色分工，按小組形式開始完善網站。

學生體會了超鏈接的作用，練習了超鏈接的使用，理解了表格強大的頁面佈局功能；培養學生處理信息和應用信息的能力；通過學生間交流合作，老師及時點撥與指導，培養學生髮現問題和解決問題的能力。

［展示作品］

下面請各組派代表，到教師機前展示以下你們的旅遊行程。其他同學觀察後，可提意見或建議。

由小組代表展示組內作品，並詳細說明旅遊景點規劃的呈現形式，內容選擇及整體構思。

鍛鍊學生口語表達能力和分析說明問題能力。

合作成功展示作品成果彙報交流探討

［交流探討］

教師引導學生探討頁面佈局的方法和技巧；談看完作品後，對其改進意見；進行組間互評和組內自評。

評出“最受歡迎獎”（即如果此網站上傳到網上，點擊率最高），“最具創意獎”“最佳佈局獎”作品。

學生間相互交流探討。

培養學生合作交流能力。

［教師點評及檢測］

教師從頁面佈局，整體規劃合理性，創意等幾方面進行點評。

學生思考，怎樣完善作品。

教師鼓勵學生髮展創新思維，頁面佈局規劃能力，邏輯思維能力及合作能力。

教師或其他同學提問頁面佈局的方法。

學生代表演示

及時檢測學生對錶格的掌握情況。

你受到的最大啓示和收到的最大收穫？成功經驗和失敗教訓？

學生回答

鞏固知識，培養情感

[完成旅遊規劃，培養情感]

同學們已熟練掌握表格的使用方法，並且加工和應用信息的能力增強。

悠久的歷史積澱和豐富的人文資源，使西安居中國六大古都之首，是世界四大文明古都之一，著名的旅遊中心城市。希望你們熱愛中國博大精深的歷史，感受西安古老的魅力！

學生感悟。

全課總結，培養道德情感。

全課總結知識延伸

［達到目標，知識延伸］

網站製作好了，怎樣讓世界各地的人都看到你們的網站呢？

想當我們的故鄉—大慶的小導遊嗎？趕快製作一個“鐵人故鄉—大慶”的網站吧！

學生思考。

學生課後實踐。

爲激發下一節課內容（上傳主頁）的興趣奠定基礎。

讓學生可把本課內容應用到實際生活中去。

培養學生自發探究能力。

2．關鍵環節提煉

利用信息技術創設情境，播放一段自拍的錄像，內容大體是：一位外國友人，想要來中國四大古都之一“西安”旅遊，但想要自助遊，想借助因特網，先在網上了解一下西安，並參考一下旅遊行程。通過此錄像激發學生興趣並利用信息技術呈現問題，使學生產生認知衝突，培養學生髮現問題、分析問題、解決問題的能力。我通過學生利用信息技術完成此項任務，促進學生對基礎知識、基本技能的學習。我利用信息技術，尤其是網絡提供的有關“西安”豐富的旅遊景點介紹資源，幫助和拓展學生的學習。讓學生藉助信息技術手段開展探索、總結並進行創作。我利用信息技術展示學生自評，學生互評，教師評價的評價表，爲學生的學習提供評價、反饋和矯正。我利用網頁自學課件和網絡教室教學廣播系統支持師生間、生生間的交流對話。

3.教學反思

本節課主題明確、集中，讓學生分成小組，合作探究學習，給出特定的總任務，有利於學習效果評判的可比較性，也便於學生之間的廣泛交流和良性競爭。通過利用信息技術規劃規劃網上西安七日遊，對西安七個主要景點的介紹，讓世界瞭解西安，每個學生在共同完成“網上游古都”網站作品後，讓每個學生都有完成任務和宣傳中國源遠流長的文明歷史的成就感，並感到自豪。

本節課，在小組合作學習過程中，學生之間互學互教，彼此交流探討，經歷了提出問題、分析問題和解決問題過程，每個學生都承擔一定學習任務，防止濫竽充數，促進了學生的參與程度、認知深度，高質量地實現了課程的目標，增強學生的責任感。但個別學生沒有認識到合作學習的重要意義，自主探究能力較弱，容易喪失信心。

教學實際實施過程，有學生提出：我對中國的少數民族文化感興趣，能否製作一個宣傳中國五十六個少數民族文化的特色網站？於是我瞭解到學生對中國的不同文化感興趣，可在課外活動小組完成此任務或作爲課外自主探究性學習課題來探究。

本節課讓學生掌握了“表格”的妙用，還提高了加工信息和應用信息的能力，而且使學生感悟到了中國上下五千年的博大精深，對祖國更加熱愛。

（四）、教學評析：

在新課程標準的理念中，明確提出要關注全體學生，建設有特色的信息技術課程。在教材因篇幅的限制，提供給學生感知的背景材料極其有限，“信息”且都處於“靜止、儲存”狀態，不利於學生的感知和抽象概括。因此，允許教師在不改變教材內容、體系、結構的前提下，經教學法的加工，營造引入新課的“情境問題”的氛圍。學生在積極的參與、體驗、研究並在已有知識經驗的支持下，自主能動地探索，實現知識的再創造。

教學活動在面向全體的同時更注重學生情感的交流協作意識與因材施教。更注重學生個性培養和創新智能的開發。

學生自主性學習，需要有一個適應的過程，開始階段，佈置任務要明確具體。

學生之間的交流和幫助比較少，自主學習的能力還要不斷提高等。

附：學生學習過程及典型成果

另附：小組成員分工表

第________組組長________作品題目______________

小組成員

主要負責工作