原文:零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页

本章将用带大家熟悉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网页的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

    原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...

  2. 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)

    原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字 ...

  3. 零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)

    原文:零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上) 几何外部的 UIElement 会在呈现的配置中以视觉化方式裁剪. 几何不一定要 ...

  4. 零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷

    原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷, ...

  5. 零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步

    原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍 ...

  6. 零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里

    原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里 前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把Sa ...

  7. 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

    原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...

  8. 零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题

    原文:零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题 最近收到网友Cloud的来信,询问我有关放进PathlistBox ...

  9. 零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能

    原文:零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能 最近有机会在工作上用到Deep Zoom这个功能,我就顺便介绍 ...

随机推荐

  1. [Angular2 Form] patchValue, setValue and reset() for Form

    Learn how to update part of form model, full form model and reset whole form. We have form definetio ...

  2. Solving the Problem of Overfitting

    The Problem of Overfitting Cost Function Regularized Linear Regression Note: [8:43 - It is said that ...

  3. Android官方数据绑定框架DataBinding(一)

    还记得在博客<高逼格UI-ASD(Android Support Design)>的開始曾经说过,Android最新推出了一个官方的数据绑定框架-Data Binding Library. ...

  4. zookeeper无法启动&quot;Unable to load database on disk&quot;

    自己的虚拟机集群.一次强制关机后,发现slave2的zookeeper起不来了 http://blog.csdn.net/ashic/article/details/47088299 下午5点29:5 ...

  5. udp绑定信息

    1. udp网络程序-端口问题 会变的端口号 重新运行多次脚本,然后在“网络调试助手”中,看到的现象如下: 说明: 每重新运行一次网络程序,上图中红圈中的数字,不一样的原因在于,这个数字标识这个网络程 ...

  6. string与QString之间的转换(两种方法:fromStdString直接转换,或者fromLocal8Bit(cstr.c_str())

    string str;QString qstr; //从QString 到 std::stringstr = qstr.toStdString(); //从std::string 到QStringqs ...

  7. 【hdu 4315】Climbing the Hill

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  8. [NPM] Create a bash script to replace a complex npm script

    In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. ...

  9. cellForRowAtIndexPath 设置图片

    #import "UIImageView+MJWebCache.h" #import "MJPhotoBrowser.h" #import "MJPh ...

  10. 【noip模拟】Fancy Signal Translate (暴力 + 哈希)

    题目描述 FST是一名可怜的 OIer,他很强,但是经常 fst,所以 rating 一直低迷. 但是重点在于,他真的很强!他发明了一种奇特的加密方式,这种加密方式只有OIer才能破解. 这种加密方式 ...