1、布置習題布置習題學習目標學習目標知識講解知識講解課堂實踐課堂實踐教學總結教學總結制作完整的框架網頁學習情境學習情境7課程引導課程引導在網頁中，除了使用表格和AP Div定位外，還可以使用框架進行定位。使用框架結構設計的HTML文件，可以將整個瀏覽器窗口分成幾個獨立的小窗口，一個窗口就是一個框架，每一個框架可分別載入不同的網頁文件，此外，框架之間是可以相互控制的。概述概述布置習題布置習題知識講解知識講解課堂實踐課堂實踐教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7學習目標學習目標1. 掌握制作框架網頁的方法學習目標學習目標專業能力目標專業知識目標專業素質目標布置習題布置習題

2、知識講解知識講解課堂實踐課堂實踐教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7學習目標學習目標1. 使用框架制作頁面的能力專專業業能能力力目目標標布置習題布置習題知識講解知識講解課堂實踐課堂實踐教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7學習目標學習目標1. 規劃頁面框架結構2. 創建、選擇頁面框架3. 設置頁面框架和框架集的屬性4. 編輯頁面框架5. 創建嵌入式框架iframe專專業業知知識識目目標標布置習題布置習題知識講解知識講解課堂實踐課堂實踐教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7學習目標學習目標1. 團隊協作精

3、神2. 溝通表達能力3. 樂觀精神4. 敬業精神5. 責任感 6. 效率觀念7. 結構布局能力專專業業素素質質目目標標課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解教教學學案案例例案例01 創建上方固定、左側嵌套的框架網頁案例02 創建嵌入式框架iframe綜合案例實訓 - “某幼兒園”框架頁的設計與制作課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解案例操作過程(P129-133)相關知識點(P133-135)案例01 創建

4、上方固定、左側嵌套的框架網頁當在文件中建立框架時，Dreamweaver可以創建一個無標題的框架集文件，在每個框架中創建無標題文件，如果某個頁面被劃分成3個框架，它實際上包含的卻是4個獨立的文件：一個框架集文件和3個框架內容文件。框架內容文件包含了將出現在頁面框架中的內容。如圖所示的框架頁面：利用框架將窗口分成3個子窗口，分別命名為win1，win2和win3，子窗口win1對應的HTML中設置了兩個超鏈接，用戶單擊這兩個超鏈接后目標URL將在子窗口win2中顯示win1win2win3課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學

5、習情境7知識講解知識講解相關知識點選擇“查看可視化助理框架邊框”命令，然后利用鼠標拖動框架邊框的方法可以創建框架 創建預定義框架課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解相關知識點選擇“文件新建”命令，在彈出的“新建文檔”對話框中選擇“示例中的頁框架集”選項，在“示例頁”列表中根據需要進行選擇，單擊“創建”按鈕，即可創建框架集或者在“插入”欄中選擇“框架”按鈕，在下拉列表中選擇框架類型后也可創建框架集 創建自定義框架課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的

6、框架網頁學習情境學習情境7知識講解知識講解相關知識點框架面板選擇Alt鍵+框架選擇 框架的多種選擇方法按住Alt鍵單擊此框架即被選中呈虛線框顯示課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解相關知識點框架面板選擇法Alt鍵+框架邊框選擇法 框架集的多種選擇方法當鼠標變為雙向箭頭時按住Alt鍵選擇框架集，框架集呈虛線顯示用鼠標指向框架面板的黑色邊框后單擊即可選中框架集，框架集同樣也是虛線顯示課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講

7、解知識講解相關知識點和保存其他文件一樣，選擇“保存”或“另存為”均可保存，不同的是保存框架時先要選中框架 框架及框架集的保存課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解相關知識點框架屬性設置框架集屬性設置 設置框架和框架集的屬性課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解相關知識點主要標簽1.frameset2.frame3.Noframe4.iframe HTML中框架的標簽及屬性簡介1.Frameset功能：描述框架

