Exporting Visio Diagrams for Use on the Web | Microsoft Visio Version 2002 Inside Out (Inside Out (Microsoft))

3 4

Anyone with a Web browser can view your Visio diagrams—including the data stored with shapes—when you save the drawing file as a Web page. Saving a diagram in Web format isn't much different from saving it in Visio format, although you have more options. However, all you really have to do is choose File, Save As Web Page, type a file name, and then click OK. Visio creates one or more Web pages and all the supporting files and graphics, which you can open in a browser such as Internet Explorer, as Figure 5-5 shows.

The Save As Web Page command is easiest to use if you have Internet Explorer 5 or later, because the default options are set to work with the latest Microsoft browser. However, Visio automatically customizes certain settings and disables others when it detects Netscape Navigator or an earlier version of a browser that does not support VML (Vector-Based Markup Language) and XML. For these browsers, the Visio diagram remains visible, but hyperlinks and custom property data might not be.

figure 5-5. visio creates a web page from your diagram that includes the shapes' custom properties. you can pan the drawing with the scroll bars, change the zoom level, and use the shapes' hyperlinks.

Figure 5-5. Visio creates a Web page from your diagram that includes the shapes' custom properties. You can pan the drawing with the scroll bars, change the zoom level, and use the shapes' hyperlinks.

Files Created by the Save As Web Page Command

When you use the Save As Web Page command, Visio creates all the files necessary to display the contents of the drawing in a Web browser. If you have developed Web pages, you know how many files it takes to display even one page. As a result of the Save As Web Page command, you could have a dozen or more files associated with the HTML page that Visio creates. Visio creates the root HTML file in the location you specify. All the other files that are required for the drawing are stored in a subfolder unless you specify otherwise.

Visio creates a subfolder with the same name as the root HTML file but appends "_files" to the folder name. The addition of "_files" to the folder name allows the folder and files to follow each other. That is, if you delete the root *.htm file, the subfolder is also deleted, and vice versa. After Visio generates a Web page, you cannot rename the root *.htm file.

For each page in the drawing, Visio creates an HTML file that defines the frames, a VML graphics file that contains the diagram's shapes and text, and—if you request it—an alternate graphics file containing the same data in a format you select for browsers that don't recognize VML. Visio also creates all the necessary supporting files, including cascading style sheets (CSS files), and other features you've requested, such as scroll bars, page tabs, magnification (zoom) options, and custom property data. Most of these features require Internet Explorer 5 or later to work as expected.

Visio creates standard HTML files that you can edit in an HTML editor or in any text-editing application, such as Windows Notepad. If you modify or move any of the HTML files, you might need to modify the pointers to graphic files.

Creating Web Pages from Visio Diagrams

Everything starts with the Save As Web Page command on the File menu, which opens a modified version of the Save As dialog box, as Figure 5-6 shows. You can provide a file name, click Save, and be done with it, or you can click the Publish button to customize the page options.

figure 5-6. when you choose file, save as web page, this dialog box appears.

Figure 5-6. When you choose File, Save As Web Page, this dialog box appears.

Note

If you choose File, Save As, and then specify Web Page as the file type, the options for saving Web pages are added to the Save As dialog box.

Follow these steps to save a drawing as a Web page:

Choose File, Save As Web Page.
From the Save In list, open the folder in which you want to save the file. In the File Name box, type a name for the Web page.
To customize the title that will appear on the title bar when the page is displayed in a browser, click Change Title. In the Page Title box of the Set Page Title dialog box, type a title, and then click OK.
To define the attributes of the Web page in greater detail, click Publish.
On the General tab, specify which drawing pages to publish, whether to display the custom property viewer, and whether to include page tabs for navigation.
To specify a graphic format other than VML, click Format Options, and then specify a graphic format in the Primary Output Type list. If you want to specify an alternate format other than GIF, select Provide Alternate Format For Older Browsers, select the format you want from the drop-down list, and then click OK.
Click the Appearance tab, specify the target monitor screen size, and apply a theme, if you want to use one.
Click the Files tab, specify whether to use long file names and how to save supporting files. If you clear the Organize Supporting Files In A Folder check box, all files produced by the Save As Web Page command will be saved in the folder you specified in the Save As dialog box.
Click OK to open your Web browser and view the Web page.

Displaying Shape Data in a Frame

When Visio saves a diagram as a Web page, it also saves any custom property data stored with the diagram's data. This information appears in a frame when you view the resulting Web page in Internet Explorer 5 or later. If the shapes include custom properties as many do, Visio will display them in a frame with your Web page—even if you haven't stored data with the shape's properties. As you point to different shapes on the Web page, the custom property data is displayed in a frame on the left side of the browser window, as Figure 5-7 shows.

figure 5-7. custom properties appear in a frame by default when you save a diagram as a web page.

Figure 5-7. Custom properties appear in a frame by default when you save a diagram as a Web page.

