How to create & link new pages in Dreamweaver using templates.

Hi there, in this video we're going to go through and start building our second page which is our Portfolio page. And this will be indicative of how to create any new pages. We're going to go and change out the Heading here and these image chunk down the bottom. Let's go and do that now in Dreamweaver.

First up, there's two ways of doing it. We can go to 'File', 'New', like we did earlier, and we said, 'Sites from Templates', and this is the Template we created earlier in the series. Hit 'Create'. The only trouble is, we get kind of a blank page. So what I do typically - I'm going to hit 'Cancel' - is I just do a 'Save As' of this page, so 'Save As'. Now we had to call our first page index.html, that's the Home page, no way around that one. Now every other page we get to name on our own. The only rules are, don't use upper case, and don't use any spaces or any of the crazy characters like this. So we're going to call ours 'portfolio-ui-design'. And the client name for this one, let's just say it's 'byol'. So we want good keywords in our URLs as well. And this is really good for Search Engines. I'm going to hit 'Save', I'll drag him up, hit 'Save'.

It's still connected to the template. One thing that I've had problems with using templates in the past is that sometimes you make an update to the template and this guy doesn't update, if that ever happens, it happens like once in a blue moon, but you can go up to here, go to 'Tools', 'Templates'. If it's ever grayed out, just click in the Code version down the bottom here. For some reason, clicking in Live view makes that not work. And in 'Templates', this one here, you can say 'Apply Template to Page'. You can just click on your Template again. I don't have to do it now because it's working just fine, but if that ever happens, try that.

The other thing you can try, if later down the road, yours breaks, you can say 'Update Current Page', and it will just go back and check the Template again, just to make sure in case it didn't get connected. So I'm going to match this design in here. There's a few things I need to get rid of. I'm going to delete them in Live view. So there was this Tag, you're gone. Clicking on this, I like to click down here to make sure, because I don't want Hero Content, it's just the big box. But this 'image float left' is everything I want to get rid of. I'm going to reuse this text, but I'm going to change the text to what I had in here, UI Design. UI Design. So stick around, we're going to just do some-- obviously entering in some details, but there are going to be some extra tricks we'll learn as we build.

So this is going to be my UI Design for BYOL. I'll delete you, delete you. So I'm going to win it, orange. I want to insert it as a p-tag. And this is going to represent this Text here. What I don't want to do - I'm copying and pasting it - is, when you're in this kind of orange mode, doesn't let you do lots of other stuff, so you've got to click off and click on it. And it's kind of Tag view, the blue view. Orange is the editing, kind of text only thing. So with that selected, I'm going to go to 'Insert', I'm going to go down to 'p-tag'. Where are you? There, 'Paragraph'. I'm going to go after my 'H1'. I'm going to replace this text. I don't know why, I do like doing it down here in Code view better. Paste. There we go.

We're going to have to do some styling for it. Now I could create a Compound Selector to say, p-tags that are inside Hero content-- the problem with that is that I might use another p-tag to do something else. So I'm going to be a bit more specific here. So I'm going to create a Class specifically for styling. This text, just here, rather than all p-tags that are inside of this Top box because, maybe on the Contact Us page, or the About Us page we want to do different things with the p-tag. So, let's create a Class, 'CSS Designer'. Mine is not locking so I'm going to reset 'Dan is awesome'. So, 'styles.css', I'll do it Globally. I'm going to create a Class in here and I'm going to call it 'text' at the beginning.

So whenever you start doing text, just call it text at the beginning so that it's easy to find later on. So this is going to be 'text-white-description'. What am I going to do to it? I'm going to make it-- I'm going to go to 'Text', make it a font color of 'white'. And I'm going to make it a font size of '30' which I've pulled from my-- man, it's getting annoying with double 3s. I don't know why it does that, I put in three 1s, and it puts in 2. Now we're going to apply that over here. So this one's going to be called 'text'. You can start to see why using text at the beginning is useful. You can go through all your different text options.

