IA

Visio Tutorial
Agnes Misiurny
 VISIO TUTORIAL

SYLLABUS

BASIC/BEST PRACTICES

MY FAVORITE SHAPES

INTERMEDIATE

TABLE OF CONTENTS MACRO

LINKS FOR QUICK DOCUMENT NAVIGATION

QUICK PROTOTYPING

- Saving as a clickable website

TABLE OF CONTENTS

1. SHAPES GALLERIES (STENCILS)....................................................................................................... 3

2. TABLE OF CONTENTS MACRO ........................................................................................................ 5

3. LINKS FOR QUICK DOCUMENT NAVIGATION ............................................................................... 10

GETTING TO AND FROM SITE-MAP ............................................................................................ 10

PDF NAVIGATION...................................................................................................................... 12

4. QUICK PROTOTYPING .................................................................................................................. 13

1. DOWNLOAD WEB COMPONENTS SHAPES STENCIL ............................................................. 13

2. USE BACKGROUNDS .......................................................................................................... 13

3. COPYING AND PASTING ..................................................................................................... 14

4. LINKING ............................................................................................................................. 15

5. SAVING AS A WEBPAGE ..................................................................................................... 16

6. ADD CLICKABLE ANNOTATIONS ......................................................................................... 18

REFERENCE:..................................................................................................................................... 22
 SHAPES GALLERIES (STENCILS)

One of the most important things to do to make things faster and easier to do in Visio is to keep your favorite
shapes stencil. You can also go further and create a new additional library for every project you work on, if you
know you’re going to use a particular logo or shape m ore often.After the project is done you can just delete the
stencil.

Visio automatically creates your favorite shapes folder for you. You can access it by clicking the Shapes button on
the toolbar and selecting My Shapes > Favorites.

Whenever you use a shape, an image or even a piece of text, copy and paste it into
your shapes stencil. You may also rename them to keep things organized. If a
library needs to be saved it will have a small red star next to the header icon. Right-
click on the header to save that library.

Lynda.com tutorial video of this:

http://tinyurl.com/yhxcjn

In addition, there are many downloadable shapes stencils for web wireframes,
windows interfaces, etc. For example, guuui.com has put together a pre-made
library of shapes most needed for web wireframes. It includes all the fun stuff that
you might need including scrollbars, radio buttons, drop down menus and pop-up
windows. It’s available for dow nload here:
http://www.guuui.com/downloads/GUUUI%20Web%20Prototyping%20Tool.zip

Unzip the file and copy the shapes file called Web Prototyping into your My
Documents > My Shapes folder.
You will then be able to access it from Visio by clicking the Shapes button in the toolbar.

The dow nload w illalso include a tem plate w indow for you to use,how ever it’s very simple and does not help
much.

The best thing to do is to know what shapes you will use mostly and keep your own stencil. For other
downloadable stencils and even a BlastRadius IDD stencil see:
http://intra.blastradius.com/display/UE/Visio+Stencils
 TABLE OF CONTENTS MACRO

This quick tutorial will teach you how to set-up and use a Visio macro that automatically creates a clickable table of
contents for you.

1. Click on the menu Tools>Macro>Visual Basic Editor

2. This brings open another w indow .O n the left you should have a project brow ser and under the “Visio
O bjects” category there should be a code file called “ThisDocum ent”.D ouble click on this.
 3. This will open a window on the right. Copy and paste the entire contents of the below code into this
window and close the Visual Basic Editor.

Sub TableOfContents()

' creates a shape for each page in the drawing on the first page of the drawing
' then add a dbl-clk GoTo to each shape so you can double click and go to that Page

Dim PageObj As Visio.Page

Dim TOCEntry As Visio.Shape
Dim CellOjb As Visio.Cell
Dim PosY As Double
Dim PageCnt As Double
' ActiveDocument.Pages.Count will give the number of pages, but we are interested
' the number of foreground pages
PageCnt = 0
For Each PageObj In ActiveDocument.Pages
If PageObj.Background = False Then PageCnt = PageCnt + 1
Next

' loop through all the pages

