教學(xué)課題：創(chuàng)建框架和框架集
教學(xué)目標(biāo)：1、了解“框架”控制面板。
2、掌握框架和框架集的創(chuàng)建方法。
教學(xué)重點(diǎn)：1、創(chuàng)建框架和框架集。
2、保存框架和框架集。
教學(xué)難點(diǎn)：保存框架和框集。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過(guò)程：
1、導(dǎo)入：略
2、講解新課
演示案例1：創(chuàng)建框架與框架集
【需求分析】：框架是由框架頁(yè)面和框架集組成?？蚣茼?yè)面是由一組普通的Web頁(yè)面組成的頁(yè)面集合，通常在一個(gè)框架頁(yè)面集中，將一些導(dǎo)航性的內(nèi)容放在一個(gè)頁(yè)面中，而將另一些需要變化的內(nèi)容放在另一個(gè)頁(yè)面中。
【技能要點(diǎn)】
- 創(chuàng)建預(yù)定義框架和框架集
- 創(chuàng)建自定義框架和框架集
- 保存框架和框架集
- 框架的屬性面板設(shè)置
【操作步驟】
步驟1：創(chuàng)建框架和框架集
- 選擇【文件】->【新建】，打開“新建文檔”對(duì)話框。
- 選擇【示例中的頁(yè)】->【框架頁(yè)】->【上方固定，左方嵌套】選項(xiàng)，如圖9-1所示。
圖9-1
- 單擊“創(chuàng)建”按鈕，彈出【框架標(biāo)簽輔助功能屬性】對(duì)話框，設(shè)置框架及標(biāo)題，單擊【確定】按鈕，如圖9-2所示。
圖9-2
- 在網(wǎng)頁(yè)窗口中可以看到創(chuàng)建的框架集，如圖9-3所示。
步驟2：保存框架和框架集文件
（1）選擇框架集，執(zhí)行【文件】->【框架集另存為】，會(huì)彈出“另存為”對(duì)話框，輸入kj.html
(2)光標(biāo)分放在頂部框架內(nèi)，執(zhí)行【文件】->【保存框架】，在彈出“另存為”對(duì)話框中輸入：top.html；同樣方法將左邊框架保存為：left.html;右下方框架另存為main.html。
說(shuō)明：如果當(dāng)前網(wǎng)頁(yè)是由多個(gè)框架構(gòu)成，分別保存每個(gè)框架文件很麻煩，此時(shí)可采用一次保存框架集中所有文檔的方法。
- 選擇【文件】->【保存全部】
- 系統(tǒng)先保存框架集文當(dāng)，然后再保存框架集中其他框架文檔。
3、作業(yè)：學(xué)生上機(jī)練習(xí)創(chuàng)建與保存框架和框架集的方法。
教學(xué)課題：修改框架頁(yè)面
教學(xué)目標(biāo)：掌握框架的編輯和框架的屬性設(shè)置。
教學(xué)重點(diǎn)：1、編輯框架頁(yè)面的方法。
2、框架的屬性面板設(shè)置。
教學(xué)難點(diǎn)：合理的設(shè)置框架的屬性。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過(guò)程：1、導(dǎo)入新課：略
2、講解新課：
演示案例2：給框架頁(yè)面添加內(nèi)容
【需求分析】根據(jù)演示案例1制作的框架，給每個(gè)框架頁(yè)面添加內(nèi)容，制作一個(gè)完整的利用框架布局的網(wǎng)頁(yè)。
【技能要點(diǎn)】
- 編輯框架網(wǎng)頁(yè)的方法。
- 框架的屬性面板設(shè)置
【操作步驟】
步驟1：修改top頁(yè)面。
- 打開演示案例2中top.html頁(yè)面
- 選擇【插入】->【圖像】，插入images文件夾下的“演示案例1-01.gif”圖像。
- 保存該頁(yè)面。
步驟2：修改left頁(yè)面。
- 打開演示案例2中的left.html頁(yè)面
- 選擇【插入】->【圖像】，插入images文件夾下的“演示案例1-02.gif”圖像。
- 保存該頁(yè)面。
步驟3：修改main頁(yè)面。
(1)打開演示案例2中的main.html頁(yè)面
（2）選擇【插入】->【圖像】，插入images文件夾下的“演示案例1-03.gif”圖像。
（3）保存該頁(yè)面。
步驟4：保存框架集kj.html。
按F12瀏覽框架如圖9-5所示。
圖9-5
3、作業(yè)：上機(jī)練習(xí)編輯框架頁(yè)面以及給框架屬性面板的設(shè)置方法。
教學(xué)課題：制作IFrame浮動(dòng)框架
教學(xué)目標(biāo)：掌握框架的編輯和框架的屬性設(shè)置。
教學(xué)重點(diǎn)：1、插入浮動(dòng)框架的方法。
2、浮動(dòng)框架頁(yè)面代碼的編寫。
教學(xué)難點(diǎn)：浮動(dòng)框架頁(yè)面代碼的編寫。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過(guò)程：1、導(dǎo)入新課：略
2、講解新課：
演示案例3：制作Iframe框架頁(yè)面
【需求分析】根據(jù)演示案例1制作的框架，給每個(gè)框架頁(yè)面添加內(nèi)容，制作一個(gè)完整的利用框架布局的網(wǎng)頁(yè)。
【技能要點(diǎn)】
- 插入浮動(dòng)框架的方法。
- 浮動(dòng)框架頁(yè)面代碼的編寫。
【操作步驟】
步驟1：打開演示案例3中index.html頁(yè)面。
步驟2：將光標(biāo)定位在準(zhǔn)備插入浮動(dòng)框架的位置，如圖9-8所示。
圖9-8
步驟3：在【插入】面板的【布局】選項(xiàng)中，選擇Iframe選項(xiàng)，如圖9-9所示。
圖9-9
步驟4：此時(shí)，在頁(yè)面會(huì)插入一個(gè)浮動(dòng)框架，頁(yè)面會(huì)自動(dòng)轉(zhuǎn)換到拆分模式，并在代碼中生成<iframe></iframe>。
步驟5：在代碼視圖的<ifram>標(biāo)簽中輸入的代碼如下：
步驟6:此時(shí)，頁(yè)面中插入的浮動(dòng)框架會(huì)變成灰色區(qū)域，保存index.html頁(yè)面。按F12，瀏覽該頁(yè)面，如圖9-10所示。
圖9-10
