Declare the Template

In the HTML markup of the page declare the WinJS.Binding.Template control that will include the SVG fragment to be used. Blend for Visual Studio may be used to quickly add a Template Control to a page.

In the Asset panel, select the JavaScript Controls category and double-click Template control to add it. Alternatively, you can search for the Template control using the Search Assets filter in the Asset panel. Once the template is added, replace the text “Place content here” with the <svg> content you want to include as part of the template. Here’s what it would look like in Blend:

In Visual Studio the markup will look something like this:

<div data-win-control="WinJS.Binding.Template">

   <div>

       <svg width="328.78506" height="325.80728" >
         <g transform="translate(-211.01766,-268.64704)">
           <path style="fill:#ff6262;fill-opacity:1;stroke:none;"
                 d="m 483.39049,436.95746 …"
                 transform="matrix(1.4592076,0,0,1.4396496,-165.56435,-197.51494)" >
           </path>    
           <path style="fill:#990000;fill-opacity:1;stroke:none;"
                 d="m 483.39049,436.95746 …"
                 transform="matrix(1.3314543,0,0,1.3256145,-118.29482,-148.35441)" >
           </path>    
           <path style="fill:#ff0000;fill-opacity:1;stroke:none;"
                 d="m 328.54672,425.0464 …"
                 transform="translate(122.13283,111.14024)" >
           </path>

Keep in mind that the contents of the template are not shown in the application until they are bound to something. Also, whatever SVG code is used will be duplicated over and over as the template is applied and the larger and more complex template, the more complex the resulting DOM. So care should be taken to minimize and simplify the SVG markup as much as possible. Many of the tools used to manipulate the SVG add elements to the markup that only have meaning at design time, and while this excessive SVG renders as expected in IE or WWA, there is far more markup than is necessary to get the desired effect.

Value Converters

Often in data binding, the format of the source data doesn’t match the output or doesn’t match naturally to the parts of the UI to which it is bound. A classic example is the coloring of a number as black or red depending on if it’s positive or negative. The output of the expression would be a Boolean (e.g. value >= 0) but the UI really wants to bind to a color, in this case, red or black. A value converter is a function you provide that computes the desired from the context of the data and properties being bound.

Briefly, a custom value converter takes the following arguments:

• source – the source JavaScript object for the bind operation
• sourceProperty – the name of the property to bind from the source JavaScript object
• dest – the destination DOM element for the bind operation
• destProperty – the name of the property to bind to the destination DOM element

For this example we need to two converters: One that takes a string value and applies that as the transform attribute to an element of the SVG. The other takes a color as input and updates the style.fill value of the element to “tint” or “colorize” the element.

The code below defines the two custom converters, making them available on the SVGDemo “namespace” object:

var SVGDemo;
(function (SVGDemo) {
    var Converters = (function () {
        function Converters() { }
        Converters.svgAttr = WinJS.Binding.initializer(function (source, sourceProperty, dest, destProperty) {
            dest.setAttributeNS(null, destProperty[0], source[sourceProperty[0]]);
        });
        Converters.tintColor = WinJS.Binding.initializer(function (source, sourceProperty, dest, destProperty) {
            function getR(color) {
                return parseInt(color.substring(1, 3), 16);
            }
            function getG(color) {
                return parseInt(color.substring(3, 5), 16);
            }
            function getB(color) {
                return parseInt(color.substring(5, 7), 16);
            }
            function hex(num) {
                var str = num.toString(16);
                if (str.length == 1) {
                    return '0' + str;
                }
                return str;
            }
            function scaleColor(factor, color) {
                var r = Math.floor(factor * getR(color));
                var g = Math.floor(factor * getG(color));
                var b = Math.floor(factor * getB(color));
                return "#" + hex(r) + hex(g) + hex(b);
            }
            var color = dest[destProperty[0]][destProperty[1]];
            var tinted = scaleColor(getR(color) / 255, source[sourceProperty[0]]);
            dest[destProperty[0]][destProperty[1]] = tinted;
        });
    })();
    SVGDemo.Converters = Converters;
})(SVGDemo || (SVGDemo = {}));

The first converter, svgAttr sets an attribute on the target SVG element. In this example:

<g data-win-bind="transform:svgScale SVGDemo.Converters.svgAttr">

The transform attribute of the element is set to the .svgScale member of the object to which the template is bound. And so if the input object to the binding operation looks like this:

var starYellow = {
       color: "#FFFF00",
       svgScale: "scale(1.0)",
       scale: 1.0
};

