Visio Tutorial Conceptual Web Site Diagram

Microsoft Visio 2010

Bryton Burling

Table of Contents
Opening Microsoft Visio 2010 ...................................................................................................................... 2 Getting Started.............................................................................................................................................. 3 Creating a Conceptual Web Site Diagram ..................................................................................................... 3 Analyzing the Shapes Toolbar ................................................................................................................... 3 Adding a Home Page ................................................................................................................................. 4 Adding a Web Page ................................................................................................................................... 5 Adding Text to a Web Page Shape ............................................................................................................ 6 Connecting Items in a Document.............................................................................................................. 7 Finishing Your Diagram ................................................................................................................................. 8 Design of the Diagram .............................................................................................................................. 8 Changing the Theme ............................................................................................................................. 8 Changing the Effect ................................................................................................................................... 9 Changing the Background ..................................................................................................................... 9 Conclusion ................................................................................................................................................... 11

1|Page

Visio Tutorial Conceptual Web Site Diagram

Opening Microsoft Visio 2010
Step 1 . The first step you need to do is open Microsoft Visio 2010.

Step 2 . To do this, click on your start button located on the desktop.

Step 3 . Once there, type in Visio in the search bar and click on Microsoft Visio 2010.

2|Page

Visio Tutorial Conceptual Web Site Diagram

Getting Started
Step 1 . After you have clicked on Microsoft Visio 2010 , the
program should open.

Step 2 . To begin making a conceptual Website Diagram go to

Then click on Software and Database under Template Categories.

Step 3 . Under Software and Database, click on Conceptual Web Site, then click Create.

Creating a Conceptual Web Site Diagram

Analyzing the Shapes Toolbar
Step 1 . Before you begin lets take a look at whats on the Shapes toolbar.

3|Page

Visio Tutorial Conceptual Web Site Diagram

Step 2 . The Shapes toolbar to the left of the window is where you will find all the items needed to
make a Web Site Diagram. In this toolbar there are 4 categories: More Shapes, Quick Shapes, Web Site Map Shapes, and Conceptual Web Site Shapes.

Adding a Home Page

Step 3 . To begin making a Diagram select the tab
Conceptual Web Site Shapes under the Shapes toolbar.

Step 4 . Under that tab select the shape Step 5 . Click and hold the Home shape and drag it
onto the document.

4|Page

Visio Tutorial Conceptual Web Site Diagram

Adding a Web Page
Step 6 . Once you have added a home page to your diagram you can now add a web page. To do this,
click and hold document. web page located on the Conceptual Web Site Shapes tab, and drag it onto the

The Web page shape looks like this on the document.

You can add as many Web pages as you want. For this example, 3 Web Pages are used.

5|Page

Visio Tutorial Conceptual Web Site Diagram

Adding Text to a Web Page Shape

Step 1 . To add text to the web page, double click on the center of the web page shape.
The Shape should change from this to this

Step 2 . Once the text box is visible, you may now type in whatever you want. For this example Web
Page is used.

Step 3 . To change the size of the font, right click on the text in the shape to open up the font dialog
box.

Step 4 . Now you can click the font size down arrow and select a font size, or you may click in the font
size box and type in the desired font size.

or

6|Page

Visio Tutorial Conceptual Web Site Diagram

Connecting Items in a Document
Step 1 . To connect a shape to another shape in the document, go to the
tab located on the Shapes toolbar.

Step 2 . Once there, click and hold

snaps with the bottom of the home shape.

and drag the line so that the top of the line

Step 3 . To connect it to another shape, click and drag the bottom of the line and drag it to the desired
set locations on the other shape. It will snap into place.

You can do this as many times as needed and connect any number of shapes to each other. The dynamic connector can also be used with any other shape in the shapes toolbar. This example shows it being used 3 times.

7|Page

Visio Tutorial Conceptual Web Site Diagram

Finishing Your Diagram

Above are only a few shapes and objects shown, but there are many shapes and objects located in the shapes toolbar you can use to create your web site diagram. After you have created your diagram there are a couple things you can do to make it look more professional.

Design of the Diagram

Step 1 . To change the Design of your Diagram, go to
tab located on the taskbar.

Step 2 . Once there, you have many options to change the way your diagram looks. You can change the
Theme and Background of the diagram. Changing the Theme

Step 1 . Under Themes, which is located under the Design tab, you can select one of the themes listed.
You can use the drop down arrows to see more themes.

Step 2 . If you prefer a different theme, you can click on the

and go to Here is an example of a theme.

option in the Themes section

to create your own theme.

8|Page

Visio Tutorial Conceptual Web Site Diagram

Changing the Effect

Step 1 . You can also add effects to the diagram. To do this click on the
one of the desired effects, or you can select Here is an example of an effect.

option and chose to create your own effect.

Changing the Background

Step 1 . To change the background, go to the Backgrounds section under the

tab

Step 2 . You can add a background or a border and titles. To add a background click Backgrounds and
then select one of the listed backgrounds in the drop down list.

9|Page

Visio Tutorial Conceptual Web Site Diagram

Step 3 . To change the background color, return to the background drop down list after you have
selected a background, and mouse over Here is an example of a Background. and select the desired color.

Step 4 . To add a border and title, click on Borders & Titles and select from the list of Borders.

Here is an example of a border & title.

10 | P a g e

Visio Tutorial Conceptual Web Site Diagram

Conclusion
You have been shown the basic features in Visio 2010 on how to create a Web Site Diagram. There are many other shapes and feature you can experiment with to create your Web Site Diagram.

11 | P a g e