Basic text & images on top of our video background

Okay, in this video we're going to end up with something like this, where we've got some stuff over the top; we got a bit of a 'nav' going, and a logo on the top. It doesn't look like much if you look at how long this video is going to be, but don't worry, if you just looking to stick stuff over the top, that will be the first, like 10 seconds, and the rest of the time, we're going to get into some basic HTML, and we're going to build out our site, which you could skip if you like. All right, let's get started.

To add text to a document, it's obviously very easy, it's under here, under video, we're going to add this-- let's actually add our logo, I want to stick the logo at the top. Here's my finished example I want to do, that’s what I want, I want 'BYOL' over at the top, and there's navigation, there's text, and there's buttons, so let's get started.

So, what I want to do is put on an image, now putting in an image can take forever, it's img space src, 'img src',  then you got to put in 'alt text'. There's lots to do, but remember our trick, 'img', then hit 'tab', it fills it in, thanks Dreamweaver. The source, where I want to get my logo from, I'm going to type in 'i' for images, see it goes to 'images', great, click on that. Now, there's nothing in my images folder, so it just comes out with 'Browse', so I'm going to use that, I'm going to go find the exercise files that we downloaded, so 'Video'-- if you can't find the exercise files, you probably have by now, but there'll be a link somewhere, on this page. 

Let's go to 'Video Background', and let's go to the 'Images', and I've got a 'svg' in here; it could be a 'png', 'jpeg'. We use 'svg's, we know how to make them,    Photoshop and Illustrator made them, they are 'Scalable Vector Graphics', and they're awesome for resizing, nice and crisp. It's not inside my website at the moment, it's saying, "Warning : Would you like me to copy it there?", I'll say, "Yes, please." "Where would you like me to put it?" "In the 'Images', please." Same with the image files, they need to have hyphens, no spaces. Hit 'Save'. There he is. The 'alt' text needs to go in whenever you put in an image, and this is used by screen readers for the visually impaired, and it's also used for-- Google uses it, and if you've ever done a Google image search, this is how it knows what you're talking about.  So it's going to bring me my Bring Your Own Laptop 'BYOL' logo.  Great, let’s check in the browser. Boom! It's not there. Where is it? It's actually there, it's actually underneath here. What happens is, when you put things with the position fixed, they're all out of sync, and they don't know who's on top, and they all try to fight it out, sometimes the logo is on top, and sometimes the video's on top, it's pretty much with this first in this list here. 

So what we need to do is go to our 'css', and actually tell our full screen, our video to be something called as a 'z-index'. So, 'z-index', and by default everything is '0', so anything under 0-- that image is going to be '0'. Anything under 0 is going to slip underneath. Some people put in 100, some people do 999, it doesn’t really matter, whatever floats your boat.  Now let's go and check it in the browser. There he is. Hello! There he is, my logo on the top. And essentially, that is it. If you already know how to go ahead and position things, do responsive websites, and put a header and a logo in, you can skip to the next video now, because in that video what we'll do is, we'll cover things like mobile and responsive stuff, but in this video I'm going to plough on, we're going to build our sites, pretty basics, so if you knew, we're just getting started, follow along, let's build it to keep your skills up.

So in Dreamweaver, what we're going to do is go to 'Source Code', and we're going to kind of build this uip now, so this logo here, actually I want the video to be at the bottom, just because I wanted to-- doesn't really matter where it goes - not in this full screen at least, so I'm going to cut it, and put it underneath this guy, and mainly because-- now, I want my website to load above it, and the video to be the last thing to load, just have this text on the screen first, and then this thing can load at the end. If we got a really long video, it can take a long time, and then it's going to wait for this to load before the   things underneath it. 

Great! So what we're going to do is build up a kind of a rough HTML5 structure, and inside of our body, the first thing we need is a 'header', so I'm putting in 'header' heading tab, and that is everything that goes on the top of my page, so in this case it's going to be, it's on my mock up, it's just going to be, the logo goes inside of it, and my navigation. If you want a colored bar on the top here, that would be considered your header. 

So, inside header, I'm going to put my logo, we got him, here you go, inside you go. You can see a kind of indent thing nicely; kind of see where you're at. I'm going to put a few 'return's in, returns do nothing in code. Keep checking. Have I broken it? No. It still looks fine. And I'm going to put my navigation in, so navigation goes in a tag called 'nav', hit 'tab'. Now we're going to put in those three words that I had in my example here. You can see them here, and they go inside. 

Building a 'nav', you build it like this. You put in 'ul' which is an unordered list, and that's like a bullet pointed list, and we will move that bullet pointed list with some styling in a second. Don't press return, press 'tab', put in 'ul', and inside of that-- the ul is just kind of like the wrapper, inside of it is 'li's. And those li's are the different bullet points in here, and I need a couple of them. So I could do this, and-- so I need a couple of list items; inside that list item, we need a clickable link, and that's called an 'a' tag. If I add 'a', and hit 'tab', each 'a href' is what gives it a hyperlink, and where is it going to go to? I put in a hash, '#', because I don't have any way for it to go to yet, and this would be where you'd write our 'Contact Us' page to our HTML, but we don't have it, that's why we're going to leave this as hash, '#', and you put in-- I can't remember where's our first one? Where is our first one?  So, 'PORTFOLIO'. Hit 'Save'. Let's just check it in the browser, and you can see there's my first little 'nav'. It's ugly looking, but that's how navigations are built. They're built with 'ul's, it will move the bullet points, and the blue, and the underline, and makes them clickable. That makes a good 'nav'. 

