Dreamweaver - CS3

Lesson 14: Links (1)

14/58 Lessons 

What is a link?

When we have created a site in Dreamweaver, we will more than likely connect the pages together.

This is called a link.

But a link is a link to another site, an e-mail address, a downloadable document, a picture, movie or music on your page.

In other words, anything you can go to on the Internet is a link.

 

Relative paths vs Absolute paths

When we make a link to another site (ie server) or a document on another site, we use an absolute path.

When we make a link between pages, images or documents on our site (ie server), we use relative paths.

If you do not know what a server is, this is nothing more than a “heavy” PC that functions as storage space for your site and is always connected to a network, in our case the Internet.

Back to our different paths.

An absolute path contains the full URL of the linked document.
for example: http://www.google.com

So with http, colon, slash, slash and so on.

A relative path on contrast, for example, uses only

www.swotster.com/swotster/English/Access2007/index_en.html

It seems more complicated than it actually is. This will change from the next lesson.

 

 

New page / Add Folder

To create a link to another page on our site, we must first have a different page. That is quite logical.

The quickest way to create a new blank page or add a folder to your site, is to right click the root directory or a subdirectory and select “New File” or “New Folder” in the drop-down menu.

In order to access a page double-click it.

To change the name of a page or folder, double click on it.

The difference between double-click and double click, double click is tapping twice quickly in succession, double click is first select it and click again when it is selected.

 

Link to another page

Before you start to see the various files used in these lessons, download and define the site.

To add a link to text in your page in different ways:
Either way, first select the text in your document.

  1. One way is to click the “Point to File” button next to the box “Link”.
    In the “Select File”, navigate to the file you want to attach, select it and click the “OK” button.
  2. A second way is first selecting the text and then clicking the “Point to file” and dragging the file you want to link.
  3. And a third way is to type the file name plus the corresponding folders in the textbox.

If you choose the third way, then you must know the file structure of the various folders.

A word of explanation:

As you see in the picture above, the document opened is index.html, this is the document of the homepage. The homepage must always be in the root directory (usually public_html on the server) of your site and should always have the name index.html or index.htm.

In other words, whether you’re typing www.swotster.com or http://www.swotster.com/index.htm in your browser window, it is the same.

Each folder you create in your sitemap, therefore, must not have an index.htm page.

The advantage is that when you typed the web address into your browser window, you only need to enter the subdirectory, eg “www.ElectroGc.be / GSM”. This takes you automatically to the index page of this folder.

I had, for example, this page “overzicht.htm” in this folder instead of “index.htm” and then I had to type “www.ElectroGc.be / GSM / overzicht.htm” in the Browser Window.

Now back here to the notation of the file structure.
When you are in the index.html document and want to make a link to the document “TOMTOM_Go_920.html” which are both located in the GPS folder, use the relative path “TOMTOM_Go_920.html”.

However, if you wish to make the same link to the “TOMTOM_Go_920.htm” document in the folder “GPS”, but from the “index.html” page in the root, you use the path “GPS/TOMTOM_Go_920.html”

However, if you wish to link to a file in a parent directory, use .. /
For instance .. /index.html
If the file is lying in a folder two levels above, then type .. /.. /index.html

If you wish to link to index.html (in another subfolder eg LCD), you use the relative path “.. / LCD / index.html”. In this case, go to .. / up to the parent folder and LCD / LCD down to the subfolder.

Here is something aside, but not unimportant.
Use the “Point to file”, then you do not have to do anything, Dreamweaver will arrange all that for you.

 

Important!

When your use “Files” panel, to move files or rename or modify a file, Dreamweaver works all links automatically.

If you do this outside of Dreamweaver, then you must update manually.

 

Awesome!
You've completed Lesson 14
START NEXT LESSON