了解 Dreamweaver 工作區、您可用的不同檢視和工作區,以及 Dreamweaver 中所有不同的面板和工具列。

Dreamweaver 入門

安裝 Dreamweaver 之後,當您初次啟動應用程式時,螢幕上會出現「快速開始」選單詢問您三個問題,協助您根據需要來個人化您的 Dreamweaver 工作區。

依照您對於這些問題的回應,Dreamweaver 會在「開發人員」工作區或「標準」工作區中開啟,前者是最小化的程式碼為主版面,後者是撰寫程式碼時,內含視覺工具和應用程式內預覽的分割版面。

選擇工作區之後,請選擇想要的顏色主題。然後就可以開始使用了。

註解:

您隨時可以使用「編輯 > 偏好設定」對話方塊,變更這些工作區偏好設定。

改善的首頁畫面

Dreamweaver 中的「首頁」畫面可讓您快速存取最近使用的檔案、檔案類型和初學者範本。

根據您的訂閱狀態,「開始」工作區也可依照需求顯示客製化內容。

Dreamweaver 會在啟動時或無文件開啟時顯示「首頁」畫面。

Dreamweaver 的開始工作區
Dreamweaver 的開始工作區

Dreamweaver 開始體驗中的選項

學習

按一下此畫面中的「學習」即可快速存取 Dreamweaver 教學課程。

快速開始

請在顯示的檔案類型中,按一下其中一種檔案類型,開始在 Dreamweaver 中建立文件。

初學者範本

開啟 Dreamweaver 隨附的其中一個初學者範本。

首頁

按一下「首頁」即可返回開始畫面。

您可以在開始畫面中檢視您最近處理過的檔案。如果您最近沒有使用過任何檔案,這個索引標籤會顯示空白。

您也可以透過此畫面右上角的「搜尋」圖示,使用搜尋功能。當您輸入搜尋查詢時,應用程式就會顯示符合搜尋查詢的最近使用檔案、Creative Cloud 資產、說明連結以及 Stock 影像。

註解:

這個「開始」畫面預設為啟用並會開啟。

如果您不需要這個「開始」畫面,請在「偏好設定 > 一般」對話方塊中取消選取「顯示開始畫面」。

您可以按一下「新建」,開始建立新的 Dreamweaver 檔案。如果您的系統中已有檔案,請按一下「開啟」。如需有關在 Dreamweaver 中建立及開啟文件的詳細資訊,請參閱「建立及開啟檔案」。

工作區概覽

Dreamweaver 工作區可讓您檢視文件和物件屬性。工作區的工具列中也放置了許多最常用的作業選項,因此,您可以快速地變更文件。

Dreamweaver 工作區 (CC)
Dreamweaver 工作區

A. 應用程式列 B. 文件工具列 C. 文件視窗 D. 工作區切換器 E. 面板 F. 程式碼檢視 G. 狀態列 H. 標籤選取器 I. 即時檢視 J. 工具列 

工作區元素總覽

工作區包含下列元素:

應用程式列

橫跨應用程式視窗頂端,並且包含了工作區切換器、選單 (僅限 Windows) 以及應用程式的其他控制項。

文件工具列

包含按鈕,為「文件」視窗 (例如「設計」檢視、「即時」檢視和「程式碼」檢視) 的不同檢視提供選項。

標準工具列

如果要顯示「標準」工具列,請選取「視窗 > 工具列 > 標準」。工具列包含「檔案」和「編輯」選單中常用作業的按鈕:「新增」、「開啟」、「儲存」、「全部儲存」、「列印程式碼」、「剪下」、「複製」、「貼上」、「還原」和「重做」。

工具列

位於應用程式視窗左邊,並包含檢視特有的按鈕。

文件視窗

會在您建立及編輯目前文件時顯示它。

屬性檢視窗

讓您檢視和變更已選取的物件或文字之各種屬性。每個物件都有不同的屬性。

標籤選取器

位於「文件」視窗底部的狀態列中,會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。

面板

協助您監控和修改作品。例如「插入」面板、「CSS 設計工具」面板和「檔案」面板。若要展開某個面板,請按兩下它的索引標籤。

Extract 面板

可讓您上傳及檢視在 Creative Cloud 上的 PSD 檔案。您可以使用此面板,從 PSD 構圖擷取 CSS、文字、影像、字體、顏色、漸層和度量到文件中。

插入面板

包含將各種物件 (如影像、表格和媒體元素) 插入文件中所需的按鈕。每個物件都是片段的 HTML 程式碼,當您將它插入文件時可在其中設定各種屬性。例如,您可以按一下「插入」面板中的「表格」按鈕來插入表格。如果您想要的話,可以利用「插入」選單而非「插入」面板來插入物件。

檔案面板

讓您不論檔案和資料夾是屬於 Dreamweaver 網站或是在遠端伺服器上,都可以管理檔案和資料夾。「檔案」面板也可讓您存取本機磁碟上的所有檔案。如需詳細資訊,請參閱「管理檔案和資料夾」。

片段面板

可讓您在不同的網頁、不同的網站和不同的 Dreamweaver 安裝 (使用同步設定) 中,儲存並重複使用您的程式碼片段。如需詳細資訊,請參閱「利用片段重複使用程式碼」。

CSS 設計工具面板

