Page Editor icon
Virtual Mechanics Home
Single page project
< tutorials home
Advanced Links

The Links introduction covers some basic aspects of links. This page covers some aspects that go a little beyond the basics -- but not too far!

We've already looked at:
Here, we'll look at:

Quick Editor showing link types
Blank links
A blank link type allows you to:
  • link to a page in another project, not necessarily the current one
  • link to some other file, perhaps an image
  • link to a bookmark, not necessarily on the current page
  • link to some Javascript code that you want to activate when you click (advanced topic not covered in these tutorials).
Use this link type when you will be uploading the files to your site by some other means -- e.g. publishing another project, or using a separate FTP program. This program will not upload any files you refer to in blank link types. If you would like this program to do the upload, either:
If you are trying to make a page link, and you don't see a page listed in the drop-down page list, it means that page is not part of your current project. If you have only one page in the current project, there will be only one file in the list -- the current one. It will hardly be a list at all. If this is a mistake, and your project should have the other pages, you can join them in with File > Append Project...
Partial page list
Partial page list of this project
Single page project
Even with a single-page project, you can still link to a page in another project, but this time you need to use a blank link type.

Suppose the index page is part of another project. In this case, you can't use a page link, because the page would not appear in the page list (the page list shows only pages in the current project). Here are the same objects that we used for a page link but this time with a blank link type:
Link type: leave blank
Link URL : index.html
This time you do have to type in the Link URL field, and you must also include the file extension -- in this case .html
Blank link to html file
Link to Home page
Home
The end result of a link like this is the same as a page link -- except a little more work with more possibility for error.



Relative paths to files
If you are linking to other files on your site, in different folders, you can extend this idea: To go to a file in a lower level folder, use a Link URL like this: lowerFolder/index.html.
More in Relative URLs.



Blank links to image files

You can link to any kind of file using a blank link type. Here it is applied to an image from the ClipArt folder. Two things to notice:
  • The link is marked "Open in a new window". This means it will open in a new window on top of the current window. Normally you should avoid opening things in a new window, as it will confuse your visitor -- and their browser back button won't work. Maybe it is OK if you warn them first!
  • The link includes a relative path to the image folder. Normally images live in the image folder on your site.

Quick Editor link: blank
Girl -- opens in new window
Click for larger image (18K) in a new window
This program does not change the link in any way when it publishes, and as mentioned before, does not upload any files involved. The link says that the image is in the /image  folder. Therefore to use a link like this, you need to copy the image, "girl.jpg" from the ClipArt folder to these two places:
  • the /image folder in your publish folder
  • an equivalent /image folder in your preview folder. More on this next.

Trickery with the preview folder
Blank link types pose a problem when you preview. The browser expects to find the file (often an image) in a folder in the preview folder. A common trick is to duplicate your image folder in your preview folder, and put any special images you want there. You could use this arrangement for any folders that are at different levels of your site. This allows you to preview your project using the folder structure you will finally use on your site.

To put something in your preview folder, you first have to find out where the preview folder lives!

Under Options > Preview Options, click View files:
Preview folder location
Then you will be able to create an image folder inside your preview folder, alongside the existing geometry folder. Copy any images to that.

As the preview folder is a temporary folder, it is subject to deletion during cleanup operations. For this reason, only put files there that you can afford to lose.
File links

The file link type has the same end result as the blank link type  Both are a link to another file on your site. This might be a link to a page made with some other tool like a photo album builder, or a link to an image or file like a .pdf file. Don't use File links for HTML pages built with a VM product. You are safer using a normal and, if necessary, separate publish for those other pages. In that case, use either a Page Link type or Blank link type instead.

The advantage of using a file link over a blank link is that you don't need to mess around with the preview folder contents in order to preview properly. The source file can be anywhere on your disk, and this program will find and use it. Also if you publish with the gather option, this program will gather the file and upload it to your site. Much easier.

Where does the program gather to?  A file is an "External File" -- see Publisher Sub Folders. The default is for the file to be placed in the root folder of your publish directory -- however, you can change that with the "External Files" setting.

You can type in the disk location for a file in the URL field of the Quick Editor > Links Tab, but the file path can be long and the possibility for error is high. For this reason, always use the Find File button to browse for and select the file.

Below is an image with a file link, and the Quick Editor Link tab settings to achieve that.
Quick Editor Liink: file
Girl -- opens in new window
Click for larger image (18K) in a new window
Links in the Object Editor

There is a Link tab in the Object Editor which does many of the same things as the one in the Quick Editor. But it has these two additions:

Enable link when published: Normally you want links to be enabled. However there may be occasions where you don't want this. For example, while you are developing a site, you may want to put future links in place, but don't want to activate them just yet.

The default operation is for the link to be disabled -- the reverse of links made in the Quick Editor.

Enable page links in work window:  Sometimes, as on the index page of these tutorials, you may want to click on a link and open that page as your workpage. This avoids the need to navigate by going through the drop-down page list.

This is a double-edged sword. This is a link to the index page which works, but try to edit it in workpage view! You can't select it with a normal left mouse click -- you have to right click and then select an edit option from the popup menu.
Object Editor icon
Link to index file
Page Editor Links tab

The Page Editor links tab has three sections, two of which relate to links:
Page Editor Links, Fonts tab
Link Colors
Define the link colors for either a single page or for your whole project with the Page Editor > Links, Fonts tab. Available link colors are:
  • Unvisited -- the color of a link to a page that is not in the browser cache
  • Visited --  the color of a link to a page that is in the browser cache
  • Selected -- the color of a link to a page open in another browser window
  • Hover  -- the color of the link while the mouse is over it (hovering).
You can also turn hover off (no color change on hover) and select whether links are to be underlined.

By default, all links are underlined. However, you can set links to not be underlined on a particular page. Whichever option you choose, you can override the link underline and color properties of an individual text link in the Text Editor.



Redirect to New Location
Redirect a page to a new page immediately or after a certain time. Use this when your page, or indeed whole site has moved and you want your visitor to go to another location. And never come back to the redirection page again.

This caters for visitors or search engines who have bookmarked your pages in the past.

Don't use this function thinking that it creates normal links. It doesn't.

If you would like your page to automatically link to another page after a period of time without your visitor having to click a link:
  • check the Redirect to New Location check box
  • enter a link
  • enter the amount of time before the page changes.

Try redirection below. You will go to a redirection page, which will in turn, after 20 seconds, return you to the top of this page. Go to the Redirection demonstration.
Managing your links
There is a link manager available on the Manager button in each of the Link Editors.
This allows you to delete and edit old or invalid links. You can Import and Export links for sharing with other applications. The format used is that used by Netscape and Internet Explorer for their favorites lists.
See also
Introduction to Links
Online Help: Page Editor Links Tab
Spun with SiteSpinner
TM & © 1998 - 2006, Virtual Mechanics, all rights reserved.