顯示具有 Expression Web 標籤的文章。 顯示所有文章
顯示具有 Expression Web 標籤的文章。 顯示所有文章

2012年1月29日 星期日

如何設定Silverlight的背景透明效果

授課時曾經數次有學員問到,Silverlight動畫可否做到像Flash動畫的背景透明效果(對於設計銜接上的彈性會較高)?答案是當然可以,只是每次都沒有很適當的場合或時間可以說明,現在將細節做法公布在此囉!

程式設計師的做法:
請找到xaml檔,例如在Expression Blend裡的MainPage.xaml,點選滑鼠右鍵,選擇外部編輯(預設應該會開啟記事本之類的文字編輯器),或直接使用Visual Studio進行編輯,將裡面的<UserControl>裡的 <Grid x:Name="LayoutRoot" Background="White"/> 程式碼,改為 <Grid x:Name="LayoutRoot" Background="transparent"> ,然後再開啟網頁,將Silverlight的.xap檔案插入後,切換到網頁程式碼模式,將 <param name="background" value="white" /> 改為 <param name="background" value="transparent" /> ,並再將下一行裡插入 <param name="windowless" value="true" /> 即可!

上面這種辦法是程式設計師採用修改程式碼的方式,可是對於美編設計師來說,可能會覺得像是無字天書看不懂或者是擔心改錯code,那有無適合美編設計師的修改模式呢?答案當然是有的,請參考以下資料。

美編設計師的做法:
在Expression Blend裡,點選「物件與時間軸」裡的「LayoutRoot」,在「屬性」裡,將Alpha數值按著滑鼠左鍵不放,往左拖曳。關於Alpha參數與Background 屬性的細節說明,若您有興趣,可以到此處的MSDN取得更詳細資料。
1

也就是將Alpha數值變成0%,此時可以看到工作區裡的白色背景已經不見了,變成透明背景,製作透明背景,必須將背景設定成單色,不能將背景設定成漸層色或者是放入一個填滿背景區域的圖片呦!
2

過來就是您在Blend裡製作動畫等步驟,做完記得「專案 / 執行專案」,取得Silverlight的.xap檔案。

接著請開啟Expression Web,新增一個網頁,因為我們要測試透明背景是否正常,建議按下滑鼠右鍵,選擇「網頁屬性」,將「色彩 / 背景」設定成跟白色差異性較大的其他顏色。
3

請將之前在Blend裡產生的.xap檔案放到網站中,滑鼠游標置入網頁裡要放入的位置,選擇「插入 / 媒體 / Silverlight」。
4

請在置入的Silverlight上按下滑鼠右鍵,選擇「ActiveX控制項」。
5

請在「物件標籤」裡設定此Silverlight的寬高尺寸。
6

重點是要在「參數」裡,點選「background」這個屬性,點選「修改」鈕。
7

將「資料」裡面改輸入成「transparent」,按下「確定」鈕。
8

回到參數的畫面後,按下「新增」鈕。
9

「名稱」請輸入「windowless」,「資料」請輸入「true」,按下「確定」鈕。關於windowless屬性的細節說明,若您有興趣,可以到此處的MSDN取得更詳細資料。
10

剛剛新增的「windowless」參數已經出現在「參數」裡的清單中了,請再按下「確定」鈕。
11

完成後請到瀏覽器測試看看,應該可以看到您的Silverlight物件的背景是透明的呦!
12

您也可以將網頁放入背景圖片,測試一下Silverlight物件仍舊維持著背景透明的效果。
13



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內建的各項功能來進行檢查,這兩大新功能對於網頁開發者來說,都將會是非常實用的好技巧!



2011年8月4日 星期四

Expression Web 4 升級 SP2 後的變革 - 支援 HTML5 與搭配 CSS3+jQuery

