Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. Um, if you're looking for the class files to follow along  for this course, um, they are in the notes  below the YouTube channel  or you can find them on our website. Alright, so, um,  what we're gonna be looking at in this tutorial is setting  up a basic navigation. So linking pages together, um, so  that people can jump from one page  to the other in a previous tutorial. Um, the one just proceeding.

This one we made three pages, uh, an index page,  an about us page, and a contact us page. So let's have the index page open. And just in, uh, above the H one,  I'm gonna put a return in just  so I can have my cursor flashing here. Um, and I'm going to, um, create a link. Now, I don't want it to be a heading one. Okay?

So I want it to be just a regular old paragraph  and I'm gonna create a three um, pages. So there's gonna be home page, we'll put a return in,  we're gonna have our about us page,  and then contact us page. Actually, let's delete the webpage. Stupid. So home about us, contact us. Um, now we're gonna, I'm gonna select all three of these  and turn them into what's called an unordered list.

It's bullet points, that's a fancy word  for bullet points unordered list. Okay? That's gonna help us later on when we do called  dropdown menus as part of this tutorial. Um, but for the moment you can, you don't have  to have the bullet points if you don't want them. Okay, so we've got homepage about us, contact us. Now what we need to do is link them to the other pages.

So the homepage where it's selected, we can go up to insert  down to hyperlink,  and this little hyperlink window opens up. Now for this one, um, the text is gonna be home. Perfect. Where is it gonna be linking to? I'm gonna use this little folder here, which says Browse. And I'm gonna say link to my index page, please.

Okay. So when this button is clicked, okay, the word home,  it's gonna go to the homepage. So it's not gonna do a whole lot at the beginning,  but it will from other pages, target. Now we talked about Target in the earlier one,  but you've essentially got two. You've got blank and self, uh, self will load  and the page you're clicking on, on top of itself. Okay, blank will open up in a separate tab  or a separate window depending on the browser.

So in terms of internal navigation  for a website itself is perfect. Um, title is really important. This explains to Google  and to, um, different, um, uh, reading aids  for people with disabilities. What they, where, where they're likely to go when this,  um, button has clicked. Okay? When the home, um, bit of text has clicked,  and in this case it's going to be the Vintage  Camper Homepage.

Homepage. Cool. All right, click. Okay. You'll notice it goes our lovely blue color  with our lovely underline. We have to leave that at the moment  until we get into CSS in a later tutorial.

Um, we're gonna repeat the process  for about us and contact us. So we'll do it together, otherwise you can fast forward. So insert hyperlink, um, it's going to our About Us page. Now the target is going to be self, um, interesting note. If I leave that blank, if I leave nothing in there,  it will default to self. Okay?

So very often I don't click self,  I just leave it blank up to you. Okay? And the title for this one is the About Us page. So this is going to be the Vintage About Us page. Okay? The naming in this one here, you can obviously have,  um, spaces, if you follow my example, um,  actual physical names for physical pages, okay?

Need to have no spaces and things like titles  or alt tags that we do for our images are allowed to have,  um, spaces, any sort  of crazy characters you like in these ones. So let's click okay, do the last one. Contact Us, insert. Okay, hyperlink. Now you'll notice, um, I'm using this long method, okay? I like it because when you're new it gives you the  boundaries of what you can and can't click on.

Okay? But, um, when you get a bit more professional  and um, uh, using the program a little bit more,  can you see down the bottom here in our properties panel,  um, it has essentially the same things. So there's Link and there's our little browse. So we can go to um, our Contact us page  and down here in title which we saw before. Okay? Very important.

This is the Vintage Camper  Contact Us page and there's the Target, okay? And we'll go to self. So the exact same parts are there  as they are in insert hyperlink, okay? Link, target, title link, target  title, job done. Up to you. Alright, let's save it.

So we're gonna preview these links now, um,  and they're not gonna totally work just yet. There's one last little trick we need to do. So we're gonna go to file preview a browser,  and I'm gonna use Google Chrome. My page loads. Hey, and there's my ugly little links. It's gonna homepage, it does nothing  'cause it's linking back to itself.

That's fine. The about Us page  is gonna jump to the About Us page. Let's go away. All right, so we're on the about Us page,  but the links have disappeared. Why? You guessed it.

Okay, it's 'cause we've only actually typed  those links on the homepage. We need to copy and paste it onto all three pages. Okay? So let's go back one,  make sure the Contact Us page is linking, working cool jumps  to the right page, but still no um,  extra navigation on this page either to go back. So let's go fix that. Jump back into Dream River.

Alright, so it's quite simple. I'm gonna select all of these and go to edit copy. I'm gonna go to the about us page,  this little tab here, okay? Or file. Open up your uh, about Us page, put return in there  and paste this guy. Clear away that so he's on that page  and go to contact us page and put him on there as well.

Get rid of that return. Alright? Now this can be where people  get into a little bit of trouble. What's happening here is, um, you've been adding them  to these pages but not saving them. You can tell something's not saved  by this little asterisk at the top. Okay?

If there's a little asterisk,  that means you haven't saved it. You can see the homepage has saved the About  Us and contact hasn't. Okay? If I go back to this homepage  and I preview, it's gonna have the exact same problem  'cause we haven't saved these pages yet,  so they haven't been updated. So that's, uh, generally what happens in the classes. Alright?

So one little trick is  whenever you are saving, okay, go to save all file, save all  that means it saves this one, this one, this one. Anyone that is open. Now if I preview it,  file preview and browse it. Go into Chrome, fingers crossed home goes nowhere  about us, goes to the about Us page. Hey, but I can go back to home now. Hey, and then contact us.

All right? It's not much, but it's a little bit of a milestone,  especially if you're new to web design. Alright? Um, so that's it for this tutorial. We've looked at linking pages. So we've created some text links in Dreamweaver.

We turned them into a list and then we highlighted them  and uh, created a hyperlink linking  to the three different pages. Then we copied and pasted them across all three of them  previewed in a browser and they seem  to be working in the next tutorial. We'll look at uploading, uh, this website. Okay? This's a really basic website up onto your web server. Okay?

Alright, thanks very much. See you The next tutorial I.