Expression Web 4 升級 SP1 與 SP2 後的變革 - SuperPreview 的新演進

這是一篇我幫台灣微軟官方撰寫的Expression軟體系列文章之一，主要是講述ExpressionWeb4更新到Service Pack2之後，SuperPreview這個軟體也跟著進化的新功能，除了有刊載在Microsoft Expression官網之外，也同步放在此部落格上供您瀏覽參考！

首先，若您還不了解什麼是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內建的各項功能來進行檢查，這兩大新功能對於網頁開發者來說，都將會是非常實用的好技巧！