Hi, my name is Dan and this video we're gonna look at  creating extra pages for our website. So, so far we've created just one page, our index to html,  which is our, essentially our homepage. And we've got buttons for our contact us  page or other pages. Down here we've got, uh, print an app,  but they don't go anywhere yet  'cause we haven't created the pages. So what you need to do when you are creating a website is  you spend a lot of time creating the first page  or the main page for your website. Then once you've done that,  you've created all your CSS classes  and worked out lots of the bugs.

Once you've done that, then you can go off  and duplicate that page and use it for other things. So it's best to kind of design it first with one page,  get it signed off by the client, and then go off  and make adjustments, um, for other pages. Now we've designed a homepage. Quite often when I'm designing,  I won't design the homepage first or I might do  'cause uh, that's the kind of nice fun part of it. But most of the time, most effort should go into the product  pages or the um, services pages  or the, the thing that people are gonna be atmo. So if I go to say bring your laptop.com, one of my sites,  if I go to bring your laptop.com, the homepage,  great, it's fine.

But actually most people land on my actual video pages. So I'm gonna go into one of these videos. These pages here are the ones that are most viewed. Okay, it's my, it's my product. These are the things that I sell, these video courses. So this page is where I spent most  of my time working out the UI  and the design and how it all works.

And so when you are designing for a client,  maybe the homepage  and then one of these product pages should be the two pages  you work in terms of concepts  because yeah, this is the one  that people spend the most time on  and are potentially gonna arrive on  when they do a Google search. Um, funnily enough, uh, so many people land more on some  of these pages than they do on the actual homepage. Great. So let's jump back into Dreamweaver  and let's say we've finished the homepage now  and we wanna make our contact us page. All we need to do is go up to file,  make sure everything is saved, then go to file  and go to save As. And what we're gonna do is we're gonna call this one  contact us.

Now the first page had to be called index to HTML  'cause that's the page that the browser goes and looks for. Okay? So if I go to our bringer electro.com,  there is an index do HTML page  and that's the one that gets brought up. Nobody has to type in index, do html. It's kind of hidden toward the user. It's just a basic homepage.

You have to have him and all the other pages  can, you can name yourself. You gotta follow some naming conventions. You can't use spaces. Okay, I can't, um, I could join these up. I could have a hyphen or I could have an underscore. Okay, they all work.

I like hyphens better. Um, but you could, you just can't use spaces. The other thing to note when you are naming pages,  it's best not to use any of these. Okay? Any of that kind of um, non alphanumeric keys. Okay?

Like pound sign  and dollar signs and percentage in there. If you use any of those, you are bound to run into problems. So just use the basics, numbers and letters  and hyphens are underscores, right? I'm gonna hit save. Great. And all it's done is made a duplicate.

So exact same page. Now I need to adjust this to look like a contact us page. And the first thing you should do every time you make a new  page is you're gonna have to go and change that metadata. We looked at it earlier, there was the page title  and the page description to get to both of those. And there's a couple of ways. Um,  the page title's generally pretty easy down in here.

So if you've got nothing selected,  which is if I click things, it disappears. There's some bits it doesn't. Um, but if I have nothing selected,  click up here, click on this. There he goes. There he is. Page uh, page title down here.

So that was for my homepage. This is going to be the BYOL contact page. Contact details. Great. And now I need to go and change the meta description. The easiest way to go see the meta description is  to make sure you're on page source.

So we're looking at our HTML go to code view  up the top here in code view. You'll find eventually. And there he is there, the meta description,  you click on it, you can type it down here  or you can type straight into code. It's up to you. Um, so this is going to be uh,  Right, so I should have about 180 um, characters here  to fill up the description. But in this case I'm not gonna put too much in  because it's just the contact us page.

It's often, it's not a search friendly one. If this was my training page, say it is uh,  this is the homepage for my Dreamweaver Bootstrap. Um, course I would make sure I used all my 180 characters  and explain that This is a tutorial series by Daniel Scott  for bring your own laptop about Dreamweaver Bootstrap  Responsive design so that you are using lovely good keywords  so that people know what they're getting here. But around the one 20 to 180 characters is all you need. We're doing a little bit shorter here  for the contact this page 'cause I can't think  of anything else really to add um, to the contact details. Alright, so we've done those.

