Skip to Navigation | Skip to Content

Web Template Guide: Images

Adding images to your Web page

Follow these steps to add an image to your Web page:

  1. Find an image in .jpg or .gif format that you are are authorized to use (e.g. free of copyright restrictions).
  2. Open your image in an editing program like Fireworks or Photoshop and re-size the image to fit on your Web page (see standard sizes).
  3. Optimize your image in Fireworks so that it is as small a file as possible.
  4. Save your edited image in the images folder for the section of your Web site your image will be displayed in. Rename the file to reflect that the file has been edited.
  5. If your image will be on home page for your "Academics" section, save your image in the "images" folder in the "academics" folder for your Web site.

  6. Save the original image in the same folder in which you save your edited image so that you can go back and re-size it if necessary.
  7. Find the place in your Web page in which you'd like to insert your image. Place your cursor before the first letter of a paragraph near where you want to place the image.
  8. Go to Insert>>Image. Browse to the edited version of your image in the Web site folder. Press OK.
  9. Enter alternate text for your image into the box that appears on the screen. This text will help the visually impaired using screen readers to know what the image is. Press OK.

Move your image

You can move your image around your Web page by dragging and dropping it anywhere within the content area.

Line your image to the left or right side of your page

Style classes in DreamweaverBy default, the image will appear to the left and above your text. Line the image to the right or left side of your text by following these steps:

  1. Right-click on your image.
  2. Go to "CSS Styles."
  3. Choose "img-right" or "img-left" depending on which side you'd like your image to float to. Once you apply one of these styles, you can still move the image up and down on the page by dragging and dropping.

Secondary

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut nibh.

Banner images

Learn more about how to create a banner image for your page.

Image optimization

Reduce the size of your image so that it will load more quickly on your Web page.

Standard image sizes

720 pixels wide – this size is used for banner pictures that span the entire width of the Heading Content area.

680 pixels wide – this size spans the entire content area when it is set to one column layout.

450 pixels wide – this size spans the entire content area when it is set to default layout with a sidebar.

340 pixels wide – this size spans half the content area when it is set to one column layout.

240 pixels wide - this size spans one third of the one column layout page. This is the preferred size for most images on a page with only one column.

225 pixels wide - this width fits half of the main content area when your page contains a sidebar (defaultLayout).

220 pixels wide - this width fits the entire content area when your page contains three columns (threeColLayout).

200 pixels wide – this size spans the width of the sidebar in defaultLayout and is the preferred size for any images in the sidebar.

114x114 pixels – these are the preferred dimensions for thumbnail pictures.