The svgAttr custom converter runs and the result is:

<g transform="scale(1.0)">

Custom converter tintColor is more sophisticated in that it takes both the bound object’s property into account, it also uses the original color of the targeted style property to help determine the final color. This converter uses the red component of the original style color to determine how much of the object’s source color to use. So the redder the template is, the more the source color is used; so that if the template’s color is pure red (#FF0000) then the resulting color is 100% of the source color.

So for example, we have a path with a style.fill we want to tint:

<path style="fill:#770000;fill-opacity:1;stroke:none;"
   d="m 483.39049,436.95746 …"
   data-win-bind="style.fill:color SVGDemo.Converters.tintColor" >
</path>

Using the same starYellow object above, the converter evaluates the red value of the source template color and calculates the resulting color:

<path style="fill:#777700;fill-opacity:1;stroke:none;"
   d="m 483.39049,436.95746 …">
</path>

Note: This implementation of the tintColor converter assumes: 1) that you will be binding to style property 2) that property will be a color.

Scaling SVG in the DOM

SVG renders extremely well, but there may be issues getting it to flow properly in the document layout if you’ve scaled it like the code does above. Luckily, you have complete control over the DOM elements and if you know the size of the SVG that the template produces, you can easily calculate the size of the SVG when you render it.

var svgStarTemplateWidth = 329;
var svgStarTemplateHeight = 326;

var starTemplate = WinJS.Utilities.query("#starTemplate")[0].winControl;

function renderStar(starInfo) {
    starTemplate.render(starInfo).then(function (div) {
        div.style.width = (svgStarTemplateWidth * starInfo.scale) + "px";
        div.style.height = (svgStarTemplateHeight * starInfo.scale) + "px";
        div.style.display = "inline-block";

        document.body.appendChild(div);
    });
}

Doing this allows the proper layout of elements on the page:

GIT the Code

Download the code at https://github.com/gwsii/WinJSSVGTemplate

And be sure to download and enjoy your own copy of Gamer Dice for Windows 8!

After learning more about the language from a series of F# videos, I decided to explore the language and tinker with it for a while. One of the first challenges a developer will face working with a new language is settling on a simple means to display results to the screen and get input from the user. F# can import .NET assemblies, which are certainly sufficient, but working on a basic text console it turned out to be an interesting way to explore the language. Admittedly, this is not a problem domain specifically suited for F#, but it exercises some of the fundamental capabilities of the language and is grounded in the familiar territory of the command line console.

Box Console Text UI

Here’s a screenshot of what the final text console test program looks like, which renders its interface using the F# BoxConsole module.

Each of the boxes shown represents an instance of one of the classes defined in the BoxConsole module using structures to define the box location, size and style. The menu box in the center is an example of a DosMenu class which combines all of the building block classes to implement an F# application menu.

F# Enumerations & Simple Data Structures

One of the fundamental affordances a programming language can provide is a mechanism to map enumerated integer values to a set of constant symbols, a.k.a. an Enumeration. F# employs it’s pattern matching syntax to define an enumeration and here are some examples from the BoxConsole module:

The first enumeration, BoxCorner expresses a shorthand to refer to the upper left, upper right, lower right and lower left corners of a box and the TextAlignment enumeration allows the users of the BoxConsole module to specify a left, center or right text justification.

Another fundamental programming language expression is the data record or structure that contains a collections of related values. The BoxLocation type defines a F# data structure to collect the data describing the size and position of a box.

The BoxStyle type describes the style of a DosBox, including members that describe the border style, margin around the text along with foreground and background colors of the box. In the case of the BoxStyle type, the Border member refers to an object and not a simple data type.

Mutable Values and Classes

The “immutable by default” nature of F# encourages developers to craft code that the complier can optimize much more aggressively and runs faster in a parallel execution context. However, at the end of the day, the program must have a reasonable way to express it’s state. The mutable keyword is the signal to F# that the variable being declared will be used in the more traditional manner: its value should be stored and can be expected to change during program execution. These mutable variables can then be used as fields to store values for the implementation of a class.

(Note: Due to encoding issues, the contents of boxPatterns are not correctly rendered above. To see the complete set of character used, please download the project source code.)

Those new to F# but familiar with today’s object-oriented patterns should be able to recognize those patterns peeking through this alien code if they “squint” just a little bit. The static keyword is used to express functionality within the class scope, and is omitted for instance members of a class. Creation of objects is achieved via the new keyword, which also used to declare class constructors. Also notice the use of the private keyword allowing the developer to control the visibility of members in order to help maintain encapsulation.

