使用手冊 取消

關於在 Dreamweaver 中撰寫程式碼

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站

 

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

標準的文件必須具有 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 的程式碼撰寫環境中編輯它。

Adobe 標誌

登入您的帳戶