Little-endian

As a member of the Microsoft Expression Web team, I am proud to be a part of our newest release: Microsoft Expression Web 3. Not only am I pleased and very grateful to have had an opportunity to contribute to the release of this application, I am also looking forward to using Expression Web as the finest tool to edit and design amazing websites.

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 used Expression Design to layout and create the elements for my wedding homepage and then used Expression Web to position them on the page. After that I used Expression Web to give the page image swapping behaviors when the user moved the mouse over the titles of the page. In this final blog I will describe how I modified an existing HTML gallery in Expression Media to make up the remaining pages of the website.

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.

I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design) and then used Expression Web to position them on the page. In this post I will describe how to use Expression Web to add image swapping behavior to the page.

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.

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.

In August of 2008 I was lucky enough to marry the woman of my dreams with a small wedding ceremony in Las Vegas. I really enjoy web design and while I am not a professional web designer, I get to play one at my new job as a software tester on the Expression Web team at Microsoft in Redmond. Because I wanted to learn more about the products in Expression Studio I chose to use them to build a website to commemorate our wedding and to share this event with the world.

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.

A few months before I came to work for Microsoft, I was trying to revise my personal website. It was very plain and I wanted to jazz it up a bit. I was trying to use Visual Studio 2005 ... to no avail. It just wasn't the right tool for the job.

So I did a search on the web and started to look at the website design software that was out there. I stumbled across the Microsoft Expression Suite. I played around with Expression Web for a while and I could see it was a vast improvement over Front Page. I put my new site together and began exploring the other products in the suite.

When I started to investigate Expression Media, I found a small little wizard that really impressed me: The HTML Gallery.

I have used this convenient little too on more than one occasion. In short it allows you to take a collection of images and very quickly and easily create an image gallery. It is very customizable and extremely easy to use. You can even save off the selections you made to use them again on a later date, so that you can have a consistent look and feel from gallery to gallery.

A couple of examples of where I used mine are: World Of Warcraft screenshots and my Acura For Sale page.