Back into Dreamweaver, what you can do is, you can have your cursor inside of this, hit 'duplicate', which is 'Command-D' on a Mac, or 'Control-D' on a PC, where you can copy and paste it, it's up to you. You can keep doing that. I'm going to show you a super cool way-- I'm going to try and impress you with my super skills. Watch this. I’m going to-- We've been using this, right? Hitting 'tab', and we're like, "It's pretty cool," saves you a bit of time. Especially for a 'nav', what I want is an 'ul', and inside of that 'ul', I'm going to use the less than symbol, greater than, ' > ', and inside of that 'ul' I want a 'li', and how many 'li's would I like? I'd like five of them, please. And inside of that 'li', I would like an 'a' tag. I know it seems a bit weird, and if you're new, don't do it this way, just do it the long way. But a few of us, you've done a few other tutorials, and you're starting to get pretty cool, you can do this kind of thing, it's called 'image', so it's kind of code hinting stuff, it just means-- remember to hit 'tab', it built that whole kind of system for us. It builds-- A 'li' with a bunch of them, I said five, I really only wanted three of them, and just kind of dumps it in there, pretty cool. I love it when it when you can save time like that. 

The other thing we can do is-- and it's a cool thing with Dreamweaver, these multiple cursors. I want to put in that hash, ' #' for all of these. Remember, when we don't have any room for it to go, we put in the hash, '#' or pound sign, but I'm going to-- It's not that hard, I could put in hash, '#', it's fine. What I can do is, if I can hold down 'Command', that key on my keyboard, and click it a couple of times, and you get this multiple cursor, you see one giant cursor, and it just means that when I 'tab', it can do that. It all goes in one at a time. And you can have these cursors everywhere, watch-- look how many cursors I can have. It's still all flashing away. That's not going to be useful, but it's great when you're adding classes for different tags. Anyway, Tips and Tricks.

So, this one here needs to go inside the 'a' tag, and remember this one's 'PORTFOLIO'. Where are the other ones? 'PRICING' and 'CONTACT US'. So, 'PRICIING', and 'CONTACT US'. Great! Check in the browser. Here they are, they're kind of ugly. So now what we want to do is get them up on the top here, where we'll put them side by side, and get rid of all this ugly formatting; and that is done over 'css'. So we're going to leave this guy here, we're going to jump into our 'styles.css'. The first thing we'll do is, we'll push him into the top right, so we're going to add-- we're going to style the 'nav'. Remember, the tags that don't-- remember, those are the ones we named, these are the pre-made ones, so no full stop in the front. We put in our curly braces, and to get them to go in the top right, there's something called 'float', and we're going to say, "Float to the 'right', my friend," semi colon, ' ; '. ‘Save’. Check in the browser. Boom! Look at him. Look we have over here? So its floated to the right. Let’s look at what else we need to do. 

Next up, I want to style my 'ul', so what we do is, we say-- not just all the ul's on the page, I want to do the ones that happen to be inside of this 'nav'. So if I do all ul's, I might have a list on another page, and it's going to be somewhere it's stuffed to, but I don't want it, so, just the ul's that are inside the 'nav', please. I would like you, my friend, to give it bullet points, that's the first ugliest thing, so I've typed in list, there's one in here called 'list style type'. Now if you are unsure what some of these do, can you see down here? Dreamweaver's quite helpful; it tells me what this thing does. And I'm going to click on you, and then it gives me some examples of what I can do, and in our case, you can put a decimal point, put in a 'disc'. I'm going to put in 'none', and then semi colon, ' ; '. 'Save' it, let's have a look. Cool! Bullet points gone. We're always going to keep going through that, and keep removing some of the styling.

The next thing I want to do is I want to do it to the list items. So, I want to do it to these 'li's, but I only want to do it to the 'li's that happen to be inside of 'ul's, that are inside the 'nav'. So you guys, I want you to be a 'font-size', so 'font-size' of '0.8em'. If you never used 'em' before, you can use pixels, it's not a good practice. Em's are responsive and better in lots of ways; All it means is-- by default a website is set to 16em, and the user can go off and change that default if they need to. So if you hard code pixels, that won't allow him to do it, so we need to let them pick the font. Nobody does change it, or not many people at least, but we need to kind of abide by the rules for people that need a little bit more help using a browser.

So, if I put in '1em', I would get 16 pixels, so I want 14em, which is about-- I'd say, 14 pixels is about 0.8em, so use 16 as your basis, and work out some rough cases from there. Often you have to go, and test and check. So that would be the font size. What else shall we do? I've played around with some 'letter-spacing'; just to separate them out between the letters, so I'm going to use 0.2em. 'Save' it, let's have a look. You can see, it's spaced the letters out.

