第一篇：框架網頁的制作教案設計與反思

框架網頁的制作教案設計與反思

江蘇省宜興市和橋鎮第二中學 呂超 郵編：214211 E-mail：lvchao012326@163.com

一、教學目標：

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、本節課是在學習完簡單網頁、表格布局網頁、交互式網頁的基礎上，進一步學習網頁的設計方法。由于學生已經具備了一定的網頁設計基礎知識與技能，所以教師可以根據學生的實際情況，采用更靈活的教學方法。教師可以簡單介紹框架結構網頁的功能及框架的建立與編輯方法，以及框架屬性設置與網頁屬性設置的方法與區別。然后由學生根據教師提供的學案及演示動畫，完成框架網頁設計任務。

第二篇：框架網頁制作教案分析

框架網頁的制作

教學目標：

1．知識與技能：

（1）理解框架的概念及基本用途。

（2）掌握框架網頁的新建、制作、編輯與保存，了解框架的拆分方法。

（3）初步掌握將框架結構與表格布局結合使用來制作網頁。

2．過程與方法：

（1）通過對表格網頁的分析，體驗新知識（框架結構網頁）的優點，從而促進更好的學習新知識。

（2）通過理解框架的概念與組成，學會分析框架網站的結構。（3）通過動手操作來深入了解框架的使用方法及用途，提高在網頁制作方面的知識水平，培養自主學習的能力。3．情感態度與價值觀：

（1）通過以“人與動物”為主題的框架結構網頁的制作活動，開拓知識面，激發學習興趣與熱情，體會框架網頁在展現主題內容中的作用。（2）能夠將表格與框架結構網頁結合使用，在創作中體驗樂趣。

（3）形成積極主動的學習和使用多媒體技術的習慣，通過參與信息活動，參與社會實踐，樹立團隊意識，形成積極合作的態度。

教學要點：

1．重點：

（1）框架的概念、用途。（2）創建、編輯與保存框架網頁的方法，框架的嵌套使用。2．難點：（1）框架的拆分。（2）制作框架網頁。

教學對象分析：

本節內容是針對高一學生，而初上高中的他們對一切新知識都很好奇，同時存在著一定的懵懂，因此在教授他們本節課知識之前，要事先充分激發他們對本節課內容的興趣，因此課前老師先展示一組利用表格制作的框架網頁，要求學生仔細觀察，找出它們的一個共同特點，并提問如何快捷地制作這種網頁？從而引出本節課內容，并且在講授內容的過程中，要耐心的進行演示教學，不能一味的口述使學生感到一片茫然。

教材分析：

從在本教材中所處的位置來看，《運用框架結構制作網頁》是在創建新站點，制作簡單網頁、運用表格制作網頁和動態網頁之后。通過前面的學習，學生可以建立有多張網頁的個人站點，在對網頁的設計中會運用表格給網頁布局，為了使網頁增添動感，還會通過增加滾動字幕、動態按鈕以及動畫插件等方法，令網頁更加具有活力。但是除了表格布局外，還有一種常見的布局形式，應用也相當廣泛，學生在瀏覽一些著名網站時就能遇到，通過本節課《運用框架結構制作網頁》學習，可以為學生解惑，幫助學生理解框架結構制作網頁的應用。從教材的難易度分析，這部分知識點學生從來沒有接觸過，在前面學習其它的應用軟件時也沒有類似的地方，故而有一定難度，教學目標不能定的過高。

第三篇：第五課 統一風格——制作框架網頁

統一風格——制作框架網頁

教學目標： 1.掌握表格的拆分與合并。

2.學會創建框架、制作框架網頁和保存框架網頁。

3.能制作鼠標經過圖像的動態效果。4.學會制作超級鏈接和電子郵件鏈接。

5.掌握目標設置在網頁制作過程中的作用和方法。

教學重點：創建框架和制作框架網頁。

教學用具：多媒體網絡教室。教學方法：講解、學生練習。時間安排：2節課 教學過程：

一、課程導入

