高效靈活的網(wǎng)頁(yè)布局-框架的應(yīng)用

高效靈活的網(wǎng)頁(yè)布局——框架的應(yīng)用

項(xiàng)目8知識(shí)要點(diǎn)

認(rèn)識(shí)框架及框架集

1掌握框架架網(wǎng)頁(yè)的的創(chuàng)建方方法2掌握框架及框架集的基本操作3掌握框架及框架集的屬性設(shè)置方法48.1網(wǎng)網(wǎng)頁(yè)頁(yè)展示：：使用框框架布局局“樂途途網(wǎng)”首首頁(yè)頁(yè)面面采用框架架布局的的“樂途途網(wǎng)”首首頁(yè)效果果圖本章使用用框架布布局制作作“樂途途網(wǎng)”首首頁(yè)及““商旅管管理”頁(yè)頁(yè)面?？蚩蚣懿季志值氖醉?yè)頁(yè)效果如如圖所示示，網(wǎng)頁(yè)頁(yè)窗口被被分為上上下兩部部分，上上方為首首頁(yè)頂部部，固定定顯示企企業(yè)Logo及導(dǎo)航等等內(nèi)容，，下方為為首頁(yè)內(nèi)內(nèi)容，拖拖動(dòng)右側(cè)側(cè)滾動(dòng)條條可以瀏瀏覽頁(yè)面面內(nèi)容。。8.1網(wǎng)網(wǎng)頁(yè)頁(yè)展示：：使用框框架布局局“樂途途網(wǎng)”首首頁(yè)頁(yè)面面采用框架架布局的的“商旅旅管理””頁(yè)面效效果圖在導(dǎo)航中中點(diǎn)擊““商旅管管理”超超級(jí)鏈接接，顯示示“商旅旅管理””頁(yè)面內(nèi)內(nèi)容，如如圖所示示。瀏覽覽器窗口口同樣被被分為上上下兩部部分，通通過拖動(dòng)動(dòng)右側(cè)的的滾動(dòng)條條可以瀏瀏覽“商商旅管理理”欄目目主頁(yè)面面內(nèi)容。。在兩個(gè)個(gè)頁(yè)面中中，上方方的導(dǎo)航航部分內(nèi)內(nèi)容相同同，在通通過導(dǎo)航航切換頁(yè)頁(yè)面時(shí)，，該部分分內(nèi)容保保持不變變，不會(huì)會(huì)被刷新新。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作8.2..1創(chuàng)創(chuàng)建和和保存框框架頁(yè)面面步驟1啟啟動(dòng)動(dòng)DreamweaverCS4，在““樂途網(wǎng)網(wǎng)”站點(diǎn)點(diǎn)中，執(zhí)執(zhí)行【文文件】||【新建建】命令令，打開開【新建建文檔】】對(duì)話框框。步驟2在在【【新建文文檔】對(duì)對(duì)話框中中選擇【【示例中中的頁(yè)】】，在【【示例文文件夾】】列表框框中選擇擇【框架架頁(yè)】，，在【示示例頁(yè)】】列表框框中選擇擇框架結(jié)結(jié)構(gòu)【上上方固定定】。步驟3單單擊擊“創(chuàng)建建”按鈕鈕，打開開【框架架標(biāo)簽輔輔助功能能屬性】】對(duì)話框框。在““框架””下拉列列表框中中選擇框框架，在在“標(biāo)題題”文本本框中輸輸入標(biāo)題題，通常常保持默默認(rèn)設(shè)置置。步驟4單單擊擊“確定定”按鈕鈕關(guān)閉對(duì)對(duì)話框，，完成框框架網(wǎng)頁(yè)頁(yè)的創(chuàng)建建8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作步驟5執(zhí)執(zhí)行行【文件件】|【【框架集集另存為為】菜單單命令，，將框架架集頁(yè)面面命名為為“index.html””，保存存在站點(diǎn)點(diǎn)根目錄錄“ch8”文文件夾中中。步驟6鼠鼠標(biāo)標(biāo)點(diǎn)擊選選中上側(cè)側(cè)框架頁(yè)頁(yè)面，執(zhí)執(zhí)行【文文件】||【保存存框架】】菜單命命令，將將上側(cè)框框架頁(yè)面面命名為為“top.html”，保保存在站站點(diǎn)根目目錄中。。步驟7鼠鼠標(biāo)標(biāo)點(diǎn)擊選選中下側(cè)側(cè)框架頁(yè)頁(yè)面，執(zhí)執(zhí)行【文文件】||【保存存框架】】菜單命命令，將將下側(cè)框框架頁(yè)面面命名為為“indexmain.html”，，保存在在站點(diǎn)根根目錄““ch8”文件件夾中。。完成框框架網(wǎng)頁(yè)頁(yè)的保存存。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作8.2..2設(shè)設(shè)置框架架及框架架集屬性性步驟1執(zhí)執(zhí)行行【窗口口】|【【框架】】菜單命命令，打打開【框框架】面面板，選選擇框架架集。步驟2在在【【屬性】】面板中中設(shè)置邊邊框?yàn)椤啊盁o”，，邊框?qū)拰挾葹?，行高高設(shè)置為為190像素。。步驟3在在【【框架】】面板中中選擇““topFrame””框架，，在【屬屬性】面面板中設(shè)設(shè)置上側(cè)側(cè)框架的的屬性。。步驟4在在【【框架】】面板中中選擇““mainFrame”框架架，在【【屬性】】面板中中設(shè)置下下側(cè)框架架的屬性性。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作8.2..3制制作頂部部和下側(cè)側(cè)框架頁(yè)頁(yè)面步驟1在在【【文件】】面板中中雙擊頂頂部頁(yè)面面top.html文文件，在在工作區(qū)區(qū)以設(shè)計(jì)計(jì)視圖打打開文件件。步驟2打打開開【頁(yè)面面屬性】】對(duì)話框框，設(shè)置置top.html頁(yè)頁(yè)面的上上下和左左右邊距距。步驟3在在top..html中插插入表格格，保證證表格高高度與““topFrame””框架的的行高一一致，并并設(shè)置表表格的對(duì)對(duì)齊方式式為“居居中對(duì)齊齊”。步驟4在在表表格中插插入圖片片、文本本及導(dǎo)航航圖像，，并設(shè)置置好CSS樣式式，完成成導(dǎo)航頁(yè)頁(yè)面top.html的制作作。步驟5在在工工作區(qū)以以設(shè)計(jì)視視圖打開開下側(cè)框框架頁(yè)面面indexmain.html文文件，該該頁(yè)面的的內(nèi)容為為已制作作的“樂樂途網(wǎng)””首頁(yè)去去掉頂部部?jī)?nèi)容之之后的部部分。在在【頁(yè)面面屬性】】對(duì)話框框中設(shè)置置上下邊邊距和左左右邊距距都設(shè)為為0。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作步驟6在在indexmain..html中插插入表格格，用于于制作首首頁(yè)的主主要內(nèi)容容，設(shè)置置表格的的對(duì)齊方方式為““居中對(duì)對(duì)齊”。。步驟7在在表表格中插插入圖片片和文本本，并設(shè)設(shè)置好CSS樣樣式，完完成indexmain.html頁(yè)面的的制作。。步驟8將將頁(yè)頁(yè)面全部部保存，，在瀏覽覽器中瀏瀏覽index.html，，就會(huì)看看到圖8-1所所顯示的的頁(yè)面效效果。整整個(gè)瀏覽覽器窗口口被分為為上下兩兩部分，，上側(cè)框框架中顯顯示top.html頁(yè)面內(nèi)內(nèi)容，下下側(cè)框架架中顯示示indexmain.html頁(yè)頁(yè)面內(nèi)容容。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作8.2..4制制作““商旅管管理”主主頁(yè)面步驟1在在【【文件】】面板中中雙擊ctmmain.html文文件，在在工作區(qū)區(qū)以設(shè)計(jì)計(jì)視圖打打開文件件。設(shè)置置ctmmain.html頁(yè)面的的上下邊邊距和左左右邊距距都為0。步驟2在在ctmmain.html中中用表格格進(jìn)行布布局，設(shè)設(shè)置表格格的對(duì)齊齊方式為為“居中中對(duì)齊””。步驟3在在表表格中插插入圖片片和文本本，并設(shè)設(shè)置好CSS樣樣式，完完成ctmmain..html頁(yè)面面的制作作。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作8.2..5在在框架中中創(chuàng)建超超級(jí)鏈接接步驟1在在設(shè)設(shè)計(jì)視圖圖中打開開導(dǎo)航頁(yè)頁(yè)面top.html，選擇擇導(dǎo)航條條中的““首頁(yè)””圖片，，在【屬屬性】面面板中設(shè)設(shè)置圖像像鏈接為為“indexmain.html”，目目標(biāo)為““mainframe”。。保存，，完成鏈鏈接到首首頁(yè)的超超鏈接設(shè)設(shè)置。步驟2在在top..html中，，鼠標(biāo)單單擊選擇擇“商旅旅管理””導(dǎo)航圖圖片，在在【屬性性】面板板中設(shè)置置圖像鏈鏈接為““ctmmain.html”，目目標(biāo)為““mainframe”。保保存，完完成“商商旅管理理”超鏈鏈接設(shè)置置。8.2網(wǎng)網(wǎng)頁(yè)頁(yè)制作步驟3用用同同樣的方方法創(chuàng)建建好其他他欄目的的超級(jí)鏈鏈接，鏈鏈接的目目標(biāo)都設(shè)設(shè)置為““mainFrame”，這這樣超鏈鏈接對(duì)應(yīng)應(yīng)頁(yè)面內(nèi)內(nèi)容就會(huì)會(huì)在“mainframe””框架中中顯示。。步驟4保保存存top.html頁(yè)頁(yè)面，在在瀏覽器器中瀏覽覽框架集集頁(yè)面index.html，測(cè)試試設(shè)置好好的超級(jí)級(jí)鏈接，，超鏈接接所對(duì)應(yīng)應(yīng)的欄目目頁(yè)面會(huì)會(huì)在下側(cè)側(cè)框架中中顯示，，而瀏覽覽器的地地址欄中中一直保保持為index.html頁(yè)面地地址。8.3知知識(shí)鏈鏈接認(rèn)識(shí)框架架和框架架集創(chuàng)建框架架網(wǎng)頁(yè)框架及框框架集的的基本操操作框架與框框架集的的屬性設(shè)設(shè)置使用超鏈鏈接控制制框架內(nèi)內(nèi)容為不能顯顯示框架架的瀏覽覽器定義義內(nèi)容8.3..1認(rèn)認(rèn)識(shí)框架架和框架架集框架網(wǎng)頁(yè)頁(yè)是一種種特殊的的HTML網(wǎng)頁(yè)頁(yè)，框架架的作用用就是把把瀏覽器器窗口劃劃分成若若干個(gè)區(qū)區(qū)域，每每個(gè)區(qū)域域都可以以分別顯顯示不同同的網(wǎng)頁(yè)頁(yè)?？蚣芗芫W(wǎng)頁(yè)由由兩個(gè)主主要部分分組成：：框架集集和單個(gè)個(gè)框架。。框架集集是在一一個(gè)文檔檔內(nèi)定義義一組框框架結(jié)構(gòu)構(gòu)的HTML網(wǎng)網(wǎng)頁(yè)，該該網(wǎng)頁(yè)文文件中定定義了要要顯示的的框架數(shù)數(shù)、框架架的大小小、載入入框架的的網(wǎng)頁(yè)源源和其他他可定義義的屬性性。單個(gè)個(gè)框架是是指在網(wǎng)網(wǎng)頁(yè)上定定義的一一個(gè)區(qū)域域，每個(gè)個(gè)框架就就是不同同的HTML文文檔?？蚩蚣芗秃涂蚣苤g的關(guān)關(guān)系就是是包含與與被包含含的關(guān)系系。8.3..2創(chuàng)創(chuàng)建框框架網(wǎng)頁(yè)頁(yè)1．通過過【新建建文檔】】對(duì)話框框創(chuàng)建前面使用用框架布布局“樂樂途網(wǎng)””首頁(yè)頁(yè)頁(yè)面時(shí)采采用的方方法就是是通過【【新建文文檔】對(duì)對(duì)話框直直接創(chuàng)建建預(yù)定義義框架集集。8.3..2創(chuàng)創(chuàng)建框框架網(wǎng)頁(yè)頁(yè)2．從““布局””插入欄欄中創(chuàng)建建步驟1新新建建空白網(wǎng)網(wǎng)頁(yè)文檔檔，將【【插入】】面板切切換到““布局””插入欄欄。步驟2單單擊擊“框架架”按鈕鈕右側(cè)的的下三角角按鈕，，在彈出出的菜單單項(xiàng)中選選擇需要要的框架架，這里里選擇““頂部框框架”，，如圖所所示。選擇框架架集8.3..2創(chuàng)創(chuàng)建框框架網(wǎng)頁(yè)頁(yè)2．從““布局””插入欄欄中創(chuàng)建建步驟3在在打打開的【【框架標(biāo)標(biāo)簽輔助助功能屬屬性】對(duì)對(duì)話框中中直接單單擊“確確定”按按鈕，完完成框架架網(wǎng)頁(yè)的的創(chuàng)建，，如圖所所示。創(chuàng)建框架架網(wǎng)頁(yè)8.3..2創(chuàng)創(chuàng)建框框架網(wǎng)頁(yè)頁(yè)3．從【【插入】】菜單中中創(chuàng)建框框架頁(yè)面面步驟1創(chuàng)創(chuàng)建建空白網(wǎng)網(wǎng)頁(yè)文檔檔。步驟2執(zhí)執(zhí)行行【插入入】|【【HTML】||【框架架】菜單單命令，，在彈出出的子菜菜單中選選擇相應(yīng)應(yīng)的選項(xiàng)項(xiàng)即可創(chuàng)創(chuàng)建框架架網(wǎng)頁(yè)，，如圖所所示。從【插入入】菜單單中創(chuàng)建建框架頁(yè)頁(yè)面8.3..2創(chuàng)創(chuàng)建框框架網(wǎng)頁(yè)頁(yè)4．手動(dòng)動(dòng)創(chuàng)建框框架步驟1新新建建空白網(wǎng)網(wǎng)頁(yè)文檔檔，執(zhí)行行【查看看】|【【可視化化助理】】|【框框架邊框框】菜單單命令，，將框架架的邊框框在編輯輯窗口四四周顯示示出來，，如圖所所示。步驟2將將光光標(biāo)定位位到需要要分割的的框架中中，按住住Alt鍵，將將鼠標(biāo)移移動(dòng)到框框架邊框框線上，，當(dāng)鼠標(biāo)標(biāo)指針變變?yōu)殡p向向箭頭形形狀時(shí)，，按住鼠鼠標(biāo)左鍵鍵不放，，拖動(dòng)到到合適位位置釋放放鼠標(biāo)，，即可將將一個(gè)框框架拆分分為兩個(gè)個(gè)框架，，如圖所所示。顯示框架架邊框拆分框架架8.3..2創(chuàng)創(chuàng)建框框架網(wǎng)頁(yè)頁(yè)5．創(chuàng)建建嵌套框框架集步驟1將將鼠鼠標(biāo)定位位到需要要?jiǎng)?chuàng)建嵌嵌套框架架集的框框架中，，如圖所所示。步驟2在在【【插入】】面板中中單擊【【布局】】︱【框框架】︱︱【下方方和嵌套套的左側(cè)側(cè)框架】】命令項(xiàng)項(xiàng)。步驟3在在打打開的【【框架標(biāo)標(biāo)簽輔助助功能屬屬性】對(duì)對(duì)話框中中單擊““確定””按鈕，，完成嵌嵌套框架架的制作作，如圖圖所示。。鼠標(biāo)定位位創(chuàng)建嵌套套框架8.3..3框框架及框框架集的的基本操操作1．保存存框架和和框架集集文件框架及框框架集都都是HTML文文檔，因因此這些些文件必必須一起起保存。。在Dreamweaver中用戶戶可以單單獨(dú)保存存一個(gè)框框架集文文件，也也可以保保存某個(gè)個(gè)框架文文件，還還可以保保存所有有打開的的框架文文件和框框架集文文件。（1）保保存框架架集的所所有文件件要保存所所有文件件，包括括框架集集文件和和框架文文件，可可以執(zhí)行行【文件件】|【【保存全全部】菜菜單命令令。這時(shí)時(shí)Dreamweaver將將逐個(gè)保保存網(wǎng)頁(yè)頁(yè)中的所所有框架架。8.3..3框框架及框框架集的的基本操操作（2）保保存框架架集文件件執(zhí)行【文文件】||【框架架集另存存為】菜菜單命令令，可以以把當(dāng)前前框架集集另存為為新文件件。（3）保保存框架架文件框架文件件實(shí)際上上就是在在框架內(nèi)內(nèi)打開的的網(wǎng)頁(yè)文文件，要要保存框框架文件件，在框框架內(nèi)單單擊鼠標(biāo)標(biāo)，定位位到要保保存的框框架頁(yè)面面，然后后執(zhí)行【【文件】】|【保保存框架架】菜單單命令。。8.3..3框框架及框框架集的的基本操操作2．選擇擇框架和和框架集集選中框架架和框架架集后，，可以改改變其屬屬性。選選擇框架架和框架架集有兩兩種方式式。（1）通通過【框框架】面面板選擇擇框架和和框架集集執(zhí)行【窗窗口】||【框架架】菜單單命令，，顯示【【框架】】面板，，在【框框架】面面板中在在框架上上單擊就就可以選選中框架架，如圖圖所示。。選擇框架架8.3..3框框架及框框架集的的基本操操作若要選擇擇框架集集，只需需單擊框框架集的的邊框即即可，如如圖所示示。在【【框架】】面板中中，選中中的框架架或框架架集周圍圍會(huì)出現(xiàn)現(xiàn)黑色邊邊框，在在編輯窗窗口中，，對(duì)應(yīng)所所選中的的框架或或框架集集的邊界界會(huì)被虛虛線包圍圍。選擇框架架集8.3..3框框架及框框架集的的基本操操作（2）在在編輯窗窗口中選選擇框架架和框架架集在編輯窗窗口的設(shè)設(shè)計(jì)視圖圖中，也也可以直直接選擇擇框架和和框架集集。如果果要選擇擇框架，，可以按按下Alt鍵，，然后單單擊需要要選擇的的框架即即可。如如果要選選擇框架架集，直直接用鼠鼠標(biāo)單擊擊框架邊邊框即可可。所選選中的框框架或框框架集的的邊框會(huì)會(huì)呈現(xiàn)虛虛線。8.3..3框框架及框框架集的的基本操操作3．刪除除框架刪除不需需要的框框架，可可用鼠標(biāo)標(biāo)將要?jiǎng)h刪除框架架的邊框框拖動(dòng)到到頁(yè)面之之外即可可。如果果是嵌套套框架，，可用鼠鼠標(biāo)將其其邊框拖拖動(dòng)到父父框架邊邊框上或或者拖動(dòng)動(dòng)到頁(yè)面面之外即即可。8.3..3框框架及框框架集的的基本操操作4．使用用浮動(dòng)框框架制作作頁(yè)面浮動(dòng)框架架iframe與框架架frame的的功能一一樣，不不同的是是可以把把iframe布置在在網(wǎng)頁(yè)中中的任何何位置，，包括層層中，可可以給網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)計(jì)帶來很很大的靈靈活性。。創(chuàng)建浮浮動(dòng)框架架的步驟驟如下：：步驟1在在網(wǎng)網(wǎng)頁(yè)文檔檔中，將將光標(biāo)定定位在要要?jiǎng)?chuàng)建浮浮動(dòng)框架架的位置置。在【【插入】】面板中中單擊【【常用】】︱【標(biāo)標(biāo)簽選擇擇器】按按鈕，如如圖所示示。選擇“標(biāo)標(biāo)簽選擇擇器”8.3..3框框架及框框架集的的基本操操作步驟2在在彈彈出的【【標(biāo)簽選選擇器】】對(duì)話框框中單擊擊“HTML標(biāo)標(biāo)簽”項(xiàng)項(xiàng)，在右右側(cè)標(biāo)簽簽列表中中選擇““iframe”，如如圖所示示。【標(biāo)簽選選擇器】】對(duì)話框框

