2026 實戰教學：用 Dreamweaver 製作出能在手機、平板流暢顯示的 RWD 響應式網頁

在很多人的印象中，Dreamweaver 是個「老牌」的工具，但到了 2026 年，我們必須正視一個事實：只要你懂得如何運用它的預覽功能與現代化的 CSS 語法，它依然是開發 RWD（響應式網頁）時非常強大的輔助工具。對於剛接觸網頁設計的人來說，最怕的就是「在電腦上看起來很美，到手機上就整個崩掉」，這就是缺乏 RWD 思維的結果。

如果你目前還在糾結要用哪種方式來讓網站支援多種裝置，其實重點不在於工具本身，而在於你的佈局邏輯。今天我們就直接切入實戰，看看如何用 Dreamweaver 配合基礎 CSS，把一個動態適應的網頁做出來。

從「固定寬度」轉向「流動比例」的觀念轉換

2026 實戰教學：用 Dreamweaver 製作出能在手機、平板流暢顯示的 RWD 響應式網頁操作畫面 1
在進入軟體操作前，我們要先釐清 RWD 的核心邏輯。過去我們常寫 width: 1024px;，這種絕對單位會導致網頁在小螢幕上出現橫向捲軸（這就是所謂的 RWD 缺點，通常是因為開發者沒處理好邊框寬度）。

現在實作時，我們應優先使用百分比 %、vw/vh（視窗寬高比例）或 max-width。例如一個內容區塊，我們會寫成 width: 90%; max-width: 1200px;。這樣做的好處是：在手機上它會佔滿 90% 的空間，而在超大螢幕時，它會卡在 1200px 不再往外擴，保證排版穩定。

Dreamweaver 的核心優勢：即時裝置預覽

2026 實戰教學：用 Dreamweaver 製作出能在手機、平板流暢顯示的 RWD 響應式網頁操作畫面 2
為什麼還有人用 Dreamweaver 做 RWD？最重要的原因是它的「預覽」功能。在開發過程中，我們不需要一直切換瀏覽器視窗，就能在工作介面中預覽不同尺寸的行動裝置（如 iPhone、iPad 等）。

這對於初學者來說非常重要，因為你可以即時觀察到：當螢幕縮小時，圖片是否變形？文字是否重疊？如果你在設計過程中有大量的元件需要重複配置或快速調整樣式，搭配一些高效能的工具也能大幅提升速度，有些開發者會利用 RocketCake 6.4.1 我也會自己設計響應式網頁，RWD 懶人工具立刻上手來輔助處理複雜的佈局。

第一步：建立基礎骨架與 Viewport 設定

2026 實戰教學：用 Dreamweaver 製作出能在手機、平板流暢顯示的 RWD 響應式網頁操作畫面 3
無論你用什麼工具，第一步永遠是正確的 HTML 結構。在 Dreamweaver 開啟新檔案時，請務必確認 <head> 標籤內有包含 Viewport Meta Tag：

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

這行程式碼告訴瀏覽器：請根據裝置的實際寬度來縮放網頁。如果沒寫這行，手機版可能會出現縮小版電腦網頁的情況，完全無法呈現 RWD 的效果。

第二步：使用 Flexbox 建立流動佈局

在 2026 年的實作中，Flexbox 依然是處理網頁排列的首選。比起舊式的 Float 或 Table 佈局，Flexbox 能讓你更容易控制元素如何在不同空間中重排。

例如你要做一個「產品特徵區」，包含三個圖示與文字：

使用 display: flex; 定義容器。
給予子項目 flex: 1 0 auto;，讓它們平分寬度。
設定 flex-wrap: wrap;。這點非常關鍵！當手機螢幕變窄到無法並排三個時，他們會自動換行變成兩列或三列垂直排列。

第三步：媒體查詢 (Media Queries) 的精準套用

雖然 Flexbox 可以處理大部分的流動問題，但有時候我們需要「斷點」設計。例如：在電腦上是三個橫向排列的按鈕，到了手機上就希望變成長條狀的垂直區塊。

這時就需要用到 Media Queries。在 Dreamweaver 的 CSS 面板中，你可以建立不同的媒體查詢區塊：

```css
/* 行動裝置樣式 (通常為 768px 以下) */
@media (max-width: 768px) {
.feature-item {
flex-direction: column; /* 把橫向排列改為垂直 */
margin-bottom: 20px;
}
}
```

透過這種方式，你可以針對不同裝置寫出不同的 CSS 修改項。在 Dreamweaver 中作業時，建議將這些特定裝置的樣式分開區塊撰寫，方便後續維護。

進階實作：處理影像與字體縮放\n一個常被新手忽略的問題是「圖片比例」。為了讓 RWD 網頁更完美，你的內容圖必須具備響應能力。建議在 CSS 中加入：

```css
img {
max-width: 100%;
height: auto;
}
```

這能確保圖片永遠不會比容器寬，且會隨著寬度縮放而自動變縮。

此外，針對字體大小，建議避免使用過大的固定像素（px）。在手機上，如果你用 24px 的字體在高密度螢幕上看起來正常，但在某些解析度較低的裝置上可能會導致換行異常。適當運用 rem 單位或稍微調整媒體查詢內的 font-size，能大幅提升閱讀體驗。

常見陷阱與避坑指南

切記不要使用固定寬度的容器：如果你的外層 div 設定了 width: 1200px;，那這頁就絕對無法在手機上正常顯示。請改用 max-width。
避免發生水平捲動：如果在手機上左右可以滑動，通常是因為某個元素（如一個寬度超出的圖片或長連結）把邊界撐開了。利用瀏覽器開發者工具檢查溢出點是必經之路。
測試不同裝置的實機表現：雖然 Dreamweaver 的預覽很有用，但最終上線前，仍建議在實際手機（iOS 與 Android）上測試。因為不同瀏覽器的渲染引擎對 CSS 的解析可能會有微幅差異。

總結：實戰的心法

製作 RWD 網頁的核心不是「做出好幾個版本的網站」，而是「建立一套能根據空間自動變化的規則」。在 Dreamweaver 中操作時，你要不斷地切換預覽模式，確認在大螢幕、平板、以及手機上，內容都能以最舒適的方式呈現。從 Flexbox 開始練起，掌握媒體查詢的斷點邏輯，你就能跨越「網站跑掉」的技術門檻，製作出高品質的響應式網頁。