Expression Design 4 - Chapter 2 熟悉Design并且快速設計出Silverlight網頁

本章将用帶大家熟悉Design 4并製作簡易的網頁版面，也會讓你瞭解如何利用Design 4内建功能産出Xaml

直接開始噜!

01

開啟一個新的專桉(快捷鍵Ctrl+N)

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image001_2.png"></a>

完成新專桉開啟後，在主要工作區放入一個Rectangle(快捷鍵M)

并使用Selection(快捷鍵V)調整到适當大小後，在Properties-&gt;Apperance把顔色調整為Fill #3D3838

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image003_2.jpg"></a>

在區塊内打上一些字，使用Text工具(快捷鍵T)，并且調整字的顔色為Fill #FFFFFF、Stroke #918F8F

再使用筆刷，寬度為8px(範例使用Design内建筆刷Coarse Round Brush)

筆刷的顔色，需在Stroke下調整

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image005_2.jpg"></a>

可以依你的喜好，選擇你想要的筆刷類型

運用了筆刷以後，你的文字是不是變得比較有設計感了呢?

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image006_2.png"></a>

02

在左側放入1個Ellipse&gt;Fill #3D3838 (Ellipse快捷鍵L)

再來按下Ctrl+C複製，并且Ctrl+V随意的貼上，使闆面上有3個後要當成Button的橢圓形

接着全選三個Ellipse後-&gt;TopMenu-&gt; Arrange-&gt;Align-&gt;Horizontal Centers，使之自動垂直排列

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image008_2.jpg"></a>

完成後拉到左邊适當位置，補上文字，并且使用Arrange-&gt;Align-&gt;Center，讓文字位于橢圓形中間

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image009_2.png"></a>

03

進入版面切割，請使用Slice(快捷鍵K)，把剛剛做好的版面切成适當大小，如下圖範例

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image011_2.jpg"></a>

使用Slice做切片時，可以直接在Properties-&gt;Current Slice Properties下做預覽

另外，使用Selection(快捷鍵V)也可以直接調整切片範圍大小

這點我覺得跟PhotoShop相比友善很多

04

若是真的要與PhotoShop相比，Design有一招更厲害的…….

選取切片後，可以在Current Slice Properties下，做圖層選擇

看圖跟着做可以更瞭解：

為了做讓大家更瞭解，我在原本的三個橢圓形後面放了一個黃色長方形

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image012_2.png"></a>

接着到Current Slice Properties，你可以看到，橢圓形後面多了黃色背景

但是在設計中，我希望隻有單獨的橢圓形Button加上裡面的字......

這時，請在Current Slice Properties-&gt;Format-&gt;Slice contents下，把不要的圖層取消勾選

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image013_2.png"></a>

這個在做網頁或是Silverlight介面設計時真的很友善，我不需要去管背景有什麽，可以單獨切割要的部分

05

切片完成後，接着就是輸出啦!

點選File-&gt;Export就會出現下圖視窗

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image015_2.jpg"></a>

剛剛所提到的Format-&gt;Slice contents圖層選擇這邊也有

因為剛剛切成四個切片，是以會分為4個檔桉，你可以從Format下選擇你要的檔桉類型

我們選擇成XAML Silverlight 3 Canvas

并且在Container旁的下拉式選單内選擇檔桉類型為HTML&amp;Images

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image017_2.jpg"></a>

按下Browse新增一個資料夾

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image019_2.jpg"></a>

接着，按下右下角的Export All，輸出我們的專桉

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image020_2.png"></a>

06

到剛剛我們設定存檔的地方，看看Export後的産出結果

資料夾内，有三個檔桉：

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image022_2.jpg"></a>

第一個

是剛剛切片後的四個圖檔，各成一個xaml檔

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image024_2.jpg"></a>

第二個是html檔

輕按兩下後開啟網頁，你會發係已經是一個Silverlight的網頁了

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image026_2.jpg"></a>

第三個是.js檔

07

我們把.html檔用記事本打開….

來看看有甚麽其妙的事情發生!!

<a href="http://files.dotblogs.com.tw/yuan0716/1104/75fc35fefeb9_CEFF/clip_image028_2.jpg"></a>

看到了嗎?是CSS耶!

是以，Design可以把做好的版面及畫面，利用Export直接産出可用的CSS

你大可不必跟以前一樣，自己花大把的時間去寫CSS，因為Design都已經幫你做好了

如果能活用Design，将會對你的設計工作帶來事半功倍的效果喔!

附上範例專桉

本篇的教學就到此。