Frame技術(shù)制作網(wǎng)的資料

1、frame框架技術(shù)制作網(wǎng)頁框架技術(shù)制作網(wǎng)頁網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作 框架也稱為幀，是設(shè)計網(wǎng)頁時非常有用的工具。它可以將瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域分別顯示不同的網(wǎng)頁，從而使用戶能夠一次瀏覽更多內(nèi)容。本章學(xué)習(xí)框架的一些基礎(chǔ)知識，以及怎么同時在一個瀏覽器窗口中顯示多個網(wǎng)頁。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作框架的基本構(gòu)成框架的基本構(gòu)成u 創(chuàng)建和設(shè)置框架創(chuàng)建和設(shè)置框架u 框架中的鏈接目標(biāo)框架中的鏈接目標(biāo)u 框架中網(wǎng)頁的設(shè)置框架中網(wǎng)頁的設(shè)置u 框架設(shè)置滾動條框架設(shè)置滾動條網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作一個框架應(yīng)用實例一個框架應(yīng)用實例網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作頁面分析頁面分析 該實例實質(zhì)是一個應(yīng)用

2、了top left框架的網(wǎng)頁。這種框架的頁面被分成了3個區(qū)域，其中包含了4個網(wǎng)頁文件，分別為：frameset網(wǎng)頁、上邊topframe框架中包含的網(wǎng)頁文件、左邊leftframe框架中包含的網(wǎng)頁文件、右邊mainframe中包含的網(wǎng)頁文件。 因此在保存這個框架集網(wǎng)頁時，需要因此在保存這個框架集網(wǎng)頁時，需要4個文件。個文件。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作實現(xiàn)基于框架的網(wǎng)頁的基本思路如下：實現(xiàn)基于框架的網(wǎng)頁的基本思路如下：（1）在頁面中創(chuàng)建框架集和框架，并對頁面布局進(jìn)行適當(dāng) 的調(diào)整。（2）輸入框架頁面內(nèi)容。（3）保存框架集文件和框架文件。（4）確認(rèn)鏈接目標(biāo)的框架設(shè)置，使所有鏈接內(nèi)容都出現(xiàn)在 正確的

3、區(qū)域內(nèi)。（5）通過設(shè)置框架和框架集屬性，來改變框架網(wǎng)頁的外觀 等。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作創(chuàng)建框架結(jié)構(gòu)創(chuàng)建框架結(jié)構(gòu)調(diào)出框架面板（frames），利用它可以進(jìn)行選取、觀察修改框架等基本操作。在對框架操作時，最好一起打開框架面板！打開方法“窗口”“框架”。或者快捷鍵shift+f2沒有插入框架時的框架面板沒有插入框架時的框架面板網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作插入插入top left結(jié)構(gòu)的框架集頁面結(jié)構(gòu)的框架集頁面n為了方便觀察和操作框架，需要啟用可視化助理，打開方法菜單欄可視化助理n打開方法是：菜單欄查看可視化助理框架邊框n當(dāng)啟用了輔助工具后文檔窗口的四周就出現(xiàn)了灰色框架邊框網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)

4、計與制作對象面板上的框架集對象面板上的框架集插入框架集插入框架集插入一個框架集，操作步驟如下 (1) 新建一個文件 (2) 執(zhí)行以下操作之一，插入dw預(yù)定的框架集 a、菜單欄插入框架左邊 b、在對象面板上單擊框架按鈕，或者把按鈕拖 到頁面上網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作n在文檔窗口出現(xiàn)了包含3個區(qū)域的top left結(jié)構(gòu)框架集。其中立體的灰色邊框為框架集的邊框，而沒有立體效果的細(xì)邊框為框架邊框。每一個框架都有自己的名字，用于識別其他框架，默認(rèn)的框架名分別為topframe、leftframe、mainframe 說明：說明：創(chuàng)建框架集還可以使用自由托拽法，前提是框架邊框是可見的。用這個方法首先要