VML Graphics in Browsers Other Than Internet Explorer

VML is an emerging standard for Internet drawings based on XML. Because it provides good quality vector images for the Web, VML is the default format for the images Visio exports with its HTML files, including the image map of the drawing page. VML graphics offer the scalability and precision that come with vector graphic formats, which isn't available with raster formats such as GIF or JPEG. For example, the quality of VML graphics is not compromised when browsers zoom in on them. Because VML graphics are vector-based, they also download more quickly than raster-based Web graphics.

At the time of this book's publication, only Internet Explorer 5 and later support VML graphics. When you export your HTML file, you can choose an alternate graphic format for browsers that do not support VML. The alternate graphic file is referenced in the HTML file, and that's what viewers using other browsers will see. By default, GIF is the alternate format. To change that, or to change the primary format from VML, click Publish in the Save As dialog box, and then click Format Options on the General tab to make the necessary changes.

If you don't use VML graphics, you won't see the option to change the zoom level of the drawing in the browser; therefore, that option is never available in browsers that do not support VML.

If you open the Visio-generated Web page in a browser that does not support frames, only the diagram will appear. Depending on the browser, a message might appear first saying that the page requires features not supported by the browser, as Figure 5-8 shows. If you don't want this message to appear, you can disable the custom property frames when you generate the Web page.

figure 5-8. browsers that don't support all the options in a visio-generated web page might display a message like this one.

Figure 5-8. Browsers that don't support all the options in a Visio-generated Web page might display a message like this one.

Follow these steps to prevent Visio from adding a custom property frame to your Web page:

Choose File, Save As Web Page, and then click Publish.
On the General tab, clear the Property Viewer check box under Choose Functionality.
Specify other settings as desired, and then click OK.

Tip

When you display a Visio Web page with custom properties, you can prevent the custom properties frame from changing its display as you move the pointer over shapes in the diagram. Just press the Ctrl key as you move your mouse. This technique is useful if you want to copy the contents of the frame.

Viewing Multiple Hyperlinks in a Shape

If you're using Internet Explorer 5 or later, you can view and use multiple hyperlinks in a shape on a Web page, as Figure 5-9 shows. If you're using a different browser, you might see the hyperlinks but not be able to use them. For example, Netscape Navigator 6 displays a box that lists all the hyperlinks when you point to a shape, but when you click the shape, you jump to the location specified by the first link.

figure 5-9. if a shape includes hyperlinks, they'll appear when you point to the shape in internet explorer 5 or later.

Figure 5-9. If a shape includes hyperlinks, they'll appear when you point to the shape in Internet Explorer 5 or later.

Troubleshooting

An error appears when you try to rename a file created by the Save As Web Page command.

Visio links all the supporting files to a root file, *.htm. If you rename this file, the following message appears:

This message lets you know that the links between the root file and its supporting files will be broken. If you try to display the page in your browser, graphic elements might be missing, or you might see an error informing you that the page cannot be displayed. Visio looks for the supporting files based on the root file's name. If that name changes, the Web page can't be displayed correctly. You can use the Save As Web Page command again to specify a different file name when you generate the Web page.

To follow a link when a shape includes more than one, click the shape. The links appear in a list next to the shape. You can then select the one you want, as Figure 5-10 shows.

figure 5-10. if a shape includes multiple hyperlinks, you can find the one you want by clicking the shape and choosing from the list that appears.

Figure 5-10. If a shape includes multiple hyperlinks, you can find the one you want by clicking the shape and choosing from the list that appears.

Troubleshooting

In Netscape Navigator, multiple hyperlinks appear on the shape but they all jump to the same place.

Some browsers do not support multiple hyperlinks. However, you can specify a default hyperlink in Visio that will be used as the link's target in browsers that support only one link per shape. That way, you can keep all the hyperlinks you have added to a shape but make sure that users with other browsers will see the link you specify. To do this, you need to edit the hyperlink in Visio before you save the diagram as a Web page.

Follow these steps to specify a default hyperlink:

Select a shape with multiple hyperlinks in Visio, and then choose Insert, Hyperlinks.
In the box that lists the hyperlinks, select the one you want to be the default link, and then click the Default button.
Click OK.

Embedding a Visio Drawing into an Existing Web Page

Most organizations use a consistent design template for the pages of their Web sites. You can insert the Web pages that Visio creates into an existing HTML template that you can specify when you use the Save As Web Page command. Visio includes a sample template, Basic.htm, that you can copy and customize, or you can use one you already have. The critical piece of information that a template must include is the following HTML tag, which you place wherever you want the Visio drawing to appear on the Web page:

 <IFRAME src="/books/2/332/1/html/2/%%VIS_SAW_FILE%%">

