註解:

Dreamweaver CC (含) 以後版本的用戶介面已經簡化了。因此,您在 Dreamweaver CC 和更新版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文

頁框和頁框組如何運作

頁框是瀏覽器視窗中的區域,可獨立顯示 HTML 文件,而不受瀏覽器視窗其餘部分所顯示的文件影響。頁框可以將瀏覽器視窗分割為多個區域,而每個區域都能夠顯示不同的 HTML 文件。最常見的頁框使用方式就是:一個頁框用來顯示包含導覽控制項的文件,而另一個頁框用來顯示包含內容的文件。

頁框組是一種 HTML 檔案,可定義一組頁框的版面和屬性,包括頁框的數目、頁框的大小和位置,以及在每個頁框中最初所顯示頁面的 URL。頁框組檔案本身並未包含要在瀏覽器中顯示的 HTML 內容,除了 noframes 區段之外;頁框組檔案只對瀏覽器提供關於一組頁框應該顯示的方式,以及頁框中應該顯示什麼文件的資訊。

若要在瀏覽器中檢視一組頁框,請輸入頁框組檔案的 URL;接著瀏覽器就會開啟要在這些頁框中顯示的相關文件。網站的頁框組檔案通常命名為 index.html,因此在瀏覽者未指定檔案名稱時,會預設顯示這個檔案。

下列範例顯示由三個頁框所組成的頁框版面:側邊窄小的頁框 (包含導覽列)、橫越視窗頂端的頁框 (包含網站的標誌和標題) 和佔滿頁面其他空間的大頁框 (包含主要內容)。每個頁框都會顯示不同的 HTML 文件。

頁框版面
頁框版面

在這個範例中,頂端頁框中顯示的文件絕不會在瀏覽者瀏覽網站時變動。側邊的頁框導覽列包含連結;只要按其中一個連結,主要內容頁框中的內容就會變更,但是側邊頁框的內容保持不變。右邊的主要內容頁框會配合瀏覽者在左邊按下的連結,顯示適當的文件。

頁框不是檔案;您可以將目前在頁框中顯示的文件,簡單地看做是整個頁框的一個部分,但是該文件其實並非頁框的一部分。頁框是可容納文件的容器。

註解:

「頁面」是指單一的 HTML 文件,或是瀏覽器視窗在特定期間的整個內容 (即使一次有多份 HTML 文件同時顯示)。舉例來說,所謂「使用頁框的頁面」通常是指一組頁框,以及最初在這些頁框中出現的文件。

在瀏覽器中以由三個頁框組成之單一頁面所顯示的網站,實際上至少由四個獨立的 HTML 文件組成:一個頁框組檔案,加上三份包含頁框最初顯示內容的文件。在 Dreamweaver 中使用頁框組設計頁面時,您必須儲存這四個檔案,才能使頁面在瀏覽器中正常運作。

決定是否要使用頁框

Adobe 不鼓勵您在網頁版面中使用頁框,某些使用頁框的缺點包括:

  • 不同頁框中的元素圖像對齊不易精確。

  • 測試導覽需耗費很多時間。

  • 含頁框的個別頁面,其 URL 不會在瀏覽器中出現,因此瀏覽者不容易將特定的頁面加入書籤 (除非您提供伺服器程式碼,可以讓他們載入特定頁面的含頁框版本)。

若要完整了解不應使用頁框的原因,請參閱 Gary White 的說明,網址為 http://apptools.com/rants/framesevil.php

如果您決定要使用頁框,其最常見的用途就是導覽。一組頁框中通常包括一個包含導覽列的頁框,以及另一個用來顯示主要內容頁面的頁框。依照這種方式使用頁框有幾個好處:

  • 瀏覽者的瀏覽器不需要每個頁面都重新載入用於導覽的相關圖片。

  • 每個頁框都有自己的捲軸 (如果內容太大,視窗無法容納),瀏覽者可以分別捲動頁框。例如,如果導覽列位於不同的頁框中,那麼已經在頁框中將很長的頁面內容捲動到底部的瀏覽者,就不需要捲動回頂端才能使用導覽列。

在很多情況下,您可以建立沒有頁框的網頁,也同樣能達成一組頁框所能完成的目標。舉例來說,假如您想讓頁面的左邊顯示導覽列,您可以用一組頁框來取代頁面,或者只要在網站中的每個頁面加入導覽列即可 (Dreamweaver 可協助您建立多個使用相同版面的頁面)。下列範例顯示的頁面設計並未使用頁框,但看起來卻像是頁框版面設計。

