Pin Me

Microsoft Expression Web Tutorials: Adding a Page Banner

written by: •edited by: Tricia Goss•updated: 7/26/2013

Adding a banner for a web page can be accomplished quite easily through the use of layers in Microsoft Expression Web.

  • slide 1 of 4

    Editor's Note: Microsoft Expression is currently only available as a free download with technical support not included. If interested, you can download it here.

  • slide 2 of 4

    Why Do You Need 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.

  • slide 3 of 4

    Prepare Your Files

    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. (Click the image below for a larger view.)

    sample page banner 

  • slide 4 of 4

    Adding the Page Banner in Expression Web

    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.

    create layer 

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

    insert picture 

    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.

    accessibility properties 

    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.

    center image 

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

    banner placement 

    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.

Multimedia in Expression Web

Want to add sound, music, video, or other multimedia effects to a web page using Microsoft Expression Web? This series will explore some of the available options.
  1. Microsoft Expression Web: How to Add a Page Transition
  2. Microsoft Expression Web Tutorials: Adding a Page Banner
  3. Microsoft Expression Web: How to Add Sound to a Web Page
  4. Add Calendars and Other Google Gadgets to a Web Page in Expression Web

Popular Pages

More Info