The BorderStyle class knows how to render a nine character array as a the corners and edges of a box. One constructor uses a predefined style and the other allows the caller to specify a custom set of nine characters to define a border style. This class is effectively implemented with a couple pattern matching methods.

The first, boxPart, matches determines which offset to use to (0-2) depending on if it’s the first item in the list (yields 0), the last item in the list (2), or any other item in the list (1). Similar matching rules are employed in the BoxLines function, but that pattern is wrapped in an array [| for w in 1 .. width –> |] generated from a list [ for h in [1..height] –> ]. Together, these two functions provide the character patterns for the box’s border style given a width and height.

Using the System.Console class

Class ConsoleUI wraps the System.Console class for the BoxConsole module, making the console easier to use from the F# implementation. F# uses the open keyword to import other type libraries into the current program scope. In this case we import the System .NET module on line six, right after we explicitly declare the name of our module on line four.

Taking a closer look at one of the ConsoleUI methods reveals how .NET methods and properties can be called from an F# application. The WriteAt function will write a message on the console in the requested location and will trim the message to prevent the console screen from scrolling.

Note the use of the variables oleft and otop which are used to store the current cursor position so it can be restored once the message is written. These variables are written to once and never modified. They are given their values using the let keyword and the equals (=) sign and they are immutable, the value is bound that that name. Even in the case of message, the value is is not mutable: the old value of message is lost and a new one (possibly shorter) is created.

On the other hand, the .NET system Console.CursorLeft property is not immutable and must be modified to change the cursor position. In this case F# considers the variable mutable and allows its value to be changed using the <- operator. Finally, the WriteAt function provides an example of calling a method on a .NET class, writing the message to the console using the Console.Write(message: string) syntax to invoke the method.

Example Program

Program.fs is provided as a practical example of how to use the BoxConsole module to display and process user selections using the DosMenu class, and allows the user to cycle through some of the various styles and options available.

The example first declares the module name and imports the System and BoxConsole types. The program then creates the DosMenu containing a list of the box styles through which the user can cycle. Next the program declares a set of working variables. It’s interesting to note that like many other program there is a mix of immutable and mutable variables, but in F# it’s mutable variables that are the exception that require additional semantic notation.

Next the program creates a DosBox that displays the time and then enters the main program while loop where it will run until the user selects “Quit”. In the body of the main loop, if the user has made a selection then the program options are updated. Finally, the program will pause for 1000ms to wait for the user’s next selection from the DosMenu.

Download complete BoxConsole source code.

The HTML canvas element has been available and implemented in most browsers for years now and is going to be implemented in the Internet Explorer 9 Platform Preview (IE9). And with the new focus on the creation of Rich Internet Applications (RIAs) using HTML 5, CSS3 and JavaScript the canvas element is going to become a lot more useful.

The canvas element provides a location in an HTML document with the web page author can draw shapes and text using JavaScript.  Because authors can control what is drawn exactly, the canvas element provides pixel perfect rendering of what needs to be displayed. Drawing on the canvas element in JavaScript is performed through a proxy object called a context.  The context allows you to draw on the canvas element using X and Y coordinates, and setting things like line styles and colors.

First, declare the canvas element in your HTML markup.

Then, when the animation starts a context is created which is then used to draw on the canvas.



Now that the context has been created it may be used to perform basic drawing.  To draw a rectangle, first enter line style and color on the context, then call strokeRect() or fillRect() to draw the rectangle.



The context is used to control more than just the color used with the wind style used; it also allows control over opacity using the globalAlpha property.  And when drawing text, the context may be used to control the font and text alignment.  Once the settings are made on the context, calling field text or stroke text draws the text on the canvas.



Other effects include gradients, both linear and radial, where you can define your own custom color stops.



Now that we know how to do basic drawing on the canvas using the context object, we can create an animation effect by drawing slightly different images over time.  Using the JavaScript setTimeout() function, we can create an animation loop:



The function above is called every 50 milliseconds, and invokes the render() function which does the work a drawing the each frame.  By making small changes from one frame to the next we can create the illusion of motion.
Because the canvas element doesn’t remember anything about what we have drawn on it before, we keep track of what we want to draw in JavaScript and erase the entire canvas before we draw each frame. Traditionally in computer animation, elements that represent graphical objects on the screen are referred to as sprites. 

JavaScript objects can support the basic properties needed to implement a sprite: an X and Y position with a width and height.  For animation purposes we also want to include information about the objects movement along the X and Y axis, which are DX and DY in the code below.



