How to make your images responsive in Dreamweaver to match the page size.

Hi there, in this tutorial we're going to take our empty Div Tags and fill them with Responsive Images. Hey presto, like this. The cool thing about them is that they re-size as well. Responsiveness. Let's go and do that now in Dreamweaver.

So first up I want to add an Image to this first Div Tag here. I'm going to go to 'Insert', 'HTML' 'Image'. I want it to be Nested inside the Div Tag. I'm going to go to my 'Exercise Files', 'Images'. If you don't have the exercise files, there'll be a link on the page somewhere. If not, message me, and I'll hook you up with those. So, let's check in the browser. You'll notice that it's in there, but it's not responsive you can see, it's just kind of like just being itself.

The other thing to know is that it's a little bit bigger than I need it. Why? Because actually at Desktop view-- let's look at my example here. It's actually this size, but when it gets out to the Mobile size it's a little bit bigger. So I've kind of allowed for the biggest size to be exported out of here for Illustrator. Don't make it too big, because page load speeds is really important for Google and its rankings. So just something little bit bigger than you need is fine.

So to make it responsive we're going to create a Class. We're going to create in 'CSS Designer' 'styles.css', 'Global', I'm going to create a 'Selector'. This one is going to be called 'responsive-image'. You might call it something a bit smaller, and less descriptive. But there's three things you need to do. We need to say, the width is a percentage, and it has to be 100%. Just make sure, if you're having problems, it's 100%, and not pixels. CSS Designer panel uses pixels as a default and ends up being that quite a bit. So that's one bit, we need to make sure that the height is set to 'Auto'. And we need the Display selected to 'block'. And we need to apply it, so I've got my Image selected. So I've got the 'img' thing here. I'm going to say, my image is now '.responsive-image'. Nice! Let's check it in the browser now. 'Save All'. 'Save All'. Let's check in the browser.

You'll hopefully see, this guy here re-sizes. Awesome! So basically now, just duplicating this original Div here. We'll delete these ones, we'll also delete this text down here. You can see, this is the Text that was originally before we got the Image in here. Just kind of squidges down the bottom. Delete these, delete these columns. Let's go and do that now. So let's get rid of the Text first down the bottom here. I've got my Div Tag here, beginning and ending, and there's this Text squidged in here. I don't need him anymore. I find it's always easier to do in Code view. Gone. Also, I don't need any of these guys. I'm just going to delete them down in Code view. That's why we love Split view in Dreamweaver.

Next thing I want to do is duplicate this thing here. I don't want to duplicate just the Image, I want to duplicate everything, because at the moment it's just the Image selected. Same there. I want the surrounding Div Class, so, that is my Column. So that's it there, so 'col-lg', 'float-left'. I'm going to hit 'Command D', or right click it, and go to Duplicate. Or 'Control D' on a PC. And look at us flying now. So we've got six of them. Obviously, you can make nine, it will keep going. What we want to do now is go through and just switch out these Images here. It's not going to be a particularly sexy process, and we're not going to do anything else than this, so you can skip along if you like. But if you want to follow me, let's click on this Image, click on the little Stroke Lines. And in here, we're going to go and grab-- 'Browse for Files', 'Exercise Files', 'Images'. Go down, 'thumbnail2', great.

Now you definitely should be adding Alt Text. So this is the project, give your project a name, it's the project, a UI project, and add all the details you can, because you want to be good, and Search Engine friendly. I'm not going to, because I'm lazy now. But if this is my own site, I'd 100% go and do it, but this tutorial, I'm just trying to speed things up. What also I'm going to do to speed things up is, I'm actually just going to go to my 'Exercise Files', 'Images' and grab all of these guys. Actually I've got these first two, so I'm going to copy them, put them on my 'Desktop', inside my 'Images' folder. Just so that now, I can go into here I don't have to copy and paste every time. I can go into here, and I can just change the name to 'thumbnail3'. Change the Alt Text, don't forget. This one here. You. You. You. Exciting stuff.

Other things that I could do is, when I click these, where are they going to go to? Because that's actually going to happen later on. I can do it now, I can just put in hash '#'. It's up to me, if I want to do it now or later on. Done that one. We'll go and do that later on when we actually build those set of pages. Still test this in a browser to see how good it looks. 'Save All', check in a browser. And, hey, look at that. I love it! Especially when they're all in new colored images in here, starts looking like a fuller website now.

So the next thing we're going to have to do is just to figure out what happens when it gets down to Tablet, like this, because at the moment, just keeps going down in those three rows. So I want to change it when it gets to Tablet and Mobile. And we'll do that in the next video.