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.