沒有頁框但看起來像是頁框的版面
沒有頁框但看起來像是頁框的版面

設計不佳的網站常會在非必要時使用頁框;例如,使用的頁框組在瀏覽者每按一次瀏覽按鈕時,就重新載入導覽頁框的內容。如果使用頁框得當 (例如,讓某個頁框中的導覽控制項保持固定,而允許另一個頁框的內容變動),對網站會很有幫助。

不是所有的瀏覽器都能提供完善的頁框支援,它們對無法瀏覽頁框的瀏覽者可能會造成不便,因此使用頁框時,請務必在頁框組中提供 noframes 區段,讓無法檢視頁框組的瀏覽者也能使用。您可能也需要提供該網站無頁框版本的直接連結。

巢狀頁框組

位於另一個頁框組裡面的頁框組就叫做巢狀頁框組。單一頁框組檔案可以包含多個巢狀頁框組。使用頁框的網頁其實大多使用巢狀頁框,而在 Dreamweaver 中預先定義的頁框組也大多使用巢狀結構。只要一組頁框中包含有列或欄個數不相同的頁框,就必須使用巢狀頁框組。

舉例來說,最常用的頁框版面就是在頂端的列中有一個頁框 (顯示公司的標誌),並且在底部的列中有兩個頁框 (即導覽頁框和內容頁框)。這個版面需要巢狀頁框組:一個兩列的頁框組,而其第二列中包含一個兩欄的巢狀頁框組。

巢狀頁框組
巢狀頁框組

A. 主要頁框組 B. 選單頁框以及內容頁框巢狀化於主要頁框組之中 

Dreamweaver 會依需要處理巢狀頁框組;如果您在 Dreamweaver 中使用頁框分割工具,就不用擔心哪些頁框要巢狀化,而哪些不需巢狀化的細節問題。

在 HTML 中巢狀化頁框組的方式有兩種:內部的頁框組可定義為與外部頁框組屬於同一個檔案,或者分屬於各自的檔案。在 Dreamweaver 預先定義的每個頁框組都會將其所有頁框組定義於同一個檔案。

兩種巢狀結構都有相同的視覺效果;若不查看程式碼,很難分辨所使用的是哪一種巢狀結構。最可能會在 Dreamweaver 中使用外部頁框組檔案的情況是,當您使用「開啟於頁框」命令,在頁框內開啟頁框組檔案的時候;執行此作業可能會產生設定連結目標的問題。一般而言,最簡便的方式還是將所有頁框組定義於單一檔案中。

在文件視窗中使用頁框組

Dreamweaver 可讓您完全在一個「文件」視窗中檢視並編輯與一組頁框相關的所有文件。這個方法可讓您在編輯的同時便可看到含頁框頁面在瀏覽器中大概的樣貌。然而,在您尚未適應之前,這個方式的某些方面還是有點複雜。尤其是,每個頁框都會分別顯示不同的 HTML 文件。即使文件是空白的,您還是必須先將它們全部儲存後才能預覽 (因為頁框組只有在包含要在每個頁框顯示的文件的 URL 時,才可以正確地預覽)。

若要確認頁框組在瀏覽器中正確地呈現,請遵循以下的一般步驟:

  1. 建立頁框組並指定每個頁框要顯示的文件。
  2. 儲存每一個要顯示在頁框中的檔案。請記得,每個頁框都會顯示不同的 HTML 文件,除了頁框組檔案之外,您還必須儲存每一份文件。
  3. 設定每個頁框及頁框組的屬性 (包括命名每個頁框、設定捲動及非捲動選項)。
  4. 請確定已在「屬性」檢視窗中設定所有連結的「目標」屬性,如此連結的內容才會出現在正確的區域。

建立頁框和頁框組

在 Dreamweaver 中建立頁框組的方式有兩種:您可以從數個預先定義的頁框組中選取,或是自行設計。

選擇預先定義的頁框組時,便會自動設定建立版面時所需的所有頁框組和頁框,這是快速建立頁框式版面的最簡易方式。您只可以在「文件」視窗的「設計」檢視中,插入預先定義的頁框組。

