網頁設計與制作設計框架網頁_第1頁
網頁設計與制作設計框架網頁_第2頁
網頁設計與制作設計框架網頁_第3頁
網頁設計與制作設計框架網頁_第4頁
網頁設計與制作設計框架網頁_第5頁
已閱讀5頁，還剩59頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

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

文檔簡介

8第

8

章 設計框架網頁2023-02-15第8章設計框架網頁1網頁設計與制作（第2版）第

8

章 設計框架網頁2023-02-15第8章設計框架網頁28.1

框架網頁8.2

框架屬性8.3 內嵌框架IFrame8.4

本章綜合案例8.1

框架網頁2023-02-15第8章設計框架網頁3框架是比較常用地網頁技術,使用框架技術可以將不同地網頁文檔在同一個瀏覽器窗口顯示出來?？蚣?/p>

地作用就是把瀏覽器窗口劃分為若干個區(qū)域,每個區(qū)域用來分別顯示不同地網頁?？蚣苡蓛蓚€主要部分

組成:框架集與單個框架?？蚣芗谝粋€文檔內定義一組框架地布局與屬性,包括框架地數(shù)目,框架地大小與位置以及在每個框架初始顯示地頁面地URL;單個

框架是指在網頁上定義地一個區(qū)域。8.1

框架網頁2023-02-15第8章設計框架網頁4框架網頁概述框架地作用就是把瀏覽器窗口劃分為若干個區(qū)域,而且每個區(qū)域可以分別顯示不同地網頁。這樣可以使得整個頁面地布局結構清晰,信息展現(xiàn)方式更為靈活;每個框架網頁都具有獨立地滾動條,因此訪問者可以獨立控制各個頁面。8.1

框架網頁創(chuàng)建各種框架創(chuàng)建與刪除框架集在創(chuàng)建框架集之前,首先選擇主菜單"查看"→"可視化助理"→"框架邊框"命令,這樣就可以使框架邊框在文檔窗口可見。2023-02-15第8章設計框架網頁58.1

框架網頁創(chuàng)建各種框架方法1:選擇"修改"→"框架集"→"拆分左,右,上,下框架"命令。2023-02-15第8章設計框架網頁68.1

框架網頁2023-02-15第8章設計框架網頁7創(chuàng)建各種框架方法2:按住Alt鍵,然后拖曳任一條框架邊框,這樣可以垂直或水平分割文檔（或已有地框架）;按住Alt鍵,然后從一個角上拖曳框架邊框,這樣也可以把文檔（或已有地框架）劃分為4個框架。8.1

框架網頁2023-02-15第8章設計框架網頁8插入預定義框架集Dreamweaver通常預定義了多種框架集,通過使用預定義框架集,我們就可以輕易創(chuàng)建想要地框架集。選擇"插入"→"HTML"→"框架"命令然后選擇一種框架,框架集生成時可以對每一個框架命名。8.1

框架網頁插入預定義框架集2023-02-15第8章設計框架網頁98.1

框架網頁設置框架集屬性選擇"窗口"→"屬性"菜單命令,然后打開"屬性"面板,單擊任意一個框架地邊框,"屬性

"面板變成了對框架屬性地設置,可以設置"邊框"地可見屬性,設置"邊框寬度"以及"邊框顏色"。2023-02-15第8章設計框架網頁108.1

框架網頁2023-02-15第8章設計框架網頁11保存框架集選擇"文件"→"保存全部"命令,然后在彈出地保存文件對話框把原來地文件名改為

myframeset,最后單擊"保存"按鈕保存框架集,除了保存框架集文件之外,還要保存所有地框架頁面,否則預覽時候不能正常顯示全部地框架頁面。8.1

框架網頁保存框架集如果頁面被定義為左右兩個框架,則需要保存三次,分別保存框架集頁面,左邊頁面與右邊頁面,每次保存地時候,當前需要保存地頁面邊框會被粗斜線包圍起來。2023-02-15第8章設計框架網頁128.1

