Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!

 

(Due Date: March 5)

Website Design (Part VII): Creating Navigation with Links and Hyperlinks

 

We have a great looking site. In saying that, we have multiple webpages that actually constitute a site. Though, getting around this site might prove difficult. Because, none of the pages actually go anywhere. In order for them to bounce back and for the between each other, they need some serious navigation. In order to accomplish that, we need “linkis” and “hyperlinks”.

  1. Open your template file
  2. Select the “Home” button
  3. On the properties box, choose “index.html” in the “link” box by clicking on the folder and navigating to it

This is just one way to link a file

There are actually two other methods. If you thought this was easy, check out the next method

Make sure your “File” panel is open

  1. Click on your “About Me” button
  2. Click on this target button and drag it to the “about_me.html” file in the File panel

Too easy! Finish making your links between your other buttons and the remaining pages.

When you are done, Save the file.

A window will pop like this:

This is exactly what we wanted to see. Dreamweaver is asking us if we want to update all the pages that use this template. Because we want the navigation to be consistent between pages, we definitely want to “Update” these pages. Again, if we make a change to this one template page, whatever that change is, it will change things for all pages.

Click “Close” on the next window. It’s just asking if we’re done doing what we’re doing. Which, we are.

Testing out the Site

  1. Open your “index.html” page (the home page)
  2. Click on File
  3. Click on Preview in Browser
  4. Select Internet Explorer

Internet Explorer throws up some random warning, just click “Okay”

Everything is perfect!

Well,…almost everything.

We have internal navigation but no external links (hyperlinks)

We need to add some of those in.

  1. Open your favorite_sites.html file
  2. Highlight a site name (example: on my page, I have a link for Adobe.com)
  3. On the Properties panel, click on “Link” and type in the web address: (example: http://www.adobe.com) *make sure to add the “http://www” portion, as this instructs webpages to look for external links instead of internal ones. 
     

  4. Do the same for the remaining links
  5. In order to do an email link (which should be on your “about me” page somewhere, add the prefix “mailto: “ to the address. (example: mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.)
     This will create an email link which will open your mail client instead of a web browser.