5、分析要創(chuàng)建的框架集的結(jié)構(gòu)，然后進(jìn)行相應(yīng)的拖拽操作即可。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作top left 結(jié)構(gòu)的框架集結(jié)構(gòu)的框架集對應(yīng)的框架面板對應(yīng)的框架面板自由創(chuàng)建top left結(jié)構(gòu)的框架集，操作步驟如下：(1) 將光標(biāo)置于文檔窗口框架的上邊框。(2) 待光標(biāo)變?yōu)殡p箭頭形狀后，按住鼠標(biāo)左鍵向下拖動上邊框 到適當(dāng)?shù)奈恢茫@樣就創(chuàng)建了一個上下結(jié)構(gòu)的框架集。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作自由建立的框架集自由建立的框架集所對應(yīng)的框架面板所對應(yīng)的框架面板(3) 按住alt的同時，用鼠標(biāo)點擊下邊區(qū)域，按住鼠標(biāo)左鍵向右拖動左下邊框到適當(dāng)?shù)奈恢?，就可以生成top left結(jié)構(gòu)框架。利用這種方法，可以自由建立自己所

6、需要的框架集。 注意：注意：利用自由拖拽創(chuàng)建的框架集，其框架名稱均為“沒有名稱”。由于框架名稱將被作為超級鏈接的目標(biāo)和腳本的引用，所以需要為框架命名。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作選取框架和框架集選取框架和框架集 在插入框架集之后，如果不滿意，可以進(jìn)行相應(yīng)的修改操作。首先進(jìn)行框架和框架集的選取操作：1.選取框架 方法一：在框架面板中單擊要選取的框架。 方法二：在文檔窗口中按alt鍵，在要選擇的框架 里點擊，便選取了相應(yīng)的框架。 被選取的框架在框架面板中被加黑顯示的細(xì)線圍住，而在文檔窗口中被較細(xì)的虛線框圍著，同時在狀態(tài)欄上加黑顯示的是。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作2.選取框架集 方法一：在框架面板

7、中單擊立體邊框 方法二：在文檔窗口中將鼠標(biāo)移動到框架與框架之間的 分隔線上，單擊鼠標(biāo)左鍵選中框架集。n這時被選中的框架集邊框在框架面板中被加黑顯示，而在文檔窗口中被較細(xì)的虛線框圍住，同時在狀態(tài)欄上加黑顯示的是。n當(dāng)我們在新建的頁面中插入框架集時，默認(rèn)選中的就是整個框架集。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作選中選中的狀態(tài)的狀態(tài)選中選中的狀態(tài)的狀態(tài)網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作增加框架增加框架增加框架可以使用鼠標(biāo)拖拽法和菜單方式。1.鼠標(biāo)拖拽法 (1) 按住alt鍵拖拽任一條框架邊框，可以垂直或 水平分割文檔(或已有的框架)。 (2) 按住alt鍵從一個角上拖拽框架邊框，可以把 文檔(或已有的框架)劃分為

8、4個框架。 注意：注意：要選中框架才能在框架內(nèi)部進(jìn)行增加框架，要選中框架才能在框架內(nèi)部進(jìn)行增加框架，否則默認(rèn)是在外框架否則默認(rèn)是在外框架(整個框架集上增加整個框架集上增加!)網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作直接從底部向上拖拽直接從底部向上拖拽出來的框架出來的框架選中右下方的框架后再選中右下方的框架后再按按alt拖拽出來的框架拖拽出來的框架網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作2.2.菜單方式菜單方式 在菜單欄修改框架頁，在子菜單中單擊相應(yīng)的選項。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作刪除框架刪除框架方法：方法： 將想要刪除的框架邊框拖至文檔窗口的邊緣為止，或拖拽想要刪除的框架邊框到父框架的邊框上。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)

9、計與制作調(diào)整框架的大小調(diào)整框架的大小 插入框架后，會發(fā)現(xiàn)框架的大小并不一定符合要求，因此需要將框架的大小進(jìn)行適當(dāng)?shù)恼{(diào)整。 方法：方法：將鼠標(biāo)指針移到要調(diào)整的框架邊框線上，在出現(xiàn)雙箭頭后，按住鼠標(biāo)左鍵(進(jìn)行左/右、或上下的拖拽即可)。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作編輯框架集頁面內(nèi)容編輯框架集頁面內(nèi)容 框架集設(shè)計好后就可以編輯每個框架的內(nèi)容了。編輯框架集中內(nèi)容有兩個方法： (1) 利用前面所學(xué)內(nèi)容，直接在相應(yīng)的框架中輸 入內(nèi)容。 (2) 將框架中的網(wǎng)頁文件事先編輯好，然后在框 架中導(dǎo)入。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作對話框?qū)υ捒騨這兩種不同的編輯方法，在保存框架集網(wǎng)頁的操作過程有所不同。n使用第一種方

