零元学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之路

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

原文地址:https://www.cnblogs.com/lonelyxmas/p/9801054.html

时间: 2024-11-06 07:13:24

零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页的相关文章

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

原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? ? 就是要让不会的新手都看的懂! ? 01 开始专案 打开Blend後选择Top Menu的 File->New Project(快捷键Shift+

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

原文:零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上) 几何外部的 UIElement 会在呈现的配置中以视觉化方式裁剪. 几何不一定要是矩形. 裁剪区域是几何的「外部」. 换句话说,如果几何是用来做为 Path 而非裁剪的资料,所显示 (未裁剪) 内容的几何区域即具有 Fill 属性. 裁剪区域是指落在几何覆叠外部的任何区域. 对於复杂的几何而言,区域的裁剪与否会受到几何的 FillRule 的影响. ? ? 开场白不知道怎麽写.

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

原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字的范围当成是遮罩 与遮罩交叠的图片部分被截取出来 进而呈现出图片镶进文字内的效果 ? 在上篇提到了Clip的基本认识,本回要介绍进阶的使用并实作 ? 本篇范例的最後结果如下: ? ? 01 在主要工作区放入一张你喜爱的图片 并使用TextBlock->输入你想要的文字,如图: ? 02 再来,运用上

零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 就是要让不会的新手都看的懂! ? ------------------

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

原文:零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能 最近有机会在工作上用到Deep Zoom这个功能,我就顺便介绍一下这个一直很夯的功能吧! 虽然有很多前辈已经写过Deep Zoom的相关介绍文章了,但我想用自己的方式再把Deep Zoom这个功能整理的更完整一点. ? 最近有机会在工作上用到Deep Zoom这个功能,我就顺便介绍一下这个一直很夯的功能吧! ? 虽然有很多前辈已经写过Deep Zoom的相关介

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

原文:零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题 最近收到网友Cloud的来信,询问我有关放进PathlistBox的物件,被选取後会出现蓝底蓝框的问题 经由他的同意,我决定把这个实作上遇到的问题及解决的方式,用一篇文章来跟大家分享 ? 最近收到网友Cloud的来信,询问我有关放进PathlistBox的物件,被选取後会出现蓝底蓝框的问题 经由他的同意,我决定把这个实作上遇到的问题及解决的方式,用一篇文章来跟大家

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

原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 此为本篇ListBox的基本样式范例 很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页 01 开启一个新专案後,放入一个ListBox 你会看到是个空白的框框,什麽东西都没有? 不是应该会有一行一行可以放文字的容器吗? 别着急,让我们来看看到底Li

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 就是要让不会的新手都看的懂! ? <专情王子?查理B> Border是Blend里最简单的布局容器,可以使用Borde

零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton

原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 附上简单的范例,请点击进行换页,并注意换页内容 范例请点我 ? 跟着范例做做看吧! 01 使用小猴子附上的的范例档案,或是自己做一个类似下图的版面 ? (范例内的