一個網站常常劃分成多個區域，對于每個區域來說，其色彩搭配、網站風格、網站標題、網站導航都是統一的。為了能做到這種統一，我們每個網頁中相同的內容固定在一個區域。我們通過創建框架制作框架網頁，可以輕松實現網頁結構劃分和布局。看一個使用了框架的網頁范例，師大資源網（http://source.xjnu.edu.cn）。使大家對框架有一個初步的了解和感性認識。

二、新課講授 1.新建站點

（1）將“安全自護我能行”站點文件夾safe傳到學生機。（2）新建站點。

2.創建框架和框架集

制作框架網頁的前提是創建框架，并根據網頁布局設計框架的樣式，然后再具體設計制作網頁的內容。（1）規劃“框架”文件夾。（2）新建框架集

步驟1：執行“文件”——》“新建”命令，打開“新建文檔”對話框，在 “類別”中選擇 “框架集”。

步驟2：單擊“創建”按鈕，在彈出對話框中單擊“確定”，框架創建完成。（3）保存框架集

步驟1：執行“文件”——》“保存全部”命令，保存到frame文件夾中。步驟2：重命名框架集文件和每個框架文件。（4）設置框架和框架屬性

框架的屬性包括框架名稱、源文件、邊距、尺寸、滾動條等；框架集的屬性包括框架面積、框架邊界顏色、距離等。

步驟1：執行“窗口”——》“框架”命令，打開框架面板。

步驟2：單擊“框架”面板中的框架邊緣部分，選中框架集，在 “屬性”面板中設置框架集的屬性。

步驟3：單擊“框架”面板中的topFrame框架和mainFrame框架，在“屬性”面板中設置所選框架的屬性。（5）制作框架網頁 ①制作上框架網頁

步驟1：打開網頁top.html，設置背景顏色#EAFF8A，上邊距為0像素。步驟2：插入一個2行5列的表格并調整行列的高寬。。。步驟3：在導航表格中，設置鼠標經過圖像。步驟4：為圖片添加超鏈接，設置打開方式（目標）。②制作下框架網頁

步驟1：打開網頁main.html，設置背景顏色#EAFF8A，上邊距為0像素。步驟2：插入一個5行9列的表格并調整行列的高寬。。。步驟3：合并相關單元格。

步驟4：插入圖片，并為圖片添加超鏈接。步驟5：添加郵件鏈接。

三、學生練習

學生小組合作完成書上的練習任務，并將任務上交到教師機。

四、作品評價

對于較快完成任務并且完成任務較好的同學進行表揚鼓勵。

五、本課小結

1.創建框架，實現網頁風格的統一，保存框架時，需要保存框架集文件和含有框架的所有文件。

2.利用鼠標經過圖像，可以制作網頁導航動態按鈕。3.超級鏈接是實現網頁互聯的關鍵，設置網頁的打開方式，可以調整鏈接網頁的顯示位置。

第四篇：應用表格布局網頁教案設計與反思

應用表格布局網頁教案設計與反思

一、教學目標：

1、知識與技能：

（1）、了解表格在網頁設計中的作用。

（2）、掌握網頁中表格的制作方法、表格屬性的設置方法以及單元格的修飾與編輯方法，能夠在單元格中正確插入文字和圖片。

（3）、能夠根據網頁設計內容，正確布局表格的結構，掌握表格嵌套的設計方法。

2、過程與方法：

（1）、利用對比學習，培養學生知識遷移的能力。

（2）、通過用表格結構設計網頁，使學生進一步理解表格的作用、功能及網頁設計方法的多樣性，培養學生的發散思維能力。

（3）、通過自主探究，使學生掌握軟件的使用規則，培養學生自主學習的能力。

3、情感態度與價值觀：

（1）、通過對比學習使學生體驗軟件學習的一般方法及規律，提高學生自主學習的能力。

（2）、通過運用表格布局網頁對象活動，進一步掌握各種不同對象屬性的設置方法和規律，體驗創造的快樂。

