Information Resources & Technology (IRT)–

Add Images

Note: Images, tables, text and combinations of all 3, should fit within the horizontal space available in each column. Wide images, wide tables, and longcontinuoustextwithnobreaks, can cause the central content to be pushed out into the background area.

Here are the maximum widths for each column size:

Step 1: Add a new image to the site

  1. sample image
    You will need to have a sample image on your computer. The .jpg and .gif image formats are the only universally-recognized formats in the browser. Here's an image you can download now to your desktop. In your browser, right-click (Ctrl-click on Mac) on the link and find the command closest to "Download Image" or "Save Image to Disk"
  2. On your computer's desktop, find the "arches.jpg" file you downloaded a moment ago; Edit > Copy or Edit > Cut
  3. Find and open your site's local folder, then find and open the "images" folder
  4. Edit > Paste to copy the image into this folder
  5. Switch to Dreamweaver
  6. Find and open the root/images folder, then find and select "arches.jpg"
  7. Use the menu Site > Put
  8. The image is now live on the server and can be added to pages
Watch Demo

Step 2: Add image to page

  1. In your browser, find the page where you want to place the image; if you completed the tutorials for New Topic through Working With Left Navigation, use use your My Project home page, /my_project/
  2. In Dreamweaver, find and open the /my_project/index.html file
  3. Place your cursor at the beginning of the first paragraph
  4. With the Common tab showing in the Insert toolbar, click once on the Insert Image button (if you get the button menu, select "Image")
  5. Browse within your site's local folder until you find the root/images folder; double-click or select and click OK to enter the folder
  6. Browse to and select the "arches.jpg" file
  7. IMPORTANT: Make sure the URL is set "Relative to: Document" at the bottom of the Select Image Source dialog box
  8. Type into the Image Tag Accessibility Attributes dialog box some text appropriate for the use of this image; this provides alternate text for disabled users
    • Images used as links should indicate the destination of the link, e.g. "Stanford University Home"
    • Images used as illustrations should describe the image, e.g. "Stanford Arches Image"
    • For images without any real content (such as small arrow or other graphics) type in a space character; the text-only reader will skip over such images
    • Ignore the long description field, it's optional
  9. Note how the image is inserted into the flow of text
Watch Demo

Step 3: Modify image properties

  1. The image should be selected (you will see a rule and handles)
  2. Try scaling the image using the handles, with and without holding the shift key
    • Images should be pre-edited to very close to the size needed in the browser before uploading, using an image editor such as Photoshop or Fireworks
    • Large images made small on the page still require the user to download the full, large image file
    • You can scale .jpg images up or down a little; all .gif images scale very poorly
  3. Click the image size reset button in the Properties Inspector
  4. Change the Align property to "Right"; note how the layout changes
  5. Add a 5 (for 5 pixels) to both the V Space and H Space fields in the Properties Inspector to add a margin around the image
Watch Demo

Step 4: Make the image a link

  1. The image should be selected
  2. Find the Link field in the Properties Inspector and click your cursor into it
  3. Type or paste (you must right/ctrl-click or use the keyboard shortcut, Ctrl/Alt-v) the full URL of the Stanford Home Page - http://www.stanford.edu/
  4. Look for the Border field in the Properties Inspector and enter 0
  5. The Alt field should contain text describing the link, e.g. "Stanford Home Page"
  6. If desired, set the Target to "_blank" in the Properties Inspector; this makes the link appear in a new browser window

Step 5: Finish up

  1. Use the File menu > Save command
  2. Use the Site menu > Put command
  3. Switch to a browser, view and/or reload the home page to see your new image

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: