Publish a Visio 2000 Diagram on the Web

You can help keep your project teams on course by posting tools such as milestones, deadlines, timelines, and flowcharts, to your intranet site. Publishing a diagram to a Web site is as simple as saving a file. With one command, you can turn a Microsoft Visio diagram into a Web page ready for a browser to display. Or, if a Web page already exists, save the diagram in .gif or some other Web-compatible graphics format. In this article, you'll also learn how to add hyperlinks to shapes and save the links with the diagram to create an image map.

On This Page

How Do I Publish a Diagram to the Web?
Save a Diagram as HTML Pages
Modify HTML Pages
Save a Diagram as an Image Map

How Do I Publish a Diagram to the Web?

When you're deciding how to publish a diagram to the Web, consider: What are your goals for the published diagram? Does the Web page where you want the diagram to live already exist? How much of the diagram do you want to publish? The following table presents Web publishing options in Visio 2000 and when and why you might choose them.

Save a Diagram as HTML Pages

When should I save a diagram as HTML pages?

When you save a diagram as HTML pages, Visio 2000:

• Converts the diagram content into a Web-compatible graphics format.

• Creates a Web page corresponding to each drawing page in the diagram.

• Creates the HTML source code that lets you view the pages in a Web browser.

After Visio 2000 creates the HTML pages, you can modify them by adding more content, rearranging the page elements, and making other changes.

This flowchart is an image map that includes hyperlinks on some of its shapes. By clicking a hyperlinked shape, you can go directly to another Web page.

To save a diagram as HTML pages

1. In Visio 2000, open the diagram that you want to save.

2. On the File menu, click Save As.

3. In the Save as type list, choose HTML Files (*htm, *.html). Type a name for the file, choose where to save it, and then click Save.

4. In the Save As HTML dialog box, choose the graphics format and the drawing pages that you want the HTML file to include.

   When choosing a graphics format, consider the browsers that people will use to view your diagram. Some formats (.gif, .jpg) can be viewed in all browsers; others (.png, .vml) require a specific browser or a browser's most recent version.

5. Click Filter Settings to control the on-screen image size of the saved diagram or to choose options specific to the graphics format, and then click OK twice.

6. Click Yes to open your Web browser and view the first HTML page.

Modify HTML Pages

After you save a diagram as HTML pages, Visio 2000 creates a number of files in the location you specify during the save process. The following table describes the file types and lists their names.

To modify HTML pages

1. In Notepad, or any other HTML editor, open the Filename1_raster.htm, Filename2_raster.htm, and other HTML files.

2. Modify the pages, and then save the files.

Note: If you move the HTML files, remember to also move or update pointers to the graphics files.

Save a Diagram as an Image Map

When should I save a diagram as an image map?

An image map is a Web-page graphic with multiple regions, each of which includes a navigational link, or hyperlink, to another Web page or a file. Creating an image map using Visio 2000 involves three steps.

1. Create a diagram.

2. Add hyperlinks to the shapes representing the regions that will be linked in the image map.

3. Save the diagram as an HTML page.

   

To add a hyperlink to a shape

1. In Visio 2000, create a diagram that you want to save as an image map.

2. Select a shape to which you want to add a hyperlink.

3. On the Insert menu, click Hyperlinks.

   Do one of the following:

   • To link to a Web site, in the Address box, type the Web site's URL, or click Browse, choose Internet Address, and then navigate to the site in your default Web browser. Select the Web site's URL and press CTRL+C to copy it to the Clipboard. Close the browser, click to select the Address box, and then press CTRL+V to paste the URL into the Hyperlinks dialog box.

   • To link to a document, including another diagram, under Address, click Browse, and then click Local File. Navigate to the document's file, and then click Open.

   • To link to another drawing page in the same document, next to Sub-address, click Browse. For Page, select the drawing page to which you want to link. In the Zoom list, click the percentage you want to zoom in.

