如何使用SuperPreview功能做網頁視覺診斷 --- WebOK部落格- 原創性軟體教學,課程資訊,網路行銷,學習紀錄分享

這是一篇站長幫台灣微軟官方撰寫的Expression Web 3 新功能系列文章之一，主要是講述Expression Web 3 裡面新增加的一個新成員：SuperPreview，除了有刊載在Microsoft Expression官網之外，也同步放在此部落格上供您瀏覽參考！

Expression Web 3 SuperPreview是Microsoft新推出的網頁視覺診斷軟體，可在一台電腦上同時觀看多個不同瀏覽器下的呈現狀態，裡面的快照預覽(Snapshot Preview)則提供高逼真度的瀏覽器預覽功能。但安裝前請記得先確認您的電腦已經有安裝Internet Explorer8.0以及Mozilla Firefox瀏覽器(建議為3.0以上版本)，屆時SuperPreview安裝時才會偵測到，之後執行SuperPreview裡面才會顯示出「IE6」、「IE8降級為IE7相容性檢視模式」、「IE8」、「Firefox」這四種瀏覽器模式，後續也才能夠有選項可以做挑選比對(否則若您電腦沒有安裝瀏覽器，裝完SuperPreview裡面預設瀏覽器則只會有IE6可供使用)。
以下筆者將SuperPreview的介面操作、特點優勢與相關資料條列出來供您參考：

SuperPreview可當做一個獨立軟體操作，亦可結合Expression Web 3做運用：
例如您可以開啟SuperPreview，在「位置」裡直接輸入網址，輸入完直接按下鍵盤上的Enter鍵(或按下介面上的「重新整理」鈕)，即可讀取 http:// 或 https:// 這樣的遠端的網頁內容，也可以按下「瀏覽檔案」鈕，直接開啟您電腦本機端裡的網頁內容。

當然您也可以從Expression Web使用SuperPreview，將在Expression Web「資料夾清單」介面裡的網頁點選後(或開啟目前編輯的網頁)，在選單列上選擇「檔案」/「顯示在SuperPreview中」(或直接按下鍵盤上的Shift與F12鈕)，即可將被選擇到的網頁傳送到SuperPreview進行查測與比較。
SuperPreview的基本操作：
一開始進入SuperPreview後，預設值應該是會呈現左右分割視窗的比對畫面如下圖所示，您可以在左邊視窗各瀏覽器圖示中選擇新增一款瀏覽器，例如選擇為IE8，接著請再選擇右方視窗另一款瀏覽器圖示，例如選擇IE6。

如果您想要選擇好幾款瀏覽器觀看狀況，可以按下「新增」鈕，逐步將其它款瀏覽器也加入到瀏覽清單中，預設值左邊是顯示設定的「基準線」瀏覽器(只能選擇一個)，右邊則是顯示「比較」為要對照比對的瀏覽器(可以加入多個)。

例如下圖的畫面，左邊是顯示IE8，右邊清單中加入了三款瀏覽器，目前是顯示在Firefox呈現的狀態，這樣呈現的方式稱之為快照預覽(Snapshot Preview) ，提供接近真實狀況的瀏覽器預覽，可以模擬不同瀏覽器在不同解析度下的狀況，能協助當有變更程式碼時在不同瀏覽器間的模擬，以節省您測試調整的工作時間。

若選擇「選取模式」與「方塊醒目提示模式」，點選網頁上的物件區域時，會顯示出該物件相關設定數值。例如下圖點選產品資訊這個區域，就可以看得出此區域在IE8與Firefox裡的Left數值解析起來有差異。

若選擇「選取模式」與「局部醒目提示模式」，點選網頁上的物件區域時，除點選的物件區域之外，其他的區域畫面會變暗，以突顯觀看效果，一樣也會顯示出該物件相關的設定數值。

選擇「取景模式」則會滑鼠游標會變成手掌的圖示，您可以在網頁畫面上按著滑鼠左鍵不放，拖曳畫面調整到想要的位置。

選擇「水平分割版面配置」，則可以讓分割畫面變成上下垂直排列的狀態。例如下圖就是上面視窗為「基準線」的IE8瀏覽器比對下方的「比較(1)」IE6瀏覽器。

選擇「單一版面配置」，則可以變成單畫面呈現。例如下圖就是IE8降級為IE7的相容性檢視模式時，使用單個畫面的呈現狀態。

