Creating Links and Anchors

From Documentation
Jump to: navigation, search

Creating Links and Anchors

NetObjects Fusion makes it easy to create navigation aids using links. You can make any text, image, shape, or area of an image into a navigation aid by adding a link. Link page objects to any point on the Web, including points within your site. You can also create and link to anchors markers at a specific location on a page to aid navigation in long pages.

Creating Links

You can use the linking techniques described in this chapter to manually link objects such as text, pictures, and drawn shapes, to internal locations in a site and external locations such as files and other Web pages. As you organize a site, you re likely to create multiple links to the same location. You can easily update these links using the lists in Assets view.

You can use the Link button on the Properties panel or click the Link tool on the Standard toolbox to open the Link dialog, where you specify the destination of a link.

Types of Links

There are four types of links, each with its own tab in the Link dialog:

  • Internal link, which links to a page or anchor within the site.
  • Smart link, which links to a relative position in the site, such as previous page or next page. Smart links are sometimes called structural links. The Blank link, which you can use to trigger an action without going to a new page, is also a smart link.
  • External link, which links to a page in another site via a URL, using a protocol such as ftp, mailto, http, or JavaScript.
  • File link, which links to a file that visitors can download from the site.

Link Indicators

You can link a selected object or text, or a text insertion point.

  • If you link an object, the Link icon indicates the object is linked.
  • If you select text and link it, the selected text is underlined and appears in the default font and color for links.
  • If you place an insertion point in text without selecting text, the link name is inserted in the text.

Creating an Internal Link

Internal links link to pages or anchors within a site. If you move a linked page in the SiteStructure or change the page's name, NetObjects Fusion automatically updates all associated links. Assets view lists the internal links in your site.

Using an anchor, you can link to a specific page or to a specific location on the current page. See Adding, Editing, and Deleting an Anchor.

To create an internal link:

  1. In Page view, select an object or text to link.

If you place an insertion point in text without selecting text, the link name is inserted in the text.

  1. Click the Link tool on the Standard toolbox or the Link button on the object's Properties panel.

The Link dialog appears.

  1. Select Internal Link as the link type.
  • click the Add Data Source button to specify a Data Source. For more information see [setting_datasource_contexts.htm Setting Data Source Contexts] .
  • If you are linking to a page, select the page in the SiteStructure.
  • If you are linking to an anchor on a specific page, select the page in the SiteStructure and then select the anchor from the list on the right.
  1. To set a link target, see Setting Link Targets.

You may not need to select a frame target. NetObjects Fusion automatically targets most internal links. If you select <none>, NetObjects Fusion uses the default target, which depends on the current frame setup.

The destination page for the link appears only in the frame you select.

  1. Click Link.

NetObjects Fusion creates the link. When a site visitor clicks the linked item, the browser displays the destination page or the selected anchor.

Adding, Editing, and Deleting an Anchor

An anchor marks a specific location on a page. Anchors let site visitors go directly to a particular part of a long page instead of scrolling and searching for information. You can place an anchor anywhere in a text box or table, or on a picture or drawn shape. You link to an anchor using the Link dialog. When a site visitor clicks the link, the browser displays the page containing the anchor, beginning at the location of the anchor.

When an anchor link is in a MasterBorder or AutoFrame, use the Current page option in the Link dialog to ensure that the link always points to an anchor on the current page. If you want an anchor link to always lead to a specific page, select the page name instead of the Current page option when you link to the anchor.

For example, suppose your Layout contains a very long text box. You place anchors at the top and bottom of the text box, and in the MasterBorder, you link the words To Top to the top anchor and the words To Bottom to the bottom anchor. In the Link dialog, instead of choosing the current page name in the Page name section, you choose the Current page option. If you copy that text box to another page with the same MasterBorder and replace its content, the To Top and To Bottom links still work, jumping to locations on the current page instead of the page where you made the links.