This tag refers to the HTML output file that Visio creates for the drawing (SAW for Save As Web). When Visio creates a Web page, it embeds the drawing information into an inline frame using an <IFRAME> tag. The Basic template includes a default version of the <IFRAME> tag with specified dimensions. You can open the Basic template and make changes or copy the information to an existing HTML file and then customize the <IFRAME> tag to control the width, height, border, and other attributes of the inline frame. By default, Visio installs the Basic template (Basic.htm) in C:\Program Files\Microsoft Office\Visio\1033\Solutions\Visio Extras. If you save your template in the same folder, it will appear as an option in the Save As Web Page dialog box, as Figure 5-11 shows.

Note

The <IFRAME> tag work best in Internet Explorer 3 and later and Netscape Navigator 6.

figure 5-11. if you save a custom theme in the visio directory structure, it appears as an option on the appearance tab.

Figure 5-11. If you save a custom theme in the Visio directory structure, it appears as an option on the Appearance tab.

After you create a template file, follow these steps to apply it:

In Visio, choose File, Save As Web Page, and then click Publish.
On the Appearance tab, select the theme you want to use in the HTML Templates list.
If your theme doesn't appear, select Custom in the HTML Templates box, and then click Browse to locate and select the file.
Specify other settings as desired, and then click OK.

Troubleshooting

You receive an error when you select an HTML template.

When you use the Save As Web Page command and specify to use an HTML template, Visio displays the following error if your template doesn't include the requisite <IFRAME> tag:

In your HTML file, insert the following tag where you want the Visio diagram to appear:

 <IFRAME src="/books/2/332/1/html/2/%%VIS_SAW_FILE%%">

Using a Visio Diagram as a Web Graphic

If you want to use your Visio diagram as part of a larger Web site, or you plan to distribute it electronically without including the custom property data, you can save it in a graphic format. When you save a portion of your diagram or the entire diagram as a graphic, Visio creates a new file—your original drawing file isn't changed.

Visio supports three Web graphic formats: JPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format), and PNG (Portable Network Graphics). Almost all browsers display JPEG and GIF images; earlier browsers might not display PNG images. When you save a Visio drawing, or shapes in a Visio drawing, in a graphic format, no custom property data or hyperlinks are saved with the graphic.

To save a Visio drawing as a Web graphic, you use the Save As command on the File menu and then specify the format you want in the Save As Type box. When you click Save, you'll see a dialog box similar to the one shown in Figure 5-12 with options that affect the way the graphic file will be saved. You can specify resolution, image size, transformation, and color options. You can also choose whether the image will be interlaced or not. Interlaced images appear in the Web browser in stages, as more information is downloaded; non-interlaced images appear all at once. For JPEG images, the options are progressive and baseline. Progressive JPEGs are like a smoother version of an interlaced GIF, but not all Web browsers support them.

figure 5-12. when you save shapes or a diagram in a web-compatible graphic format such as gif, you can specify options for how the image is downloaded and displayed.

Figure 5-12. When you save shapes or a diagram in a Web-compatible graphic format such as GIF, you can specify options for how the image is downloaded and displayed.

Note

An interlaced GIF can be displayed by a browser that does not support the interlaced format (the image is displayed normally); however, a progressive JPEG will not load at all in a browser that does not support the progressive format.

InsideOut

Although Visio supports the VML format for the Web pages it creates, you can't save a drawing in VML format when you use the Save As command. However, you can still create a VML graphic in a slightly roundabout way: Save your diagram as a Web page, and then use the VML graphic (*.vml) that Visio creates in the subfolder for that page.

Most Visio drawings retain their integrity and appear sharpest when saved as GIF images rather than as JPEG or PNG images. However, the best graphic format to use depends on the kind of drawing you're saving and how you will use it. If you have the time, save your diagram in different graphic formats and select different options, and then compare quality and file sizes to see which one best meets your needs.

Tip - Add a Visio Graphic to a Web Page

To include an exported Visio graphic in a Web page, add the <IMG> tag to the HTML file for the page. For example, if your exported graphic is named Drawing1.gif, store it in the same folder as the HTML file and then include the line <IMG src="/books/2/332/1/html/2/Drawing1.gif"> in the HTML file.

Automating Web Page Generation

Visio exposes its Web functionality through its API so that you save Visio files as HTML programmatically. There are two ways you can go about it. Visio exposes a COM (Component Object Model) object that anyone using an Automation-compliant language can create. The main interface is IVisSaveAsWeb. The easier method is through a command line interface, where you embed a call to the RUNADDONWARGS function onto a shape's Event section in the ShapeSheet window. An example call to the add-in looks like this:

 =RUNADDONWARGS("SaveAsWeb","/target=c:\temp\mypage.htm /quiet 
/prop /startpage=1 /endpage=3 /altformat /priformat=vml 
/secformat=jpg /openbrowser")

Although it's beyond the scope of this book to explain how to write programs that work with Visio, you can refer to the Developer Reference (choose Help, Developer Reference) in Visio. In addition, Microsoft has made the documentation for this interface available on its Web site. See http://msdn.microsoft.com for the latest information.