2011年8月11日 星期四

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,來進行對多種瀏覽器的網頁開發測試。

1

要使用「遠端瀏覽器」的功能,您必須點選位於SuperPreview介面右上角的「註冊SuperPreview線上服務」鈕。
2

出現如下圖的畫面後,請按下「註冊」鈕。
3

輸入您的電子郵件信箱後(請填寫您實際有使用的E-Mail),按下「下一步」鈕。
4

系統會立即發送一封認證的電子郵件到您的信箱裡。
5

稍等一下再去收電子郵件(若沒有看到請確認之前填寫的E-Mail是否有誤,或是確認有無被歸到廣告信夾裡),會收到一封主旨為「SuperPreview online service Beta activation」的郵件(內容如下圖),請點選此郵件裡的驗證超連結網址。
6

驗證成功則會出現如下圖的畫面。
7

請回到SuperPreview線上服務啟用介面裡,按下「啟用」鈕。
8

如此就完成了整個遠端瀏覽器線上服務的啟用程序,按下「結束」鈕離開此介面。
9

接著我們要啟動遠端瀏覽器的功能,下圖為尚未啟動前的畫面,筆者電腦因為已有安裝Internet Explorer9.0版與Firefox3.6版,所以「本機端瀏覽器」會出現IE6、IE7、IE8、IE8相容性檢視、IE9與Firefox3.6,而「遠端瀏覽器」裡目前呈現的是灰色無法使用的狀態圖示。
10

請點選位於SuperPreview介面右上角的「使用遠端瀏覽器啟用或停用預覽」鈕(此處原本為「註冊SuperPreview線上服務」鈕,註冊完成會變成此功能)。
11

備註:若要重新註冊SuperPreview線上服務,可以點選位於SuperPreview介面右上角的「選項」鈕,裡面的帳戶管理有「停用」跟「刪除帳號」的功能。

如此「遠端瀏覽器」裡的各種瀏覽器圖示就會變成彩色的狀態,代表著可以選用。
12

請點選左方視窗裡的其中一個瀏覽器圖示,此時位於左下角的「基準線」,會出現以該瀏覽器為比較的基準(例如筆者選擇IE9)。
13

請點選右方視窗裡的其中一個瀏覽器圖示,此時下方的「比較」會出現該瀏覽器,您可以再繼續按下「新增」鈕,增加各種本機或遠端瀏覽器進來。
14

例如筆者點選增加「Safari5」瀏覽器的圖示。
15

可以按下「尺規」鈕,並在上或左右方的尺規上,按著滑鼠左鍵不放,拖曳參考線到畫面上,並可以開始切換「比較」區裡的各個瀏覽器圖示,以進行網頁上各區域的位置測試,例如下圖為IE9與Chome瀏覽器之間的測試比對。
16

或者可以按下「重疊版面配置」鈕,SuperPreview會將「基準線」與「比較」區裡選擇的瀏覽器,進行兩個畫面上的重疊,可以讓您快速觀察到,兩個瀏覽器解析出來的網頁差異性,例如下圖是IE9與IE6的各自呈現的網頁畫面加以重疊比較,能夠明顯看出來差異頗大。
17

上述的操作方式,是原本SuperPreview的舊功能,可惜缺點是只能用來查測一般靜態網頁,若要對使用程式資料庫構成的動態網頁進行測試,就顯得力有未逮(很多網頁必須經由程式抓取資料庫內容等複雜點選流程才能產生),但這個問題隨著「頁面互動模式」功能的推出,已經可以突破解決。

例如下圖為筆者使用Expression Web搭配Access資料庫,免Coding即可快速產生的ASP.NET通訊錄程式系統,前台並使用了主版頁面(.master)與CSS來完成版面架構,可以點選功能表裡的「網站」/「網站設定」。
18

在「預覽」的頁面標籤裡,勾選「使用Microsoft Expression Development Server」與選擇「僅PHP與ASP.NET網頁」。
19

如此就可以讓沒有IIS(Internet Information Services)環境的一般電腦,也能模擬執行成有ASP.NET程式語法的網站伺服環境。
20

例如下圖為執行起來的ASP.NET網頁,網頁檔名為callbook.aspx,可點選其中的「點選觀看」超連結點來進入該筆資料的細節內容。
21

如下圖畫面所示,顯示出來的詳細內容為傳遞 id值的callbookdetail.aspx,這是一種很常見的動態網頁類型。
22

以往舊版的SuperPreview,是難以查測如上所述的動態程式資料庫網頁,因為SuperPreview裡的原理,是把網頁快照成類似圖片格式後進行比對,所以無法再對裡面的超連結進行點選,不過目前新版有「頁面互動模式」功能,可以按下「使用頁面互動模式登入安全網站並瀏覽到您要預覽的網頁」鈕。
23

出現頁面互動模式視窗後,若頁面顯示不正確時,可以勾選左下角的「使用替代驗證」,來試看看是否能解決問題(若無問題可不勾選)。
24

此時您就可以在此視窗裡點選網頁上的超連結點進行測試。
25

出現到進一步的程式內頁畫面後,假如您要測試的為此畫面資料,希望檢查網頁美編版型是否因為資料動態帶入而被破壞,請按下「預覽」鈕。
26

此時會回到SuperPreview原本比對的畫面,例如下圖為筆者的動態程式內頁資料,分別在IE9與IE6的瀏覽器環境下呈現的狀況,很明顯看到在IE6的環境裡,版型有因為資料帶入而導致突出的問題需要修正!
27

您也可以點選位於右下角的「DOM」鈕,觀看不同瀏覽器解析出來的DOM樹狀檢視,來做為之後修改上的參考依據。
28

SuperPreview的「遠端瀏覽器」新功能,能夠讓您將主流的瀏覽器一網打盡,以進行不同版本間的仔細比對,可以節省不少交叉測試而產生的成本與時間,而「頁面互動模式」的新功能,搭配Expression Web的本機端Development Server功能,可以解決傳統美編人員長久以來的困擾(沒有伺服器、不能連網就不能測動態網頁),對於加上程式資料庫後的動態網頁版面呈現問題,也依然可以繼續利用SuperPreview內建的各項功能來進行檢查,這兩大新功能對於網頁開發者來說,都將會是非常實用的好技巧!



0 意見:

張貼留言

若對於本篇文章有任何批評指教或鼓勵建議,歡迎您留言讓我知道...