網(wǎng)設(shè)計與制作之-框架結(jié)構(gòu)

框架是什么，框架就好比我們的骨骼，支撐著整個網(wǎng)頁，如果一個網(wǎng)頁沒了框架，那么就感覺像一盤散沙，因此為了更好的實現(xiàn)網(wǎng)頁的效果，我們就要學(xué)會給網(wǎng)頁制作一個框架，為了更好的理解什么是框架。我們畫一張示意圖來進(jìn)行討論。第港城芾B第港城芾BWWW.TH7.CM■M匚工二?,匚BlhtmAB這是一個左右型的框架，由三個網(wǎng)頁文件組成的。首先外部的框架是一個文件，圖中我們用index.htm命名?？蚣苤凶筮吤麨锳，指向的是一個網(wǎng)頁兒卜加。右邊命名為B，指向的是一個網(wǎng)頁B.htm。下面我們就來從頭開始制作一個框架。上方固定上方固定,下方固定上方固定，右例俄套上方固定，左測嵌套下方固定下方固定，右惻嵌套下方固定.左何嵌E右州固定右惻囿定，上方幌建右Ml固定，下方嵌套垂直推分1上方固定上方固定,下方固定上方固定，右例俄套上方固定，左測嵌套下方固定下方固定，右惻嵌套下方固定.左何嵌E右州固定右惻囿定，上方幌建右Ml固定，下方嵌套垂直推分1、點“文件”菜單〉新建，彈出“新建文檔”對話框如下圖:常規(guī)模版類別槌架集莖本貫動/頁橫柜頁耳性CSS群式表板架集頁面建計CSS）貞囪設(shè)計頁面諛汁（有輔助功能的了□□□□□□□□□□□□□□□左惻密定左例固定.上方嵌套左惻固定.下方微言水平振分小國定的左韌娠架垂直折分的桁述大頁

卷用架或在插入欄＞布局＞選”框架：左框架"如下圖:文件理）編輯查看?插入（X）修改迪）文布局/BB文件理）編輯查看?插入（X）修改迪）文布局/BB蔡nwy.w.v.-.標(biāo)推擴(kuò)展布局■lacro>e(Drea>Teaver2004-［無標(biāo)題文檔(UntitledFra>eset-9DreamweaverMX2004生成一個空白的框架頁面，如下圖:2、選擇「窗口」菜單＞“框架”，彈出“框架”面板如下圖。從框架面板可知，系統(tǒng)對左右框架生成命名。左框架名為：leftFrame，右框架名為：1^1皿好1^，當(dāng)然您可以通過框架屬性面板對框架重新命名，了解這一點非常重要。創(chuàng)建超級鏈接時，要依據(jù)它正確控制指向的頁面。

3、保存框架。選擇“文件”菜單點擊“保存全部”。系統(tǒng)彈出對話框。這時，保存的是個框架結(jié)構(gòu)文件。我們按照慣例都命名為index.htm。保存的時候如果虛線框籠罩的是周圍一圈就是保存框架結(jié)構(gòu)。（下圖）虛線籠罩在右邊就是保存框架中右邊網(wǎng)頁。（如下圖）

虛線籠罩在左邊就是保存框架中左邊的網(wǎng)頁：（如下圖）三個頁面保存完畢。

4、下面我們要實現(xiàn)按左邊的超級鏈接，對應(yīng)的頁面出現(xiàn)在右邊。在左邊的頁面中做上超級鏈接。指向一個已經(jīng)存在的頁面。注意做好鏈接以后，要在目標(biāo)欄中設(shè)置為mainFrame。（如下圖）6、設(shè)置完畢，保存全部，按F12預(yù)覽網(wǎng)頁。鏈接指向的頁面出現(xiàn)在右邊框架中。7、重復(fù)以上步驟，把左框架所有的鏈接做完，一個簡單的網(wǎng)站導(dǎo)航結(jié)構(gòu)創(chuàng)建完成。更多Dreamweaver教程請繼續(xù)訪問建站學(xué)的Dreamweaver教程專區(qū)。實驗七框架結(jié)構(gòu)【實驗?zāi)康摹浚和ㄟ^本實驗，使學(xué)生熟悉創(chuàng)建、編輯框架網(wǎng)頁和利用框架來布局頁面的基本方法。t實驗要求】：.掌握應(yīng)用框架設(shè)計網(wǎng)頁布局的方法；.掌握創(chuàng)建、編輯框架網(wǎng)頁及設(shè)置框架屬性的方法；.掌握鏈接框架網(wǎng)頁的方法。