框架網頁2023-02-15第8章設計框架網頁13框架實例也可以通過以下地方式生成框架頁面,我們先設計好3個網頁文件:①top.htm,通常在頂框架顯示;②left.htm,通常在左框架顯示;③main.htm,通常在主框架顯示;設定框架地源文件,其實就是指定在某個框架需要打開地網頁文件,具體步驟如下。8.1

框架網頁框架實例選擇主菜單"窗口"→"框架"菜單命令,就會打開關于框架設置地活動面板。此時地面板顯示地就是我們剛才建立地框架頁面地樣式。如果提示某些文件不存在,單擊"確認"按鈕后忽略即可。出現(xiàn)這種情況是因為第一步只保存框架集文件,卻沒有保存框架文件）。2■023-02在-15框架活動面板上第8章點設計框擊架網頁頂部框架單擊,選擇148.1

框架網頁框架實例此時頁面底部地屬性面板就會變成對框架屬性地設置面板。單擊"源文件"右邊地文件夾圖標,接著在彈出地對話框選擇想要在頂部框架打開地網頁文件top.htm。單擊"確定"按鈕,top.htm網頁文件就會在頂框架被打開。2■023-02-1重5復上述步驟,首第8章先設計在框架網頁左框架打開left.ht15

m,8.1

框架網頁框架實例選擇"文件"→"保存框架"命令,分別保存所有框架頁面文件。然后用瀏覽器預覽myframeset.htm文件,這樣就可以看到用框架設計地網頁了。2023-02-15第8章設計框架網頁168.1

框架網頁框架實例創(chuàng)建鏈接。如果希望鏈接地對象（文本或者圖片）在一個框架內部,而鏈接地頁面則在另外地框架內打開,那么就需要通過設置目的打開方式來控制框架地顯示內容。在設置好鏈接之后,使用屬性面板里地Target（目的）彈出菜單,可以指定在哪個框架打開被鏈接地2023-0文2-15

設示計框架網地頁件,這個菜單下顯第顯8章

框架名稱是我們之178.1

框架網頁框架實例在框架打開鏈接文件地具體步驟如下:首先選擇文本或對象,然后在屬性面板地鏈接文本框執(zhí)行以下操作:輸入要鏈接地文件名;或者單擊文件夾圖標,可以選擇要鏈接地文件或者拖動指向文件

圖標,指向要選擇鏈接地文件;在此如果需要指定鏈接到文件地錨點,則需要在錨點名前2023-0輸2-15入符號#與錨點名第名8章設稱計框架網,頁或者直接輸入#,這188.1

框架網頁框架實例在Target彈出菜單上,為被鏈接地文檔選擇一個合適地打開方式或者在框架地某一部分打開,打開方式地具體意義如下所示:_blank可以在新地瀏覽器窗口打開被鏈接文檔,而且可以保持當前窗口可用。_parent可以在鏈接所在地父框架集打開鏈接文檔。2■023-02_-15

self可以在當前第框8章設架計框架網打頁開鏈接,替換該框19架8.1

框架網頁框架實例_top可以在當前文檔地最外層框架集打開鏈接,替換所有框架。如果需要在某個框架頁面打開,選擇一個命名框架（比如選擇地是main.htm,主框架）,然后鏈接地頁面就會在指定框架打開。重復上述步驟,最后得到結果。選擇"文件"→"全部存儲"命令,保存所有文2023-0件2-15。然后用瀏覽器第8章預設計框覽架網頁myframeset.htm,208.1

框架網頁編輯框架集通過Dreamweaver來編輯框架集?？梢酝ㄟ^選擇主菜單"窗口"—"框架",打開框架設置地活動面板。如果在框架面板選擇任意一個框架,那么在框架面板被選地框架就會有黑色地邊框顯示,此時就可以在屬性面板進行相應地設置了。2023-02-15第8章設計框架網頁218.1

框架網頁2023-02-15第8章設計框架網頁22編輯框架集通過Dreamweaver來編輯框架集。輸入框架地內容。用鼠標單擊任意一個框架之后,就可以像正常編輯頁面一樣,可以在框架插入各種文本內容,圖片,Flash動畫與背景音樂等網頁元素。8.1

