使用手冊取消

使用流變格線版面的回應式設計

搜尋

上次更新時間 2022年2月18日

希望建立多種螢幕尺寸的互動式網站嗎？了解如何在 Dreamweaver 中使用流變格線來設計行動裝置和桌面的網站。

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

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

檢查模式無法供流變格線版面文件使用。

建立流變格線版面

您可以在 Dreamweaver 2017 中編輯現有的流變格線版面。不過，您無法建立流變格線版面。

請改用 Bootstrap 來建立 Dreamweaver 2017 的回應式版面。如需有關 Bootstrap 的詳細資訊，請參閱「使用 Bootstrap 檔案」。

選取「檔案 > 流變格線 (舊版)」。
格線欄數的預設值會顯示在媒體類型中央。若要自訂裝置的欄數，請視需要編輯該值。
若要設定相較於螢幕尺寸的頁面寬度，請設定百分比值。
此外，您可以變更間距寬度。間距指的是兩欄之間的空間。
指定頁面的 CSS 選項。

當您按一下「建立」時，系統會詢問您是否要指定 CSS 檔案。您可以執行下列一項作業：
- 建立新的 CSS 檔案。
- 開啟現有 CSS 檔案。
- 將開啟的 CSS 檔案指定為流變格線 CSS 檔案。
行動電話的流變格線預設會顯示出來。另外，流變格線的「插入」面板也會一併顯示出來。使用「插入」面板中的選項可建立專屬的版面。

若要切換至其他裝置的版面設計，請按一下「設計」檢視下方選項的對應圖示。
儲存檔案。HTML 檔案儲存完畢後，系統會提示您將 boilerplate.css 與 respond.min.js 之類的相關檔案儲存到電腦的某個位置。指定位置，然後按一下「複製」。

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

您可以直接在「即時檢視」中編輯流變格線文件：

您也可以使用元素快速檢視，將流變格線文件的 HTML DOM 結構視覺化。

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

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

選項	說明
調換 Div	將目前選取的元素與其上或其下的元素調換。
隱藏	會隱藏元素。若要取消隱藏元素，請執行下列其中一項作業：若要取消隱藏 ID 選取器，請將 CSS 檔案中的顯示屬性變更為 block。(display:block) 若要取消隱藏類別選取器，請移除原始碼中套用的類別 (hide_<MediaType>)。
上移一列	將元素上移一列
複製	複製目前選取的元素。會同時複製與元素連結的 CSS。
刪除	若是 ID 選取器，請刪除 HTML 以及 CSS。若只要刪除 HTML，請按下「刪除」。若是類別選取器，則只會刪除 HTML。
對齊	若是類別選取器，「對齊」選項可當做零邊界按鈕使用。若是 ID 選取器，對齊按鈕會將元素對齊格線。

註解：

頁面上的元素可以使用上/下方向鍵進行縱向循環配置。選取元素邊界，然後按方向鍵。

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

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

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

新的使用者？