Dreamweaver - Building Responsive Bootstrap websites
Daniel Walter Scott || VIDEO: 15 of 53
Hi my name is Dan and in this video we are going to look at adding rows and columns. Now what we need to do now is, we’ve added our containers fluid, those are the ones that stretch to the edges. Now we need to add our internal containers and split those containers up into little boxes we can use for text. Now in terms of our Photoshop mock up, we want to bring in a container that fits inside of here and allows us to put this content, the title here and this text, inside of it. So lets do that.
Lets make sure that we've got our top box selected, band-hero, lets go to insert and lets put this one called container. Now this is one, have a guess. Which one should it be? Before, after, wrap or nest. If you said nest, you are correct. Oaky so I've got this hero band selected and I want to nest it, which means I want to put it inside. You’ll see I've got a nice little fixed width inside of here. That is inside my hero band, great. So now, what goes inside this? I could start sticking content in here but you're not meant to. Containers are just meant to be the wrapper around the outside; it’s meant to hold these things. Which are a row and a column.
So, you need a row and a column so in our case we are just going to need one, we are going to have this one row and one column. So a column goes inside of a row. Let me have a little demo actually to make that a little bit more clearer. I’m going to insert, I'm going to make sure this container is selected; I'm going to go grid, row and column and its going to say again, which one do we want to do? I want to put it inside the container so I pick the nest. And I could have three columns if I clicked okay I would have a row which is the kind of outside then inside of that there is three columns. But I'm going to go to undo, edit, undo because all I want is one row, one column. So click that, click nest and I'm just going to click one, it adds the row because it needs it, by itself and we will add the column based on what you type in here.
So great, I've got one row with a container inside of it, now I can start putting my text in. Now if you’ve got to here, we’ve done something really wrong and its going to cause us no problems at the moment but a lot of problems later on, not a lot of problems just a lot of time wasted later on when we are working on our tablet view and our mobile view. The reason is, if I select in here, you can see I've selected the column; there it is there, inside my row, which is inside my container, which is inside of the fluid band. So they’re all nested inside each other but the thing that’s happened that we nee to be careful of, is can you see this column here? It has a class applied called sm which just means small.
Now small refers to a mobile phone and we are going to use that later on what its done is, its picked small because, can you see this little slider here? It’s halfway through, this is what it considers small, this is what it calls extra small and way out here, which I can’t see because of my screen size are medium and large. And I need to be dealing with large for my desktop. So, Dreamweaver by default, if you’ve got a small screen, you're going to have problems. Now all it is, if you’ve built this site for desktop view and later on you try and go through and try to make it mobile. It means you're going to have to go through and change everything, do a find and change From everything that’s currently sm to lg which is its large. So what we’re going to do is we’re going to go to undo. So we’ve got rid of, its just a container now with no rows and columns.
Now to get Dreamweaver to play ball, we need to tell it we are working on the desktop view. Can you see here? I wanna say, its set to sm at the moment because of how wide my screen is, but if I say medium, it’s kinda gonna jump out, you can see it kinda goes past the screen there, that’s almost it, so I'm going to pick on large devices. It just means when I click and add a row and a column and I say its going to be nested and its going to be one row, one column. You’ll notice that it uses the class, if I click inside, of small. Now to get around this what we need to do is we need to trick Dreamweaver into thinking it’s a bigger size. Now you think you’d just go down here and pick large devices, and it will display that, but when we add it, okay so if I go to undo and I click inside here and I click add, even though I’ve set it to be large; nice and big. And I go to add a grid and a row, nest it in one, it still comes up as small. So hopefully this is a bug, which gets worked out, so test yours. But what I do is I click inside and what I'm going to do is I'm going to zoom out.
Okay so I hold control minus or command minus and I just make sure that this is somewhere over here. And another way to zoom is undo view and you can use the long way under magnification and you can zoom in and out or you can see here’s a few shortcuts or you could jump to 50%. So the way is to trick Dreamweaver. What we need to do is we need to zoom out a little bit so that we can see the rest of these media queries. So at the moments that’s our mobile view. That’s what called xs and there’s another one called small, we want to get all the way out there to the desktop view. Now we are going to talk about media queries in more detail later on but when you are building your desktop view with me now, make sure that you can see the desktop view. So I'm going to hold command minus and click it once on a mac and that will zoom out a little but. If you're on a pc, hold control minus and zoom out and then obviously control plus or command plus will zoom in. so minus and plus zooming in and out.
So I can now see this desktop view, great. It just means that when I am viewing in this area, its great, I can see my whole site. But it also means that when I click in here and I add my row and my grid, I click nest, and I type in one, hopefully now when I click inside, can you see that its applied that large class. Now you could go through in code view and go and change it every time you hit small, go in and change it. There’s no big problem with that. You could wait till the end of when you are doing your desktop view and go and do a fine change of them all in one big go, its up to you. I like to just zoom out and make sure I'm putting in this lg, which is our large one to start with. So I've got one row, you can see in there, and inside if him my column and that’s where my contents is going to go. Now I'm just going to add a bit of text to the inside of this one here.
We are going to do type in its own little video later on so we are just going to add some placeholder text. Now I can click inside here and I can type something but its actually quite tough. But what I should be able to do now is go into insert, and insert a paragraph, which is a bit of text that goes inside. But its not working, its all greyed out. If this ever happens to you, you just got to make sure that you’re on your source code version, not on your main css or any of these other ones. If you're on source code and go inside here, now I can go to insert and ago to paragraph. Again, I think this is a bug, with Dreamweaver, hopefully it gets fixed. But so you know, I can click paragraph, I'm going to nest it because I want it inside that column. And its just added a bit of default text in here. What text am I going to add, I’ll just add the real placeholder text there which says “lets make this awesome”. We are going to go through and style that properly later on but lets just leave it in here so we know that that’s this bit of box here. Actually lets add all of that text. So we can edit it by either double clicking it up here and you can see I can get it. You know you are editing text when it goes orange and everything else kind of fades out in the background. Or I can edit it down here in code view. I'm going to edit it in live view; we are going to stick to a more of a visual way of dong things.
So I'm going to double click in here, actually that’s meant to be in caps, lets make things awesome. I'm going to zoom in so remember command plus or control plus. Now I want to add some text after this. I'm going to put in the fake text that goes in underneath. Can you see its just lorem ipsem, mixed up kind of Latin words, just a placeholder until I get the copy written. And you’ll find it in your exercise files you can go to text, open it up and there should be a bunch of texts you can copy and paste. I'm going to paste that into Dreamweaver.im going to double click so it goes orange, hit enter and paste and its going to put my text in there. We are not going to style it for the moment, its just going to hold there. We are going to do some styling later on when we look at fonts. Next thing is, lets add the container to who we are. And if we look at Photoshop, there is a container around the outside, but there are also two columns, one for my image and one for my text on the right here. Lets add it, lets click inside our, the band for who we are and we are going to go into the container, we are going to put it to be nesting inside of it and then we are going to add our grid and our row. And this one is going to be nest inside but I would like it to be two columns. So we've got this outer row, but inside of there, we see here, I've got two columns, you can see two columns and they’ve done it by dividing these columns, remember we talked about our grid earlier on.
So that there’s an underlying 12-column grid so to split it into half there is 6 and 6. Well you’ll also notice that I did not zoom out so it’s done a small six which is bad. So go to undo, edit, undo till it goes away. Sometimes you need to click out edit, undo. And I'm going to zoom out a little bit so I'm back to my large view, so remember this edge here I can see the edge of my large desktop. Click my container, insert a grid and a row, nest it inside and put two columns. Hopefully now, you will see I've got a large, it says six and this side says six so its in two halves. Now, in terms of the layout, it’s slightly different. I want to do a smaller box on this side so its not fifty/fifty. So I'm just going to guess it for the moment, I'm going to sya you are about four, you can see when I drag this right-hand side here, it actually changes the class name. Now if you were dong this in full code view you could go through hand just change it from six to four. But I guess Dreamweaver perk is you kind of get to do it in a more tactile, visual, wizzywig type of way.
So there he goes, he’s four and you can see this one is still six and there’s a bit of a hole left over the side there. So what I want to do, is I want there to be a bit of a buffer between these two, so maybe a column spacing between these two. So to do this, I do it to this right hand side here, if I drag it in, you’ll see that it’ll adjust how many columns it expands. On the opposite side, this one here doesn’t do what you think it might. On the opposite side, this one here doesn’t do what you think it might. You think if I drag this side, it’s going to do the same but it doesn’t, watch what happens. If I drag it this way, so it’s six at the moment and if I drag this out, can you see it says its still six but its actually added this extra class called offset 1 for the large document. So in my large view, its going to offset this one. Can you see this kind of hazy line here, it’s a little hard in this smaller view. But you can see there’s a little hazy line, which means there’s going to be this offset or this buffering on this side. So I want this little buffering here so I want to drag him so he’s filling that gap here, you don’t have to full that gap, but I've got four on this side, I've got a buffer of one and I've got my seven and that will make up my complete grid of 12.
Now this next bit, I don’t want you to follow along, I'm just doing it as an example. Say you do have just one container fluid around the outside and you want to start dividing this internal container up into lots of different parts. So there are columns and rows, now at the moment we've got one row and you can divide that up into columns. So if we want other rows underneath, you can do it by, what you need to do is have the rows selected, so if you’ve got the columns selected like this, you =need to go back up and click here in your parent row. And you get a nice little option over here that says add new row, or I could duplicate the one I've currently got. But if I go to add new row, you’ll see it here, it adds a new row with our two columns in there by default. And I could go through and style this. I could decide okau, this next row is going to be the same, so its going to be four, this one here is going to have an offset of one and this one here is going to have seven.
Now lets say the last part of this particular website is four columns. So what I'm going to do is click the parent row, I'm going to say add a new row and in here I'm going to make this one, so if I want four I need to go three and can you see I've got a big hole over here now. So I've got two columns but they’re only three and three so I need another two. So I can say, I've got the columns selected, and I can say duplicate and I can duplicate it again and I've got this very thing, and I can start filing it with content but I've got a website with these two, another row with another two and then this last row with four columns. I'm going to undo those, I just wanted to show you an example of how you go off an start building a site if you only had one fluid container. But we've got a few different ones, so this is this guy done now. We are going to add some content in there, just really basic stuff so that it fills it out a little bit. Lets copy and paste the text that goes into here, I'm going to go it on my text document and there it is. Who we are, and paste it in there. So remember if I click inside of it and this is greyed out, it isn’t at the moment, it probably means you’ve got your css selected. So make sure you're on source code, which is the html. And lets go to insert paragraph and inside there, I want to nest it inside and I'm going to select it all, it goes orange, I'm going to past it in there and put a return in after this one, click out and I've got some basic text to work with.
Now what I want to do is add it to this image here. Now, I've got the trouble of, if I want to zoom in now, watch this. If I zoom in, it snaps and it outs them above each other because I'm looking at it now at a smaller view, a mobile view. So I'm going to have to zoom out a little again. And you’ve got two options now, if you're working on a really tiny screen like I am at the moment doing this tutorial. You have to work out at this view or you can close, can you see there’s a little double arrow here, you can close that and then zoom back in and see what you get to. You can see my ones still not big enough to get out to the large view so I'm always going to have to zoom out when I'm working on Dreamweaver on this laptop at this resolution. Now, I normally work, I love my laptop, but I normally plug it in to a bigger monitor so that it helps me work on these larger sizes. If you're working on a mac book air, like an 11 inch, its going to be tough work, you might need to invest in a screen, it doesn’t have to be an expensive screen, it just has to be wide. Okay, so I'm going to pop that back out so that you can follow along with me and I'm just going to have to be zoomed out a little bit and just look at everything a little bit tiny. But don’t worry, we are going to look at previewing consistently in a second, which means we can do stuff in Dreamweaver and see what it’s going to look like in the browser. So, you can see here, I've got my text; I want to add in here that little image.
So I've got the image in, we are going to images in more detail a little later on in the tutorial, but lets just do a basic one. So I'm going to select on it, I'm going to go to insert, and I'm going to go to image, I'm going to nest it inside the column I've got selected and I want to go to my images. So I want you to go to your exercise files, mine are on my desktop, Dreamweaver, exercise files, I’ll go images and you’ll see in here I've got one called graphic-old-books, that’s what’s going to go in there. Lets click open, and voila, it fits in here. So we've got our first little image. Now we are going to do images in detail remember later on but just while we are here there are two things you need to do whenever you put an image in. We are going to do the alt text, and the alt text is to do with what Google sees because Google can see your graphic, it can see the file name of it, graphic-old-books.jpeg. And that’s reasonably descriptive but most people have images called img4472 and that’s not going to help Google. What Google wants to see and what it wants for its users is a description. And this is what here in the alt text is for.
So I'm going to add alt text of old books in a library. And what that’s used for is, if I click enter now, and if I click on the object here and I go to my code view and make sure I'm in source. You’ll see that there’s my image, that’s linking to this image here, and here’s my lovely alt text. And that is used by Google, because Google cant see the image, it’s a computer, that goes around and crawls the code but doesn’t actually see this image like we can. And what it wants to do is a it wants to know what it is so it can index it and know what you're page is about. But what it really wants it for is for people who are visually impaired or blind. They have software on their computers that read them websites so when the website gets read out to somebody, its not just here is an image called img1147, its actually describing that image using your alt text. So its really important to make sure you have this on all images because goggle likes it as part of its rankings and you want to make sure you describe it well. The easiest way to do it is imagine you are describing it to somebody who can’t see it.
Lets go back to live view. So alt text needs to go on and the one other thing you need to do when dealing with the responsive BootStrap sites is you need to select on it and I'm going to zoom in a little bit just so that you can see it on the screen. And can you see this little sandwich here? This little three stripy lines, so if I click on that, you need to add this one that says make image responsive. What it does is, without it, see if I zoom out, can you see that it doesn’t actually fit in this box? He's too wide and he's the wide height this box pushes out but doesn’t actually fit within our four columns, he’s a bit stretched out the side. So what we need to say is, click on the image, click on this little stripy line, click make responsive and watch it. Can you see it actually fits in with the column size? Which means its going to push his boundaries out and its going to cause loads of problems when you are trying to style this thing down to mobile or even our desktop there it didn’t fit.
So make sure, click on this little option here that’s says make image responsive and if you don’t have that option or you have an older version of Photoshop, all you really need to do is add the class called image-responsive. So say we don’t use this option here, lets turn it off, can you see its just adding that class. You can manually type it in if you want. So turn that off, add it by going .img-responsive, it does the same job. Either which way you want to work. Zoom out again, and now it will stretch and contract for the different sizes later on. All right, and that the introduction to our rows and columns, we haven’t styled any of our text, we are going to do that later on. But, remember its always good to have at least a container, it doesn’t matter if it’s a fluid one or just a regular fixed width container. Then you need a row and then inside that is always a column.
Even if there’s not splits into columns, you should have this column here because it’s the column that we apply that how many grids it spans. You can see at the moment its spanning the whole 12, this one here 7, this one here 4.
All right that’s it, lets go into a production video where we add all the rows and columns to all the other pages.