Next thing I want to do is, this is the kind of new unique thing. The rest of the stuff we've done so far, we've done in this course, but this bit here now, I want orange. The problem is, we can only apply Classes to this entire p-tag. The problem is I want this little part of the p-tag to be red. Now what I could do is create two p-tags and then float them next to each other and that's a lot of drama. So we're going to look at something called a Span tag. So a Span tag is-- if you are from the world of say InDesign, it's a Character Style. So it's a little bit-- I can use it as part of my paragraph just updating a little bit. If you've never heard of Character Style, no worries.

A Span tag, watch this, you have to do it here in Code view. So it's a way of applying a Class. Instead of using the Parent tag, which normally happens, we can have it applied to our little bit inside of the p-tag. And it's just called a Span tag. So first of all let's create this tag. So 'styles.css', 'Global', go to this one here, and I'm going to call this one '.text-red'. I'm going to call it red, just because it's reusable. I should just call this 'text-white' as well. That 'text-red', I'm going to say, you are red. I'm going to pull it from, the 'Text', 'color'. You should go and find the proper color from Illustrator or use the Eyedropper tool here, and steal the color. And I am going to make it—

I'm not going to do anything else because the font size comes from the underlying text whitener applied to the whole tag. So, to apply a Span tag, we highlight it down here in Code view. And then we hit 'Command T' on a Mac, or 'Control T' on a PC. And this kind of Wrap tag appears. Top and span, that's what we want, but we want to add a Class as well. So, 'span', 'space', and then type in 'cl', 'span cl', and you can see, handy Dreamweaver, it's put a Class in there. And it's added all the syntax for us as well, which is the equals and the quote marks. And in here, we're going to type in, without the full stop-- often when you're working in Code view, don't put the full stops in. So this one is 'text-red'. Hit return again, and helpful Dreamweaver has wrapped Client in this Span tag. It's called a Span Class, which has a red text. And there you go. It's kind of Inline styling.

Next thing I want to do is this chunk of text underneath here, under BRIEF. It's pretty much exactly the same as this, so make sure you're clicking on the Parent tag, which is the p-tag. Hit 'Command D' on a Mac, or 'Control D' on a PC. Duplicates that tag. Awesome! Let's change this to 'Brief'. And now the text here, Lorem Ipsum, I could copy and paste it from Illustrator, but I want to show you a cool trick. Now, this only works down here in Code view. And that mixed up Latin words, it's called Lorem Ipsum, just place holder text. So what we can type down here in Code view is 'lorem', and then put in how many words you want. And then hit 'Tab', not 'Enter', 'Tab' on your keyboard. Voila, I've got 20 words. Awesome, huh! That's something called Emmet. If you're not using Emmet, and you want to get more into Code view, I've got another course that's kind of more designed for doing a lot of what we've done here, but in Code view-- so that might be the next step for you. But Emmet's pretty cool, you want to Google that, have a look or look at some of my other videos. Let's do 'Save All'.

Now let's look at getting rid of-- I'm going to leave the Let's Talk stuff in there. Do I leave the Let's Talk stuff in there? I do. So it's still on my design, I'm going to leave that in there. Next thing I need to do is, this big image here. It's one big image that's going to represent the designs that I have done. So when I click on say, one of these icons here, it loads up this page. I need to go through and delete all these columns. Where are you? Click on these guys. Now, we're going to leave the Image Grid box. I probably shouldn’t call it Image Grid. I probably should have just called it Secondary Main or something lame like that, because it's just going to have one image in it now, not a grid, confusing.

So I need everything gone out of here. It's easier to do in Code view, you can totally do it in Live view if you prefer, but I'm going to grab all of you guys. Make sure you grab the beginning and the end. How do you know if it's the beginning or end in Code view? Click on 'Image Grid', you can see, it highlighted down here. That's the closing, that's the opening. So everything in between here, I get rid of, good bye. Now with my cursor still flashing in there, let's put in our Image. So we're going to go to 'Insert', 'Image', and we're going to bring in, from our Exercise Files, 'Images', and I've got 'Portfolio1'. It's this big guy, cool. A little bit different from other design. And let's save it all, test it in a browser. And, look. The image is way too big, and it's just not responsive but don't worry, remember, we created a cool tag called Responsive. So we're going to add it to this image called '.responsive-image'. And we 'Save All', open in the browser. And now, when we shrink it down, hey, look at it all being responsive.

