Expression Design 4-Chapter 2 familiar with Design and quick Design of Silverlight webpage

This chapter will show you how to use the built-in functions of Design 4 to create a simple web page layout.

Start snore directly!

01

Enable a new category (shortcut: Ctrl + N)

After enabling the new job, put a Rectangle (shortcut key M) in the main work area)

Use the Selection (shortcut key V) to adjust it to the appropriate size. In Properties-> Apperance, set the color to Fill #3D3838.

Add some words in the block, use the Text tool (shortcut key T), and adjust the color of the words to Fill # FFFFFF, Stroke # 918F8F

Use a Brush with a width of 8 PX (for example, use the Design built-in Brush Coarse Round)

The color of the brush, which must be adjusted under Stroke.

You can select the paint type you want based on your preferences.

After you use the paint brush, do you have a sense of design?

02

Put 1 Ellipse> Fill #3D3838 on the left side (Ellipse shortcut key L)

Press Ctrl + C then paste, and press Ctrl + V to paste the three buttons on the panel.

Select all three Ellipse and choose TopMenu> Arrange> Align> Horizontal Centers to automatically Arrange them vertically.

After completion, add the text to the left and use Arrange> Align> Center to place the text in the middle of the elliptical shape.

03

Use Slice (shortcut key K) to cut the layout you just prepared into the appropriate size, as shown in the example

When Slice is used for slicing, You can preview the Slice directly under Properties> Current Slice Properties.

In addition, you can use the Selection (shortcut key V) to directly adjust the slice range.

I think this is much more convenient than PhotoShop.

04

If we really want to compare it with PhotoShop, Design has a more powerful Trick .......

After selecting slices, you can select layers under Current Slice Properties.

The following figure shows the details:

To help you better understand, I put a yellow rectangle behind the three original ovans.

Next to Current Slice Properties, you can see that there is a yellow background behind the oval

But in the design, I want to add only the words in the single Oval Button ......

In this case, deselect unnecessary layers under Current Slice Properties-> Format-> Slice contents.

This is really convenient when designing web pages or Silverlight interfaces. I don't need to worry about the background. I can cut the necessary parts separately.

05

After the slice is complete, the output is displayed!

Click File> Export to display the window

The Format-> Slice contents layer mentioned above is also available here.

Because you have just cut it into four slices, there will be four levels of Eucalyptus. You can select the type of Eucalyptus you want from the Format.

We chose to use the XAML Silverlight 3 Canvas.

In the drop-down menu next to the iner, select HTML & Images as the type.

Press Browse to add a folder

Next, press Export All in the lower right corner to output

06

At the point where we set the archive, let's see the output result after the Export.

There are three files in the folder:

First

Is the four images after the slice, each of which is a xaml File

The second is the html file.

Double-click to open the web page. You will find that the website is already a Silverlight web page.

The third is the. js file.

07

We open the. html file in Notepad ....

Let's see what happened !!

Have you seen it? It's CSS!

Therefore, Design can use Export to directly generate available CSS la S and images.

You don't have to spend as much time writing CSS as before, because Design has already done it for you.

If you can use the Design, it will bring you twice the result with half the effort!

Attached example

This is the teaching of this article.