了解 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"> |
標準文件必須具有 head、title 和 body 結構元素。框架組文件 必須具有 head、title 和 frameset 結構 元素。 |
在標準文件中,包括 head、title 和 body 元素。在框架組文件中,包括 head、title 和 frameset 元素。 |
文件中的所有元素都必須以適當的巢狀結構處理: <p>這 是一個<i>錯誤的範例。</p></i> <p>這是 一個<i>良好的範例。</i></p> |
產生正確巢狀結構的程式碼,並且在 清理 XHTML 時,修正不是由 Dreamweaver 產生的 程式碼中的巢狀結構。 |
所有元素和屬性名稱都必須是 小寫。 |
強制 HTML 元素和屬性名稱 在其產生的 XHTML 程式碼中為小寫,以及在清理 XHTML 時為小寫,不論您的標記和屬性大小寫偏好設定為何。 |
每個元素都必須有結束標記,除非 在 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,當這些布林屬性以完整形式出現時, 可能無法正確解釋這些屬性。 |
所有屬性值都必須用 引號括住。 |
在其產生的程式碼中為屬性值 加上引號,以及在清理 XHTML 時加上引號。 |
以下元素除了必須有 name 屬性外, 還必須有 id 屬性:a、applet、form、frame、iframe、img, 以及 map。例如,<a name="intro">Introduction</a> 無效; 正確的形式是 <a id="intro">Introduction</a> 或 <a id="section1" name="intro"> Introduction</a>。 |
當屬性檢查器設定 name 屬性時, 將 name 和 id 屬性設定為相同的值, 在 Dreamweaver 產生的程式碼中,以及在清理 XHTML 時。 |
對於枚舉類型值的屬性, 值必須是小寫。 枚舉類型值 是來自指定允許值清單的值;例如, align 屬性有以下允許值:center、justify、left, 以及 right。 |
在其產生的程式碼中強制枚舉類型值為小寫, 以及在清理 XHTML 時強制為小寫。 |
所有指令碼和樣式元素都必須有 type 屬性。 (自 HTML 4 起,language 屬性已被淘汰,因此 script 元素的 type 屬性 是必要的。) |
在其生成的程式碼中設定 script 元素的 type 和 language 屬性, 以及 style 元素的 type 屬性, 並在清理 XHTML 時進行設定。 |
所有 img 和 area 元素 都必須具有 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 的程式碼環境中編輯它。