Hey, my name is Dan. Uh, in this video is one of the production videos. So I'm gonna go through and pretty much step and repeat what we did for the nesting and the centering on all these different columns. Go back to straight to live view. Okay? And I'm gonna click inside this column and I am going to insert a row with a column.
Gonna nest it and it's just gonna be one like we did before. Great. So I've got click inside there. I've got my column, which is inside the row, which is inside the column, which is inside the row. Okay. Now what I wanna do is I would like, actually I wanted two columns in this case, didn't I?
Okay. I've just put one in. So if you've done that, it can either go to undo and redo it. Okay? And put two columns in which I, which is exactly what I wanted. But in this case, what I'm gonna do is I'm gonna drag this one down, okay?
Um, to six and add a new column. Now there's no difference between doing it, uh, the columns at the first time or doing it afterwards like this. I've still got one row with two columns in it. If you're unsure about it. Sometimes looking at split view and source code is an easier way to look at things. You can see I've got a row beginning and closing.
And inside of that I've got two columns and they're both large. Keep an eye on that. Remember, if they start becoming small, you're gonna have to go manually go and change them. 'cause we're dealing with the desktop view at the moment. Let's click live. All right?
Um, and what these needed to be is this top one here needed to be 12, okay? And it pushes this column underneath. So this guy can be out at 12 as well. Just so that means that when it does get down to mobile view, I remember I can scoot it up and get these guys going side by side exactly how I want it to be when I get to my uh, mobile view. But again, let's get it back to 12. So 12 and 12.
Inside of this one, I'm gonna insert my image, nest it. I'm going to grab my desktop. Dream of exercise files, uh, image. I'm gonna bring in my icon two and you'll notice that I bring it in from my exercise files, but it ends up copying and pasting it inside my actual site files. And that's a nice thing that Dreamweaver does for you as you go. So let's compare the two.
These are my exercise files on my desktop that you've downloaded and they've got everything we need. Okay? Over here on my bootstrap website, okay? With all my site files you see in images, it only brought in the ones that I've actually used so far. So there's the books and there's the two icons that I just imported. Okay?
And it will slowly but surely shuffle them all across. You can save time by just selecting all of these and pasting them all in this side here. There's no real difference, okay? Um, either dream weve doing it manually one by one and bringing it across. Um, but just know that we've got duplicates of this now. So if I go into Photoshop and start editing these icons in my exercise files, I need to copy them back across into my actual site, okay?
'cause they're duplicates over here. Alright, back to Dreamweaver. And while I'm here, I am going to add the class for this one called uh, center Block. Great. Click down here. I'm gonna insert paragraph, gonna nest it inside here.
We're gonna call this one app development. It's called app Dev. Great. And I'm gonna click out of it, have the P selected and go in here and put and text. You can see the different ones in here. So you get a sense after a while when you start seeing some of these suggestions, you might get an idea of what some of these other things might be doing.
Okay? So I know the center, there's other ones called hide info Justify. So you might experiment with some of these as you find them. I know I need center, which is great. So let's do it all again. And what I could do now is I could go through and save some time by going to Split View.
You can see here's this column. You can see it changing up here in my live view. That's that column. That's that column, okay? And there's nothing inside of it. This is the gap, okay?
Where stuff goes inside of it and there's nothing in it. So it's pretty empty over here though. This column. So here's that, here's that row. Okay, so there's the row over here and there's inside of, it's got another row and another column. So I can grab all of that.
Okay? So that's the nested row and the column with the image inside of it. And I'm ready to go. If I copy that and I go into here and I hit paste, so I'm inside this one, okay? There's another nested row and column I gonna do the same for this guy. Paste him inside.
Okay. And I've just got nice little replicas of each other. I'm gonna have to go and do a couple of things. Okay? So I need to make sure I go through and change the text in the image. That's easy enough to do.
I select on the image itself. I can click on here and this little where it says source SRC, click that or down the bottom here in your properties panel. It's up to you. It ends up at the same place. Click browse desktop, dream of exercise files, images. Let's bring in icon three.
Great. Make sure you add alt text. Now you can either old add it down here or you can add it up here. Okay, I'm gonna add it up here. And this one is gonna be called, what is this one? This one's gonna be called photography.
Photography services. Great. Make sure I add the Make responsive. You'll probably think in to yourself. You didn't do it for this one, Dan. I know, I forgot.
Okay, make responsive down here. This one's gonna be called photography. That's why I like Dream. It's kinda the best of both worlds. You get to do kind of visual stuff up here that help, uh, people like me who like to see things as they're working and allows me to kind of jump in and get amongst the code when I need to, to when it makes sense. This one here, Click.
This one's gonna be icon Four. Great. Gonna add some T text. And this one is video production. Great. Gotta make sure it's responsive.
Great. Down here, I'm gonna adjust this one video. All right. Um, and what you might notice is you're playing along with my exercise files and I've done a little sneaky trick because I wanted them all to have the same 'cause. I want this text all to line up together. Okay?
What I've done is in Photoshop, I've made sure that these guys are exactly the same height and width. Can you see this image doesn't need to be this wide. Okay? Um, I've made it extra wide using the canvas in Photoshop just to make sure that they're all equal so that when they start stacking they stack all evenly. If they weren't, this guy would be a little thinner. This guy be, wouldn't be as tall as this one here.
And this guy would be a lot shorter as well. So that just would stack and this text would rise up because there's a bit more space left and would all push up and nothing would line up. I'll show you what I did. I thought I'd include the dodgy versions just to show you the before and after. So in your exercise files, there's this little sneaky folder here called odd sized icons. Okay?
So if I use these exact icons, they've got the exact same name, so I'm gonna do a little thing, I'm just gonna replace them over here and it's gonna freak out and say, oh, you're gonna replace them. I'm gonna say yes, yes, yes, yes. Oh yes. Okay. So I've updated them, actually I've moved them by accident. But anyway, let's go back into Dreamweaver and it's not gonna update automatically.
Okay? It does eventually, but to, to speed it up, there's this little refresh button here. Can you see? Because they're all odd sizes, they're all trying to fill the width. So this thing to fill the width had to get really big. This one to fill the width, um, had was a little bit shorter.
This one's even a little shorter again. And can you see now the text lines up. So what I did was, and it's really common when you want to kind of do this kind of like stacking of similar shapes, is just to make the physical size in Photoshop match. If you don't have Photoshop or know it at all, there are lots of other image editing, um, programs. You're just gonna have to go work out and try and work out how to get the, um, documents to be the exact same size. If you want to though, I've got a video course on how to use Photoshop for web design.
Kind of precursor to this one if you wanna go off and do that. So I'm gonna go back and over here, undo what I did, okay? And I'll dump all of these guys back in. Great. And hopefully now I've hit refresh. They're all the same size, so I'm gonna have less problems.
Alright, that's the end of this production video. See you in the next one.