• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 5. Creating Links > Creating hypertext links

Creating hypertext links

Now you'll create some hypertext links. You'll select some text in the Stock page and link the text to another page. The technique is similar to creating a graphic link or a link to an anchor.

In the Stock.html document window, scroll to the bottom of the page. You'll create hypertext links from the last line in the document: "Home | Stock | Appraisals | Repairs."

Double-click the word "Home" to select it. The Inspector changes to the Text Inspector.

Click the New Link button ( ) in the Text Inspector, or press Ctrl+L (Windows) or Command+L (Mac OS).

You'll create your first hypertext link using the Point and Shoot button in the Text Inspector to link to a file in the site window.

Drag from the Point and Shoot button ( ) in the Text Inspector to Index.html in the site window.

Creating link from Home text to Index.html file using point and shoot method

If Index.html file isn't visible, position the pointer over the Gage folder icon in the site window until the folder opens, then drag to the file.

If you make a mistake, select the Home text in the document window, and click the Remove Link button ( ) on the toolbar. Then repeat steps 3 and 4 to create the link.

You can also use the Remove Link button to unlink graphics.

Now you'll create a hypertext link to another file within the site by using the Inspector's Browse button to locate a file.

Select the text "Appraisals." Then click the New Link button ( ) on the toolbar.

In the Text Inspector, click the Browse button ( ), select Appraise.html, and click Open. The path to the file is Lesson05/05Start/Gage folder/Gage/Pages/Appraise.html.

Another way to specify a link in the Inspector is to enter the file's pathname in the URL text box. Now you'll create the final hypertext link.

Select the "Repairs" text in the document window. Click the New Link button ( ) on the toolbar. In the Link tab of the Text Inspector, enter the file's relative pathname in the URL text box: Repairs.html. (In this case no path is necessary, as Repairs.html is in the same directory as Stock.html.)

When you browse for the link destination or enter the URL, you can enter just the relative path (with the site folder name implied). Absolute URLs include the complete pathname of a file, including the site folder name. Relative URLs don't include the full pathname, and can refer to a file in a subdirectory from which the file is linked. By default, Adobe GoLive is aware of the site folder, so that you don't need to enter it in the URL text box.

Choose File > Save to save the Stock.html file.

To preview the links that you just created, click the Layout Preview tab. In Preview, click the Home, Appraisals, and Repairs links to test them. Each file opens in its own window.

You can also test these links in your browser by clicking the Show in Browser button on the toolbar, and then clicking a link to test it. (If you've connected each link correctly, the information it's linked to appears in the document window. If not, the browser will display an error message.)

Close all open files except Stock.html and Gage.site. Then click the Layout Editor tab ( ) in the Stock.html document window to return to Layout view.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint