在 Dreamweaver 狀態列中按一下「即時預覽」。
- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
在 Dreamweaver、瀏覽器中預覽您的網頁。
即時預覽可讓您在撰寫程式碼時,在瀏覽器中即時預覽您的頁面,並在瀏覽器中即時檢視變更。
即時檢視可讓您預覽頁面在網站上呈現的外觀,並讓您在程式碼檢視中編輯項目。
設計檢視也可讓您預覽頁面在網站上呈現的外觀,但是無法像瀏覽器一樣精確呈現頁面。
「在瀏覽器中開啟」功能可讓您觀看頁面在瀏覽器中呈現的外觀。這最適合用來處理使用資料庫動態資料的頁面,因為那並非即時的資料。
請繼續閱讀,以深入了解 Dreamweaver 中不同類型的預覽選項。
在瀏覽器中即時預覽
您可以在 Dreamweaver 中為網頁撰寫程式碼或設計時,即時預覽您的網頁。這項功能可讓您同時在多個瀏覽器上撰寫程式碼和預覽網頁。
-
您可以選擇在瀏覽器中即時預覽您的網頁。
-
如果要在瀏覽器中預覽網頁,請按一下任一可用的瀏覽器選項。
您可以編輯出現在此清單中的瀏覽器。如果要在此清單中新增或移除瀏覽器,請參閱「設定瀏覽器偏好設定」。
如果您有測試伺服器,請確定您啟用「自動推送檔案到測試伺服器」,同時設定測試伺服器。
即時預覽適用於測試伺服器中的檔案。啟用自動推送到測試伺服器可確保您即時看到變更。
-
如果出現提示,請儲存網頁以及相關文件。
瀏覽器隨即開啟,並顯示網頁。
-
請繼續撰寫頁面的程式碼,並於撰寫程式碼時在瀏覽器中查看變更。
設定瀏覽器預覽偏好設定
您可以在即時預覽和在瀏覽器中預覽切換。針對在預覽網站和定義預設主要和次要瀏覽器時要使用的瀏覽器,設定其偏好設定。
不論您是使用即時預覽來預覽您的網站,或者是在瀏覽器中開啟頁面,都會使用這些瀏覽器偏好設定。
-
選取「檔案 > 即時預覽 > 編輯瀏覽器清單」。
如果取消選取「預設為靜態瀏覽器預覽」選項,即時預覽會被停用。您可以使用主要和次要瀏覽器的鍵盤快速鍵,在瀏覽器中開啟預覽。或者,您也可以使用「檔案」選單或按一下狀態列上的裝置預覽圖示。
-
若要將瀏覽器加入清單中,請按一下加號 (+) 按鈕, 完成「增加瀏覽器」對話方塊,然後再按一下「確定」。
-
若要從清單中刪除瀏覽器,請選取瀏覽器, 然後再按一下減號 (-) 按鈕。
-
若要變更選取瀏覽器的設定,請按一下 「編輯」按鈕,在「編輯瀏覽器」對話方塊中進行變更,然後 按一下「確定」。
-
選取「主要瀏覽器」或「次要瀏覽器」選項, 指定選取的瀏覽器是主要或次要的 瀏覽器。
按 F12 鍵 (Windows) 或 Option+F12 鍵 (Macintosh) 可開啟主要 瀏覽器;按 Control+F12 鍵 (Windows) 或 Command+F12 鍵 (Macintosh) 可開啟 次要瀏覽器。
-
選取「使用暫存檔預覽」,建立供 預覽和伺服器除錯之用的暫存複本。(如果要直接更新文件, 請取消選取這個選項)。
預設為靜態瀏覽器預覽這可讓用戶選擇在瀏覽器中預覽檔案的模式。勾選核取方塊後,用戶可以使用選單中的「在瀏覽器中開啟」和使用快速鍵來預覽檔案。未勾選時,即時預覽將用於在瀏覽器中預覽檔案。預設情況下不會勾選核取方塊,即時預覽將用於在瀏覽器中預覽檔案。
在即時檢視中預覽網頁
即時檢視與傳統的 Dreamweaver 設計檢視不同,它可提供更實際的呈現方式,讓您更清楚知道所設計網頁在瀏覽器中的外觀,而且可進行編輯。
在「設計」檢視中,您可以隨時切換至「即時檢視」。不過,切換至「即時檢視」這個動作,與在 Dreamweaver 中的其他傳統檢視 (「程式碼」/「分割」/「設計」) 之間進行切換的動作無關。當您從「設計」檢視切換至「即時檢視」時,只是在「設計」檢視的可編輯狀態與「即時」狀態之間切換而已。
雖然您進入「即時檢視」時,便無法編輯「設計」檢視,但是仍然可以編輯「程式碼」檢視。因此,您可以變更程式碼,然後重新整理「即時檢視」,查看所做的變更是否生效。當您處於「即時檢視」中,還可以檢視即時程式碼。「即時程式碼」檢視與「即時檢視」類似,它會顯示瀏覽器為了呈現網頁而執行的程式碼版本。與「即時檢視」類似,「即時程式碼」檢視也是無法編輯的檢視。
「即時檢視」的另一項優點,就是能夠凍結 JavaScript。例如,您可以切換至「即時檢視」,並將滑鼠停留在 jQuery 表格列 (與用戶互動時會變更顏色) 上方。當您凍結 JavaScript 時,「即時檢視」會在網頁目前的狀態下凍結該網頁。接著,您就可以編輯 CSS 或 JavaScript,然後重新整理網頁,查看變更是否生效。對於傳統「設計」檢視中看不到的快顯視窗選單和互動元素,如果您要查看及變更其不同狀態的屬性,凍結 JavaScript 便很有用。
如果要在「即時」檢視中預覽頁面:
-
確定您在「設計」檢視 (「檢視 > 設計」) 或「程式碼與設計」檢視 (「檢視 > 程式碼與設計」) 中。
-
按一下「即時檢視」按鈕。
-
(選擇性) 在「程式碼」檢視、「CSS 樣式」面板、 外部 CSS 樣式表,或其他相關檔案中變更內容。
即使 您無法在「即時檢視」中變更內容,依照前述任何一種方式 在其他區域 (例如,在「CSS 樣式」面板或「程式碼」檢視) 中 編輯的內容也會在您按一下「即時檢視」時變更。
從文件頂端的「相關檔案」工具列開啟相關檔案,即可在焦點保持為「即時檢視」的情況下,使用這些相關檔案 (例如 CSS 樣式表)。
-
如果您已經在「程式碼」檢視或相關檔案中變更內容, 按一下「檔案」工具列中的「重新整理」按鈕或 按下 F5 即可重新整理「即時檢視」。
-
若要返回可編輯的「設計」檢視,請再按一次「即時檢視」 按鈕。
預覽即時程式碼
「即時程式碼」檢視中顯示的程式碼 與您透過瀏覽器檢視的網頁原始碼類似。不同的是, 後者這種網頁原始碼屬於靜態,所以只能讓您透過瀏覽器 檢視網頁原始碼;而「即時程式碼」檢視則屬於動態, 可以在您與「即時檢視」中的網頁互動時更新。
-
確定您在「即時檢視」中。
-
按一下「即時程式碼」按鈕。
Dreamweaver 便會顯示瀏覽器用來執行網頁的即時程式碼。 程式碼會以黃色反白標示,而且無法編輯。
當 您與頁面上的互動元素互動時,「即時程式碼」就會在 程式碼中反白標示動態更改。
-
若要在「即時程式碼」檢視中關閉更改的反白標示,請選擇 「檢視 > 即時檢視選項 > 在即時程式碼中標示變更」。
-
若要返回可編輯的「程式碼」檢視,請再按一次「即時程式碼」 按鈕。
若要更改「即時程式碼」偏好設定,請選擇「編輯 > 偏好設定」 (Windows) 或「Dreamweaver > 偏好設定」(Macintosh OS),然後選取 「程式碼色彩標示」類別。
凍結 JavaScript
請執行下列其中一項作業:
按下 F6。
從「即時檢視」按鈕的快顯視窗選單選取「凍結 JavaScript」 。
文件頂端的資訊列便會告訴您已凍結 JavaScript。若要關閉資訊列,請按一下關閉連結。
即時檢視選項
除了「凍結 JavaScript」選項之外,您還可以從「即時檢視」按鈕的快顯視窗選單,或者從「檢視 > 即時檢視選項」選單項目選取其他選項。
凍結 JavaScript 將 JavaScript 所影響的元素凍結在其目前狀態。
停用 JavaScript 停用 JavaScript 並重新呈現頁面,就像瀏覽器未啟用 JavaScript 時的頁面一樣。
停用外掛程式停用外掛程式並重新呈現頁面,就像瀏覽器未啟用外掛程式時的頁面一樣。
在即時程式碼中標示變更在「即時程式碼」中關閉或開啟標示變更的功能。
在新的索引標籤中編輯即時檢視頁面可讓您使用「瀏覽器導覽」工具列或「跟隨連結」功能,針對您所瀏覽的網站文件開啟新的索引標籤。您必須先瀏覽至文件,然後選取「在新的索引標籤中編輯即時檢視頁面」,才能針對此文件建立新的索引標籤。
跟隨連結讓您在「即時檢視」中點選的下一個連結處於作用中狀態。或者,您也可以在「即時檢視」中,Control+按一下連結,讓它處於作用中狀態。
持續跟隨連結讓「即時檢視」中的連結持續作用中,直到您再次停用它們或關閉頁面為止。
自動同步化遠端檔案自動在您按一下「瀏覽器導覽」工具列中的「重新整理」圖示時,同步化本機和遠端檔案。Dreamweaver 會先將檔案放在伺服器上,然後再重新整理,讓這兩個檔案保持同步。
使用測試伺服器做為文件來源主要由動態網頁 (例如 ColdFusion 頁面) 使用,而且對動態網頁而言,這是預設選取的選項。選取此選項時,Dreamweaver 會使用網站之測試伺服器上的檔案版本,做為原始碼供「即時檢視」顯示。
使用本機檔案做為文件連結這是非動態網站的預設設定。針對使用測試伺服器的動態網站選取此選項時,Dreamweaver 會使用連結至文件 (例如 CSS 和 JavaScript 檔案) 之檔案的本機版本,而非測試伺服器上的檔案。接著,您可以在本機變更相關檔案,如此便可以在將這些檔案置於測試伺服器之前,先查看其外觀。若未選取此選項,Dreamweaver 便會使用相關檔案的測試伺服器版本。
HTTP 要求設定進入進階設定對話方塊,您可以在其中輸入值以顯示即時資料。如需詳細資訊,請按一下對話方塊中的「說明」按鈕。
在瀏覽器中開啟
您隨時都可以在瀏覽器中開啟頁面,不一定要先將頁面上傳至網頁伺服器。當您預覽頁面時,所有瀏覽器相關的功能應該都可以正常運作,包括 JavaScript 行為、文件的相對和絕對連結、ActiveX® 控制項和瀏覽器外掛程式 (只要您已在瀏覽器中安裝必要的外掛程式或 ActiveX 控制項)。
在瀏覽器中開啟文件之前,請先儲存文件;否則,瀏覽器將無法顯示您最近的變更。
-
在「文件」工具列中以滑鼠右鍵按一下檔案名稱,然後按一下「在瀏覽器中開啟」。
註解:如果沒有列出任何瀏覽器,請選取「編輯 > 偏好設定」或「Dreamweaver > 偏好設定」(Macintosh),再選取左邊的「在瀏覽器中預覽」類別,即可選取瀏覽器。如需詳細資訊,請參閱設定瀏覽器預覽偏好設定。
-
請按一下頁面中的連結並測試內容。註解:
當您在本機瀏覽器中預覽文件時,具有網站根目錄相對路徑的連結內容並不會顯示,除非您指定一個測試伺服器,或是在「編輯 > 偏好設定 > 在瀏覽器中預覽」中選取「使用暫存檔預覽」選項。這是因為瀏覽器無法辨識網站根目錄,但伺服器可以辨識。
註解:若要預覽以根目錄相對路徑所連結的內容,請將檔案放在遠端伺服器上,然後選取「檔案 > 在瀏覽器中預覽」來檢視。
-
當您完成測試時,請關閉瀏覽器中的頁面。