Using a Tracing Image in Expression Web to Guide Page Layout

I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design.) In this post I will describe how to use Expression Web to layout those elements on the page based on the composition image.

Using a Tracing Image is one way a web developer can be sure that the web page that they’re marking up will look like the page the designer intended. The tracing image is just an image you can make appear in the background of the Design view of Expression Web to guide you; the tracing image doesn’t appear in the web browser.  Use the Tracing Image, Configure … option under the View menu to set up a tracing image for the page.

Use the Browse … button to pick an image file from your hard disk, then you can change the offset from the upper left corner of the page, with an X and Y offset, or you can base the offset on the position of the currently selected element in the design surface. Additionally, you can control the transparency of the tracing image by using the Opacity slider near the bottom of the dialog. Here are the settings I used for my tracing image.

Expression Web adds a “magic comment” to your HTML document that instructs Expression Web to display your composition image; web browsers will ignore this comment and the tracing image. Notice how the body of the page is empty, but you can see the Tracing Image on the design surface. Once this image is in place, you can start to position your DIV elements and images. For the DIVs that comprise the matting around the page, I was able to use the margins and border attributes.

Making the outermost DIV relatively positioned and then all of the elements contained by that DIV absolutely positioned, you can precisely control the positioning of the elements on the page and make them overlay the tracing image perfectly.

While using the tracing image in Expression Web, I found it easier to remove any background styled of DIV elements that would otherwise cover over the background of the page. Once you are done placing elements in their proper locations, you can then give the DIV elements the appropriate background styles. Here is what the design view of the page looks like with all of the images placed in it located correctly over the Trace Image.

Using styles like this is really great because you can layout all the elements of the page where ever you want them without having to use HTML tables or other awkward and confusing mechanisms. Additionally, the “meaning” of the HTML can be inferred because it remains relatively simple. The four images for the gallery pages are contained in an unordered list and wrapped in hyperlink tags. So from a semantic standpoint, the page can be seen for what it basically is: a list of four links to other image galleries. There are no other structural tags, such as a tables or cells, used only for layout to confuse the meaning of the content.

I'm still working on it but you can view the work in progress here: wedding website. I'll keep blogging about my progress as I continue to use Expression Studio programs to add to the site more and more. Next I will explore using Expression Web to add image swapping behaviors.

Comments

• Anonymous
  September 10, 2008
  After view your code. You may put all style of DIV,IMG into a css file..:) Thanks for the suggestion. I did think of doing that, however, while that would have made the markup for the page cleaner, I didn't feel that those styles would be used anywere else in the website and so it did not make sense to put them in a seperate CSS file. ~Greg

• Anonymous
  September 21, 2008
  I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing

• Anonymous
  December 05, 2008
  hey man how can i make a blog using expressions, and make leaving comments and names an option if i wanted? thanks, ry

• Anonymous
  January 07, 2009
  Interesting post, haven't used it yet but after reading this will give it a try. Thanks.