模塊7制作完整的框架網(wǎng)頁課件

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

2、知識(shí)講解知識(shí)講解課堂實(shí)踐課堂實(shí)踐教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)1. 使用框架制作頁面的能力專專業(yè)業(yè)能能力力目目標(biāo)標(biāo)布置習(xí)題布置習(xí)題知識(shí)講解知識(shí)講解課堂實(shí)踐課堂實(shí)踐教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)1. 規(guī)劃頁面框架結(jié)構(gòu)2. 創(chuàng)建、選擇頁面框架3. 設(shè)置頁面框架和框架集的屬性4. 編輯頁面框架5. 創(chuàng)建嵌入式框架iframe專專業(yè)業(yè)知知識(shí)識(shí)目目標(biāo)標(biāo)布置習(xí)題布置習(xí)題知識(shí)講解知識(shí)講解課堂實(shí)踐課堂實(shí)踐教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)1. 團(tuán)隊(duì)協(xié)作精

3、神2. 溝通表達(dá)能力3. 樂觀精神4. 敬業(yè)精神5. 責(zé)任感 6. 效率觀念7. 結(jié)構(gòu)布局能力專專業(yè)業(yè)素素質(zhì)質(zhì)目目標(biāo)標(biāo)課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7知識(shí)講解知識(shí)講解教教學(xué)學(xué)案案例例案例01 創(chuàng)建上方固定、左側(cè)嵌套的框架網(wǎng)頁案例02 創(chuàng)建嵌入式框架iframe綜合案例實(shí)訓(xùn) - “某幼兒園”框架頁的設(shè)計(jì)與制作課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7知識(shí)講解知識(shí)講解案例操作過程(P129-133)相關(guān)知識(shí)點(diǎn)(P133-135)案例01 創(chuàng)建

4、上方固定、左側(cè)嵌套的框架網(wǎng)頁當(dāng)在文件中建立框架時(shí)，Dreamweaver可以創(chuàng)建一個(gè)無標(biāo)題的框架集文件，在每個(gè)框架中創(chuàng)建無標(biāo)題文件，如果某個(gè)頁面被劃分成3個(gè)框架，它實(shí)際上包含的卻是4個(gè)獨(dú)立的文件：一個(gè)框架集文件和3個(gè)框架內(nèi)容文件?？蚣軆?nèi)容文件包含了將出現(xiàn)在頁面框架中的內(nèi)容。如圖所示的框架頁面：利用框架將窗口分成3個(gè)子窗口，分別命名為win1，win2和win3，子窗口win1對(duì)應(yīng)的HTML中設(shè)置了兩個(gè)超鏈接，用戶單擊這兩個(gè)超鏈接后目標(biāo)URL將在子窗口win2中顯示win1win2win3課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)

5、習(xí)情境7知識(shí)講解知識(shí)講解相關(guān)知識(shí)點(diǎn)選擇“查看可視化助理框架邊框”命令，然后利用鼠標(biāo)拖動(dòng)框架邊框的方法可以創(chuàng)建框架 創(chuàng)建預(yù)定義框架課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7知識(shí)講解知識(shí)講解相關(guān)知識(shí)點(diǎn)選擇“文件新建”命令，在彈出的“新建文檔”對(duì)話框中選擇“示例中的頁框架集”選項(xiàng)，在“示例頁”列表中根據(jù)需要進(jìn)行選擇，單擊“創(chuàng)建”按鈕，即可創(chuàng)建框架集或者在“插入”欄中選擇“框架”按鈕，在下拉列表中選擇框架類型后也可創(chuàng)建框架集 創(chuàng)建自定義框架課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的

6、框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7知識(shí)講解知識(shí)講解相關(guān)知識(shí)點(diǎn)框架面板選擇Alt鍵+框架選擇 框架的多種選擇方法按住Alt鍵單擊此框架即被選中呈虛線框顯示課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7知識(shí)講解知識(shí)講解相關(guān)知識(shí)點(diǎn)框架面板選擇法Alt鍵+框架邊框選擇法 框架集的多種選擇方法當(dāng)鼠標(biāo)變?yōu)殡p向箭頭時(shí)按住Alt鍵選擇框架集，框架集呈虛線顯示用鼠標(biāo)指向框架面板的黑色邊框后單擊即可選中框架集，框架集同樣也是虛線顯示課堂實(shí)踐課堂實(shí)踐布置習(xí)題布置習(xí)題學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)教學(xué)總結(jié)教學(xué)總結(jié)課程引導(dǎo)課程引導(dǎo)制作完整的框架網(wǎng)頁學(xué)習(xí)情境學(xué)習(xí)情境7知識(shí)講

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

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

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

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

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

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

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