是 CSS 屬性檢視窗,可讓您以「視覺方式」建立 CSS 樣式、檔案和設定屬性,以及媒體查詢。

註解:

Dreamweaver 提供許多其他的面板、檢視窗和視窗。若要開啟面板、檢視窗和視窗,請使用「視窗」選單。

文件視窗綜覽

「文件」視窗會顯示目前的文件。如果要切換文件的檢視,請使用「文件」工具列上的檢視選項。

您也可以使用「檢視」選單中的「檢視」選項來切換檢視。

即時檢視

以真實的方式來呈現,就像在瀏覽器中看到的文件一樣,並可讓您與文件互動,就像在瀏覽器中一樣。您可以直接在「即時檢視」中編輯 HTML 元素,並可立即在相同檢視中預覽變更。如需有關在即時檢視中編輯的詳細資訊,請參閱「即時檢視中編輯 HTML 元素」。

設計檢視

是一種設計環境,可用來開發視覺頁面版面、視覺編輯及快速應用程式。在這種檢視中,Dreamweaver 會以視覺化表示顯示文件 (類似您在瀏覽器中檢視頁面時所看到的樣子),並且具有完整的編輯功能。

程式碼檢視

是一個手動撰寫程式碼的環境,用來撰寫及編輯 HTML、JavaScript 以及其他各種程式碼。

程式碼 - 程式碼

是分割版的「程式碼」檢視,可讓您透過捲動來同時處理文件的各個不同區段。

程式碼 - 即時

可讓您在單一視窗中同時檢視同一個文件的「程式碼」檢視和「即時」檢視。

程式碼 - 設計

可讓您在單一視窗中同時檢視同一個文件的「程式碼」檢視和「設計」檢視。

即時程式碼

顯示瀏覽器用來執行網頁的實際程式碼,而且當您在「即時」檢視中與網頁互動時,還可以進行動態變更。

當「文件」視窗最大化時 (預設值),「文件」視窗的頂端會出現索引標籤,顯示所有開啟文件的檔案名稱。如果您已進行變更但尚未儲存,Dreamweaver 會在檔案名稱後面顯示星號。

Dreamweaver 也會在文件的索引標籤下方顯示「相關檔案」工具列 (如果您以個別視窗檢視多個文件,則是顯示在文件的標題列下方)。相關文件是與目前的檔案 (例如 CSS 檔案或 JavaScript 檔案) 相關聯的文件。若要在「文件」視窗中開啟其中一個相關檔案,請在「相關檔案」工具列中按一下該檔案的名稱。

在檢視間切換

請使用「文件」工具列在不同檢視之間快速切換。如需詳細資訊,請參閱「文件工具列總覽」。

您也可以使用「檢視」選單中的下列選項在檢視之間切換:

  • 僅程式碼檢視︰選取「程式碼」
  • 分割檢視︰選取「分割」,然後選取任一個分割選項
  • 檢視模式︰在「即時」和「設計」檢視之間切換
  • 切換檢視︰從一個檢視切換到另一個檢視。
使用檢視選單選項切換檢視
使用檢視選單選項切換檢視

重疊顯示、並排顯示或重新排列文件視窗

如果您一次開啟多份文件,則可重疊顯示或並排顯示這些文件。

如果要重疊顯示文件視窗:選取「視窗 > 排列順序 > 重疊顯示」。

如果要並排顯示文件視窗:

  • (Windows) 選取「視窗 > 排列順序 > 水平並排」或「視窗 > 排列順序 > 垂直並排」。
  • (Macintosh) 選取「視窗 > 排列順序 > 並排顯示」。

當您開啟多個檔案時,「文件」視窗會加上標籤。如果要重新排列標籤化的「文件」視窗,請將視窗的標籤拖曳到群組中的新位置。

調整文件視窗大小

狀態列會顯示「文件」視窗的目前尺寸 (以像素為單位)。若要設計擁有特定最佳大小的頁面,您可以將「文件」視窗調整為任何預先決定的大小、編輯這些預先決定的大小或建立新的大小。

當您在「設計」或「即時檢視」中變更了頁面的檢視大小時,只會變更檢視大小的尺寸。文件大小會保持不變。

除了預先決定與自訂的大小外,Dreamweaver 也會列出媒體查詢中指定的大小。當您選取與媒體查詢對應的大小時,Dreamweaver 會使用媒體查詢來顯示頁面。您也可以變更頁面方向,以預覽行動裝置的頁面,在行動裝置中,頁面版面通常會根據裝置握持的方式變更。

如果要調整文件視窗的大小,請從「文件」視窗底部的「視窗大小」彈出式選單中,選取其中一種大小。

文件調整大小選項
文件調整大小選項

顯示出來的視窗大小反映出瀏覽器視窗內不含邊框的尺寸;監視器大小或行動裝置會列在右側。

註解:

如果不需要那麼精準地調整大小,請使用作業系統調整視窗大小的標準方法,如拖曳視窗的右下角。

註解:

(僅適用於 Windows)「文件」視窗中的文件預設為最大化,而且文件在最大化時,您便無法調整其大小。如果要解除文件的最大化狀態,請按一下文件右上角的解除最大化按鈕。