（3）、通過“動物——人類的朋友”網站的設計與制作，激發學生關愛動物、保護動物的責任感，從而進一步樹立共同改善人類生存環境的意識。

二、教學重點難點：

1、教學重點：

（1）、了解表格在網頁設計中的重要作用。

（2）、掌握插入、編輯表格的方法及表格的屬性設置。（3）、掌握單元格的修飾與屬性的設置。

2、教學難點：

（1）、表格的嵌套在網頁設計中的應用。

三、教學過程：

1、創設情境、導入新課

（1）、展示兩個頁面并進行比較：一個使用表格布局，但表格邊框隱藏（看不出表格痕跡），其頁面工整，文本、圖片擺放對稱，具有一定的規律；另一個頁面凌亂，圖文混雜，擺放雜亂。

（2）、提問：你喜歡那個頁面的布局？學生回答。

（3）、提出問題：有什么方法可以達到第一個頁面的效果。觀察第三個頁面，內容與第一個頁面相同，顯現頁面中表格的邊框。

（4）、學生討論、交流，回顧Word中學習過的表格，領悟表格在FrontPage中的作用。

設計意圖：通過對比學習，培養學生知識遷移的能力。

2、任務驅動、自主學習

（1）、展示一些由表格布局的網頁，引導學生分析其表格結構，自然過渡到分析教材中的例子，得出表格的布局。

（2）出示任務一：規劃網頁表格的布局。分層完成該任務，基礎相對薄弱的學生僅要求讀懂教材中的網頁表格布局，知道規則，根據表格的行數與列數，調整至最終樣式；基礎扎實、操作能力較強的學生可以跳出教材，自行設計表格網頁布局，并將自己的表格設計繪制在教材上。

設計意圖：分層教學，學生可以根據自己的實際情況選擇任務難度，并動手分析和進行創意設計，培養學生的模仿以及創新能力。

（3）、出示任務二：新建一個頁面，用表格布局該網頁，并在該網頁中放入相應內容。FrontPage中表格的插入于編輯與Word中的表格操作類似，教師著重引導學生進行知識遷移。

（4）、學生操作，教師安排操作熟練的學生進行演示。設計意圖：培養學生知識遷移的能力和動手能力。

（5）、出示任務三：在表格中插入圖片、輸入文字。任務四：表格屬性以及單元格屬性的設置。

（6）、學生根據自己的實際情況選擇任務難度，可按教師的具體要求操作，也可根據自己的意圖進行設計。設計意圖：確保達到教學目標的同時，給學生一定的自主空間，鼓勵他們去創新，而不應讓學生一成不變地生硬模仿。

（7）、出示任務五（提高內容）：表格的嵌套。學生動手制作網頁。設計意圖：更好的發揮優秀學生創作思維動手能力。

3、課堂小結、后續活動

（1）、教師引導學生回憶本節課學習的內容：在FrontPage中插入表格、編輯表格以及表格嵌套的基本方法等。

（2）、教師展示優秀作品，表揚完成任務的學習，對未完成任務的學生，應鼓勵他們利用課余時間繼續完成。

四、教學反思： 略

第五篇：《框架網頁》教案

《框架網頁》教案

八年級信息技術備課組

組長簽名

授課人

教學目的：學習框架網頁的制作方法，掌握框架網頁的構成。教學重點：框架網頁的制作, 框架網頁的屬性。教學時間：2課時 教學步驟： 一）、框架頁的基本組成

框架頁是一種特殊格式的網頁，主要由邊框、網頁、滾動條組成。在框架頁中，每個框架都有一個網頁相連接。當打開框架頁時，則同時載入每個框架所相連的網頁文件。

在框架頁中顯示的是三個獨立的網頁組成的（實際下載了四個網頁，還包括框架頁本身這個網頁）。主體框一般用來顯示正文內容的。二）、創建框架頁

FrontPage 2000提供了10個框架網頁向導幫助我們創建框架頁。其操作步驟如下：（1）打開【文件】菜單，選擇【新建】菜單項，在子菜單中選擇【網頁】菜單項，出現新建對話框。