10、法，直接在3個區(qū)域(框架)中分別插入相應(yīng)的內(nèi)容(頁面中的文本可以直接從前面制作的網(wǎng)頁上拷貝過來)n制作完成后按f12預(yù)覽頁面，彈出一個對話框。提示沒有保存框架集和框架文件。我們必須先進(jìn)行保存，以后每次修改框架網(wǎng)頁時如果直接預(yù)覽頁面都會出現(xiàn)這個對話框!網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作 該對話框提示在預(yù)覽框架集網(wǎng)頁之前需要保存框架集文件和各個框架文件。單擊“確定”，將保存框架集文件和框架文件，然后才打開瀏覽器預(yù)覽；單擊“取消”則放棄預(yù)覽。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作保存框架集文件保存框架集文件保存的方法通常有兩種： (1) 同時保存框架集中的所有網(wǎng)頁文件。 (2) 分別保存框架集中的網(wǎng)頁和各個框架中的

11、網(wǎng) 頁文件。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作 保存框架集中的所有網(wǎng)頁文件，操作步驟如下： (1) 菜單欄中選擇“文件” “全部保存”。 (2) top left結(jié)構(gòu)的框架由4個網(wǎng)頁文件組成，在 保存過程中會先后彈出4個“另存為”對話框， 依次進(jìn)行保存。同時保存框架集中的所有網(wǎng)頁文件同時保存框架集中的所有網(wǎng)頁文件網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作 小技巧：小技巧： 保存的時候被虛線框圍住的框架就是我們正在保存的框架文件。如果虛線框圍在左邊就是保存左邊框架中的網(wǎng)頁，在右邊就是保存右邊的框架中的網(wǎng)頁。 但是如果使用導(dǎo)入網(wǎng)頁到框架，保存的方法就有所不同了。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作分別保存框架集中的網(wǎng)頁和各個

12、框架中的網(wǎng)頁文件分別保存框架集中的網(wǎng)頁和各個框架中的網(wǎng)頁文件保存框架集網(wǎng)頁文件，操作步驟： (1) 選中整個框架集 (2) 在菜單中選擇“文件”“保存框架”保存單個框架網(wǎng)頁文件的操作步驟如下： (1) 將光標(biāo)定位在要保存網(wǎng)頁文件的框架內(nèi)，或 在框架面板上單擊網(wǎng)頁所在框架 (2) 在菜單欄中選擇“文件”“保存框架頁”網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作單獨保存框架集網(wǎng)頁文件單獨保存框架集網(wǎng)頁文件保存框架網(wǎng)頁文件保存框架網(wǎng)頁文件網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作 注意：注意： 在框架中設(shè)置網(wǎng)頁標(biāo)題的步驟：選中框架集在常用面板中，再對網(wǎng)頁標(biāo)題進(jìn)行設(shè)置。(設(shè)置完成后要保存整個框架)，此時網(wǎng)頁標(biāo)題才能被設(shè)置，我們一般

