選取「檔案 > 流變格線 (舊版)」。
上次更新時間
2021年12月20日
希望建立多種螢幕尺寸的互動式網站嗎？ 了解如何在 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 類別和 ID 與元素的關聯。 如需詳細資訊，請參閱「元素顯示」。
- 編輯影像屬性和文字。 如需詳細資訊，請參閱「快速屬性檢視窗」和「在即時檢視中編輯文字」。
- 插入新元素。 如需詳細資訊，請參閱「插入流變格線元素」。
您也可以使用元素快速檢視，將流變格線文件的 HTML DOM 結構視覺化。
插入流變格線元素
「插入」面板 (「視窗 > 插入」) 會列出您可以在流變格線版面中使用的元素。 當您插入元素時，可以選擇將元素插入為浮動元素。
在「插入」面板中，按一下您要插入的元素。
在所顯示的對話方塊中按一下「之前」、「之後」或「巢狀化」，相對於文件中反白標示的參考元素將元素定位。
選取類別，或是輸入 ID 值。 「類別」選單會顯示您在建立頁面時指定的 CSS 檔案類別。
選取「插入為浮動元素」核取方塊。
選取插入的元素之後，畫面上會顯示用來隱藏、複製或刪除 Div 的選項。 針對互相堆疊的 Div 圖層，系統會顯示用來調換 Div 的選項。
|
選項 |
說明 |
|
調換 Div |
將目前選取的元素與上方或下方的元素交換。 |
|
隱藏 |
隱藏元素。 |
|
上移一列 |
將元素向上移動一列 |
|
複製 |
複製目前選取的元素。 連結至元素的 CSS 也會重複。 |
|
刪除 |
若是 ID 選取器，請刪除 HTML 以及 CSS。 若要僅刪除 HTML，請按 Delete 鍵。 |
|
對齊 |
對於類別選擇器，「對齊」選項的作用如同零邊界按鈕。 |
備註
頁面上的元素可以使用上/下方向鍵進行縱向循環配置。 選取元素邊界，然後按方向鍵。
巢狀化元素
若要將浮動元素巢狀化至其他浮動元素，請確保焦點位於父元素內。 然後，插入所需的子元素。
也能支援巢狀化複製作業。 巢狀化複製作業會複製所選取元素的 HTML，然後產生相關的流變 CSS。 所選取元素內含的絕對元素會配置到適當的位置。 巢狀化元素也可使用複製按鈕加以複製。
刪除父元素後，對應至該元素、其子元素與相關 HTML 的 CSS 會一併刪除。 巢狀化元素也可使用「刪除」按鈕一併刪除 (鍵盤快速鍵：Ctrl+Delete 鍵)。
