If you have successfully followed the first tutorial in our CMS series, you have learned how to login to your account and update the text on your site in real time.

In the second tutorial, you learned how to to upload images from your computer to the web server using the Image Manager. You also learned how to edit, delete and categorize your images into folders.

In this tutorial, you will learn how to insert images into your web pages using the HTML editor. You were introduced to the HTML editor in the first tutorial.

The HTML editor in your CMS gives you a lot of flexibility. You can resize your images, position them on the page and wrap text around them. You can create a link from the pictures so that a new page will open when you click on it. You can also perform more advanced functions like image rollovers. All of this is easily accomplished in your web browser, without any programming skills or special software.

1. 1. Following the directions from the first tutorial, login to your account.
2. 
3.  
4. 2. Click the "Pages" link and select a page to edit by clicking on the page's name.
5. 
6.  
7. 3. Place your cursor in the area of the content box where you want to insert your image.
8. 
9.  
10. 4. Click on the "Insert/edit image" icon.
11. 
12.  
13. 5. The following dialog box will open. Click on the "Browse" icon to select an image from the Image Manager.
14. 
15.  
16. 6. Select an image from the list by clicking on the image or the link.
17. 
18. 7. Your image is displayed in the dialog box. We would like it to be smaller so we will resize it. Click on the "Appearance" tab.
19. 
20.  
21. 8. The first box in the "Dimensions" section is the width and the second is the height. If you want to keep the current proportions, you will only need to change one box. In our example, we have changed the width from 150 pixels to 100 pixels. After clicking the tab button, the height is automatically calculated as long as the "Constrain Proportions" box is checked. Add space around your image, if desired. Click "Insert" when you are finished editing.
22. 
23.  
24. 9. The image is now shown in the HTML editor with the edits you applied in the "Appearance" tab. If you like the result, save your changes by clicking "Submit" or "Apply".
25. 
26.  
27. Result: Click the "View Page" icon to see the the image on your web page, updated in real time.

 

 

Part Two: More image editing and placement options...

Back to Tutorial Index