（2）在對話框中單擊【框架網頁】選項卡。

（3）在選項卡中選擇【目錄】，此時在【預覽】欄中會顯示被選中的框架結構圖，并在上方顯示說明情況。

（4）單擊【確定】按鈕后，出現框架結構圖。

（5）新創建的框架結構共有2個網頁窗口，其中一個在左邊，另一個在右邊。這時單擊【新建網頁】按鈕后，我們可以在當前框架網頁中輸入文字、圖片等內容了。（如果這時單擊【設置初始網頁】按鈕后，將彈出一個“創建超鏈接”的對話框，可以為所在的框架超鏈接到指定的網頁上去。）

（6）框架的保存：單擊“

”工具按鈕，出現【另存為】對話框。

? 保存左邊框的網頁文件。在對話框右面的框架示意圖中，單擊左邊框后為藍色，表示左邊框中的網頁正準備保存。在“URL”中輸入文件名“in1”，單擊【確定】按鈕后，此時左邊框的網頁文件被保存起來。

? 保存右邊框的網頁文件。緊接著，在對話框的框架示意圖中，右邊框顯示為藍色。在“URL”中輸入文件名“in2”，單擊【確定】按鈕后，右邊框的網頁文件也被保存起來。? 保存框架本身網頁。在對話框中整個框架示意圖的邊框為藍色，在“URL”中輸入文件名“index.htm”，單擊【確定】按鈕后，此時保存的是整個框架頁文件。三）、框架及框架頁的屬性

1、設置框架的屬性

框架有很多屬性，例如框架的名稱、寬度、高度、邊距、滾動條、可調整性、間距等。以框架頁為例說明，其具體操作方法如下：

單擊要設置屬性的框架，然后單擊【框架】菜單，再單擊【框架屬性】菜單項，出現對話框。可以在此對話框中修改框架的屬性了。

2、框架頁的屬性

以上是設置每個框架的屬性，而修改整個框架頁的屬性，其具體操作如下： 在【框架屬性】對話框中，單擊【框架網頁】按鈕，會出現“網頁屬性”對話框。

第周八年級信息技術教案 在這個對話框中的“框架”選項卡中只有兩項：

? “框架間距”：指框架之間的邊框的寬度，默認值為2。

如果框架不要顯示出邊框時，可單擊“顯示邊框”前面的單選框，取消“√”。四）、框架頁的編輯

在框架頁中，當要拆分某一框架時，單擊框架→拆分框架→選擇并確定。當要刪除某一框架時，單擊框架→刪除框架→選擇并確定。五）、框架頁的超鏈接

在框架頁中，當單擊左邊的超鏈接時，在右邊框中顯示該超鏈接網頁的內容。下面我們將以框架頁為例，說明怎樣實現框架網頁之間的超鏈接。其操作步驟如下：

（1）在左邊的框架中選擇要設置超鏈接的“（2）單擊“選擇“jbxx.htm”。

（3）在對話框右下角“目標框架”欄，單擊“標設置”欄中就相應顯示所選定的區域名稱。其中：

? 網頁默認值(main)：超鏈接的網頁將顯示在右邊框（即“main主體”）。? 相同框架：在左邊框單擊某個超鏈接時，其鏈接網頁也將顯示在左邊框。? 整頁：單擊某個超鏈接時，只顯示所鏈接的網頁，原來框架不再顯示。? 新建窗口：單擊某超鏈接時，所鏈接的網頁將顯示在新打開的瀏覽器中。? 父框架：單擊某個超鏈接時，將返回上一級的框架。六）、上機操作

練習設計框架網頁

”圖片（或文字）。

”超鏈接工具按鈕，出現【編輯超鏈接】對話框。這時在對話框的文件列表中

”按鈕，出現一個對話框。

在對話框中，單擊框架示意圖中不同的區域，也可以單擊右邊列表框的選項，在對話框的“目

課堂小結

板書設計 ：

教學反思

第周八年級信息技術教案