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

《框架網頁》教案

八年級信息技術備課組

組長簽名

授課人

教學目的：學習框架網頁的制作方法，掌握框架網頁的構成。教學重點：框架網頁的制作, 框架網頁的屬性。教學時間：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主體”）。? 相同框架：在左邊框單擊某個超鏈接時，其鏈接網頁也將顯示在左邊框。? 整頁：單擊某個超鏈接時，只顯示所鏈接的網頁，原來框架不再顯示。? 新建窗口：單擊某超鏈接時，所鏈接的網頁將顯示在新打開的瀏覽器中。? 父框架：單擊某個超鏈接時，將返回上一級的框架。六）、上機操作

練習設計框架網頁

”圖片（或文字）。

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

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

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

課堂小結

板書設計 ：

教學反思

第周八年級信息技術教案

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

框架網頁的制作

教學目標：

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)學會下載網頁的方法。

(2)學會移動文件（文件夾）的方法。

(3)以教師演示講授、引導啟發和學生討論嘗試、自主學習相結合的方式，學會在因特網上下載有用的網頁。

(4)通過導入展示的精美網頁激發學生學習下載網頁的興趣，并進一步提高學生使用信息技術的能力。

(5)在保存圖片的自主探究中，培養學生發現問題并自我解決問題的能力，提升學生的自學能力。

二、教學重點、難點：

1、學會下載網頁和移動文件（文件夾）的方法。

2、保存網頁后應該有兩個文件，復制操作和移動操作的區別。

三、教學過程：

（一）導入

師：同學們，我們先一起來欣賞一些網頁吧！這些網頁好看嗎？同學們一定非常想保留下來吧？好！今天我們就來學習下載網頁！（出示課題）

（二）新授

1、下載網頁

師：如果我們作為小小老師，向別人介紹中國兒童資源網的時候，能把完整的網頁也呈現給大家，那同學們就更容易理解了。回憶一下我們前面學習的下載圖片和下載文字的方法，那么能不能把網頁完整的下載下來，即使在斷開網絡時也能看到完整的網頁呢？

師停頓，生沉思片刻

生回答上臺演示

一生：首先全部選定

一生準備按住鼠標左鍵全部拖動 有學生插嘴：按Ctrl+A 一生用自己方法選定后，又嘗試了Ctrl+A，非常成功，然后復制，打開Word文檔，粘貼。

師：非常棒！XX學生用了我們前面下載文字的方法復制了網頁中所有的內容，真會學以致用但是，我們小朋友仔細觀察一下，用這種方法，有沒有把網頁中所有內容完整保存下來。

生討論回答，找出不同之處。師：那么怎么辦呢？ 二生：把它添加到收藏夾

師：我們一起回憶一下，在哪兒用過“添加到收藏夾”

生回答

師小結：添加到收藏夾是幫助我們快速訪問網站的方法，不是把網頁下載到我們計算機里。

三生：文件——另存為

師強調保存類型

師讓學生掌聲鼓勵操作正確的三生。

我們來看看保存好的網頁，和前面下載文字的文件有什么不同嗎？出現了兩個文件，一個是網頁文件，一個是同名文件夾。這個文件夾里有些什么文件？（學生可以點擊文件夾瀏覽）

如果這個文件夾不見了，或者網頁文件放到了其他文件夾里，又會怎樣？（如果有學生發生這樣的問題也可以由學生提出）自己嘗試一下，然后和小組同學交流或者翻看書本，把你的交流結果告訴大家。

討論保存網頁的要領。

好，下面同學們自己來試一試，查找我們江陰一個景點的網頁，然后把網頁保存到“我的文檔”里。

師生解決操作中遇到的問題。

2、移動文件和文件夾。（打開網頁文件夾，用縮略圖方式顯示圖片）這是剛才下載的網頁中的圖片，很漂亮，老師很喜歡，想把它放入自己的文件夾里，可以怎么辦呢？（復制文件）（前面有復制文件（文件夾）的基礎）

師讓學生獨立完成移動文件（文件夾）的操作 四人一小組討論移動的方法 組內匯報演示

學生的匯報實在精彩，方法多種多樣

1、按右鍵剪切——粘貼

粘貼的方法（1）直接在文件夾上按右鍵粘貼

（2）打開文件夾后粘貼

2、直接拖動

3、在菜單欄上選擇“移動到文件夾”

兩人合作探究選定多個文件的方法，教師提示兩個功能鍵Ctrl，Shift 學生匯報

1、不連續的選定Ctrl

2、連續的選定Shift

3、用鼠標框住 誤操作帶來的意外發現

生：按住Ctrl健選定多個文件，不小心進行了“拖動”操作，復制了多個文件。

師總結： shift：按住shift鍵，把鼠標指針指向最后一個要選定的文件，然后單擊，就可以選定首尾兩個文件之間的所有文件。被選中的文件都是以藍底白字顯示。（廣播演示）ctrl：選定不連續的文件

學會這幾種選定文件的方法，有再多的文件要選定我們都不怕了。下面請同學們將下載的網頁文件夾里的圖片移動到你的文件夾里。

小結：我們可以用復制或移動的方法把文件放入其他的文件夾里，也可以同樣的操作把文件夾復制或移動到其他的文件夾里。

3、比較。

剛才我們用了兩種方法把文件放進自己的文件夾里，那到底復制文件和移動文件兩種操作有什么不同呢？（學生歸納總結）

三、總結。

通過今天的學習，你有了哪些收獲呢？希望同學們在以后的操作中，靈活運用我們今天學到的知識！

第五篇：網頁教案

三、DW安裝應用

在學網頁創建中，有一款非常重要的軟件叫ＤＷ軟件，它件全稱：Ｄreamweaver，被稱為網頁三劍客之一． ＤＷ軟件學習內容： １.ＤＷ軟件下載安裝

２.創建ＨＴＭＬ文檔和ＣＳＳ樣式表并將二者關聯起來 ３.ＤＷ軟件的應用 Ａ.ＨＴＭＬ文檔的創建 １.打開ＤＷ軟件

２.如果想創建一個ＨＴＭＬ文檔，只要點擊“新建”下面的ＨＴＭＬ，這個就完成了一個ＨＴＭＬ文檔的創建。

３.在當前頁面點擊“代碼”，就可以看到我們新建一個ＨＴＭＬ文檔的時候，包括“聲明”、“標簽”、“根元素”還有標簽及里面的和