Hi, my name is Dan. In this video we're going to look at creating extra pages for our website. So far we've created just one page, our index.html, which is essentially our Home page. We've got buttons for our Contact Us page, or other pages. Down here, we've got our Print and App. But they don't go anywhere yet because 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 design it first with one page, get it signed off by the client, then go off and make adjustments for other pages.

Now we've designed our Home page. Quite often, when I'm designing, I won't design the Home page first. What I might do is-- that's the kind of nice fun part of it, but most of the time, most effort should go into the Product page or the Services pages, the thing that people are going to be at most. So, if I go to bringyourownlaptop.com, one of my sites, the Home page, great, it's fine, but actually most people land on my actual video pages. So I'm going to go into one of these videos. These pages here are the ones that are most viewed. It's my product, these are the things that I sell, these video courses. So this page is where I spend most of my time working out the ui, and the design, and how it all works.

So, when you are designing for a client, maybe the Home page, and then one of these Product pages should be the two pages you work, in terms of concepts. It's because this is the one that people spend the most time on, and are potentially going to arrive on when doing a Google search. Funnily enough, so many people end more on to these pages then they do on the actual Home page.

So let's jump back into Dreamweaver, and let's say we finished the Home page, we want to make our Contact Us page. All you 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 going to do is, we're going to call this one Contact Us. Now, the first page had to be called index.html because that's the page the browser goes and looks for. So if I go to our bringyourownlaptop.com, there is an index.html page, and that's the one that gets pulled up. Nobody has to type in index.html. It's kind of hidden to the user, it's just the basic Home page. You have to have him. All the other pages, you can name them yourself. You got to follow some naming conventions, you can't use spaces. I could join these up, I can have a hyphen or an underscore. They all work, I like hyphens better. But 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., any of the kind of non alphanumeric keys, like pound sign, dollar sign, and percentage in there. You use one of those, you're bound to run into problems. So just use the basics, numbers, letters, hyphens, or underscores.

I'm going to hit 'Save'. All it's done is made a duplicate. So, the 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 going to have to go and change that Meta data. We looked at it earlier, there was the page title, and the page description. To get to both of those, there's a couple of ways. The page titles, generally pretty easy, they’re on here. So if you have nothing selected, watch this, if I click things, it disappears. Some bits, it doesn't. But if I have nothing selected, I'm going to click up here, click on this. There he is, Page Title down here. So that was for my Home page. This is going to be the BYOL Contact page. 'BYOL - Contact Details'. 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 looking at our HTML, go to Code view. At the top here in Code view, you will find eventually 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. So, this is going to be-- I should have about 180 characters here to fill up the description, but in this case I'm not going to put too much, it's just the Contact Us page. Often, it's not a search friendly one. If this was my training page, say this is the Home page for my Dreamweaver Bootstrap course, I would make sure I used all my 180 characters and explained that this is a tutorial series by Daniel Scott for Bring Your Own Laptop about Dreamweaver Bootstrap Responsive Design. So that you're using lovely good key words that people know what they're getting here. But around that 120-180 characters is all you need.

We're doing a little bit shorter here for the Contact Us page because I can't think of anything else we need to add to the Contact details. So we've done those, we've done the Page title, and we've done the Description. Go into Live view. Hit 'Save'. I'm going to 'File', 'Save All'. Now what can we change? There's bits in this we can change, bits that we can't. 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 Home page, 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 because we don't edit that.

The Main css though, we do share that. So it just means that, if I go through now, and decide that on the Contact Us page, I'm going to make this Heading smaller, if I make the H1 smaller in Global, that's going to make the Heading smaller on the Home page as well, because they share that css style on the Main css. Same with these bits of javascript, you probably won't be messing about with these. So they're fine, but just know that css is shared between pages. And the Source code, or the HTML is unique for the pages. So I can go through, and do stuff like this now. I can go through and say-- this is the-- were we using caps before, it was. My Contact Details. And the nice thing about that is that it will be separate for this page.

What's not separate is, if I want to go and change the Styling for this. So if I am out in my Large view, if I want to change the Styling, I don't like the Contact details being so large, I got to go to CSS Designer and let's say I want to change this H1. So I'm going to go a little smaller, so it jumps back to its old level. And I go to Main css, I find Global, and I find H1. And I decide to go through and change it because I don't like it on the Contact Us page. 'Show Set', I'm going to change it down to '20. 'Enter'. 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. And the HTML is unique for the page. So I'm going to 'undo' that change. Let's go back, go back to what it was. If I need to adjust this on a specific page, I can add a special Class. I can make a new Class, and maybe call it Contact Details, or I could use my smaller one that I might have created before. But I make my own Class here, and apply it to this specific bit of text. And I could adjust it, and it will only appear on this particular page. Let's do that.

So, I've got a H1, and I want it to be smaller on this page. So I'm going to add a Class. But I don't want to affect the overall H1 because that's been used in the other page. I'm going to make a new Class, call it 'text-smaller'. And I'm going to call this one 'text-smaller2'. Actually, it's the other way around, I do it sometimes. I need to do this, I'm going to put it in Global. And I'm going to put it in, it's already appeared there. Because 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. The way we've been doing at first in this Class. I'm going to call this one 'text-smaller'. I've already got a text-smaller, I'm going to use another one, '2'. And his job is going to be—

