If you are using Dreamweaver, follow the steps below to change your homepage image.

First open up your homepage (index.html) in Dreamweaver. (Get help on how to open a file in Dreamweaver.) Then go to Modify —> Template Properties...

A dialog box will appear that looks like the image below. Scroll down to where you see the property page_image and page_image_alt.

The page_image property will hold the filename of the main homepage image. In this case, our picture for the Student Health and Counseling Center is called "Wellington.jpg", which is located in a folder called "images". Notice you need to include the extension ".jpg" when referring to this picture.

The page_image_alt property will hold the alt attribute for the main page image. "Alt" stands for alternative text description. Insert one descriptive sentence that describes this main image. This sentence will appear when you hover your mouse cursor over the image. Go ahead and give it a try on the above image and see what you get.

Because a blind user will use a talking browser to hear this alternative text description, it is important to put some thought into your description. Imagine you were blind and the contents of a page were being read to you and out of nowhere you heard "students." Wouldn't it make more sense to you if the alt read "Picture of CWU students in front of Barge Hall."

Top of Page

Open the page you want to edit in Dreamweaver. (Get help on how to open a file in Dreamweaver.) Then go to Modify —> Template Properties...

Scroll down until you see the property, page_image. This property will hold the filename of image that appears in the upper left corner of the page. Note: The value that you insert for this image will be just the name of the picture itself without the extension (.jpg, .gif, etc.).

View a listing of all available images.

Please note: If you have specific pictures that you would like to insert, just let us know and we can assist you in editing these pictures.

Top of Page

You can add an image to your content area by using the image tag.

Accessibility Note: It is important to always include the alt attribute in your image tag. "Alt" stands for alternative text description. This seems to be the number one problem for accessibility and yet it is so easy to fix. If you do not use an alt attribute, your pages will not validate. Failing to use the alt attribute also means that a blind person will not "see" the image.

Because a blind user will use a talking browser to hear this alternative text description, it is important to put some thought into your description. Imagine you were blind and the contents of a page were being read to you and out of nowhere you heard "ball." Wouldn't it make more sense to you if the alt read "Picture of a soccer ball."

Example Code:

<img src="images/soccer_ball.gif" height="48" width="49" alt="Image of a soccer ball" />

You can also align your images to be left aligned, centered, or right aligned. Wrap a div tag around the image tag and add an align attribute.

<div align="center"><img src="images/soccer_ball.gif" height="48" width="49" alt="Image of a soccer ball" /></div>

Result:

Top of Page