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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • 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
  • Create a new web page & name it contact-us.html
  • Insert the nav HTML tag using the Quick Tag Editor
  • Place your cursor on the page
  • Type the words home products shop support contact
  • Hit return/enter after each word
  • Make each word a hyperlink to the appropriate page using point-to-file
  • Your code should look like this:
    	<a href="index.html">home</a>
    	<a href="destinations.html">destinations</a>
    	<a href="specials.html">specials</a>
    	<a href="about.html">about </a>
    	<a href="contact.html">contact</a>
    	
  • We will be modifying how this nav bar looks, for now we will leave it as default hyperlink colors which are royal blue underlines if it is an unvisited link
  • You just created the navigation bar for our website

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
  • Create New Contact Us Page 0:11
    • Add Title
    • Add Header
    • Add Text Content
    • Bulleted List
  • Create Hyperlinks to Pages 3:17
    • Assigning Links
  • Summary 5:38

Transcription: Creating the Navigation Bar

We are now going to take a look at creating a little navigation bar, a small navigation bar, and working with a list in order to do that.0000

We are going to create a new Contact Us page for our website.0012

Now, I can do it through the Files panel by doing a right-click and choosing New File; but when I do it through the Files panel, it doesn't open the page for me.0017

What I want is to have that page opened; so I'm going to do a Ctrl or Command, N, to open a new page; and the title is going to be Contact Us at Wanderlust Travel.0028

There we go; and I'll put that same information on the page--so I'll copy that title and paste it onto the page.0047

I'll then make it a Header 1, using Ctrl or Command, 1; you could see how handy that shortcut is...every web page, you need to do this.0057

And I am going to do a Save As, and this is going to become contact-us; so it's our contact page.0067

Now, within our Contact page, what we want to do is add some text; and you can see that I don't exactly have any text for contact within this Text folder for you, so we need to make some up.0080

Now, there are many instances where there are situations (quite often, at least for me) where you don't get the text you want for your web page.0097

And it is somewhat hard to design it if you don't have that; but I'm going to ignore that issue for now, and I'm just going to say "Text goes here."0109

This is the old shortcut method for adding text to the page.0120

So, what we want is a little navigation bar up at the top of our page.0125

I'm going to move into this area; and what I want to do is create a bulleted list up at the top here that is ultimately going to be styled to become our navigation bar; and it is going to have a few different hyperlinks within it.0131

What we are going to do is type out the hyperlinks; and I'll say "Destinations," "Specials"...next we'll have "About Us" and "Contact Us."0150

And we should probably put a link to Home in here; and usually, Home is put first in the list; so I'll create an extra space up here and say "Home."0164

Now, what I want to do is put this list into a bulleted list.0177

I'll select it (notice, each one is in its own paragraph) and put it into a bulleted list; I click the little bullets down at the bottom in the Properties area.0183

Now, once I have those set up, what I want to do is create a hyperlink to our various pages within our navigation bar.0197

And I have a few of these pages created, but I don't quite have my homepage yet; so I am going to use the Files panel to right-click, say New File...and this is going to be my index page, which will become my homepage.0207

Index is what you want to always save as your homepage; servers understand, when there is no page actually, specifically named in the hyperlink, it will search for the index page automatically and find that as the homepage.0227

Every Web server that is out there understands this as a homepage.0246

That is why we are using this name; and notice, it is lowercase--if I had this uppercase, a lot of servers could not find it as the homepage.0251

So now, it is just a matter of building links: I'll double-click Home; I'll go out and point to Index.0262

I'll double-click Destinations and go out and point to Destinations...don't you love this Point to File feature?0271

I have so many people come through who didn't even notice it, and they say, "That was worth the class"; it's kind of funny.0279

OK, select About Us; I can't double-click, because it is two words; so I'll select that and go up to About Us; and Contact Us--I'll do the same.0289

We just built our little mini navigation bar.0302

Now, what we are ultimately going to do is take that bulleted list, and we are going to make our hyperlinks look very nice.0305

We are also going to make that bulleted list, using CSS, not a bulleted list any longer.0313

We are going to turn it into our navigation bar.0321

We'll do that at a later date; but we just created a little mini navigation bar.0326

It needs some styling at this point, but the HTML portion is all set for us.0332

That is how you can create, or start to create, a little mini navigation bar for your website pages, using Dreamweaver.0339