在 Dreamweaver 中使用視覺輔助以配置版面,包括設定尺規、設定版面導引線、將導引線用於範本、使用版面格線,和使用影像藍圖。

設定尺規

尺規可以協助您測量、組織及規劃版面配置。尺規會出現在頁面邊框的左方和上方,以像素、英吋或公分為單位來標記。

  • 若要開啟和關閉尺規,請選取「檢視 > 設計檢視選項 > 尺規 > 顯示/隱藏」。
  • 若要變更原點,請在「文件」視窗中,將「設計」檢視左上角的尺規原點圖示 拖曳到頁面上的任何位置。
  • 若要將原點重設為預設的位置,請選取「檢視 > 設計檢視選項 > 尺規 > 重設原點」。
  • 若要變更度量單位,請選取「檢視 > 尺規」,然後選取「像素」、「英吋」或「公分」。

設定版面導引線

導引線是指您從尺規拖曳到文件上的線, 能協助您更精確地放置及對齊物件。您也可以使用導引線來測量頁面元素的大小,或是用來模擬網頁瀏覽器摺疊 (顯示區域)。

為了協助您對齊元素,您可以將元素貼齊導引線,或是將導引線貼齊元素 (元素必須以絕對方式定位,貼齊功能才能運作)。您也可以鎖定導引線,防止其他使用者不小心移動了導引線。

建立水平或垂直導引線

  1. 拖曳相對應的尺規。
  2. 將導引線放到「文件」視窗中,然後放開滑鼠按鍵 (可再次拖曳導引線,將其重新定位)。

    註解:

    根據預設,導引線是以絕對像素的測量方法從文件的上方或左方開始進行記錄,並以相對於尺規原點的方式顯示。若要以百分比的方式記錄導引線,請在建立或移動導引線時按住 Shift 鍵。

顯示或隱藏導引線

  1. 選取「檢視 > 導引線 > 顯示導引線」。

將元素貼齊導引線

  • 若要將元素貼齊導引線,請選取「檢視 > 設計檢視選項 > 導引線 > 貼齊導引線」。
  • 若要將導引線貼齊元素,請選取「檢視 > 設計檢視選項 > 導引線 > 導引線貼齊元素」。

註解:

當您重新調整元素,例如絕對定位元素 (AP 元素)、表格和影像等大小時,重新調整大小後的元素便會貼齊導引線。

鎖定或解除鎖定所有導引線

選取「檢視 > 設計檢視選項 > 導引線 > 鎖定導引線」。

檢視導引線並將其移至特定位置

  1. 將滑鼠指標放在導引線上方以檢視其位置。
  2. 按兩下導引線。
  3. 在「移動導引線」對話方塊中輸入新位置,然後按一下「確定」。

檢視導引線之間的距離

按 Control 鍵 (Windows) 或 Command 鍵 (Macintosh),然後將滑鼠指標放在兩條導引線之間。

註解:

導引線測量的單位和尺規測量的單位相同。

模擬網頁瀏覽器的摺疊 (顯示區域)

選取「檢視 > 設計檢視選項 > 導引線」,然後從選單中選取預設的瀏覽器大小。

移除導引線

將導引線拖曳到文件外。

變更導引線設定

  1. 選取「檢視 > 設計檢視選項 > 導引線 > 編輯導引線」,設定下列選項,然後按一下「確定」。

    導引線顏色

    指定導引線的顏色。按一下色票並從顏色挑選器選取顏色,或在文字方塊中輸入十六進位數字。

    距離色彩

    當您將滑鼠指標放在導引線之間時,會指定距離指示線顯示的顏色。按一下色票並從顏色挑選器選取顏色,或在文字方塊中輸入十六進位數字。

    顯示導引線

    在「設計」檢視中顯示導引線。

    貼齊導引線

    當您在頁面上四處移動頁面元素時,讓元素貼齊導引線。

    鎖定導引線

    將導引線鎖定在某個位置。

    導引線貼齊元素

    當您拖曳導引線時,讓導引線貼齊頁面上的元素。

    全部清除

    清除頁面上的所有導引線。

