Exploring Page Layout and Navigation

Notes/Domino provides the following navigational tools for your use when designing applications for the Notes client or Web client:

• Outline— Creates an organizing structure for an application and gives you control over how elements display in a navigation pane.

• Navigator— Objects and graphics that include programmed areas provide a graphical road map directing users to specific parts of a database.

• Image Map— A graphic you enhance with programmable hot spots that perform some action when a user clicks on the hot spots.

You can create a new outline by manually entering new entries or by generating a default outline. Of course, you can always add, edit, and delete entries in an outline you created with the Generate Default Outline option. Outline entries are excellent tools for site navigation because they link to practically any part of your application (pages, documents, views, folders, Web pages, and other Domino databases).

For more information on creating, troubleshooting, and modifying outlines, refer to Chapter 14, “Design Elements.”

Navigators allow users to locate documents and take actions without having to open a view. Navigators usually include hot spots (text and/or graphics) that enable users to click and execute an action. To use a navigator in a Web application, select the Web Browser Compatible option on the Information tab of the Navigator properties dialog box (see Figure 13.4). This causes Domino to convert the navigator to an HTML image map when viewed by a Web browser. This image map will be displayed as a full-screen image map. However, you can control the size and display of the image map by embedding the navigator in a form.

For more information about creating, troubleshooting, and modifying navigators, refer to Chapter 4.

Image maps are often used as navigational structures for Web applications. Because image maps are inserted into pages and forms, you can combine image maps with text and other page and form elements. In addition, you can manipulate the display of the image map by using hide-when formulas and computed-for-text formulas. A nice feature about image maps is that you can change the image used within an image map while leaving any previously created hotspots intact.

To create an image, follow these steps:

1.	Paste, create, or import a graphic or an image resource into a page or form.
2.	Select the image.
3.	From the pull-down menu or by right-clicking on the image, select one of the options available: Add Hotspot Rectangle Add Hotspot Circle Add Hotspot Polygon— When drawing a polygon, click the points of the polygon and double-click to close the shape Add Default Hotspot— Draws a hot spot around the entire graphic
4.	Click and drag the hot spot on the desired area of the graphic.
5.	Select the picture. On the Content area of the Information tab, specify the content type as Link, Named Element, or URL (see Figure 13.5). Figure 13.5. Hotspot Circle properties dialog box.
6.	In the script pane of the designer IDE, enter a simple action, formula code, or LotusScript code to execute when the hot spot is clicked.
7.	Select the target frame for the content action by entering the name of the frame in the Frame field of the Content area.
8.	On the Advanced tab, you can set the Tab Key, which sets the hot spot position in the image map tab order (available for Notes clients only).
9.	On the Advanced tab, you can enter alternate text for the hot spot.
10.	On the HTML tab, you can enter optional HTML attributes for the hot spot, such as ID, Class, Style, Title, and Other HTML attributes.

After you have created a hot spot, you can move the hot spot by clicking and dragging the hot spot with the mouse, or by selecting the hot spot and using the arrow keys to move the hot spot one pixel at a time. To delete a hot spot, you can select the hot spot and press the Delete button, or select one or more hot spots and select Picture, Delete Selected Hotspot(s) from the pull-down menu. To change the graphic for an image map, select the graphic, then select Picture, Replace Picture from the drop-down menu. This displays the Import dialog box, allowing you to select an alternate image.

When using graphics in your applications (as you most assuredly will), be sure to balance the visual benefits of using images with the additional time required for Web clients to download the images. You can either paste or import graphics in forms, pages, subforms, views, navigators, and documents. The Designer client stores the graphics in GIF (Graphical Interchange Format) or JPEG (Joint Photographic Experts Group) format. Therefore, it is best to use graphics as either JPEG or GIF in their native formats. Otherwise, if the images are not one of these formats, they are stored as a proprietary platform-independent 256-color format (similar to GIF89a format). You can implement the following types of graphics into your design:

• Standalone graphics to add to the design of the page or form

• Background graphics

• Image maps

Obviously, you want the images you integrate into your applications to look as much like the original image as possible. For Notes clients, the operating system and color mode (16-color, 256-color, High or True 24-bit color mode) makes a difference. For Web clients, however, you should use the Web color palette. Otherwise, image colors will be automatically matched to the color closest to the original, and that match may dramatically affect your image. Therefore, you can change from the Lotus color palette to the Web color by following these steps:

1.	Select File, Preferences, User Preferences from the pull-down menu.
2.	In the Additional Options section (located on the main Basics section), check the “Use Web Palette” option (see Figure 13.6). Figure 13.6. User Preferences, Additional Options section. [View full size image]