Expression Web 4 升級 SP1 與 SP2 後的變革 ～
SuperPreview 的新演進
首先，若您還不了解什麼是 SuperPreview，或是想了解其基礎操作，可參考之前筆者撰寫的這篇「如何使用
SuperPreview 功能做網頁視覺診斷」或在 SuperPreview 按下鍵盤上的「F1」鈕參考說明檔，本文將以介紹 SuperPreview 的新功能為主。
ExpressionWeb4 更新到 Service
Pack2 後，SuperPreview 的功能也跟著越來越強大，本次主要增加了兩大特色功能：「遠端瀏覽器」與「頁面互動模式」，下圖畫面為筆者撰寫本文時，SuperPreview 線上服務可支援的瀏覽器廠牌與版本(要知道最新支援的狀況，可以到
http://status.superpreview.com/status_zh-TW.htm
查看)，也就是說，只要使用新版的 SuperPreview 並且維持網際網路暢通，您的電腦就可以不需要安裝這些版本的瀏覽器，但仍然可以透過 SuperPreview，來進行對多種瀏覽器的網頁開發測試。
要使用「遠端瀏覽器」的功能，您必須點選位於 SuperPreview 介面右上角的「註冊 SuperPreview 線上服務」鈕。
出現如下圖的畫面後，請按下「註冊」鈕。
輸入您的電子郵件信箱後(請填寫您實際有使用的 E-Mail)，按下「下一步」鈕。
系統會立即發送一封認證的電子郵件到您的信箱裡。
稍等一下再去收電子郵件(若沒有看到請確認之前填寫的E-Mail是否有誤，或是確認有無被歸到廣告信夾裡)，會收到一封主旨為「SuperPreview online service Beta activation」的郵件(內容如下圖)，請點選此郵件裡的驗證超連結網址。
驗證成功則會出現如下圖的畫面。
請回到 SuperPreview 線上服務啟用介面裡，按下「啟用」鈕。
如此就完成了整個遠端瀏覽器線上服務的啟用程序，按下「結束」鈕離開此介面。
接著我們要啟動遠端瀏覽器的功能，下圖為尚未啟動前的畫面，筆者電腦因為已有安裝 Internet Explorer9.0 版與 Firefox3.6 版，所以「本機端瀏覽器」會出現 IE6、IE7、IE8、IE8 相容性檢視、IE9 與 Firefox3.6，而「遠端瀏覽器」裡目前呈現的是灰色無法使用的狀態圖示。
請點選位於 SuperPreview 介面右上角的「使用遠端瀏覽器啟用或停用預覽」鈕 (此處原本為「註冊 SuperPreview 線上服務」鈕，註冊完成會變成此功能)。
備註：若要重新註冊 SuperPreview 線上服務，可以點選位於 SuperPreview 介面右上角的「選項」鈕，裡面的帳戶管理有「停用」跟「刪除帳號」的功能。
這樣「遠端瀏覽器」裡的各種瀏覽器圖示就會變成彩色的狀態，代表著可以選用。
請點選左方視窗裡的其中一個瀏覽器圖示，此時位於左下角的「基準線」，會出現以該瀏覽器為比較的基準(例如筆者選擇 IE9)。
請點選右方視窗裡的其中一個瀏覽器圖示，此時下方的「比較」會出現該瀏覽器，您可以再繼續按下「新增」鈕，增加各種本機或遠端瀏覽器進來。
例如筆者選擇增加「Safari5」瀏覽器的圖示。
可以按下「尺規」鈕，並在上或左右方的尺規上，按著滑鼠左鍵不放，拖曳參考線到畫面上，並可以開始切換「比較」區裡的各個瀏覽器圖示，以進行網頁上各區域的位置測試，例如下圖為 IE9 與 Chome 瀏覽器之間的測試比對。
或者可以按下「重疊版面配置」鈕，SuperPreview 會將「基準線」與「比較」區裡選擇的瀏覽器，進行兩個畫面上的重疊，可以讓您快速觀察到，兩個瀏覽器解析出來的網頁差異性，例如下圖是 IE9 與 IE6 的各自呈現的網頁畫面加以重疊比較，能夠明顯看出來差異頗大。
上述的操作方式，是原本 SuperPreview 的舊功能，可惜缺點是只能用來查測一般靜態網頁，若要對使用程式資料庫構成的動態網頁進行測試，就顯得力有未逮 (很多網頁必須經由程式抓取資料庫內容等複雜點選流程才能產生)，但這個問題隨著「頁面互動模式」功能的推出，已經可以突破解決。
例如下圖為筆者使用 Expression
Web 搭配 Access 資料庫，免 Coding 即可快速產生的 ASP.NET 通訊錄程式系統，前台並使用了主版頁面 (.master) 與 CSS 來完成版面架構，可以點選功能表裡的「網站」/「網站設定」。
在「預覽」的頁面標籤裡，勾選「使用 Microsoft Expression Development
Server」與選擇「僅 PHP 與 ASP.NET 網頁」。
如此就可以讓沒有 IIS (Internet Information Services) 環境的一般電腦，也能模擬執行成有 ASP.NET 程式語法的網站伺服環境。
例如下圖為執行起來的 ASP.NET 網頁，網頁檔名為 callbook.aspx，可點選其中的「點選觀看」超連結點來進入該筆資料的細節內容。
如下圖畫面所示，顯示出來的詳細內容為傳遞 id 值的 callbookdetail.aspx，這是一種很常見的動態網頁類型。
以往舊版的 SuperPreview，是難以查測如上所述的動態程式資料庫網頁，因為 SuperPreview 裡的原理，是把網頁快照成類似圖片格式後進行比對，所以無法再對裡面的超連結進行點選，不過目前新版有「頁面互動模式」功能，可以按下「使用頁面互動模式登入安全網站並瀏覽到您要預覽的網頁」鈕。
出現頁面互動模式視窗後，若頁面顯示不正確時，可以勾選左下角的「使用替代驗證」，來試看看是否能解決問題 (若無問題可不勾選)。
此時您就可以在此視窗裡點選網頁上的超連結點進行測試。
出現到進一步的程式內頁畫面後，假如您要測試的為此畫面資料，希望檢查網頁美編版型是否因為資料動態帶入而被破壞，請按下「預覽」鈕。
此時會回到 SuperPreview 原本比對的畫面，例如下圖為筆者的動態程式內頁資料，分別在 IE9 與 IE6 的瀏覽器環境下呈現的狀況，很明顯看到在 IE6 的環境裡，版型有因為資料帶入而導致突出的問題需要修正！
您也可以點選位於右下角的「DOM」鈕，觀看不同瀏覽器解析出來的 DOM 樹狀檢視，來做為之後修改上的參考依據。
SuperPreview 的「遠端瀏覽器」新功能，能夠讓您將主流的瀏覽器一網打盡，以進行不同版本間的仔細比對，可以節省不少交叉測試而產生的成本與時間，而「頁面互動模式」的新功能，搭配 Expression
Web 的本機端 Development
Server 功能，可以解決傳統美編人員長久以來的困擾 (沒有伺服器、不能連網就不能測動態網頁)，對於加上程式資料庫後的動態網頁版面呈現問題，也依然可以繼續利用 SuperPreview 內建的各項功能來進行檢查，這兩大新功能對於網頁開發者來說，都將會是非常實用的好技巧！
作者：創意眼資訊 蘇東偉，任職於網頁設計公司，並兼職為教育中心講師與圖書作者
Web：http://www.eyeshop.com.tw、http://www.webspace.com.tw
Blog：http://webok.tw
Mail：jerry@webok.tw