To add an anchor:

  1. In Page view, select an image or drawn shape or double-click to place the insertion point within a line of text.

You cannot add an anchor to a text box if you highlight the text.

  1. On the Standard toolbox, click the Anchor tool.

The Add Anchor dialog appears listing anchors already on the page.

  1. Type a name for the anchor in the Name field. The name cannot contain spaces. Make sure each anchor has a different name.
  2. Click OK.

If Object Icons is checked on the View menu, the Anchor indicator appears at the anchor location on the page.

To edit the anchor, select the anchored text or object, click the Anchor button on the Properties panel, and change its name in the Change Anchor dialog. To delete the anchor, click the Anchor icon and click Remove in the Change Anchor dialog. If you are working with a text object, you can click the anchor icon to display the Change Anchor dialog.

Creating a Smart Link

Smart links lead to a page in your site based on its relative position in the SiteStructure, rather than its name. These links automatically adjust when you change the SiteStructure. For example, if your smart link leads to the parent of the current page, and you move the current page to a different parent, NetObjects Fusion updates the link to point to the new parent. Sometimes a smart link is called a structural link.

To create a smart link:

  1. In Page view, select some text or select an object to link.

If you link to a text insertion point, the link name is inserted in the text.

  1. On the Standard toolbox, click the Link tool.

The Link dialog appears.

  1. Select the Smart Link type.
  2. Select the type of link you want. The links listed depend on the type of page you are on normal or stacked, and on what pages are available to link to from the page you are on.
  • Home links to your Home page.
  • Up links to the parent of the current page.
  • Next Stacked Page links to the next page in a set of stacked pages.
  • Previous Stacked Page links to the previous page in a set of stacked pages.
  • Next Page links to the sibling to the right of this page in the SiteStructure.
  • Previous Page links to the sibling to the left of the current page in the SiteStructure.
  • First Child Page links to the first child page of the current page.
  • Blank creates an empty JavaScript link on the page. You can use the Blank link to assign an action.
  • Checkout links to your site's chekout section if you have added an Ecommerce Catalog. See Creating E-Commerce Catalogs.
  • View cart links to your site's view cart section if you have added an Ecommerce Catalog. See Creating E-Commerce Catalogs.
  1. Click Link.

For information about stacked pages, see Data Publishing.

Creating an External Link

External links are Universal Resource Locators (URLs) that point to other pages and items in other sites. A valid URL can include the protocol, host name or DNS, path name, and sometimes a file name, such as http://netobjects.com/html/web-design-software.html. Each external link becomes an asset of the site that you can update in Assets view.

To create an external link:

  1. In Page view, select some text or select an object to link.
  2. On the Standard toolbox, click the Link tool.

The Link dialog appears.

  1. Select the External Link type.
  2. Select a protocol from the New link drop-down list.

If you re creating a link that does not require a protocol, select (none). If you want to use a protocol that is not in the drop-down list, you can type it in.

  1. Enter the appropriate information in the URL entry field and click Save, or select an existing link from the list. For example, you could enter a URL, a mailto address, or a Java command depending on the selected protocol. For details about email links, see Adding an Email Link.
  2. If you re creating a new external link, you can edit the default name for the link in the Name column by double-clicking in the column field and typing.

This name is placed in the text if you do not select text or an object to link. It appears in the list of links in Assets view so you can quickly identify and sort link destinations. It is not added to the HTML generated when your site is published.

  1. Click Link.

You can also create an external link as you type. If your text includes @ or ://, NetObjects Fusion automatically creates an external link.

Adding an Email Link

To add a mailto link:

  1. In Page view, select some text or select an object to link.

If you place the insertion point in text without selecting text, the email address is inserted in the text as a link.

  1. On the Standard toolbox, click the Link tool.

The Link dialog appears.

  1. Select the External Link type.
  2. Select mailto from the New link drop-down list.
  3. In the text entry field, type the email address using the format username@domain.com.
  4. Click Link.
  5. Preview the page.