將導引線用於範本

在 Dreamweaver 範本中新增導引線時,所有範本實體都會繼承導引線。不過,範本實體中的導引線會被當成是可以編輯的區域,因此使用者可以修改導引線。每當以主範本更新範本實體時,實體中修改過的導引線就會還原成原來的位置。

您也可以在範本實體中加入自己的導引線, 當您以主範本更新範本實體時,以這種方式加入的導引線就不會被覆寫。

使用版面格線

格線會在「文件」視窗中顯示一組有秩序的水平和垂直線, 可以用來協助您精確地放置物件。您可以設定使絕對位置的頁面元素在您將其移動時自動貼齊格線,並透過指定格線設定,來變更格線或控制貼齊行為。不論格線是否顯示,貼齊動作都會執行。

顯示或隱藏格線

選取「檢視 > 設計檢視選項 > 格線 > 顯示格線」。

啟用或停用貼齊功能

選取「檢視 > 設計檢視選項 > 格線 > 貼齊格線」。

變更格線設定

  1. 選取「檢視 > 設計檢視選項 > 格線 > 格線設定」。

  2. 設定選項,並按一下「確定」套用變更。

    顏色

    指定格線的顏色。按一下色票並從顏色挑選器選取顏色,或在文字方塊中輸入十六進位數字。

    顯示格線

    在「設計」檢視中顯示格線。

    貼齊格線

    讓頁面元素貼齊格線的線條。

    間距

    控制格線之間的距離。輸入數字並從選單選取「像素」、「英吋」或「公分」。

    顯示

    指定格線要以實線或點狀顯示。

    註解:

    如果沒有選取「顯示格線」,文件中就不會出現格線,也不會看到任何變更。

使用影像藍圖

您可以使用影像藍圖作為導引,重新建立已在圖形應用程式 (如 Adobe Freehand 或 Fireworks) 中建立的頁面設計。

影像藍圖是一個 JPEG、GIF 或 PNG 影像,它會放置在「文件」視窗的背景中。您可以隱藏影像、設定它的不透明度及變更它的位置。

影像藍圖只有在 Dreamweaver 中看得到;在瀏覽器中檢視頁面時,則看不到影像藍圖。顯示影像藍圖時,無法在「文件」視窗中看到頁面實際的背景影像與顏色;但是,在瀏覽器中檢視頁面時,就看得到背景影像和顏色。

在文件視窗中放置影像藍圖

  1. 請執行下列其中一項作業:
    • 選取「檢視 > 設計檢視選項 > 影像藍圖 > 載入」。

    • 選取「檔案 > 頁面屬性」,然後在「影像藍圖」類別中按一下「瀏覽」(位於「影像藍圖」文字方塊旁邊)。

  2. 瀏覽至您的影像檔,然後按一下「確定」。

  3. 在「頁面屬性」對話方塊中,拖曳「影像透明度」滑桿以指定影像的透明度,然後按一下「確定」。

    若要隨時切換到另一個影像藍圖,或是變更目前影像藍圖的透明度,請選取「檔案 > 頁面屬性」。

顯示或隱藏影像藍圖

選取「檢視 > 設計檢視選項 > 影像藍圖 > 顯示」。

變更影像藍圖的位置

  1. 選取「檢視 > 設計檢視選項 > 影像藍圖 > 調整位置」。

    • 若要精確指定影像藍圖的位置,請在 X 和 Y 文字方塊中輸入座標值。

    • 若要將影像一次移動一個像素,請使用方向鍵。

    • 若要一次將影像移動 5 個像素,請按 Shift 鍵和方向鍵。

重設影像藍圖的位置

  1. 選取「檢視 > 設計檢視選項 > 影像藍圖 > 重設位置」。

    影像藍圖會回到「文件」視窗的左上角 (0,0)。

將影像藍圖與選取的元素對齊

  1. 在「文件」視窗中選取元素。
  2. 選取「檢視 > 設計檢視選項 > 影像藍圖 > 對齊選取範圍」。

    影像藍圖的左上角會與選取元素的左上角對齊。

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

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