Dreamweaver網(wǎng)設(shè)計(jì)之：框架

第7章框架在設(shè)計(jì)網(wǎng)頁頁面布局的時(shí)候，一般我們可以通過表格來進(jìn)行排版，但還有一類網(wǎng)頁可以使用框架來設(shè)計(jì)。利用框架設(shè)計(jì)的頁面，可以將不同的信息內(nèi)容分類顯示在不同的區(qū)域內(nèi)，那樣可以簡(jiǎn)化操作，使頁面布局合理，訪問者瀏覽查看也更方便。學(xué)習(xí)目標(biāo)理解框架和框架集的概念；掌握使用框架設(shè)計(jì)網(wǎng)頁的方法。本章內(nèi)容

認(rèn)識(shí)框架網(wǎng)頁創(chuàng)建框架集為框架添加內(nèi)容保存框架和框架集框架和框架集的選擇編輯框架或框架集設(shè)置框架和框架集屬性利用HTML創(chuàng)建網(wǎng)頁框架認(rèn)識(shí)框架網(wǎng)頁框架是在同一個(gè)瀏覽窗口中顯示多個(gè)網(wǎng)頁的技術(shù)，框架網(wǎng)頁是一種特殊的網(wǎng)頁?？蚣軐⒋翱趧澐譃椴煌牟糠?，各部分中都有各自的網(wǎng)頁，總體構(gòu)架出一個(gè)框架集。此外，通過為超鏈接指定目標(biāo)框架，可以在框架之間建立起以內(nèi)容為媒介的聯(lián)系，因而實(shí)現(xiàn)頁面導(dǎo)航的功能。