框架網頁編輯框架集通過HTML語言來編輯框架集從基本格式可知,在框架集文檔,用<frameset>標記符代替了<body>標記符,

使用框架地時候,html代碼不能出現(xiàn)<body>標記。2023-02-15第8章設計框架網頁238.1

框架網頁編輯框架集通過HTML語言來編輯框架集<frameset>標記符還可以嵌套使用2023-02-15第8章設計框架網頁248.1

框架網頁2023-02-15第8章設計框架網頁25向框架添加內容每一個框架里都是一個獨立地網頁文檔,那么不僅可以直接編輯文檔內容,而且也可以在框架內打開已經存在地網頁文檔。8.1

框架網頁向框架添加內容要添加網頁內容,首先選擇活動框架面板內地某一框架,然后選擇"屬性"面板上地"源文件"命令來設定框架地網頁。2023-02-15第8章設計框架網頁268.1

框架網頁向框架添加內容創(chuàng)建一個如圖所示地框架頁面,并且在相應地框架添加top.htm,left.htm與main.htm三個網頁,并且設定左側框架地寬度為80像素,上方框架地高度為200像素,主頁面框架占據(jù)剩余空間。2023-02-15第8章設計框架網頁278.1

框架網頁2023-02-15第8章設計框架網頁28向框架添加內容首先創(chuàng)建一個整體框架頁面,然后將鼠標置于框架邊框上,按住"Alt"鍵拖動,對原始頁面進行分割,然后在框架集屬性面板里進行具體數(shù)值設置即可。接下來分別在"框架"面板選擇相應地框架,然后在框架屬性面板里插入相應地網頁就可以完成了。8.1

框架網頁2023-02-15第8章設計框架網頁29保存框架集框架集地實質就是把瀏覽器窗口劃分為幾個可相同可不同地小區(qū)（即框架）,然后可以在每個小區(qū)獨立顯示一個網頁文件（html文件）,而最后這些獨立小區(qū)地組合就是所謂地框架集。8.1

框架網頁保存框架集下圖所示地框架集是由3個框架組成,當把

Dreamweaver

CS6文檔拆分為框架時,其

實就已經為框架集與其地每個框架創(chuàng)建了獨立地html文檔。在設計視窗（文檔窗口）有3個框架頁面,但是它實際上包括了4個獨立地文件,那就是框架集文件與3個框架文

件。2023-02-15第8章設計框架網頁308.1

框架網頁保存框架集如果想要在瀏覽器預覽頁面,則需要保存框架集與全部地框架文件。在保存框架集與框架文件地過程,有一種方法就是分別保存框架集與框架文件,還有一種方法就是同時保存所有框架與框架集文件2023-02-15第8章設計框架網頁318.1

框架網頁保存框架集如果想要保存所有文件（包括框架集文件與框架文件）,那么首先選擇"文件"→"保存全部"選項,效果如圖所示。2023-02-15第8章設計框架網頁328.1

框架網頁保存框架集如果是新創(chuàng)建地框架集,那么就會彈出如下頁所示地"另存為"對話框。DreamweaverCS6一般會首先保存框架集文件,在框架集邊框上就會顯示選擇線,在"另存為"對話框地"文件名"域就會自動提供臨時文件名

UntitledFrameset-1,此時用戶可以根據(jù)自己地需要修改文件名,然后單擊保存按鈕就2023-0可2-15

保存框架集文件第8章。設計框架網頁338.1

框架網頁保存框架集2023-02-15第8章設計框架網頁348.1

框架網頁保存框架集接下來就是保存框架文件,此時"文件名"域地文件名變?yōu)閁ntitledFrame-4（這主要是依框架地個數(shù)不同而不同）,設計視圖（文檔窗口）地選擇線這時也會自動移到對應地被保存地框架,根據(jù)選擇線移動地位置就可以知道正在保存地是哪個框架文件。然后單擊"保存"按鈕,直到所有文件保存完為2023-0止2-15。第8章設計框架網頁358.1

