Chapter 15: Planning and Mapping Web Sites

Most Web sites include hundreds of links to content such as Active Server Pages (ASPs), JavaScript, and countless graphic files. The sheer volume of links and content can make it difficult to manage a Web site and keep it up to date. However, if you have Microsoft Office Visio 2003 Professional, you also have a powerful visual tool for analyzing Web site content. Whether your site is served by an intranet, the Internet, or a network staging area, you can automatically diagram every page, link, and piece of content and even control the level of detail.

In Visio 2003 this version of the Web Site Map template maps more detail than in the past and offers a greater level of control with support for additional Hypertext Markup Language (HTML) tags, Java, Microsoft Office FrontPage 2003, Active Server Pages scripts (ASPs), and more. Visio provides information about every link it encounters, including its target address and whether that target was available. As a troubleshooting tool for locating broken links, Visio excels. Enhancements to the template include new, more compact layout options, editable shape text, and new shapes for representing current and upcoming technologies. With the new interactive discovery feature, you can map protected Web site areas if you have access rights. In short, this chapter shows you how to generate a Web site map with the contents you want and how to work with the results in Visio.

Understanding the Web Site Map Template

When you start a drawing based on the Web Site Map template, Visio adds shapes and tools for automatically creating a diagram of a Web site. The template adds the Generate Site Map command, which runs a crawler (sometimes called a spider or bot)—that is, a type of program that retrieves a Web document and follows all the links in it. Visio’s site map crawler looks specifically for HTML pages on the Internet, an intranet, or in local folders such as a test or staging site. Through this process, Visio discovers all the pages, documents, graphic and media files, program files, and other information on a Web site and then creates a hierarchical model of what it found.

Visio not only generates a site map, it also creates a model of your site. Like other model- based templates in Visio Professional, this one offers alternative views of your information and changes the way you work with shapes. In other words, the shapes on the page aren’t the most important part of what’s stored in the drawing file. The diagram on the page shows one view of the model, which might or might not include every link and piece of content. The List and Filter windows show the complete model with everything that Visio discovered when it crawled through your site, as Figure 15-1 shows.

Figure 15-1: You can choose which options you want to see in the site map by selecting them in the Filter window. The List window displays all your content in a tree view.

Viewing a Site Map

Visio provides information about your Web site in the way it displays shapes in a site map. Shapes include symbols and colors that indicate broken and duplicate links as well as other information. Table 15-1 shows you what each symbol means.

Table 15-1: Web Site Map Symbols

Symbol	What It Means
	A plus (+) sign on a shape’s bottom edge indicates a link that you can expand.
	A minus (–) sign on a shape indicates an expanded link.
	No symbol on a shape indicates a link that cannot be expanded.
	A red X on a shape indicates a broken link.
	A dimmed shape indicates a duplicate link.

Troubleshooting
Some shapes in the site map appear dimmed

If a shape in your site map represents a duplicate link, the shape appears dimmed on the page. As an alternative to dimmed shapes, you can have Visio hide duplicate links as collapsed items. That way, the links are included with the model of your site, but they don’t appear in the diagram unless you expand a shape’s links. To control this option, when you generate a site map, click Settings in the Generate Site Map dialog box. On the Advanced tab, select the Display Duplicate Links As Expandable option.

Collapsing and Expanding Site Maps

When Visio initially generates a site map diagram, it displays every link that it discovered. As a result, site maps are typically very wide. To make the site’s structure more apparent, you can collapse and expand branches, or subtrees, of your site as follows:

• Collapsing a subtree Right-click a shape that displays a minus (–) sign on the bottom edge, and then choose Collapse <Address>.

• Expanding a subtree Right-click a shape that displays a plus (+) sign on the bottom edge, and then choose Expand <Address>, as Figure 15-2 shows.

  
  Figure 15-2: If a page includes links to another level of site content, the shape that represents the page includes the Expand command on its shortcut menu.

Viewing a Web Site Model

You can choose how much of your site map you want to see on the drawing page. However, the entire model—all the links that Visio mapped—always appears in the List and Filter windows, as Figure 15-3 shows.

Figure 15-3: The List and Filter windows display all the content referenced by the links that Visio found when it created the site map.

