When you save a Visio drawing as a Web page, you can include controls for navigating to pages, searching for shapes in the drawing, zooming in and out of the drawing, and viewing custom property information for shapes. These controls appear in a left frame in the Visio Web page.

For example, if shapes in the drawing have custom properties assigned to them, you can display those properties on the Web page. When you press CTRL and click a shape on the Web page that has custom properties assigned to it, the properties are displayed in a table on the left side of the browser window.

When you save a Visio drawing as a Web page in Microsoft Internet Explorer 5.0 or later, you can also display a Go to Page navigation control , Pan and Zoom control , a Details control that displays custom property information for shapes , and a Search Pages control for finding specific shapes in the drawing .

You can also publish any reports that exist for the drawing. When you generate property reports with the Web page, they appear on separate pages in the drawing that you can navigate to using the Go to Page control.

When you save a drawing as a Web page, you can choose from several different output formats: vector-based (VML or SVG), or raster-based (GIF, JPG, or PNG). You also have the option to set an alternate format (GIF, JPG, or PNG) that is automatically displayed when the page opens in an older browser.

Save as Web Page browser and output format compatibility

When you save a drawing as a Web page, several files are created and saved in the location you specify. All the files other than the Web page's main HTML file are stored in a subfolder by default. The name of the subfolder starts with the name of the HTML file for the Web page.

If you modify or move some of the .htm files, remember to update pointers to the graphics files.

Following are some of the saved files:

• A main HTML file with the name you assigned it. (For example, Drawing1.htm. The default name is the name of the Visio file.)
• A graphics file for the Visio drawing on each page (for example, gif_1.gif or gif_2.gif).
• Various other files used to support the publishing options selected when you publish the Web page, such as graphics (.gif), style sheet (.css), script (.js), and data files (.xml).

When you save a drawing as a Web page, you can assign the page a style sheet with color scheme styles that match the color schemes available in Visio. The styles affect the appearance of the left navigation frame and reports.

If you are saving a drawing that has a particular color scheme applied to it, you can match that scheme by choosing a style sheet of the same name under Style sheet on the Advanced tab in the Save as Web Page dialog box.

You can also assign your own style sheets to a Web page or modify the style sheets in Visio for your own use.

When you save a drawing as a Web page, you can embed that Web page as an inline frame (an <IFRAME> tag) in a Web page that contains other elements, such as company logos, navigation bars, and additional text or graphics.

For example, if your company uses a standard Web page design template for all of its pages, you can create a page that includes all the standard design elements and a Visio drawing as well.

If you want to embed a saved Web page in another HTML page, you can do so by adding an <IFRAME> tag to the host page, and then referring to that host page under the Host in Web page option on the Advanced tab in the Save as Web Page dialog box.

To create a design template that includes a Visio drawing, create an HTML file and include the following HTML tag:

<IFRAME src="##VIS_SAW_FILE##">

By including this tag, you make reference to the HTML output file that Visio creates for your drawing, thus embedding the drawing into the page. You can customize the remainder of the HTML file to meet your needs.

If you do not already have a host Web page, or if you want to create a new one, Visio supplies a default HTML file (Basic.htm) that includes a default version of this <IFRAME> tag and that you can customize, rename, and use as the basis for your design template page.

Note  The Host in Web page option for Visio Web pages works only with browsers that support the <IFRAME> tag (such as Internet Explorer 3.0 and later).

Embed a drawing in a Web page

Hyperlinks in shapes are saved with the Web page. People viewing your Web page can navigate to hyperlinks by moving the pointer over shapes with hyperlinks and clicking the shape.

Multiple hyperlinks are supported in Internet Explorer 5.0 or later. Multiple hyperlinks appear in a context menu when a shape with multiple hyperlinks is clicked. For browsers or output formats such as SVG that don't support multiple hyperlink display, the default hyperlink is displayed when the shape is clicked. If no default hyperlink is set, the first hyperlink in the list is displayed.

Note  Hyperlinks from pages are not currently supported for drawings saved as Web pages. If you know how to edit HTML code, you can manually add code to create hyperlinks on pages in the Web page version of the drawing.

When you save a Visio Web page using the default settings for display output and publishing options, the resulting Web page output is designed to be accessible for people with disabilities and to interoperate with Microsoft Windows accessibility features.

Visio Web page output is automatically adjusted for display in older browsers when the Provide alternate format for older browsers option is selected on the Advanced tab in the Save as Web Page dialog box. This option is selected by default. It is recommended that you keep this option selected to accommodate the widest range of Web browsers.

For GIF, JPG, or PNG output, you can set the Target monitor option on the Advanced tab in the Save as Web Page dialog box to adjust the graphic size for the Web page and optimize the output for your target audience or apply a standard graphic size used by your company. It is best to choose the monitor size that matches the smallest resolution for the systems on which you expect people will be viewing your Web pages.

If you post your Visio Web page to a server, you can link to it with a preset view using Query String parameters. Visio supports linking to a particular page in a Web page drawing, displaying a Web page with particular zoom percentage, and using a pre-populated search.

Note  Query String parameters are supported in HTTP Web servers, such as Microsoft Internet Information Services (IIS). You can use these parameters only with the HTTP protocol; they will not work with FILE, FTP, or other protocols.

To link to a page within your drawing, use a link such as this:

http://MyServer/MyDrawing.htm?page=<pagename>

To set the Web page to be displayed at a particular zoom percentage, use a link such as this:

http://MyServer/MyDrawing.htm?zoom=<percentage>

To link to the Web page with a pre-populated search, use a link such as this:

http://MyServer/MyDrawing.htm?search=<string>

You can combine the parameters using ampersand (&) characters.

For example, to link to a Web page named "History", zoomed to 300%, with a search for "Founders" executed in the search control for the Web page, you would use the following link:

http://MyServer/MyDrawing.htm?page=History&zoom=300&search=Founders

Note  Any spaces in the page name or search string must be replaced with %20.