Creating Links using Images and Text

Creating a Relative Link

1. Type the text you would like to become the link text.

2. Select this text.

3. Click the Browse for File icon, next to the Link option, in the Properties Inspector. Select an HTML page from your web site, for example your index or home page. Click OK. This text is now linked to an HTML page within your Web Site.

Note: As you create the text links, you will notice the color of the text change.

4. Hit enter to make the selected text a link

This link is called a Relative Link. It is relative simply because its linked to a document within this site, not to an external Web site.

5. If you want to preview your page and test your links, press F12 to launch a browser and try them out.

Note: If your Properties Inspector panel is smaller than what is shown here, click the arrow in the lower-right corner to expand it.

Creating an Absolute Link

An absolute link is defined in XHTML because it begins with an "http://" header and includes a full address. The process is almost identicalto creating a relative link.
1. Select the text that you want to become a hyperlink.

2. Click the Browse for File icon in the Properties inspector. Select an HTML page from your web site. Click OK. This text is now linked to an HTML page within your Web Site.

3. You can also create an Absolute Link to an external website by simply typing the URL, such as http://www.stedwards.edu into the Link option in the Properties inspector and press Enter (Windows) or Return (Mac).

4. Congratulations, you just created your first Absolute Link. It's an absolute link because it begins with an http header and includes the full address.

5. If you want to preview all of your links, press F12 to launch a browser and try them out.

Creating an Image Link

1. Select an image that you want to become a hyperlink.

2. You can create an Absolute Link to an external website by simply typing the URL, such as http://www.stedwards.edu or in our example http://www.berlinwallart.com/ into the Link option in the Properties inspector and press Enter (Windows) or Return (Mac).

This link is an Absolute Link, because it begins with an http header and includes the full address.

3. If you want to preview all of your links, press F12 to launch a browser and try them out.

Adding a Link by Typing

In the property inspector, there are three different ways that you can add in a link: typing in the link name into the link box, browsing for the file on your hard drive or "pointing to the file." We previously discussed browsing for the file which leaves typing the link name and pointing to the file.

1. To add in a link by typing the link name into the link box, the text needs to be highlighted, and inside the box type the filename that you want the text to be linked to. For an internal link, it is only necessary to type in the file name then followed by the file extension.

With the text already highlighted and the filename and extension typed into the link field, hit the enter (PC) or return key (Mac), and you will see that the link in the document has changed to blue as a normal link.

Using the Point to File Icon

Right before the Browse Icon on the Property Inspector, there is a Point to File icon. Links can also be created by using this icon to point to a file in the Files Panel.

1. Select the Text or Image you would like to link.

2. Click on the Point to File icon.

3. Drag the icon (an arrow will appear) to the desired file that you want to link, in this example index.htm.

Creating an Email Link

Aside from creating links to pages, you can create email links that send you correspondence directly to any email account. Creating an email link is easy; first type the text that you want to appear as a hyperlink. When users click on this text, the user's default email application (Eudora, Outlook, etc) will automatically launch a new email message with your email already addressed in the To: field. The following steps are ways to create an email link:

1.    Drag-select the text Email. This will highlight the text.

2.    Click Insert on the Menu bar and select the Email Link command. This will remove the text.

3.    Drag-select the text in the email field and press the Delete key.

4.    Type your email address (i.e. training@stedwards.edu) in the email field.

5.    Click OK.

Note: You can also type “mailto: training@stedwards.edu” in the Link field of the Property inspector.