The Filter window provides a way to view categories of content in a site map. For example, you can temporarily hide all graphic shapes from the site map by clearing the check mark beside the Graphic option, so that you don’t have to look at every bullet and logo graphic on your site and can more easily see the page hierarchy or other elements. The List window also lets you expand and collapse hierarchical branches of content.

The Web Site Map template opens these windows by default when you start a new drawing. You can also open a window by choosing Web Site Map, Windows, and then choosing a window to display. Visio docks these windows on the left side of the drawing page, but you can drag them to a new position—for example, with the stencils.

When you work in the List or Filter window, you affect the model of your site map, whereas working on the drawing page with shapes doesn’t necessarily change the model. For example, if you delete a shape on the drawing page, the link that the shape represented still appears in the List and Filter windows—that is, it’s still part of the model—and you can drag it back into the diagram. To delete a link from your model, delete it from the List or Filter window by right-clicking the link, and then choosing Delete. You can map different parts of your site on different pages of a drawing file by dragging a link from the List or Filter window onto a new drawing page. Visio maps that portion of the site and adds all the links below the one you dragged onto the page.

Tip

Display one branch of a Web site You can use the List window to quickly display a branch or subtree of your site. For example, you can insert a new page and then drag an item from the List window onto the page. Visio diagrams that branch of your site.

Determining What Is Mapped

When you generate a site map, Visio follows the trail of links contained in HTML and other pages based on file extensions, common communication protocols, and attributes to HTML tags or elements. However, when you generate a site map, you can do the following:

• Specify the number of levels of a site to map as well as the number of links on a level to follow.

• Disable links to types of content that you don’t want to include.

• Add a file extension, protocol, or HTML attribute to the list so that Visio examines links to other types of content.

• Change the shape used to represent a type of link.

A Web site is typically structured with one home page that contains links to branching pages. A level represents one layer of the site’s hierarchy or navigation. For example, a link on the home page might take you to a page on the first level of the site. A link on that page could send you to a page at the second level, and so on, as Figure 15-4 shows. For every level of a site, you can choose the maximum number of links that Visio will follow before proceeding to map the next level.

Figure 15-4: Visio regards the navigational structure or hierarchy of a Web site as its levels and can map a site containing up to 25 levels.

By default, a site map includes links to files with any of the extensions shown in Table 15-2.

Table 15-2: File Extensions That Are Mapped by Default

Site Content	File Extension
Active Server Page	.asp, .asa, .cdx
Archive	.zip, .cab, .z, .gz, .tgz, .uu, .uue, .hqx, .lha, .lzh, .sit, .sea
Audio	.wav, .snd, .au, .aif, .aifc, .aiff, .mp2, .mp3, .mid, .rmi, .midi, .wma, .ra, .ram
Document	.doc, .xls, .ppt, .mdb, .pub, .prj, .vsd, .rtf, .pdf, .txt
FrontPage file	.fpweb, .fphtml
Generic	other (*.*)
Graphic	.img, .jpg, .jpeg, .gif, .bmp, .png, .art, .jpe
HTML	.htm, .html, .shtm, .shtml, .stm, .htw, .mht, .mhtml, .jhtml, .php, .php3
Image map	.map
Java and JavaScript	.class, .js, .java
Multimedia	.swf, .dcr, .swl, .wrl, .wm, .rm
Plug-in	.ocx, .dll
Program	.exe, .bin
Script	.cgi, .vbs, .cfm
Template	.css, .asx, .htx, .htt
Video	.avi, .mov, .qt, .mpg, .mpeg, .mpe, .wmv, .m1v, .mpv2, .mp2v, .mpa, .asf
XML	.xml, .xsl, .dtd, .osd, .cdf

Troubleshooting
The List and Filter windows don’t display a type of link that the Web site includes

When you use the Generate Site Map command, Visio crawls your site by following the links with the file extensions, protocols, and attributes that are specified in the Web Site Map Settings dialog box. What you see in the List and Filter windows reflects those settings. For example, if you were expecting to see links to executable (.exe) files, but the Program option was disabled when you generated the site map, you won’t see any links to files of that type in Visio. The only way to add links to that file type is to generate a new site map. To do that, choose Web Site Map, Generate Site Map, and then click Settings to specify the file extensions to include.

Cross-Reference

For details about modifying map settings, see “Changing Site Mapping Settings,” page 402.