For my animation, I wanted to show bubbles floating up from the bottom of the canvas.  So using JavaScript I was able to extend the sprites functionality to draw my bubbles.  Notice how I define bubble to have a color associated with it and I overwrite the animate function to use that color when drawing the bubble.



To keep track of all of the bubbles that we will be animating, we create an array called allBubbles were a place the new bubbles as they are created. Each bubble we make is given a random location, green color and vertical motion then added to the array.



For the text and the background gradient, it’s not necessary to use JavaScript objects to keep track of their state, so they can be drawn by themselves
inside of the render loop for simplicity.  For a little more pizzazz I am also animating the gradient using a simple sine wave.



Here’s the final version of my page containing the gratuitous canvas animation.  I developed this example using Expression Web 4 and tested it in Firefox, Opera, Chrome and Safari.  These browsers have had longstanding support for the canvas element and my example works well.

The new Internet Explorer 9 Platform Preview also supports the canvas element, and you can configure Expression Web 4 to use IE9 preview as another browser in which you can preview a page.  From Expression Web, open the File menu, then select “Preview in Browser” then “Edit the Browser List…”



In the Edit Browser List dialog click on the “Add…” button, browse for the IE 9 Platform Preview program (iepreview.exe), select it and make sure it’s checked in the Edit Browser List window and click OK.



Now you can setup Expression Web to launch the IE 9 just by clicking the Preview in Browser button (F12).



In this post we discussed how to perform basic drawing with the HTML canvas element and provided basic tips on animation.  I hope that you enjoyed this post and continue exploring the new capabilities in the IE 9 Platform Preview and using Expression Web 4.  I’d like to thank John Allsopp for his great HTML 5 Live course at Sitepoint.com which provided my first introduction to the canvas element and many more HTML 5 features.

Browser Support

In this post I will briefly discuss web font support in browsers historically and today, the kinds of fonts used and how to work with them and how to consume them in the page markup.

Microsoft added embedded font support in first version of Internet Explorer with the FONT FACE tag in 1995, with versions 3, 4 and 5 adding support for CSS. Unfortunately, this support required the end user to have the requested font installed on their system. Microsoft eventually provided the WEFT tool to allow authors to embed fonts into their pages, allowing the user to view the page correctly without having the font installed.

The font format supported by Internet Explorer is the Embedded Open Type (EOT) file format, which never caught on with any of the other browsers. All the other browsers that I have checked (including the latest versions of Firefox, Chrome, Opera and Safari) all support the TrueType (TTF) font format.

Converting fonts

Since most of the fonts I’ve used on Windows are True Type fonts, and in order them to be used in Internet Explorer they have to be made available to users in the EOT format.

Microsoft has historically provided the Web Embedding Fonts Tool (WEFT) tool to help web page authors generate EOT. This is a full GUI that will scan the site and identify all characters from the site that the font will need to include and encodes those characters only and packages them into a EOT font format that can be uploaded to the server. I have used this tool and it’s not easy or intuitive and didn’t handle the font I was using.

As an alternative, I have found an open source command-line utility ttf2eot (licensed under the GNU GPL v2) which has a Windows version that is available for download. This utility was originally developed for Unix systems so is a little different to use that typical Windows program. It takes the font to convert as the input stream and writes the converted font to the output stream. This just means that you run the command from the windows command line like this:

TTF2EOT < MyFont.ttf > MyFont.eot

Using CSS @font-face

Now that the font is available in both of the formats needed by the browsers, the page now needs to reference the font and consume it in markup.

The CSS code to allow all browsers to display the embedded font correctly is relatively simple. All that needs to be done is to include the @font-face declarations is the correct order so that all the browsers can pick up the appropriate font information.

<style type="text/css">
      @font-face { font-family: "Alien"; src: url(ElementalEnd.eot); }
      @font-face { font-family: "Alien"; src: url(ElementalEnd.ttf); } 

</style>

Once the font-face has been declared it can now be consumed just like any other built in font.

<html>
  <head>
    <style type="text/css">
      h1 { font-family: "Alien"; }
    </style>
  </head>
  <body>
    <h1>My UFO Research Site</h1>
  </body>
</html>

That’s all there is to it! Just make the font available in both formats and reference them both in correct order and you can style your page with them.

Licensing Considerations

Remember, you should only host and embed fonts for which you have the appropriate software licenses.

