Bringing Images Into Pages

  Note: After you have uploaded an image to your site as described in Adding Images, follow these steps to incorporate it into a page:

1. Navigate to the page in which you want to add an image
2. Click on the edit tab in the green menu bar (you need to be logged in to see this).
3. In the Body Text, place your cursor where you want the image placed on the page and click on the Image Button . The Image Properties dialog box will appear.
   
   
4. The Image Properties dialog box has three tabs: Image Info, Link, and Advanced.
5. Image Info Tab:
   • URL – click on the Browse Server button to find and select an image (note: the image must already be uploaded to the system).
   • Alternate Text – this will automatically be filled in with an image’s Title but can be changed as needed. If the title is not a meaningful description of the image, change it so that it is. Alternative text is especially useful for people with low bandwidth connections or who may opt not to load graphics, for people using handheld devices, for people with disabilities who use assistive technology, such as screen readers, and for search engine optimization: most search engines interpret the meaning of objects by analyzing their alt attribute.
   • Width, Height - please avoid using these settings for image size.  This can cause distortion and/or pixelation.  Photo editors, such as Adobe Photoshop, are recommended for image modifications.
   • Border, HSpace, VSpace and Align - please avoid using these image options.  Instead, click on the image and choose the appropriate image style. For positioning, use Image on Left, Image on Right, Image on Top and to add a border, use Image Border.
     
     
     
6. Link Tab:
   • URL – if you wish the image to be a link, type in the URL/web address of the link (be sure to include the whole URL starting with http://, if not, the link won’t work). To select a page within your site select the Browse Server button and navigate to the page.
   • Target – allows you to specify which browser window the link will appear in. When the target is not set, the link will appear in the current browser window. When set to New Window (_blank), the link will appear in a new browser window.
7. Advanced Tab: the advanced tab is for people with html and css experience. If you don’t understand the options on the advanced tab then just ignore it.
8. When you have finished editing the page, scroll to the bottom and click save.
9. The main content area automatically switches to the view tab in the green bar so that you can preview the page with its newly inserted image.

[top]