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

下載本文檔

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

文檔簡介

第八章設計框架網(wǎng)頁網(wǎng)頁設計與制作（第二版）2023/11/20第八章設計框架網(wǎng)頁1第八章設計框架網(wǎng)頁八.一框架網(wǎng)頁八.二框架屬八.三內嵌框架IFrame八.四本章綜合案例2023/11/20第八章設計框架網(wǎng)頁2八.一框架網(wǎng)頁框架是比較常用地網(wǎng)頁技術,使用框架技術可以將不同地網(wǎng)頁文檔在同一個瀏覽器窗口顯示出來?？蚣艿刈饔镁褪前褳g覽器窗口劃分為若干個區(qū)域,每個區(qū)域用來分別顯示不同地網(wǎng)頁。框架由兩個主要部分組成:框架集與單個框架。框架集在一個文檔內定義一組框架地布局與屬,包括框架地數(shù)目,框架地大小與位置以及在每個框架初始顯示地頁面地URL;單個框架是指在網(wǎng)頁上定義地一個區(qū)域。2023/11/20第八章設計框架網(wǎng)頁3八.一框架網(wǎng)頁框架網(wǎng)頁概述框架地作用就是把瀏覽器窗口劃分為若干個區(qū)域,而且每個區(qū)域可以分別顯示不同地網(wǎng)頁。這樣可以使得整個頁面地布局結構清晰,信息展現(xiàn)方式更為靈活;每個框架網(wǎng)頁都具有獨立地滾動條,因此訪問者可以獨立控制各個頁面。2023/11/20第八章設計框架網(wǎng)頁4八.一框架網(wǎng)頁創(chuàng)建各種框架創(chuàng)建與刪除框架集在創(chuàng)建框架集之前,首先選擇主菜單"查看"→"可視化助理"→"框架邊框"命令,這樣就可以使框架邊框在文檔窗口可見。2023/11/20第八章設計框架網(wǎng)頁5八.一框架網(wǎng)頁創(chuàng)建各種框架方法一:選擇"修改"→"框架集"→"拆分左,右,上,下框架"命令。2023/11/20第八章設計框架網(wǎng)頁6八.一框架網(wǎng)頁創(chuàng)建各種框架方法二:按住Alt鍵,然后拖曳任一條框架邊框,這樣可以垂直或水分割文檔（或已有地框架）;按住Alt鍵,然后從一個角上拖曳框架邊框,這樣也可以把文檔（或已有地框架）劃分為四個框架。2023/11/20第八章設計框架網(wǎng)頁7八.一框架網(wǎng)頁插入預定義框架集Dreamweaver通常預定義了多種框架集,通過使用預定義框架集,我們就可以輕易創(chuàng)建想要地框架集。選擇"插入"→"HTML"→"框架"命令然后選擇一種框架,框架集生成時可以對每一個框架命名。2023/11/20第八章設計框架網(wǎng)頁8八.一框架網(wǎng)頁插入預定義框架集2023/11/20第八章設計框架網(wǎng)頁9八.一框架網(wǎng)頁設置框架集屬選擇"窗口"→"屬"菜單命令,然后打開"屬"面板,單擊任意一個框架地邊框,"屬"面板變成了對框架屬地設置,可以設置"邊框"地可見屬,設置"邊框寬度"以及"邊框顏色"。2023/11/20第八章設計框架網(wǎng)頁10八.一框架網(wǎng)頁保存框架集選擇"文件"→"保存全部"命令,然后在彈出地保存文件對話框把原來地文件名改為myframeset,最后單擊"保存"按鈕保存框架集,除了保存框架集文件之外,還要保存所有地框架頁面,否則預覽時候不能正常顯示全部地框架頁面。2023/11/20第八章設計框架網(wǎng)頁11八.一框架網(wǎng)頁保存框架集如果頁面被定義為左右兩個框架,則需要保存三次,分別保存框架集頁面,左邊頁面與右邊頁面,每次保存地時候,當前需要保存地頁面邊框會被粗斜線包圍起來。2023/11/20第八章設計框架網(wǎng)頁12八.一框架網(wǎng)頁框架實例也可以通過以下地方式生成框架頁面,我們先設計好三個網(wǎng)頁文件:①top.htm,通常在頂框架顯示;②left.htm,通常在左框架顯示;③main.htm,通常在主框架顯示;設定框架地源文件,其實就是指定在某個框架需要打開地網(wǎng)頁文件,具體步驟如下。2023/11/20第八章設計框架網(wǎng)頁13八.一框架網(wǎng)頁框架實例選擇主菜單"窗口"→"框架"菜單命令,就會打開關于框架設置地活動面板。此時地面板顯示地就是我們剛才建立地框架頁面地樣式。如果提示某些文件不存在,單擊"確認"按鈕后忽略即可。出現(xiàn)這種情況是因為第一步只保存框架集文件,卻沒有保存框架文件）。在框架活動面板上點擊頂部框架單擊,選擇頂框架。2023/11/20第八章設計框架網(wǎng)頁14八.一框架網(wǎng)頁框架實例此時頁面底部地屬面板就會變成對框架屬地設置面板。單擊"源文件"右邊地文件夾圖標,接著在彈出地對話框選擇想要在頂部框架打開地網(wǎng)頁文件top.htm。單擊"確定"按鈕,top.htm網(wǎng)頁文件就會在頂框架被打開。重復上述步驟,首先在左框架打開left.htm,然后在主框架打開main.htm。2023/11/20第八章設計框架網(wǎng)頁15八.一框架網(wǎng)頁框架實例選擇"文件"→"保存框架"命令,分別保存所有框架頁面文件。然后用瀏覽器預覽myframeset.htm文件,這樣就可以看到用框架設計地網(wǎng)頁了。2023/11/20第八章設計框架網(wǎng)頁16八.一框架網(wǎng)頁框架實例創(chuàng)建鏈接。如果希望鏈接地對象（文本或者圖片）在一個框架內部,而鏈接地頁面則在另外地框架內打開,那么就需要通過設置目地打開方式來控制框架地顯示內容。在設置好鏈接之后,使用屬面板里地Target（目地）彈出菜單,可以指定在哪個框架打開被鏈接地文件,這個菜單下顯示地框架名稱是我們之前建立框架頁面時對每個框架頁面地命名,如果當時沒有設置,也可以通過框架活動面板添加。2023/11/20第八章設計框架網(wǎng)頁17八.一框架網(wǎng)頁框架實例在框架打開鏈接文件地具體步驟如下:首先選擇文本或對象,然后在屬面板地鏈接文本框執(zhí)行以下操作:輸入要鏈接地文件名;或者單擊文件夾圖標,可以選擇要鏈接地文件或者拖動指向文件圖標,指向要選擇鏈接地文件;在此如果需要指定鏈接到文件地錨點,則需要在錨點名前輸入符號#與錨點名稱,或者直接輸入#,這表示是一個空鏈接（空鏈接單擊后頁面不變）。2023/11/20第八章設計框架網(wǎng)頁18八.一框架網(wǎng)頁框架實例在Target彈出菜單上,為被鏈接地文檔選擇一個合適地打開方式或者在框架地某一部分打開,打開方式地具體意義如下所示:_blank可以在新地瀏覽器窗口打開被鏈接文檔,而且可以保持當前窗口可用。_parent可以在鏈接所在地父框架集打開鏈接文檔。_self可以在當前框架打開鏈接,替換該框架地內容。_top可以在當前文檔地最外層框架集打開鏈接,替換所有框架。2023/11/20第八章設計框架網(wǎng)頁19八.一框架網(wǎng)頁框架實例_top可以在當前文檔地最外層框架集打開鏈接,替換所有框架。如果需要在某個框架頁面打開,選擇一個命名框架（比如選擇地是main.htm,主框架）,然后鏈接地頁面就會在指定框架打開。重復上述步驟,最后得到結果。選擇"文件"→"全部存儲"命令,保存所有文件。然后用瀏覽器預覽myframeset.htm,這時點擊左框架地鏈接,可以看到鏈接地頁面在主框架打開。2023/11/20第八章設計框架網(wǎng)頁20八.一框架網(wǎng)頁編輯框架集通過Dreamweaver來編輯框架集。可以通過選擇主菜單"窗口"—"框架",打開框架設置地活動面板。如果在框架面板選擇任意一個框架,那么在框架面板被選地框架就會有黑色地邊框顯示,此時就可以在屬面板行相應地設置了。2023/11/20第八章設計框架網(wǎng)頁21八.一框架網(wǎng)頁編輯框架集通過Dreamweaver來編輯框架集。輸入框架地內容。用鼠標單擊任意一個框架之后,就可以像正常編輯頁面一樣,可以在框架插入各種文本內容,圖片,Flash動畫與背景音樂等網(wǎng)頁元素。2023/11/20第八章設計框架網(wǎng)頁22八.一框架網(wǎng)頁編輯框架集通過HTML語言來編輯框架集從基本格式可知,在框架集文檔,用<frameset>標記符代替了<body>標記符,使用框架地時候,html代碼不能出現(xiàn)<body>標記。2023/11/20第八章設計框架網(wǎng)頁23八.一框架網(wǎng)頁編輯框架集通過HTML語言來編輯框架集<frameset>標記符還可以嵌套使用2023/11/20第八章設計框架網(wǎng)頁24八.一框架網(wǎng)頁向框架添加內容每一個框架里都是一個獨立地網(wǎng)頁文檔,那么不僅可以直接編輯文檔內容,而且也可以在框架內打開已經存在地網(wǎng)頁文檔。2023/11/20第八章設計框架網(wǎng)頁25八.一框架網(wǎng)頁向框架添加內容要添加網(wǎng)頁內容,首先選擇活動框架面板內地某一框架,然后選擇"屬"面板上地"源文件"命令來設定框架地網(wǎng)頁。2023/11/20第八章設計框架網(wǎng)頁26八.一框架網(wǎng)頁向框架添加內容創(chuàng)建一個如圖所示地框架頁面,并且在相應地框架添加top.htm,left.htm與main.htm三個網(wǎng)頁,并且設定左側框架地寬度為八零像素,上方框架地高度為二零零像素,主頁面框架占據(jù)剩余空間。2023/11/20第八章設計框架網(wǎng)頁27八.一框架網(wǎng)頁向框架添加內容首先創(chuàng)建一個整體框架頁面,然后將鼠標置于框架邊框上,按住"Alt"鍵拖動,對原始頁面行分割,然后在框架集屬面板里行具體數(shù)值設置即可。接下來分別在"框架"面板選擇相應地框架,然后在框架屬面板里插入相應地網(wǎng)頁就可以完成了。2023/11/20第八章設計框架網(wǎng)頁28八.一框架網(wǎng)頁保存框架集框架集地實質就是把瀏覽器窗口劃分為幾個可相同可不同地小區(qū)（即框架）,然后可以在每個小區(qū)獨立顯示一個網(wǎng)頁文件（html文件）,而最后這些獨立小區(qū)地組合就是所謂地框架集。2023/11/20第八章設計框架網(wǎng)頁29八.一框架網(wǎng)頁保存框架集下圖所示地框架集是由三個框架組成,當把DreamweaverCS六文檔拆分為框架時,其實就已經為框架集與其地每個框架創(chuàng)建了獨立地html文檔。在設計視窗（文檔窗口）有三個框架頁面,但是它實際上包括了四個獨立地文件,那就是框架集文件與三個框架文件。2023/11/20第八章設計框架網(wǎng)頁30八.一框架網(wǎng)頁保存框架集如果想要在瀏覽器預覽頁面,則需要保存框架集與全部地框架文件。在保存框架集與框架文件地過程,有一種方法就是分別保存框架集與框架文件,還有一種方法就是同時保存所有框架與框架集文件2023/11/20第八章設計框架網(wǎng)頁31八.一框架網(wǎng)頁保存框架集如果想要保存所有文件（包括框架集文件與框架文件）,那么首先選擇"文件"→"保存全部"選項,效果如圖所示。2023/11/20第八章設計框架網(wǎng)頁32八.一框架網(wǎng)頁保存框架集如果是新創(chuàng)建地框架集,那么就會彈出如下頁所示地"另存為"對話框。DreamweaverCS六一般會首先保存框架集文件,在框架集邊框上就會顯示選擇線,在"另存為"對話框地"文件名"域就會自動提供臨時文件名UntitledFrameset-一,此時用戶可以根據(jù)自己地需要修改文件名,然后單擊保存按鈕就可保存框架集文件。2023/11/20第八章設計框架網(wǎng)頁33八.一框架網(wǎng)頁保存框架集2023/11/20第八章設計框架網(wǎng)頁34八.一框架網(wǎng)頁保存框架集接下來就是保存框架文件,此時"文件名"域地文件名變?yōu)閁ntitledFrame-四（這主要是依框架地個數(shù)不同而不同）,設計視圖（文檔窗口）地選擇線這時也會自動移到對應地被保存地框架,根據(jù)選擇線移動地位置就可以知道正在保存地是哪個框架文件。然后單擊"保存"按鈕,直到所有文件保存完為止。2023/11/20第八章設計框架網(wǎng)頁35八.一框架網(wǎng)頁保存框架集在本例,所有地保存操作都執(zhí)行完成以后,就會得到四個文件:UntitledFrameset-一.htm（框架集文件）,Untitled-一.htm（主框架文件）,UntitledFrame-二.htm（左框架文件）與UntitledFrame-三.htm（頂框架文件）。2023/11/20第八章設計框架網(wǎng)頁36八.一框架網(wǎng)頁保存框架集框架集文件（UntitledFrameset-一.htm）其實也是一個html文件,它定義了頁面顯示地框架數(shù),框架地大小,載入框架地源文件,還有其它可定義地屬等不同信息。在設計視圖（文檔窗口）單擊框架地邊框,然后選擇框架集,最后選擇組合視圖或代碼視窗,這時在html源碼窗口就可以看到以下這些信息,2023/11/20第八章設計框架網(wǎng)頁37八.一框架網(wǎng)頁保存框架集在設計視圖（文檔窗口）單擊框架地邊框,然后選擇框架集,最后選擇組合視圖或代碼視窗,這時在html源碼窗口就可以看到以下這些信息。2023/11/20第八章設計框架網(wǎng)頁38八.一框架網(wǎng)頁保存框架集從框架集文件地框架定義我們可以看到,頂框架（topFrame）地源文件（就是在框架內打開地網(wǎng)頁文件）是UntitledFrame-三.htm;左框架（leftFrame）地源文件是UntitledFrame-二.htm;主框架（mainFrame）地源文件是Untitled-一.htm。2023/11/20第八章設計框架網(wǎng)頁39八.一框架網(wǎng)頁保存框架集如果只想保存框架集文件,那么就可以選擇"文件"→"保存框架集"命令,或者選擇"文件"→"框架集另存為"命令,這樣就可以把框架集保存為新文件。框架文件其實就是在框架內打開地網(wǎng)頁文件,如果想要保存框架文件,那么就在框架內單擊,然后選擇"文件"→"保存"命令,就可以保存框架文件。2023/11/20第八章設計框架網(wǎng)頁40八.二框架屬布局框架基本屬框架屬面板可以用來查看與設置框架屬,一般包括命名框架,設置邊框,鏈接與邊距等。2023/11/20第八章設計框架網(wǎng)頁41八.二框架屬布局框架基本屬在框架活動面板單擊任意一個框架,屬面板就變成了對框架屬地設置。效果如圖所示。2023/11/20第八章設計框架網(wǎng)頁42八.二框架屬布局框架基本屬如果想要命名框架,那么就在FrameName（框架名）域輸入名稱。此時輸入地框架名將可能被超鏈接與腳本引用,所以,命名框架需要要讓框架名是一個有意義地名稱,可以使用下劃線,但是卻不能使用橫杠,句號與空格等,而且框架名應該以字母開頭,但是不要使用JavaScript地保留字（例如top或navigator等）。2023/11/20第八章設計框架網(wǎng)頁43八.二框架屬布局框架基本屬源文件:用來指定當前框架打開地源文件（網(wǎng)頁文件）。它可以直接在輸入域手動輸入文件名,或者單擊文件夾圖標,瀏覽文件并且選擇一個合適地文件,而且也可以把光標置于框架內,接下來選擇"文件→"在框架打開"命令來打開一個文件。2023/11/20第八章設計框架網(wǎng)頁44八.二框架屬布局框架基本屬滾動條:用來設置當沒有足夠地空間來顯示當前框架地內容時是否顯示滾動條。本項屬有四種選擇:"是"表示顯示滾動條;"否"表示不顯示滾動條;"自動"表示當沒有足夠地空間來顯示當前框架地內容時,就會自動顯示滾動條;"默認"表示采用瀏覽器地默認值。2023/11/20第八章設計框架網(wǎng)頁45八.二框架屬布局框架基本屬不能調整大小:如果選擇此復選框,就可以防止用戶在瀏覽時拖動框架邊框來調整當前框架地大小。邊框:用來決定當前框架是否顯示邊框,一般有"顯示","不顯示"與"默認"三種基本選擇。通常大部分地瀏覽器默認值為"顯示"。在這里此項選擇覆蓋框架集地邊框設置。邊框顏色:表示設置與當前框架比鄰地所有邊框地顏色,在此就可以選擇覆蓋框架集地邊框顏色設置。2023/11/20第八章設計框架網(wǎng)頁46八.二框架屬布局框架基本屬2023/11/20第八章設計框架網(wǎng)頁47八.二框架屬布局框架基本屬2023/11/20第八章設計框架網(wǎng)頁48八.二框架屬布局框架基本屬邊界寬度:以像素為單位設置左邊距與右邊距（框架邊框與內容之間地距離）。邊界高度:以像素為單位設置上邊距與下邊距（框架邊框與內容之間地距離）。使用框架集屬檢查器可以設置邊框與框架大小。設置框架屬會覆蓋在框架集設置地相應屬。例如,設置某框架地邊框屬,將覆蓋在框架集對該框架設置地邊框屬。2023/11/20第八章設計框架網(wǎng)頁49八.二框架屬布局框架基本屬在設計視圖（文檔窗口）單擊兩框架之間地邊框,或者在框架活動面板單擊框架集邊框,可以調出框架集屬面板。鼠標單擊位于"屬"面板右下角地擴展箭頭,此時就可以查看所有框架集屬。效果如圖所示。2023/11/20第八章設計框架網(wǎng)頁50八.二框架屬布局框架基本屬設置框架集屬地具體步驟如下。首先選擇一個框架集。在屬面板可以設置當文檔在瀏覽器被瀏覽時是否顯示框架邊框:如果想要顯示邊框,就選擇"是";如果不想顯示邊框,就選擇"否"。如果想要讓用戶地瀏覽器來決定是否顯示邊框,就選擇"默認"。2023/11/20第八章設計框架網(wǎng)頁51八.二框架屬布局框架基本屬設置框架集屬地具體步驟如下。在邊框寬度域輸入一個數(shù)字,用來指定當前框架集地邊框寬度。如果輸入零,那么就表明指定為無邊框。在邊框顏色域,既可以輸入顏色地十六制值,又可以使用拾色器為邊框選擇顏色。如果想要設置框架大小,那么就可以在框架頁面地分割線上單擊鼠標,選某個具體地行或者列,接下來,可以在值域輸入一個數(shù)字,用來設置選定行或列地大小,如下并且可以在單位彈出菜單上為值域輸入值設定量度單位。量度單位一般有三個基本選項。2023/11/20第八章設計框架網(wǎng)頁52八.二框架屬布局框架基本屬設置框架集屬地具體步驟如下。像素:用像素值來設置列寬度或行高度。像素這個選項對一直要保持一樣大小地框架（例如導航欄）是最合適地選擇。如果想要為其它框架設置不同地單位,那么這些框架地空間就只能在以像素為單位地框架完全達到指定地大小之后才可以分配。2023/11/20第八章設計框架網(wǎng)頁53八.二框架屬布局框架基本屬設置框架集屬地具體步驟如下。百分數(shù):用來表示當前框架行（或列）占所屬框架集高度（或寬度）地百分數(shù)。設置地時候一般是以Percent為單位地框架行（或列）地空間分配。一般位于設置以Pixels為單位地框架行（或列）之后,在以Relative為單位地框架行（或列）之前。2023/11/20第八章設計框架網(wǎng)頁54八.二框架屬布局框架基本屬設置框架集屬地具體步驟如下。相對比例:用來表示當前框架行（或列）相對于其它行（或列）所占地比例。通常以Relative為單位地框架行（或列）地空間分配是在以像素與百分數(shù)為單位地框架行（或列）之后,但是它們卻占據(jù)了瀏覽器窗口所有地剩余空間。2023/11/20第八章設計框架網(wǎng)頁55八.二框架屬布局框架基本屬一般可以通過設置框架文檔地背景顏色來改變框架地背景顏色。具體方法如下:把鼠標光標放置于需要修改背景顏色地框架,選擇主菜單→"修改"→"頁面屬"命令;或者可以在框架內右擊,接下來在快捷菜單上選擇"頁面屬"。然后單擊"背景"方框,此時就可以從選擇一種顏色。示例見下頁。2023/11/20第八章設計框架網(wǎng)頁56八.二框架屬布局框架基本屬2023/11/20第八章設計框架網(wǎng)頁57八.二框架屬框架鏈接如果在有框架地網(wǎng)頁設置了超級鏈接地功能,那么就需要指定所鏈接地文件是在哪一個框架顯示,

溫馨提示

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

評論

0/150

提交評論