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.
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.