在 Dreamweaver、瀏覽器和行動裝置上預覽您的網頁。

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

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

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

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

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

在瀏覽器中即時預覽

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

註解:

撰寫程式碼時,您也可以在行動裝置中即時預覽程式碼。如需詳細資訊,請參閱「在多部裝置上預覽 Dreamweaver 網頁」。

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

    即時預覽
    即時預覽

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

    如果您想要在裝置上預覽網頁,請參閱「在多部裝置上預覽 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. 當您完成測試時,請關閉瀏覽器中的頁面。

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

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