8、集（即整個框架的結構）語法： 屬性：cols rows frameborder bordercolor framecolor framespacing onload onunload Cols(水平方向) Rows (垂直方向) 用于指定在水平或垂直方向上將窗口分為若干框架時每個框架的寬度。取值可以為 正整數(單位：像素)，如：cols=“200” 百分比，如：cols=“80%” *(表示除去其他框架所占寬度后剩下的寬度)如：cols=“80,*”表示將窗口分為左右兩個框架，左邊框架的寬度為80像素Bordercolor 用于指定邊框的顏色Frameborder 用于指定是否出現邊框。值為”

9、yes”或“no”Framespacing 表示框架與框架間的保留空白的距離，以免看起來太擠。 其值是正整數Onload Onunload用于描述frameset加載和退出時的事件2. Frame 功能：描述組成幀結構中的具體的某個幀，它只能嵌套在frameset中使用語法：屬性：name src noresize scrolling marginwidthmarginheight frameborder bordercolor框架示例 iframe標記，又叫浮動框架標記，你可以用它將一個HTML文檔嵌入在一個HTML中顯示。它不同于Frame標記最大的特征即這個標記所引用的HTML文件不是與

10、另外的HTML文件相互獨立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內容相互融合，成為一個整體，另外，還可以多次在一個頁面內顯示同一內容，而不必重復寫內容，一個形象的比喻即“畫中畫“電視iframe標記的使用格式是:src：文件的路徑，既可是HTML文件，也可以是文本、ASP等width、height：畫中畫區域的寬與高scrolling:當SRC的指定的HTML文件在指定的區域不顯不完時，滾動選項，如果設置為NO，則不出現滾動條；如為Auto：則自動出現滾動條；如為Yes，則顯示frameBorder：區域邊框的寬度，為了讓“畫中畫“與鄰近的內容相融合，常設置為0課堂實踐

11、課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解案例02 創建嵌入式框架iframe案例操作過程(P135-137)相關知識點(P137-138)課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解相關知識點嵌入式框架和框架網頁類似，它可以把一個網頁的框架和內容嵌入現有的網頁中。在Dreamweaver中可以使用“標簽編輯器”來創建嵌入式框架。其中列出了絕大部分語言所用到的標簽及其屬性參數，對于編寫代碼的設計者來說，這是得心應手的工具，有了

12、它可以輕松找到所需要的標簽，然后根據列出的參數來使用它。標簽選擇器：插入各種標簽標簽庫管理器：設置庫屬性和編輯庫中的標簽和屬性 標簽選擇器的使用課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解相關知識點初學者學習標簽及其屬性的很好的工具 標簽庫編輯器的使用課堂實踐課堂實踐布置習題布置習題學習目標學習目標教學總結教學總結課程引導課程引導制作完整的框架網頁學習情境學習情境7知識講解知識講解頁面效果圖綜合案例實訓 “某幼兒園”框架頁面的設計與制作布置習題布置習題學習目標學習目標知識講解知識講解教學總結教學總結課程引導

13、課程引導制作完整的框架網頁學習情境學習情境7課堂實踐課堂實踐課堂實踐：同步模仿操作-案例01-02綜合案例實訓： “某幼兒園”框架頁面的設計與 制作布置習題布置習題學習目標學習目標知識講解知識講解課堂實踐課堂實踐課程引導課程引導制作完整的框架網頁學習情境學習情境7教學總結教學總結一一疑難解析疑難解析 如果一個站點在瀏覽器中顯示為包含三個框架的單個頁面，該框架至少包括多少個獨立的HTML文檔？ 怎樣刪除已經創建的框架和框架集？ 怎樣使框架集在不同的瀏覽器窗口中均能正常顯示？ 如何防止個人網頁中的內容被放到其他網站的框架中顯示？布置習題布置習題學習目標學習目標知識講解知識講解課堂實踐課堂實踐課程引導課程引導制作完整的框架網頁學習情境學習情境7教學總結教學總結框架是網頁中最常用的頁面設計方式 之一，使用框架不但可以方便地創建具有統一風格的頁面，而且也為設計網站節省了不少時間。當瀏覽框架網頁時，可以發現網頁部分區域內容將不會發生任何改變，而