???????????????????
本章将用带大家熟悉Design 4并制作简易的网页版面，也会让你了解如何利用Design 4内建功能产出Xaml
?
?本章将用带大家熟悉Design 4并制作简易的网页版面，也会让你了解如何利用Design 4内建功能产出Xaml
??
??
?直接开始噜!
??
?01
?开启一个新的专案(快捷键Ctrl+N)
? ??
?完成新专案开启後，在主要工作区放入一个Rectangle(快捷键M)
?并使用Selection(快捷键V)调整到适当大小後，在Properties->Apperance把颜色调整为Fill #3D3838
? ??
?在区块内打上一些字，使用Text工具(快捷键T)，并且调整字的颜色为Fill #FFFFFF、Stroke #918F8F
?再使用笔刷，宽度为8px(范例使用Design内建笔刷Coarse Round Brush)
?笔刷的颜色，需在Stroke下调整
??
? ??
?可以依你的喜好，选择你想要的笔刷类型
?运用了笔刷以後，你的文字是不是变得比较有设计感了呢?
? ??
?02
?在左侧放入1个Ellipse>Fill #3D3838 (Ellipse快捷键L)
?再来按下Ctrl+C复制，并且Ctrl+V随意的贴上，使板面上有3个後要当成Button的椭圆形
??
?接着全选三个Ellipse後->TopMenu-> Arrange->Align->Horizontal Centers，使之自动垂直排列
? ??
?完成後拉到左边适当位置，补上文字，并且使用Arrange->Align->Center，让文字位於椭圆形中间
? ??
?03
?进入版面切割，请使用Slice(快捷键K)，把刚刚做好的版面切成适当大小，如下图范例
? ??
?使用Slice做切片时，可以直接在Properties->Current Slice Properties下做预览
??
?另外，使用Selection(快捷键V)也可以直接调整切片范围大小
?这点我觉得跟PhotoShop相比方便很多
??
?04
?若是真的要与PhotoShop相比，Design有一招更厉害的…….
?选取切片後，可以在Current Slice Properties下，做图层选择
??
?看图跟着做可以更了解：
?为了做让大家更了解，我在原本的三个椭圆形後面放了一个黄色长方形
? ??
?接着到Current Slice Properties，你可以看到，椭圆形後面多了黄色背景
?但是在设计中，我希望只有单独的椭圆形Button加上里面的字......
??
?这时，请在Current Slice Properties->Format->Slice contents下，把不要的图层取消勾选
? ??
?这个在做网页或是Silverlight介面设计时真的很方便，我不需要去管背景有什麽，可以单独切割要的部分
??
?05
?切片完成後，接着就是输出啦!
?点选File->Export就会出现下图视窗
? ??
?刚刚所提到的Format->Slice contents图层选择这边也有
??
?因为刚刚切成四个切片，所以会分为4个档案，你可以从Format下选择你要的档案类型
?我们选择成XAML Silverlight 3 Canvas
?并且在Container旁的下拉式选单内选择档案类型为HTML&Images
? ??
?按下Browse新增一个资料夹
? ??
?接着，按下右下角的Export All，输出我们的专案
? ??
?06
?到刚刚我们设定存档的地方，看看Export後的产出结果
?资料夹内，有三个档案：
? ??
?第一个
?是刚刚切片後的四个图档，各成一个xaml档
? ??
?第二个是html档
?双击後开启网页，你会发系已经是一个Silverlight的网页了
? ??
?第三个是.js档
??
?07
?我们把.html档用记事本打开….
?来看看有甚麽其妙的事情发生!!
? ??
?看到了吗?是CSS耶!
??
?所以，Design可以把做好的版面及画面，利用Export直接产出可用的CSS
?你大可不必跟以前一样，自己花大把的时间去写CSS，因为Design都已经帮你做好了
??
?如果能活用Design，将会对你的设计工作带来事半功倍的效果喔!
??
??
?附上范例专案
? ??
??
??
?本篇的教学就到此。
??
??
?(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)
???????????????????一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您
零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页
原文地址：https://www.cnblogs.com/lonelyxmas/p/9801054.html