這是一篇我幫台灣微軟官方撰寫的Expression軟體系列文章之一,主要是講述ExpressionWeb4更新到Service Pack2之後,出現了不少令人驚豔的新功能,操作上也更為穩定,本文將介紹使用最新的HTML5新結構標籤加上原有標籤,結合部分CSS3功能與jQuery,構成新型態的網頁編排版面(支援Internet Explorer9.0以及其他廠牌新版瀏覽器)。除了有刊載在Microsoft Expression官網之外,也同步放在此部落格上供您瀏覽參考!

您可以到 http://www.microsoft.com/downloads/zh-tw/details.aspx?familyid=87d98075-a40b-40b8-86bc-38e7a7606ca4&displaylang=zh-tw ,點選下載鈕,下載WebSP2_Trial_zh-Hant.exe檔案完成後,滑鼠左鍵點選此檔2下(請先關閉ExpressionWeb),以進行更新安裝。

1

本範例相關的檔案,您可以點此下載本範例,以方便您做練習對照用途!

更新完成後,開啟ExpressionWeb,選選功能表的「工具」/「網頁編輯器選項」。
2

在「製作」的頁面標籤裡,請將「文件類型宣告」,挑選成「HTML5」(次要結構描述可維持原有設定不挑選),CSS「結構描述版本」,請挑選成「CSS3 draft」,完成後請按下「確定」鈕。
3

選擇功能表上的「檔案」/「新增」/「頁面」,在「一般」裡,挑選「HTML」,按下「確定」鈕,請將檔案命名成「default.html」。
4

切換到「程式碼」檢視模式,可以看到產生了HTML5的基礎文件標籤結構。
5

下圖為原本ExpressionWeb預設產生的XHTML 1.0 Transitional模式的文件標籤架構,您可以跟上圖比較一下標籤間的差異性(HTML5解構語法更為精簡)。
6

接著請在功能表上的「檔案」/「新增」/「頁面」,在「一般」裡,挑選「CSS」,按下「確定」鈕,請將檔案命名成「page.css」。
7

在「default.html」頁面上,點選功能表上的「格式」/「CSS樣式」/「附加樣式表」。
8

按下「瀏覽」鈕,挑選到page.css,選擇附加至「本頁」,附加為「連結」,按下「確定」鈕。
9

點選功能表上的「面板」/「程式碼片段」,此為SP2新增的面板功能。
10

切換到「程式碼」模式,將<meta content="text/html; charset=utf-8" http-equiv="Content-Type">這行反白選取,點選「程式碼片段」裡的「HTML」/「HTML5 utf-8 meta」,改成更精簡的<meta charset="utf-8">寫法。
11

接著我們要擴充「程式碼片段」的功能,請點選 http://gallery.expression.microsoft.com/HTML5Snippets ,按下此網頁裡的「DOWNLOAD CODE SNIPPET」鈕。
12

把下載好的「HTML5.zip」檔案解壓縮,將裡面的「Layout」與「Microdata」兩個目錄,按下滑鼠右鍵選擇「複製」。
13

將兩個目錄「貼上」到底下位置(視您使用的Windows作業系統而不同):
Windows XP:
C:\Documents and Settings\[your windows user name]\Application Data\Microsoft\Expression\Web 4\mySnippets
Windows Vista or Windows 7:
C:\Users\[your windows username]\AppData\Roaming\Microsoft\Expression\Web 4\mySnippets
14

回到Expression Web裡,在「程式碼片段」中,按下滑鼠右鍵,選擇「重新整理」。
15

會發現多了「Layout」與「Microdata」兩個選項,請再點選位於右上方的「選項」/「新增程式碼片段」。
16

例如我們要新增一個HTML5的新標籤「aside」,並輸入標籤語法後,按下「確定」鈕。
17

接著請點選功能表上的「面板」,勾選「管理樣式」與「工具箱」。
18

您仍須學習理解CSS幾種主要選取器的基礎觀念,本範例會用到「id選取器」、「class選取器」、「HTML標籤選取器」。
19

本範例即將設計規劃的網頁版面區域如下,除了最外面一層用傳統的div標籤包覆之外,其餘區域皆採用HTML5新標籤構成。
20

在「工具箱」/「HTML」/「標籤」裡,在<div>標籤上按著滑鼠左鍵不放,拖曳到程式碼裡的<body>標籤下。
21

