You can include hypertext links in your Web pages to allow your viewers to move easily from one page to another within your site, or to other locations on the World Wide Web.

There are several kinds of links you can create in Claris Home Page, including:

You can make text, images, or specific parts of an image (called an image map) into links. You can also create links that reference frames, which is discussed in Adding frames to your Web page.

Every link needs to have an address. This address is referred to as a URL, or Uniform Resource Locator. Claris Home Page automatically inserts the URL when you create a link to another page in your Web site or to an anchor within a Web page.

Links can use relative paths or absolute paths. For more information on relative and absolute paths, see Using relative or absolute paths.

It's best to have the contents of your Web pages in place before you begin creating links. Making a flow chart of your pages can help you keep track of where you want to add links and where those links should lead. (For information, see Using a flowchart.)

Linking to pages within your Web site

With Claris Home Page, you don't need to type the URL of a Web page within your own Web site to link to it.

When a link is used, it takes you to the top of the linked page by default. To make a link go to a different place in the page, see Linking to an anchor on a page.

To create a link to another Web page you've created:

  1. Select the text or image you want to make the link.
  2. Choose Link to File from the Insert menu or click the Insert Link to File button on the toolbar.
  3. Select the name of the Web page file you want to link to and click Open.

    The text becomes underlined and the color of the text or the image border changes to indicate the link.

    Tip To remove the visible border from a linked image, select the image, choose Show Object Editor from the Window menu, and change the number in the Border text field to 0.

    For information about changing the default color of links, see Changing the color of links.

To create another link to the same location:

  1. Select the new text or image you want to make into a link.
  2. Choose Show Link Editor from the Window menu.
  3. Choose the most recent URL listed at the top of the URL pop-up menu.

    You can also click the Browse Files button to locate a file.

Linking to other Web pages and resources

To link to another Web page or resource, you must know the exact URL for that Web page or resource and you must use the correct syntax when you type it into the Link Editor.

To create a link to another site:

  1. Select the text or image you want to make the link.
  2. Choose Link to URL from the Insert menu or click the Link Editor button on the toolbar.

    The Link Editor appears.

  3. To see some examples of the correct syntax for URLs, click Show Examples.
  4. Type the URL of the link's destination in the URL text box.

    To link to

    Use this syntax

    A Web page within your Web site

    file.html

    A Web page outside your Web site

    http://servername/dir/file.html

    An anchor on the same Web page

    #anchorname

    An anchor on a page within your Web site

    file.html#anchorname

    An anchor on a page outside your Web site

    http://.../file.html#anchorname

    An anonymous FTP site

    ftp://servername/dir/file.txt

    An email address

    mailto:username@hostname


    You can use links to send an electronic message to a specific email address. When links to email addresses are used, the browser opens an email message window where you can type and send a message addressed to that email address.

  5. Press Return (Macintosh) or Enter (Windows).

    The text becomes underlined and the color of the text or the image border changes to indicate the link.

    Tip To remove the visible border from a linked image, select the image, choose Show Object Editor from the Window menu, and change the number in the Border text field to 0.

    For information about changing the default color of links, see Changing the color of links.

  6. To create another link to the same location, select the new text or image you want to make into a link and choose the most recent URL listed at the top of the URL pop-up menu.

Linking to an anchor on a page

You can create a link to an anchor so your viewers can jump to a specific spot on your Web page. Links can jump to anchors on the same page as the link itself or to anchors on other Web pages.

To create a link to an anchor, you create an anchor at the spot in your Web page where you want your viewers to jump to and then create a link to it.

Creating an anchor

  1. Position the insertion point where you want to place the anchor in your Web page.
  2. Choose Anchor from the Insert menu, or click the Insert Anchor button on the toolbar.

    A dialog box appears with a default name for the anchor. You can type a new name for the anchor if you want to. Giving a descriptive name makes it easier to link to the correct anchor if you create many anchors.

    Tip To create an anchor named according to text in your Web page, select the text before choosing Anchor from the Insert menu. The anchor will be named after the text you selected.

  3. Click OK.

    An anchor icon appears on your Web page.

  4. Choose Save from the File menu so you can link to the anchor you've created.

Creating a link to an anchor

