Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

1 

Tutorial – Creating Links Using Macromedia Dreamweaver and 

Uploading Your Webpage Steps for Corvallis Web Site Publishers 

Craig Clairmont – April 4 th , 2008 

Introduction: 

This tutorial is for those website publishers who have already set­up their web site on Macromedia Dreamweaver and are ready to create hyperlinks and upload their website files for public viewing. To set­up your website using Dreamweaver, refer to the tutorial: How to Map and Set­up your Teacher website (PDF) off of the Technology > How­To webpage. You may feel free to submit a tech ticket to have either Craig Clairmont or Deanna Flemmer help you set this up. 

CONTENTS

• Creating a Link to a Document Using Macromedia Dreamweaver – Page 2

• Creating a Link to Another Website Using Macromedia Dreamweaver – Page 7

• Creating a Link From Your Main Teacher Introduction Webpage to Your Links Webpage Using Macromedia Dreamweaver – Page 11

• Uploading Your Website Additions and Changes Using Macromedia Dreamweaver – Page 14

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

2 

Creating a Link to a Document Using Macromedia Dreamweaver 

First, open up Macromedia Dreamweaver using the following path. 

Start > All Programs > Macromedia > Macromedia Dreamweaver 8

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

3 

Your website should show up as follows with a website pane on the right­side allowing you to view all of the files and folders in your website. 

First, you need to open up the webpage on which you want to establish hyperlinks. In this case, I will select “teacher_links.asp” and double­click on it. 

The web page opens up and is ready for editing.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

4 

I am going to want to upload some notes for temperature conversions and will select (link 1) to edit.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

5 

I type in “Temperature Conversion Notes” and delete the rest below. I will now highlight what I want the hyperlink to be. I will select the entire line. 

I will now browse on the side pane to where I have saved these notes in the PDF format. 

Click on the tiny plus signs to open and expand the folders.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

6 

I will now need to link the highlighted text from my webpage to the PDF file in the pane on the right side. To do that, I use the target icon on the lower right side. 

Click on this icon and drag the line over to the PDF file onto the right­side. Once you are hovering over the PDF file, let go and the link should show up in the link address box. You have now created a link from your webpage to the PDF document. 

Go to File > Save and this will save your changes.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

7 

Creating a Link to Another Website Using Macromedia Dreamweaver 

First, you need to open up the webpage on which you want to establish hyperlinks. In this case, I will select “teacher_links.asp” and double­click on it. 

The web page opens up and is ready for editing. 

I am going to want to create a hyperlink for temperature conversions and will select (link 1) to edit.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

8 

I type in “Temperature Conversion Website” and delete the rest below. I will now highlight what I want the hyperlink to be. I will select the entire line.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

9 

Go to the Internet and select the website that you would like to add to your links page. In this case, I go to the NOAA website for Celsius and Fahrenheit conversions. At this website, I select the web address in the top center. I right­ click in this small window and select “Copy”.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

10 

I then return to Dreamweaver where I find the “teacher_links.asp” web page waiting. 

Right­click in the Link address bar and select “Paste”.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

11 

The website URL should now be in that window. Either select the “Enter” key or left­click the mouse somewhere on a blank spot on your webpage. It should now show up as a hyperlink under­lined and blue. 

Go to File > Save and this will save your changes. 

Creating a Link from Your Main Teacher Introduction Webpage to Your Links Webpage Using Macromedia Dreamweaver 

First, you need to open up the webpage on which you want to establish the hyperlink from your main page to your links page. In this case, I will select “index.asp” and double­click on it. 

The web page opens up and is ready for editing.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

12 

In the Webpage table cell to the right of the email link, there is a cell ready for a link to your links page.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

13 

In this case, I will type in “Notes and Assignments”. I will then highlight the text with the mouse. 

To the right, there is the file and folder pane. I locate the “teacher_links.asp” webpage. 

I will now need to link the highlighted text from my webpage to the “teacher_links.asp” file in the pane on the right side. To do that, I use the target icon on the lower right side.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

14 

Click on this icon and drag the line over to the “teacher_links.asp” webpage. Once you are hovering over the “teacher_links.asp” webpage, let go and the link should show up in the link address box. You have now created a link from your main webpage to the “teacher_links.asp” webpage. You can use these steps to link any web pages that you have created to each other. 

Go to File > Save and this will save your changes. 

Uploading Your Website Additions and Changes Using Macromedia Dreamweaver 

So far, these changes will not show up on your website that the public may access. This work is being saved on a back­up server. Only when you upload your pages, documents and files to the actual web server, do the changes show up on your website that the public can view.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

15 

To upload your changes, you will be using the file and folder pane on the right­ side in Dreamweaver and the little UP arrow at the top of this pane. 

Click once on and highlight any of the files that were added, edited or changed in anyway. These would be the PDF documents that were saved into this web folder of yours and any web pages that you added to or changed. 

In the example above, I have selected the temperature conversion notes for my French class. Once highlighted, I simply click on the little “up” arrow in the right­ hand pane and it instantly uploads this file to the webserver.

Tutorial – Creating Links Using Macromedia Dreamweaver and Uploading Your Webpage 

16 

I will do the same to the “index.asp” and “teacher_links.asp” web pages. 

You can tell a file uploaded by the message on the lower bar in the right­hand pane: “File Activity Complete”. 

Now go to your webpage on the Internet and verify these edits. Click on any links that you created and also the documents and notes that you added and linked. 

Congratulations and welcome to web publishing!