4. If you linked to a document and you want to describe the location of the document's file in relation to the Visio 2000 diagram, leave the Use relative path for hyperlink check box selected. A relative path means that you can move the diagram and linked file together without breaking the link. If you move only one of the files, however, you break the link.

   If you linked to a document and you want to spell out the exact location of the document's file in terms of drive, folder, and file name, clear the Use relative path for hyperlink check box. You can move the diagram without affecting the link, but if you move the linked file, you must reset the path.

5. Click OK.

To save a diagram as an image map

1. In Visio 2000, open the diagram you want to save.

2. On the File menu, click Save As.

3. In the Save as type list, click HTML Files (*htm, *.html). Type a name for the file, choose where to save it, and then click Save.

4. In the Save As HTML dialog box, choose the graphics format and the drawing pages you want the HTML file to include.

   When choosing a graphics format, consider the browsers that people will use to view your diagram. Some formats (.gif, .jpg) can be viewed in all browsers; others (.png, .vml) require a specific browser or a browser's most recent version.

5. To control the on-screen image size of the saved diagram or to choose options specific to the graphics format, click Filter Settings, choose the options you want, and then click OK.

   In the Save As HTML dialog box, click Options. Make sure that the Enable image maps check box is selected, and then do one of the following:

   • To create a client-side image map, in which all the information a Web browser needs to process a click on a linked region is stored in the HTML file with the image data, click Client Side. Click OK twice.

   • To create a server-side image map, in which a program on the Web server examines map data and processes the image map links, click Server Side. Type the URL to the CGI (Common Gateway Interface) directory on the Web server, in the Format list, click the format you want, and then click OK twice.

6. At the prompt, click Yes to open your Web browser and view the HTML page.

Note: If you are creating a server-side image map, after you save the diagram as HTML pages, move the .map files from the local folder where you stored the HTML pages to the CGI directory on the Web server.

Save a Diagram in a Web-Compatible Format

When should I save a diagram a in Web-compatible format?

After you save a diagram, or a portion of a diagram, in a Web-compatible format, you can include the resulting graphic on as many Web pages as you want.

Note: If the original diagram contains navigational links to other drawing pages, documents, or Web pages, these links will be lost when you convert it to a Web-compatible format.

To save a diagram in a Web-compatible format

1. In Visio 2000, open the diagram that contains content you want to save.

2. Select the content you want to save.

3. On the File menu, click Save As.

4. In the Save as type list, click Graphics Interchange Format (*.gif), JPEG format (*.jpg), Portable Network Graphics Format (*.png), or Vector Markup (*.vml), and then click Save.

   When you choose a graphics format, keep in mind which browsers people who look at the graphic will use. All browsers support .gif and .jpg formats. Only the most recent versions of some browsers support .png and .vml.

5. In the Output Filter Setup dialog box, choose the options you want, and then click OK.

Note: After you save a drawing in a Web-compatible format, you include it in an HTML page by adding the <IMG> tag to the page. For example, your tag might say <IMG SRC="diagram1.gif">.

Open a Diagram from Microsoft Internet Explorer

When should I open a diagram from Microsoft Internet Explorer?

You can open a Microsoft Visio 2000 diagram from Internet Explorer without having placed the diagram on a Web page or saved it in a Web-compatible format. The advantages are:

• You can edit the diagram using Visio 2000 tools and menus without leaving the Internet environment.

• You can navigate between the diagram and other Microsoft Office documents or Web pages by clicking the Forward and Back buttons on the Internet Explorer toolbar.

To open a diagram from Internet Explorer

1. In Internet Explorer, on the File menu, click Open.

2. In the Open dialog box, click Browse, and in the Files of type list, select All Files to display Visio 2000 files in the list.

3. In the Look in list, navigate to the folder that contains the file you want to open. When you find the file, select it, and then click Open.

   The Visio 2000 diagram opens in Internet Explorer.

4. On the Internet Explorer toolbar, click the Tools button to display the Visio toolbar and menus.

Tip To see the Internet Explorer toolbar and menus, click the Tools button again.