After you've created and named anchors in your pages, you can create links to them.

  1. Open the Web page that contains the anchor you want to link to.
  2. Select the text or image you want to make the link to the anchor.
  3. Choose Link to URL from the Insert menu, or click the Link Editor button on the toolbar.

    The Link Editor opens.

  4. Type the anchor's name in the URL text box or choose it from the pop-up menu.

    The text becomes underlined and the color of the text or the image border changes to indicate the link.

    Tip To remove the visible border from a linked image, select the image, choose Show Object Editor from the Window menu, and change the number in the Border text field to 0.

    For information about changing the default color of links, see Changing the color of links.

You can also use this shortcut to create a link to an anchor:

  1. Open the page where you want to place the link and open the page containing the anchor.
  2. While holding down the Option key (Macintosh) or Control key (Windows), click the anchor icon and drag it to the position where you want the link to appear.
  3. Release the mouse button.

    Claris Home Page inserts a text link to the anchor.

    By default, the text of the link is filename#anchorname where filename is the name of the file containing the anchor and anchorname is the name of the anchor.

  4. If you want to change the default text, select the link and type the new text for it.

Note It is possible to create links to anchors on other people's Web pages by typing the URL of the anchor. If you do create links to anchors on other people's Web pages, keep in mind the possibility that they might rename, delete, or move their anchors, which can cause your links to break or send your viewers to the wrong place on someone else's Web page.

Changing an anchor name

You can change the name of an anchor at any time or add extra HTML code to it. Note, however, that any links you've made to the anchor must be re-created using the new name you assign.

To rename an anchor:

  1. Double-click the anchor icon in your Web page.

    The Anchor Object Editor appears.

    Note If you want to add extra HTML code to the anchor tag, type it in the Extra HTML text box.

  2. Type a new name for the anchor and press Return (Macintosh) or Enter (Windows).

Testing links

Once you have created links, you can test them to make sure that they work. Before you test links, make sure you save all of your Web pages that contain links or are the target of links.

The way you test a link depends on what kind of link it is and how you want to test it.

To test a link

Do this

To a Web page or anchor within your Web site using Edit Page mode

Control-click (Macintosh) or right-click the link (Windows) and choose Follow Link from the pop-up menu.

To a Web page or anchor within your Web site using Preview Page mode

Select Preview Page from the Window menu, and then click the link.

To an external Web page or resource

Choose Preview in Browser from the File menu to display your Web page containing the link in the default browser and then click the link. To change the default browser, see Changing the default browser.

Copying links

You can copy and paste links between pages of your Web site rather than re-creating them multiple times. Simply select the link text or image and copy and paste as you would normally, or you can drag the link from page to page. Claris Home Page copies the entire link, including the link's address. You can also store links in a library. See Using libraries and clip art for more information.

For more information about copying elements, see Cutting, copying, and pasting.

Deleting links

To delete a link but not the text or image associated with the link, select the link text or image, choose Show Link Editor from the Window menu, and click Remove Link.

To delete the text or image in addition to the link itself, select the link and press Delete.

Changing the color of links

You can change the default color of links in your Web page. Note that not all browsers display the colors that you select, so you'll probably want to view your Web pages in your browser to check your new color scheme.

  1. Choose Document Options from the Edit menu.

    The Options dialog box appears.

  2. Choose Basic from the pop-up menu or click the Basic tab to display a new set of options.
  3. Click one of the types of links to specify a new color for it.

    Choose

    To change the color of

    Default color

    Normal Link

    Links that the viewer has never clicked

    Blue

    Active Link

    Links while they are being clicked

    Red

    Visited Link

    Links the viewer has already clicked

    Purple


    The Color dialog box appears.

  4. Select the color you want for that type of link.
  5. Click OK.
  6. Repeat steps 3 through 5 for each link color you want to change.
  7. Click OK.

Linking parts of an image

When you turn an image into a simple link, the entire image becomes a clickable link that leads to a single destination. When you create an image map, however, you can link different parts of an image to separate destinations.

You can create client-side image maps and server-side image maps.

The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu.

Making a server-side image map work is a complex task. It requires a working knowledge of HTML code, available CGI programs, and the capabilities of your Web server.