13、的網(wǎng)頁標(biāo)題設(shè)置方法不能直接設(shè)置。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作設(shè)置框架中的鏈接目標(biāo)設(shè)置框架中的鏈接目標(biāo) 為左邊框架中的各個導(dǎo)航欄目建立一個可以鏈接到右邊框架中的超級鏈接。其步驟： (1) 選中文本，打開文本的屬性面板。 (2) 在屬性面板上單擊文件夾按鈕，選取要連接 的文件。 (3) 在屬性面板上單擊“目標(biāo)”的下拉列表，點中 “mainframe”這個框架名稱，告訴瀏覽器在 mainframe框架中打開被鏈接的網(wǎng)頁文件。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作選擇不同的框架名稱，鏈接文件將在不同的框架中打開：(1) 選擇“mainframe”，在窗口的右邊mainframe框 架中顯示所鏈接的文件內(nèi)容。(2

14、) 選擇“l(fā)eftframe”，在窗口的左邊leftframe框架 中顯示所鏈接的文件內(nèi)容。(3) 選擇“topframe”，在窗口的上邊topfrmae框架 中顯示所鏈接的文件內(nèi)容。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作將鏈接目標(biāo)設(shè)置在默認(rèn)框架中將鏈接目標(biāo)設(shè)置在默認(rèn)框架中這是這是4個默認(rèn)的框架名稱個默認(rèn)的框架名稱(1) _blank(空白窗口空白窗口)：在另一個新的窗口中顯示鏈接內(nèi)容，這：在另一個新的窗口中顯示鏈接內(nèi)容，這樣可以保留現(xiàn)有的窗口文檔內(nèi)容。樣可以保留現(xiàn)有的窗口文檔內(nèi)容。(2) _parent(父窗口父窗口)：在上一層的框架集中顯示鏈接內(nèi)容：在上一層的框架集中顯示鏈接內(nèi)容(該選該選項只有在框

15、架集中還包含另一個框架集的情況下才能產(chǎn)生效果項只有在框架集中還包含另一個框架集的情況下才能產(chǎn)生效果)。(3) _self(當(dāng)前窗口當(dāng)前窗口)：在本身所在的框架中顯示鏈接內(nèi)容這樣會：在本身所在的框架中顯示鏈接內(nèi)容這樣會覆蓋當(dāng)前框架中的所有內(nèi)容。該目標(biāo)是默認(rèn)值。覆蓋當(dāng)前框架中的所有內(nèi)容。該目標(biāo)是默認(rèn)值。(4) _top(最高最高)：在整個瀏覽窗口中顯示鏈接內(nèi)容，這樣會覆蓋：在整個瀏覽窗口中顯示鏈接內(nèi)容，這樣會覆蓋當(dāng)前框架中所有內(nèi)容。當(dāng)前框架中所有內(nèi)容。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作修改框架集網(wǎng)頁外觀修改框架集網(wǎng)頁外觀 框架默認(rèn)的外觀不好看，我們可以通過設(shè)置框架(或框架集)的屬性來修改。1、設(shè)置框架集

16、屬性、設(shè)置框架集屬性 框架集屬性包括框架的大小和框架之間的邊框顏色及寬度等。查看和設(shè)置框架集的屬性如下：網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作表示當(dāng)前選擇表示當(dāng)前選擇的是框架集的是框架集表示當(dāng)前的框架表示當(dāng)前的框架結(jié)構(gòu)為結(jié)構(gòu)為2行行1列列用于設(shè)置當(dāng)前框架集邊框用于設(shè)置當(dāng)前框架集邊框的類型、寬度和顏色的類型、寬度和顏色設(shè)置選定行設(shè)置選定行(列列)的大小及其單位的大小及其單位行列選擇器深行列選擇器深色行為當(dāng)前行色行為當(dāng)前行(1) 選中整個框架集。選中整個框架集。(2) 在菜單欄中選擇在菜單欄中選擇“窗口窗口”“屬性屬性”，此時打開的屬性面，此時打開的屬性面板為板為 整個框架集的屬性面板為整個框架集的屬性面板

17、。整個框架集的屬性面板為整個框架集的屬性面板。(3) 根據(jù)需要在屬性面板上進(jìn)行相應(yīng)設(shè)置即可根據(jù)需要在屬性面板上進(jìn)行相應(yīng)設(shè)置即可!網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作精確調(diào)整框架大小精確調(diào)整框架大小 將leftframe框架區(qū)域的列寬精確調(diào)整到180像素，步驟如下： (1) 在框架面板上單擊上下框架之間的立體邊框 (2) 此時屬性面板為下邊框架集的屬性面板 (3) 在“值”文本框中輸入180，單位選擇像素即可n注意：如果想調(diào)整注意：如果想調(diào)整topframe框架區(qū)域的高度，框架區(qū)域的高度，就要選中整個框架集。在就要選中整個框架集。在“值值”文本框中輸入一文本框中輸入一個數(shù)字即可設(shè)置行的大小個數(shù)字即可設(shè)置

