Exporting Visio 2007 Diagrams for Use on the Web
Anyone with a Web browser can view your Visio 2007 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 2007 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 2007 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.
Figure 5-5. Visio 2007 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.
The Save As Web Page command is easiest to use if you have Internet Explorer 6 or later, because the default options are set to work with the latest Microsoft browser. However, the HTML that Visio 2007 generates automatically customizes certain settings and disables others when it detects Netscape Navigator or an earlier version of a browser that does not support Vector Markup Language (VML) and XML. For these browsers, the Visio 2007 diagram remains visible, but hyperlinks and custom property data might not be.
Files Created by the Save As Web Page Command
When you use the Save As Web Page command, Visio 2007 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 2007 creates. Visio 2007 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 2007 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 2007 generates a Web page, you cannot rename the root .htm file.
For each page in the drawing, Visio 2007 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 2007 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 6 or later to work as expected.
Visio 2007 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 and any relative hyperlinks.
Creating Web Pages from Visio 2007 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 Publish to customize the page options.
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:
1. | Choose File, Save As Web Page. |
2. | From the Folders list, open the folder in which you want to save the file. In the File Name box, type a name for the Web page. |
3. | 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.
|
4. | To define the attributes of the Web page in greater detail, click Publish.
|
5. | On the General tab, specify which drawing pages to publish, whether to display the custom property viewer, and whether to use the Go To Page (Navigation Control), Search Pages, Pan And Zoom, and Report: Inventory options. |
6. | Under Additional Options, select the Automatically Open Web Page In Browser check box to open the page in your browser after saving. Select the Organize Supporting Files In A Folder check box to put the files in a folder as described earlier. |
7. | To specify a graphic format other than VML, click the Advanced tab, and then specify a graphic format in the Output Formats list. If you want to specify an alternate format other than GIF, select the Provide Alternate Format For Older Browsers check box, select the format you want from the drop-down list, and then click OK.
|
8. | In the Display Options section, specify the target monitor screen size.
|
9. | Select where you would like to host the page in the Host In Web Page drop-down list. Under Style Sheet, choose a style for your Web page.
|
10. |
Displaying Shape Data in a Frame
When Visio 2007 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 6 or later. If the shapes include custom properties, as many do, Visio 2007 will display them in a frame with your Web page—even if you haven’t stored data with the shape’s properties. As you hold down the Ctrl key and click 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.
VML Graphics in Browsers Other Than Internet ExplorerVML is a 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 2007 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 aren’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. 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 Output Formats on the Advanced 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 2007-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. If you don’t want this message to appear, you can disable the custom property frames when you generate the Web page.
Follow these steps to prevent Visio 2007 from adding a custom property frame to your Web page:
1. | Choose File, Save As Web Page, and then click Publish. |
2. | On the General tab, click the desired Publishing Options. |
3. | Specify other settings as desired, and then click OK. |
Note
When you display a Visio 2007 Web page with custom properties, a shape’s details (that is, its custom properties) can be displayed by holding down the Ctrl key while clicking on the shape. The details will remain visible until you Ctrl+click on another shape.
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-8 shows. If you’re using a different or older browser, you might see the hyperlinks but not be able to use them.
Figure 5-8. If a shape includes hyperlinks, they’ll appear when you point to the shape in Internet Explorer 5 or later.
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-9 shows.
Figure 5-9. If a shape includes multiple hyperlinks, you can find the one you want by clicking the shape and choosing from the list that appears.
Embedding an Existing Visio Drawing in a Web Page
Most organizations use a consistent design template for the pages of their Web sites. You can insert the Web pages that Visio 2007 creates into an existing HTML template that you can specify when you use the Save As Web Page command. Visio 2007 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 2007 drawing to appear on the Web page:
<IFRAME src="%%VIS_SAW_FILE%%">
This tag refers to the HTML output file that Visio 2007 creates for the drawing (SAW for Save As Web). When Visio 2007 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 2007 installs the Basic template (Basic.htm) in C:Program FilesMicrosoft OfficeOffice121033 . 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-10 shows.
Figure 5-10. If you save a custom template in the Visio 2007 directory structure, it appears as an option on the Advanced tab.
After you create a template file, follow these steps to apply it:
1. | In Visio 2007, choose File, Save As Web Page, and then click Publish. |
2. | On the Advanced tab, select the template you want to use from the Host In Web Page drop-down list. |
3. | If your template doesn’t appear, click Browse to locate and select the file. |
4. | Specify other settings as desired, and then click OK. |
Troubleshooting: Your Web Page displays HTML code instead of graphicsWhen you use the Save As Web Page command and specify an HTML template, Visio 2007 displays the HTML coding instead of your diagram if the template doesn’t include the requisite <IFRAME> tag. In your HTML file, insert the following tag where you want the Visio 2007 diagram to appear: <IFRAME src="%%VIS_SAW_FILE%%"> |
Employing a Visio 2007 Diagram as a Web Graphic
If you want to use your Visio 2007 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 2007 creates a new file—your original drawing file isn’t changed.
Visio 2007 supports three Web graphic formats: Joint Photographic Experts Group (JPEG), Graphics Interchange Format (GIF), and Portable Network Graphics (PNG). Almost all browsers display JPEG and GIF images; earlier browsers might not display PNG images. When you save a Visio 2007 drawing, or shapes in a Visio 2007 drawing, in a graphic format, no custom property data or hyperlinks are saved with the graphic.
Note
You can also save Visio 2007 drawings in other graphic formats, such as Bitmapped Graphics (BMP), or Tagged Image File (TIF), but due to their size, these formats are inefficient for Web pages.
To save a Visio 2007 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-11 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. Interlaced images appear in the Web browser in stages, as more information is downloaded; noninterlaced 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-11. 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.
Most Visio 2007 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. For example, TIFF or BMP formats usually work best if the file will be used as part of printed matter. 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.
Inside Out: Add a Visio 2007 graphic to a Web pageTo include an exported Visio 2007 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=”Drawing1.gif”> in the HTML file (i.e., Web page). |
Automating Web Page GenerationVisio 2007 exposes its Web functionality through its API so that you can save Visio 2007 files as HTML programmatically. Visio 2007 exposes a Component Object Model (COM) object that anyone using an automation-compliant language can create. The main interface is VisSaveAsWeb. Although it’s beyond the scope of this book to explain how to write programs that work with Visio 2007, you can refer to the Developer Reference (choose Help, Developer Reference) in Visio 2007. In addition, Microsoft has made the documentation for this interface available on its Web site. See http://msdn.microsoft.com for the latest information. |
Exporting Visio 2007 Diagrams as PDF Files
In Visio 2007, users can save diagrams as PDF files. Using PDF format can enable others to more effectively understand and use the information you send to them. The PDF format was developed by Adobe Systems and is a fixed layout electronic file format that preserves a document’s formatting and simplifies file sharing. To save your diagram in a PDF format, you must have the correct add-on installed. Choose File, Find Add-Ins For Other File Formats and follow the prompts. Once the add-on is installed, simply click File, Publish As PDF Or XPS; choose the settings you wish; and click Publish. If you selected the check box for Open File After Publishing, then Adobe Acrobat (Standard or Reader) should start and open your diagram. To view a PDF file, you must have Adobe Acrobat Reader (a free download from www.adobe.com) installed on your computer. To edit a PDF file, you must use Adobe Acrobat Standard or Professional.
You can also choose to optimize the files by choosing the Standard (Publishing Online And Printing) option or the Minimum Size (Publishing Online) option. The Standard (Publishing Online And Printing) option should be chosen if the drawing requires high print quality. The Minimum Size (Publishing Online) option should be chosen if the drawing’s print quality is less important than print size. If you need only a selection of pages morphed into PDF files or need to specify other publishing options, click Options on the lower right corner of the Publish as PDF or XPS dialog box, and choose the boxes that match your needs.
To simplify the process of saving your diagram in PDF format, here are the steps:
1. | Select File, and click Publish As PDF Or XPS. |
2. | In the File Name list, type or select a name for the drawing. |
3. | In the Save as type list, click PDF. |
4. | If you want to open the file in the Adobe Acrobat Reader immediately after saving it, select the Open File After Publishing check box. |
5. | Next, to Optimize For, choose between Standard (Publishing Online And Printing) or Minimum Size (Publishing Online). |
6. | Click Options, if you need to specify other publishing options. |
7. | Click OK. |
8. | Click Publish. |