您將「分隔軸」新增到「文件」視窗中,便能在 Dreamweaver 中設計自己的頁框組。

註解:

在建立頁框組或使用頁框前,選取「檢視>視覺輔助>頁框邊框」,即可在「文件」視窗的「設計」檢視中看到頁框邊框。

建立預先定義的頁框組和顯示頁框中現有文件

  1. 將插入點放在文件中,然後執行下列其中一項作業:
    • 選擇「插入>HTML>頁框」,然後選取預先定義的頁框組。

    • 請在「插入」面板的「版面」類別中,按一下「頁框」按鈕上的下拉箭頭,然後選取預先定義的頁框組。

      「頁框組」圖示可以提供您套用到目前文件之每個頁框組的視覺呈現。頁框組圖示的藍色區域代表目前的文件,而白色區域則代表會顯示其他文件的頁框。

  2. 如果您已設定 Dreamweaver 提示您設定頁框輔助功能屬性,請從彈出式選單中選取頁框、輸入頁框的名稱,然後按一下「確定」 (如果瀏覽者使用螢幕助讀程式,當螢幕助讀程式在頁面中遇到頁框時就會讀取這個名稱)。

    註解:

    如果您沒有輸入新名稱就按下「確定」,Dreamweaver 便會為頁框指定對應其在頁框組中所處位置 (左邊頁框、右邊頁框等) 的名稱。

    註解:

    如果您按「取消」,頁框組也會出現在文件中,不過 Dreamweaver 並不會與輔助功能標籤或屬性產生關聯。

    註解:

    選取「視窗>頁框」以檢視您所命名的頁框圖表。

建立預先定義的空頁框組

  1. 選取「檔案>開新檔案」。
  2. 在「新增文件」對話方塊中,選取「來自樣本的頁面」類別。
  3. 在「樣本資料夾」欄中,選取 Frameset 資料夾。
  4. 從「樣本頁面」欄中選取頁框組,然後按一下「建立」。
  5. 如果您已在「偏好設定」中啟動頁框輔助功能屬性,「頁框標籤輔助功能屬性」對話方塊便會出現;請完成每個頁框的對話方塊,然後按一下「確定」。

    註解:

    如果您按「取消」,頁框組也會出現在文件中,不過 Dreamweaver 並不會與輔助功能標籤或屬性產生關聯。

建立頁框組

  1. 選取「修改>頁框組」,然後從子選單中選取分割項目 (如「向左分割頁框」或「向右分割頁框」)。

    Dreamweaver 會將視窗分割成頁框。如果有現有的文件已經開啟時,它會顯示在其中一個頁框中。

將頁框分割成較小的頁框

  • 若要從插入點所在的頁框開始分割,請從「修改>頁框組」子選單中選擇分割項目。
    • 若要垂直或水平分割單一頁框或一組頁框,請將頁框邊框從邊緣拖曳到「設計」檢視的中間。

    • 若要分割一個使用不在「設計」檢視邊緣之頁框邊框的頁框,請按 Alt (Windows) 或 Option (Macintosh) 並拖曳頁框邊框。

    • 若要將一個頁框分割為四個頁框,請將頁框邊框從「設計」檢視的某個角落拖曳到頁框的中間。

註解:

若要建立三個頁框,請先分割為兩個頁框,然後再分割其中一個頁框即可。要在不編輯頁框組程式碼的情況下,合併兩個鄰近的頁框並不容易,也就是說將四個頁框變為三個頁框時,會比將兩個頁框變為三個頁框還要困難。

刪除頁框

  1. 將頁框邊框拖曳離開頁面或拖曳到父頁框的邊框。

    如果在已經移除之頁框內的文件中有未儲存的內容,Dreamweaver 會提示您儲存此文件。

    註解:

    您無法藉由拖曳邊框將頁框組完全移除。若要移除頁框組,請關閉顯示它的「文件」視窗。如果頁框組檔案已經儲存,請刪除該檔案。

調整頁框大小

  • 若要設定頁框的約略大小,請在「文件」視窗的「設計」檢視中拖曳頁框邊框。
  • 若要指定正確的大小,並指定當瀏覽器視窗大小不允許頁框呈現完整大小時,瀏覽器對頁框所分配之列和欄的空間大小,請使用「屬性」檢視窗。

選取頁框和頁框組

