Expression Web is part of the Microsoft Expression Studio, which also includes Expression Design, Blend plus Sketchflow, and Encoder. Expression Design is a professional illustration and graphic design tool that lets you build compelling elements for both Web and desktop application user interfaces. Expression Blend plus Sketchflow is a professional design tool that allows you to create engaging, Web-connected, user experiences for Windows. Sketchflow allows you to quickly prototype a Blend project. Expression Encoder is a program that allows you to prepare your edited video projects for use and playback on the Web in Silverlight media applications. If you don’t have the Expression Studio software, you can purchase and download it online at www.microsoft.com/expression or you can download trial versions of each program and take them for a test drive.

The Expression Studio programs work together to create graphics and organize media for use on the Web. In terms of a process, you can use Expression Design to create vector and bitmapped graphics for use in Expression Blend and Expression Web.

Expression Blend and Expression Encoder allow you to create Silverlight media applications, which you can insert into Web pages with Expression Web and display in a Web browser with the Microsoft Silverlight cross-browser, cross-platform plug-in. Microsoft Silverlight is an exciting new technology that helps you design, develop, and deliver media-enabled experiences and rich interactive applications for the Web. Expression Studio also installs SDK (Software Development Kit) files, which are important if you’re an application developer that uses Expression Blend and Expression Encoder. You can access the SDK files on the Start menu along with the other Microsoft Expression Studio programs.

Expression Design is a professional illustration and graphic design tool that lets you build compelling elements for both Web and desktop application user interfaces.

Expression Design 3 (New!) provides extensive drawing tools that lets you create vector and bitmapped graphics for use in other programs, such as Expression Web, Expression Blend, or Microsoft Office. Vector graphics are comprised of anchor points connected to each other by lines and curves, called vectors. Because they are general descriptions of the coordinates of a shape, they are resolution-independent; that is they can be resized without any loss to the quality of the graphic. Bitmapped graphics are made up of small, colored squares, called pixels that form a grid. Because of this, bitmaps are dependent on resolution (the number of pixels in the grid). Resizing up or down forces pixels to be created or removed to accommodate the new grid size, which can result in a loss of image quality.

Before you can create or edit a graphic in Expression Design, you need to open or create one, known as a document. With an open document, you can explore the user interface in Expression Design.

You can either open an existing graphic or create one of your own. You can use the Open command on the File menu to browse and select the graphic you want to change. To create your own graphic, you open a new document and specify an artboard size and resolution. A blank new document window appears, where you can create your art work, known as the artboard. You can also use the area outside the artboard, known as the pasteboard, to work with graphic elements. Anything on the pasteboard, including overlapping elements, doesn’t appear in the graphic.

Create a New Document in Expression Design

1. Click the Start button, point to All Programs, click Microsoft Expression, and then click Expression Design 3 (New!).

2. Click the File menu, and then click New.

3. Enter a name for the document.

4. Click the Presets list arrow, and then select an artboard size, or enter a width and height.

5. Enter a resolution value for the type of graphic you want to create (96 ppi is the standard for on-screen display; 72 ppi is standard for Web graphics; and 220 ppi is a minimum for print graphics).

6. Click OK.

   

   A frame appears, displaying the artboard.

Did You Know?

You can open an existing graphic. Click the File menu, click Open, navigate to the graphic file you want, and then click Open.

You can open a variety of existing graphics. You can open the following file types: PSD, GIF, PNG, BMP, JPEG, WMPhoto, TIFF, ICO, and related extensions.

You can navigate around the Document window in Expression Design by using scroll bars and several tools in the Toolbox. The Pan tool (hand) allows you to scroll in any direction within the document, while the Zoom tool (magnifying glass) increases or decrease the view magnification size. You can also use the Zoom list arrow to select a specific view size or command, such as Fit to Screen. As you work with a graphic, you use the other tools in Toolbox to select all or part of a graphic, draw with a paintbrush (create bitmapped graphics), draw with a pen (create vector graphics), create shapes, add text, add fill and gradient effects, modify vector paths, and use color and attributes in different places. A tool icon with a small triangle in the lower-right corner represents a tool group, which means there are more tools available; click and hold to access them. In addition, you also use two basic panels: Properties and Layers. The Properties panel provides easy access to graphic options relating to Appearance, Object, Edit, and Effects based on the current selection. The Layers panel provides easy access and control over the graphic parts, also called objects, displayed as individual transparent layers in the Document window.

Microsoft Expression Encoder is a stand-alone video encoding—a process to compress/optimize for maximum quality—and live broadcasting program that helps you prepare and save video clips to the Web for playback using Microsoft Silverlight or Windows Media Player.

The Expression Encoder window provides four areas to work in: Viewer pane, Timeline and transport controls, Media Content panel, and various settings panels, which include Presets, Encode, Clips, Enhance, Metadata and Output. The Viewer pane displays video images and allows you to zoom in and out. The timeline and transport controls allows you to manually control playback, add a leading or trailer video, view and adjust markers, and trim the video points. The Media Content panel lists imported videos along with the Video information bar, displays an activity log, and encodes your video to create a Silverlight application. The Presets panel provides preset options for ease of use and allows you to save your settings. The Encode, Clips and Enhance panels provide options to modify encoding and video profiles, import and modify overlay images, and attach leaders and trailers. The Metadata panel provides options to add metadata information, import and edit scripts and markers. The Output panel provides options to create a Silverlight or Windows Media output file.

