Search the Manual:

3.9.2.3. Adding and Removing Links

When adding and removing hyperlinks using Bistro you will use the two chain link buttons on the editing toolbar (see image below).

A hyperlink allows you to link from one place, item or selection of text on your website to another location or file. When a visitor clicks on the linked text or item, they are taken to the "target" of the link. The target may be on the same web page, on a different page on same website, or on a different website altogether. Since you can also link to a document or a file, clicking on a hyperlink may also open a target document, or play (for example) an audio file

3.9.2.3.1. Adding a hyperlink

You can add a hyperlink to any text, image, or bookmark anywherre in your editing area. To do so

Once you have finished entering the desired information in all four tabs as described on the page which follows, click [Insert] at the bottom left of any of the 4 tabs to insert the link as you have defined it.

Using the tabs in this dialogue box, you can add a number of attributes and features to your link, and you can control the way the target page, site, or document you are linking to opens and behaves.

GENERAL TAB: Insert/edit Hyperlink

The first thing to do is enter or select your Link URL:

  1. Type your link URL into the text field to the right of the first box on this tab called Link URL:. For external links, include the correct prefix (eg. http://).
  2. To link to a document or file that has already been uploaded to your site (or one that you want to upload and link to), click on the small browse icon to the right of the Link URL: text field and the file manager will open.

  • To link to one of the files listed in the file manager, select it by clicking in the checkbox to the left of the file name.
  • To upload a new file, click on Upload at the top of the dialogue box and the upload file dialogue box will open allowing you to type in a filename or to browse your computer to find a file.
  • Once you have entered or located your file, click [Upload].
  • When your file has finished uploading, close the upload file dialogue box, select your uploaded file from the list (as above) then click the Insert link on the bottom left of the file manager dialogue box (below the preview box).
  • You will be returned to the General tab where you can continue to format your link.

If you have defined any Anchors: (also known as bookmarks) in your page, they will appear in the drop down list beside the second item on the General tab. To link to an anchor, just select it from the drop down list.
Note: instructions for adding anchors to your page are included in Using the WYSIWYG Editing Toolbar: Advanced Mode.

 

 

3. The next thing to do is define your Target: This applies when you are linking to a URL, file, or document (but not anchors).

You have four Target: options in this drop down list to select from; they are

 

4. The next option available on the General tab is Title: Although selecting a title is optional, what you type into this field will be read aloud for anyone using an audio browser, and will appear as mouseover text on the link for most regular browsers. Link titles are also used by search engines in their page ranking process.

5. The final option on the General tab of the Insert/Edit Link dialogue box is Class: If your web designer has defined CSS classes for your links, they will appear in the dropdown menu and can be selected. These classes define the way links appears on your website page (eg. what colour, underlined or not, etc.).

POPUP TAB - Insert/edit Hyperlink

You may choose to have your link open a popup window. Typically a popup window opens a new window on top of (or in front of) the original window. Most often the popup window is smaller than the original window, and leaves a portion of the original window visible behind the popup. Popups are often used as help windows, advertisements, or for special announcements.

When you click on the Popup tab in the Insert/Edit link dialogue box, you will switch to that tab.

  1. If you want your link to open a popup, first select Javascript popup directly under the heading popup properties at the top of the tab by checking the checkbox. This will activate Javascript for your popup and allow you to define the rest of the attributes available on this tab.
  2. Next, you will enter or select your Popup URL: Follow the same process described under the General tab for your Link URL:
  3. The next option you have is to name your popup window. Naming your popup window is optional. What you type into this field will be read aloud for anyone using an audio browser, and will appear as mouseover text on the link for most regular browsers.
  4. The Size: option allows you to define how big you want your popup window to be on the screen. Just enter the dimensions (width x height) in pixels into the text boxes.
  5. With the Position: setting, you can also determine where on the screen your popup window will appear. For this option, enter the distance (in pixels) you would like the popup window to be offset from the top left corner of the browser window.
  • Your first entry will indicate how far from the left edge of the browser window (X axis) you want your popup to appear.
  • Your second entry will indicate how far from the top edge of the browser window (Y axis) you want your popup to appear.
  • You can also enter the letter c in each of the two text boxes to centre your popup window

6. In the Options area of the Popup tab, you can define how your popup window will appear on the screen by checking the options you wish to use. Note: if you include all of the "show" options below, your popup will appear like a typical browser window. If you leave all of the "show" options unselected, your popup window will look more like a typical popup advertisement.

  • Select show location bar if you want your popup window to include the URL address bar.
  • Select show menu bar if you want your popup window to include standard browser (text) menu bars.
  • Select show toolbars if you want your popup window to include standard browser (graphical) toolbars.
  • Select show status bar if you want your popup window to include standard browser status bars (typically at bottom).
  • Select show scrollbars if you want your popup window to include standard browser scrollbars (typically at right and bottom).
  • Select make window resizable if your want site visitors to be able to change the size of your popup window.
  • Select dependant (works in Mozilla/Firefox browsers only) if you would like your popup window to be a dependant of the original window where the link was clicked - otherwise it will remain open if the "parent' window is closed.
  • In most cased it makes sense to select insert false return. This is a Javascript option that turns off a default action when a popup exists. (eg. if you put a URL in the general tab as well as entering a URL in the popup tab, selecting this option turns off the General tab URL so that only the popup window opens when the link is clicked).

 

EVENTS TAB - Insert/edit Hyperlink (PROGRAMMING SKILLS REQUIRED)

When using a popup window, the editor also gives you the ability to make your link behave in various ways by using the listed Javascript event handlers. To use this area of the Insert/Edit Link dialogue box, you must have knowledge of Javascript; otherwise leave all options in the Events tab blank.

If you are familiar with Javascript and wish to add event handlers to your popup window, simply enter the appropriate Javascript code into the text field to the right of those events or actions you want to trigger the entered code.

 

ADVANCED TAB - Insert/edit Hyperlink (PROGRAMMING SKILLS REQUIRED)

When using a popup window, the editor also gives you the ability to add pre-defined HTML and CSS properties to your link. The options listed in the Advanced tab fall into this category. To use this area of the Insert/Edit Link dialogue box, you must have knowledge of HTML and CSS, and some web design expertise; otherwise leave all options in the Advanced tab blank.

Once you have finished entering the desired information in all tabs, click [Insert] at the bottom left of any of the 4 tabs in the Insert/edit Link area to insert the link as you have defined it.

 

3.9.2.3.2. Removing a hyperlink

To remove a hyperlink previously added, simply highlight the linked text or object, and then click on the broken chain link button (the one on the right in the image below) and the link will be removed.

 

3.9.2.3.3 Adding an Anchor

To assist navigation on your site, you may choose to place anchors (also known as bookmarks) on your page. For example, if you have a long page of text, you may wish to place an anchor at the top of the page, and a link in the middle and at the bottom of the page that allows you to "return to top" which link to the anchor at the top of the page and allows a visitor to quickly return to the top of the page by clicking the link rather than having to scroll up the page.

To insert an anchor

 

  1. Place you cursor where you want the anchor to be on your page and the Insert/Edit anchor dialogue box will open.
  2. Enter a name for your anchor (eg. "top of page").
  3. Click [Insert]
  4. You will be returned to the editing screen where the anchor has been added to your page.

The anchor will appear on your page as a small icon


To link to your anchor from somewhere else on your page, follow the instructions provided above for Adding a Link.

 

3.9.2.3.4 Removing an Anchor

To remove a link to an anchor, follor the instructions provided above for Removing a Link.

To remove the anchor itself,

  1. Select the icon of the anchor you wish to delete from your page
  2. Click [delete] on your keyboard and the anchor will be removed.

Note: if you remove an anchor which is linked to from elsewhere on your page or your site, remember to remove the hyperlink as well. Broken links on your site can adversely affect search engine ranking.