We've done the page title and we've done the description. Let's go back to live view, hit save, go file, save. Now what can we change? There's bits in this,  we can change bits that we can't or we can,  but there are ramifications. So the HTML we can change with no ramifications  to the other pages. So if I go to code view, anything that's in my body tag  that I go and change, now I can go and change  and it won't affect my original  homepage which is called index.

They're all separate. So the HTML is separate. What they share though is everything else here they share  the bootstrap CSS which is not a big  problem 'cause we don't edit that. The main CSS though we, we both share that. Okay? So that just means that if I go through now  and decide that on the contact us page,  I'm gonna make this heading smaller.

That if I make the H one smaller  and global that it's gonna make the heading  smaller on the homepage as well. 'cause they share that CSS style on the main CSS. Same with these bits of JavaScript you probably won't be  missing about with these so they're fine. But just know that the CSS is shared between pages  and the source code or the HTML is unique for the pages. So I can go through do and do stuff like this. Now I can go through and say this is the um,  was I using caps before?

I was contact details. And the nice thing about that is that  that will be separate for this page. What it's not separate is if I want to go  and change the styling for this. So if I am, I'm at my large view  and if I want to change the styling,  I don't like the contact details being so large, I gotta go  to CSS designer and let's say I wanna change this H one. So I'm gonna go and make up a little smaller  so it jumps back to its old level and I go to main CSS  and I find global and I find H one  and I decide to go through and change it  'cause I don't like it on the Contact Us page  and click show set, I change it down to 20 enter. It's nice and small but the ramifications are  because they share this main CSS page.

You can see back here this has gone small as well. So just know that if you change the CSS it has  to go across the whole site. Um, and and the HTML is unique for the page. So I'm gonna undo that change. I'm gonna just go back, put it back to what it was. If I need to adjust this on this specific page,  I could add a special class.

Okay? I could make a new class  and maybe call it contact details  or I could use my smaller one  that I did, I made created before. Um, but I could make my own class here  and apply it to this specific um, bit of text  and I could adjust it  and it would only appear on this particular page. Let's do that. So I've got an H one  and I want it to be smaller on this page. So I'm gonna add a class but I don't wanna affect the  overall H one 'cause that's being used in the other page.

I'm gonna make a new class. Call it text smaller  and call this one tick smaller two. Okay, actually the other way around I do this sometimes  and I need to do it this, I'm gonna put it in global  and I'm gonna put it in. It's already appeared there. Okay? 'cause I was messing around with it over here.

I can just use this one that's been made  or I can bin it and start again. Do the way we've been doing it rest in this class. So I'm gonna call this one text smaller  and I've already got a text smaller. I'm gonna use another one too. And his job is going to be to make this font  size go to pixels and I'm gonna make it 30. Now I need to apply it over here.

Click you text smaller two. Great. And the thing about it is that even though it's using CSS,  it's only applied to my contact desk page. Let me show you what I mean. So in split view you can see  I've got this one called heading one  and there's my contact details, there's the text for it. But I've also applied this extra class,  whereas on this first page let have a look at it.

Let's go to split view,  Save go split view. And if I highlight that first bit of text,  there he is there, he's just the H one. Okay? He doesn't have that extra class  that I applied to this guy. Okay? So that's how I've kept them separate.

Great, let's hit a file, save all  And go back to Live View. Alright, now what I need  to do is I need to hook up the navigation. Now the navigation here, if I go  to my index page at the moment, if I test it in a browser,  if I go out to you, you'll notice that it doesn't connect  to anything, which says if I click home  and it doesn't go anywhere, contact us doesn't go anywhere. So what I need to do is update the navigation. So I'm gonna jump back into Dreamweaver. I'm at my index to HTML.

I'm gonna go to Live View. I'm gonna click on this word home  and I want it to go to, at the moment it's going to hash. I'm gonna click this little folder here  and say, actually I'd like you to go to when  that home button is clicked is to go to index. Don't worry that we're on index, that's fine. Uh, click on the Contact Us page  and I'll say, when you are  clicked, we can get rid of my hash. Now we don't need him.