For Each PageObj In ActiveDocument.Pages
If PageObj.Background = False Then ' Only foreground pages

' where to put the entry on the page?

PosY = (PageCnt - PageObj.Index) / 4 + 1
' draw a rectangle for each page to hold the text
Set TOCEntry = ActiveDocument.Pages(1).DrawRectangle(1, PosY, 4, PosY + 0.25)
' write the page name in the rectangle
TOCEntry.Text = PageObj.Name

' need to create a handle to add the hyperlink

Set hlink = TOCEntry.AddHyperlink
' add the page name as an address
hlink.SubAddress = PageObj.Name

End If
Next

End Sub

4. Back in Visio, again on the menu click Tools > Macro > ThisDocument > TableOfContents

5. This creates a table of boxes with page names on the first page of the document (title page for most).
Each box is hyperlinked to the page it corresponds to (see the “Links for Q uick D ocum ent N avigation”
section in this tutorial)
6. You can copy/paste these boxes onto a different page, the revision page for example. You can also
remove boxes, like the title page reference for example.

7. Ifyou’d like to add page num bers , create a set of empty boxes right next to the table boxes. Select these
new boxes and click Tools > Add-Ons > Visio Extras > Number Shapes
This brings up a dialogue box.Here,select the “Auto num ber” operation.(Select “Start w ith” to be 2 if
your Table of Contents doesn’t include the Title Page)

This automatically numbers your boxes and completes your Table of Contents.
If the idea of macros automatically doing stuff for you makes you as excited as me, here are some more:
http://www.welie.com/visio/

Macro that shows and hides your annotation layer for printing etc.:
http://www.maadmob.net/donna/blog/archives/000690.html
 LINKS FOR QUICK DOCUMENT NAVIGATION

GETTING TO AND FROM SITE-MAP

1. Create a sitemap for your project and a corresponding page for each box in the site map.

2. Select box in site map

