In this lecture, our instructor, Candyce Mairs, shows how to create a quick navigation bar. She demonstrates how to create a contact us page by adding titles, headers, text content, and bulleted lists. She also shows how to create and assign hyperlinks to pages.
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.
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
Educator.com recommends Adobe Dreamweaver CS6 for use with the Educator Dreamweaver course. Adobe Dreamweaver CS6 software enables you to make cutting-edge web designs and mobile apps while generating HTML5 and CSS3 code. Use the fluid grid layout system and HTML editor to design projects for smartphones, tablets, and desktop screens. Support for CSS3, jQuery Mobile, and Adobe PhoneGap Build frameworks streamlines the mobile app development process. Check your designs with Live View and Multiscreen Preview. Add rich typography and CSS3 transitions to create compelling projects.
Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.