WebBuild Express Tutorial

Documentation

Building A Page

Adding Links

You can add links (hyperlinks) to any text or image anywhere on a WebBuild Express page. Hyperlinks are objects that, when clicked, enable the viewer of your page to go directly to another location. The location referenced by the hyperlink can be on your site or anywhere else on the World Wide Web.

Here is an example of a hyperlink: Click here to
see today's front page of the New York Times.

Hyperlinks can be images as well. Click on the globe
at the right to see today's headlines from CNN:

To add a link, first select the text or image that you wish
to use as the hyperlink. In the first example above, we would highlight the word "here" in a string of text in a cell:

Go to the Web for Updated Help Topics

Table of Contents

Index of Help Topics

Next Topic

Previous Topic

Now right-click on the selected text and left-click on "Links Anchors" on the dropdown menu or left-click on "Edit" and then "Links Anchors" on the menu. On the subsequent menu, left-click on "Create". You will see the following screen:

At the upper left of the "Links and Anchors" screen you can choose one
of five types of Links/Anchors:

1. External Link - A link to a site outside the current WebBuild
       Express application

2. Internal Link - A link within the current WebBuild Express
       application

3. Email To - A hyperlink that enables the user to send an e-mail
       message to a designated addressee

4. WebBuild E-Commerce- A link to the WebBuild E-Commerce
       system.

5. Page Anchor - Marks a location on a page that can be accessed
       by a hyperlink; when the user clicks on the hyperlink, he/she goes
       to the "anchor" location on the page.

External Links

In our example, let's link to the main page of the New York Times Web site, which is an External Link. So you can accept the default setting, which is to check the "External Link" button on the "Links and Anchors" screen. In the field to the right, you should erase the example link and insert the correct Web address of the desired site: "http://www.nytimes.com". Then click on the "Save Changes" button.

The link has now been created. While you are within WebBuild Express, the link will appear with a hatched grey background to highlight that this area of text contains a hyperlink:

As a general rule, it's a good idea to format the text of the hyperlink so that it is obvious to viewers of your Web page that the text contains a link. A convention that is often used is to underline the text of the hyperlink and make it a color other than the text that surrounds it. In the above example, the link is shown in blue and underlined, which is the default when you first use WebBuild Express. (You can change the default setting; see "Application and Program Settings").

Internal Links

Internal Links can make it easy to move around within a WebBuild Express application by enabling the designer easily to trarget the location within the WebBuild site that the link will point to. Let's use as an example the link in the paragraph above, "Application and Program Settings".

First, highlight the text that will be used as the hyperlink:

Then you should invoke the "Links and Anchors" screen by right-clicking on the selected text, clicking on "Links Anchors", and then clicking on "Create". When the "Links and Anchors" screen appears, click on "Internal Link". The screen now appears as shown below:

When you click on "Internal Link", the middle portion of the screen displays a list of pages in your current application. You can select any page that has been created in the application by clicking its name in the list, or you can type in the name of a page that does not yet exist in the bar at the top.

The right hand pane will then display a list of any "anchors" that have been created on the page you have selected. You can select an anchor location in addition to a page, but the use of anchors is optional. (Remember that "anchors" are locations on the page that can be accessed by a hyperlink).

In this example let's select the page for Application and Program Settings, which is at the top of the list. Click on it, and then click on "Save Changes".

The hyperlink is now created.

Email To Links

You can create hyperlinks that enable the visitor to your Web page easily to send an email to a specified recipient. Here is an example:

Contact us if you experience difficulties in using this Tutorial.

"Contact us" is a hyperlink that, when clicked, will launch the user's email program and open a new email message with a predetermined email address. In this case let's set the Email link so that the email will be addressed to TechSupport@WebBuild.net.

To begin, highlight the text that will form the hyperlink:

Invoke the "Links and Anchors" screen by right-clicking on the selected text and choosing "Links Anchors" and then "Create". On the screen, choose "Email To". The screen will now appear as shown below:

In the field in the center of the window near the top, replace the example Email address with the one you wish to receive the email generated by the hyperlink. In our case, we enter "TechSupport@WebBuild.net" and then click on the "Save Changes" button.

The link will now appear as shown below.

When a user clicks on the "Contact us" hyperlink, the email program on his or her PC is automatically launched and a new email message is created. On a machine with Microsoft Outlook as the email program the user would see something similar to the following:

By clicking on the hyperlink, the user now has a blank email message that is preaddressed to the intended recipient. The user can quickly type in his/her message in the body of the email and send it.

Note that Email To links will only work if the visitor to your Web site has an email program that is correctly configured for use with his/her Web browser. Although this is probably true these days for a large majority of people using the Worldwide Web, there will be some users -- for example users on terminals shared by many people, like in public libraries -- who cannot benefit from this feature. For this reason, many Web sites use an HTML form that users can enter their message into, rather than rely on the Email To hyperlink technology.

WebBuild E-Commerce Links

WebBuild Express enables users to create Web sites that can accept orders for goods and services. These E-Commerce capabilities are described more fully in the E-Commerce topic later in this Tutorial.

Page Anchors

Anchors are locations on a page that can be referenced by hyperlinks, either on the same page or on an external page. An example is shown near the top of this page, where we first introduce the different kinds of Links and Anchors available in WebBuild Express. If you click, for example on the "Page Anchor" hyperlink in that area, you will automatically come to the part of the page where Page Anchors are described more fully, this section, in fact.

To create a page anchor, highlight the text where you want the anchor to be located. Right-click on the selected text and choose "Links Anchors/Create". On the "Links and Anchors" screen, left click on "Page Anchor". The screen will now appear as shown below:

Simply enter a name in the field in the middle of the screen to identify the anchor. (Anchor names should consist of alphabetic and numeric characters without any spaces or punctuation). After entering the name, click on the "Save Changes" button.

To create a hyperlink to a Page Anchor, create an Internal link. When you choose the page for the Internal Link, all Anchors on the page will show on a list to the right of the window:

Click on the "Goto the anchor on this page" button and then select the anchor you want the hyperlink to reference.

Using Images for Links

As shown above, you can use an image as your hyperlink. To do so:

1. Add the image to a cell.

2. Select the image by clicking on it (remember that a selected image
will have the colors reversed).

3. Add the link exactly as you would for a text link.

The example below shows how you can create a link like the one at the start of this topic, where a user clicking on the revolving globe goes to the CNN.com site.

First, add the image to a cell as you would any other image:

Second, select the image by left-clicking on it. The thick red border will appear, indicating that it has been selected.

Now right-click on the selected image and choose "Links Anchors" and then "Create" (or access it from the Menu by clicking on "Edit/Links Anchors/Create"). The Links and Anchors screen will appear slightly different than in the previous examples, because you are adding a link to an image, not text:

You can set the image as any of the WebBuild Express link types: External Link, Internal Link, Email To, WebBuild E-Commerce, or Page Anchor.

Once you have completed the Links and Anchors screen, the link will work exactly as a text link would.

The next topic will discuss ways to "dress up" your text and image links so that the user will see interesting effects when the cursor moves over them.