back

Contribute: Insert an Image

Step One

Create your image

Create an image in Fireworks, Photoshop or another Image program. You may want to resize the image so that it will load more quickly and take up less screen space before placing it in your web page. (Please note: Images wider than 590 pixels may extend outside browser window for viewers with smaller screens)

Step Two

Insert Image

Open Contribute and either select "Insert" and then"Image" from the Menu at the top or click the "Image" icon across the top of your page (shown below). Select either "From My Computer" if the image is stored on our computer's hard drive or "From Website" if the image is stored on another Web site.

Top of Contribute Window

A Select Image dialogue box will appear. Navigate to the image you would like to add. In the example below, the image is "ec-zoom" in the My Pictures folder within My Documents. Click on the image and then click "Select". If prompted, enter the "Alt Tag", a short description of the image, for the visually impared.

Select Image Dialogue

Step Three

Edit your image properties as needed

To edit your image properties, select your image by clicking on it once with the left mouse button then clicking the right mouse button once. A pop-up menu will appear. Select the "Image Properties" option. (You can also get to this property dialogue by Clicking "Format" in the menu).

Image Menu

If you have not already done so, enter Alt text in the Image Properties menu. On this menu you can also adjust size if you wish, however is best to adjust size in a graphics program such as Photoshop or Fireworks.

Image Properties

Step Four

Select a style

Apply a "Style" to your image by clicking on it once with the left mouse button then select the Format menu option then choose Style.

Format Menu

A pop-up menu will appear with a list of Styles you can apply to elements in your Web page. Scroll until you see styles that begin with the word "Photo". Using these styles will help your image fit in with the overall look of the DePauw Web site. Below I've selected PhotoRight. This will place a border around the photo, move it to the right of the page and wrap text around it.

East College

Style Menu

An example of an image with the PhotoRight style is show beside: