Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating the Navigation Bar

  • We are going to create a navigation bar for our website
  • We will create this using the new HTML5 tag for nav
  • Create a new page called navbar.html
  • We first need to add the HTML structure by choosing Insert->Structure->Navigation
  • You will see the dotted line on the page that tells you that you have added a nav tag
  • We are going to add our navigation bar in this area by typing:
    • home destinations specials about us contact us
    • Make these words hyperlinks to the appropriate files using point-to-file
    • Add a new page called index.html to use as the link for the home page
    • Place each of these in a paragraph tag by hitting enter/return
    • Create an unordered list of these links
    • Add a hyperlink for each page to the correct page within the Files panel
  • Look at the code created, it should look like this:
  • 	 <ul>
    	 <li> <a href="index.html">home</a></li>
    	 <li><a href="destinations.html">destinations</a></li>
    	 <li><a href="specials.html">specials</a></li>
    	 <li><a href="about-us.html">about </a></li>
    	 <li><a href="contact-us.html">contact</a></li>
    	 </ul>
    	
  • We will be modifying how this nav bar looks, for now we will leave it as default hyperlink colors which are royal blue and underlined if it is an unvisited link, and purple with an underline if it has been visited within that browser

Creating the Navigation Bar

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Insert Menu 1:23
    • Structure
    • Navigation
  • Building Navigation Bar 2:56
    • Creating List
    • Linking Pages
    • Deleting Linked File