- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
了解 Dreamweaver 如何支援用來建立網站的各種程式碼撰寫語言。
最受歡迎、用來設計與開發完整實用網站的程式設計語言為 HTML、HTML5 和 CSS (適用於前端)，以及 PHP、JavaScript、Java 和 jQuery (適用於後端)。
您可以使用 CSS 來設計整個網站外觀 (例如字體和顏色)。然後便可使用 HTML 將影像、文字、視訊、表單及其他內容片段一起插入黏結網頁中。
您可以一併使用 CSS 和 HTML 來建立靜態網站。不過，大部分網站需要特定方式的互動 (例如要求客戶填寫表單或進行付款) 和用來儲存所有網站資料的資料庫。
若要建立這些通訊的後端通道，您需要可與資料庫通訊的伺服器端程式設計語言 (例如 PHP)。
Dreamweaver 支援的程式設計語言
除了文字編輯功能外，Adobe Dreamweaver 還提供各種功能 (如程式碼提示)，協助您使用下列語言來撰寫程式碼：
- HTML
- PHP
- CSS
- JavaScript
Dreamweaver 中的語言特定程式碼功能並不支援其他像是 Perl 這樣的語言；您雖然可以建立和編輯 Perl 檔案，但是程式碼提示功能就不適用於該語言。
程式碼自動修改
您可以設定選項，以指示 Dreamweaver 按照您所指定的準則自動清理手寫的程式碼。除非您啟用了改寫程式碼選項，或是您所執行的動作變更了程式碼，否則，Dreamweaver 絕不會改寫您的程式碼。例如，除非您使用「套用原始碼格式」命令，否則 Dreamweaver 不會更改您保留的空白，也不會變更屬性的大小寫。
預設會啟用一些程式碼改寫選項。
Dreamweaver 中的「交互 HTML」功能，可讓您在文字 HTML 編輯器和 Dreamweaver 之間來回移動您的文件，而不太會 (或根本不會) 影響文件原始 HTML 原始碼的內容和結構。這些功能表包括下列項目：
使用協力廠商的文字編輯器來編輯目前的文件。
依預設，除非您啟用程式碼改寫選項，否則即便在其他 HTML 編輯器所建立或編輯的程式碼是無效的，Dreamweaver 都不會變更該程式碼。
Dreamweaver 不會變更它無法辨識的標籤 (包括 XML 標籤在內)，因為它沒有用來判斷這些標籤的準則。如果無法辨識的標籤與其他標籤發生重疊 (例如，<MyNewTag><em>text</MyNewTag></em>)，Dreamweaver 會將它標記為錯誤，但不會改寫程式碼。
或者，您也可以設定 Dreamweaver，讓它在「程式碼」檢視中以黃色標示無效的程式碼。當您選取反白標示的區段時，「屬性」檢視窗便會顯示如何修正這項錯誤的資訊。
XHTML 程式碼
Dreamweaver 會以符合多數 XHTML 需求的方式產生新的 XHTML 程式碼，並且清理現有的 XHTML 程式碼。此外，也為您提供了符合其餘少數 XHTML 需求的工具。
這些需求當中有一部分也是各種不同版本的 HTML 所需要的。
下表描述 Dreamweaver 能自動符合的 XHTML 需求：
XHTML 需求 |
Dreamweaver 執行的動作 |
|---|---|
文件中的根元素前面必須要有 DOCTYPE 宣告，而且這個宣告必須參考 XHTML 的三種「文件類型定義」(DTD) 檔案 (嚴格、過渡或頁框組) 中的其中一種。 |
新增 XHTML DOCTYPE 到 XHTML 文件： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 或者，如果 XHTML 文件具有頁框組： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
文件的根元素必須為 html，而且這個 html 元素必須指定 XHTML 命名空間。 |
將 namespace 屬性新增到 html 元素，如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> |
標準的文件必須具有 head、title 和 body 等結構元素。頁框組文件必須具有 head、title 和 frameset 等結構元素。 |
在標準的文件中，包括 head、title 和 body 等元素。在頁框組文件中，包括 head、title 和 frameset 等元素。 |
文件中的所有元素都必須以適當的巢狀結構處理： <p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p> |
產生正確的巢狀結構程式碼，並且在清理 XHTML 時，更正程式碼中不是由 Dreamweaver 產生的巢狀結構。 |
所有元素和屬性名稱都必須小寫。 |
在產生的 XHTML 程式碼中 (以及在清理 XHTML 時)，強制 HTML 元素和屬性名稱成為小寫，不論標籤和屬性的大小寫偏好設定為何。 |
每個元素都必須具有結束標籤，除非它在 DTD 中宣告為 EMPTY。 |
在產生的程式碼中 (以及在清理 XHTML 時) 插入結束標籤。 |
空元素必須具有結束標籤，否則開啟標籤必須以 /> 結束。例如，<br> 是無效的，正確的格式應該是 <br></br> 或 <br/>。下列都是空元素：area、base、basefont、br、col、frame、hr、img、input、isindex、link、meta 和 param。 為了能與不具備 XML 能力的瀏覽器回溯相容，在 /> 前面必須要有一個空格 (例如，<br /> 而不是 <br/>)。 |
在產生的程式碼中 (以及在清理 XHTML 時)，在空標籤結尾斜線前面插入有空格的空元素。 |
屬性不能最小化，例如，<td nowrap> 是無效的，正確的格式應該是 <td nowrap="nowrap">。 這會影響下列屬性：checked、compact、declare、defer、disabled、ismap、multiple、noresize、noshade、nowrap、readonly 和 selected。 |
在產生的程式碼中及清理 XHTML 時插入屬性-值配對。 注意：如果 HTML 瀏覽器不支援 HTML 4，可能就無法解譯以完整格式出現的 Boolean 屬性。 |
所有的屬性值都必須以引號括住。 |
在產生的程式碼中 (以及在清理 XHTML 時)，用引號括住屬性值。 |
下列元素必須具有 id 屬性以及 name 屬性：a、applet、form、frame、iframe、img 和 map。例如，<a name="intro">Introduction</a> 是無效的，正確格式應該是 <a id="intro">Introduction</a> 或 <a id="section1" name="intro"> Introduction</a>。 |
在 Dreamweaver 產生的程式碼中及清理 XHTML 時，只要 name 屬性是由「屬性」檢視窗所設定的，就將 name 和 id 屬性設定為相同的值。 |
在具有列舉類型值的屬性中，這些值必須是小寫。 列舉類型值是特定允許值清單中的值；例如，align 屬性具有下列的允許值：center、justify、left 和 right。 |
在產生的程式碼中 (以及在清理 XHTML 時)，強制列舉類型值成為小寫。 |
所有 script 和 style 元素都必須有 type 屬性。 (script 元素的 type 屬性，從 HTML 4 開始已成為必要項，因為不再支援 language 屬性)。 |
在產生的程式碼中以及在清理 XHTML 時，設定 script 元素的 type 和 language 屬性，以及 style 元素中的 type 屬性。 |
所有的 img 和 area 元素都必須具有 alt 屬性。 |
在產生的程式碼中以及在清理 XHTML 時，請設定這些屬性，並且報告缺少的 alt 屬性。 |
規則運算式
規則運算式是描述文字中字元組合的模式。請在程式碼搜尋中善加運用，以協助描述一些像是以「var」開頭的行以及含有數字的屬性值之類的概念。
下表列出規則運算式中的一些特殊字元、它們的意義以及使用方法的範例。若要搜尋含有表格所列特殊字元之一的文字，請在特殊字元前面加上反斜線，將它表示為「逸出字元」。例如，假設要在片語 some conditions apply* 中搜尋實際的星號，搜尋模式應該像是這樣：apply\*。如果您不將星號表示為逸出字元，您就會找到所有「apply」(以及任何「appl」、「applyy」和「applyyy」) 出現的地方，而不是只找到後面接著星號的「apply」。
字元 |
比對 |
範例 |
|---|---|---|
^ |
輸入或行的開頭。 |
^T 會找出「This good earth」中符合的「T」，但是在「Uncle Tom’s Cabin」中則找不到符合的項目 |
$ |
輸入或行的結尾。 |
h$ 會找出「teach」中符合的「h」，但是在「teacher」中則找不到符合的項目 |
* |
前面的字元出現 0 次以上。 |
um* 會在「rum」中找到符合的「um」、在「yummy」中找到符合的「umm」，以及在「huge」中找到符合的「u」 |
+ |
前面的字元出現 1 次以上。 |
um+ 會在「rum」中找到符合的「um」、在「yummy」中找到符合的「umm」，但是在「huge」中找不到符合的項目 |
? |
前面的字元最多出現一次 (表示這個字元是選擇性的)。 |
st?on 會在「Johnson」中找到符合的「son」、在「Johnston」中找到符合的「ston」，但是在「Appleton」或「tension」中找不到任何符合的項目 |
. |
除了新行以外的任何單一字元。 |
.an 會在片語「bran muffins can be tasty」中找到符合的「ran」和「can」 |
x|y |
非 x 即 y。 |
FF0000|0000FF 會在 bgcolor=”#FF0000” 中找到符合的「FF0000」，並且在 font color=”#0000FF” 中找到符合的「0000FF」 |
{n} |
前面的字元必須剛好出現 n 次。 |
o{2} 會在「loom」中找到符合的「oo」、在「mooooo」中找到前面兩個「o」，但是在「money」中則找不到任何符合的項目 |
{n,m} |
前面的字元至少出現 n 次，最多出現 m 次。 |
F{2,4} 會在「#FF0000」中找到符合的「FF」，以及在「#FFFFFF」中找到前面四個「F」 |
[abc] |
方括弧內的任何一個字元。用連字符號可以指定字元的範圍 (例如，[a-f] 就相當於 [abcdef])。 |
[e-g] 會在「bed」中找到符合的「e」、在「folly」中找到符合的「f」，以及在「guard」中找到符合的「g」 |
[^abc] |
方括弧內未包含的任何字元。用連字符號可以指定字元的範圍 (例如，[^a-f] 就相當於 [^abcdef])。 |
[^aeiou] 一開始會在「orange」中找到符合的「r」，在「book」中找到符合的「b」，以及在「eek!」中找到符合的「k」 |
\b |
單字界限 (例如空格或換行字元)。 |
\bb 會在「book」中找到符合的「b」，但是在「goober」或「snob」中則找不到任何符合的項目 |
\B |
這是單字界限外的任何項目。 |
\Bb 會在「goober」中找到符合的「b」，但是在「book」中則找不到任何符合的項目 |
\d |
任何數字字元。相當於 [0-9]。 |
\d 會在「C3PO」中找到符合的「3」，以及在「apartment 2G」中找到「2」 |
\D |
任何非數字字元。相當於 [^0-9]。 |
\D 會在「900S」中找到符合的「S」，以及在「Q45」中找到「Q」 |
\f |
換頁字元。 |
|
\n |
換行符號。 |
|
\r |
換行字元。 |
|
\s |
任何單一的空白字元，包括空格、Tab 字元、換頁字元或換行符號。 |
\sbook 會在「blue book」中找到符合的「book」，但是在「notebook」中則找不到任何符合的項目 |
\S |
任何單一的非空白字元。 |
\Sbook 會在「notebook」中找到符合的「book」，但是在「blue book」中則找不到任何符合的項目 |
\t |
Tab 字元。 |
|
\w |
任何英數字元，包括底線。相當於 [A-Za-z0-9_]。 |
b\w* 會在「the barking dog」中找到符合的「barking」，以及在「the big black dog」中找到符合的「big」和「black」 |
\W |
任何非英數字元。相當於 [^A-Za-z0-9_]。 |
\W 會在「Jake & Mattie」中找到符合的「&」，以及在「100%」中找到符合的「%」 |
Control+Enter 鍵或 Shift+Enter 鍵 (Windows)；或者，Control+Return 或 Shift+Return 或 Command+Return 鍵 (Macintosh) |
Return 字元。進行這種搜尋時，如果不使用規則運算式，請取消選取「忽略空白差異」選項。請注意，這樣會符合特定的字元，而不是一般的斷行符號；例如，它不符合 <br> 標籤或 <p> 標籤。Return 字元在「設計」檢視中會顯示為空白，而不是斷行。 |
請使用小括號，將規則運算式中稍後要參考的群組分開。接著，再於「取代為」欄位中使用 $1、$2、$3 等等，來參考第一個、第二個、第三個等等要放在小括號內的群組。
在「尋找」方塊中，若要參考之前在規則運算式中放在小括號內的群組，請使用 \1、\2、\3 等等，而不是 $1、$2、$3。
例如，搜尋 (\d+)\/(\d+)\/(\d+) 並且將它取代為 $2/$1/$3 時，會在以反斜線分隔的日期中，將日和月對調，藉以在美式日期與歐式日期間轉換。
伺服器行為程式碼
當您開發動態網頁，並且從「伺服器行為」面板中選取某個伺服器行為時，Dreamweaver 便會將一個或多個程式碼區塊插入網頁，讓伺服器行為能運作。
如果您手動變更程式碼區塊中的程式碼，便無法再使用像是「繫結」和「伺服器行為」面板來編輯伺服器行為。Dreamweaver 會在頁面程式碼中尋找特定的模式，以便偵測伺服器行為，並且將它們顯示在「伺服器行為」面板中。如果您以任何方式變更程式碼區塊的程式碼，Dreamweaver 就無法再偵測這個伺服器行為，也不會將它顯示在「伺服器行為」面板中。不過，這個伺服器行為仍然存在於頁面中，而且您可以在 Dreamweaver 的程式碼撰寫環境中編輯它。
