Dreamweaver

 

Creating links
  Whether you are a web genius or novice, the creation of links within your website is an important and valuable skill to learn. This tutorial uses the versatile web authoring software Macromedia Dreamweaver to both text and picture links within a website, and shows you how to set up your files so all your files can be uploaded without difficulty.

Part 1: defining your site
Before we can begin linking pages within our site we need to set-up a basic website which we must define and organise so it can be easily uploaded by people wanting to view it. If you have problems viewing your website in a browser, it usually means it hasn't been set-up or defined properly. For those who are comfortable with Dreamweaver this should be relatively easy, but for those new to this package, this is a critical part of the tutorial, so take it slow.

Click on 'Define site' in the top toolbar Name your site in the 'Site Destination' menu that will appear

All the files we create need to be stored in a single place. This is called the Local Route Folder, and with most of web authoring packages you need to group all the elements of your website into this folder, so when you upload it to a web server it is in place and accessible.

Select folder icon on right of the 'Local Route Folder' option Go to your desktop and create a new folder Name it after your website Double-click to open the new folder Click 'Select' and then 'Define'

Remember to open the folder before defining, or it won't work. Always remember to name your new files, so you can find them later. The information regarding your Local Route Folder should be stored in the option bar. Click 'OK' and close the window. The software will ask if you wish to make a cache file for the website on your hard disk. This is a portion of memory set aside for all your website files for easy access. Click on 'Create' and then 'Done' in the 'Define site' window. Now we need to create the first page of our site.

Right-mouse click on the right half of the window Select 'New File' Change 'untitled.htm' to 'index.htm'

Calling your front page of your website 'index.htm' is common practice within web authoring software. Remember to name all files in lower case letters. This ensures that all your files can be opened when they are uploaded to the web server because some browsers have trouble reading upper case letters due to font clashes. Now we have to define the page we have just created. Although we've named our front page 'index.htm' the software doesn't know that it is the home page.

Select 'Define Sites' in top toolbar Click on 'Edit' which opens the 'Site Definitions' window Select 'Site Map Layout' in the 'Category' list Click on the folder icon in 'Home Page' box Select 'index.htm' in the 'Choose Home Page' window Click 'Open' then 'OK' then 'Done'

Topper's tip: All file names should be lower case

Part 2: linking pages
So now we've defined the site, and told the software that our 'Index' page is going to be the Home page, we're now going to create some more pages that we can link to. This part of the tutorial will also show you how to put pictures and text on pages, and how to use them as hyperlinks. To start, we need to look at the 'Site Map Layout' by clicking on the 'Site Navigation' button in the top toolbar. Click on the button and a schematic will appear with our 'index.htm' file at the top. Next to it is a mini-compass icon which is a tool we shall use to link our pages later. Firstly we need to create additional pages to link to our home page.

Right-mouse click on the right-hand window Select 'New file' Name it 'movie.htm' Open another 'New file' and name it 'pictures.htm'

To remind us what these pages will contain we are going to put some text on them. Obviously, this is where you will put the text, images or movies that will be included in your website.

Double-click on the 'index.htm' page Click on 'Draw a Layer' in 'Object palette' Drag and open a layer Type in words 'INDEX' Change font and size if necessary Select 'Save' in 'File' menu Repeat process with 'movie.htm' and 'pictures.htm' Replacing the text 'INDEX' with 'MOVIES' and 'PICTURES' respectively Select 'Save' in 'File' menu

To create the links between these new pages and the 'index.htm' home page, we need to use the mini-compass function in the 'Site Map Layout'.

Click on 'index.htm' in 'Site Map Layout' Click and hold compass icon Drag and drop onto 'movies.htm' in right-hand window Repeat click and hold, then drag and drop onto 'pictures.htm'

To see if your links work, double-click on 'index.htm. Your page will appear with two 'Text Hyperlinks' in the corner, one for 'movies' and one for 'pictures'. Click on them to see if they link. We now need to install a reciprocal link, because its no-use going to a page if you can't get back.

Click and hold compass icon for 'movie.htm' Drag and drop onto 'index.htm' Repeat the process to link 'pictures.htm' with 'index.htm' Repeat again to link 'movie.htm' to 'pictures.htm' and vice versa Select 'Save' in 'File' menu

Now we need to check how the website appears in a browser. It might be helpful to do this regularly when creating a website, as problems may occur with links after you have done a great deal of work.

Double-click on 'index.htm' Select 'Preview in Browser' from the 'File' menu Click through the hyperlinks and check that all pages link to each other

Topper's tip: Select an object and link destination

Part 3: picture links
So far in this tutorial, we have created web pages and linked them via text hyperlinks. However, text hyperlinks can look a bit boring, so this part of the tutorial shows you how to create links through images to make your website look that little bit more professional. Firstly, we need to open our Pictures page, 'pictures.htm'.

Double-click on 'pictures.htm' Click on 'Draw a Layer' option in 'Object palette' Drag and draw a layer on the page Click inside the layer Select 'Insert Image' in 'Object palette' Select a picture from desktop. This will be your button link

The software may ask you if you wish to make a copy of this image in your 'Local Route Folder', this is so all your elements are stored in the same single file. Click 'OK' and save file. To preview the image on the page, click on 'pictures.htm' and select 'Preview in browser' from the 'File' menu. We now want to make the picture link to the other pages instead of the text hyperlink. To do this you will need the 'Site Map' window and the 'pictures.htm' page open.

Close web browser Minimise 'Site Map Layout' Click on 'pictures.htm' Select 'Site Map' in 'Windows' menu Click on picture on 'pictures.htm' Picture 'Property' toolbar should appear Click and hold on mini-compass 'Link' in the 'Property' toolbar Drag and drop onto the 'movies.htm' icon on the 'Site Map' Select 'Save' from 'File' menu Select 'Preview in Browser' from 'File' menu

The picture itself has now become the hyperlink to the 'movies' page. We now have no need for the 'text hyperlink' to that page, so to remove it close the web browser, and highlight the text 'movies' and delete it. Check the 'Site Map' and you will see that the link still exists between the two pages, and this time it's through the picture.

Topper's tip: Use the mini-compass to link pages and images