選擇「切換縮圖可見性」，則右下角會出現一個整個畫面的縮圖，如此您就可以很清楚知道目前瀏覽的區域是屬於在這個網頁的哪個部分，也可以使用滑鼠左鍵在右下角縮圖進行快速移動，這些功能在瀏覽的網頁範圍很大時，就會顯得很好用。
SuperPreview的特殊功能：
選擇「重疊版面配置」，這是個非常特別的功能，能夠將兩個不同版本瀏覽器上顯示的網頁疊在一起做整個畫面的差異比對(可以想像成把一張圖變成半透明疊在另外一張圖上面)。例如下圖模糊的狀態不是畫面壞掉有問題，而是將「基準線」模式的IE8瀏覽器跟「比較(3)」模式的Firefox瀏覽器使用重疊版面配置功能進行差異比對所產生的畫面，可以看到這兩個瀏覽器呈現出來的畫面裡各個物件的落差。

另外還有另一種方式，可以做兩個畫面之間的比較方式，就是採用「切換尺規可見性」與「切換輔助線可見性」，SuperPreview會開啟尺規的介面與格線的功能，這有點類似像一些影像處理或繪圖軟體裡會有的操作介面，可以在尺規上面按著滑鼠左鍵拖曳出參考線。

您可以拖曳出多條參考線，如此就比較容易進行兩個畫面的各區域物件位置判別比較，也可以再次按下「切換輔助線可見性」，就可將參考線暫時隱藏。

筆者覺得Overlay Layout以及Toggle Ruler Visibility、Toggle Guide Visibility的設計思維，真的是一項很棒的功能，在以前沒有使用SuperPreview這套軟體時，設計師就算想辦法安裝不同的瀏覽器做測試(可能還要分不同台電腦)，也還是一件相當麻煩的事情，即使有其他第三方廠商推出的軟體能做數個瀏覽器整合，多半也僅能純做開啟瀏覽器觀看測試，若是需要做畫面誤差比對，往往也還是必須擷取抓圖後貼到其他軟體去拉輔助線做比對，一旦網頁有做調整變動畫面就得重抓，實在是一件很浪費人力時間的苦差事，現在善用SuperPreview就可以輕鬆解決這些麻煩事了。

經過了上述的操作教學，現在您應該可以使用SuperPreview的各種工具進行不同瀏覽器間的差異比對，但建議您還可以開啟SuperPreview右下角的「DOM」功能，檔案物件模型(Document Object Model，簡稱DOM)，是W3C組織推薦用來處理可擴展置標語言的標準編程介面，在SuperPreview的DOM裡面所顯示HTML等相關網頁碼，可以讓您更了解在不同瀏覽器解析處理的情形，能夠成為網頁修正的輔助判斷利器。

SuperPreview右下角還有一個「瀏覽器大小」的下拉式選單功能，可以讓您在此挑選呈現畫面的解析度，或者選擇「自定大小」可讓您自行設定畫面寬與高的尺寸像素數值。
搭配使用IE8的開發者工具： 若您電腦上有安裝Internet Explorer8瀏覽器，其實IE8裡面有內建一個好用的開發者工具，您可以在IE8的功能表列上選擇「工具」/「開發者工具」，裡面有相當豐富的各類分析功能，也可以挑選以IE7或IE8等模式作為測試標準，您可以用此工具搭配SuperPreview，相信可以解決或偵錯修正您許多網頁設計上的問題。
關於IE7與IE8網頁相容的小技巧： 文章最後在此提供一個HTML語法小技巧，若您有以前設計的舊網頁在IE8顯示上有不正常的情況時，或者是為了考慮各瀏覽器相容性問題時，其實您可以使用Expression Web開啟網頁，切換到網頁的<head>與<head>之間，輸入下述meta標籤語法，即可讓使用IE8瀏覽器瀏覽網頁時，自動預設以IE7解析模式運行，語法為：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

如果您網頁上有使用此語法，原本在IE8瀏覽器上會有的「相容性檢視」按鈕會隱藏起來，而只以IE7解析模式觀看此網頁。不過筆者還是要建議您，若是開發全新網站的網頁時，盡量還是以IE8為主要瀏覽測試環境，畢竟這還是未來的趨勢主流。