How to add the HTML5 footer tag to a website using Adobe Dreamweaver.

Hi there, in this tutorial we're going to add our Footer. There's our Top, there's our nice little Footer. It's going to have two little Divs inside of it, to float. Our Social Icons to this side, we're going to get the Copyright to go to the right hand side. We're also going to add Links to all of these. And this one's going to be kind of cool. When you click it, it's going to open up your email account and send us an email. So let's go do that now in Dreamweaver.

First thing is, where am I going to put my Footer? I'll put it just-- I've clicked my Main tag, I'm going to put it just after that. Let's click on 'Insert', and under here, there's one called 'Footer'. And I'll put it after. There it is at the bottom here, you can kind of see, there's my Main tag. And there's the Footer there as well. Let's give it a height, and remove this text. So let's go to 'CSS Designer' panel, 'styles.css', 'Global', let's create a 'Selector'. And just for the Footer, please, I'm going to get you to have a height.

Now, when I said don't put heights because we want the content to stretch bigger and smaller, it's not the same for the Footer. You can see here, it's this height, it's always this height. So I could put a minimum height, but I'm actually just-- I'm going to put in a regular height. Force it to be-- I've already checked, it is 120 pixels. So that's him, I'm going to grab this text, select it all, delete it. 'Save All'. One of the trouble when you are deleting from this option, is often it will leave this non-breaking space in here. Basically that's like a space bar, and that's fine. And they leave it there because otherwise, you can see, the Tag closes, and you can't really click on it. So they kind of leave that in there, I'm going to delete it from my Code view. I don't need it.

So, my Footer is made up of two parts. Let's have a look. There is a Social Icons part and there's a part on the right here with this Copyright. So I'm going to make two Div tags. Get one to float to the left, and one to float to the right. Let's go and do that. Chuck him in. So, in Footer, we're going to go to 'Insert', we'll insert a 'Div' tag. And we'll stick it. I've got my Footer selected, so we're going to Nest it. And now with this one selected, we're going to put in another Div tag, and it will be just after the one I have selected. So I've got two of them, you can see they're inside the Footer, and I have two Div tags. Let's create two Classes. I'm going to float one to the left, and one to the right.

So, 'CSS Designer' panel, 'styles.css', 'Global', 'Selector'. And I'm going to name these ones. I'm going to call this one the 'Social Icons'. And I'm going to get it to float to the left. And I'm going to make another one called, remember, period '.' at the front, I'm going to call this one 'copyright'. '.copyright'. And I'm going to get this one to float to the right. Nothing's happening because I need to apply them. So this first Div tag selected, I'm going to make you the 'Social Icons'. This one here. It's kind of weird, this one floats to the left, Social Icon, and this guy kind of slips up behind him. The text gets squeezed out to the side, that's why I want to click in here.

I've got the Div selected, it kind of selects everything. Floating does some weird things to Div tags, so-- you look at this one, we're going to put in 'Copyright'. Awesome! So floats left, floats right. Now we're going to put in some of our Content. So let's do this one first. I'm going to have this Div tag selected. I'm going to go to 'Insert', I'm going to insert an 'Image'. I'm going to insert it, nest it inside. And I'm going to go out to my 'Exercise Files', 'Images' and I got 'Social Icons'. And I've got all of these to add. Add them in the order which you prefer. I'm just going to put them alphabetically. So let's add stuff to our Image. Click the 'Hamburger Menu'. Alt Text is what you put around every image, and it's a way of describing that image. And Google loves it when you describe it using good keywords. So 'BYOL Facebook'. Every image needs an Alt Text. You tell search engines what your page is all about.

And where the link goes to, what we're going to do is, I've got a page built already with all my social stuff. Go sign up, follow me in all these things if you're a Facebook person, LinkedIn person, Twitter person, go check me out. So I'm going to grab this one. Enter the link. And this bit appears, it says 'target', we're going to say 'blank'. What this means is, by default if I click this Image-- let's save it actually, and preview it in a browser. So by default, if I left that, the Target is 'none'. So by default, if I left it at the Target itself, it just means that when I click, it replaces this page with Facebook, but because I've changed it to 'blank', if I click it, you can see, it changes it out to our Facebook page. So we're going to go put in the rest of these. And what we might do to save going to 'Insert' and 'Image' every time, just right click it, and go to 'Duplicate'. And with it selected, drop that down, let's pick a new 'Source' which is just our Image, back to our 'Exercise Files'. Where are you? 'Images', 'Social Icon'. I will do 'LinkedIn' next. Switch this out, so all these Alt Text needs to be unique. LinkedIn, go check this out there as well. It's meant to be blank, but I want to change the url out to this one, 'bringyourownlaptop'. Cool.