【基本操作】創(chuàng)建框架結(jié)構(gòu)：在插入面板中找到布局選項，在其中選擇下圖所示的圖標(biāo)，并選擇相應(yīng)的框架結(jié)構(gòu)選擇框架窗口出幫助凹4插入9-4雇性?Ctrl-FZCtrl-H=3?匚謝樣式?Shift-H=115層①F214行為回Shift-H=3- 代碼片斷西Shift-H=91參考⑤Shift-H=l數(shù)據(jù)庫⑥Ctrl+Shift-H=10綁定伊Ctrl-FlO服務(wù)器行為?Ctrl-H=9蛆件囪Ctrl-H=7文件⑤F8資源?FU4標(biāo)簽檢查器①F9結(jié)果因F7歷史記錄但iShift好1口Shift-H=21）首先從“窗口”菜單中打開“框架”面板2）然后在“框架”面板中選擇某一個框架，如下圖所示

添加網(wǎng)頁內(nèi)容選擇某一框架后，點擊“屬性”-“源文件”以設(shè)定框架的網(wǎng)頁t實驗內(nèi)容】：I創(chuàng)建一個左側(cè)框架頁，并在相應(yīng)的框架中添加FrameA和FrameB兩個網(wǎng)頁，構(gòu)成如下圖所示的網(wǎng)頁要求：1）設(shè)定LeftFrame的寬為400像素2）設(shè)定兩個框架均出現(xiàn)滾動條II創(chuàng)建一個如下圖所示的三欄框架頁，并在相應(yīng)的框架中添加FrameA、FrameB和

FrameC三個網(wǎng)頁，構(gòu)成如下圖所示的網(wǎng)頁。1）三欄分別命名為LeftFramgMidFrame、RightFrame2）三欄的寬度為200像素、300像素、504像素操作步驟：1）創(chuàng)建一個左側(cè)框架網(wǎng)頁，選定整個框架之后（選定整個框架參見P110），點擊切換到拆分視圖，將Frameset標(biāo)記符中的Cols屬性修改為：200，300，*（請注意切換到英文狀態(tài)下輸入）<framesetrows="*"cols="200,300,*“>2）分別在“框架”面板中選擇相應(yīng)的框架，插入相應(yīng)的網(wǎng)頁III框架網(wǎng)頁中的超級鏈接要求：1）創(chuàng)建左側(cè)框架網(wǎng)頁

2）在左側(cè)框架中設(shè)定三個超級鏈接，并鏈接對應(yīng)的網(wǎng)頁文件。網(wǎng)頁將在MainFrame顯示。默認(rèn)顯示“2004年經(jīng)典對白”3）左側(cè)框架背景為灰色4）框架集需要顯示邊框，寬度為3象素IV利用已有網(wǎng)頁制作框架網(wǎng)頁常規(guī)設(shè)置右邊網(wǎng)頁客戶服勢中心論壇日志音理初始信息設(shè)置常規(guī)設(shè)置右邊網(wǎng)頁客戶服勢中心論壇日志音理初始信息設(shè)置論壇管理盥＞新浪網(wǎng)

9jn&.

成都守陣雨首頁I新聞財姓I娛樂I寬頻I女性論壇管理盥＞新浪網(wǎng)

9jn&.

成都守陣雨首頁I新聞財姓I娛樂I寬頻I女性I房產(chǎn)I旅游I游戲I軍事I論壇I企業(yè)I短信愛問I體育科技I音樂Ity|育兒|京居|法治|星座|上海|圈子|城市|彩鈴”郵箱I博客手機(jī)I國庫I理財I飲食I汽車I名品I教育I廣東I高爾夫I黃頁I彩信天氣I播客I數(shù)碼I讀書I家電I健康IF1I商城IU匚I搜索IiGweI分類I聊天和弋?1FIT公園環(huán)抱麗都東靖褐石封頂了! 萬科板樓50萬起售半山別墅培中華御景?盛世國宅獨棟總部集群 萬城華府典藏公開望京公寓的新交通銀行iA股專欄I關(guān)閉廣注冊通行證I郵箱用戶名鱉K新聞I體育IWBA|娛樂|明星|財經(jīng)|科技|汽車|手機(jī)|宜人|旅游|游我|探索|圖片|，弼易NetEase3G郵箱軍事|奧運|英超|電卸|商業(yè)|證券|基金|車型|數(shù)碼|時尚|情愛|招聃|拍賣|雜志|論壇版面添加I管理

論壇權(quán)限管理