若要變更頁框或頁框組的屬性,請先選取您想要變更的頁框或頁框組。您可以在「文件」視窗或者使用「頁框」面板選取頁框或頁框組。

「頁框」面板可提供頁框組內頁框的視覺呈現。它會使用一種在「文件」視窗可能不明顯的方式,來顯示頁框組結構的階層。在「頁框」面板中,每個頁框組都圍繞著粗的邊框;而每個頁框則是由細的灰線所圍繞,並且按照頁框名稱來識別。

頁框面板
頁框面板

在「文件」視窗的「設計」檢視中,當選取頁框時,其邊緣會出現虛線外框;當選取頁框組時,頁框組內的所有頁框邊框,則是淡色的虛線外框。

註解:

將插入點放在顯示於頁框內的文件中,與選取頁框是不相同的。有許多作業都必須選取頁框才能執行 (例如設定頁框屬性)。

在頁框面板中選取頁框組

  1. 選取「視窗>頁框」。
  2. 在「頁框」面板中:
    • 若要選取頁框,請按一下該頁框 (在「頁框」面板和「文件」視窗的「設計」檢視中,頁框的外圍會出現選取範圍外框)。

    • 若要選取頁框組,請按一下頁框組周圍的邊框。

在文件視窗中選取頁框組

  • 若要選取頁框,請在「設計」檢視中,按住 Shift+Alt (Windows) 或 Shift+Option (Macintosh) 後按一下頁框內部。
  • 若要選取頁框組,請在「設計」檢視中,按一下頁框組的其中一個內部頁框邊框 (頁框邊框必須看得到才能執行此作業;如果看不到,請選取「檢視>視覺輔助>頁框邊框」,便能看到頁框邊框)。

註解:

一般而言,在「頁框」面板中選取頁框組,會比在「文件」視窗中更容易。如需詳細資訊,請參閱前面的主題。

選取不同的頁框或頁框組

  • 若要選取在相同階層中的下一個或前一個頁框或頁框組,以作為目前的選擇,請按 Alt+向左鍵或 Alt+向右鍵 (Windows) 或者按 Command+向左鍵或 Command+向右鍵 (Macintosh)。使用這些按鍵,您就可以按照頁框組檔案中已定義的順序,在頁框和頁框組之間循環切換。
  • 若要選取父系頁框組 (包含目前選擇的頁框組),請按 Alt+向上鍵 (Windows) 或 Command+向上鍵 (Macintosh)。
  • 若要選取目前選取之頁框組中的第一個子頁框或頁框組 (亦即,在頁框組檔案中依順序所定義的第一項),請按 Alt+向下鍵 (Windows) 或 Command+向下鍵 (Macintosh)。

在頁框中開啟文件

藉由將新內容加入頁框中的空白文件或者開啟頁框中的現有文件,您就可以指定頁框的初始內容。

  1. 將插入點放在頁框中。
  2. 選取「檔案>開啟於頁框」。
  3. 選取要在頁框中開啟的文件,然後按一下「確定」(Windows) 或「選擇」(Macintosh)。
  4. (選擇性) 若要使此文件成為瀏覽器開啟頁框組時要在頁框中顯示的預設文件,請先儲存該頁框組。

儲存頁框和頁框組檔案

若要在瀏覽器中預覽某個頁框組,您必須先儲存該頁框組檔案以及所有要顯示在頁框中的文件。您可以分別儲存每個頁框組檔案和頁框文件,或是一次儲存頁框組檔案以及頁框中出現的所有文件。

註解:

當您使用 Dreamweaver 中的視覺工具來建立一組頁框時,在該頁框中出現的每份新文件都會被賦予預設的檔名。例如,第一個頁框組檔案會命名為 UntitledFrameset-1,而頁框中的第一份文件則命名為 UntitledFrame-1。

儲存頁框組檔案

  1. 在「頁框」面板或「文件」視窗中選取頁框組。
    • 若要儲存頁框組檔案,請選取「檔案>儲存頁框組」。

    • 若要將頁框組檔案儲存成新檔案,請選取「檔案>另存新頁框組」。

    註解:

    如果之前未儲存頁框組檔案,這兩個命令的作用就是相同的。

儲存頁框中顯示的文件

  1. 在頁框中按一下,然後選取「檔案>儲存頁框」或「檔案>另存頁框」。

