網(wǎng)設計與制作之-框架結(jié)構_第1頁
網(wǎng)設計與制作之-框架結(jié)構_第2頁
網(wǎng)設計與制作之-框架結(jié)構_第3頁
網(wǎng)設計與制作之-框架結(jié)構_第4頁
網(wǎng)設計與制作之-框架結(jié)構_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

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

【基本操作】創(chuàng)建框架結(jié)構：在插入面板中找到布局選項，在其中選擇下圖所示的圖標，并選擇相應的框架結(jié)構選擇框架窗口出幫助凹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服務器行為?Ctrl-H=9蛆件囪Ctrl-H=7文件⑤F8資源?FU4標簽檢查器①F9結(jié)果因F7歷史記錄但iShift好1口Shift-H=21）首先從“窗口”菜單中打開“框架”面板2）然后在“框架”面板中選擇某一個框架，如下圖所示

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

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

2）在左側(cè)框架中設定三個超級鏈接，并鏈接對應的網(wǎng)頁文件。網(wǎng)頁將在MainFrame顯示。默認顯示“2004年經(jīng)典對白”3）左側(cè)框架背景為灰色4）框架集需要顯示邊框，寬度為3象素IV利用已有網(wǎng)頁制作框架網(wǎng)頁常規(guī)設置右邊網(wǎng)頁客戶服勢中心論壇日志音理初始信息設置常規(guī)設置右邊網(wǎng)頁客戶服勢中心論壇日志音理初始信息設置論壇管理盥＞新浪網(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博客手機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關閉廣注冊通行證I郵箱用戶名鱉K新聞I體育IWBA|娛樂|明星|財經(jīng)|科技|汽車|手機|宜人|旅游|游我|探索|圖片|，弼易NetEase3G郵箱軍事|奧運|英超|電卸|商業(yè)|證券|基金|車型|數(shù)碼|時尚|情愛|招聃|拍賣|雜志|論壇版面添加I管理

論壇權限管理

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論