在「分割」模式裡,將<div></div>標籤反白選取,在「設計」模式頁面裡,將滑鼠左鍵點選一下,「管理樣式」裡的「新樣式」才會變成可點選狀態。
22

因為希望此<div>標籤是包含整個<body>標籤的內容範圍,且確定只有此處僅有一個區域(名稱可為唯一值不需重複),因此適合用id選取器,請在選取器裡打上「#body-all」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「600」像素。
23

在「類別」/「方塊」裡,取消勾選「margin」的全部相同,將「right」與「left」設定成寬「auto」,按下「確定」鈕,如此我們就製作了一個寬600像素且會置中對齊的區域。
24

請將滑鼠游標至於<div>與</div>的中間,將「程式碼片段」/「Layout」裡的「Header」,使用滑鼠左鍵點選兩下。
25

一樣將<header>與</header>標籤反白選取,在「設計」模式頁面裡,將滑鼠左鍵點選一下,再點選「管理樣式」裡的「新樣式」。
26

因為<header>標籤未來在版面上仍有可能重複運用到,所以若是要設定此標籤樣式,最好使用class選取器,選取器名稱設定為「.header-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「height」設定成高「150」像素。
27

在「背景」裡,將「background-color」設定色彩為「#D27E00」,「background-image」則按下「瀏覽」鈕,選擇「headerbg1.png」的背景圖,此背景圖為事先製作的png去背圖檔格式。
28

在「框線半徑」裡,勾選「全部相同」,輸入「20」像素,按下「確定」鈕,此為CSS3的新屬性,可以不用製作圓邊圖檔而產生圓角矩形樣式。
29

可按下「預覽」鈕,或直接按下鍵盤上的「F12」鈕,進行網頁瀏覽,但要注意的是,本範例必須由Internet Explorer9.0以後版本方可正常顯示。
30

過來要設計選單區域,我們改用IntelliSense來做講解說明,請將滑鼠游標插入到</header>標籤後,按下鍵盤上的「Shift」鍵與鍵盤上的「<」,,出現IntelliSense標籤清單後,選擇「nav」標籤。
31

將<nav>與</nav>標籤反白選取,點選「管理樣式」/「新樣式」。
32

選取器輸入「.nav-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「130」像素。
33

因為中間區塊總共需要並排3個區域,所以在「版面位置」裡的「float」,必須選擇成「left」靠左對齊。
34

請依照如下圖類別裡的「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
35

請在「程式碼清單」/「Layout」(或是使用「IntelliSense」輸入),於「程式碼」模式裡,在</nav>標籤後,輸入<article>標籤,將<article>與</article>標籤反白選取,點選「管理樣式」/「新樣式」,選取器輸入「.article-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「250」像素。
36

請依照如下圖類別裡的「版面配置」、「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
37

請在「程式碼清單」/「Layout」(或是使用「IntelliSense」輸入),於「程式碼」模式裡,在</article>標籤後,輸入<aside>標籤,將<aside>與</aside>標籤反白選取,點選「管理樣式」/「新樣式」,選取器輸入「.aside-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「width」設定成寬「100」像素。
38

請依照如下圖類別裡的「版面配置」、「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
39

請在「程式碼清單」/「Layout」(或是使用「IntelliSense」輸入),於「程式碼」模式裡,在</aside>標籤後,輸入<footer>標籤,將<footer>與</footer>標籤反白選取,點選「管理樣式」/「新樣式」,選取器輸入「.footer-style1」,定義於「現有樣式表」,勾選「套用新樣式到文件選取範圍」,並將URL選擇成「page.css」,在「類別」/「位置」裡,將「height」設定成高「60」像素。
40

特別要注意的是,因為<footer>標籤並非與<nav>、<article>、<aside>三個標籤並排在一起,而是另外獨立於下方區域,所以必須在「版面配置」裡,將「clear」設定成「both」。
41

請依照如下圖類別裡的「背景」、「框線半徑」、「方框」,分別選擇或輸入相關設定。
42

