Sample #7 – How to Create a Table to organize Info, Images and Links

1. Click Add New Item and select Article.

2. Type Table Sample #7 in the title field.

3. Scroll down to the HTML Editor and select the More Tools button.

4. Select the Full Screen button ( ) in the top row of the Editor buttons 6th from the left.

5. Place your cursor in the HTML Editor in the Upper Left Corner.

6. Select the Insert Table button ( ) on the far left of the 2nd row of Editor buttons and Select Table Wizard from the drop down menu.

7. Use the and buttons to create a Table with 2 Rows and 3 Columns.

8. Go to the 2nd Tab, Table, and insert 525 into the width field.

9. Go to the 4th Tab, Style Builder, and go to the Background tab. Select a background color at the top of this tab.

10. Go to the Border tab. In the second border field select medium, in the style field select solid and in the color field select a border color.

11. Click Ok at the bottom of the Table Wizard screen.

12. Place your cursor in the first column and at the bottom of your Editor view click the button and select Properties.

13. Insert 175 in the width box and 100 in the height box and click Ok at the bottom.

14. Repeat Steps 10 and 11 for each cell in the table.

15. Place your cursor in the first cell and type the title of your organization. Highlight the text, select the align center button ( ) use the font size drop down menu select size 3 and select the Bold ( ) button.

16. Place your cursor in the last cell of the top row and type “History”. Highlight the text, select the align center button ( ) and select the Bold ( ) button.

17. Place your cursor in the first cell of the second row and type “About Us”. Highlight the text, select the align center button ( ) and select the Bold ( ) button.

18. Place your cursor in the last cell of the second row and type “Visit Google”. Highlight the text, select the align center button ( ) and select the Bold ( ) button.

19. Place your cursor in the second cell of the first row.

20. Select the Insert Image button ( ) located in the center of the first row of HTML Editor buttons.

21. Select the Upload button on the Insert Image tab. Locate and select the Training folder and then select the reflectioncity.jpg image on your computer.

22. The image will appear in the top right section of the window. 23. Click Insert at the bottom of the Insert Image window.

24. Place your cursor in the second cell of the second row.

25. Select the Insert Image button ( ) located in the center of the first row of HTML Editor buttons.

26. Locate and select the reflectioncity.jpg image that you uploaded to your computer.

27. The image will appear in the top right section of the window.

28. Click Insert at the bottom of the Insert Image window.

29. In the last cell of the top row, highlight the “History” text and select the Downloadable files ( ) button.

30. Select the Upload button on the Downloadable Files tab. Locate and select the SampleForm.pdf document on your computer. Once selected, the document will be uploaded to the server.

31. In the Target drop down menu select New Window.

32. Click Insert at the bottom of the Downloadable Files window.

33. In the first cell of the second row, highlight the text “About Us” and select the Insert Link ( ) button.

34. Open your website in a new internet window and copy a URL in the following style: /RelId/605721/ISvars/default/Admissions.htm and paste it into the URL field. This means to begin copying the URL following .com.

35. In the Target drop down menu select New Window. Click Ok at the bottom.

This link is shortened because it is an internal link, a link from one place within your website to another place within your website.

To create an internal link, delete all text beginning with http until the end of net from your link. (Ex. www.gim.net)

36. In the last cell of the second row, highlight the text “Visit Google” and select the Insert Link ( ) button.

37. Copy the following link: http://www.google.com and paste it into the URL field. Make sure the Type drop down is set to http://.

38. In the Target drop down menu select New Window. Click Ok at the bottom.

This link is a full link because it is an external link, a link from one place within your website to another place outside of your website.

To create an external link, include the full URL.

39. Select the Full Screen button ( ) located in the top row of the HTML Editor buttons sixth from the left.

40. Change the status to Published and Click Save at the bottom of the Add/Edit Article form.