認(rèn)識(shí)框架網(wǎng)頁框架（Frames）技術(shù)由框架集（Frameset）和框架（Frame）兩部分組成?？蚣懿皇俏募?，它是瀏覽器窗口中的一個(gè)區(qū)域，是存放文檔的容器，可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔?？蚣芗荋TML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁面的URL。返回創(chuàng)建框架集1、插入預(yù)置框架樣式單擊【插入】工具欄【布局】類別中的【框架】按鈕，在彈出的下拉菜單中選擇所需的框架類型，即可在頁面上插入相應(yīng)的框架，并彈出【框架標(biāo)簽輔助功能屬性】對(duì)話框，可為框架指定框架名稱?？蚣芟吕藛蝿?chuàng)建框架集2、直接新建預(yù)定義框架文件執(zhí)行“文件/新建”命令，再彈出的“新建文檔”對(duì)話框“類別”列表框中選擇“框架集”選項(xiàng)，在右側(cè)選擇預(yù)定義的框架集類型。新建文檔對(duì)話框創(chuàng)建框架集3、自定義框架樣式先選擇【查看】|【可視化助理】|【框架邊框】命令，在頁面中顯示出框架的邊框，然后將光標(biāo)放置在框架的的邊框線上，當(dāng)指針變?yōu)殡p指的箭頭時(shí)，按住鼠標(biāo)左鍵拖動(dòng)邊框到欲建框架的位置。創(chuàng)建框架集4、創(chuàng)建嵌套框架先在頁面中創(chuàng)建一個(gè)框架，將插入點(diǎn)置于要?jiǎng)?chuàng)建嵌套的框架區(qū)域，再次執(zhí)行創(chuàng)建框架的操作。返回為框架添加內(nèi)內(nèi)容當(dāng)窗口被分割割為幾個(gè)框架架以后，每個(gè)個(gè)框架都可以以作為獨(dú)立的的網(wǎng)頁進(jìn)行編編輯，也可以以直接把某個(gè)個(gè)已經(jīng)存在的的頁面賦給一一個(gè)框架。也也可在框架中中打開已有的的HTML文文檔，具體操操作步驟如下下。（1）在文檔檔窗口中，將將光標(biāo)放置在在某一框架內(nèi)內(nèi)。（2）選擇““文件>在在框架中打打開”命令，，打開一個(gè)已已有文檔。返回保存框框架和和框架架集框架集集文件件和與與之相相關(guān)的的框架架文件件必須須先保保存，，才能能在瀏瀏覽器器中預(yù)預(yù)覽整整個(gè)框框架網(wǎng)網(wǎng)頁內(nèi)內(nèi)容。。可以以分別別保存存框架架集頁頁面或或框架架頁面面，也也可以以同時(shí)時(shí)保存存所有有打開開的框框架文文件和和框架架集頁頁面。。保存框框架集集文件件——選選擇框框架集集，然然后選選擇【【文件件】|【保保存框框架頁頁】命命令。。保存框框架中中顯示示的文文檔——在在框架架中單單擊，，然后后選擇擇【文文件】】|【【保存存框架架】命命令。。保存所所有文文件——選選擇【【文件件】|【保保存全全部】】命令令。返回框架和和框架架集的的選擇擇在對(duì)框框架或或框架架集進(jìn)進(jìn)行操操作之之前，，必須須先選選擇框框架或或框架架集。。選擇框框架按住Alt鍵同同時(shí)鼠鼠標(biāo)左左鍵單單擊欲欲選擇擇的框架架；“窗窗口口>框框架架””，，啟啟用用框框架架控控制制面面板板，，在在面面板板中中用用鼠鼠標(biāo)標(biāo)左左鍵鍵單單擊擊欲欲選選擇擇的的框架架。選擇擇框框架架集集在框框架架面面板板中中鼠鼠標(biāo)標(biāo)左左鍵鍵單單擊擊框框架架集集的的邊框框在文文檔檔窗窗口口中中鼠鼠標(biāo)標(biāo)左左鍵鍵單單擊擊框框架架的的邊框框。返回回1、、編編輯輯框框架架對(duì)框框架架頁頁面面的的編編輯輯與與對(duì)對(duì)普普通通頁頁面面的的編編輯輯相相同同，，包包括括輸輸入入文文本本、、插插入入圖圖像像、、添添加加表表格格和和表表單單的的方方法法都都是是相相同同的的。。此此外外，，還還有有一一種種比比較較簡(jiǎn)簡(jiǎn)便便的的編編輯輯框框架架的的方方法法，，即即先先創(chuàng)創(chuàng)建建好好整整個(gè)個(gè)框框架架集集中中各各部部分分框框架架頁頁面面，，然然后后將將其其在在框框架架集集中中對(duì)對(duì)應(yīng)應(yīng)的的窗窗口口打打開開。。編輯輯框框架架或或框框架架集集2、、調(diào)調(diào)整整框框架架的的大大小小通常常調(diào)調(diào)整整框框架架的的大大小小的的方方法法有有兩兩種種，，即即通通過過拖拖動(dòng)動(dòng)框框架架的的邊邊框框或或指指定定想想要要的的確確切切設(shè)設(shè)置置來來調(diào)調(diào)整整框框架架的的大大小小。。（1））拖拖動(dòng)動(dòng)框框架架的的邊邊框框調(diào)調(diào)整整框框架架大大小小將光光標(biāo)標(biāo)放放在在要要調(diào)調(diào)整整的的框框架架邊邊框框上上，，當(dāng)當(dāng)光光標(biāo)標(biāo)變變?yōu)闉椤啊啊毙涡螤顮顣r(shí)時(shí)，，按按住住鼠鼠標(biāo)標(biāo)左左鍵鍵，，并并拖拖動(dòng)動(dòng)。。（2））通通過過屬屬性性面面板板可可精精確確調(diào)調(diào)整整框框架架大大小小。。編輯輯框框架架或或框框架架集集3、、拆拆分分框框架架在框框架架網(wǎng)網(wǎng)頁頁中中不不但但可可以以調(diào)調(diào)整整框框架架的的大大小小，，還還可可以以設(shè)設(shè)置置網(wǎng)網(wǎng)頁頁中中顯顯示示的的框框架架的的多多少少。。在在框框架架網(wǎng)網(wǎng)頁頁中中可可以以任任意意地地拆拆分分框框架架。。先將將光光標(biāo)標(biāo)置置于于要要拆拆分分的的框框架架窗窗口口中中，，然然后后選選擇擇““修修改改>框框架架集集””命命令令，，彈彈出出其其子子菜菜單單，，其其中中有有4種種拆拆分分方方式式。。先將將光光標(biāo)標(biāo)置置于于要要拆拆分分的的框框架架窗窗口口中中，，然然后后單單擊擊““插插入入””面面板板““布布局局””選選項(xiàng)項(xiàng)卡卡中中““框框架架””按按鈕鈕右右側(cè)側(cè)的的黑黑色色箭箭頭頭，，在在彈彈出出的的菜菜單單中中選選擇擇一一種種拆拆分分框框架架的的方方式式，，將將框框架架窗窗口口再再劃劃分分。。選定定要要拆拆分分的的框框架架集集，，按按住住<Alt>鍵鍵的的同同時(shí)時(shí)，，將將鼠鼠標(biāo)標(biāo)指指針針放放到到框框架架的的邊邊框框上上，，當(dāng)當(dāng)鼠鼠標(biāo)標(biāo)指指針針呈呈雙雙向向箭箭頭頭時(shí)時(shí)，，拖拖曳曳鼠鼠標(biāo)標(biāo)拆拆分分框框架架。。編輯輯框框架架或或框框架架集集4、、刪刪除除框框架架當(dāng)加加入入了了一一條條邊邊線線后后，，發(fā)發(fā)現(xiàn)現(xiàn)加加錯(cuò)錯(cuò)了了，，如如何何去去掉掉這這條條線線一種種方方法法是是修修改改HTML代代碼碼，，把把相相關(guān)關(guān)的的語語句句刪刪除除；；還有有一一種種方方法法是是用用鼠鼠標(biāo)標(biāo)把把要要?jiǎng)h刪除除的的邊邊線線拖拖曳曳到到父父框框架架的的邊邊框框上上，，這這條條邊邊線線就就被被刪刪除除了了。。編輯輯框框架架或或框框架架集集返回回設(shè)置置框框架架和和框框架架集集屬屬性性框架架屬屬性性確確定定了了框框架架集集內(nèi)內(nèi)各各個(gè)個(gè)框框架架的的名名稱稱、、源源文文件件、、邊邊框框的的框框架架能能否否調(diào)調(diào)整整大大小小等等。?？蚣芗瘜賹傩源_定定框架的的大小和和框架之之間的邊邊框?qū)挾榷群皖伾?。在框架結(jié)結(jié)構(gòu)文檔檔中，框框架和框框架集都都有各自自的屬性性設(shè)置面面板，它它們的屬屬性應(yīng)該該分別進(jìn)進(jìn)行設(shè)置置。1、設(shè)置置框架的的屬性在【框架架】面板板中單擊擊某一框框架區(qū)域域，即可可在頁面面中選擇擇此框架架，然后后可在屬屬性檢查查器中設(shè)設(shè)置其屬屬性。設(shè)置框架架及框架架集的屬屬性2、設(shè)置置框架集集的屬性性單擊框架架的邊框框，選擇擇框架集集，然后后在屬性性檢查器器中設(shè)置置此框架架集的屬屬性?？蚣芗牡膶傩詸z檢查器設(shè)置框架架及框架架集的屬屬性返回1、指指定框框架結(jié)結(jié)構(gòu)在框架架集網(wǎng)網(wǎng)頁中中，除除了基基本的的HTML、HEAD等等標(biāo)記記符以以外，，主要要包括括框架架集標(biāo)標(biāo)記符符FRAMESET（必須須有結(jié)結(jié)束標(biāo)標(biāo)記符符<／FRAMESET>）和框框架標(biāo)標(biāo)記符符FRAME（（沒有有結(jié)束束標(biāo)記記符））。由于框框架是是按照照行或或列排排列的的，所所以在在建立立框架架結(jié)構(gòu)構(gòu)時(shí)，，使用用FRAMESET標(biāo)記記符的的rows屬性或或cols屬性分分別可可以構(gòu)構(gòu)造出出橫向向分隔隔框架架和縱縱向分分隔框框架。。利用HTML創(chuàng)創(chuàng)建網(wǎng)網(wǎng)頁框框架2．框框架的的初始始化框架初初始化化是指指為各各個(gè)框框架指指定初初始顯顯示的的頁面面，此此時(shí)應(yīng)應(yīng)使用用FRAME標(biāo)記的的src屬性，，將該該屬性性的值值指定定為要要在框框架中中顯示示的頁頁面即即可。。<framesetrows=“30%,*”><framesrc=“1.html””><framesrc=“2.html””></frameset>利用HTML創(chuàng)創(chuàng)建網(wǎng)網(wǎng)頁框框架3．框框架的的嵌套套如果網(wǎng)網(wǎng)頁設(shè)設(shè)計(jì)者者需要要?jiǎng)?chuàng)建建一些些復(fù)雜雜的框框架集集，即即同時(shí)時(shí)包含含橫向向和縱縱向的的框架架，此此時(shí)可可以使使用框框架嵌嵌套。?？蚣芗芮短滋资鞘故褂肍RAMESET標(biāo)標(biāo)記的的嵌套套來實(shí)實(shí)現(xiàn)的的。<framesetrows=“30%,*”><framesetcols=“40%,*”>……</frameset></frameset>利用HTML創(chuàng)創(chuàng)建網(wǎng)網(wǎng)頁框框架4、邊邊框效效果（1））框架架邊框框的設(shè)設(shè)置border屬性可可以用用于設(shè)設(shè)置邊邊框的的寬度度，其其值為為像素素?cái)?shù)。。（2））框架架滾動(dòng)動(dòng)條的的設(shè)置置使用FRAME標(biāo)記記符的的scrolling屬性可可以控控制是是否在在框架架內(nèi)加加入滾滾動(dòng)條條，其其值可可以取取為yes、no、、auto。（3））設(shè)置置邊框框的不不可移移動(dòng)屬屬性使用FRAME標(biāo)記記符的的noresize屬性，，該屬屬性不不需要要任何何取值值，即即：<FRAMEnoresize>（4））設(shè)置置框架架空白白FRAME標(biāo)記記符的的marginwidth和marginheight屬性可可以控控制框框架邊邊框與與數(shù)據(jù)據(jù)之間間的距距離，，這個(gè)個(gè)屬性性的取取值都都是像像素?cái)?shù)數(shù)。利用HTML創(chuàng)創(chuàng)建網(wǎng)網(wǎng)頁框框架5．指指定超超鏈接接的目目標(biāo)框框架控制超超鏈接接的目目標(biāo)文文件在在哪一一個(gè)框框架內(nèi)內(nèi)顯示示的方方法是是在a標(biāo)記記符內(nèi)內(nèi)使用用target屬性性，格格式為為：<ahref="目標(biāo)標(biāo)文件件"target="目標(biāo)標(biāo)框架架名">超超鏈接接內(nèi)容容<／／a>利用HTML創(chuàng)創(chuàng)建網(wǎng)網(wǎng)頁框框架返回解決瀏瀏覽器器無法法顯示示框架架的問問題在Dreamweave