Using ‘Tracing Images’ feature in Microsoft Expression Web 2

Posted by: Minal Agarwal , on 5/31/2009, in Category Expression Web
Views: 18524
Abstract: I often create a prototype of my web pages in Adobe Photoshop and then keep it open in the same editor or in a photo viewer while I design the actual page. Time and again I have to switch between the web page editor and photo viewer. It becomes cumbersome at times. But I am happy that I won’t have to do this anymore. Microsoft Expression Web 2 offers a distinct feature of ‘Tracing image’. Let us learn what it is in this article.
Using ‘Tracing Images’ feature in Microsoft Expression Web 2
 
I often create a prototype of my web pages in Adobe Photoshop and then keep it open in the same editor or in a photo viewer while I design the actual page. Time and again I have to switch between the web page editor and photo viewer. It becomes cumbersome at times. But I am happy that I won’t have to do this anymore. Microsoft Expression Web 2 offers a distinct feature of ‘tracing image’.  
When you create a model or a mock up of a web page, to give you an idea of how your web page should look when created, Expression Web 2 lets you open this image as a tracing image within Expression Web. You can now easily use this image to create your web page in Microsoft Expression Web 2. The tracing image appears just as it would appear on a tracing paper. It is stored on a layer that appears in between the background of the page you are building and the editor. You can always adjust the transparency of the image, not to intrude while working. Since it appears like a tracing image, you can continue building your page based on it.
To add a tracing image to a web page
1.    Create a new web page or open an existing web page in ‘Design view’.
 
2.    Go to ‘View’ menu and choose ‘Tracing Image’ and further select ‘Configure…’
 
View_TracingImage_Configure
 
3.    Microsoft Expression Web will then prompt a ‘Tracing Image’ dialog box as shown below:
 
TracingImage_Dialog
 
a.    File Name: Enter the entire path of the file or click on ‘Browse’ to the image file you would like to use as a tracing image. If you want to clear currently added image, click ‘Clear Image’.
 
b.    X and Y: As soon as you add the file, the X and Y coordinate fields will get activated. The X and Y coordinates of the tracing image correspond to the upper-left corner of the editing window. To adjust the position of the tracing image, enter values for X (horizontal) and Y (vertical) coordinates in this dialog box.
 
c.    Opacity: The slider helps you set the opacity of the tracing image. Usually the tracing image is made less opaque and more transparent, to facilitate the designer concentrate on the page being built. But you can always adjust the opacity to suit your needs.
 
d.    Apply: Lets you immediately preview your settings on the tracing image chosen. If you want to modify them, the dialog box is still open, you can modify the settings and apply the changes to preview it another time and click OK to exit from the box.
The tracing image when inserted would look like:
 
TracingImage_Runtime_View 
To turn off the tracing image
Go to the View menu, choose ‘Tracing Image’ and click ‘Show Image’.
To create a web page based on the Tracing Image

You can either create a table based layout or a CSS based layout (using the <div> tags). In either case choose a layout that best matches the prototype in tracing image and then fine tune the structure. Add elements like text, images, and others. After your web page is ready, turn off the tracing image (as given above).

I hope this article has made you familiar with what jump menus are and how to use them to link you pages or websites. If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook