Dreamweaver
開啟應用程式
Dreamweaver 使用手冊
簡介
多方互動網頁設計基本概念
Dreamweaver 的新增功能
使用 Dreamweaver 開發網頁 - 總覽
Dreamweaver / 常見問題
鍵盤快速鍵
Dreamweaver 系統需求
功能摘要
Dreamweaver 和 Creative Cloud
將 Dreamweaver 設定與 Creative Cloud 同步
Dreamweaver 中的 Creative Cloud Libraries
在 Dreamweaver 中使用 Photoshop 檔案
使用 Adobe Animate 和 Dreamweaver
從資料庫擷取網頁最佳化的 SVG 檔案
Dreamweaver 工作區和檢視
Dreamweaver 工作區
最佳化視覺開發的 Dreamweaver 工作區
根據檔案名稱或內容搜尋檔案 | Mac OS
設定網站
關於 Dreamweaver 網站
設定網站的本機版本
連線到發佈伺服器
設定測試伺服器
匯入和匯出 Dreamweaver 網站設定
將現有網站從遠端伺服器帶入本機網站根目錄
Dreamweaver 中的輔助功能
進階設定
設定網站偏好設定以傳送檔案
在 Dreamweaver 中指定 Proxy 伺服器設定
將 Dreamweaver 設定與 Creative Cloud 同步
在 Dreamweaver 中使用 Git
管理檔案
建立和開啟檔案
管理檔案和資料夾
下載和上傳伺服器檔案
存回和取出檔案
同步化檔案
比較檔案差異
遮罩 Dreamweaver 網站中的檔案和資料夾
啟用 Dreamweaver 網站的設計備註
防止 Gatekeeper 遭到潛在惡意利用
版面和設計
使用視覺輔助以配置版面
關於使用 CSS 配置頁面
使用 Bootstrap 設計回應式網站
在 Dreamweaver 中建立及使用媒體查詢
以表格呈現內容
顏色
使用流變格線版面的互動設計
Dreamweaver 中的 Extract
CSS
了解串接樣式表
使用 CSS 設計工具配置頁面
在 Dreamweaver 中使用 CSS 預處理器
如何在 Dreamweaver 中設定 CSS 樣式偏好設定
在 Dreamweaver 中移動 CSS 規則
在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
使用 div 標籤
套用漸層至背景
在 Dreamweaver 中建立與編輯 CSS3 轉變效果
格式化程式碼
頁面內容和資產
設定頁面屬性
設定 CSS 標題屬性和 CSS 連結屬性
處理文字
尋找和取代文字、標籤和屬性
DOM 面板
在即時檢視中編輯
在 Dreamweaver 中進行文件編碼
在文件視窗中選取並檢視元素
在屬性檢視窗中設定文字屬性
檢查網頁拼字
在 Dreamweaver 中使用水平線
在 Dreamweaver 中新增和修改字體組合
使用資源
在 Dreamweaver 中插入和更新日期
在 Dreamweaver 中建立和管理最愛資源
在 Dreamweaver 中插入及編輯影像
新增媒體物件
在 Dreamweaver 中加入視訊
插入 HTML5 視訊
插入 SWF 檔
新增音效效果
在 Dreamweaver 中插入 HTML5 音效
使用圖庫項目
在 Dreamweaver 中使用阿拉伯文和希伯來文文字
連結和導覽
關於連結和導覽
連結
影像地圖
連結疑難排解
jQuery Widget 和效果
在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
在 Dreamweaver 中使用 jQuery 效果
撰寫網站程式碼
關於在 Dreamweaver 中撰寫程式碼
Dreamweaver 的程式碼撰寫環境
設定程式碼撰寫偏好設定
自訂程式碼色彩標示
撰寫和編輯程式碼
程式碼提示和程式碼完成
收合和展開程式碼
利用片段重複使用程式碼
Lint 程式碼
最佳化程式碼
在設計檢視中編輯程式碼
使用頁面的檔頭內容
在 Dreamweaver 中插入伺服器端包含
在 Dreamweaver 中使用標籤資料庫
匯入自訂標籤到 Dreamweaver
使用 JavaScript 行為 (一般說明)
套用內建的 JavaScript 行為
關於 XML 與 XSLT
在 Dreamweaver 中執行伺服器端 XSL 轉換
在 Dreamweaver 中執行用戶端 XSL 轉換
在 Dreamweaver 中新增 XSLT 字元實體
格式化程式碼
跨產品工作流程
安裝與使用 Dreamweaver 的擴充功能
Dreamweaver 中的應用程式內更新
在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
使用 Fireworks 和 Dreamweaver
使用 Contribute 編輯 Dreamweaver 網站的內容
Dreamweaver-Business Catalyst 整合
建立個人化的電子郵件行銷活動
範本
關於 Dreamweaver 範本
辨識範本和以範本為架構的文件
建立 Dreamweaver 範本
建立範本的可編輯區域
在 Dreamweaver 中建立重複區域和表格
使用範本中的選擇性區域
在 Dreamweaver 中定義可編輯的標籤屬性
如何在 Dreamweaver 中建立巢狀範本
編輯、更新和刪除範本
在 Dreamweaver 中匯出及匯入 XML 內容
對現有的文件套用或移除範本
編輯 Dreamweaver 範本的內容
Dreamweaver 中範本標籤的語法規則
設定範本區域的標示偏好設定
使用 Dreamweaver 範本的好處
行動裝置和多螢幕
建立媒體查詢
為行動裝置變更頁面方向
使用 Dreamweaver 為行動裝置建立網頁用程式
動態網站、網頁和網站表單
了解網頁用程式
設定您的電腦以進行應用程式開發
疑難排解資料庫連線
在 Dreamweaver 中移除連線 Script
設計動態網頁
動態內容來源總覽
定義動態內容的來源
將動態內容新增至頁面
在 Dreamweaver 中變更動態內容
顯示資料庫記錄
在 Dreamweaver 中提供即時資料及進行疑難排解
在 Dreamweaver 中新增自訂伺服器行為
使用 Dreamweaver 建立表單
使用表單向使用者收集資訊
在 Dreamweaver 中建立及啟用 ColdFusion 表單
建立網站表單
加強對 HTML5 表單元素的支援
使用 Dreamweaver 開發表單
以視覺化方式建立應用程式
在 Dreamweaver 中建立主要和細節頁面
建立搜尋及結果頁面
建立記錄插入頁面
在 Dreamweaver 中建立更新記錄頁面
在 Dreamweaver 中建立記錄刪除頁面
在 Dreamweaver 中使用 ASP 命令修改資料庫
建立註冊頁面
建立登入頁面
建立唯有授權用戶才能存取的頁面
使用 Dreamweaver 保護 ColdFusion 中的資料夾
在 Dreamweaver 中使用 ColdFusion 組件
測試、預覽和發佈網站
預覽頁面
在多部裝置上預覽 Dreamweaver 網頁
測試 Dreamweaver 網站
疑難排解
已修正的問題
已知問題
了解如何使用即時檢視或程式碼檢視，或者從 PSD 檔案中擷取文字和相關聯的屬性，來新增文字並設定格式。
新增文字到文件
若要將文字新增到 Dreamweaver 文件中，您可以直接在「文件」視窗中輸入文字，或是剪下及貼上文字。您也可以從其他文件匯入文字。
如果您要將文字貼到 Dreamweaver 文件中，您可以使用「貼上」或「貼上特殊效果」命令。「貼上特殊效果」命令讓您能以不同的方式指定貼上文字的格式。例如，如果您要將文字從格式化的 Microsoft Word 文件貼到 Dreamweaver 文件中，但是想要去除所有的格式，以便套用您自己的 CSS 樣式表到貼上的文字，您可以在 Word 中選取文字、將文字複製到剪貼簿，然後使用「貼上特殊效果」命令選取讓您貼上純文字的選項。
使用「貼上」命令貼上其他應用程式的文字時，您可以設定貼上偏好設定為預設選項。
註解：
Control+V (Windows) 和 Command+V (Macintosh) 只能在「程式碼檢視」中貼上純文字 (無格式)。
請執行下列其中一項作業，將文字加入至文件：
使用 Extract 面板從您的 PSD 構圖擷取文字。如需詳細資訊，請參閱從 PSD 檔案複製文字。
直接在「文件」視窗中鍵入文字。
從其他應用程式複製文字、切換到 Dreamweaver、將插入點置於「文件」視窗的「設計」檢視中，然後再選取「編輯 > 貼上」或「編輯 > 貼上特殊效果」。
選取「編輯＞貼上特殊效果」時，您可以選取數種貼上格式選項。
您也可以利用下列的鍵盤快速鍵來貼上文字：
貼上選項
鍵盤快速鍵
貼上
Control+V (Windows)
Command+V (Macintosh)
貼上特殊效果
Control+Shift+V (Windows)
Command+Shift+V (Macintosh)
插入特殊字元
有些特殊字元在 HTML 中是由名稱或數字來表示，稱為實體。HTML 包含了如版權符號 (©)、& 符號 (&) 和註冊商標符號 (®) 這類字元的實體名稱。每個實體都有一個名稱 (例如 —) 和數值表示法 (例如 —)。
註解：
HTML 會在程式碼中使用角括號 (<>)，但是您有時會需要表示大於或小於之類的特殊字元，而不希望 Dreamweaver 將它們解譯為程式碼。在這種情況下，請使用 > 來表示大於 (>)；使用 < 來表示小於 (<)。
可惜的是，許多舊版的瀏覽器不能正確地顯示許多命名的實體。
在「文件」視窗中，將插入點置於您要插入特殊字元的地方。
請執行下列其中一項作業：
從「插入 > HTML > 字元」中，選取字元名稱。
在「插入」面板的「HTML」類別中，按一下「字元」選項，然後從彈出式選單中選取字元。
註解：
有許多其他特殊字元可以使用；若要選取其中之一，請選取「插入 > HTML > 字元 > 其他...」，或按一下「插入」面板中「HTML」類別的「字元」按鈕，然後選取「其他字元」選項。從「插入其他字元」對話方塊中選取字元，然後按一下「確定」。
在字元之間加入空白
HTML 只允許字元之間有一個空白；若要在文件中加入額外空白，您必須插入不斷行空白。您可以設定偏好設定，在文件中自動加入不斷行空白。
插入不斷行空白
請執行下列其中一項作業：
選取「插入＞HTML＞特殊字元＞不斷行空白」。
按 Control + Shift + 空白鍵 (Windows) 或 Option + 空白鍵 (Macintosh)。
從「插入」面板中，選取「HTML」，按一下「字元」按鈕，然後選取「不斷行空白」選項。
設定偏好設定以新增不斷行空白
選取「編輯 > 偏好設定」(Windows)
或「Dreamweaver > 偏好設定」(Macintosh)。
在「一般」類別中，請確定已勾選「允許多個連續空白」。
加入段落間距
Dreamweaver 的運作方式和許多文書處理應用程式類似：按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 就可以建立新段落。網頁瀏覽器會自動在段落之間插入間隔的空白行。您可以在段落之間插入斷行符號，加入單行間距。
新增段落標記
按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
新增斷行
請執行下列其中一項作業：
按 Shift + Enter 鍵 (Windows) 或 Shift + Return 鍵 (Macintosh)。
選取「插入＞HTML＞特殊字元＞斷行」。
從「插入」面板中，選取「HTML」，按一下「字元」按鈕，然後選取「斷行」。
建立項目清單和編號清單
您可以在「文件」視窗中從現有的文字或輸入的新文字，建立編號 (有順序) 清單、項目 (無順序) 清單和定義清單。
「定義」清單不使用類似項目點或編號的開頭字元，通常是使用於詞彙或描述。這些清單也可以是巢狀結構。巢狀結構清單指包含其他清單的清單。例如，您可以將編號清單或項目清單，以巢狀結構置於另一個編號清單內。
您可以使用「清單屬性」對話方塊，設定整個清單或個別清單項目的外觀。您可以設定數字樣式、重設編號，或者設定個別清單項目或整個清單的項目符號樣式選項。
建立新的清單
在 Dreamweaver 文件中，將插入點放在您要新增清單的地方，然後執行下列其中一項作業：
在 HTML 屬性檢視窗中，按一下「編號清單」或「清單項目」。
選取「插入 > HTML」，然後選取所要的清單類型 -「項目清單」或「編號清單」。
指定的清單項目的開頭字元便會出現在「文件」視窗中。
輸入清單項目文字，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 即可建立另一個清單項目。
若要結束這個清單，請按兩次 Enter 鍵 (Windows) 或按兩次 Return 鍵 (Macintosh)。
使用現有文字建立清單
選取要放到清單中的連續段落。
選取「插入 > HTML」，然後選取「項目清單」、「編號清單」或「清單項目」。
建立巢狀結構清單
選取您要建立為巢狀結構的清單項目。
以滑鼠右鍵按一下並選取「清單 > 縮排」。
Dreamweaver 便會縮排文字，並且用原始清單的 HTML 屬性建立另一個清單。
請按照上述使用的相同程序，將新的清單類型或樣式套用到縮排的文字。
設定整個清單的清單屬性
請在「文件」視窗中至少建立一個清單項目。新的樣式將會自動套用到您新增到清單的額外項目。
將插入點置於清單項目的文字中，以滑鼠右鍵按一下並選取「清單 > 屬性」。系統便會顯示「清單屬性」對話方塊。
設定您要用來定義清單的選項：
清單類型
指定清單屬性，而「清單項目」則是指定清單中的個別項目。請使用彈出式選單來選取項目清單、編號清單、目錄清單或選單清單。對話方塊會依據您選取的「清單類型」顯示不同的選項。
樣式
決定使用於編號清單或項目清單的數字或項目符號的樣式。除非您對清單中的項目指定了新樣式，否則清單中所有項目都會使用這種樣式。
計算起始值
設定編號清單中第一個項目的值。
請按一下「確定」來設定選項。
設定清單項目的清單屬性
在「文件」視窗中，將插入點置於您要設定的清單項目文字中。
以滑鼠右鍵按一下並選取「清單 > 屬性」。
在「清單項目」下，設定您要定義的選項：
新增樣式
指定所選取清單項目的樣式。「新增樣式」選單中的樣式與「清單類型」選單中顯示的清單類型相關。例如，如果「清單項目」選單顯示的是「項目清單」，則「新增樣式」選單中只會出現項目符號選項。
重設計算數目
設定用來編號清單項目的特定數目。
請按一下「確定」來設定選項。
搜尋和取代文字
如需有關尋找和取代文字的詳細資訊，請參閱「尋找和取代文字」。
定義縮寫和首字縮寫
HTML 提供的標籤可讓您定義在頁面中供搜尋引擎、拼字檢查程式、語言翻譯程式或語音合成器使用的縮寫和首字縮寫。例如，您可能要在頁面中指定縮寫 ME 表示機械工程師，或使用首字縮寫 WHO 表示世界衛生組織。
在頁面的文字中選取縮寫或首字縮寫。
選取「插入 > HTML > 文字物件 > 縮寫」，或選取「插入 > HTML > 文字物件 > 首字縮寫」。
輸入首字縮寫或縮寫的完整文字。
輸入語言，例如 en 表示英文、de 表示德文、it 表示義大利文。
設定複製和貼上偏好設定
使用「編輯 > 貼上」來貼上其他應用程式的文字時，您可以設定特殊的貼上偏好設定為預設選項。例如，如果您總是要將文字貼成純文字，或含有基本格式的文字，您可以在「複製/貼上偏好設定」對話方塊中設定預設選項。
註解：
如果您要將文字貼到 Dreamweaver 文件中，您可以使用「貼上」或「貼上特殊效果」命令。「貼上特殊效果」命令讓您能以不同的方式指定貼上文字的格式。例如，如果您要將文字從格式化的 Microsoft Word 文件貼到 Dreamweaver 文件中，但是想要去除所有的格式，以便套用您自己的 CSS 樣式表到貼上的文字，您可以在 Word 中選取文字、將文字複製到剪貼簿，然後使用「貼上特殊效果」命令選取讓您貼上純文字的選項。
註解：
在「複製/貼上偏好設定」對話方塊中設定的偏好設定，只會套用至貼到「設計檢視」中的資料。
選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
按一下「複製/貼上」類別。
設定下列選項，然後按一下「確定」。
純文字
可讓您貼上未格式化的文字。如果原始文字已經格式化，所有格式 (包括斷行和段落) 都會移除。
具有結構的文字
可讓您貼上保有結構的文字，但是不會保留基本格式。 例如，您可以貼上文字並且保留段落、清單和表格的結構，但是不保留粗體、斜體和其他格式。
具有結構與基本格式的文字
可讓您同時貼上具有結構和簡易 HTML 格式的文字 (例如，段落和表格以及以 b、i、u、strong、em、hr、abbr 或 acronym 標籤格式化的文字)。
具有結構與完整格式的文字
可讓您貼上保留所有結構、HTML 格式和 CSS 樣式的文字。
註解：
「完整格式」選項無法保留來自外部樣式表的 CSS 樣式，如果做為貼上來源的應用程式在貼到剪貼簿時沒有保留樣式，則此選項也無法保留樣式。
保留斷行
可讓您保留所貼上文字的斷行。 如果您已選取「純文字」，就無法使用這個選項。
清理 Word 段落間距
如果已選取「具有結構的文字」或「具有結構與基本格式的文字」，並且想要在貼上文字時清除段落之間的額外間距，請選取這個選項。
將智慧型引號轉換為直線引號可將智慧型引號轉換為直線引號。
更多類似主題 教學課程影片：如何處理 HTML 文字 從 PSD 檔案擷取文字 設定 CSS 屬性 檢視程式碼 規則運算式