請閱讀本文,了解 Dreamweaver 如何支援各種用來建立網站的不同語言。

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

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

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

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

Dreamweaver 支援的程式設計語言

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

  • HTML
  • PHP
  • XHTML
  • CSS
  • JavaScript
  • ColdFusion 標記語言 (CFML)

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

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

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

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

<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/>。下列都是空元素:areabasebasefontbrcolframehrimginputisindexlinkmetaparam

為了能與不具備 XML 能力的瀏覽器回溯相容,在 /> 前面必須要有一個空格 (例如,<br /> 而不是 <br/>)。

在產生的程式碼中 (以及在清理 XHTML 時),在空標籤結尾斜線前面插入有空格的空元素。

屬性不能最小化,例如,<td nowrap> 是無效的,正確的格式應該是 <td nowrap="nowrap">

這會影響下列屬性:checkedcompactdeclaredeferdisabledismapmultiplenoresizenoshadenowrapreadonlyselected

在產生的程式碼中及清理 XHTML 時插入屬性-值配對。

注意:如果 HTML 瀏覽器不支援 HTML 4,可能就無法解譯以完整格式出現的 Boolean 屬性。

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

在產生的程式碼中 (以及在清理 XHTML 時),用引號括住屬性值。

下列元素必須具有 id 屬性以及 name 屬性:aappletformframeiframeimgmap。例如,<a name="intro">Introduction</a> 是無效的,正確格式應該是

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

在 Dreamweaver 產生的程式碼中及清理 XHTML 時,只要 name 屬性是由「屬性」檢視窗所設定的,就將 nameid 屬性設定為相同的值。

在具有列舉類型值的屬性中,這些值必須是小寫。

列舉類型值是特定允許值清單中的值;例如,align 屬性具有下列的允許值:centerjustifyleftright

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

所有 script 和 style 元素都必須有 type 屬性。

(script 元素的 type 屬性,從 HTML 4 開始已成為必要項,因為不再支援 language 屬性)。

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

所有的 imgarea 元素都必須具有 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 的程式碼撰寫環境中編輯它。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策