框架網頁保存框架集在本例,所有地保存操作都執(zhí)行完成以后,就會得到4個文件:UntitledFrameset-1.htm（框架集文件）,Untitled-1.htm（主框架文件）,UntitledFrame-2.htm（左框架文件）與UntitledFrame-

3.htm（頂框架文件）。2023-02-15第8章設計框架網頁368.1

框架網頁保存框架集框架集文件（UntitledFrameset-1.htm）其實也是一個html文件,它定義了頁面顯示地框架數(shù),框架地大小,載入框架地源文件,還有其它可定義地屬性等不同信息。在設

計視圖（文檔窗口）單擊框架地邊框,然后選擇框架集,最后選擇組合視圖或代碼視窗,這時在html源碼窗口就可以看到以下這些2023-0信2-15息,第8章設計框架網頁378.1

框架網頁保存框架集在設計視圖（文檔窗口）單擊框架地邊框,然后選擇框架集,最后選擇組合視圖或代碼視窗,這時在html源碼窗口就可以看到以下這些信息。2023-02-15第8章設計框架網頁388.1

框架網頁2023-02-15第8章設計框架網頁39保存框架集從框架集文件地框架定義我們可以看到,頂框架（topFrame）地源文件（就是在框架內打開地網頁文件）是UntitledFrame-3.htm;左框架（leftFrame）地源文件是

UntitledFrame-2.htm;主框架（mainFrame）地源文件是Untitled-1.htm。8.1

框架網頁保存框架集如果只想保存框架集文件,那么就可以選擇"文件"→"保存框架集"命令,或者選擇"文件"→"框架集另存為"命令,這樣就可以把框架集保存為新文件?？蚣芪募鋵嵕褪窃诳蚣軆却蜷_地網頁文件,如果想要保存框架文件,那么就在框架內單擊,然后選擇"文件"→"保存"命令,就可以2023-0保2-15存框架文件。第8章設計框架網頁408.2

框架屬性2023-02-15第8章設計框架網頁41布局框架基本屬性框架屬性面板可以用來查看與設置框架屬性,一般包括命名框架,設置邊框,鏈接與邊距等。8.2

框架屬性布局框架基本屬性在框架活動面板單擊任意一個框架,屬性面板就變成了對框架屬性地設置。效果如圖所示。2023-02-15第8章設計框架網頁428.2

框架屬性布局框架基本屬性如果想要命名框架,那么就在Frame

Name（框架名）域輸入名稱。此時輸入地框架

名將可能被超鏈接與腳本引用,所以,命名框架需要要讓框架名是一個有意義地名稱,可以使用下劃線,但是卻不能使用橫杠,句號與空格等,而且框架名應該以字母開頭,但是不要使用Javascript地保留字（例如top或2023-0n2-15avigator等）。第8章設計框架網頁438.2

框架屬性布局框架基本屬性源文件:用來指定當前框架打開地源文件（網頁文件）。它可以直接在輸入域手動

輸入文件名,或者單擊文件夾圖標,瀏覽文件并且選擇一個合適地文件,而且也可以把光標置于框架內,接下來選擇"文件→"在框架打開"命令來打開一個文件。2023-02-15第8章設計框架網頁448.2

框架屬性布局框架基本屬性滾動條:用來設置當沒有足夠地空間來顯示當前框架地內容時是否顯示滾動條。本項屬性有4種選擇:"是"表示顯示滾動條;"否"表示不顯示滾動條;"自動"表示當沒有足夠地空間來顯示當前框架地內容時,就會自動顯示滾動條;"默認"表示采用瀏覽器地默認值。2023-02-15第8章設計框架網頁458.2

框架屬性布局框架基本屬性不能調整大小:如果選擇此復選框,就可以防止用戶在瀏覽時拖動框架邊框來調整當前框架地大小。邊框:用來決定當前框架是否顯示邊框,一般有"顯示","不顯示"與"默認"3種基本選擇。通常大部分地瀏覽器默認值為"顯示"。在

這里此項選擇覆蓋框架集地邊框設置。2■023-02邊-15

設與計框架網當頁框顏色:表示設第置8章

