教學內(nèi)容1、建立框架網(wǎng)頁的方法2、框架及框架集屬性設(shè)置3、超級鏈接目標框架設(shè)定網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第1頁。教學目的1、了解框架網(wǎng)頁的結(jié)構(gòu)特點；2、掌握框架網(wǎng)頁的創(chuàng)建、保存方法；3、熟練設(shè)置框架屬性、框架集屬性及超級鏈接目標框架位置；4、能獨立運用框架結(jié)構(gòu)布局網(wǎng)頁；網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第2頁。教學重點1、框架網(wǎng)頁的拆分與保存；2、框架與框架集屬性的意義與設(shè)置；網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第3頁。教學難點1、理解超級鏈接目標框架屬性的意義與設(shè)置方法網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第4頁。一、框架網(wǎng)頁的建立與保存(一)使用預設(shè)方式創(chuàng)建框架1、在站點管理器下，選擇“文件”一>“新建窗口”，新建網(wǎng)頁窗口。2、將光標放在網(wǎng)頁之中。3、打開“插入”工具欄的“布局”選項卡中，單擊“框架”按鈕，在彈出的下拉菜單中，單擊合適的框架按鈕如圖所示。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第5頁。另外一種方法是通過菜單插入預設(shè)的框架形式。1、在網(wǎng)頁編輯窗口下，選擇“插入”一>“HTML”一>“框架”命令。2、彈出預設(shè)的框架形式，在拆分形式中進行選擇，網(wǎng)頁就會按預設(shè)的形式進行拆分。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第6頁。要創(chuàng)建新的空預定義框架集，請執(zhí)行以下操作：1、選擇“文件”>“新建”。2、在“新建文檔”對話框中，選擇“框架集”類別，從“框架集”列表選擇框架集。單擊“創(chuàng)建”。如圖:網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第7頁。(二)自主創(chuàng)建框架自主創(chuàng)建框架包括兩種方法。第一種方法是使用鼠標拖動框架。另外一種方法是通過菜單插入框架結(jié)構(gòu)。(三)創(chuàng)建嵌套框架創(chuàng)建嵌套框架的操作如下：

1、將光標放置于要插入嵌套框架的已有框架中。

2、然后在編輯窗口中選擇“修改”一>“框架頁”，在“拆分左框架”、“拆分右框架”、“拆分上框架”和“拆分下框架”中進行選擇。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第8頁。

(四)保存框架和框架集中的文件執(zhí)行下列操作之一：若要保存框架集文件，請選擇“文件”>“保存框架頁”。若要將框架集文件另存為新文件，請選擇“文件”>“框架集另存為”。

網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第9頁。保存框架中文檔在框架中單擊，然后選擇“文件”>“保存框架”或選擇“文件”>“框架另存為”,如圖:網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第10頁。二、框架屬性與框架集的屬性的設(shè)置與調(diào)整（一）使用框架面板