So, I'm going to get the editor Tayla or Jason, to flip ahead a little bit till we get to the last one, hang about for that one because the email one is going to be a bit interesting. Okay, and you're back. The reason the email ones are a little different is that it's not a link, it's not like a website you can go to for email. So what you do in the link here, is switch this out to 'mailto'. And then a colon ':', so it needs to be spelt that way. Lower case, and then you put in your email address. Mine is [email protected] So if you want to send me an email, send it there. And it's going along in 'blank'. What will happen now is-- I'm going to click off. And I'm going to go preview in a browser, 'Save All', let's have a look. I want to click on this, what happens is, it loads your default email browser. Mine is using Mac Mail. So just make sure you've got the 'mailto' in front of that, and that will work. So back into Dreamweaver. A little bit of housekeeping, I'm going to get rid of this text here. Goodbye text, I don't need you anymore.

Next thing we'll do is, this one over here is pretty easy. This is mainly just text, I'm going to steal it from Illustrator. 'Dan's Portfolio', keep clicking the wrong thing. There he is there, grab you. Do I want to Style this? I'm actually happy with the default text. What you could do is create a Class especially for this. And Style it with the font that you want, the size that you want. I'm happy with the way it is.

The next thing I'd like to do is, it needs a bit of pushing away from the edges here. The height and the sides. So to do it, I'm going to go to 'CSS Designer', 'styles.css', 'Global', 'Footer'. I can use Margin or Padding in this case because there's no colored box to a Footer, it's just empty. So what I need do is push it down, about that much. The only trouble with that is that the Box actually got higher by that much. It started at 120, now it's 120+33. When you add margins to things that have heights they actually just kind of combine. So now it's like 153. So what I need to do is minus that off this height. So, my Maths is terrible, or can I do it? Is it 97? I'm going to guess it's 97. That's how bad my Maths is. I would have put that in a calculator, but I don't know, I felt stunned, and felt like I should do it.

So the margins from the left and right, because we haven't set a width from that, we haven't set a width, so we don't need to minus it, so we just add them to it. So what is it going to be? It's going to be about 20 pixels that side. 20 pixels that side. Awesome! Now you might be like, "Well, can I get it to center horizontally?" No, you can't. Centering horizontally is surprisingly really hard. So what you need to do is just fake it. So this guy here, say you want the height. You can add a bit of height to this one, so what is he? He's Social Icon. So I might find Social Icon, and add a bit of Padding to it. Because these have to be different, I'm not doing it to the Footer. So I'm going to add a bit of margin to the top. Let's get it to look like it's in the center. There are ways of doing it, but it's super complicated. Copyright, same one, I'm going to add a height to him. Get him to look like he's in the center.

So the next thing I want to do is add spacing between all of these guys. So kind of matching, roughly this, doesn't have to be exact. But I'm not going to do it on screen. I'm going to do it separately in the background, and what I want you to do is, see if you can space these guys out without pushing it off from the side here. And everything falling to pieces. But say if you can put in a better spacing, up to you, how much, but I'd like to see if you can create a Class or adjust the Class, or work on something to get these to space out a little bit. So, very good luck, I know you can do it. And if you don't do it, and you break it, just undo it. And leave it. They look fine by themselves. But I'd like you to start with me, let's see if you can add some Padding.

All right, let's go off to the next video where we start actually adding out Template-- actually, one last thing before we go, is this big green box. Let's get rid of the big green box, so let's find 'Main'. And that big green background here, hit that little trash can. 'Save All', see in the browser. Awesome! There's no Footer down the bottom, there's this. Now, go off, get these guys spaced out. You can do it.