變更視窗大小彈出式選單中所列的值

  1. 從「視窗大小」彈出式選單中選取「編輯大小」。

  2. 在「視窗大小」清單中按一下任一個寬度或高度值,然後輸入新的值。如果只要將「文件」視窗調整為特定寬度 (高度保持不變),請選取高度值並刪除它。

  3. 按一下「描述」方塊以輸入與特定大小相關的描述性文字。

在視窗大小彈出式選單中加入新的大小

  1. 從「視窗大小」彈出式選單中選取「編輯大小」。

    在視窗大小彈出式選單中新增視窗大小
    在視窗大小彈出式選單中新增視窗大小

  2. 在「寬度」欄中最後一個值底下的空白處按一下。

  3. 輸入「寬度」和「高度」的值。

    若只要設定「寬度」或「高度」,只要將其中一個欄位保留空白即可。

  4. 按一下「描述」欄位以輸入與新增之大小相關的描述性文字。

    例如,可以在 800 x 600 像素的監視器項目旁輸入 SVGA 或一般 PC,並在832 x 624 像素的監視器項目旁輸入 17 吋 Mac。大部分的監視器可以調整成各種像素尺寸。

  5. 按一下「套用」,然後關閉對話方塊。

    您的新視窗大小現在可用於「視窗大小」彈出式選單中。

文件工具列總覽

文件」工具列包含的按鈕可讓您快速切換不同的文件檢視。工具列還包含一些常用命令和選項,這些命令和選項都是與檢視文件以及在本機和遠端網站之間傳送文件有關。

文件工具列 (CC)
文件工具列

下列選項出現在「文件」工具列中:

程式碼檢視

只會在「文件」視窗中顯示「程式碼」檢視。

分割檢視

將「文件」視窗分割為「程式碼」和「即時/設計」檢視。設計檢視選項無法供流變格線文件使用。

即時檢視

是互動式預覽,準確地即時呈現 HTML5 專案和更新,在您進行變更時顯示這些變更。您也可以在「即時檢視」中編輯 HTML 元素。「即時」選項旁的下拉式清單可讓您在「即時」與「設計」檢視之間切換。這份下拉式清單無法供流變格線文件使用。

設計檢視

顯示文件,如同用戶在網頁瀏覽器中看到的一樣。

標準工具列總覽

標準工具列

如果要顯示「標準」工具列,請選取「視窗 > 工具列 > 標準」。工具列包含「檔案」和「編輯」選單中常用作業的按鈕:「新增」、「開啟」、「儲存」、「全部儲存」、「列印程式碼」、「剪下」、「複製」、「貼上」、「還原」和「重做」。

瀏覽器導覽工具列總覽

