Expression Web 3 新功能

如何使用 SuperPreview 功能做網頁視覺診斷

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

以下筆者將 SuperPreview 的介面操作、特點優勢與相關資料條列出來供您參考：

SuperPreview 可當做一個獨立軟體操作，亦可結合 Expression Web 3 做運用
SuperPreview 的基本操
SuperPreview 的特殊功能
搭配使用 IE8 的開發者工具
關於 IE7 與 IE8 網頁相容的小技巧

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 Explorer 8 瀏覽器，其實 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 為主要瀏覽測試環境，畢竟這還是未來的趨勢主流。

回到頁首