I'll make this 'font-size'. Go to 'pixels', and I'm going to make it '30'. Now I need to apply it over here. You, '.text-smaller2'. The cool thing about is that, even though it's using css, it's only applied to my Contact Us page. Let me show you what I mean. So, in Split view, you can see, I've got this one called Heading1. And there's my Contact details, there's text for it, but I've also applied this extra Class, whereas on this first page-- let's have a look at it. Let's go to Split view. 'Save'. Click 'Split view'. And if I highlight that first bit of text, there he is there. He is just the H1. He doesn't have that extra Class that I've applied to this guy. So that's how I've kept them separate. Let's hit 'File', 'Save All', and go back to Live view.

Now what I need to do is I need to hook up the Navigation. The Navigation here, if I go to my Index page at the moment, if I test it in a browser you'll notice that it doesn't connect to anything. Watch this, if I click 'Home', Home doesn't go anywhere, Contact Us doesn't go anywhere. So what I need to do is update the Navigation. So I'm going to jump back into Dreamweaver. I'm at my index.html, I'm going to go to Live view, I'm going to click on this word 'Home'. At the moment it's going to #. I need to click this folder here, and say actually, when that Home button is clicked, is to go to Index. Don't worry if they're all on Index, it's fine. Click on 'Contact Us' page, and I have to say, when you're clicked-- we can get rid of the # now, we don't need him. I'm going to use 'Contact Us'. So remove the place holders and now when it's clicked, it's going to jump to this page here.

When are you are doing names 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 to know what you are clicking. This one's going to be particularly easy because it has the word Contact Us. Now we're going to add it any way. 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, like we did over here. There's my alt text, it's the same with links. So let's go into our Contact Us page. This one here, we go to 'BYOL Home'. Lovely.

The one thing we haven’t talked in earlier videos is that this target down here, well I'll slip it in here, and just do not think of it. By default, we've done something called Self. By leaving a blank, we've picked Self, because that's the default. If you want the link to open up in another window, say this is, down the bottom here, I want this link-- he was going out. Let's say I don't have a link for Terms & Conditions. I want it to go to a separate page. So I'm going to add a Hyperlink. And this is going to go to http:// That's why I wanted to go to Google. What I wanted to do is, I wanted is this, google.com, is I've got a title, so it's going to go out to Google, but I want it to go up to 'blank'. So if I leave it as 'self'. What's going to happen is, when I click the link-- Let's put it at 'self' first, to test it. I've got this one, I'm going to load him up in the browser. Down the bottom here if I click on this, what's going to happen is, this page is going to disappear. And we're going to move out to Google.

Why isn't that working? It's because we're using this weird testing server here. It's not allowing me to link out something else. So let's try it this way. Go to 'Preview in Chrome'. Hit 'Save'. So this is the other way of testing a browser. Watch this, if I click on this guy, it jumps out. So we didn't leave that page, can you see? It's still the same tab, but we've jumped out to Chrome. Whereas, if you use the other way of blinking, so if I click on him, and if 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, a second tab opens, a blank tab. So there was my original, he's still there. So that's really good for external links if you want to jump out into separate little tabs here.

That was a long winded explanation, sorry about that, but we're getting there with our 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 going to stay where it is. But if I go out to Contact Us, it's going to jump to our Contact Us page. Now if I want to go back Home, it's not working. Why is it not working? It's because I duplicated this page. So there's Index, and we've updated the Home in the Contact Us, but I haven't, in a separate page, gone through and updated Home and-- let me re-size this one.

So this one here has still got our old links so we need to update it both. It's a bit of a chicken and egg moment where you don't have the pages yet when you're designing this page, so when you duplicate them to make the other pages, you have to then go back to every page and update the Navigation. So 'Home', what I'm going to say is-- I can use my drop-down here, if this is just recently used links, or I can click on this folder here, and go to 'Index'. Remember the title? Home page. And I'm going to leave it at Self. It's only the Contact Us, we need to update this one as well.

What we could do is, go into 'Code', under 'Index', and we can find our Navigation, so I'm going to the top there. And I'm going to grab this whole navigation. And I'm just going to copy that, so I'm going to grab say - let's click inside here - I'm going to grab Container, I'm going to grab this top Level1, with everything. Copy it, I can jump to this page. Go to Code view, click inside here, click the Top Level. Tag, and paste in here. And let's bring everything I did in that Home page along to this Contact Us page. So now, if I go to 'File', 'Save All', and I go up to browser, and I go to Home, Contact Us, back to Home, back to Contact Us. So my Navigation is working.

Every time we make a new page you're going to have to move that Navigation. Anything that links to it, you're going to have to update all the links. So go through and do lots of testing when you are building it to make sure you have remembered to update all of your links.

That will be it for this video. In the next video we'll go off and fix our Contact Us page. We'll do a production video on that.