“框架”面板提供框架集內(nèi)各框架的可視化表示形式。在“框架”面板中，環(huán)繞每個框架集的邊框非常粗；而環(huán)繞每個框架的是較細的灰線，并且每個框架由框架名稱標識。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第11頁。要顯示“框架”面板，請執(zhí)行以下操作：選擇“窗口”>“框架”或按shift+F2。要在“框架”面板中選擇一個框架，請執(zhí)行以下操作：在“框架”面板中單擊框架,框架周圍都會顯示一個選擇輪廓,如圖,當前選擇了名稱為top的窗口：網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第12頁。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第13頁。要在“框架”面板中選擇一個框架集，請執(zhí)行以下操作：在“框架”面板中單擊環(huán)繞框架集的邊框,框架集周圍都會顯示一個粗線條的選擇輪廓，如圖：網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第14頁。（二）修改框架屬性在框架面板上或者在編輯窗口中選中框架，打開屬性面版，如圖所示：網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第15頁?？蚣軐傩缘脑O(shè)置如下：1、首先從屬性面板左上角圖標，可以確定當前選中的是框架。2、“框架名稱”給當前選中的框架命名?？梢愿鶕?jù)框架在整個框架網(wǎng)頁中的位置命名，比如在上面的叫做up，在左面的叫做left。也可以根據(jù)內(nèi)容，放置導航條的叫做navi，放置主要內(nèi)容的叫做main，等等。3、“源文件”為當前選中框架中插入的框架網(wǎng)頁的路徑，在網(wǎng)頁未被保存時使用絕對路徑形式，保存之后使用相對路徑形式。4、“滾動”設(shè)定當框架中的內(nèi)容超出框架范圍時是否出現(xiàn)滾動條，可選項包括以下內(nèi)容。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第16頁。5、“不能調(diào)整大小”默認情況下，瀏覽者使用瀏覽器觀看框架網(wǎng)頁時可以拖動框架網(wǎng)頁的拆分邊框調(diào)整框架的大小。6、“邊框”設(shè)置框架是否有邊框?？蛇x擇的項目有“是”、“否”、“默認”。框架邊框的設(shè)置會優(yōu)先于框架結(jié)構(gòu)屬性中邊框的設(shè)置。在大多數(shù)情況下，不應該讓框架網(wǎng)頁出現(xiàn)邊框。7、“邊框顏色”設(shè)置框架邊框的顏色。對框架的邊框顏色的設(shè)置要優(yōu)先于對框架集邊框顏色的設(shè)置。框架顏色的設(shè)置會影響到相鄰框架邊框的顏色。8、“邊界高度”和“邊界寬度”設(shè)置框架邊框和框架內(nèi)容之間的空白區(qū)域。“邊界寬度”設(shè)置的是框架左側(cè)和右側(cè)邊框與內(nèi)容之間的空白區(qū)域?！斑吔绺叨取痹O(shè)置的是上面和下面的邊框與內(nèi)容之間的空白區(qū)域。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第17頁。（三）設(shè)置框架集的屬性選中框架集，打開屬性面板，框架集面板的設(shè)置如下所示：網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第18頁。1、左上角的預覽區(qū)域顯示當前框架集結(jié)構(gòu)。2、“邊框”設(shè)置框架是否有邊框?！笆恰睘橛羞吙?，“否”為無邊框，“默認”為瀏覽器決定是否有邊框，對于大多數(shù)瀏覽器而言，這一項都意味著有邊框。對于這一項，框架集的設(shè)置如果和框架的設(shè)置相沖突，以框架屬性的設(shè)置為優(yōu)先。3、“邊框?qū)挾取保涸O(shè)置框架結(jié)構(gòu)中邊框的寬度，單位是像素。4、“邊框顏色”：設(shè)置邊框的顏色，可以單擊顏色框，打開取色面板，進行選擇。5、設(shè)置框架結(jié)構(gòu)的拆分比例。拆分的形式是上下拆分，將顯示“行”。拆分的形式是左右拆分，則顯示“列”。選擇后會在“值”和“單位”兩項出現(xiàn)該框架對應的值。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第19頁。

設(shè)置無框架內(nèi)容的步驟是：

1、在框架網(wǎng)頁的編輯窗口下，選擇“修改”――>“框架頁”

――>“編輯無框架內(nèi)容”，這時網(wǎng)頁框架消失，出現(xiàn)完整的編輯窗口，窗口上方標注“無框架內(nèi)容”。

2、和編輯普通網(wǎng)頁一樣，編輯無框架時顯示的內(nèi)容。

3、完成無框架內(nèi)容編輯后，再次選擇“修改”

――>“框架頁”――>“編輯無框架內(nèi)容”，退出編輯無框架內(nèi)容狀態(tài)。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第20頁。三、通過超級鏈接控制框架顯示的內(nèi)容1、選中框架。2、在框架屬性面板上，“框架名稱”一項給框架命名，命名的要求參考前面框架屬性面板設(shè)置的相關(guān)內(nèi)容。3、設(shè)置鏈接的目標框架

在框架頁面中選擇一個鏈接，在“目標”彈出式菜單中，選擇鏈接的文檔應在其中顯示的框架或窗口。網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第21頁。下面介紹框架網(wǎng)頁的設(shè)計和超級鏈接的目標窗口設(shè)定步驟：1、建立框架集選擇“文件”

――>“新建”

――>“框架集”

――>“垂直拆分”

――>“創(chuàng)建”。2、在左邊框架中布局七行一列表格，內(nèi)容如下：網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第22頁。在右邊框架中輸入文本信息。3、保存框架頁選擇“文件”一“保存全部”，當前被保存的網(wǎng)頁周圍會被條紋線圈起來?？蚣芗撁麨閙ain.htm，左、右邊框架頁分別命名為left.htm、right.htm。4、設(shè)置框架屬性按住鍵盤Alt鍵的同時單擊左邊的框架，左邊的框架被選中。左邊框架屬性的設(shè)置如圖網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第23頁?！翱蚣苊Q”為left,“滾動”選擇“否”，這樣，即使是在瀏覽器窗口縮小的時候，這個框架也不會出現(xiàn)滾動條。選中“不能調(diào)整大小”。按住鍵盤Alt鍵的同時單擊右邊的框架，右邊的框架被選中。右邊框架屬性的設(shè)置如圖所示：網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第24頁。5、設(shè)置框架集屬性選中框架集，屬性設(shè)置如圖所示：保存框架和框架集網(wǎng)頁。6、設(shè)置超級鏈接的目標框架在left.htm中，分別選中文字部分，設(shè)定超級鏈接，在目標中選擇“right”,如圖網(wǎng)頁設(shè)計-建立框架網(wǎng)頁全文共27頁，當前為第25頁。保存網(wǎng)頁，