在 SuperPreview 中顯示頁面

SuperPreview 可簡化在不同網頁瀏覽器中測試及偵錯版面配置問題的程序。使用 SuperPreview 可同時在多個瀏覽器中檢視您的頁面，或是將頁面在某個瀏覽器呈現的外觀與頁面的模型影像對照比較。

您可以使用 Microsoft Expression Development Server 預覽 ASP.NET 或 PHP 網頁。Expression Development Server 會在您安裝 Microsoft Expression Web 時一併安裝。如果必須修復或重新安裝 Expression Development Server，請參閱安裝 Expression Development Server。

如需有關預覽 ASP.NET 或 PHP 網頁的詳細資訊，請參閱預覽 ASP.NET 網頁和預覽 PHP 網頁。如需使用自訂 URL 進行預覽的詳細資訊，請參閱在瀏覽器中預覽網頁。

注意：
您必須使用 Microsoft Internet Information Services (IIS) 來預覽 ASP (不是 ASP.NET) 網頁。如需使用自訂 URL 進行預覽的詳細資訊，請參閱在瀏覽器中預覽網頁。

在 SuperPreview 中顯示頁面

• 在 Expression Web 中開啟並選取頁面，再按一下 [顯示在 SuperPreview 中] 圖示 。您也可以從 [檔案] 功能表按一下 [顯示在 SuperPreview 中]，或是按 SHIFT+F12。目前選取的頁面隨即顯示在 SuperPreview 中。

  注意：
  第一次使用 SuperPreview 時，並不會顯示該頁面。在這種情況下，請選取基準線瀏覽器，關閉 SuperPreview，然後按一下 [顯示在 SuperPreview 中] 圖示 。

指標模式

您可透過兩種 SuperPreview 指標模式，變更與 SuperPreview 互動的方式：

• 按一下 [選取模式] ，選擇 [選取模式] 指標。請使用 [選取模式] 選取要進行比較的個別頁面區段。

• 按一下 [取景模式] ，選取 [取景模式] 指標。請使用 [取景模式] 將頁面拖曳到瀏覽器檢視內。在這種模式下，滑鼠滾輪會改變瀏覽器檢視的縮放比例。您不能在 [取景模式] 下選取頁面區段。

DOM 醒目提示

您可以在頁面上移動指標，以醒目提示的方式顯示頁面的不同區段。請按一下區段以選取該區段。區段的 HTML 標記名稱、其類別或識別名稱，以及其大小和位置屬性都會顯示在狀態列中。SuperPreview 提供兩種 DOM 醒目提示模式：

• [方塊醒目提示模式] 會在基準線瀏覽器檢視中，以藍色的醒目提示顯示選取的項目。在比較瀏覽器檢視中，選取的項目則是以綠色醒目顯示。

• [亮部醒目提示模式] 會正常顯示選取的項目，並將頁面的其他部分變暗。

尺規顯示器

按一下 [切換尺規可見性] 即可開啟及關閉尺規顯示器。尺規顯示器必須開啟，才能建立定位輔助線。如需定位輔助線的詳細資訊，請參閱本主題稍後的＜定位輔助線＞。

縮圖顯示器

縮圖顯示器可用來快速選取頁面區域。

按一下 [切換縮圖可見性] 即可開啟及關閉縮圖顯示器。

定位輔助線

您可以加入定位輔助線，幫助您評估頁面中多個項目的位置：

• 按一下水平尺規，建立可以拖曳到頁面檢視某個位置的水平輔助線。選取輔助線後，輔助線到頁面左上角的垂直距離便會顯示 (以像素為單位)。將輔助線拖出頁面顯示區域即可移除輔助線。

• 按一下垂直尺規，建立可以拖曳到頁面檢視某個位置的垂直輔助線。選取輔助線後，輔助線到頁面左上角的水平距離便會顯示 (以像素為單位)。將輔助線拖出頁面顯示區域即可移除輔助線。

• 按一下 [切換輔助線可見性] ，顯示或隱藏輔助線。

版面配置模式

SuperPreview 提供四種版面配置模式：

• [垂直分割版面配置] 可比較水平排列的瀏覽器檢視。

• [水平分割版面配置]  可比較某個瀏覽器檢視與其下方的另一個瀏覽器檢視。

• [重疊版面配置] 可在重疊模式下比較瀏覽器檢視。

• [單一版面配置] 可顯示單一瀏覽器檢視。