合并論壇數(shù)據(jù)

更新論壇數(shù)據(jù)聯(lián)盟論壇添加I管理

發(fā)布論壇公告I管理

論壇門派營理隱私保護(hù)版權(quán)所有DCopyright2003吉林伍陸柒揚股份有限公司要求：按照樣張所示，利用index文件夾中提供的四個網(wǎng)頁，組成如圖所示的框架網(wǎng)頁【參考習(xí)題】1、創(chuàng)建一個頂部框架，TopFrame中顯示新浪的首頁，MainFrame顯示163的首頁。兩個框架需要顯示滾動條，顯示框架邊框。效果如下圖注冊通行證登錄名| 密碼| |免費郵箱二］登錄|忘記密碼免費郵箱VIP郵箱企業(yè)郵箱設(shè)為首頁2、利用素材中的163、sina的圖片制作如下的框架網(wǎng)頁。框架本身就是一個網(wǎng)頁文件，而所謂的導(dǎo)航（目錄）和正文也都是另外獨立的網(wǎng)頁文件一一也就是說，一個框架一般至少需要3個網(wǎng)頁文件組成。你用什么軟件編寫的？注意退出時的保存提示。比如一個簡單的目錄框架網(wǎng)頁名為INDEX.HTM，一般都包含left.ht（左邊導(dǎo)航目錄）和MAIL.HTM（右邊主體內(nèi)容）部分INDEX.HTM網(wǎng)頁關(guān)鍵代碼應(yīng)為<framesetcols="150,*“><framename="contents"target="main'Src="left.htm”><framename="main"src="main.htm”><noframes><body>框架是網(wǎng)頁中經(jīng)常使用的頁面設(shè)計方式，框架的作用就是把網(wǎng)頁在一個瀏覽器窗口下分割成幾個不同的區(qū)域，實現(xiàn)在一個瀏覽器窗口中顯示多個HTML頁面。使用框架可以非常方便的完成導(dǎo)航工作，讓網(wǎng)站的結(jié)構(gòu)更加清晰，而且各個框架之間決不存在干擾問題。利用框架最大的特點就是使網(wǎng)站的風(fēng)格一致。通常把一個網(wǎng)站中頁面相同的部分單獨制作成一個頁面,作為框架結(jié)構(gòu)的一個子框架的內(nèi)容給整個網(wǎng)站公用。一個框架結(jié)構(gòu)有兩部分網(wǎng)頁文件構(gòu)成：