儲存所有與一組頁框相關的檔案

  1. 選取「檔案>儲存全部頁框」。

    這個指令將儲存頁框組中所有開啟的文件,包括頁框組檔案和所有頁框文件。如果尚未儲存頁框組檔案,「設計」檢視中的頁框組 (未儲存的頁框) 四周就會出現深色的邊框,而且您可以選取檔名。

    註解:

    如果您使用「檔案>開啟於頁框」在頁框中開啟文件,那麼當您在儲存頁框組時,在頁框中開啟的文件將成為顯示於該頁框中的預設文件。如果您不想讓這份文件成為預設文件,請不要儲存此頁框組檔案。

檢視和設定頁框屬性

使用「屬性」檢視窗來檢視和設定大部分的頁框屬性,包括邊框、邊界,以及頁框中是否顯示捲軸。設定頁框屬性將覆蓋頁框組中該屬性的設定。

您可能也需要設定一些頁框屬性,例如標題屬性 (這和名稱屬性不同),以增強輔助功能。您可以在建立頁框時啟用頁框的輔助功能編寫選項來設定屬性,也可以在插入頁框後再設定屬性。若要編輯頁框的輔助功能屬性,請使用「標籤」檢視窗直接編輯 HTML 程式碼。

檢視或設定頁框屬性

  1. 請使用下列其中一種方式選取頁框:
    • 按住 Alt (Windows) 或 Shift+Option (Macintosh) 後按一下「文件」視窗「設計」檢視中的頁框。

    • 按一下「頁框」面板中的頁框 (「視窗>頁框」)。

  2. 在「屬性」檢視窗中 (「視窗 > 屬性」),按一下右下角的展開箭頭以查看所有頁框屬性。
  3. 設定頁框「屬性」檢視窗選項。

    頁框名稱

    連結之 target 屬性或 Script 使用的名稱,可參考到頁框。頁框的名稱必須是一個字,允許有底線 (_),但是不能有連字符號 (-)、句號 (.) 和空格。頁框的名稱必須以字母開頭 (而不是數字), 而且有區分大小寫。請勿使用屬於 JavaScript 保留字的詞彙 (例如 topnavigator) 作為頁框名稱。

    註解:

    若要使連結變為另一個頁框中的內容,您必須為目標頁框命名。為方便日後建立跨頁框連結,請在建立每個頁框時為其命名。

    原始檔

    可指定要在頁框中顯示的原始檔文件。按一下要瀏覽的資料夾圖示並選取檔案。

    捲動

    可指定頁框中是否顯示捲軸。將這個選項設定為「預設」時,並不會設定對應屬性的值,而是讓每個瀏覽器都使用其預設值。大多數的瀏覽器會預設為「自動」,也就是捲軸只會在瀏覽器視窗的空間不足以顯示目前頁框中的所有內容時,才會出現。

    不可調整大小

    可防止瀏覽者拖曳頁框邊框,來調整瀏覽器頁框的大小。

    註解:

    您可以隨時在 Dreamweaver 中調整頁框大小,但這個選項只適用於在瀏覽器檢視頁框的瀏覽者。

    邊框

    在瀏覽器中進行檢視時顯示或隱藏目前頁框的邊框。選取頁框的「邊框」選項,會覆蓋頁框組的邊框設定。

    邊框選項有「是」(顯示邊框) 或「否」(隱藏邊框) 以及「預設」;除非父頁框組已將「邊框」設定為「否」,否則大多數的瀏覽器會預設為顯示邊框。只有在共用該邊框的所有頁框都將「邊框」設定為「否」時,或是在父頁框組的「邊框」設定為「否」且共用該邊框的頁框將「邊框」設定為「預設」,頁框才會隱藏。

    邊框顏色

    可設定所有頁框邊框的顏色。這個顏色套用在所有觸及此頁框的邊框,而且會覆蓋頁框組的指定邊框色彩。

    邊界寬度和邊界高度

    可以像素為單位設定左和右邊界的寬度 (也就是頁框邊框和內容的間距)。

    邊界高度

    可以像素為單位設定上方和下方邊界的高度 (也就是頁框邊框和內容的間距)。

    註解:

    設定頁框的邊界寬度和高度,與在「修改 > 頁面屬性」對話方塊中設定邊界不同。

    註解:

    若要變更頁框的背景顏色,請在頁面屬性中設定頁框中的文件背景顏色。

