Expression Web Tutorials and Examples

Written by:  • Edited by: Tricia Goss
Updated Feb 4, 2010
• Related Guides: Microsoft | Microsoft Expression Web

New to Expression Web and looking for a few pointers? Check out these tutorials and user guides available only at Bright Hub.

Expression Web Tutorials

Because of its ease of use and favorable price-to-value ratio, Microsoft Expression Web 2 is gaining in popularity as a web design application more and more every day. It may not be able to do everything that the popular Dreamweaver can, but it’s certainly closing in on the gap (and it’s definitely superior to FrontPage).

Here, at Bright Hub, we’ve compiled several tutorials to help get you up to speed with the features and tools found in Expression Web. With these user guides, your new site should be up and running in no time.

Creating New Web Pages and Sites

Create a New Web Site
click to enlarge
If you’re just getting started with Expression Web, the first task you’ll want to learn is how to create a basic web page. Although this may sound like a fairly simple endeavor, this tutorial gives a few tips to use when creating this initial page that will save you some frustration later down the line.

One of the first things that former FrontPage users notice when switching to Expression Web is the lack of web site themes. However, Expression Web actually offers a more powerful way to standardize the appearance of your site by using dynamic web templates. Not only will this tool give your site a more uniform look, but it will also make it easier to update and add new content as your site grows. You can even employ layout tables to make the creation of that original dynamic web template even easier.

If you want more control over the look and layout of your web site, you can use layers to customize the appearance. This feature is especially nice if there are overlapping segments on a web page.

Expression Web also allows you to design a web page layout using frames. This may not be the method of choice for many people, but if it’s the option you prefer, Expression Web’s tools make the process fairly painless.

Expression Web Templates
click to enlarge
If you’re having trouble trying to decide on a layout for your site, you may want to look for ideas in some of the free Expression Web templates available for download from several different sources. Although most of these free templates are for personal and educational use only, they’re great learning aids as well as idea generators.

When designing your web site, don’t forget to add Meta tags to each page. The content of these important tags isn’t visible on the page itself, but these fields can make your site friendlier to search engines and web browsers.

During the design process, you can take advantage of Expression Web’s Preview in Browser option to see how your web site will appear to viewers. When doing this, it’s a good idea to preview the site in several different browsers in order to make sure it is as universal as possible. If any of your browsers are missing from the available list in Expression Web, you can add a new one with just a few simple clicks.

Modify Interactive Button Properties
click to enlarge
Hyperlinks and Other Tools

What is a web page without hyperlinks? Once you’ve learned how to create a basic hyperlink in Expression Web, you can move on and learn how to link from images and other objects. You can even create your own custom button to use as a hyperlink. Or, if you prefer, you can use Expression Web’s built-in tool to add an interactive web button to your web page.

To save room on a web page, you may even want to create a dropdown box that contains your links. This is easily accomplished using the behavior tools found in Expression Web.

If you don’t like the default choices used by Expression Web, you can change the color of hyperlink states to make them more compatible with your web page design. The method described in this tutorial changes the color of any underline in addition to applying the changes to the text portion of the hyperlink.

Continue on to page 2 of this article for more Expression Web tutorials.

Showing page 1 of 2

 
blog comments powered by Disqus
Email to a friend