Microsoft Expression Web Tutorials: Adding a Page Banner

The first thing that most people notice when visiting a web site is the page banner. It can also be the thing they remember most about the site when trying to recall information about it later. Because of this, most web site owners want as unique a page banner as possible so that the visitor will form a mental link between the banner and the site.

There are several ways that a banner can be added to a web page using Microsoft Expression Web, but we are going to focus on one particular method that uses layers in this tutorial. If you haven’t worked with layers before, you might want to take a look at Microsoft Expression Web: Creating and Using Layers before continuing.

The first thing to do is gather some information about the image that will be used as the page banner. In particular, to make the process as efficient as possible, determine what the dimensions of your image are and keep that information handy.

In this tutorial, we will be using an image that measures 860 x 150 pixels. In addition, a copy of this sample banner has been uploaded into the Windows Platform Media Gallery if you would like to download it and practice on your own. (Click the image below for a larger view.)

 

Now that we have the information about our banner image, we’ll switch back to Expression Web. To begin, we’ll need to create a layer with dimensions at least as large as the image. For the purpose of this example, we’ll create a layer with the exact same height as the image that spans the entire width of the web page as shown below.

 

Next, with the cursor inside the layer, go to the Insert menu on the Expression Web toolbar. Choose Picture and then From File.

 

Navigate to the folder where the sample banner image resides and choose that graphic to insert. After doing this, a dialog box titled Accessibility Properties, as in the following screenshot, will appear unless you have disabled this function.

 

While it’s not absolutely necessary to enter anything here, it’s a good idea to at least include an alternate text for the image for the benefit of people with slower connections. Since this is a page banner, we can just type in the name of the web site for the alternate text field.

After entering the alternate text, click the OK button and the image will appear in the layer on the web page. Most of the time, we will want this banner to be centered. The quickest way to do this is to click on the centering button on the Expression Web toolbar.

 

Once this is done, the banner will appear on the web page as shown below.

 

If you would like to see what this page would look like in a browser window, choose Preview in Browser and your desired browser type from the File menu on the toolbar. If your browser isn’t listed here, you can find out how to add it in the article Microsoft Expression Web: How to Add a New Web Browser.

For more tips and tricks, be sure to browse through the other articles in Bright Hub's collection of Expression Web tutorials.