請在<footer>標籤後,放置一個<address>標籤,此標籤在HTML5裡的定義,是用來提供聯絡人資訊,所以屆時出現在網頁時,字體會自動以斜體來表示。
43

請在<address>標籤裡,輸入「若有問題請聯絡我」的文字,回到「設計」模式,將「聯絡我」這三個字反白選取,選擇功能表上的「插入」/「超連結」。
44

由於希望此超連結是E-Mail型態,所以左方請選擇「電子郵件地址」,並在右方的「電子郵件地址」與「主旨」裡,分別輸入您的E-Mail與主旨文字,按下「確定」鈕。
45

請將<address>與</address>標籤反白選取,點選「管理樣式」/「新樣式」。
46

在選取器裡選擇「address」,此型態為HTML標籤選取器。
47

請參照如下圖內的設定,定義於「現有樣式表」,並將URL選擇成「page.css」,在「字型」/「color」裡,輸入「#008000」。
48

由於希望此標籤裡的字為置中對齊,請將「區塊」/「test-align」設定成「center」。
49

本範例我們運用了三種選取器,下圖為在「管理樣式」裡使用的對照,請您務必確認是否顯示的圖示正確,這是很基本但重要的觀念。
50

完成的版面備置如下圖所示,但目前有個小缺點,就是在中間區域的選單區<nav>、文章內容區<article>、側邊廣告區<aside>這三個標籤,因為內容數量多寡不一,在文章內容區裡的字數較多,造成選單區與側邊廣告區往下的範圍,沒辦法延伸跟文章內容區下緣切齊。
51

針對這個問題,我們可以採用jQuery做修正,請切換到「程式碼」模式,將滑鼠游標插入到<meta>標籤下,選擇「程式碼片段」/「jQuery」/「一般」/「jQuery 指令碼參照 - MS CDN」。
52

筆者建議您,在瀏覽器上輸入「http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js」,會出現如下畫面,請選擇「儲存」/「另存新檔」,請將「jquery-1.5.2.min.js」儲存到您目前的網站目錄下。
53

回到Expression Web裡,請將「程式碼」模式裡的「http://ajax.aspnetcdn.com/ajax/jQuery/」網址路徑移除,讓script src裡僅剩下「jquery-1.5.2.min.js」的檔名,可以在「資料夾清單」裡按下鍵盤上的「F5」重新整理後,看到之前儲存放入的「jquery-1.5.2.min.js」,這樣做的好處是,未來不必擔心該網址的檔案被移除(或是您測試時無法連結網路),而造成您的網頁顯示有問題,而且您也才能夠針對此檔進行編修。
備註:「資料夾清單」裡點選檔案時,會出現此檔案資訊(若為圖檔則顯示縮圖),亦為SP2更新後之新功能,但此功能僅支援Windows Vista與7。
54

請開啟「jquery-1.5.2.min.js」檔案,在最後面輸入jQuery程式碼(請注意,若您命名的class名稱與本範例不同時,則需要自行修改部分程式碼內參數):
$(function(){
$(".nav-style1, .article-style1, .aside-style1").css("height", Math.max($(".nav-style1").height(), $(".article-style1").height(), $(".aside-style1").height()));
});
55

完成上述jQuery程式碼輸入後,請儲存「jquery-1.5.2.min.js」檔案,請瀏覽「default.html」網頁,即會呈現如下圖所示,選單區、文章內容區、側邊廣告區的範圍下緣都會自動延伸切齊。
56

網頁區塊版型完成後,您可以點選功能表上的「檔案」/「另存新檔」,在「存檔類型」裡進行挑選,若是要使用一般傳統無程式資料庫的網頁,請選擇「動態網站範本(*.dwt)」,若是要搭配ASP,NET程式資料庫的網頁運用,則需選擇儲存成「主版頁面(*.master)」。
57

本範例相關的檔案,您可以點此下載本範例,以方便您做練習對照用途!


Related Posts Plugin for WordPress, Blogger...

訂閱RSS