零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页
原文:零元学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网页的更多相关文章
- 零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)
原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...
- 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)
原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字 ...
- 零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)
原文:零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上) 几何外部的 UIElement 会在呈现的配置中以视觉化方式裁剪. 几何不一定要 ...
- 零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷, ...
- 零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步
原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍 ...
- 零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里
原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里 前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把Sa ...
- 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式
原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...
- 零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题
原文:零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题 最近收到网友Cloud的来信,询问我有关放进PathlistBox ...
- 零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能
原文:零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能 最近有机会在工作上用到Deep Zoom这个功能,我就顺便介绍 ...
随机推荐
- [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 ...
- Solving the Problem of Overfitting
The Problem of Overfitting Cost Function Regularized Linear Regression Note: [8:43 - It is said that ...
- Android官方数据绑定框架DataBinding(一)
还记得在博客<高逼格UI-ASD(Android Support Design)>的開始曾经说过,Android最新推出了一个官方的数据绑定框架-Data Binding Library. ...
- zookeeper无法启动"Unable to load database on disk"
自己的虚拟机集群.一次强制关机后,发现slave2的zookeeper起不来了 http://blog.csdn.net/ashic/article/details/47088299 下午5点29:5 ...
- udp绑定信息
1. udp网络程序-端口问题 会变的端口号 重新运行多次脚本,然后在“网络调试助手”中,看到的现象如下: 说明: 每重新运行一次网络程序,上图中红圈中的数字,不一样的原因在于,这个数字标识这个网络程 ...
- string与QString之间的转换(两种方法:fromStdString直接转换,或者fromLocal8Bit(cstr.c_str())
string str;QString qstr; //从QString 到 std::stringstr = qstr.toStdString(); //从std::string 到QStringqs ...
- 【hdu 4315】Climbing the Hill
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- [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. ...
- cellForRowAtIndexPath 设置图片
#import "UIImageView+MJWebCache.h" #import "MJPhotoBrowser.h" #import "MJPh ...
- 【noip模拟】Fancy Signal Translate (暴力 + 哈希)
题目描述 FST是一名可怜的 OIer,他很强,但是经常 fst,所以 rating 一直低迷. 但是重点在于,他真的很强!他发明了一种奇特的加密方式,这种加密方式只有OIer才能破解. 这种加密方式 ...