18、行的大小 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作2.2.設(shè)置框架的邊框及其寬度和顏色設(shè)置框架的邊框及其寬度和顏色 在框架屬性面板上的“邊框”項用于設(shè)置在當(dāng)文檔在瀏覽器中被瀏覽時是否顯示框架，共有三種選擇： (1) yes(是)：顯示邊框，寬度由“邊框?qū)挾取敝械?值指定 (2) no(否)：不顯示邊框 (3) default(默認(rèn))：讓用戶瀏覽器決定是否顯示 邊框。一般情況下為立體的灰色邊框網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作n“邊框?qū)挾取表椨糜谠O(shè)置框架邊框的寬度，實際上是框架與框架之間的距離，與表格中單元格的間距相似，其單位默認(rèn)為像素n剛建立框架集網(wǎng)頁時，框架集中的邊框設(shè)為“no”，寬度設(shè)為0。在瀏覽框架網(wǎng)頁時

19、，看不到框架之間的邊框，形成了一個整體，這就是無縫連接的效果。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作沒有邊框時的無縫連接效果沒有邊框時的無縫連接效果網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作設(shè)置邊框為設(shè)置邊框為5時的框架效果時的框架效果網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作設(shè)置框架屬性設(shè)置框架屬性 框架屬性包括框架的名稱、源文件、邊距、滾動、邊框等。使用框架屬性面板可以查看和設(shè)置框架屬性。 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作通過執(zhí)行以下操作之一選擇框架： n在“文檔”窗口的“設(shè)計”視圖中，按住 alt 鍵的同時單擊一個框架 (windows) 或在按住 shift 和 option 鍵的同時單擊一個框架 (macintosh)。 n

20、在“框架”面板（“窗口”“框架”）中單擊框架。 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作1.命名框架 打開框架面板，可以看到在top left結(jié)構(gòu)的框架集中，框架的默認(rèn)名稱分別為topframe、leftframe、和mainframe，這些名稱都可以重新定義的。 (1) 在框架面板中的topframe框架內(nèi)單擊，以選 中topframe框架。 (2) 打開屬性面板，在框架屬性面板的“框架名 稱”里輸入框架的名稱，回車即可。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作表示當(dāng)前選擇的是表示當(dāng)前選擇的是一個獨立的框架一個獨立的框架對框架名對框架名稱修改稱修改以像素為單位設(shè)置以像素為單位設(shè)置框架邊框與內(nèi)容之框架邊框與內(nèi)容之間的

21、左右間距間的左右間距設(shè)置或顯示當(dāng)前框架中的網(wǎng)頁文件設(shè)置或顯示當(dāng)前框架中的網(wǎng)頁文件選中可防止用戶選中可防止用戶在瀏覽時調(diào)整當(dāng)在瀏覽時調(diào)整當(dāng)前框架的大小前框架的大小滾動：滾動：在下拉列表中設(shè)置框架是否出現(xiàn)滾動條在下拉列表中設(shè)置框架是否出現(xiàn)滾動條設(shè)置邊框和設(shè)置邊框和邊框顏色邊框顏色網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作注意：注意： 框架名稱將被作為超級鏈接的目標(biāo)和腳本使用，命名框架必須符合一下要求：框架名應(yīng)該是一個單詞，允許使用下劃線(_)，但不能使用橫杠(-)、名號(.)和空格；框架名應(yīng)該以字母開頭，不要使用javascript的保留字(如top或navigator)。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作2.更換框

22、架中的網(wǎng)頁更換框架中的網(wǎng)頁 利用“導(dǎo)入”，既可以在當(dāng)前框架中導(dǎo)入預(yù)先設(shè)計好的網(wǎng)頁文件，也可以更換當(dāng)前框架中的網(wǎng)頁。其步驟： （1）選中想要導(dǎo)入（或更換）網(wǎng)頁的框架。 （2）使用以下幾種方法依次導(dǎo)入網(wǎng)頁： a、直接在框架屬性面板上的“源文件”文本框中輸入文件名。 b、單擊框架屬性面板上的黃色按鈕，瀏覽并選擇一個文件。 c、把光標(biāo)置于頁面中想更換內(nèi)容的框架內(nèi)，然后在菜單欄中選擇“文件”“在框架中打開”命令打開一個文件。網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作三種在框架中打開文件的方法網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作3.3.為框架設(shè)置滾動條為框架設(shè)置滾動條 使用“scroll”選項就可以為當(dāng)前框架設(shè)置滾動條。好處：當(dāng)沒有足夠的顯示空間來顯示框架內(nèi)容時，通過拖動滾動條來顯示剩下的內(nèi)容。