1. Using Microsoft Word Drawing Tools

2. Word Drawing Tools to Create Navigation Diagram Using Microsoft Word Drawing Tools, Slide 2Copyright © 2004, Jim Schwab, University of Texas at Austin We can create the navigation diagram for our web site using Microsoft Word’s drawing tools. Using drawing tool is a two-step process. First, we select the drawing tool that we want to add to the document. Second, we drag the mouse to position the drawing object on the document’s drawing canvas.

3. Start with an empty document in Microsoft Word Using Microsoft Word Drawing Tools, Slide 3Copyright © 2004, Jim Schwab, University of Texas at Austin Open Microsoft Word to use for the navigation diagram. If Word opens an existing document instead of a new document, click on the new button to open Document 1.

4. Using the drawing tools Using Microsoft Word Drawing Tools, Slide 4Copyright © 2004, Jim Schwab, University of Texas at Austin If the drawing tools toolbar is not visible, click on the Drawing tool button to activate the toolbar. The drawing tools toolbar is located at the base of the window.

5. Adding a text box - 1 Using Microsoft Word Drawing Tools, Slide 5Copyright © 2004, Jim Schwab, University of Texas at Austin Click on the text box tool on the drawing toolbar. When the mouse is clicked, Word opens a drawing canvas, with the words Create your drawing here. The drawing canvas is the destination for all of the objects in our diagram. When the text box tool was clicked, the cursor changed to a cross-hair, which we will drag to create and locate the text box.

6. Adding a text box - 2 Using Microsoft Word Drawing Tools, Slide 6Copyright © 2004, Jim Schwab, University of Texas at Austin To add the text box, position the cross-hair where you want the upper left corner of the text box to be located, hold down the mouse and drag to the location of the lower right corner of the text box.

7. Add the text to the text box Using Microsoft Word Drawing Tools, Slide 7Copyright © 2004, Jim Schwab, University of Texas at Austin when we released the mouse button to finish the text box, Word added the text box and inserted a blinking text insertion cursor. We type the name and contents for the first web page in the text box. when we released the mouse button to finish the text box, Word added the text box and inserted a blinking text insertion cursor. We type the name and contents for the first web page in the text box.

8. Format the text in the text box Using Microsoft Word Drawing Tools, Slide 8Copyright © 2004, Jim Schwab, University of Texas at Austin Center the title for the web page in the text box. Change the font for all of the text to 10-point bold Times-Roman.

9. Copy the text box the clip board Using Microsoft Word Drawing Tools, Slide 9Copyright © 2004, Jim Schwab, University of Texas at Austin If we copy and paste the text box to create the other text boxes we need, we will not have to format each one individually. First, to copy the text box, click on it so that the dotted border appears. Second, click on the Copy tool button.

10. Paste the clipboard text box Using Microsoft Word Drawing Tools, Slide 10Copyright © 2004, Jim Schwab, University of Texas at Austin Click somewhere on the drawing canvas other than the text box and click on the Paste tool button. If the text box is selected when you click on the Paste tool button, Word will paste one text box insider the other, which is not what we want.

11. The second text box pasted in the drawing canvas Using Microsoft Word Drawing Tools, Slide 11Copyright © 2004, Jim Schwab, University of Texas at Austin The second text box is pasted down and to the right of the original text box. To position the second text box where we want it, drag it down and to the left.

12. Continue pasting text boxes in the drawing canvas Using Microsoft Word Drawing Tools, Slide 12Copyright © 2004, Jim Schwab, University of Texas at Austin Paste and position three more text boxes in the drawing canvas. Note that I have reduced the size of the document to 75% so that more of the drawing canvas is visible.

13. Enlarging the size of the drawing canvas Using Microsoft Word Drawing Tools, Slide 13Copyright © 2004, Jim Schwab, University of Texas at Austin The drawing canvas is not large enough to hold more text boxes. To enlarge the drawing canvas, drag the bottom handle downward.

14. The main web pages in my site Using Microsoft Word Drawing Tools, Slide 14Copyright © 2004, Jim Schwab, University of Texas at Austin When I have finished adding all of the eight main pages to my size and replacing the text, the diagram of my web site looks like this.

15. Adding the lines for navigation Using Microsoft Word Drawing Tools, Slide 15Copyright © 2004, Jim Schwab, University of Texas at Austin I will represent the navigation between web pages with lines. If I had fewer pages, I might use arrows. However, with eight pages all connecting to one another, two way arrows would become unwieldy.

16. Add a navigation line Using Microsoft Word Drawing Tools, Slide 16Copyright © 2004, Jim Schwab, University of Texas at Austin First, click on the drawing canvas to make sure it is selected. Second, click on the line tool button. Third, hold down the cross hair cursor over the bottom of the top most text box, and draw a line to the top of the bottom most text box.

17. Make the navigation line thicker and more visible Using Microsoft Word Drawing Tools, Slide 17Copyright © 2004, Jim Schwab, University of Texas at Austin To make the navigation line more visible, right click on the Line Style tool button, and select a thickness of 2 1/4 points.

18. The navigation lines for all main web pages Using Microsoft Word Drawing Tools, Slide 18Copyright © 2004, Jim Schwab, University of Texas at Austin When we have added all of the connecting lines, the web page layout looks like this. The lines are meant to indicate that each web page can directly link to all of the other web pages.

19. Navigation links for individual success stories Using Microsoft Word Drawing Tools, Slide 19Copyright © 2004, Jim Schwab, University of Texas at Austin While the main page Our Success Stories links to each of the other main web pages, the individual success stories only link back to the main Our Success Stories page. Each individual success story does not directly link to the other individual success stories. To depict this arrangement, we add four individual text boxes beneath the main Our Success Stories web page. A single line between each individual story and the main web page indicates the limited navigation links that are provided.