Making a client-side image map work is relatively easy. The HTML code for a client-side image map resides entirely within the Web page that the image map is on so you don't need to know anything about HTML code, available CGI programs, or the capabilities of your Web server. Client-side image maps, however, only work in newer browsers, such as Netscape Navigator 3.0 and Internet Explorer 3.0.

If you want to accommodate viewers who have newer browsers and viewers who have older browsers, you might consider creating both a client-side and a server-side version of each image map on your Web pages. You also might consider using several individual images as links instead of an image map.

To create either kind of image map, you need to assign hotspots to the image. Hotspots are areas on an image map that viewers can click to open different URLs.

Creating a client-side image map

To create a client-side image map:

  1. Select the image and open the Image Object Editor.
  2. Choose the Edit button next to Client-Side Image Map.

    The image file opens in the Client-Side Image Map Editor.

  3. Select the Rectangular Link or the Circular Link tool in the Client- Side Image Map Editor toolbar and draw a rectangle or circle over the area of the image that you want to be a hotspot.

    When you are finished creating the hotspot, the Link Editor appears.

  4. Type the filename or URL of the link destination in the URL text box.

  5. Repeat steps 3 and 4 to create other hotspots in the image.

    Claris Home Page numbers each hotspot as you draw it, with lower- numbered hotspots in front.

    Note If you draw hotspots that overlap each other, hotspots in front take precedence over the ones in back. Use the Move Link buttons to change the order that layered hotspots are used.

  6. You can make the areas of an image map that aren't covered by hotspots link to a specific file or URL. When a viewer clicks on the image map but does not click on a particular hotspot, the link is activated. To specify a default URL for the image map, type the URL in the Default URL text box or choose the URL from the pop-up menu next to the Default URL text box.
  7. Close the Client-Side Image Map Editor.

To remove client-side image map information from an image, select the image, open the Image Object Editor, and click Clear.

The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu.

Creating a server-side image map

Making a server-side image map work requires knowledge of HTML code, available CGI programs, and the capabilities of your Web server. If you do not have this knowledge, you might consider using several individual images as links instead of a server-side image map.

To create a server-side image map, you need to change the image's behavior attribute, define hotspots, assign destination URLs, and then provide a CGI script to pull everything together.

Note For yourserver-side image maps to work, the Web server where you load your Web pages must be running an image map CGI program. You must assign a link to the image that references the image map CGI program and the .map file that Claris Home Page creates and stores in the same folder as the original image file. You must also choose what type of server-side image map you want to create, NCSA or CERN. To set the type of server-side image maps you create, choose Preferences from the Edit menu, choose Images from the pop-up menu or click the Images tab, and then set the Image Map Format option to NCSA or CERN.

For more information on server-side image map issues, see http:// www.claris.com/support/products/clarispage/.

To create a server-side image map:

  1. Select the image and open the Image Object Editor
  2. Choose Server-Side Image Map from the Behavior pop-up menu.
  3. Click the Edit button next to Server-Side Image Map.

    The image file opens in the Server-Side Image Map Editor.

  4. Select the Rectangular Link or the Circular Link tool in the Server- Side Image Map Editor toolbar and draw a rectangle or circle over the area of the image that you want to be a hotspot.

    When you are finished creating the hotspot, the Link Editor appears.

  5. Type the filename or URL of the link destination in the URL text box.

  6. Repeat steps 4 and 5 to create other hotspots in the image.

    Claris Home Page numbers each hotspot as you draw it, with lower- numbered hotspots in front.

    Note If you draw hotspots that overlap each other, hotspots in front take precedence over the ones in back. Use the Move Link buttons to change the order that layered hotspots are used.

  7. You can make the areas of an image map that aren't covered by hotspots link to a specific file or URL. When a viewer clicks on the image map but does not click on a particular hotspot, the link is activated. To specify a default URL for the image map, type the URL in the Default URL text box or choose the URL from the pop-up menu next to the Default URL text box.
  8. Save your image map and close the Server-Side Image Object Editor.

    The image map file is stored in the same location as the original image file.

  9. Save your Web page.

Testing hotspot links

To test whether an image map hotspot works as a link:

  1. Click the Preview Page mode button on the toolbar.
  2. Move the pointer over the image.

    The pointer changes to a hand when it's over a hotspot, and the hotspot's URL appears in the lower-left corner of the Claris Home Page application window.

  3. Click the hotspot.