A year or two back I came up with an idea to make a HTML page that displayed a number of my fonts with some sample text by using the style attribute for a paragraph to change the font-family to the font I wanted to preview. I was able to select the font I wanted from the few I slected when it occured to me that .NET supports accessing all the fonts installed on the system. It was a very quick and simple idea that allows the user to create a "Reference Sheet" of all typefaces installed on their local system.

Now when I'm looking for inspiration for a new logo, or looking for just the right typeface to make that new website's design hang together perfectly, I have one page I can scroll through to see everything I have available. I really like just loading the page in a browser and paging through it. You can copy the text from the page and it will retain the font information, so you can paste it into Word or other editors which recognize the text's typeface info.

While I have cleaned up this version before I release it to the world, this little utility is pretty "low-tech" and not too friendly. I provide a reasonable set of defaults so the resulting Font Reference Sheet would include text to show a reasonable representation for a typical font. It's styled neatly with alternating white and light grey background to distinguish one font from the next. The name of each font is displayed in a plain Arial text so you can read the names for strange or symbol fonts.

The tool allows the user to select where to save and what to name the reference page. It allows the user to slect the text and background colors that the page will use to display the fonts, allowing the user to see the fonts used with different combinations of foreground and background colors. The user can also choose to alternate the sample text color or the background color or both.

The user can change the entire page template or the font template so that they can include their own font sample text or change the page styles or layout. Color or font name values can be inserted by using special text, for the font template:

[--font-family--] The family of the current font
[--color--] The current font text color
[--background-color--] The current font backgound color

Or for the page template:

[--body--] Where to inject the font templates once processed
[--background-color--] Always the first font background color

Now this only works because the markup is specifically targeting the font faces it knows you have installed. Unless this page is viewed on a computer with all the same fonts installed, it won't render with the correct fonts. The purpose of this page is to provide the local user with text samples in fonts installed locally and viewed locally. This won't work if you server this page up via a web server, for example. Providing an end user with a custom font isn't something that is commonly supported yet.

I've included the source code to the this tool, and while I hope it is useful I do not gaurantee it's usfulness or suitability for any specify application and by downloading the source code, the user agree to this stipulation.

Download the project Visual Studio 2008 code here: http://www.gwsii.com/blog/fontref/fontreferencepage.zip

Expression Web is the perfect tool for people who design websites and allows users create CSS that works exactly the way it should, which makes it poised to be the web designer's tool of choice for standards base web design and layout. I have some experience in using CSS for simple text styling and basic page look and feel, however, this only scratches the surface of the power of CSS and I want to learn more.

My ultimate goal is to produce a CSS sheet that will be considered for the CSS Zen Garden. If you're a student of CSS and you've not had a chance to see the Zen Garden, I encourage you to look at what this site revels about the power and flexibility of CSS. If anything, these examples show that I have a lot more to learn about CSS and how to use it for layout and full page customization.

Learning more about CSS will involve a number of projects, starting with the "re-skinning" of my Little-endian blog. If you've been here before you will notice that it's already changed. As it stands now, it's a good start, but still needs work. I will do my best to detail my experiences and the process during this (and others as I come up with them) revision.

In the meantime, be sure to visit the Microsoft Expression website and download the free 60 day trial and give our latest and greatest version a try!

I mentioned the HTML gallery in one of my first blog posts; they’re really easy to produce and there are several built in templates you can use. Once Expression Media is installed, the HTML gallery can be accesses under the Make menu, HTML Gallery … When selected, Expression Media will display a dialog of options.

And there are so many options! So many, in fact, that the good people at Expression Media added the ability to save a set of options to disk.

However, if the existing templates and all of the options provided still do not exactly produce what is desired, one can create custom HTML gallery templates, and Expression Web is a great tool to use.

The standard templates are located in the Expression Media install directory under the “\en\Plug-ins\HTML Templates” directory. Each of these template directories corresponds to one of the selections in the theme dropdown list in the HTML Options dialog.

There are three files and one directory found in each template. The index.html file describes what the page that hosts the thumbnail images looks like, media.html defines the page used for the full sized images and the about.jpg image is used to give the user a basic impression of what the gallery will look like. The about.jpg image is displayed to the user in the HTML Options dialog when the associated template is selected. Finally, the assets directory contains all the images and additional files referenced in the other two .html pages.

I started the creation of my custom template by copying an existing template directory and renaming it to “Wedding.” The new template is immediately available as a new theme in the HTML Options dialog and you can create galleries with it to test your changes as you go.

