原文:零元学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. HDU 1213 How Many Tables 并查集 水~

    http://acm.hdu.edu.cn/showproblem.php?pid=1213 果然是需要我陪跑T T,禽兽工作人员还不让,哼,但还是陪跑了~ 啊,还有呀,明天校运会终于不用去了~耶耶耶 ...

  2. Python——管理属性(2)

    __getattr__和__getattribute__ 眼下已经介绍了特性property和描写叙述符来管理特定属性[參考这里],而__getattr__和__getattribute__操作符重载 ...

  3. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  4. Spring常用工具类(ApplicationContextAware、DisposableBean、InitializingBean)

    原创作品,出自 "晓风残月xj" 博客,欢迎转载,转载时请务必注明出处(http://blog.csdn.net/xiaofengcanyuexj). 由于各种原因,可能存在诸多不 ...

  5. [Recompose] Lock Props using Recompose -- withProps

    Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. ...

  6. pandas 学习(四)—— 数据处理(清洗)、缺失值的处理

    创建 DataFrame: df = pd.DataFrame(np.random.randint(0, 10, (2, 4)), columns=list('ABCD')) 0. 为 data fr ...

  7. 将Sublime Text2 加入右键菜单

    在googleread里面看有人推荐sublime text2.说开发很方便.就下载一个试试.写html还真的挺爽. 于是按照vim加入鼠标右键的方法.果然可以.这里和大家分享 1. 运行中输入 re ...

  8. 【C++竞赛 D】树的深度

    时间限制:1s 内存限制:32MB 问题描述 数据结构中定义,树的高度为一棵树中所有节点的层次的最大值.现在yyy有一棵树请你帮他求出该树的高度. 输入描述 第一行一个整数T(1≤T≤20)表示数据组 ...

  9. 我眼中的c++编程总结-20150602

    断断续续的学习了非常多东西,有51.Avr.ARM.PLC.C\C++.C#.TB.MC.mql4.linux....等等,近乎填鸭或者囫囵吞枣的.甚至饿狼般的扑到里面,慢慢的积累和理解中,非常多知识 ...

  10. Thrift是一款由Fackbook开发的可伸缩、跨语言的服务开发框架

    这段时间,一直在整理公司的内部 rpc 服务接口,面临的一个问题就是:由于公司内部的系统由几个不同的语言编写的.C# ,java,node.js 等,如何实现这些内部系统之间的接口统一调用,确实是比较 ...