關於在 Dreamweaver 中撰寫程式碼

上次更新時間 2021年4月27日

了解 Dreamweaver 如何支援用來建立網站的各種程式碼撰寫語言。

最受歡迎、用來設計與開發完整實用網站的程式設計語言為 HTML、HTML5 和 CSS (適用於前端),以及 PHP、JavaScript、Java 和 jQuery (適用於後端)。

您可以使用 CSS 來設計整個網站外觀 (例如字體和顏色)。 然後便可使用 HTML 將影像、文字、視訊、表單及其他內容片段一起插入黏結網頁中。

您可以一併使用 CSS 和 HTML 來建立靜態網站。 不過,大部分網站需要特定方式的互動 (例如要求客戶填寫表單或進行付款) 和用來儲存所有網站資料的資料庫。

若要建立這些通訊的後端通道,您需要可與資料庫通訊的伺服器端程式設計語言 (例如 PHP)。

Dreamweaver 支援的程式設計語言

除了文字編輯功能外,Adobe Dreamweaver 還提供各種功能 (例如代碼提示) 來協助您使用下列語言進行編碼:

  • HTML
  • PHP
  • CSS
  • JavaScript

其他語言(例如 Perl)不受 Dreamweaver 中特定語言程式設計功能的支援;例如,您可以建立和編輯 Perl 檔案,但程式碼提示不適用於該語言。

程式碼自動修改

您可以設定選項,指示 Dreamweaver 根據您指定的條件自動清理您的 手寫程式碼。不過,除非已啟用代碼重新編寫選項或您執行變更代碼的動作,否則永遠不會重新編寫您的代碼。例如,除非您使用「套用來源 格式」指令,否則 Dreamweaver 不會變更您的空白字元 或變更屬性的大小寫。

預設會啟用一些程式碼改寫選項。

Dreamweaver 中的 Roundtrip HTML 功能可讓 您在文字型 HTML 編輯器和 Dreamweaver 之間來回移動文件,對文件原始 HTML 來源程式碼的內容和結構幾乎沒有影響。這些功能表包括下列項目:

  • 使用協力廠商的文字編輯器來編輯目前的文件。

  • 依預設,即使 程式碼無效,Dreamweaver 也不會對在其他 HTML 編輯器中建立或編輯的程式碼進行變更,除非您啟用程式碼重新編寫選項。

  • 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">

標準文件必須具有 headtitlebody 結構元素。框架組文件 必須具有 headtitleframeset 結構 元素。

在標準文件中,包括 headtitlebody 元素。在框架組文件中,包括 headtitleframeset 元素。

文件中的所有元素都必須以適當的巢狀結構處理:

<p>這 是一個<i>錯誤的範例。</p></i> <p>這是 一個<i>良好的範例。</i></p>

產生正確巢狀結構的程式碼,並且在 清理 XHTML 時,修正不是由 Dreamweaver 產生的 程式碼中的巢狀結構。

所有元素和屬性名稱都必須是 小寫。

強制 HTML 元素和屬性名稱 在其產生的 XHTML 程式碼中為小寫,以及在清理 XHTML 時為小寫,不論您的標記和屬性大小寫偏好設定為何。

每個元素都必須有結束標記,除非 在 DTD 中宣告為 EMPTY。

在其產生的程式碼中插入結束標記, 以及在清理 XHTML 時插入。

空白元素必須有結束標記, 或開始標記必須以 /> 結尾。例如,<br> 無效; 正確的形式是 <br></br><br/>。 以下是空白元素:areabasebasefontbrcolframehrimginputisindexlinkmeta, 以及 param

為了與不支援 XML 的瀏覽器 向後相容,在 /> 前必須有空格 (例如 <br />,而非 <br/>)。

在其產生的程式碼中,於空白標記的結束斜線前插入空格, 以及在清理 XHTML 時插入。

屬性不能被縮減;例如,<td nowrap> 無效; 正確的形式是 <td nowrap="nowrap">

這 會影響以下屬性:checkedcompactdeclaredeferdisabledismapmultiplenoresizenoshadenowrapreadonly, 以及 selected

在其產生的程式碼中插入完整的屬性值對, 以及在清理 XHTML 時插入。

注意: 如果 HTML 瀏覽器不支援 HTML 4,當這些布林屬性以完整形式出現時, 可能無法正確解釋這些屬性。

所有屬性值都必須用 引號括住。

在其產生的程式碼中為屬性值 加上引號,以及在清理 XHTML 時加上引號。

以下元素除了必須有 name 屬性外, 還必須有 id 屬性:aappletformframeiframeimg, 以及 map。例如,<a name="intro">Introduction</a> 無效; 正確的形式是

<a id="intro">Introduction</a><a id="section1" name="intro"> Introduction</a>

當屬性檢查器設定 name 屬性時, 將 nameid 屬性設定為相同的值, 在 Dreamweaver 產生的程式碼中,以及在清理 XHTML 時。

對於枚舉類型值的屬性, 值必須是小寫。

枚舉類型值 是來自指定允許值清單的值;例如, align 屬性有以下允許值:centerjustifyleft, 以及 right

在其產生的程式碼中強制枚舉類型值為小寫, 以及在清理 XHTML 時強制為小寫。

所有指令碼和樣式元素都必須有 type 屬性。

(自 HTML 4 起,language 屬性已被淘汰,因此 script 元素的 type 屬性 是必要的。)

在其生成的程式碼中設定 script 元素的 typelanguage 屬性, 以及 style 元素的 type 屬性, 並在清理 XHTML 時進行設定。

所有 imgarea 元素 都必須具有 alt 屬性。

在其生成的程式碼中設定這些屬性,並在清理 XHTML 時報告遺失的 alt 屬性。

規則運算式

規則運算式是描述 文字中字元組合的圖樣。在您的程式碼搜尋中使用它們 來協助描述概念,例如以「var」開頭的行以及 包含數字的屬性值。

下表列出規則運算式中的特殊字元、 其意義和使用範例。若要搜尋包含 表格中其中一個特殊字元的文字,請在特殊字元前加上反斜線來轉義該字元。例如,若要在片語 some conditions apply* 中搜尋實際的星號,您的搜尋圖樣可能如下所示:apply\*。如果您沒有跳脫星號,將會找到所有「apply」的出現次數(以及任何「appl」、「applyy」和「applyyy」),而不僅僅是後面跟著星號的項目。

字元

比對

範例

^

輸入或行的開頭。

^T 符合「This good earth」中的「T」,但不符合「Uncle Tom's Cabin」中的「T」

$

輸入或行的結尾。

h$ 符合「teach」中的「h」 但不符合「teacher」中的「h」

*

前面的字元出現 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 的程式碼環境中編輯它。