Using Expression Web to open the template directory as a website and examining the index.html page reveals the pattern Expression Media uses to insert data into the HTML pages, “(iView:*).” Whenever Expression Media encounters this pattern in the HTML pages in your template it will replace the pattern with the corresponding information about your gallery. For example, it will replace “(iView:Catalog)” with the Site Title in the HTML Options dialog and “(iView:Capation)” with the caption of the image in the media.html file.

Defining the meanings of all of these “iView” values is beyond the scope of this article, but by examining the existing templates and the HTML that is generated from them, their meanings can be discovered.

The index.html and media.html pages may be modified in Expression Web and any resources those pages require (images or CSS files for example) can be saved to the assets directory and referenced with a relative URL. Once you are happy with the changes you have made, save the files from Expression Web, generate the HTML gallery and publish it. One nice finishing touch would be to create an image to represent the new gallery theme and save it as about.jpg with a resolution of 200 x 120 pixels.

In the final version of my website, I actually created four different galleries, one for each category of images. I am still getting images from friends and family who were at the wedding and by creating these custom galleries I can add those new images very easily.

Lastly, I have made a more generic version of the wedding gallery available for download, feel free to use it and modify it as you see fit.

Each of the image tags on the page is given appropriate alternate text and is also given meaningful IDs where I will give them behaviors. In order to make the page more interesting and more interactive I decided that the look of each link to a gallery and also the central image will change when the user moves their mouse over the link. I did this to give the use some feedback so that they would notice that the titles are, in fact, links to other content.

Previously in Expression Design, I created the alternate title images that will replace the normal ones for the Image Swap behaviors. I also prepared four more cropped images from the wedding that will replace the black and white one used in the original composition.

Swapping those images out really makes the interaction with the page “pop” by injecting color on an otherwise monochrome image.

Selecting one of the images from the page  (like in the picture above) and opening the Behaviors task pane via the Task Panes menu allows you to define a number of different kinds of behaviors for that image or element. Press the “Insert” button and select “Swap Image” from the menu.

You will then be presented with the Swap Image dialog box which you can use to change the images on a page when the use moves their mouse over the image you currently have selected. In the example below, the settings for this image will swap out the existing image (ID is “WeddingTitleImage”) with the “light” version of that image and also change the page’s main image (ID is “MainImage”) with the color version of that image. There are also two other options, Preload Images will download the images using JavaScript immediately when the page is initially loaded (for smooth animation) and Restore on mouseoutevent will automatically restore the image when the user moves their mouse out of the selected image.

I found this to be a very easy way to get this functionality, since I have wasted lots of time writing and debugging my own JavaScript in the past. Once I have configured the Swap Image settings for the other three title image, the page’s functionality is complete.

I tested this page in Internet Explorer 6, 7 and 8 Beta, Firefox, Opera, Safari for Windows and the new Google Chrome Beta. The CSS layout and the JavaScript code to swap the images performed perfectly in every case.

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 Media to create the actual image galleries.

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.

The first step was to compose a homepage. Expression Design turned out to be the perfect tool for this because of its ability to create beautiful scalable vector art and how very easy it is to export web-ready bitmaps from it.

I began by designing a logo for the site. My wife, Paula, loves lilies and made them a big part of the wedding and so I decided to use a pair of these flowers to represent our union. The color for our wedding was black and white so that drove the decision to use those colors for the art. She's also a pretty cool chick so she really likes the tribal border that creates a heart shape around the lilies. The tribal border is a preset brush labeled “Tattoo” that you can “paint” with in Expression Design.

Once I saved the individual logo, I created a new Expression Design file that would be the overall composition image for the page. I made the file 955 x 600 pixels because I am targeting a monitor with resolution 1024 x 768, and the page size option in the status bar of Expression Web recommends that size:

 ...so that's the size I based the Design file on. I copied the logo into the composition and created the other page elements quickly with Design. Looking at the layout I decided that I would take each element on the page and use CSS to lay them out on the web page.

Next, I copied the individual elements that made up the composition into another part of the document, modified the titles to give them a different look when users mouse over them.

Once I had all of the individual parts in place, I was able to use the "slice" functionality of Design to create the bitmaps which will be used in the final page and give them each a name which will control the filename for the bitmap when they are exported.

One note about the titles: by using the layers on top of the titles first and then copying the titles along with the slices, it was very easy to simply change the text color and border values to produce the mouse-over effect images.

The exporting functionality really came in handy when I remembered that IE6 did not handle transparency in PNG files correctly. I was easily able to change the file type of the layers to GIF images and then re-export them in seconds.

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 for behaviors and layout of the homepage.