DOM 檢視

按一下 [DOM] 索引標籤即可開啟及關閉 DOM 樹狀目錄顯示器。

您可以查看某個項目在文件物件模組 (DOM) 樹狀目錄中的位置。如果您使用垂直分割或水平分割版面配置檢視，可以在任一瀏覽器檢視中選取項目，DOM 檢視便會更新，以顯示所選瀏覽器檢視的屬性。或者，您也可以在 DOM 檢視中選取項目來更新瀏覽器檢視。

選取版面配置窗格顯示器

若要選取 [基準線] 或 [比較] 瀏覽器，請從電腦已安裝的支援瀏覽器清單中選擇。您也可以選擇影像檢視模式，以比較瀏覽器檢視與詳細版面設計圖 (comp) 影像。

您可以使用 SuperPreview 將頁面顯示在下列版本的 Internet Explorer 中 (依據您的電腦上安裝哪些版本而定)：

• [Internet Explorer 8]   在 Internet Explorer 8 中預覽 (只適用於已安裝 Internet Explorer 8 的情況)。

• [Internet Explorer 8 → 7]   在以 Internet Explorer 7 相容模式執行的 Internet Explorer 8 中預覽 (只適用於已安裝 Internet Explorer 8 的情況)。

• [Internet Explorer 7 → 7]   在相容模式下執行的 Internet Explorer 7 中預覽 (只適用於已安裝 Internet Explorer 7 的情況)。

• [Internet Explorer 7]   在 Internet Explorer 7 中預覽。

• [Internet Explorer 6]   在 Internet Explorer 6 中預覽。

您最多可以選擇 8 個可快速切換 (透過按一下個別圖示) 的 [比較] 瀏覽器。

按一下 [新增]  可在 [比較] 檢視中新增瀏覽器。按一下 [切換基準線瀏覽器位置] 則可交換 [基準線] 和 [比較] 瀏覽器檢視。

位置

輸入您要預覽之網頁的 URL 或檔案路徑。

注意：
當您輸入檔案路徑時，預設頁面並不會顯示。您必須明確加入預設頁面檔案名稱，例如： C:\inetpub\wwwroot\default.html

頁面互動模式

Microsoft Expression Web SuperPreview 可讓您預覽需要使用者驗證的網頁內容。

按一下 ([使用頁面互動模式登入安全網站並瀏覽到您要預覽的網頁])，即可顯示 [頁面互動模式] 畫面。

如需有關使用 [頁面互動模式] 的詳細資訊，請參閱檢視安全網站的內容。

SuperPreview 線上服務

Microsoft Expression Web SuperPreview 線上服務是一種能夠將 SuperPreview 功能擴充成包含其他瀏覽器和作業系統支援的服務。

請按一下 [SuperPreview 線上服務]  來啟用遠端瀏覽器預覽。

注意：
如果此電腦尚未啟用 SuperPreview 線上服務，則不會顯示 [SuperPreview 線上服務] 圖示 ()。請按一下 開始 SuperPreview 線上服務註冊程序。 如需有關啟用 SuperPreview 線上服務的詳細資訊，請參閱啟用 SuperPreview 線上服務。

縮放

選取縮放等級或輸入縮放值。

選項

按一下 [選項]  可開啟 [選項] 對話方塊。

[選項] 對話方塊提供下列選項：

• 伺服器狀態   按一下 [檢查狀態] 可查看 SuperPreview 線上服務的狀態。

• 封裝   選取 [一律封裝網頁供遠端瀏覽器預覽] 可將網頁的所有資產檔案包含在封裝中。這有助於改善網頁呈現問題，特別是網站位於內部網路時。

  注意：
  這可能會降低遠端瀏覽器的呈現效能。

• 帳戶管理   設定下列帳戶管理選項：

  • 停用   按一下可在此電腦上停用 SuperPreview 線上服務。

  • 刪除帳戶   按一下可刪除您的 SuperPreview 線上服務帳戶。

  警告：
  刪除 SuperPreview 帳戶後，將會停用與您用來啟用帳戶的電子郵件地址相關的所有 SuperPreview 線上服務執行個體。如果您刪除 SuperPreview 線上服務帳戶，與刪除的電子郵件地址相關的每台電腦都必須再次完成註冊程序，才能重新啟用 SuperPreview 線上服務。

另請參閱

概念

啟用 SuperPreview 線上服務
SuperPreview 工作區