When you click the link, the browser's email client displays a mail window with the address you entered in the recipient, provided the browser is configured to send email using the HTML mailto command.

Adding a Relative Link

Relative links are important if you must link to files that are published separately. Relative links protect the links on your pages if your ISP moves or changes the server location. To create a relative link, you must know where the destination file is relative to the file containing the link.

For example, suppose you publish a site using the by Site Structure publishing option. Your company PR department wants to place HTML documents on the server, but publish them separately from the main website. The PR department has its own Articles directory on the server at the root of the site. There is also a News directory and the index page for the site at the root of the site. The structure looks something like this:

index.html
/News
news.html
/Articles
PressRelease1.html
PressRelease2.html

The main News page is published in the News directory. You must create a relative link to link the news.html page to the articles in the Articles directory.

To create a relative link:

  1. In Page view, select some text or select an object to link.
  2. On the Standard toolbox, click the Link tool.

The Link dialog appears.

  1. Select the External Link type.
  2. Select (none) from the New link drop-down list.
  3. In the URL field, type the relative path from the news page to the press release page. For example:

../Articles/PressRelease1.html

You cannot test this link by previewing, because it requires the exact configuration of files that only exists on the server. However, after you publish the site and the PR department uploads articles into the Articles directory, the link will work correctly.

When typing the path, if you do not include periods or slashes in front of the file name, NetObjects Fusion attempts to find the file in the same directory as the page containing the link. This is also true for the format ./filename.html. To back up one directory before looking for the path, use ../path/filename.html. For each directory you need to back up to find the destination file, include another ../. For example, suppose you create a Press Releases page in a directory called PR within the News directory:

index.html
/News
news.html
/PR
PRlinks.html
/Articles
PressRelease1.html
PressRelease2.html

A link from PRlinks.html to PressRelease1.html looks like this:

../../Articles/PressRelease1.html

Remember that some servers are case sensitive; your link must exactly match the directory names and file names of where you want to go.

  1. Click Link.

Creating a File Link

You use file links to link to a file. For example, you might create a file link so site visitors can download the file. When you create a file link, the file it refers to becomes an asset of the site and is uploaded to the server when the site is published.

To create a file link:

  1. In Page view, select some text or select an object to link.

If you place the insertion point within the text without selecting text, the file name is inserted in the text.

  1. On the Standard toolbox, click the Link tool.

The Link dialog appears.

  1. Select the File Link type.

The File path field displays the path to the file and the Name column displays the name that appears as the link if no text or object is selected.

  1. Click Browse, select a file in the Open dialog, and click Save.
  2. If necessary, enter or edit the name.

This name appears as the link if no text or object is selected and also in the list of links in Assets view so you can quickly identify and sort link destinations. It is not added to the HTML generated when your site is published.

  1. Select Convert to HTML document when publishing file so all site visitors can view the document. If your linked file remains in its original format, it can only be opened by applications that support that file type. This feature only works with .doc, .mcw, .xls, and .rtf files.
  2. Click Link.

The way the linked file opens for site visitors depends on the configuration of their browser and Web server. Test the link in the appropriate browsers before publishing the site.

Setting Frame Targets

When a site visitor clicks a link placed within a frame, the browser has to know where to display the results. The frame that displays the retrieved content is the target of the link; when you specify which frame is to display the results of a link, you aretargetingthat frame. NetObjects Fusion includes four default targets. Choose:

  • _blank to load the specified link into a new browser window.
  • _self to replace the frame where the link resides with the document of that link. This is similar to how links behave on sites with no frames.
  • _parent to load the designated content into the current window's parent. If the current frame has no parent the content is loaded into the same frame as the element that refers to this target.
  • _top to load the designated content into the full, original window. This cancels all other frames. If the current frame has no parent the content is loaded into the same frame as the element that refers to this target.

To display the designated content in a new named window, you can create a new link target.