Using Expression Encoder in Expression Web

Expression Encoder is also used by Expression Web to insert Silverlight videos (New!). If you have other kinds of video, you can encode and insert it as a Silverlight video into a page. You can insert videos as Silverlight in a variety of formats: WMV (Windows Media Video), AVI (Audio Video Interleave), MPG, ASF (Advanced Systems Format), DVR-MS (Microsoft Digital Video Recording), MPEG, and TS (Transport Stream for MPEG). To insert a video, open the Web page you want to use in Expression Web, click the Insert menu, point to Media and then click Silverlight Video, select the video file, click Open, specify the following options in the Insert Silverlight Video dialog box, and then click Encode:

• Encoding. Sets the encoding profile.

• Destination. Sets the folder location to store related output files.

• Template. Sets the display for the video controls and output.

• Width and Height. Sets the dimensions for the encoded file.

• Other options. Set various options, including the following: Automatically start video when cued, Automatically cue video when page is loaded, and Enable player popout.

• Stretch Mode. Sets the resize mode to fit dimensions of the video.

You start working with Expression Encoder by creating an encoding session, called a job. A job is a collection of one or more videos or audios that you can modify—add markers, trim, add overlays, or attach a leader or trailer—and save as a file to create the output you want. A job file consists of an XML description of the job settings and references to the imported source media. After you complete your job changes, you need to set encoding options, known as profiles, for each video in the job. You can create your own profile (PRX), or use a default profile provided by Expression Encoder. When your profiles are all set, you can encode your job with one of the built-in Silverlight templates (created in Expression Blend), which provide graphically rich skins and interactivity, or as a high-quality Windows Media video (WMV) file. As an additional option, you can also encode live media that you can stream over the Web using Live Encoding mode.

Expression Blend is a professional design tool to create engaging, interactive, Web-connected user experiences. With Expression Blend 3 (New!), you can create or modify a Windows Presentation Foundation (WPF) or Silverlight based media application. You can insert a Silverlight application into a Web page with Expression Web and display it in a Web browser with the Microsoft Silver-light cross-browser, cross-platform plug-in.

When you create an application, known as a project, in Expression Blend, the program generates XAML code (in the background), which is a declarative markup language used by the Silverlight browser plug-in. XAML is similar to HTML, yet more powerful and extensible.

Expression Blend uses three views: Design, XAML, and Split. Design view, also known as the artboard, is where you visually create your project. XAML view is where Blend generates XAML code based on what you create in Design view. If you have some experience with XAML code, you can make adjustment directly in XAML view. Split view displays a split screen with Design view at the top and XAML view at the bottom.

When you create a new project in Expression Blend, the program creates a main canvas, also known as a page in Design view, in XAML, which is designed to contain position shapes and controls. Every object you create is positioned within the main canvas, including other canvas objects. The main canvas and other canvas objects have individual properties, which you can change using the Properties panel and the Object and Timeline panel.

After you finish creating your project in Expression Blend, you can test it to see how it works. As you test your project, you can use the Results panel—available using the Window menu—to see if there are any errors that you need to debug and fix. If you like what you see, you can build it for insertion in a Web page using Expression Web.

Project Solution

You can start working with Expression Blend (by opening an existing project or creating a new one. You use the tools in Toolbox to select an object, draw with a paintbrush (create bitmapped graphics), draw with a pen (create vector graphics), create shapes, add text, add fill and gradient effects, and use color and other attributes in different places. A tool icon with a small triangle in the lower-right corner represents a tool group, which means there are more tools available; click and hold to access them. After you create an object, you can use the Properties panel to modify it.

After you create the user interface with Expression Blend for your application, including buttons, menus, etc., you need to add interactivity and functionality, known as an event listener, or handler, to the individual objects to make them work. You attach an event handler to an object by adding XAML code to the canvas object. For example, when you attach the MouseEnter and MouseLeave events to a button object, the corresponding functions get executed when the mouse pointer enters or leaves the button object. You define these functions in the C# (.cs) or Visual Basic (.vb) file (depending on the project language), which you can access from the Project tab.

Deep Zoom technology in Silverlight 3 allows you to view images on the Web like never before. You can smoothly zoom and pan images in high resolution. With Deep Zoom Composer (New!), you can import images, arrange and position them, and then export the results as either a Deep Zoom composition (single image) or collection (multiple images). Deep Zoom Composer is a stand-alone program that doesn’t come installed with Expression Web or Expression Web Studio. However, the program is available free for download on the Microsoft Web site.

With Deep Zoom Composer (New!), you can import images, arrange and resize them, and then export the results as either a Deep Zoom composition (single image) or collection (multiple images). After you export a Deep Zoom file, you can insert it into your Web pages in Expression Web (New!), and then show it in your browser. In your browser, you can use buttons (based on the selected template) to smoothly zoom and pan images in high resolution.