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

1、frame框架技術制作網(wǎng)頁框架技術制作網(wǎng)頁網(wǎng)頁設計與制作網(wǎng)頁設計與制作 框架也稱為幀，是設計網(wǎng)頁時非常有用的工具。它可以將瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域分別顯示不同的網(wǎng)頁，從而使用戶能夠一次瀏覽更多內容。本章學習框架的一些基礎知識，以及怎么同時在一個瀏覽器窗口中顯示多個網(wǎng)頁。網(wǎng)頁設計與制作網(wǎng)頁設計與制作框架的基本構成框架的基本構成u 創(chuàng)建和設置框架創(chuàng)建和設置框架u 框架中的鏈接目標框架中的鏈接目標u 框架中網(wǎng)頁的設置框架中網(wǎng)頁的設置u 框架設置滾動條框架設置滾動條網(wǎng)頁設計與制作網(wǎng)頁設計與制作一個框架應用實例一個框架應用實例網(wǎng)頁設計與制作網(wǎ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)頁設計與制作網(wǎng)頁設計與制作實現(xiàn)基于框架的網(wǎng)頁的基本思路如下：實現(xiàn)基于框架的網(wǎng)頁的基本思路如下：（1）在頁面中創(chuàng)建框架集和框架，并對頁面布局進行適當 的調整。（2）輸入框架頁面內容。（3）保存框架集文件和框架文件。（4）確認鏈接目標的框架設置，使所有鏈接內容都出現(xiàn)在 正確的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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