You can decide whether you want Padding around it as well. I haven't done that. So you might add some Padding to the Image Grid or you might connect to this special Padding Class. But I'm happy for it to butt up next to the edges here, I kind of added fake padding with the actual image itself. What else do I need to do? Looking at this, when it gets down to Mobile view, this is just too big a text. So I can go through now and adjust, maybe the Compound Selector to say, p-tags that are inside image, make it smaller, they're at 30 pixels at the moment. So, let's try that, let's go to 'CSS Designer', 'Styles', 'Mobile'. Let's create a Compound Selector that says—

Nothing's actually in there, I'm going to go off and actually click on it here to hopefully save some time, so I'm going to click on him, then, click on 'Selector'. So, Hero tag I want-- I don't need this Text Image description. Hasn't helped me much at all. So p-tags that are inside Hero Content will work, hopefully. And we're going to grab till it's loaded on. And let's go to 'Text', and say, let's go to 'Font Size', and let's make it pixels of '20'. '220', and, yes, we're getting there. Awesome!

One thing I did do is I didn't have any Padding on the side when it got down to Mobile because it didn't really matter when I had those original text out here, but now I'm thinking I probably need it, so here, this one called Hero Content. And down at Mobile, does it say anything? I'm going to go to 'Show Set'. It's set to 0, so I'm actually going to turn it up to '10' pixels. And '10' pixels on that side. Just give myself a little breathing room on the sides. Whenever you do stuff like that you're going to have to go back and just double check, did I wreck the Index page? I feel like it didn't but we're going to go and test it anyway.

So with this open, in my browser he looks fine there, cool. Nothing's gone wrong except, remember that Padding we put on that side there? We kind of faked it being in the middle, we've broken it by adding an extra 10 pixels. So we're going to have to go and adjust that Compound Selector. Everything else looks fine. Trying to remember what Compound Selector we used. So I might go to 'Index', 'Mobile', go to this thing here, and it was Image inside Hero Content. So let's check it. Header A image. Is that it? No. It was-- I'm going to work out which one it is. It was this guy here. Hero Content Image Float Left. And we're going to just lower it down a little bit. So this type of thing happens all the time. You get further in the course, you make a little adjustment, you need to go and double check it doesn't have any ramifications, if it does, you might have to create its own special Class. But you don't want to get into the habit of getting too many of them because your CSS Style sheet can get crazy looking. At the moment ours is nice and clean, and we wouldn't win any development awards mainly because of my really long names, Desktop view. But it's doing pretty good.

Last thing we're going to do is, we need to connect these two pages. So in my Index page here, I'm going to go up to Full view. Double click in here. And I'm going to say, when this button is clicked, so it's this first one, this Image, we're going to go to Strappy lines, and say, link, and if you had a hash in here, like we looked at earlier, we can delete hash, and actually click on our 'Browse for Files' and say, 'portfolio-ui', click 'Open'. Now it's defaulting to 'Self', which is Target 'none'. Alt Text, this is going to be my 'UI Design for BYOL website'. It's not-- this is the stuff that I've got, kind of this templated place holder stuff. So this is not my work, this is Stock Library work. So let's click off in the background, and let's go test it in a browser. Hello, browser.

Now, this image here, hopefully we can click it. And it jumps to my page. Awesome! And to get back, we're going to click on the image. Here is the logo, this goes back to the Home page. We did this in an earlier tutorial but it's exactly the same here that we just did for this image except, instead of linking to the UI page, it links back to Index. All right, so now you go through, duplicate that page, and do it for all of these. The cool thing about it is, you'll notice that as we get through this course the production gets faster and faster because we get to rely on things we've done in the past. And this duplication's going to be super easy; A, because it's part of a Template, and B, it's because we've done the layout for this page already. We'll just do a 'Save As', and just go switch it all out.

All right, that's it for this tutorial. Let's get on to the next one.