8.3..3框框架及框框架集的的基本操操作步驟3單單擊擊“插入入”按鈕鈕，打開開【標(biāo)簽簽編輯器器】對(duì)話話框，如如圖所示示。在該該對(duì)話框框中對(duì)iframe的的屬性進(jìn)進(jìn)行編輯輯，包括括要顯示示的源文文件、浮浮動(dòng)框架架名稱以以及浮動(dòng)動(dòng)框架的的寬度和和高度等等。

【標(biāo)簽編編輯器】】對(duì)話框框8.3..3框框架及框框架集的的基本操操作步驟4屬屬性性設(shè)置好好后，單單擊“確確定”按按鈕，再再關(guān)閉【【標(biāo)簽選選擇器】】對(duì)話框框，在““拆分””視圖中中就可以以看到插插入的標(biāo)標(biāo)簽。步驟5保保存存網(wǎng)頁(yè)文文檔，按按F12鍵，在在瀏覽器器中瀏覽覽。浮動(dòng)動(dòng)框架iframe的的網(wǎng)頁(yè)效效果如圖圖所示。。

浮動(dòng)框架架效果8.3..4框框架與框框架集的的屬性設(shè)設(shè)置1．設(shè)置置框架的的屬性要設(shè)置框框架的屬屬性，可可以先選選中相應(yīng)應(yīng)的框架架，然后后在框架架屬性面面板中設(shè)設(shè)置框架架的屬性性，如圖圖所示。。設(shè)置框架架的屬性性8.3..4框框架與框框架集的的屬性設(shè)設(shè)置2．設(shè)置置框架集集的屬性性要設(shè)置框框架集的的屬性，，可先選選中框架架集，然然后在框框架集屬屬性面板板中設(shè)置置框架集集的屬性性，如圖圖所示。。設(shè)置框架架集的屬屬性8.3..5使使用超鏈鏈接控制制框架內(nèi)內(nèi)容使用超鏈鏈接控制制框架內(nèi)內(nèi)容，也也就是在在一個(gè)框框架中用用鏈接來來控制另另一個(gè)框框架中的的顯示內(nèi)內(nèi)容，這這也是使使用框架架的主要要目的。。要實(shí)現(xiàn)現(xiàn)該功能能，必須須在創(chuàng)建建超鏈接接時(shí)指定定鏈接的的目標(biāo)位位置，也也就是指指明要操操作的框框架對(duì)象象?？蚣芗芪恢?/p>