Using Absolute and Relative Path Links

What do you mean by Path?

When you link something on your page web studio makes the HTML for it called an anchor

< a href="url" > your text </a>

The a is short for "anchor". Your text doesn't have to just be text, it can be an image or some other element.

The url (uniform resource locator) is the address that contains the path

domain is your website like for example
path is where it is on the server at your website
filename is what it is looking for

Absolute Path

An absolute path uses the full URL of an object or page.
An example is an absolute path to the web studio site.
You use this when you send a visitor to another site or get content from another site.
You can use it within your own site, but there is rarely ever a need to do so.

Relative Paths

There is only one way make an absolute link path, and two ways for relative paths.
The most common is the document relative path, and second is the root relative path.

In web studio you select the object you want to put an absolute link on from the Insert Tab in Links select Other Link

Add the full url in the text box, and press okay to save.

We'll look at how web studio does that in a bit

When you send a visitor to another page or an object (like an image) on one of your pages you use a relative link. Which type of relative link you should use will depend on how the
site is made, document and root relative paths each have a place.

Which is the best, Absolute or Relative?

Both links take you to the same place, but there is a difference in the way they work.
 With a relative path, the browser knows to look on your server for the link. 
When you use the absolute path, the browser goes back out onto the Internet, looks your site all over again, then searches for the file within your site.
So, if you're linking to pages on your own site, using a relative path is faster.
Linking to something off your site, you must use the absolute path.

Document Relative

Document relative paths are the most used type of relative link by web studio, and for good reason. They can easily move up and down, in and out of your sites directories (folders).

Web Studio Directories (folders)
       When you name your pages, web studio makes a directory with the same name.
If your page name has a space then WS adds an underscore for that space.
My page for example would become My_page
The one difference is your home page, that directory is still named after the page
but the page itself (html document) is named index.html bowsers use that to open your site.

Images and other files inserted your Page
Web Studio places objects like images into that pages directory and in the case of
images it also resamples and renames the image.
So if you put an image on My_page using Insert Picture in Illustrations
The image get's renamed imag000.jpg and the number changes imag001 for example
then the document relative path would be My_page/image001.jpg
Excellent way to handle things used once on one page and web studio does all the work

Yeah, well who cares?

Well I had to explain that so we can now get into the good stuff.
Now we'll see what "protected graphics" does, and how to use it
and look at an interesting way to use "file links"

"Protected Graphics" and the _RefFiles Directory
When you insert images in Web Studio using "protected graphics" then the images aren't changed, they keep their name and they go into a special directory called _RefFiles.
So now you have a Document Relative path that can be used on all the pages on your site.
The benefit here is that once the image is used it goes into the browsers temp folder
and then uses that same image over and over again.
To use it all you do is copy the protected graphic and paste it on your other pages.
Or if it's in the same place like a top banner use the Master Page.
An Excellent way to use one image for the entire website and WS does all the work

Make you own Directory and put images in it using "file links" Other
There isn't much of a need to do this, but I thought I'd mention that it is possible.
One reason might be if you have a gallery program that you want to use
with web studio and it uses a directory called images that it get's pictures from.
You make a page and name it "images"
You can just put your images on that page with insert picture, then use the re-named
images as links img000.jpg, img001.jpg, img002.jpg etc.
But what if you want the pictures unchanged and use your own names?
Then you put any text (or number) on the page select it and from the
Insert Tab in Links select File Links - Other

If you have are using an added on effect
and you want to use an image that is
a protected graphic the Document Relative link
would be
<img src="_RefFiles/yourimage.jpg">

That will make a directory called images
and the pictures will have unchanged names 
the Document Relative link
would be
<img src="images/yourimage.jpg">

The gallery would typically have that link built into it.
You could put the other files used in the program in directories 
like that as well

Root Relative

Since Document Relative paths are the most used type of relative link by web studio, I bet your wondering why we would use a Root Relative link?
The root is the main directory, thats the folder where everything is and that is where your browser starts looking for all the directories and files.
So, if we have something that we want to use on every page or we want it to be found
really quickly, say a Next effect jQuery file... then we place it in the root.

An example using root relative
If you have used an add on effect, you know we put the links to larger jQuery files
in the HEAD of the page, those are loaded before the page so we want those links
located where they are easy to get to quickly.
Another example would be the favicon.ico file that get displayed in
the address bar of every browser.

How to put root relative files with web studio
We attach root relative files using "Website Properties"
a link to an image for example on the root would be direct
<img src="yourimage.jpg">

Another way we place Document Relative files
are by attaching files to the "HTML Object"

Web Studio Next

Every little bit helps to keep this site up and running, thank-you.


These effects are not officially part of Web Studio
If you have questions see the custom coding page