設定頁框的輔助功能值

  1. 在「頁框」面板中 (「視窗>頁框」),將插入點放在其中一個頁框中以選取該頁框。
  2. 選取「修改 > 編輯標籤 <frameset>」。
  3. 從左邊的分類清單中選取「樣式表/輔助功能」,輸入值,再按一下「確定」。

編輯頁框的輔助功能值

  1. 如果您目前正在「設計」檢視中,請顯示文件的「程式碼」檢視或同時顯示「程式碼」和「設計」檢視。
  2. 在「頁框」面板中 (「視窗>頁框」),將插入點放在其中一個頁框中以選取該頁框。Dreamweaver 會反白標示程式碼中的頁框標籤。
  3. 在程式碼中按下滑鼠右鍵 (Windows) 或按 Control+按一下 (Macintosh),然後再選取「編輯標籤」。
  4. 在標籤編輯器中進行變更,然後按一下「確定」。

變更頁框中文件的背景顏色

  1. 將插入點放在頁框中。
  2. 選取「修改>頁面屬性」。
  3. 在「頁面屬性」對話方塊中,按一下「背景顏色」選單,然後選取顏色。

檢視和頁框組屬性

使用「屬性」檢視窗來檢視和設定大部分的頁框組屬性,包括頁框組標題、邊框和頁框大小。

設定頁框組文件的標題

  1. 請依下列其中一種方式來選取頁框組:
    • 在「文件」視窗的「設計」檢視中,按一下頁框組中兩個頁框之間的邊框。

    • 在「頁框」面板中 (「視窗>頁框」) 按一下環繞著頁框組的邊框。

  2. 在「文件」工具列的「標題」欄位中,輸入頁框組文件的名稱。

    當瀏覽者檢視瀏覽器中的頁框組時,這個標題就會出現在瀏覽器的標題列中。

若要檢視或設定頁框組屬性:

  1. 請依下列其中一種方式來選取頁框組:
    • 在「文件」視窗的「設計」檢視中,按一下頁框組中兩個頁框之間的邊框。

    • 在「頁框」面板中 (「視窗>頁框」) 按一下環繞著頁框組的邊框。

  2. 在「屬性」檢視窗中 (「視窗 > 屬性」),按一下右下角的展開箭頭,並設定頁框組的屬性。

    邊框

    決定當在瀏覽器檢視文件時,頁框周圍是否要出現邊框。若要顯示邊框,請選取「是」;若不要讓瀏覽器顯示邊框,請選取「否」。若要讓瀏覽器決定如何顯示邊框,請選取「預設」。

    邊框寬度

    可指定頁框組中所有邊框的寬度。

    邊框顏色

    可設定邊框的顏色。使用檢色器來選取顏色,或輸入顏色的 16 進位值。

    列欄選取範圍

    可設定所選取頁框組的列和欄的頁框大小;若要設定,請按一下「列欄選取範圍」區域左邊或頂端的索引標籤,然後在「值」文字方塊中輸入高度或寬度。

    列欄選取範圍
    列欄選取範圍

  3. 若要指定瀏覽器分配給每個頁框的空間大小,請從「單位」選單的下列選項中做選擇:

    像素

    可將選取欄或列的大小設定為絕對的值。這個選項適用於需要維持固定大小的頁框,例如導覽列。以像素指定大小的頁框的空間分配會早於依百分比或相對性指定大小的頁框。頁框大小最常見的設定方式,就是將左邊的頁框設定為固定的像素寬度,而右邊的頁框大小則是相對寬度。如此一來,右邊的頁框就會在像素寬度分配好後自動延伸,並且佔滿所有剩餘的空間。

    註解:

    如果所有的寬度都是以像素來指定,而您所指定的寬度,對在瀏覽器中檢視頁框組的瀏覽者而言過寬或過窄時,則頁框就會依比例來延伸或縮小,以便填滿可用的空間。這個情形也同樣發生在以像素指定的高度上。因此,至少指定一個寬度或高度為「相對」,通常會是不錯的辦法。

    百分比

    可指定選取的欄或列佔頁框組總寬度和高度的百分比。單位設定為「百分比」的頁框的空間分配會在設定為「像素」的單位之後,而在設定為「相對」的單位之前。

    相對

    可指定選取的欄或列在設定為「像素」和「百分比」的頁框空間分配完成後,進行空間分配;剩下的空間就會依比例分配給這些設定大小為「相對」的頁框。

    註解:

    當您從「單位」選單中選擇「相對」時,任何在「值」欄位中輸入的數字都會消失;如果您想要指定數字,就必須重新輸入。然而,如果只有一個欄或列設定為「相對」,就不需要輸入數字,因為該欄或列會在其他列或欄的空間完成分配後,接收所有剩餘的空間。若要確保達到完整的跨瀏覽器相容性,您可以在「值」欄位中輸入 1;這就等於沒有輸入值。

