using microsoft word drawing tools. word drawing tools to create navigation diagram using microsoft...
TRANSCRIPT
Using Microsoft Word Drawing Tools
Word Drawing Tools to Create Navigation Diagram
Using Microsoft Word Drawing Tools, Slide 2 Copyright © 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.
Start with an empty document in Microsoft Word
Using Microsoft Word Drawing Tools, Slide 3 Copyright © 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.
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.
Using the drawing tools
Using Microsoft Word Drawing Tools, Slide 4 Copyright © 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.
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.
The drawing tools toolbar is located at the base of the window.
Adding a text box - 1
Using Microsoft Word Drawing Tools, Slide 5 Copyright © 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.
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.
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.
Adding a text box - 2
Using Microsoft Word Drawing Tools, Slide 6 Copyright © 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.
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.
Add the text to the text box
Using Microsoft Word Drawing Tools, Slide 7 Copyright © 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.
Format the text in the text box
Using Microsoft Word Drawing Tools, Slide 8 Copyright © 2004, Jim Schwab, University of Texas at Austin
Center the title for the web page in the text box.
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.
Change the font for all of the text to 10-point bold Times-Roman.
Copy the text box the clip board
Using Microsoft Word Drawing Tools, Slide 9 Copyright © 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.
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.
First, to copy the text box, click on it so that the dotted border appears.
Second, click on the Copy tool button.
Second, click on the Copy tool button.
Paste the clipboard text box
Using Microsoft Word Drawing Tools, Slide 10 Copyright © 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.
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.
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.
The second text box pasted in the drawing canvas
Using Microsoft Word Drawing Tools, Slide 11 Copyright © 2004, Jim Schwab, University of Texas at Austin
The second text box is pasted down and to the right of the original text box.
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.
To position the second text box where we want it, drag it down and to the left.
Continue pasting text boxes in the drawing canvas
Using Microsoft Word Drawing Tools, Slide 12 Copyright © 2004, Jim Schwab, University of Texas at Austin
Paste and position three more text boxes in the drawing canvas.
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.
Note that I have reduced the size of the document to 75% so that more of the drawing canvas is visible.
Enlarging the size of the drawing canvas
Using Microsoft Word Drawing Tools, Slide 13 Copyright © 2004, Jim Schwab, University of Texas at Austin
The drawing canvas is not large enough to hold more text boxes.
The drawing canvas is not large enough to hold more text boxes.
To enlarge the drawing canvas, drag the bottom handle downward.
To enlarge the drawing canvas, drag the bottom handle downward.
The main web pages in my site
Using Microsoft Word Drawing Tools, Slide 14 Copyright © 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.
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.
Adding the lines for navigation
Using Microsoft Word Drawing Tools, Slide 15 Copyright © 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.
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.
Add a navigation line
Using Microsoft Word Drawing Tools, Slide 16 Copyright © 2004, Jim Schwab, University of Texas at Austin
First, click on the drawing canvas to make sure it is selected.
First, click on the drawing canvas to make sure it is selected.
Second, click on the line tool button.
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.
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.
Make the navigation line thicker and more visible
Using Microsoft Word Drawing Tools, Slide 17 Copyright © 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.
To make the navigation line more visible, right click on the Line Style tool button, and select a thickness of 2 1/4 points.
The navigation lines for all main web pages
Using Microsoft Word Drawing Tools, Slide 18 Copyright © 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.
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.
Navigation links for individual success stories
Using Microsoft Word Drawing Tools, Slide 19 Copyright © 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.
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.
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.