Education

Solutions for

K-12

Higher Education

Design and Film Schools

Students

Adobe Web Tech Curriculum

Unit 6: Hyperlinks, Lists, and CSS

Lesson 6.2: Hyperlinks

Within-Site Web Links

As mentioned previously, within-web links (intrasystem links) link to a different page within the same website. GoLive makes the process of linking to other pages within the same website easy by making available the New Link button from many different locations within GoLive.

Creating Within-Site Web Links
Under the Hood

Creating Within-Site Web Links

Creating Within-Site Web Links via the GoLive Toolbar

To add a new link via the GoLive Toolbar to text already entered into the Document Window, follow these steps:

Select the to-be-linked text.
Click the New Link button on the toolbar; this immediately "dims" the button and illuminates the Remove Link button located to the right of the New Link button. The highlighted selected text appears with an underline once the link button is selected. Also, the previously empty link field within the Text Inspector (see Figure 6.2-3) now contains the following text: (EmptyReference!) .
Click the Browse button of the Text Inspector to display the Open dialog box.
Select the desired file to link to and click Open.
The selected text is now blue and underlined, indicating a link.

Figure 6.2-3: GoLive Text Inspector

Creating Within-Site Web Links via the Text Inspector

To add a new link via the Text Inspector to text already entered into the Document Window, follow the second set of steps described above. Again, the New Link and Remove Link buttons within the Text Inspector are used rather than those found on the GoLive Toolbar.

Creating Within-Site Web Links via the Fetch URL (Pick Whip) Button

To add a new link via the Fetch URL (Pick Whip) button to text already entered into the Document Window, follow these steps:

Select the to-be-linked text.
Click the New Link button on the Toolbar or in the Link Inspector.
Make sure the Site Window is visible, but is not the active window.
Click the Fetch URL button in the link field of the Text Inspector and drag to the to-be-linked file in the Site Window. Dragging over a closed folder will open the folder and display the files within the folder.
The link now appears in blue, underlined text.

Creating Within-Site Web Links via the Special Menu

Links can also be created or removed by using the New Link or Remove Link options in the Special Menu.

Special > New Link

Special > Remove Link

The steps for creating links described above also apply to creating links via the Special Menu; just substitute the Special Menu link options with the link buttons described above.

CS Update

Users of GoLive 6 will notice a few changes in the process of creating hyperlinks:

GoLive hyperlinks are no longer created prior to text being entered.
The Fetch URL or Point and Shoot button is now called the Pick Whip button.

Under the Hood

Hyperlinks are inserted using the anchor <a> element.

Either text or images (or both) can be used to link to other locations.
The anchor element uses the href attribute to link to a specific location within a website or web page.
The basic syntax for the href attribute is:
<a href="address">label text</a>

For example:

<a href="index.html">Home Page</a> OR <a href="../index.html">Home Page</a>

Notice the use of a relative link reference in the above examples, i.e., there's no "http://" or domain name. Both examples illustrate linking within a web. The first example links to a page in the same folder. The second example links to a file one level up within the folder structure; the "../" preceding "index.html" indicates to move up/back one level.

Demonstration or Practice Activity

View the links destinations graphic presented previously. Note the within-web link from the Instruments page to the Guitar page.
In GoLive, create a new site called Hyperlink_Practice by importing the content pages from the Link_Practice folder. This will help you review the steps involved in creating an new site by importing existing content. (See the Site Wizard — Import from Folder section of the Creating a Project Site Using GoLive lesson.)
1. Select instruments.html as the site's home page.
2. Don't forget that any page you import or create should be XHTML-compliant.
Open the instruments.html page.
Make sure the Layout tab is selected.
Create a within-web link from the Instruments page's h2 "Guitar" heading to the guitar.html page (as shown in the links destinations graphic), using one of the methods described above.
Create a within-web link from the Instruments page's h2 "Mandolin" heading to the mandolin.html page, using another one of the methods described above.
Save the changes to the Instruments page.
View the code for the hyperlinks in the Source Editor.
Test the hyperlinks by displaying the Instruments page in a browser and clicking on the links.