To set a link target:

  1. In Page view, select the object or text that you want to link.
  2. Click the Link tool on the Standard toolbox.

The Link dialog appears.

  1. Select the type of link you are targeting: Internal Link, Smart Link, External Link, or File Link and set up the link. See Creating Links.
  2. In the Target area, choose Existing target the drop-down list.
  3. In the name area, choose a default target from the drop-down list.

To display the designated content in a new named window, click Add and type a name for the window in the Custom Target dialog box. If a window with that name already exists, the content is displayed in the existing window.

You may not need to assign a target. NetObjects Fusion automatically targets most internal links for you.

  1. Click Link to close the dialog and create the link.
  2. Preview the page to test your targeted links.

Setting Pop-Up Window Targets

To display the designated content in a new pop-up window, you can create a new link target.

  1. In Page view, select the object or text that you want to link.
  2. Click the Link tool on the Standard toolbox.

The Link dialog appears.

  1. Select the type of link you are targeting: Internal Link, Smart Link, External Link, or File Link and set up the link.
  2. In the Target area, choose Pop-Up Window from the drop-down list.

To display the designated content in a new pop-up window, click Add. The Pop-Up Windows Properties Editor will appear.

  1. In the Name field, type in a name for the new pop-up window.

If a pop-up window with that name already exists, the content is displayed in the existing pop-up window.

  1. To set the size of the pop-up window on the screen, enter values for the height and width, in pixels.

Select "Full Screen" to have the pop-up window fill the entire screen.

  1. To set the position of the pop-up window on the screen, enter values for the left and right positions, in pixels. Placement will be offset from the upper-left corner of the screen.

Select "Auto Center" to automatically center the pop-up window in the middle of the screen.

  1. Customize your pop-up window by selecting from the following options:
  • Show Toolbar to add a navigation toolbar to the browser.
  • Show Scroll Bar to scroll left-right and up-down in the browser.
  • Show Menu Bar to add the browser's menu bar.
  • Show Status Bar to display the page status in the browser.
  • Resizable to provide the ability to resize the pop-up window.
  1. Click Preview & Set to preview the pop-up window in a browser.

To adjust the pop-up window settings, resize and reposition the browser preview window, then click Set. The new settings will take effect.

  1. Click OK to close the Pop-Up Window Properties Editor.
  2. Click Link to close the dialog and create the link.
  3. Preview the page to test your targeted links.

Editing the Pop-Up Window Script

You can customize the pop-up window by modifying the pop-up window script included in NetObjects Fusion .

  1. In Page view, select the object or text that you want to link.
  2. Click the Link tool on the Standard toolbox.

The Link dialog appears.

  1. Select the type of link you are targeting: Internal Link, Smart Link, External Link, or File Link and set up the link.
  2. In the Target area, choose Pop-Up Window from the drop-down list.

To display the designated content in a new pop-up window, click Add. The Pop-Up Windows Properties Editor will appear.

  1. Click "Edit with Script Editor".

The Script Text Editor will appear.

  1. Modify the script and click OK.

To reset the script back to the default settings, click "Revert to Original Script". If no modifications have been made, you will only have the option to "Edit with the Properties Editor".

Following Links

If Object Icons is checked on the View menu, NetObjects Fusion displays the Link icon wherever you create a link on an object. If you place the pointer over the icon, the link is displayed in the status bar at the bottom of the NetObjects Fusion window.

Text links are underlined and appear in the default font and color for links.

If you mouse over a text link, a callout will appear with the link's target.

In Page view, you can follow a link you created to its target page or anchor:

  • Select the object and from the Go menu, choose Follow Link.
  • To follow a text link, select the linked text,and from the Go menu, choose Follow Link.

===Finding a Link==- As the number of pages in your site grows, the number of links will probably increase as well. NetObjects Fusion makes it easy for you to find a link.

  1. Open the Link dialog.
  2. Click the Find button.

The Find File Link dialog appears.

  1. Select criteria for the search, enter the text you want to search for, and click Find.

NetObjects Fusion finds the first link that satisfies your criteria.

  1. To find the next link that matches the criteria, click Find Again.

Editing or Removing a Link

To edit a link, select the linked text or object, click the Link button on the Properties panel or Standard toolbox, then change the link in the Link dialog. If an external link is used in multiple places in your site, you can update all instances by editing the link in Assets view.

To remove a link, select it, click Link on the Properties panel or Standard toolbox, and click Unlink in the Link dialog. You cannot remove a link in Assets view, but you can verify all instances of a link. If you unlink every instance of a link, it is removed automatically.

You can insert HTML and JavaScript before, inside, and after links. See Adding HTML to a Link. You can also use a link to trigger an action using the Blank link. See Adding an Action to Linked Text.

Adding HTML to a Link

You can add your own HTML or JavaScript to a link to extend its capabilities. For example, you might want to add HTML that directs the browser to open the link in a new window, or JavaScript that displays a dialog. The steps below demonstrate how to add HTML that directs the browser to open the link in a new window. For more information, see Accessing an Object's HTML.

  1. In Page view, select some text or an object to link.
  2. On the Standard toolbox, click the Link tool.

The Link dialog appears.

  1. Select a link type.
  2. Click the HTML button in the Link dialog. If the HTML button is not available. the object does not allow additional HTML.

The Object HTML dialog appears.

  1. Click the inside tag to indicate where you want to add HTML or JavaScript.
  2. If you want the link to open the page in a new window, type target=NewWindow.

As you type, the top part of the dialog displays your code as it will appear in the HTML NetObjects Fusion generates.

  1. Click OK in the Object HTML dialog.
  2. Click Link in the Link dialog.

When you preview or publish the site, the link opens a new browser window.

Working with Imagemaps

An imagemap can contain several links in a single picture. You create an imagemap by drawing hotspots on a picture. You can link as many hotspots as you like in a single image, but the hotspots cannot overlap or extend beyond the edge of the picture. Because the imagemaps you create with the following procedure do not require a CGI script running on the server, they are called client-side imagemaps. Server-side imagemaps require setup on a Web server to run properly.

To create a single link on a picture, you do not need to use an imagemap unless you only want to link part of the image. Imagemaps are only necessary to create multiple links on one object.

Creating an Imagemap

  1. In Page view, click the Hotspot tool on the Standard toolbox, and select the appropriate tool from the flyout to create a rectangular, circular, or polygon hotspot.
  2. Draw a hotspot on an image.

If you are using the Polygon Hotspot tool, you must click to establish each vertex of the polygon, then double-click to complete the hotspot shape.

The Link dialog appears.

  1. In the Link dialog, select a link type internal, smart, external, or file. See Creating Links.
  2. Select a destination for the link and click the Link button.

Once a picture has hotspots, you can move it anywhere on the page and even copy and paste it elsewhere in the site without affecting the imagemap.

Editing an Imagemap

To edit an existing hotspot, click the hotspot. The General tab of the Hotspot Properties panel appears.

  • To edit the link, click Link on the Properties panel or the Standard toolbox. The Link dialog appears, displaying the link information. Change the link destination or click Unlink to remove the link.
  • To add HTML to a hotspot, click HTML. See Accessing an Object's HTML.
  • To assign an action to a hotspot, click its Actions tab on the Properties panel and follow the procedure described in Adding Actions to Objects and Pages.
  • To resize a hotspot, select it and drag its handles.
  • To create an alt tag for the hotspot, type in the AltTag field. The alt tag appears when the browser does not display the image.
  • To create multiple hotspots on an imagemap, create one hotspot, copy it, and paste it on the image. The pasted hotspot appears in the upper-left corner of the imagemap by default. Move the hotspot to the appropriate location and edit the link.