Logo
HOW TO
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows 7

Microsoft Visio 2010 : Creating Web Pages from Visio Drawings (part 1) - Saving as Web Page

4/13/2014 1:36:52 AM

Visio offers an interesting option for sharing noneditable versions of your diagrams. Saving your diagram as a web page creates dynamic web pages that render high-quality vector-based graphics; support multipage documents; and allow users to pan and zoom, view Shape Data, and search for text.

When this option works, it is fantastic. Unfortunately, there are a few glitches that can mar the experience, as you see later.

Saving as Web Page

The sample IT Asset Management drawing is a great place to test the web export capabilities. This document has multiple pages, shapes with hyperlinks to those pages, plus many shapes with Shape Data fields.

Saving a Visio Drawing as a Web Page
1.
Start with a copy of the IT Asset Management sample drawing, which you find under File, New, Sample Diagrams.

2.
Note the server shapes on the Topology page have hyperlinks that link to the other pages in the document. To follow them, right-click the shapes and choose the link item or hold down the Ctrl key and click a shape.

3.
Add several more hyperlinks to the top-left server on the Topology page (this will make the web-export exercise more interesting):

a. Select the shape and press Ctrl+K to get to the Hyperlinks dialog. Note that a Row 1 Rack 2 link already exists.

b. Click New. A new hyperlink item appears and is selected.

c. Enter www.visguy.com in the Address field.

d. Click New again.

e. Enter www.lenovo.com in the Address field.

f. Click OK. The server shape now has three hyperlinks—one within the document and two that go out to Internet sites.

g. Ctrl+click the server shape and note the special “multihyperlink” pop-up that appears. You see something similar to Figure 1.

Figure 1. Ctrl+clicking a shape with multiple hyperlinks presents a nifty pop-up for choosing the link to follow.


4.
Save your modified file as IT Asset Management SAW (SAW = Save As Web).

5.
Export the file as a web page. Go to File, Save & Send, and then click Change File Type. The right-side of the panel displays a wide assortment of output types, which are shown in Figure 2.



Figure 2. Save & Send’s Change File Type option offers many possibilities for saving and exporting Visio diagrams. Note that Web Drawing (*.vdw) is available only in Premium and Pro and relates to Visio Services for SharePoint 2010. For this exercise, we want “Web Page,” not “Web Drawing.”


6.
Double-click Web Page (*.htm). The Save As dialog appears with the Save as Type set to Web Page (*.htm;*.html).

7.
Browse to a suitable location on your hard drive and save the file as IT Asset Management SAW and then click Save.

The Save as Web page status window appears for a few moments as Visio exports the diagram. Then your default browser opens to reveal the exported web pages. Figure 3 shows what you might initially see.

Figure 3. A fresh Visio web export, shown in IE9. Until you allow the blocked content to run, the fancy controls are missing.

You can also use File, Save As to create a web page. Just select Web Page (*.htm;*.html) in the Save As Type drop-down. You might find this faster than the whole File, Save & Send, Change File Type, Web Page chain described previously.


Saving a file as a web page doesn’t save the actual Visio drawing! If you’ve made changes in Visio, be sure to save the drawing as you normally would.

Other -----------------
- Microsoft Visio 2010 : Sending Visio Files in Email, Saving as PDF or XPS Files
- Microsoft Visio 2010 : Introducing Data Graphics (part 2) - Creating Data Graphics,Applying Data Graphics to Shapes
- Microsoft Visio 2010 : Introducing Data Graphics (part 1) - What Is a Data Graphic?
- Microsoft Visio 2010 : Linking External Data to Shapes (part 6) - Using Link Data - Linking Data to Shapes Using Link Data
- Microsoft Visio 2010 : Linking External Data to Shapes (part 5) - Using Link Data - Preparing a Master for Link Data , Importing Data for Link Data
- Microsoft Visio 2010 : Linking External Data to Shapes (part 4) - Using the Database Wizard - Taking the Data-Linked Light Bulb Shape for a Spin
- Microsoft Visio 2010 : Linking External Data to Shapes (part 3) - Using the Database Wizard - Setting Up the Excel File as a Data Source
- Microsoft Visio 2010 : Linking External Data to Shapes (part 3) - Using the Database Wizard - Setting Up the Excel File as a Data Source
- Microsoft Visio 2010 : Linking External Data to Shapes (part 2) - Preparing the Light Bulb Shape for Data Linking
- Microsoft Visio 2010 : Linking External Data to Shapes (part 1) - Preparing the Data
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
 
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro