2.6 Inserting Links

A link is a small piece of code that can be applied to text or images that when clicked, opens a new web page or jumps to a new location in the current page. There are three types of link you can insert into your web page. These are a URL link, a link to an anchor on the page or an email link that allows you to set the recipient, subject and content of the email.

Links are an invaluable tool in web design as they replicate the turning of a page in the real world. It also gives you the ability to create navigation systems that allow you to breakdown the content of your site into relevant sections.

Creating a URL link

A standard URL link can be used to link to another page on your site, a file or image in your SiteWizard libraries or somebody else's website.

1. Create the text, or highlight some existing text that you wish to make a link.
2. Click on the Insert/Edit Link button on the toolbar.
3. You'll see in the Link Type that URL has already been selected.
4. If you are linking to an external site, type the web address into the URL box. If you look in the Protocol box you'll see that the http:// has been selected so there is no need to include this in the URL box. If you would like to link to a page or file from your server space then click the Browse Server button.
5. Select the page or file by clicking on the file name to insert it into the URL box.
6. Click the OK button to add the link to your selected text.

Figure 2.6 Click on the Browse Server button to link to a page or file on your site.

If you would like to adjust a link at any time during editing, Right Click your mouse over the link text and select the Edit Link option. If you would like to remove a link, select the Remove Link option from the same pop-up menu.

Creating an email link

An email link allows you to force your Email Accounts Manager (e.g. Microsoft® Outlook) to open its Compose New Message window. It also allows you to specify who the email is going to, what will appear in the Subject box and add some text to the actual email before the window is open. This is a great way of identifying emails that have been sent directly from your site.

1. Create the text, or highlight some existing text that you wish to make a link.
2. Click on the Insert/Edit Link button on the toolbar.
3. In the Link Type drop-down box select the E-Mail option.
4. In the E-Mail Address box type in the address you wish the email to be sent to. e.g. you@yourcompany.co.uk
5. If you would like to be able to identify this email from others that arrive in your email manager (e.g. Microsoft® Outlook), enter a subject and some text that appears in the email in the Message Subject and Message Body boxes respectively.
6. Click the OK button to add the email link to your selected text.

Figure 2.7 Include an Email Address, Subject and Body text to your email links.

Creating a link to an anchor

Before you can create a link to a specific anchor on a page you must first create them. For more information on setting up anchor, please refer to the Inserting an anchor on a page section of the guide.

1. Create the text, or highlight some existing text that you wish to make a link.
2. Click on the Insert/Edit Link button on the toolbar.
3. In the Link Type drop-down box select the Anchor in this page option.
4. Click on the By Anchor Name box and select the name of the anchor you wish to link too.
5. Click on the OK button and the link will be added to the selected text.

Figure 2.8 Anchor links allow you to jump to a specific section on a page.

Setting the target value of a link

The target value of a link allows you to specify how the new page will open once the link is clicked on.

1. Right Click your mouse over the link you wish to edit and select the Edit Link option in the pop-up menu.
2. Select the Target tab at the top of the window.
3. Click on the Target drop-down box and click on one of the settings. A breakdown of these options is given below.
4. Click the OK button for your modifications to be applied to the link.

Figure 2.9 Choose from a number of different target options.

<not set>
This is the default setting of a link. When the target of a link isn't set up, the link will act as normal.

<frame>
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

<popup window>
This option makes the target of your link open in a pop-up window with dimensions and features specified by you. A list of these options is shown below.

Resizable	By ticking this option you give the viewer the ability to resize the window to the dimensions they wish. The default setting is for the window to be locked at the dimensions specified.
Status Bar	This option allows you to add a Status Bar to the bottom of the window. The default setting is for the Status Bar not to be shown.
Location Bar	This option allows you to add a Location Bar to the window. The default setting is for the Location Bar not to be shown.
Tool Bar	This option allows you to add a browser Tool Bar to the window. The default setting is for the Tool Bar not to be shown.
Menu Bar	This option allows you to add a browser Menu Bar to the window. The default setting is for the Menu Bar not to be shown.
Full Screen	This option allows you to force the pop-up window to open to the size of the viewer's screen. This will only work for people using Internet Explorer.
Scroll Bars	By checking this box you will be adding both a horizontal and vertical scrollbar to the pop-up window. The default setting is for the scrollbars to be removed.
Dependent	By selecting this option you will be asking the pop-up window to close down when the user leaves your site. This option only works in Netscape Navigator.
Width	The width of the window.
Height	The height of the window.
Left Position	How far the window will appear from the left hand side of the screen.
Top Position	How far the window will appear from the top of the screen.

Figure 2.10 A list of features that can be applied to a links pop-up window.

New Window (_blank)
This option tells the selected link to open its target in a new browser window. This means that the original window that contains your website will still be available for people to go back to. This is a very handy option when linking to other people's websites.

Topmost Window (_top)
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

Same Window (_self)
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

Parent Window (_parent)
This option isn't used in this version of the SiteWizard editor and has been reserved for future use.

Advanced link settings

These settings should only be modified if you have an in-depth knowledge of how HTML works and are not covered in this guide.

Back to top

2.7 Inserting An Anchor On A Page

Anchors are a very handy way of allowing visitors to jump to a specific place on a current or separate web page. An anchor uses a small piece of code that creates a unique digital marker specified by you that can be referenced when creating links on a page, or in your site's menu system. This means that the user does not have to scroll down to the information they require, but can link straight to it.

1. In the Page Editor, Left Click your mouse on the page where you would like the anchor to be placed.
2. Click on the Insert/Edit Anchor on the toolbar.
3. In the Anchor Name box give your anchor a unique name.
4. Click the OK button and you will see that an anchor symbol will be added to your page.
5. Repeat these steps for as many anchors as you need on the page.

Figure 2.11 Create anchors for links to specifically jump to.

The anchor symbol will not appear on your live site. This has been included to give you a visual clue of where you have placed anchors on your page.

To edit this anchor at any point, Right Click your mouse over the anchor symbol and select the Anchor Properties option in the pop-up menu.

Figure 2.12 Link Anchors are shown by a yellow anchor on the page. Don't worry these will not show up on your live site.

Back to top

Click Here To Continue Reading Section Two Of The Guide >>