Note: Now we have created some pages let’s link them together.
Open the index.html page
At the top of the page type out your menu buttons on separate lines e.g. HOME, CAMPER HIRE, CONTACT US.
Highlight the text & choose unordered list from the properties panel.
Highlight the first word home.
Insert > Hyperlink
Link: index.html page. Note: if you haven’t created your pages to link to yet you should use the # character. This works as a ‘dummy link’.
Use the title to describe where your link is going. E.g. Camper van hire.
Ok
Repeat this for all your pages.
File > Preview in Browser > Chrome
Test the links Note: that the link, once clicked does not work any more. Don’t worry, we’ll fix that in a moment.
In Dreamweaver select all the navigation hyperlinks and copy them.
Open each of your other 2 pages and paste the new navigation.
File > Save All
File > Preview in Browser > Chrome Note: All the navigation should be working now
Comments
Video transcript
Hi, Welcome,
My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop.
The topic we are covering today is: How to create navigation in Dreamweaver
In a Previous tutorial we made three pages, an index page, an about us page and a contact us page. So lets open the index page, So just above the H1 we will put a return in, so that we have the cursor flashing here and I am going to create a link. I don’t want it to be a heading one, so I want it to be just a regular paragraph and im going to create the 3 pages, Index, about us and contact us.
Select all three of these and create an unordered list, that’s going to help us later on when we do drop down menus as part of this tutorial, but for the moment you don’t have to have the bullet points if you don’t want them. So we have our 3 pages , now what we need to do is link them to the other pages,
Highlight the text home page, Then select insert and in this menu click on hyperlink. The hyperlink window then opens up.
Text = Home
Link = Select browse > in the next window select index page
Now when the home button is clicked it will take you to the index page.
Target = Two options _blank and _self.
Self will load the next page on top of the original
Blank will open the next page on a new page, tab or window depending on the browser. So in terms of internal navigation for our website, _self is perfect
Select target = _self
Title is really important, this explains to Google and to different reading aides for people with disabilities where they are likely to go when this button is clicked. And in this case it is going to be the Vintage camper home page
Click OK
You’ll notice it goes a lovely blue colour with an underline, We have to leave that for the moment until we get into CSS in a later tutorial. We are going to repeat the process for about us and contact us, We will do it together or other wise you can fast forward.
Insert > Hyperlink
Its going to our About us page
Now the target is going to be _self
Interesting note, If I leave that blank it will default to _self
The title for this one is the Vintage About us page
The naming in this one, you can have spaces if you follow my example, actual physical names for physical pages need to have no spaces, things like titles or alt tags that we do for our images are allowed to have spaces and crazy characters.
Click OK
Do the last one Contact Us.
Insert > Hyperlink
Youll notice im using this long method, I like it because when your new it gives you the boundaries for what you can and cant click, when you get a bit more professional and using the program a little bit more, Can you see down the bottom in our properties panel it has essentially the same thing, so there’s link and browse. So we can go to our contact us page down here in Title which we saw before. Its very important, This is the Vintage Camper contact us page and there’s the target , go to _self.
So the exact same parts are there as they are in “insert hyperlink” i.e link , target , Title..
We are going to preview these links now and they are not going to work just yet, there’s one last little trick we need to do
Go to file > Preview in Browser > Google Chrome
And the Page loads
Click on home page and it does nothing because its linking back to itself, The about us page is going to jump to the about us page
We are now on the about us page but the links have disappeared… Why? You guessed it … its because we’ve only actually typed those links on the home page… we need to copy and paste those links onto all three pages
Ok so lets go back one , make sure the contact us link is working
Go back into Dreamweaver
Select all three titles again and go to Edit > Copy
Go About us Page
File > open
Paste three titles into about us page..
Repeat paste on Contact us page
This can be where people get into a little bit of trouble, what’s happening here is you’ve been adding them to these pages but not saving them.. you can tell something’s not saved by the little asterix at the top If there a little asterix there it means you haven’t saved it.
You can see the home page has saved but the about us and contact pages haven’t.
Go to home page and preview, its going to have the exact same problem because we haven’t saved these pages yet they haven’t been updated. So that’s generally what happens in the classes
So one little trick is when you are saving, go to save all…file > save all
That means it saves any page that is open
Now if we preview it File > Preview in browser > Google Chrome
Now click Home, goes nowhere
Click About us and it goes to the About us page.
And repeat for contact us page
Its not much but it’s a bit of a milestone.
In the next tutorial we will look at uploading this website up onto your webserver.