What else did I do? I did the font sizes, slightly smaller than normal, but I want to right align it, so I can do 'align', and I want to go to 'text align', and go to 'right', semi colon, ' ; ', and I'm aligning it this way, you might like this styling that way. What I want to do is put them side by side, and it's something called 'display', and there's a few options 'inline-block', at the moment they are using 'inherent'. Save'. Jump in here, and you can see, 'in-line' block just means they're going to be in a line, and I want to put some spacing between them, so I'm going to put some padding in, and I'll put some padding on the left, if I put it on the right, it's going to look a little weird, I'll show you what I mean. I've decided at 50 pixels, looks good. I put it on the left hand side, so this has got-- that's got 'CONTACT ME' on the left, this one on the left you don't notice. If you put it on the right, it's going to put 'Contact Us' from the edge; you might want that, and that's cool.

Let's go and move the colors and the underlines. Now we can't go and remove the color and underlines from this little group here, it just doesn't work. The 'list item' is the kind of list, but not the actual fonts itself, so we need to go down a little bit lower, and in our case it's the 'a' tag. And if you're unsure which tags to be styling, often it can be really handy. If I click inside of here, you can see, there's my 'a' tag which is inside an 'li', which is inside the 'ul', which inside the 'nav', which is inside the 'header', which is inside my 'body'. You could write all of that out, so we just did the 'li'. You could write all of this out, but there's no real point, and that's unique in our first navigation, so it stops there.

So I want to style my 'a' tag which is inside this, inside this, and then inside this, so let's go and do that. So, I would like to style my friend, things that are-- 'a' tags are inside the 'li's that are inside the 'ul's that are inside the 'nav'. Curly braces. And I want to do 'text-declaration', that's the first one, and you can see-- you can put in 'over line', 'underline', 'line through'; I want to go ahead and hit 'none', because by default it has an underline, nobody likes it. 

Next one is going to be the 'color'. Color just by itself does the font. You can use your 'Color Picker', pick any color you like. If you know that hexadecimal number-- I'm using 'RGBa' here, because you can use transparency; it's new, and it's awesome, and it works on all browsers. You could just use 'hex' if you're used to using those little 'hash tag's, nothing wrong with that; it's not too old school. You can even do this, weirdly, you can write 'white'. That works too. 

So now I have some links that are clickable, they don’t go anywhere, because they got those little hashes inside, there's no errors though either. Some spacing, got some line spacing. Let's look at doing the font. Now we could style the font here, so I could go in here, and say 'font-family',    and I could tell it what to be. Now the only trouble with that is that-- the next thing I do, which is going to be this bit of block text here, it's going to be the same font. So I'll have to save it again. In this 'p' tag, same font, but in same font. The whole website is going to use 'Arial'. So what we do is we say, instead of styling each individual tag, is at the top here, remember we got a body tag, we say, 'You're my body," I'd like everything that is inside this body tag, which is everything on my page, remember, I'm going to have a font family of-- and what are we going to pick? There's a bunch of groups here, I don't like these little groups, I prefer just to have 'Arial', put in a comma, and then I'm going to have a fall back of 'San-Serif'. Semi colon, ' ; '. Nice!

Now if you want to use other fonts, 'Open Sans'-- they're like the new 'Arial', you can either use Adobe Fonts, or you can go off and use Google Fonts; We're not going to cover it in this one because this is going to be pretty epicly long any way, but check out any of my other courses, especially the Bootstrap one for Dreamweaver, that will cover fonts in a lot more detail. So that's our fonts done for everything that appears on the document.

So next thing we're going to do is, I'd like to-- my example's here, tucked that from the edge, that's going to come on like a fixed width in the middle, and a stretchy outside, that’s what I want to do. At the moment, my example, here he is here, he kind of-- this guy is firing all the way to the right, and all the way to the left, and that's not quite what I want, so if I want to put in something like fake borders in here, so let's go and do that, it's quite easy. We do it to the body, the body is the middle of everything, and we say, "You', body. I would like to have a 'max-width' of"-- it's up to you what you put in, I'm going to put in 1024 pixels, it's either that or 1200 are the really common sizes, so 1024 is the maximum width that box can be. Let's have a look, it's going to kind of work. So it's fixed it to that sort of size, but it's defaulting to left, so we want to stick it so it's stretchy in the middle. Can you see, 'max-width' is really nice for a responsive sites, so don't put in the 'width' because that will physically tell it, forever be 1024, whereas 'max-width' says be whatever up until a maximum width of 1024. Hey, responsiveness. And to get it to be centered, is something called 'margin-auto'. So you put in 'margin-left', and we put in 'auto', then you put a 'margin-right', put in 'auto', and that just means I'm going to be centered. Nice.

Okay, so what we'll do is, we'll leave this here, I know we're not finished yet, but what I'm going to do is, I'm going to break this into two parts so it's not so long. That will be it for the moment, we'll go through and do the rest of the site. If you feel like, "I know what I'm doing now," jump to the next one again, and the one after this, and you can look at the responsive mobile stuff of video, because now we're just getting into basic web design, which is cool in getting our skills up, but you can skip along if you like. All right. See you in the next one.