dw教學(xué)課件第l六講框架布局

1、網(wǎng)頁三劍客網(wǎng)頁三劍客主講主講:劉苗劉苗第六講第六講 框架框架3n通過本章學(xué)習(xí)，掌握使用框架與超連接。通過本章學(xué)習(xí)，掌握使用框架與超連接。教學(xué)目標(biāo)教學(xué)目標(biāo)4n各種框架的創(chuàng)建（重點）各種框架的創(chuàng)建（重點）niframe內(nèi)聯(lián)框架（重點、難點）內(nèi)聯(lián)框架（重點、難點）本講主要內(nèi)容本講主要內(nèi)容5任務(wù)一、任務(wù)一、框架概述框架概述1、框架作用、框架作用 將瀏覽器窗口劃分成幾個部分，每個部分可以各將瀏覽器窗口劃分成幾個部分，每個部分可以各自獨立地顯示在窗口中，每個部分的頁面也可以相自獨立地顯示在窗口中，每個部分的頁面也可以相互控制。使用框架可以使頁面的結(jié)構(gòu)更加合理?；タ刂啤Ｊ褂每蚣芸梢允鬼撁娴慕Y(jié)構(gòu)更加合理。62

2、、框架的優(yōu)缺點：、框架的優(yōu)缺點：框架的缺點：框架的缺點：n 使頁面打開的速度比較慢（輸入網(wǎng)址開始時）因為此使頁面打開的速度比較慢（輸入網(wǎng)址開始時）因為此時需要打開兩個以上的網(wǎng)頁時需要打開兩個以上的網(wǎng)頁.n 存在跨瀏覽器的狀況存在跨瀏覽器的狀況框架的優(yōu)點：框架的優(yōu)點：n 結(jié)構(gòu)更加合理結(jié)構(gòu)更加合理n 在一個窗口中多個顯示網(wǎng)頁在一個窗口中多個顯示網(wǎng)頁n 鏈接后刷新速度快鏈接后刷新速度快73、幾個概念、幾個概念框架文件：各框架內(nèi)的文件?？蚣芪募焊骺蚣軆?nèi)的文件?？蚣芗菏且唤M框架的集合，利用它可將不同類別的框架集：是一組框架的集合，利用它可將不同類別的 內(nèi)容放到同一頁面中。內(nèi)容放到同一頁面中。框架集文

3、件：所要打開的文件為框架集文件。框架集文件：所要打開的文件為框架集文件。8任務(wù)二、任務(wù)二、創(chuàng)建框架創(chuàng)建框架n 查看查看可視化助理可視化助理框架邊框框架邊框n 向下，向右拖拽框架上邊框向下，向右拖拽框架上邊框/左邊框至目標(biāo)位置，創(chuàng)左邊框至目標(biāo)位置，創(chuàng)建一個兩欄框架。用鼠標(biāo)直接拖動編輯窗口邊框的左建一個兩欄框架。用鼠標(biāo)直接拖動編輯窗口邊框的左上角可以拖拽出欄式框架。上角可以拖拽出欄式框架。n “窗口窗口” “框架框架”，打開框架面板，打開框架面板(編輯界面中框架編輯界面中框架的縮略圖的縮略圖) n 采用預(yù)設(shè)框架來建立框架結(jié)構(gòu)采用預(yù)設(shè)框架來建立框架結(jié)構(gòu)n 插入面板插入面板布局下框架命令建立框架布局下

4、框架命令建立框架n文件文件新建新建9任務(wù)三、任務(wù)三、編輯框架編輯框架1、框架面板、框架面板:shift+f2102、設(shè)置框架和框架集屬性、設(shè)置框架和框架集屬性 選定框架集選定框架集 單擊文檔窗口中兩個框架的共用邊界單擊文檔窗口中兩個框架的共用邊界 單擊框架集面板最外圍的邊界單擊框架集面板最外圍的邊界11框架集屬性：框架集屬性：nborders:設(shè)置框架的邊框（設(shè)置框架的邊框（yes或者或者1表示要邊表示要邊框、框、no或者或者0表示不要邊框、表示不要邊框、default默認(rèn)值）默認(rèn)值）nborder width:設(shè)置框架的邊框厚度設(shè)置框架的邊框厚度nborder color:設(shè)置框架的邊框顏色