在「即時」檢視中,「瀏覽器導覽」工具列會變成作用中狀態 (您必須先透過選取「視窗 -> 工具列 -> 標準」予以啟用),並且為您顯示目前在「文件」視窗中查看之頁面的位址。「即時」檢視的行為就如同一般瀏覽器,因此即使您瀏覽至本機網站以外的網站 (例如 http://www.adobe.com/tw),Dreamweaver 仍會在「文件」視窗中載入該頁面。

瀏覽器導覽工具列 (CC)
瀏覽器導覽工具列

A. 瀏覽器控制項 B. 位址方塊 

根據預設,在「即時」檢視中,連結不會處於作用中狀態。使用非作用中連結可讓您在「文件」視窗中選取或按一下連結文字,而不會被帶往另一個頁面。如果要在「即時」檢視中測試連結,您可以選取「檢視 > 即時檢視選項 > 跟隨連結 (Ctrl+按一下連結)」或「持續跟隨連結」,以啟用單次點選或持續點選功能。

工具列總覽

工具列會垂直顯示在「文件」視窗左側,而且所有檢視中都會出現 -「程式碼」、「即時」和「設計」。工具列上的按鈕是檢視特有的,而且只有在適用於您正在使用的檢視時才會出現。例如,如果您正在「即時」檢視中工作,則不會顯示「程式碼」檢視特有的選項,例如「格式原始碼」。

自訂工具列

您可以選擇根據需要新增選單選項,或從工具列中移除不需要的選單選項,來自訂這個工具列。

如果要自訂工具列,請執行下列動作:

  1. 按一下工具列中的 ,以開啟「自訂工具列」對話方塊。

    自訂工具列
    自訂工具列

  2. 選取或取消選取您希望工具列提供的選單選項,然後按一下「完成」以儲存您的工具列。

如果要還原預設的工具列按鈕,請按一下「自訂工具列」對話方塊中的「還原預設」。

狀態列總覽

文件」視窗底部的狀態列會提供現在所建立文件的其他資訊。

狀態列 (CC)
狀態列

A. 標籤選取器 B. 輸出面板 C. 程式碼標色 D. 插入及覆寫切換 E. 行號和欄號 

標籤選取器

會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。按一下 <body> 可選取整個文件的內文。若要在標籤選取器中設定標籤的 classID 屬性,請以滑鼠右鍵按一下 (Windows) 或 Control+按一下 (Macintosh) 該標籤,並從快顯選單中選取類別或 ID。

輸出面板

按一下這個圖示會出現「輸出」面板,顯示您文件中錯誤的程式碼。

程式碼標色

(僅適用於「程式碼」檢視)

請從這個彈出式選單中選取任一種程式碼撰寫語言,根據程式設計語言來變更要顯示的程式碼色彩標示。

在插入和覆寫間切換

(僅適用於「程式碼」檢視)

讓您在「程式碼」檢視中工作時,可在「插入」和「覆寫」模式之間切換。

行號和欄號

(僅適用於「程式碼」檢視。)

顯示游標所在的行號和欄號。

屬性檢視窗總覽

屬性檢視窗」(「視窗 > 屬性」) 可讓您檢查及編輯目前所選頁面元素 (如文字或插入的物件) 的最常用屬性。

屬性檢視窗」的內容會隨著選取的元素而不同。例如,如果您選取頁面上的影像,「屬性檢視窗」會變更為顯示影像的屬性 (比如說,若有的話會顯示影像的檔案路徑、影像的寬度和高度、影像周圍的邊框等等)。

屬性檢視窗 (CC)
屬性檢視窗

屬性檢視窗」預設位於工作區的下緣,但是您可以將它解除鎖定,讓它成為工作區中的浮動面板。

註解:

使用「標籤」檢視窗來檢視和編輯與指定的標籤屬性有關的每個屬性。

若要取得特定「屬性」檢視窗的說明,請按一下「屬性」檢視窗右上角的「說明」按鈕,或從「屬性」檢視窗的「選項」選單選取「說明」。

檢視及變更頁面元素的屬性

  1. 選取「文件」視窗中的頁面元素。

    您可能需要展開「屬性」檢視窗,才能檢視所選元素的所有屬性。

  2. 在「屬性」檢視窗中變更任何屬性。

    註解:

    如需有關特定屬性的詳細資訊,請在「文件」視窗中選取元素,然後按一下「屬性」檢視窗右上角的「說明」圖示。

  3. 如果您的變更未立即套用在「文件」視窗中,請使用下列其中一個方法來套用變更:

    • 按一下屬性編輯文字欄位以外的地方。
    • 按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
    • 按 Tab 鍵以切換到其他屬性。

快顯選單

快顯選單會針對與您所使用之物件或視窗相關的最常用命令以及屬性,提供便捷的存取方式。快顯選單只會列出適用於目前選取範圍的命令。

如果要開啟快顯選單,請在「程式碼」檢視中以滑鼠右鍵按一下 (Windows) 或 Ctrl+按一下 (Mac) 程式碼區段,或在「即時」或「設計」檢視中按一下物件。

在 Dreamweaver 中重新排列面板

您可以根據您的需求,自訂所有 Dreamweaver 面板的位置和外觀。

鎖定及解除鎖定面板

  • 若要固定面板,請將面板的標籤拖移到固定區域中,可放在頂端、底部或其他面板之間。
  • 若要固定面板群組,請將面板群組的標題列 (標籤上方的實心空白列) 拖移到固定區域中。
  • 若要移除面板或面板群組,請將面板的標籤或面板群組的標題列拖移出固定區域。您可以將面板拖移到另一個固定區域中,或是將其變成可自由浮動。

移動面板

當您移動面板時,會看見藍色標示的放置區域,那些就是您可以移動面板的區域。例如,您可以在固定區域中,將面板拖移到另一個面板上方或下方的狹窄藍色放置區域中,就可以將面板向上或向下移動。如果是拖移到非放置區域,面板就可以在工作區中自由浮動。

  • 若要移動面板,請拖曳面板的標籤。
  • 若要移動面板群組,請拖曳標題列。

註解:

按住 Ctrl 鍵 (Windows) 或 Command 鍵 (Mac OS) 並同時移動面板,就不會使面板固定。按住 Esc 並同時移動面板即可取消此作業。

新增和移除面板

如果移除固定區域中的所有面板,固定區域就會消失。您可以將面板移到工作區的右邊緣,直到放置區域出現為止,利用這種方式建立固定區域。

  • 如果要移除面板,請用滑鼠右鍵按一下 (Windows) 或按住 Control 並按一下 (Mac) 它的標籤,然後選取「關閉」,或從「視窗」選單將它取消選取。
  • 若要新增面板,請在「視窗」選單中選取面板,並將它固定在您想要的任何位置。

操作面板群組

  • 若要將面板移動到群組中,請將面板的標籤拖移到群組反白標示的放置區域中。
  • 若要重新排列群組中的面板,請將面板的標籤拖移到群組中的新位置。
  • 若要移除群組中的面板,使其可自由浮動,請將面板的標籤拖移到群組外面。
  • 若要移動群組,請拖曳其標題列 (位於標籤上方的區域)。

堆疊浮動面板

如果您將面板拖移到固定區域外而未放入放置區域,該面板即可自由浮動。浮動面板讓您能夠將其定位於工作區中的任何地方。您可以將浮動面板或面板群組堆疊在一起,這樣當您拖曳最頂端的標題列時,就可以讓它們一起移動。

  • 若要堆疊浮動面板,請將面板的索引標籤拖曳到另一個面板底部的放置區域。
  • 若要變更堆疊順序,請將面板的標籤向上或向下拖移。
  • 若要移除堆疊中的面板或面板群組,使其可單獨自由浮動,請將面板的標籤或面板群組的標題列拖移到堆疊外面。

重新調整面板大小

  • 若要將某個面板、面板群組或一疊面板最大化或最小化,請按兩下索引標籤。您也可以按兩下索引標籤區域 (索引標籤旁的空白區域)。
  • 如果要調整面板的大小,請拖曳面板的任一邊。

收合和展開面板圖示

您可以將面板收合為圖示,減少工作區的雜亂。在某些情況下,面板會在預設工作區中收合為圖示。

  • 若要收合或展開某一欄中的所有面板圖示,請按一下固定區域頂端的雙箭頭。
  • 若要展開單一面板圖示,請按一下該圖示。
  • 如果要調整面板圖示的尺寸,只要看到圖示而不看到索引標籤,請調整固定區域的寬度,直到文字出現為止。如果要再次顯示圖示文字請,將固定區域加寬一些。
  • 若要將已展開的面板重新收合為圖示,請按一下面板的標籤、圖示或面板標題列中的雙箭頭。

建立自訂工作區

您可以根據您的需求新增或移除面板,來自訂您的工作區。然後您可以將這些變更儲存到您的工作區,以便稍後從「文件」工具列的「工作區切換器」來存取。

只要將面板的目前大小和位置另存為具名工作區,即使您移動或關閉面板,仍然可以復原該工作區。

如果要儲存自訂工作區:

  1. 選擇「視窗 > 工作區版面 > 新增工作區」。
  2. 輸入工作區的名稱。

工作區已儲存,並且可以在「文件」工具列的工作區切換器中看到。

如果要刪除自訂工作區:

從「應用程式」列的工作區切換器中選取「管理工作區」,以開啟「管理工作區」對話方塊。選取工作區,然後按一下「刪除」。

顯示或切換工作區

從「文件」工具列的工作區切換器中選取工作區。

在多用戶系統中自訂 Dreamweaver

即使在 Windows XP 或 Mac OS X 等多用戶作業系統中,也能配合您的個人需求自訂 Dreamweaver。

Dreamweaver 可防止任何用戶的自訂設定影響任何其他用戶的自訂設定。為了達到這項目標,Dreamweaver 初次在可辨識的任一多用戶作業系統上執行時,此應用程式會建立多種不同設定檔的複本。這些用戶設定檔會儲存在屬於您的資料夾中。

如果您重新安裝或升級 Dreamweaver,Dreamweaver 會自動製作現有用戶設定檔的備份複本,因此,如果您曾手動自訂這些檔案,還是能存取自己所做的變更。

顯示加上索引標籤的文件 (僅限 Mac)

使用索引標籤來識別每份文件,您便可在單一文件視窗中檢視多份文件。您也可以將這些文件顯示為浮動工作區的一部分,在該工作區中每份文件會出現在它自己的視窗中。

在另一個視窗中開啟外框包圍的檔案

Control+按一下索引標籤,然後從快顯選單中選取「移至新視窗」。

變更外框包圍的檔案預設值

  1. 選取「Dreamweaver > 偏好設定」,然後選取「一般」類別。
  2. 選取或取消選取「在索引標籤中開啟文件」,然後按一下「確定」。

當您變更偏好設定時,Dreamweaver 並不會改變目前已開啟的文件顯示方式。但是,在您選取新的偏好設定後,隨後開啟的文件都將依據選取的偏好設定來顯示。

啟動 Dreamweaver 且沒有開啟任何文件時,便會出現「歡迎畫面」。您可以選擇隱藏「歡迎畫面」,並於稍後再顯示它。當隱藏「歡迎畫面」且沒有開啟文件時,「文件」視窗便會是空白的。

常用的 Dreamweaver 面板

您會在 Dreamweaver 中使用許多面板。以下說明一些常用的面板。

插入面板總覽

插入」面板 (「視窗 > 插入」) 包含用於建立和插入物件 (如表格、影像和連結) 的按鈕。這些按鈕組織成幾個類別,您可從頂端的下拉式清單選取所要的類別來進行切換。

插入面板
插入面板

部分類別的按鈕含有彈出式選單。當您從彈出式選單中選取某一選項後,該選項便會成為該按鈕的預設動作。例如,如果您從「字元」按鈕的彈出式選單中選取「斷行」,下次您按一下「字元 」按鈕時,Dreamweaver 就會插入斷行。每當您從彈出式選單中選取新的選項後,按鈕的預設動作就會變更。

插入」面板會以下列類別組織:

HTML

可讓您建立和插入最常使用的 HTML 元素,例如 div 標籤、物件 (例如影像) 和表格。

表單

包含建立表單和插入表單元素所用的按鈕,例如搜尋、月份和密碼。

範本

可讓您將文件儲存為範本,並將特定區域標記為可編輯、選擇性、重複或是可編輯的選擇性區域。

Bootstrap 元件

包含 Bootstrap 組件,可提供導覽、容器、下拉式清單以及更多您可以在互動式專案中使用的項目。

jQuery Mobile

包含用於建置使用 jQuery Mobile 之網站的按鈕。

jQuery UI

可讓您插入 jQuery UI 元素,例如收合式面板、滑桿和按鈕。

最愛

可讓您將最常用的「插入」面板按鈕加以群組並排列組織在一個常用的地方。

註解:

如果您正在使用特定類型的檔案,例如 XML、JavaScript、Java 和 CSS,「插入」面板和「設計」檢視選項會變成灰色,因為您無法在這些程式碼檔案中插入項目。

插入物件

如果要使用「插入」面板插入物件:

  1. 從「插入」面板的「類別」彈出式選單中選取適當的類別。

  2. 請執行下列其中一項作業:

    • 按一下物件按鈕或將按鈕的圖示拖曳到「文件」視窗 (設計、即時或程式碼檢視) 中。

    • 按一下按鈕上的箭頭,再從選單中選取選項。

      視物件的不同,會出現對應的物件插入對話方塊,提示您瀏覽到檔案或為物件指定參數。或者,Dreamweaver 可能會插入程式碼到文件中,或是插入程式碼前先開啟標籤編輯器或面板,以讓您指定資訊。

      對有些物件而言,如果您在「設計」檢視中插入物件,則不會出現對話方塊,但是如果在「程式碼」檢視中插入物件就會出現標籤編輯器。有少數物件,在「設計」檢視中插入物件會讓 Dreamweaver 在插入物件之前,先切換到「程式碼」檢視。

編輯插入面板偏好設定

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。

  2. 在「偏好設定」對話方塊的「一般」類別中,取消選取「插入物件時顯示對話方塊」,即可在插入物件 (如影像、表格、Script 和標頭元素) 時,或者在按住 Control 鍵 (Windows) 或 Option 鍵 (Macintosh) 建立物件時,關閉對話方塊。

註解:

當您在關閉此選項的情況下插入物件時,物件會被賦予預設的屬性值。在插入物件之後使用「屬性」檢視窗來變更物件屬性。

在插入面板的最愛類別中新增、刪除或管理項目

  1. 在「插入」面板中選取任何類別。

  2. 在按鈕出現的區域中按一下滑鼠右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「自訂最愛」。

  3. 在「自訂最愛物件」對話方塊中視需要變更內容,然後按一下「確定」。

    若要新增物件,在「可用的物件」窗格的左邊選取物件,再按一下兩個窗格間的箭頭,或按兩下「可用的物件」窗格中的物件。

    在插入面板中自訂最愛
    在插入面板中自訂最愛

    註解:

    一次可以新增一個物件。您無法藉由選取類別名稱 (如「常用」),將整個類別新增到最愛清單中。

    • 若要刪除物件或分隔符號,在「最愛的物件」窗格的右邊選取物件,然後按一下窗格上方的「移除最愛的物件清單中所選取的物件」按鈕。
    • 若要移動物件,在「最愛的物件」窗格的右邊選取物件,然後按一下窗格上方的向上或向下箭頭按鈕。
    • 若要在物件下方新增分隔符號,在「最愛的物件」窗格的右邊選取物件,然後按一下窗格下方的「新增分隔符號」按鈕。
  4. 如果不是在「插入」面板的「最愛」類別中,請選取該類別以查看變更。

檔案面板總覽

使用「檔案」面板來檢視及管理 Dreamweaver 網站中的檔案。

您可以使用「檔案」面板來檢視檔案和資料夾 (檢查它們是否與 Dreamweaver 網站相關聯),並執行標準檔案維護作業,例如開啟和移動檔案。

「檔案」面板也可幫助您管理檔案並在遠端伺服器間往來傳送檔案。

檔案面板
檔案面板

如需有關「檔案」面板的所有功能的詳細資訊,請參閱「管理檔案和資料夾」。

CSS 設計工具

CSS 設計工具面板 (「視窗 > CSS 設計工具」) 是 CSS 屬性檢視窗,可讓您透過「視覺方式」建立 CSS 樣式、檔案和設定屬性以及媒體查詢。

您可以使用 Ctrl/Cmd+Z 還原或使用 Ctrl/Cmd+Y 重做,您在 CSS 設計工具中執行的所有動作。這些變更會自動反映在「即時檢視」中,而且相關聯的 CSS 檔案也會進行重新整理。為了讓您知道相關檔案已變更,受影響檔案的索引標籤會短暫反白標示 (大約 8 秒)。

CSS 設計工具面板 (CC)
CSS 設計工具面板

CSS 設計工具面板是由下列窗格和選項所組成:

全部:列出與目前文件相關聯的所有 CSS、媒體查詢和選取器。您可以篩選所需的 CSS 規則及修改屬性。您也可以使用此模式,開始建立選取器或媒體查詢。

這個模式與選取內容無關。這表示,當您選取頁面上的元素時,關聯的選取器、媒體查詢或 CSS 並不會在 CSS 設計工具中標示。

目前:列出目前文件的「設計」或「即時」檢視中任一所選元素的所有已計算樣式。當您在程式碼檢視中針對 CSS 檔案使用這個模式時,將會顯示成為焦點之選取器的所有屬性。

此模式為內容感應式。使用這個選項可編輯文件中與選定元素相關之選取器的屬性。

來源:列出所有與文件相關的 CSS 樣式表。您可使用此窗格建立 CSS 並將其附加到文件,或在文件內定義樣式。

@媒體:列出「來源」窗格中所選來源的所有媒體查詢。如果您未選取特定的 CSS,則此窗格會顯示所有與文件相關的媒體查詢。

選取器:列出「來源」窗格中所選來源的所有選取器。如果您也選取了一個媒體查詢,則此窗格會針對該媒體查詢縮減選取器清單。如果未選取任何 CSS 或媒體查詢,則此窗格會顯示文件中的所有選取器。

當您選取「@媒體」窗格中的「全域」時,會顯示所有未包含在所選來源媒體查詢中的選取器。

屬性:顯示您可以為指定的選取器設定的屬性。如需詳細資訊,請參閱「設定屬性」。

如果您收合或展開 CSS 設計工具中的窗格,窗格的大小會記憶在工作階段內。「來源」和「媒體」窗格會保持自訂的大小,直到您再次變更其大小為止。

注意:當您選取頁面元素時,會在「選取器」窗格中選取最特定的選取器。若要檢視特定選取器的屬性,請在窗格中按一下該選取器的名稱。

如果要檢視所有選取器,您可以在「來源」窗格中選擇「所有來源」。如果要檢視的選取器不屬於所選來源的任何媒體查詢,請按一下「@媒體」窗格中的「全域」。

視覺輔助總覽

Dreamweaver 提供數種視覺輔助,協助您設計文件及預測它們出現在瀏覽器中的大概樣貌。您可以執行下列任何一項作業:

  • 將「文件」視窗立即貼齊到想要的視窗大小,以便查看元素是否適合頁面的尺寸。

  • 使用影像藍圖做為頁面背景,可協助您複製以插圖或影像編輯應用程式 (如 Adobe® Photoshop® 或 Adobe® Fireworks®) 所建立的設計。

  • 使用尺規和導引線來提供精準定位及調整頁面元素大小的視覺提示。

  • 使用格線以便精確定位及調整絕對定義元素 (AP 元素) 大小。

    頁面上的格線標記可協助您對齊 AP 元素,而且在啟用貼齊功能時,AP 元素會在移動或調整大小時自動貼齊最接近的格線點 (其他物件不會貼齊格線,如影像和段落)。無論是否顯示格線,貼齊功能都有作用。

放大和縮小顯示頁面

Dreamweaver 可讓您在「文件」視窗中增加顯示比例 (放大顯示),以便您能檢查圖形的像素精確度、更輕易地選取小項目、設計含有小型文字的頁面,或設計大型頁面等等。

如果要放大或縮小顯示頁面,請選取「檢視 > 設計檢視選項 > 顯示比例」,並選擇任一可用的顯示比例選項。

您可以從各種顯示比例選項中選擇。您也可以選擇:

  • 符合選取範圍 - 選取物件或文字,然後選擇這個選項,將選取範圍填滿「文件」視窗。
  • 符合全部 - 將整個頁面填滿「文件」視窗
  • 符合寬度 - 將整頁寬度填滿「文件」視窗

註解:

除了縮放工具以外,您也可以使用以下的鍵盤組合進行放大顯示:Control+= (Windows) 或 Command+= (Macintosh)。除了縮放工具以外,您也可以按 Control+- (Windows) 或 Command+- (Macintosh) 來縮小顯示。

設定 Dreamweaver 的一般偏好設定

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。

  2. 設定下列任何一個選項:

    在索引標籤中開啟文件會在單一視窗中開啟所有文件,視窗內含索引標籤,可讓您在文件之間切換 (僅限 Mac)。

    顯示開始畫面會在您啟動 Dreamweaver 或未開啟任何文件時,顯示「Dreamweaver 歡迎畫面」。

    啟動時重新開啟文件會開啟在您關閉 Dreamweaver 時仍為開啟狀態的任何文件。若未選取這個選項,Dreamweaver 會在您啟動時顯示「歡迎畫面」或空白畫面 (依您的「顯示歡迎畫面」設定而定)。

    當打開唯讀檔案時發出警告會在您開啟唯讀 (鎖定的) 檔案時警告您。您可以選擇解除鎖定/取出檔案、檢視檔案或取消。

    啟用相關檔案讓您查看連接到目前文件的檔案 (例如 CSS 或 JavaScript 檔案)。Dreamweaver 會在文件頂端顯示每個相關檔案的按鈕,按一下按鈕就可以開啟對應的檔案。

    探索動態相關檔案讓您選取是否要讓「動態相關檔案」自動或在手動互動後出現在「相關檔案」工具列。您也可以選擇停用探索動態相關檔案。

    當移動檔案時更新連結決定在您移動、重新命名或刪除網站內的文件時,所要執行的動作。此偏好設定可設定為總是自動更新連結、永不更新連結或提示您執行更新 (請參閱「自動更新連結」)。

    插入物件時顯示對話方塊決定在您利用「插入」面板或「插入」選單來插入影像、表格、Shockwave 影片和其他特定物件時,Dreamweaver 是否會提示您輸入其他資訊。如果此選項是關閉的,就不會顯示對話方塊,而且您必須使用「屬性」檢視窗來指定影像的原始檔、表格中的列數等等。如果插入的是滑鼠變換影像和 Fireworks HTML,則不論此選項的設定為何,在您插入物件時都會出現對話方塊。(若要暫時覆寫此設定,請在建立和插入物件時,使用 Control+按一下 (Windows) 或 Command+按一下 (Macintosh))。

    啟動雙位元組行內輸入如果您正在使用的開發環境或語言套件支援雙位元組文字 (例如日文字元),這個選項可讓您直接在「文件」視窗中輸入雙位元組文字。在取消選取此選項時,會出現一個輸入和轉換雙位元組文字專用的文字輸入視窗;接受它之後,文字便會出現在「文件」視窗。

    在標題後切換為一般段落指定在「設計」或「即時」檢視中,在標題段落結尾處按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 時,會建立以 p 標籤標示的新段落(標題段落是使用如 h1 或 h2 等標題標籤來標示的段落)。當此選項被停用時,在標題段落的結尾處按 Enter 鍵或 Return 鍵,就會建立一個使用相同標題標籤的新段落 (可讓您在列中輸入多個標題,然後返回並填入詳細資料)。

    允許多個連續空白指定在「設計」或「即時」檢視中輸入兩個以上空白時建立不斷行空白,這些空白會在瀏覽器中顯示為多個空白。(例如,您可以在句子之間輸入兩個空白,就像使用打字機時的動作一樣)。此選項是針對大都習慣使用文書處理程式來輸入的人而設計。當此選項被停用時,多個空白會被視為單一空白 (因為瀏覽器會將多個空白視為單一的空白)。

    使用 <strong> 和 <em> 取代 <b> 和 <i> 指定只要您執行通常套用 b 標籤的動作時,Dreamweaver 一律套用 strong 標籤;只要您執行通常套用 i 標籤的動作時,一律套用 em 標籤。這類動作包括在「HTML」模式的文字「屬性」檢視窗中按一下「粗體」或「斜體」按鈕,以及選擇「格式 > 樣式 > 粗體」或「格式 > 樣式 > 斜體」。如果要在文件中使用 b 和 i 標籤,請取消選取這個選項。

    注意:World Wide Web Consortium 不建議使用 b 和 i 標籤;strong 和 em 標籤提供的語意資訊比 b 和 i 標籤更多。

    在 <p> 或 <h1> - <h6> 標籤內放置可編輯的區域時發出警告指定每當您儲存在段落或標題標籤內含有可編輯區域的 Dreamweaver 範本時,是否要顯示警告訊息。警告訊息會告訴您,用戶將無法在該區域內建立其他段落。這個選項依預設值是啟動的。

    將還原動作限制在現行文件會將還原動作限制在目前正在編輯的檔案。例如,如果您正在編輯 CSS 檔案,則只能還原在該 CSS 檔案中所做的變更。

    不過,如果停用此核取方塊,HTML 原始碼和所有相關的 CSS 檔案就會使用單一還原操作記錄,不論您是在處理 HTML 程式碼,還是在相關的 CSS 檔案中,都可以執行還原動作。

    操作記錄步驟的上限會決定 Dreamweaver 所記住的步驟數目 (預設值對大多數用戶而言應已足夠)。如果您超過指定的步驟數目,系統會捨棄最舊的步驟。

    拼字字典列出可用的拼字字典。如果字典包含多個衍生語言或拼字慣例 (如美式英語和英式英語),則會在「字典」彈出式選單中分別列出各衍生語言。

在 Dreamweaver 中設定文件的字體偏好設定

文件的編碼方式會決定文件出現在瀏覽器的方式。Dreamweaver 字體偏好設定讓您以偏好的字體和大小來檢視指定的編碼方式。不過,您在「字體偏好設定」對話方塊中選取的字體只會影響 Dreamweaver 顯示字體的方式,並不會影響瀏覽者的瀏覽器顯示文件的方式。若要變更瀏覽器顯示字體的方式,必須使用「屬性」檢視窗或套用 CSS 規則來更改文字。

如需有關為新文件設定預設編碼方式的詳細資訊,請參閱「建立和開啟文件」。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Mac)。

  2. 從左邊的「分類」清單中選取「字體」。

  3. 從「字體設定」清單中選取編碼方式類型 (如「西歐語系」或「日文」)。

    註解:

    若要顯示亞洲語言,您必須使用支援雙位元組字體的作業系統。

  4. 選取每個選取的編碼方式類別要使用的字體和大小。

    註解:

    若要讓某字體出現在字體彈出式選單中,必須先將它安裝在電腦上。例如,若要查看日文文字,您必須安裝日文字體。

    調和間距字體

    這是 Dreamweaver 用來顯示正常文字 (例如,段落、標題和表格中的文字) 的字體。預設值要視系統所安裝的字體而定。對大多數的美國系統而言,在 Windows 上的預設值是 Times New Roman 12 pt. (Medium),而在 Mac OS 上則為 Times 12 pt. 。

    固定字體

    Dreamweaver 用來顯示 pre、code 和 tt 標籤內文字的字體。預設值要視系統所安裝的字體而定。對大多數的美國系統而言,在 Windows 上的預設值是 Courier New 10 pt. (Small),而在 Mac OS 上則為 Monaco 12 pt. 。

    程式碼檢視

    是出現在「程式碼」檢視和「程式碼」檢視窗中的所有文字所用之字體。預設值要視系統所安裝的字體而定。

自訂 Dreamweaver 反白標示顏色

使用「標示」偏好設定,自訂 Dreamweaver 用來識別範本區域、圖庫項目、協力廠商標籤、版面元素和程式碼的顏色。

  1. 選取「編輯 > 偏好設定」,然後選取「標示」類別。

  2. 在要變更標示顏色的物件旁,按一下顏色方塊,然後使用檢色器以選取新的顏色,或輸入十六進位值。

  3. 如果要啟動或停用特定選項的反白標示,請選取或取消選取「顯示」選項。

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

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