When you’re designing a Web site, your most powerful tool is not a speedy Power Mac or unlimited bandwidth. It’s the humble site map, the foundation of a site’s structure and the blueprint for a site’s growth (and they all grow).
The problem with the conventional site map, which often begins on a piece of paper, is that it’s likely to change drastically during the course of a Web project, reducing most paper-based maps to a mess of scribbles and revisions. Even when you translate the site map into an electronic format, such as a Macromedia FreeHand or an Adobe Illustrator file, you can still spend hours updating the site map if you modify the site structure.
Until now, there have been few digital tools for building site maps, especially on the Mac. Adobe GoLive 5 (800/833-6687,
www.adobe.com ) features a new Design tool that lets you not only quickly create and edit a site map, but also build several alternate structures (which GoLive terms designs) for the same site so you can try out different ideas. Once it’s built, you can use the map as the shell structure for building the site.
JEFF CARLSON is a coauthor of Real World Adobe GoLive 5 (Peachpit Press, 2000) and the managing editor of the online newsletter TidBits.
1. Create a Site File and a Design The backbone of GoLive’s site-management capabilities is the site file, which stores a wide variety of information. You can view the site file under the Designs tab in the Site window.
Create a new site file by selecting Blank (command-option-N) from the New Site submenu of the File menu and giving it a name. Mine is called “outta.site.” (GoLive automatically appends .site to any name you enter.) Select the Create Folder option A to store all associated files together in a similarly named folder. Finally, click on the Choose button B.
Now GoLive automatically creates a home-page file called index.html C.
Go to the Designs tab D of the Site window that appears, select New Site Design from the Design menu, and then give your design a name. I’ve named mine Even More Coffee.
To start building your site map, double-click on the design icon E to open the design-editing window.
2. Build a Family of Pages To build the map, first anchor the design to the index.html page, and then populate the design with other pages by dragging and dropping icons from the Objects palette.
Switch back to the Files tab of the Site window and drag the index.html file to the design-editing window. Then, in the Objects palette (command-2), switch to the Site tab A and find the icons for four tools used with site designs: Generic Page B, Design Section C, Design Group D, and Design Annotation E.
To start building your family of pages, drag a new Generic Page icon or a Design Section icon onto the index.html anchor so that a dark bar appears next to the existing page.
Dropping the icon onto the top creates a parent G, which is one level higher; dropping it onto the left or right edge creates a sibling H, which is at the same level in the site hierarchy; and dropping it onto the bottom creates a child I, which is one level lower. Green arrows indicate navigation pathways.
Drop a Design Section icon to create one or more site-map pages that will eventually end up in their own subfolder of the hierarchy; they can also share a common page template.
3. Making Sense of the Map In addition to the Generic Page and Design Section features, site designs employ two methods of making sense of it all: Design Group and Design Annotation.
The Design Group icon in the Objects palette represents a container; pages within it remain grouped together on screen. Although grouping items doesn’t affect their placement in the hierarchy, it helps you keep track of related items, such as pages whose contents share the same theme A. Design Groups exist purely for your organizational benefit.
Design Annotations let you attach comments or queries to items in the design, in the same way you slap Post-it notes onto a paper-based site map. Drag the Design Annotation icon onto a page B, group C, or link to add a note.
Use the Annotation Inspector to control what the notes display.
4. Create Pending Links Viewing the structure of your site only goes so far: you still have to provide working hyperlinks so visitors can move among the pages. After you set up the links, you can easily add them to the pages’ contents.
Click on a page icon to reveal the Point And Shoot tool at the lower right edge of the page icon A. To create a link from one page to another, click and drag the Point And Shoot tool until the destination page is highlighted B, and then release.
Blue arrows appear when you’ve successfully added a hyperlink.
You can click on a link and drag its center point to change the angle of the line (which often makes it easier to spot), or choose a setting from the Deflection pop-up menu in the Link Inspector.
Later, when you’re building the pages’ contents, you can view pending links by bringing up the Page Inspector within the Layout Editor and clicking on the Pending tab. At that point, drag links from the Pending tab C to your layout D to insert the link.
5. Submit the Design Your structure is built and your links are pending, but the design is still just a collection of empty placeholder pages. Now you need to make the pages active so you can flesh out their contents. To activate the site, first check the design, and then submit it.
Click on the Check Design button on the Toolbar to look for potential problems that would prevent GoLive from staging the design, that is, moving the placeholder files into your site’s main directory. The errors generally address misnamed files or unspecified links. GoLive reports problems under the Staging tab A of the design window.
Once the design checks out, it’s time to make it active. Click on the Submit Design button in the Toolbar, or select Submit Design from the Design Staging submenu under the Design menu. GoLive moves the pages to the Live Files folder in the design window. (They also appear in the Files tab of the Site window.)
After you’ve built your placeholder files and the site’s structure, you can move forward to the easy part: designing the appearance and content of your site.