上個星期在'WebsiteSpark創意網站比賽，總獎金30萬，還可獲得免費商用軟體'的講座中, 跟各位同學提到了新技術讓IDEAS得以完整實現的幾個案例，譬如案例一: 故宮之寶清明上河圖, 有可能讓外國友人在網站上瀏覽嗎?
Yes, we can! http://mic-tw.office-on-the.net/npm/Default.html
案例二: 透過網站將PlayBoy 雜誌成為自己的專屬收藏
Oh, I am love in it! http://playboy.covertocover.com/
案例三: 找找看美國歷任總統藏在哪裡 http://www.silverlightbuzz.com/2009/08/03/obama-to-jfk-deep-zoom/
案例四: 深度瀏覽披頭四的紀念品
http://memorabilia.hardrock.com/
在介紹完了上面幾個案例後，台下同學都躍躍欲試，對於新技術能夠完整實現IDEAS感到非常興奮。幾個同學就提到，如果我不是程式人員(其實我們也認同，上面幾個案例絕對是設計師跟程式人員完美合作才能做到的)，有沒有一些寫好的現成功能，讓我可以只要focus on design, 然後把功能套上去就好了。
沒錯，直接套用功能是Silverlight 技術的一個構想。目的就是要讓程式人員能夠focus在功能的開發，Design人員能夠快樂的主導設計。因此，我接下來就為各位同學介紹如何將程式人員開發好的功能，直接套用在網頁設計上。讓各位也能體驗一番輕鬆上手製作案例一的故宮清明上河圖。
附註: 若各位對Silverlight以及介面設計工具Expression有更深入的探討，請參考設計電力公司的深度教學。
1. 下載deepzoom composer: http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en
2. 安裝deepzoom composer
3. 啟用deepzoom composer， 新增一個專案
4. 點選Add image 選擇要deepzoom的圖片
5. 將圖片import進來後選擇接著進入compose的階段，將image欄位的照片拖曳到編輯螢幕，決定圖片在螢幕中出現的位置及大小。
6.之後進入Export的按鈕，選擇custom, 選擇儲存的路徑為D:\\deepzoom mouse\Exported Data, 再選擇preview檢視目前的成果。接下來就可以將專案Export.
7. 將專案Export之後我們可以進到資料夾來看看這個專案產生了哪些files 與 image
8. 至Expression gallery 下載 ‘DeepZoom Touch & Mouse’ behavior(以下簡稱DeepZoom touch behavior)(http://gallery.expression.microsoft.com/en-us/DeepZoomTouch)
8. 我們可以看到 'Deepzoom touch' behavior 打包成.zip的檔案
解壓縮之後我們可以看到DeepZoom touch 資料夾下面有一個DeepZoomTouch.dll檔
9. 回桌面，至程式集打開Expression blend，本文一至第八步驟是利用deepzoom composer產生所需要的deepzoom圖檔，從第九步驟開始，我會開始介紹如何利用Expression blend 產生deepzoom website. ( 還沒有下載expression 的同學，請參考websiteSaprk方案，以及下載步驟)
寫到也許讀者會問，用deepzoom composer一樣可以產生 伸縮自如的deepzoom專案，為什麼小編還要大費周章的繼續介紹利用Expression blend產生deepzoom website呢?
原因就是: Deepzoom composer是一個產生deepzoom圖檔的編輯器，也就是說可以在deepzoom composer裡面編排圖片並產生專案。但若要將deepzoom 圖檔與網頁整合，我們還是需要將deepzoom所產生的圖檔放到Expression blend來，利用Expression blend同時編輯網頁及deepzoom 圖檔。
10. 打開Expression blend, 選擇新增一個 ’Silverlight application + website專案’，file name 為SilverlightApplication1
11. 點選References, 右鍵 'Add Reference…’, 將剛剛至Expression gallrey下載下來的DeepZoomTouch.dll 加進來，加進來後，點選上方工作列的Project, 選擇Rebuilt Project
Rebuilt Project之後我們可以看到在 Silverlight Application1Site下面多了一個ClientBin資料夾。接下來，就要把deepzoom composer所產生的圖檔放到ClientBin資料夾中
12. 至D:\deepzoom mouse\Exported Data\deepzoom mouse\GeneratedImages將剛剛利用Deepzoom composer所產生的兩個檔案dzc_output_files 及dzc_output_images 複製到新建的silverlight 專案的ClientBin資料夾之下，路徑為D:\Demo\deepzoom mouse\SilverlightApplication1\SilverlightApplication1Site\ClientBin
(請注意這裡都是相對路徑)
13. 因為我們剛剛將dzc_output_files 及dzc_output_images 資料夾放到ClientBin資料夾之下，所以請關掉Expression Blend之後，再重新開啟剛剛建立的SilverlightApplication1專案，讓Expression Blend重新讀取一次這個專案。
重開之後我們就會看到ClientBin資料夾之下有dzc_output_files 及dzc_output_images 兩個檔案
14. 步驟10-13介紹了如何將deepzoom composer所產生的圖檔放到Expression blend中，接下來我要介紹如何將Deepzoom mouse and Touch的行為應用到圖檔中。
首先，我們要先選擇建立一個MultiScaleImage物件。
切換到Objects欄位，點選左下角的Assets, 選擇Controls-> Basic Controls-> MultiScaleImage。
將MultiScaleImage 物件拖曳到LayoutRoot下面
15. 接下來，我們要將deepzoom composer所產生的圖檔指定為MultiScaleImage物件的來源檔案。
點選MultiScaleImage物件，選擇Proporties-> 在Common Properties的Source欄位，點選下拉按鈕，可以看到Expression Blend已經幫我們找到了來源檔案。可以在MainPage.xml頁面中看到來源檔案已經抓進來了。
16. 接下來在點選左下角的Assets-> Basic Controls-> DeepZoomMouse, 將DeepZoomMouse拖曳到MultiScale之下。
17. 按F5預覽專案目前成果，即可以看到我們我們已經順利將deepzoom圖片放進Silverlight專案了, 接下來就可以繼續進行Silverlight 專案的其它編輯。