框架作好00）：框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的網(wǎng)頁文件?？蚣芗录?050口：框架集也是一個網(wǎng)頁文件，它將一個窗口通過行和列的方式分割成多個框架，框架的多少根據(jù)具體有多少網(wǎng)頁來決定，每個框架中要顯示的就是不同的網(wǎng)頁文件。一、創(chuàng)建框架在創(chuàng)建框架集或使用框架前，通過選擇“查看/可視化助理/框架邊框”命令，使框架邊框在文檔窗口的設(shè)計視圖中可見。1、使用預(yù)制框架集（1）、新建一個HTML文件，在快捷工具欄選擇“布局”，單擊“框架”按鈕，在彈出的下拉菜單中選擇“頂部和嵌套的左側(cè)框架”。標(biāo)準(zhǔn)布局06.html布局▼標(biāo)準(zhǔn)布局06.html布局▼口口圖口左側(cè)框架□］右側(cè)框架m頂部框架□底部框架烏下方和嵌套的左側(cè)框架□下方和嵌套的右側(cè)框架口左側(cè)和嵌套的下方框架口右側(cè)和嵌套的下方框架□上方和下方框架舊左側(cè)和嵌套的頂部框架Eli右側(cè)和嵌套的上方框架頂部和澆套的左側(cè)框架DI頂部和澆套的左側(cè)框架DI上方和嵌套的右幽框架（2）、使用鼠標(biāo)直接從框架的左側(cè)邊緣河上邊緣向中間拖動，直至合適的位置，這樣頂部和嵌套的左側(cè)框架就完成了。2、鼠標(biāo)拖動創(chuàng)建框架（1）、新建普通網(wǎng)頁，命名后將其打開。（2）、把鼠標(biāo)放到框架邊框上，出現(xiàn)雙箭頭光標(biāo)時拖拽框架邊框，可以垂直或水平分割網(wǎng)頁。二、、保存框架每一個框架都有一個框架名稱，可以用默認(rèn)的框架名稱，也可以在屬性面板修改名稱，我們采用系統(tǒng)默認(rèn)的框架名稱topFrame（上方）、leftFrame（左側(cè)）、mainFrame（右側(cè)）。選擇菜單欄＞文件＞保存全部，將框架集保存為index.html，上方框架保存為07.html,左側(cè)框架保存為08.html，右側(cè)框架保存為09.html。這個步驟雖然簡單，但是很關(guān)鍵，只有將總框架集和各個框架保存在本地站點根目錄下，才能保證瀏覽頁面時顯示正常。三、編輯框架式網(wǎng)頁雖然框架式網(wǎng)頁把屏幕分割成幾個窗口，每個框架（窗口）中放置一個普通的網(wǎng)頁，但是編輯框架式網(wǎng)頁時，要把整個編輯窗口當(dāng)作一個網(wǎng)頁來編輯，插入的網(wǎng)頁元素位于哪個框架，就保存在哪個框架的網(wǎng)頁中。框架的大小可以隨意修改。1、改變框架大小用鼠標(biāo)拖拽框架邊框可隨意改變框架大小。2、刪除框架用鼠標(biāo)把框架邊框拖拽到父框架的邊框上，可刪除框架。3、設(shè)置框架屬性設(shè)置框架屬性時，必須先選中框架。選擇框架方法如下：選擇菜單欄＞窗口＞框架，打開框架面板，單擊某個框架，即可選中該框架。在編輯窗口某個框架內(nèi)按住Alt鍵并單擊鼠標(biāo)，即可選擇該框架。當(dāng)一個框架被選擇時，它的邊框帶有點線輪廓2.設(shè)置框架屬性選中框架，在屬性面板上可以設(shè)置框架屬性：框架名稱、源文件、空白邊距、滾動條、重置大小和邊框?qū)傩缘?。需要注意的是?、框架是不可以合并的。2、在創(chuàng)建鏈接時要用到框架名稱，所以我們要很清楚的知道每個框架對應(yīng)的框架名。四、在框架中使用超級鏈接在框架式網(wǎng)頁中制作超級鏈接時，一定要設(shè)置鏈接的目標(biāo)屬性，為鏈接的目標(biāo)文檔指定顯示窗口。鏈接目標(biāo)較遠(yuǎn)（其他網(wǎng)站）時，一般放在新窗口，在導(dǎo)航條上創(chuàng)建鏈接時，一般將目標(biāo)文檔放在另一個框架中顯示（當(dāng)頁面較小時）或全屏幕顯示（當(dāng)頁面較大時）?！澳繕?biāo)”下拉菜單中的選項：_blank放在新窗口中。_parent放到父框架集或包含該鏈接的框架窗口中。_self放在相同窗口中（默認(rèn)窗口無須指定）。_top放到整個瀏覽器窗口并刪除所有框架。在我們保存有框架名為mainFrame、leftFrame、topFrame的框架后，在目標(biāo)下拉菜單中，還會出現(xiàn)021演血00、leftFrame、topFrame選項：mainFrame放到名為mainFrame的框架中。leftFrame放到名為leftFrame的框架中。topFrame放到名為topFrame的框架中。我做了一個HTML文件，是Frame結(jié)構(gòu)的，左邊是超鏈接，但是鏈接的是一個網(wǎng)頁文件'1我想點擊該鏈接后，網(wǎng)頁文件'打開的網(wǎng)頁'出現(xiàn)在右邊，該怎么寫？注意：超鏈接的是一個網(wǎng)頁文件”并非超鏈接地址”（可以用Javascript能不能詳細(xì)一點??？我的左邊頁面寫的是：<ahref=〃e:\Web\1.html〃target=〃right〃>aaaaa</a><ahref=〃e:\Web\2.html〃>bbbbbb</a>如果用JS怎么寫？麻煩看清楚啊！我的a鏈接的不是一個超鏈接，實際上是一個文件，怎么還回答超鏈接，超鏈接的target你們不用說我都會。真是無語了！垂直分欄<html><framesetcols="25%,50%,25%”><framesrc="frame_a.htm”><framesrc="frame_b.htm”><framesrc="frame_c.htm”></frameset></html>水平分欄<html><framesetrows="25%,50%,25%”><framesrc="frame_a.htm”><framesrc="frame_b.htm”><framesrc="frame_c.htm”></frameset></html>如何使用<noframes>標(biāo)簽：<html><framesetcols="25%,50%,25%”><framesrc="frame_a.htm”><framesrc="frame_b.htm”><framesrc="frame_c.htm”><noframes><body>Yourbrowserdoesnothandleframes!</body></noframes></frameset></html