Adding Hyperlinks

In this lesson you will learn how to add hyperlinks and preview your files in a browser.

1. If your Site Window isn't open, navigate to Window > Site Files
   
   
   
   Though it's much easier to use the Function Key (F8)
   
   FATE (F8)
   (You might as well get used to it)
   
   Navigate to your local root folder (if necessary) and double-click on index.html
   
   
   
   
   
2. Your document can (and should) be wider than the one shown below
   
   
   
   
   
3. Type: Come on in! and highlight the text
   
   
   
   
   
4. Click on the Browse for File icon in the Property Inspector
   
   
   
   Note: In Dreamweaver, as in most other programs, there are numerous ways to insert hyperlinks, images, tables, etc. We will learn alternative methods for each of these tasks in future lessons.
   
   For now, the file you are browsing for is the only other HTML file you've created so far: about_this site.html
   
        (Remember, we're going to fix that name soon)
   
   
   
5. Warning: Dreamweaver defaults to the last folder used when browsing for a file—it may or may not be the folder you want so you'll have to pay attention to be able to point Dreamweaver to the correct folder
   
   Note: On my computer, the last folder used via the Select File dialog box was within Mac Lab's Root Folder (as shown in the image below)
   
   The default folder on your computer will be different
   
   Get used to navigating to the correct folder via these pull-down menus—in this case it would be your Root Folder, right?
   
   The following image is an example of encountering the wrong folder (something that will happen more often as your site grows more complex)
   
   
   
   
   
6. Navigate to your Root Folder and double-click on it
   
   
   
7. Find and select about_this site.html and your Select File dialog box should look like:
   
   
   
   
   
8. Double-click on the icon or click Open with the file highlighted and you page will look like:
   
   
   
   Whew! You just made that link (trust me, it gets much easier)
   
   Note: Do you see the asterisk (*) in the Title Bar of the document (above)?
   
        (An asterisk in the Title Bar indicates that there are unsaved changes within the document)
   
   
   
9. Save the document (Command-S) and the asterisk disappears
   
   
   
10. Close the document (Command-W)
    
    
    
11. From the Site Window, open about_this site.html
    
    
    
12. Type the information as shown below and highlight Home Page so we can make our second link
    
    
    
    
    
13. Click on the Browse for File icon in the Property Inspector
    
    
    
    
    
14. This time Dreamweaver takes you directly to the correct folder (the last one used)
    
    
    
15. Click on index.html
    
    
    
    
    
16. Click Open or press Return (better yet, simply double-click on the file in the previous step)
    
    
    
    
    
17. Your document will look like:
    
    
    
    
    
18. Click away from the text to see the link in all its unhighlighted glory
    
    
    
    
    
19. To see how your page looks (and works) in a browser you could...
    
    Navigate to File > Preview in Browser > Internet Explorer
    
    
    
    
         Or you could...
    
    Click on the Preview in Browser icon in the document toolbar and select Preview in Internet Explorer
    
    
    
    
         Or you could...
    
              But you won't (because there's a much easier way)
    
    You should have noticed that there is a Function Key associated with this step
    
    Since you'll be using this feature quite often, I suggest you begin to use F12 to preview in browser
    
    Here's how your page will look:
    
    
    
    
    
20. Notice the odd URL (highlighted in blue)
    
    
    
    
    Dreamweaver sometimes creates temporary files when you preview
    
    You may notice that they may appear in your Site Window
    
         This one would be titled: TMP64blyedwhc.htm (yours will be different)
    
    Feel free to ignore them
    
    They are temporary and will disappear when Dreamweaver is finished with them
    
    
    Bonus Hint: To preview directly from the Site Window, select the file (without opening it) and press F12
    
    
    
21. Move your cursor over Home Page and notice how the arrow changes
    
    (The finger indicates that the cursor is over an active hyperlink)
    
    
    
    
    
22. Click and you'll be transported to your index.html page
    
    
    
    
    
23. Here's a movie to show how it should work:
    
    
    CLICK ARROW TO PLAY MOVIE
    
    Notice how the link changes color
    
         Blue is the default hyperlink color
         Purple is the default visited hyperlink color
         More on that later
    

Congratulations! You now know how to add hyperlinks to your HTML files.

<< Back