網站版面必須對應其顯示裝置的尺寸並適當調整。流變格線版面以視覺化方式供使用者建立不同的版面,以對應顯示該網站的不同裝置需要。

例如,您的網站內容即將於桌上型電腦、平板電腦與行動電話上供人閱覽。您可以使用流變格線版面,針對這些裝置的個別需要指定對應版面。您可以依照該網站內容要顯示在桌上型電腦、平板電腦或是行動電話,使用對應的版面。

更多資訊:最適化版面與回應式版面

Dreamweaver 12.2 Creative Cloud 發行版本包含許多流變格線版面的增強功能,例如對 HTML5 結構元素的支援,可讓您輕鬆地編輯巢狀元素。如需增強功能的完整清單總覽,請按一下這裡

註解:

Dreamweaver 13.1 和更高的版本中無法使用流變格線版面文件的檢查模式。

使用流變格線版面

請觀看這個視訊教學課程,了解如何使用流變格線版面:探索流變格線版面

建立流變格線版面

  1. 選取「檔案 > 新增流變格線版面」。

  2. 格線欄數的預設值會顯示在媒體類型中央。若要自訂裝置的欄數,請視需要編輯該值。

  3. 若要設定相較於螢幕尺寸的頁面寬度,請設定百分比值。

  4. 此外,您可以變更間距寬度。間距指的是兩欄之間的空間。

  5. 指定頁面的 CSS 選項。

    當您按一下「建立」時,系統會詢問您是否要指定 CSS 檔案。您可以執行下列一項作業:

    • 建立新的 CSS 檔案。
    • 開啟現有 CSS 檔案。
    • 將開啟的 CSS 檔案指定為流變格線 CSS 檔案。

    行動電話的流變格線預設會顯示出來。另外,流變格線的「插入」面板也會一併顯示出來。使用「插入」面板中的選項可建立專屬的版面。

    若要切換至其他裝置的版面設計,請按一下「設計」檢視下方選項的對應圖示。

  6. 儲存檔案。HTML 檔案儲存完畢後,系統會提示您將 boilerplate.css 與 respond.min.js 之類的相關檔案儲存到電腦的某個位置。指定位置,然後按一下「複製」。

    此 boilerplate.css 檔案是依據 HTML5 樣板檔案建立。該檔案集合了許多 CSS 樣式,可確保您的網頁在不同的裝置上呈現一致的樣貌。respond.min.js 是 JavaScript 資料庫,可為舊版瀏覽器中的媒體查詢提供支援。 

     

插入流變格線元素

「插入」面板「(視窗 > 插入)」會列出您可以在流變格線版面中使用的元素。當您插入元素時,可以選擇將元素插入為浮動元素。

  1. 在「插入」面板中,選取您要插入的元素。

  2. 在顯示的對話框中,選取類別,或是輸入 ID 值。「類別」選單會顯示您在建立頁面時指定的 CSS 檔案類別。

  3. 選取「插入為浮動元素」核取方塊。

  4. 當您選取插入的元素之後,畫面上會顯示用來隱藏、複製、鎖定或是刪除 Div 的選項。針對互相堆疊的 Div 圖層,系統會顯示用來調換 Div 的選項。

    選項標籤描述
    A調換 Div會將目前選取的元素與其上或其下的元素調換。
    B隱藏會隱藏元素。

    若要取消隱藏元素,請執行下列其中一項作業:

    若要取消隱藏 ID 選取器,請將 CSS 檔案中的顯示屬性變更為 block。(display:block)

    若要取消隱藏類別選取器,請移除原始碼中套用的類別 (hide_<MediaType>)。
    C上移一列會將元素上移一列
    D複製會複製目前選取的元素。會同時複製與元素連結的 CSS。
    E刪除若是 ID 選取器,則會刪除 HTML 以及 CSS。若只要刪除 HTML,請按下「刪除」。
    若是類別選取器,則只會刪除 HTML。
    F鎖定會將元素轉換為絕對位置元素。
    G對齊若是類別選取器,「對齊」選項可當做零邊界按鈕使用。
    若是 ID 選取器,對齊按鈕會將元素對齊格線。

    註解:

    頁面上的浮動元素可以使用左/右方向鍵進行橫向循環配置。選取元素邊界,然後按方向鍵。

巢狀化元素

若要將浮動元素巢狀化至其他浮動元素,請確保焦點位於父元素內。然後,插入所需的子元素。

也能支援巢狀化複製作業巢狀化複製作業會複製所選取元素的 HTML,然後產生相關的流變 CSS。所選取元素內含的絕對元素會配置到適當的位置。巢狀化元素也可使用複製按鈕加以複製。

刪除父元素後,對應至該元素、其子元素與相關 HTML 的 CSS 會一併刪除。巢狀化元素也可使用「刪除」按鈕一併刪除 (鍵盤快速鍵:Ctrl+Delete 鍵)。

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

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