若要使用某頁框中的連結來開啟另一頁框中的文件,您必須設定該連結的目標。連結的 target 屬性會指定要在其中開啟連結內容的頁框或視窗。

舉例來說,如果導覽列位於左邊的頁框,而您想讓連結的資料出現在右邊的主要內容頁框,您必須指定主要內容視窗的名稱為導覽列連結的目標。如此一來,當瀏覽者按一下導覽連結時,指定的內容就會在主要頁框中開啟。

  1. 在「設計」檢視中,選取文字或物件。
  2. 在「屬性」檢視窗的「連結」欄位中 (「視窗 > 屬性」),執行下列其中一項作業:
    • 按一下資料夾圖示,然後選取要連結到的檔案。

    • 將「指向檔案」圖示拖曳到「檔案」面板,並選取要連結的檔案。

  3. 在「屬性」檢視窗的「目標」選單中,選取要在其中出現連結文件的頁框或視窗。
    • _blank 會在新瀏覽器視窗中開啟連結的文件,讓目前的視窗保持原狀。

    • _parent 會在顯示連結的頁框之父系頁框組中開啟連結的文件,取代整個頁框組。

    • _self 會在目前的頁框中開啟連結,取代該頁框目前的內容。

    • _top 會在目前的瀏覽器視窗中開啟連結的文件,取代所有頁框。

      頁框名稱也會出現在這個選單中。選取已命名頁框,以在該頁框中開啟連結的文件。

    註解:

    頁框名稱只有在您正在頁框組內編輯文件時才會出現。當您在文件本身的「文件」視窗中編輯該份文件時,頁框名稱不會在「目標」彈出式選單中出現。如果您在頁框組外編輯文件,則可以在「目標」文字方塊中鍵入目標頁框的名稱。

    註解:

    如果您要連結到網站外的頁面,一定要使用 target="_top" 或 target="_blank",以確保該頁面不會顯示成您網站的一部分。

對不支援頁框的瀏覽器提供內容

Dreamweaver 可讓您指定內容顯示於不支援頁框的文字架構瀏覽器以及較舊版的圖形化瀏覽器。這些內容會儲存在頁框組檔案中,並在 noframes 標籤。當瀏覽器不支援頁框載入頁框組檔案時,瀏覽器只會顯示由 noframes 標籤中所包含的內容。

註解:

noframes 區域中的內容會多次出現下列提示:「請升級為可處理頁框的瀏覽器」。某些網頁瀏覽者會使用無法讓他們檢視頁框的系統。

  1. 選取「修改>頁框組>編輯無頁框內容」。

    Dreamweaver 會清除「設計」檢視,而且「設計」檢視頂端也會顯示「無頁框的內容」字樣。

  2. 請執行下列其中一項作業:
    • 在「文件」視窗中,如一般文件處理方式來鍵入或插入內容。

    • 選取「視窗>程式碼檢視窗」,將插入點放在 body 標籤會出現在 noframes 標籤內,然後輸入內容的 HTML 程式碼。

  3. 再次選取「修改>頁框組>編輯無頁框內容」,便可返回頁框組文件的一般檢視。

使用 JavaScript 行為搭配頁框

有幾種 JavaScript 行為和導覽相關的命令特別適用於頁框。

設定頁框文字

可替換內容並且以您指定的內容格式化特定的頁框。這些內容可以包含任何有效的 HTML。利用這個動作來靈活地顯示頁框中的資訊

前往 URL

可在目前視窗或指定頁框中開啟新的頁面。這個動作在變更二到多個頁框的內容上特別有用,只要按一下滑鼠即可完成。

插入跳頁選單

可讓您設定連結的選單清單,只要按一下這些連結就可以在瀏覽器視窗中開啟檔案。您也可以指定用來開啟文件的特定視窗或頁框。

如需詳細資訊,請參閱加入 JavaScript 行為

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策