I'm gonna use Contact Us. So remove the placeholders. And now when it's clicked,  it's gonna jump to this page here. When you are doing links this way, you need to add a title. It's kind of like the alt text we did for images. It helps people that are visually  impaired know what you're clicking.

This one's gonna be particularly easy  'cause it has the word contact us,  but we're gonna add it anyway. And especially really useful if  you're linking using an image. Say you've decided to use an image  as your link rather than a button. Okay? Like we did over here, there's my old text, okay? It's the same with links.

All right,  so let's go into our Contact us page. This one here is gonna go to the bring  around laptop home,  Home page. Lovely. The one thing we haven't talked in earlier videos  is that, um,  this target down here, well I'll slip it in here. Um, just that I think of it, um,  by default we've done something called self. Okay?

By leaving it blank, we've picked self. Okay? 'cause that's the default. If you wanted to uh, link  to open up in another window,  say this is down the bottom here, I want this link. Um, what was it he was going to, he was going out. Let's say I do a hyperlink for terms and conditions,  but it's, I wanted to go to a separate page.

Okay? So I'm gonna add a hyperlink  and this is gonna go to dub dub http  slash slash dub. Do dub do, let's say I wanted to go to Google, okay? And, but what I want it to do is I want it, where are you? I've clicked on it Here is there it is. google.com is, I've got a title.

So this is gonna go out to Google, but I want it  to go out to blank. 'cause if I leave it as self,  what's gonna happen is when I click the link,  let's put it at self first to test it. Okay? So we've got this one. I'm gonna load 'em up in a browser. Now the bottom here, if I click on this,  what's gonna happen is this page is gonna disappear  and we're gonna move out to Google.

Why isn't that working? It's  because we're using this weird testing server here, okay? It's not allowing me to link out to something else. So let's try it this way. Let's go to preview and Chrome Save. Great.

So this is the other way of testing your browser. Watch this. If I click on this guy, it jumps out. So we didn't leave that page. Can you see we're still in the same tab,  but we've jumped out to Chrome. Whereas, uh, if you use the other way of blinking,  so if I click on him and I use blank and I hit save  and I preview in Chrome.

When I click this watch, this is our tab that we're up  to up here in the top right. And if I click on this, watch a second tab  opens a blank tab. Okay, so there was my original, he's still there. So that's really good for external links. And if you wanna jump out into separate little tabs  here, great. Uh, it was a long-winded explanation, sorry about that.

But um, we're getting there with our um, uh, two links here. Now, if I preview this in a browser,  which I've got open here, watch this. If I click on home, it's awesome. It's gonna come, it's gonna stay where it is. But if I go out to contact us, it's gonna jump  to our Contact Us page. Then I think I'll go back home.

It's not working. Why is it not working? Is because I duplicated this page. So there's index and we've updated the home  and the contact us, but I haven't on the separate page, gone  through and updated home and let me resize this one. So this one here has still got our old links,  so we need to update it both. So this is a bit of a, um, chicken  and egg moment where you don't have the pages  yet when you are designing this page.

So when you duplicate them to make the other pages, um,  you have to then go back to every page  and update the navigation. So home, what I'm gonna say is I can use my dropdown here. This just has recently used, um, links  or I can click on this folder here and go to index. Same, same. Remember the title homepage  and I'm gonna leave it self. Same with the Contact Us.

We need  to update this one as well. What we could do is we could go into code under index  and we could find our navigation somewhere at the top there. And I'm gonna grab this whole navigation, Okay? And I'm just gonna copy that. So I'm gonna grab, say, um, let's kick inside here. I'm gonna grab the container.

I'm gonna grab this top level one is everything. Copy it. I could jump to this page. Got a code view, click inside here,  grab the top level tag and paste it in here. Okay? And it's brought everything that I did in  that homepage along to this Contact Us page.

So now if I got a file save all  and I go out to the browser, okay? And I go to home, contact us and back to home  and back to home, contact us. All right? So my navigation's working. So every time you make a new page,  you're gonna have to move that navigation. Anything that links to it, you're gonna have  to update all the links.

So go through and do lots of testing when you are, um,  building it just to make sure you have remembered  to update all of your links, right? That'll be it for this video. And the next video, we'll go off  and fix our Contact Us page. Uh, we'll do a production video on that.