使用手冊 取消

預覽頁面

 

 

在 Dreamweaver、瀏覽器中預覽您的網頁。

即時預覽可讓您在撰寫程式碼時,在瀏覽器中即時預覽您的頁面,並在瀏覽器中即時檢視變更。

即時檢視可讓您預覽頁面在網站上呈現的外觀,並讓您在程式碼檢視中編輯項目。

設計檢視也可讓您預覽頁面在網站上呈現的外觀,但是無法像瀏覽器一樣精確呈現頁面。

「在瀏覽器中開啟」功能可讓您觀看頁面在瀏覽器中呈現的外觀。這最適合用來處理使用資料庫動態資料的頁面,因為那並非即時的資料。

請繼續閱讀,以深入了解 Dreamweaver 中不同類型的預覽選項。

在瀏覽器中即時預覽

您可以在 Dreamweaver 中為網頁撰寫程式碼或設計時,即時預覽您的網頁。這項功能可讓您同時在多個瀏覽器上撰寫程式碼和預覽網頁。 

在瀏覽器中即時預覽變更
在瀏覽器中即時預覽變更

  1. 在 Dreamweaver 狀態列中按一下「即時預覽」。

    即時預覽
    即時預覽

    您可以選擇在瀏覽器中即時預覽您的網頁。

  2. 如果要在瀏覽器中預覽網頁,請按一下任一可用的瀏覽器選項。

    您可以編輯出現在此清單中的瀏覽器。如果要在此清單中新增或移除瀏覽器,請參閱「設定瀏覽器偏好設定」。

    如果您有測試伺服器,請確定您啟用「自動推送檔案到測試伺服器」,同時設定測試伺服器。 

    即時預覽適用於測試伺服器中的檔案。啟用自動推送到測試伺服器可確保您即時看到變更。 

  3. 如果出現提示,請儲存網頁以及相關文件。

    瀏覽器隨即開啟,並顯示網頁。

  4. 請繼續撰寫頁面的程式碼,並於撰寫程式碼時在瀏覽器中查看變更。

設定瀏覽器預覽偏好設定

您可以在即時預覽和在瀏覽器中預覽切換。針對在預覽網站和定義預設主要和次要瀏覽器時要使用的瀏覽器,設定其偏好設定。

不論您是使用即時預覽來預覽您的網站,或者是在瀏覽器中開啟頁面,都會使用這些瀏覽器偏好設定。

  1. 選取「檔案 > 即時預覽 > 編輯瀏覽器清單」。

    即時預覽
    預設為靜態瀏覽器預覽

    如果取消選取「預設為靜態瀏覽器預覽」選項,即時預覽會被停用。您可以使用主要和次要瀏覽器的鍵盤快速鍵,在瀏覽器中開啟預覽。或者,您也可以使用「檔案」選單或按一下狀態列上的裝置預覽圖示。

  2. 若要將瀏覽器加入清單中,請按一下加號 (+) 按鈕, 完成「增加瀏覽器」對話方塊,然後再按一下「確定」。
  3. 若要從清單中刪除瀏覽器,請選取瀏覽器, 然後再按一下減號 (-) 按鈕。
  4. 若要變更選取瀏覽器的設定,請按一下 「編輯」按鈕,在「編輯瀏覽器」對話方塊中進行變更,然後 按一下「確定」。
  5. 選取「主要瀏覽器」或「次要瀏覽器」選項, 指定選取的瀏覽器是主要或次要的 瀏覽器。

    按 F12 鍵 (Windows) 或 Option+F12 鍵 (Macintosh) 可開啟主要 瀏覽器;按 Control+F12 鍵 (Windows) 或 Command+F12 鍵 (Macintosh) 可開啟 次要瀏覽器。

  6. 選取「使用暫存檔預覽」,建立供 預覽和伺服器除錯之用的暫存複本。(如果要直接更新文件, 請取消選取這個選項)。

預設為靜態瀏覽器預覽這可讓用戶選擇在瀏覽器中預覽檔案的模式。勾選核取方塊後,用戶可以使用選單中的「在瀏覽器中開啟」和使用快速鍵來預覽檔案。未勾選時,即時預覽將用於在瀏覽器中預覽檔案。預設情況下不會勾選核取方塊,即時預覽將用於在瀏覽器中預覽檔案。

在即時檢視中預覽網頁

即時檢視與傳統的 Dreamweaver 設計檢視不同,它可提供更實際的呈現方式,讓您更清楚知道所設計網頁在瀏覽器中的外觀,而且可進行編輯。 

在「設計」檢視中,您可以隨時切換至「即時檢視」。不過,切換至「即時檢視」這個動作,與在 Dreamweaver 中的其他傳統檢視 (「程式碼」/「分割」/「設計」) 之間進行切換的動作無關。當您從「設計」檢視切換至「即時檢視」時,只是在「設計」檢視的可編輯狀態與「即時」狀態之間切換而已。