5、設(shè)置框架的邊框顏色nrow/col:設(shè)置行、列的值，設(shè)置行、列的值，units單位單位nrowcol selection:行列選擇，鼠標(biāo)點擊一下選擇行列選擇，鼠標(biāo)點擊一下選擇行點擊兩下選擇列行點擊兩下選擇列12框架屬性框架屬性nframe name:框架的名稱框架的名稱nsrc:設(shè)定此框架要顯示的網(wǎng)頁文檔的設(shè)定此框架要顯示的網(wǎng)頁文檔的url地址，地址，每個框架一定要對應(yīng)一個每個框架一定要對應(yīng)一個html文檔文檔nborders:設(shè)置框架的邊框設(shè)置框架的邊框nborder color:邊框顏色邊框顏色13n scroll:設(shè)置是否需要滾動條設(shè)置是否需要滾動條 auto隨內(nèi)容而增加滾動條，隨內(nèi)容而

6、增加滾動條， yes無論內(nèi)容是否超出都顯示滾動條無論內(nèi)容是否超出都顯示滾動條 no與與yes相反相反nmargin width：邊界寬度：邊界寬度nmargin height：邊界高度：邊界高度nno resize:設(shè)定不讓使用者在瀏覽器中改變框架的設(shè)定不讓使用者在瀏覽器中改變框架的大小大小 143、保存框架和框架集文件、保存框架和框架集文件保存框架文件保存框架文件:文件保存全部文件保存全部生成文件的個數(shù)：框架個數(shù)生成文件的個數(shù)：框架個數(shù)保存框架集文件保存框架集文件15任務(wù)四、任務(wù)四、 框架網(wǎng)頁框架網(wǎng)頁(設(shè)置框架的鏈接設(shè)置框架的鏈接)使用鏈接控制框架內(nèi)容使用鏈接控制框架內(nèi)容在框架屬性中，為各框

7、架命名在框架屬性中，為各框架命名選擇要作為鏈接的文本或其他對象選擇要作為鏈接的文本或其他對象,在在link文本文本框中輸入超鏈接地址框中輸入超鏈接地址在在target下拉列表框中選擇打開鏈接內(nèi)容目標(biāo)下拉列表框中選擇打開鏈接內(nèi)容目標(biāo)框架的名稱框架的名稱16n本講主要學(xué)習(xí)了框架的創(chuàng)建，可以利用框架結(jié)構(gòu)本講主要學(xué)習(xí)了框架的創(chuàng)建，可以利用框架結(jié)構(gòu)有效管理網(wǎng)站框架的特征是在同一畫面中同時有效管理網(wǎng)站框架的特征是在同一畫面中同時顯示多個網(wǎng)頁文檔，而且能夠輕松，有效地管理顯示多個網(wǎng)頁文檔，而且能夠輕松，有效地管理網(wǎng)站網(wǎng)站.本講小結(jié)本講小結(jié)17上機作業(yè)上機作業(yè)1、現(xiàn)有一分為、現(xiàn)有一分為7個框架的網(wǎng)頁，則該窗口中含了幾個框架的網(wǎng)頁，則該窗口中含了幾個文件？當(dāng)保存時，需要保存幾個文件？個文件？當(dāng)保存時，需要保存幾個文件？2 、 下 圖 的 框 架 中 顯 示 了 各 框 架 的 名 字 ，、 下 圖 的 框 架 中 顯 示 了 各 框 架 的 名 字 ，frame4frame5是被嵌入的框架。如何選中這七是被嵌入的框架。如何選中這七個框架中的任意一個？現(xiàn)選擇個框架中的任意一個？現(xiàn)選擇frame4frame5組組成的嵌入式框架，又如何操作？成的嵌入式框架，又如何操作？3、現(xiàn)右圖的框架、現(xiàn)右圖