前框架比鄰地所有468.2

框架屬性布局框架基本屬性2023-02-15第8章設計框架網頁478.2

框架屬性布局框架基本屬性2023-02-15第8章設計框架網頁488.2

框架屬性布局框架基本屬性邊界寬度:以像素為單位設置左邊距與右邊距（框架邊框與內容之間地距離）。邊界高度:以像素為單位設置上邊距與下邊距（框架邊框與內容之間地距離）。使用框架集屬性檢查器可以設置邊框與框架大小。設置框架屬性會覆蓋在框架集設置地相應屬性。例如,設置某框架地邊框屬2023-0性2-15

設對計框架網該頁,將覆蓋在框架集第集8章

框架設置地邊框屬498.2

框架屬性布局框架基本屬性在設計視圖（文檔窗口）單擊兩框架之間地邊框,或者在框架活動面板單擊框架集邊框,可以調出框架集屬性面板。鼠標單擊位于"屬性"面板右下角地擴展箭頭,此時就可以查看所有框架集屬性。效果如圖所示。2023-02-15第8章設計框架網頁508.2

框架屬性2023-02-15第8章設計框架網頁51布局框架基本屬性設置框架集屬性地具體步驟如下。首先選擇一個框架集。在屬性面板可以設置當文檔在瀏覽器被瀏覽時是否顯示框架邊框:如果想要顯示邊框,就選擇"是";如果不想顯示邊框,就選擇"否"。如果想要讓用戶地瀏覽器來決定是否顯示邊框,就選擇"默認"。8.2

框架屬性布局框架基本屬性設置框架集屬性地具體步驟如下。在邊框寬度域輸入一個數(shù)字,用來指定當前框架集地邊框寬度。如果輸入0,那么就表明指定為無邊框。在邊框顏色域,既可以輸入顏色地十六進制值,又可以使用拾色器為邊框選擇顏色。如果想要設置框架大小,那么就可以在框架頁面地分割線上單擊鼠標,2023-0選2-15某個具體地行或第8章者設計框列架網頁,接下來,可以在值5域28.2

框架屬性2023-02-15第8章設計框架網頁53布局框架基本屬性設置框架集屬性地具體步驟如下。像素:用像素值來設置列寬度或行高度。像素這個選項對一直要保持一樣大小地框架（例如導航欄）是最合適地選擇。如果想要為其它框架設置不同地單位,那么這些框架地空間就只能在以像素為單位地框架完全達到指定地大小之后才可以分配。8.2

框架屬性2023-02-15第8章設計框架網頁54布局框架基本屬性設置框架集屬性地具體步驟如下。百分數(shù):用來表示當前框架行（或列）占所屬框架集高度（或寬度）地百分數(shù)。設置地時候一般是以Percent為單位地框架行（或列）地空間分配。一般位于設置以

Pixels為單位地框架行（或列）之后,在以

Relative為單位地框架行（或列）之前。8.2

框架屬性2023-02-15第8章設計框架網頁55布局框架基本屬性設置框架集屬性地具體步驟如下。相對比例:用來表示當前框架行（或列）相對于其它行（或列）所占地比例。通常以

Relative為單位地框架行（或列）地空間分配是在以像素與百分數(shù)為單位地框架行（或列）之后,但是它們卻占據(jù)了瀏覽器窗口所有地剩余空間。8.2

框架屬性2023-02-15第8章設計框架網頁56布局框架基本屬性一般可以通過設置框架文檔地背景顏色來改變框架地背景顏色。具體方法如下:把鼠標光標放置于需要修改背景顏色地框架,選擇主菜單→"修改"→"頁面屬性"命令;或者可以在框架內右擊,接下來在快捷菜單上選擇"頁面屬性"。然后單擊"背景"方框,此時就可以從選擇一種顏色。示例見下頁。8.2

框架屬性布局框架基本屬性2023-02-15第8章設計框架網頁578.2

框架屬性2023-02-15第8章設計框架網頁58框架鏈接如果在有框架地網頁設置了超級鏈接地

溫馨提示

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

最新文檔

評論

0/150

提交評論