雖然您進入「即時檢視」時,便無法編輯「設計」檢視,但是仍然可以編輯「程式碼」檢視。因此,您可以變更程式碼,然後重新整理「即時檢視」,查看所做的變更是否生效。當您處於「即時檢視」中,還可以檢視即時程式碼。「即時程式碼」檢視與「即時檢視」類似,它會顯示瀏覽器為了呈現網頁而執行的程式碼版本。與「即時檢視」類似,「即時程式碼」檢視也是無法編輯的檢視。

「即時檢視」的另一項優點,就是能夠凍結 JavaScript。例如,您可以切換至「即時檢視」,並將滑鼠停留在 jQuery 表格列 (與用戶互動時會變更顏色) 上方。當您凍結 JavaScript 時,「即時檢視」會在網頁目前的狀態下凍結該網頁。接著,您就可以編輯 CSS 或 JavaScript,然後重新整理網頁,查看變更是否生效。對於傳統「設計」檢視中看不到的快顯視窗選單和互動元素,如果您要查看及變更其不同狀態的屬性,凍結 JavaScript 便很有用。

如果要在「即時」檢視中預覽頁面:

  1. 確定您在「設計」檢視 (「檢視 > 設計」) 或「程式碼與設計」檢視 (「檢視 > 程式碼與設計」) 中。

  2. 按一下「即時檢視」按鈕。

  3. (選擇性) 在「程式碼」檢視、「CSS 樣式」面板、 外部 CSS 樣式表,或其他相關檔案中變更內容。

    即使 您無法在「即時檢視」中變更內容,依照前述任何一種方式 在其他區域 (例如,在「CSS 樣式」面板或「程式碼」檢視) 中 編輯的內容也會在您按一下「即時檢視」時變更。

    從文件頂端的「相關檔案」工具列開啟相關檔案,即可在焦點保持為「即時檢視」的情況下,使用這些相關檔案 (例如 CSS 樣式表)。

  4. 如果您已經在「程式碼」檢視或相關檔案中變更內容, 按一下「檔案」工具列中的「重新整理」按鈕或 按下 F5 即可重新整理「即時檢視」。

  5. 若要返回可編輯的「設計」檢視,請再按一次「即時檢視」 按鈕。

預覽即時程式碼

「即時程式碼」檢視中顯示的程式碼 與您透過瀏覽器檢視的網頁原始碼類似。不同的是, 後者這種網頁原始碼屬於靜態,所以只能讓您透過瀏覽器 檢視網頁原始碼;而「即時程式碼」檢視則屬於動態, 可以在您與「即時檢視」中的網頁互動時更新。

  1. 確定您在「即時檢視」中。

  2. 按一下「即時程式碼」按鈕。

    Dreamweaver 便會顯示瀏覽器用來執行網頁的即時程式碼。 程式碼會以黃色反白標示,而且無法編輯。

    當 您與頁面上的互動元素互動時,「即時程式碼」就會在 程式碼中反白標示動態更改。

  3. 若要在「即時程式碼」檢視中關閉更改的反白標示,請選擇 「檢視 > 即時檢視選項 > 在即時程式碼中標示變更」。

  4. 若要返回可編輯的「程式碼」檢視,請再按一次「即時程式碼」 按鈕。

若要更改「即時程式碼」偏好設定,請選擇「編輯 > 偏好設定」 (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 控制項)。

在瀏覽器中開啟文件之前,請先儲存文件;否則,瀏覽器將無法顯示您最近的變更。

  1. 在「文件」工具列中以滑鼠右鍵按一下檔案名稱,然後按一下「在瀏覽器中開啟」。

    註解:

    如果沒有列出任何瀏覽器,請選取「編輯 > 偏好設定」或「Dreamweaver > 偏好設定」(Macintosh),再選取左邊的「在瀏覽器中預覽」類別,即可選取瀏覽器。如需詳細資訊,請參閱設定瀏覽器預覽偏好設定

  2. 請按一下頁面中的連結並測試內容。
    註解:

    當您在本機瀏覽器中預覽文件時,具有網站根目錄相對路徑的連結內容並不會顯示,除非您指定一個測試伺服器,或是在「編輯 > 偏好設定 > 在瀏覽器中預覽」中選取「使用暫存檔預覽」選項。這是因為瀏覽器無法辨識網站根目錄,但伺服器可以辨識。

    註解:

    若要預覽以根目錄相對路徑所連結的內容,請將檔案放在遠端伺服器上,然後選取「檔案 > 在瀏覽器中預覽」來檢視。

  3. 當您完成測試時,請關閉瀏覽器中的頁面。

更快、更輕鬆地獲得協助

新的使用者?