3. Click Insert Hyperlinks button on your toolbar (if you don’t have the w eb toolbar open,right click the
toolbar and check-off the “W eb” Toolbar)
4. Click the Brow se button next to the “Sub-address” field.This w illbring up a list of allthe pages in your
visio document. Select the page you would like to see. You may also further customize it with a particular
shape you’d like to link to or a particular zoom to look at. But most of the time just the page at default
zoom is good. (If you would like the box to link to an outside source, a website or another IDD for
exam ple,enter the address in the “Address” field.
 5. Now, on your page background, using the same method of adding hyperlinks, create a persistent link back
to the sitemap page. I create a shape that kinda looks like a mini site-map. This way every page will have a
quick link back to the starting page.

Furthermore, you can place this object on a layer that will not print, since it will not be useful in a
printout (however this does mean that it will not be visible in a PDF export)

6. Shapes that have hyperlinks in them in the Visio edit mode will have the little globe/link icons next to the
pointer when you roll over them. To follow links and quickly jump to pages in the Visio edit mode, right-
click a hyperlinked shape and the menu will display the links at the top of the menu. Click on link to go to
that page. (This will not work for the “Back to Sitem ap” or any that are globalon the background)

Tip: Keep in mind if you copy and paste shapes, the hyperlink associated with it gets copied as well. To delete a
link, select the same, click the hyperlink button in your toolbar and delete any links there and press OK.

Advanced navigation: See Drop Down Navigation here.

PDF NAVIGATION

Visio 2007 (currently in beta version) allows you to publish to pdf as a save option. This feature also keeps the
clickable links feature and makes the pdf clickable so it works perfect with your table of contents (see Table of
Contents Macro)
 QUICK PROTOTYPING

Sometimes a clickable prototype is the best way to present an idea to a client.

Benefits of clickable wireframes:

• Improved communication of ideas to clients, developers, quality assurance people, and other project
members

• Websites are not linear – they are complex weaves of interlinking pathways – why should they be
communicated in a linear document?

• Less annotations are needed. Instead of describing it; show it.

• Easier to share, just send a URL – no need for software and sending large files.

1. DOWNLOAD WEB COMPONE NTS SHAPES STENCIL: http://www.guuui.com/issues/01_06.php

They allow quick already pre-made shapes that you would use most such as buttons, scroll boxes,
radio buttons, etc. The IA intra also has many sources for other stencils for wireframes.

2. USE BACKGROUNDS :

If there are common components that all your pages will show create background page(s) to hold
these components.

If you do not know how to create background pages you can find more info here:
http://office.microsoft.com/en-us/visio/HA010830851033.aspx

Common components may include the main menu/navigation. If you need a menu item to
highlight depending on what page you are on it is a better idea to have this as a common
component and, when needed, cover up with a highlighted button. Example:

1. Common buttons on background page.

2. On Page1, create a highlighted button the same size as the common menu.
 3. Cover up the background with the new highlighted button.

3. COPYING AND PASTING :

Any state that your webpage can have needs its own page in Visio and you link between them:
That’s the entire foundation ofcreating prototypes in Visio.

The components that are constant must stay in the same spot in order for this to work – that way
it’llseem like only som e parts are changing but really you’re view ing a w hole new page.

Thus, the trick is in placing the components from the previous page exactly in the same spot on
the next page. This can be quite frustrating.Here’s a tip:Create a tiny cross hair (a plus sign that
sits on a line) at the left top of your page:
 When you select all and paste on the next page move the entire contents until the cross hairs
line up with the top page:

4. LINKING
 Create buttons and on your pages with different shapes and add hyperlinks to them as described
in the Links for quick document navigation tutorial.

Drop-down navigation
You can simulate drop down navigation by giving a shape two links. Enter description text for
each link and it will show that way in the drop down (otherwise it will show the page names it
links to)

That way when viewed as a webpage in Internet Explorer when you click on the shape with
multiple links you will see a box appear where you can select which link you would like to go to.

Scrolling
To simulate scrolling have two pages with one of them on the top of the page and the second (or
subsequent) showing the rest of the page. Use the scrollbar arrows as buttons/links between the
pages.

5. SAVING AS A WEBPAGE:

Save your document as a webpage. This will create one htm file and a folder with source files and
images. You have to post both of them onto the online location. Keep in mind also that the
default htm filenam e is the visio doc’s filenam e so you m ay w ant to change that to “index” or
something simpler.
The webpage save option automatically creates a navigation pane for you. In Internet Explorer
it’s an ActiveX com ponent w ith zoom in ability,a search option and a very handy details option.
(see Add Clickable Annotations for details)

INTERNET EXPLORER:
 FIREFOX:

6. ADD CLICKABLE ANNOTATIONS (ADVANCED)

The webpage publisher allows you to add ctrl-clickable data for shapes (as seen before, this is
only available in Internet Explorer). Unfortunately, Idon’t think this is m eant to be annotations or
text rather, but I figured out a way to make it semi-useful. Please let me know if you know of a
better way to do this.

1. Create obvious clickable shapes to stand for annotations. Usually at BlastRadius this means
something like this:

2. Open the Shape data window. View > Shape Data Window
3. Click Add on the Shape Data W indow .Select“Create a new set” and give it a nam e –
“Annotation” m ay be a good one.

4. This w illcreate an item called “Annotation” in your Shape Data Window. Click it and click
“D efine”.G ive it a label(Iuse “Com m ent”),you’llsee w hat this is for later,change Type to
be “String”,change Form at to “N orm al” > and press O K.
5. Select your annotation bubble shape and check-offthe “Annotation” data set in the Shape
Data Window and click Apply.

6. Now, right-click on your shape and click Data > Shape Data and enter your comment! Press
OK.
7. Now, when you save your visio as a webpage and open it in IE you can ctrl-click to view your
annotation.

8. To add comments to other shapes follow steps 5 through 7.

 REFERENCE:

http://www.guuui.com/issues/01_06.php - web prototype shapes library

http://iasummit.org/2006/files/128_POSTER_FINAL.pdf

If the idea of macros automatically doing stuff for you makes you as excited as me, here are some more:
http://www.welie.com/visio/

Macro that shows and hides your annotation layer for printing etc.:
http://www.maadmob.net/donna/blog/archives/000690.html