Free Dreamweaver CC 2018 Course – Introduction to Responsive Web Design

Hi there, my name is Dan Scott. In this video we’re going to turn youfrom Web zero to Web hero… and look to build your very firstresponsive web page using Dreamweaver. Now you can follow alongthis tutorial perfectly. You just need to downloadthe exercise files. There’s a link down in the description,it’s free to download. Go and get that, pause the video,come back once you got the files.So the goal of this tutorial isto expose you to modern Web Design. We’re going to look at termslike Responsive, HTML5, and CSS3. They sound fancy but they’re actuallyquite easy once you understand them. We’re also going to look at how… Dreamweaver makes itsuper easy for us to do. Actually what I really wantyou to get from this video… is to get you to a pointhopefully at the end… where you’re like, “Actually, it’snot as hard as I thought it was”… and “I’m pretty excited aboutgoing off, learning more… and building my own site.” Let’s get into it now and start working.So first up, let’s talk about the process. So first up, you’ll need todesign your website first… in something like Photoshop or Illustrator. You can see here, I’ve designedwhat my website looks like on a Desktop… what it looks like on a Tablet,and what it looks like on a Mobile. You can see, they are very similar… but each design kind of takesbest use of the device sizes. It’s just some font size changes… some reordering of boxes to makeit look out on different devices. And this is what we call Responsive. So the website’s going to change shape,and change form a little bit… depending on whether it’sMobile, Tablet, or Desktop. So that’s our first big termout of the way… Responsive Web Design just means… the website changesto best use the device. So it doesn’t matter, Photoshopor Illustrator… but I’ve designed mine here in Photoshop,now we need to translate it into this. This is the finished versionof our website…Where it matches my Photoshopmock-up for Desktop… but when it gets down to Tablet… it changes there, I’m kind ofdragging my browser in and out. You see the font size changes,it becomes centered… the columns go from 3 across to 2. So that is our term Responsiveness,and we’re going to build this… and it gets down to Mobilewhere it’s just stretching 1 across. We’ll also do some stuffwhere you’ll notice that… there are 6 on Tablet,but only 4 on Mobile. So we’re going to deactivate some of them. We’re also going to changethe menu along the top here… you can see, in my Photoshop mock-up,they’re all straight on Desktop… but they kind of collapse into thisother version on the smaller devices. So we’ve worked out whatResponsive means… and we know what we’regoing to be building… Let’s go off now and start building it. First thing, open up Dreamweaver. Often at the beginning there,it asks you a few questions… like what color you wantthe background…And whether you want to bea Designer or a Developer. So what you want to do ispick ‘Developer’ for this case. If you didn’t pick the right option,just keep going through… and then you can change it up again… in here, the top right,and just pick ‘Developer… and it should look something like mine. Next thing we need to do isdefine a size. So go to ‘Site’, ‘New Site’. We need to do this for every new website. So if you’ve just got one, you’llonly have to do this once… but if you’re like me,and building lots of websites… you’ll have to define the sitefor every new one.So give it a name,I’m calling mine ‘Roar Cycles’. It’s the company we’re working for… and we need to decide whereon our hard drive… we’re going to keep this website… because all of our imagesand all of our HTML… all the stuff we make for this websiteneed to be kept in this same folder. So what we’re going to do isgo to ‘Local Site’ folder… click this ‘Browse’ button. And you could make your own ones… but because I’ve got some exercise filesalready, you might download them. So, the ones you’ve downloadedfrom the link in the description… go to ‘Responsive Exercise Files’,and just choose this folder here. No need to go in any deeper. The other thing you should dobefore you move on…Is go to ‘Advanced Settings’… and up here where it says’Default images’ folder, go to that. Just pick the ‘images’ folderthat I’ve created for you. If you’re making your site by yourself… you’d make your own folderwith your own images folder. We’re just saving time to jumpto the responsive stuff in this course. Let’s click ‘Choose’, and hit ‘Save’. So what I’ve done just to speedthings up is I’ve started the website. Just to get us going so we can jumpinto the responsive parts. So let’s go to ‘index1.html’. And this is what our pagelooks like in Code. We want to see whatit looks like in a browser. Down the bottom right here, it’s waydown the bottom here…There’s one called’Realtime Browser Preview’. It’s this kind of far right icon. Click on that, and thenclick ‘Google Chrome’. If you don’t have Chrome installed,it’s best to go and install that now. It’s the most common web browser… and it’s the one you shouldbe doing most of your testing in. You can use Safari or any of the others,but Chrome is our man. So this is what I’ve done for you so far. Just previewing locally in my browser. I’ve added a logo, this navigation,and this big pink box. Just to get the structure right…So we can start looking atwhat makes it responsive… because at the momentif I grab this edge here… it’s not responsive at all,it just kind of sits there. So let’s jump back into Dreamweaver,and add our first bit of HTML. We’re going to put in the Heading. Where are we going to put it? Now, we’ve got our Header here. That contains my logo, and my navigation. See those three little buttons there? Then we’ve got this other chunk,which is Main. Main is kind of middle partof the website… Header is generally justour logo and navigation. So Main here already has my Hero Box. And that is the big pink boxI’ve created already. It’s this guy here.So, inside of there is whereI want my Heading. We’re going to be designingthis Heading here… where it says ‘roarX, pre-order now.” So to put in a Heading, we needto put in something called H1. H1 is our Heading1, and Heading1 isthe most important heading on our page. So, the syntax works like this,just like, say… this Main here, it says ‘Main’… and it’s inside theseangle brackets ”… and there’s a ‘/main’ to close it off. So we need to do the same thing for our H1. So, angle brackets ”,down by your M key. Type in ‘H1′, and then close it off. So that’s the beginning part,just like Main here. You can see, the second partis the same word… but it has a forward slash’/’ in front of it. So, we’re going to type in ‘</'… and helpful old Dreamweaver has goneand filled it in for us. That's one of the perks with Dreamweaver.So the text goes inside, goesin the middle of these two here. So have your cursor flashingbetween the two tags. And we're going to type in 'roarX'… which is the name of our new bikethat we're launching. And we're going to say 'Pre-order' please. Or 'Pre-order now'. Hit 'Save', so 'File', 'Save'. And I want you to go and checkyour Realtime Browser preview. Now you can check backby flicking back to Chrome… it updates automatically… or if you'd like to,you can click down here… and click on Google Chrome again. Either way, let's get to our browser. You can see here, there's my H1,'roarX pre-order now'. And by default, it is black and bold,and a particular size.And that my friends,is our first bit of HTML. If you're new to web design, well done. This is our first bit of coding,you've done it. Next thing we need to do though is changethese default colors, sizes, and fonts… to something that matchesour mock-up in Photoshop. So let's go and do that nowlearning something called CSS. So we've learned what HTML is… we've added an H1, and we've addedsome text to it, that's the HTML.Now to Style this, we usesomething called CSS. I've created a CSS sheet here… in the 'Related Documents' bar,let's click it. And I've done some basic stuff already. I've said, that Hero Box that we've made. I gave it a height, and I gave it thebackground color of pink. So I've got some stuff to get it started,let's look at creating our own CSS now. So, underneath this curly brace,hit 'return'. Returns don't matter in CSS or HTML. You don't need that return, I justlike to space them out a little bit. Just to make it easy for you to see. So when it comes to CSS, there's somebasic syntax we need to follow. Basically you can copy what's up here,let's say Body. So this is the name, H1. There's a space, and you can see… there's a curly brace atthe beginning and the end. So that's what we're going to do,type in the first curly brace…And Dreamweaver's really clever,and it goes– you never have justan opening without a closing… so it fills it in there for you. so it's put in the ending one for us.Let's put in a 'return'. Return is because it's abetter space to write things… like this, the height and the color. So first bit of syntax, curly braces. Don't forget the beginningand the end, or don't delete them. Next thing we're going to do… is give this bit of CSSwhat's called an attribute… An attribute just means, I'm going togive it a thing, like the color… or it might be a font size,these are all called attributes. You can see there, I typed 'co',and it pre-filled in color…And I hit 'return', and what it did is… it filled it in, and addedthe colon ':' there. So the colon needs to go in. Next thing is to pick a color. Now the cool thing about Dreamweaveris that it has a Color Picker… or you pick from your libraries,which is really cool. So let's click 'Color Picker'. And what we're going to do isdrag this circle here… we can drag it around,we can play with hues… but what I want is for itto be in the top left hand corner. And that's going to be white.So drag it up there,and we're going to use white. If it goes horribly wrong,you can just type '#FFFFFF'… that is the code for white. Now the last thing, and the thingthat lot of people forget… when they're brand new to CSS… is you need to hit semi colon ';'at the end. So that's all the syntax you need for CSS. There's curly braces, and there needs tobe one at the beginning, one at the end. You type in the attribute, in our caseit's going to be the font color. And you put in a colon ':'afterwards. In our case, Dreamweaver did that for us. Don't forget the semi colon ';' at the end. Let's go and save it, but let'suse the 'File', 'Save All'.That's handy because it saves boththe CSS and HTML at the same time. They're actually separate files, so yousearch to 'Source Code', which is HTML.. and this one here is my CSS, they'reactually separate files in my website. So I find, when you're learning,it's better just to go 'File', 'Save All'. Make sure everything is saved,and then jump to your browser. Are you ready? We added some HTML, our H1,and we added some text. Then we've gone and styled our H1 using CSS. You're about to become a Web Designer. Ready, steady… Go. Awesome, huh? You've added an HTML, and you've beenable to style that HTML using CSS. That is the fundamentalsof all Web Design. We're going to do a few other thingsjust to make sure it matches our mock-up. Then we're going to move on and startlooking at specific Responsive Web Design. So let's go and finish it up. So to match our mock-up,we're going to do a couple of things… like I'm going to grab the Type Toolhere in Photoshop, I'm going to click…I know I want 62 points for the font,I want to push it down from the top… and away from the left here. So let's go and do that now in CSS. So in Dreamweaver here, let's puta 'return' in, and let's type in our font. You can see, it's giving mesome pre-filled options. I want font size. You can see, it put thecolon ':' in there for us. Now in our case, we wanted 62… actually I changed my mind,I'm going to use 55 pixels. Just wanted it a little bit smaller,just because. And I didn't forget to addthe semicolon ';' at the end. When your new that happens a lot. Put a 'return', we're going todo a couple of other things. We're going to type in 'Padding'. So I've typed in 'pad', and you can see,Dreamweaver, super helpful, goes…"You mean these?", and I say, "Yes,'click on the top. And for the top,we're going to do 120 pixels. Remember, semi colon ';' at the end… and the last one is going to be Padding,and I'm going to do 'Left'. And I want it away from the left,about 60 pixels. Let's hit 'Save'. And 'Save All'. Let's jump into a browser, and check it up. Awesome, huh! So that's basically it. We've dumped in our HTML,which is our H1… and then we've spenta lot of time in CSS… styling it, getting itlooking how we want… but now is the time to look atwhat responsive design does. Now, responsiveness is an umbrella termused to describe… some things we do in Code to make itadjust for different screen sizes. One of those things we do in Code… and probably the main oneis something called a Media Query.Now, what a Media Query is,think of it as a trigger. It only gets set off whena screen size is activated. So let's have a look atsomething I've made earlier. So this is what we're going to create,something called a Media Query. And it just says, trigger this H1 whenthe screen size is 768 pixels or less… but if it's bigger than that, don't worryabout it, ignore the stuff. So that's what it is, it's a trigger. Only gets activated when the screenis a specific width. You can see down here,there's a Mobile version as well. Trigger this H1 only if it's400 pixels or less. So let's go create that nowin our version. Where does it go? We're goingto put it underneath our H1. Put in a couple of 'return's. And this is the hardest bit of syntaxyou're going to write, I promise. It's not that hard, but we have to typeit in, follow me verbatim. There's the '@' symbol, and weregoing to type in 'Media'.Then after that, we're going totype in a set of brackets '( )'. Inside those brackets, we're going totype in 'max-width'. We need to put a colon ':' in next,make sure it's a colon, not a semicolon. And now we need to decide how bigour Tablet's going to be. Now you can pick any size here. A really common tablet size,or an iPad size is 768 pixels wide. We're just saying this Media Queryhere is going to be for Tablet… and that's what it gets the size at. Now as time goes by,this default will change… and you'll find different sites… use slightly differentpixel widths for Tablet… but it's a really common size,so use that for the moment…But know that it's not an absolute rule. Last thing we need to do,after this last bracket here… is put in a curly brace. So we add a curly brace… and put in a return,that is a Media Query. Now I guess it's a bit hard, there'sa lot of syntax that goes into that… but what you can do in futureis just copy and paste it… like I do, and do all other jobs. Now, what goes insidethis Media Query? Anything you want to do,but only be triggered on Tablet…What I'd like to do ischange the font size. If you can see here, my version… it goes from left aligned,and quite a big font size… down to this smaller size, and centered… so that's what I want to do,when the width gets down to Tablet… I want you to change this H1… just change the size and the positioning. Don't want you to change the color,the color's fine, so we'll leave that. Just the size and the positioning,so let's go look at that in CSS. So all you need is, as long asit's between these two curly braces… just here, we're going to type in 'H1'.And just like we did above here… we need to put in our curly braces,put a return in. And now we're going to go and Style it. I'd like to say something like,Font Size… I'd like it to be down at 40 pixels. Remember, semi colon ';' at the end. Make sure the syntax is right… you've got curly braceseither side of it… you've got a colon there, and a semicolon there. Let's see if it works.Let's hit 'Save'. Let's prepare ourselves… because we're about to enteran uncharted responsive territory… may be, for you. So let's go check it outin a browser. And the way to test is, we're lookingat Desktop view here, it's quite wide…But when we get down to 768 pixels… where that is? just keep draggingtill you figure it out. Watch this, come down. Looking at this font, I'm pointing at it,you can't see me pointing. Look at that. That my friends, is allResponsive Web Design is. There's other things, but thatis the main core part of it. It's that Media Queries triggerat certain widths… that goes and changes your CSS,your HTML is exactly the same.The text doesn't change,just changing the CSS for it. And that gets triggeredwith our Media Query. Well done, you. I hope you're excited… I remember, when I first figuredthis out, I was pretty excited. So let's go and do a few other things. So jump back into Dreamweaver. What I'd like to do also is,remember, we had to do a few things… we had to do a Text Align. So, in Code it is 'text-align',there it is at the top there. And I'm going to click 'Center'. You can see, this is the nice thingabout Dreamweaver.I don't have to type it in,or remember the syntax… I can just click on this… and all I have to remember to do… What's the last thing that goesat the end of all these lines… that everyone forgets? Semicolon ';'. Awesome! Hit 'Save', 'Save All', preview. Now it's centering. It's kind of centering, it's kind offlopped on, and centerish. It's because up in H1 here… this H1 is the one that getstriggered for my Tablet… but this H1 at the top here is telling itto do Padding Left of 60 pixels. So it's using that as well. So it's got centered,plus the 60 pixels on the side.So we can override that,say actually, I don't want that. So Padding Left, I wouldlike to be 0 pixels, please. Semicolon ';' at the end,'Save', check it out, now we're good. Awesome! So it's centered,it's a new font size. Drag it out, be impressed. So now we're going to go and doone more Media Query for Mobile… because nothing much changes,except the font size gets smaller… so that's what we have to do. So let's jump into Dreamweaver. So inside of Dreamweaver, we couldtype all this out again… or we can just be lazy, and select it all.Media Query, includingthe last curly brace. People forget that allthe time, go to 'Copy'. Or 'Edit', 'Copy'. I'm going to put a couple of 'return'sin under here, and hit 'Paste'. And what I want to do is, couple of things. One is, I want to changethis maximum width. I want to change it from 768 for Tablet… to a real generic Mobile size,which is 400 pixels. This changes quite a bit as well. There's so many differentmobile phone sizes… that I find 400 is a really goodkind of cover up for them all. I think the new iPhonesare 375 pixels wide… but some of the bigger LG, Samsung phonesare a bit wider. So I just make it a little bit biggerjust to cover all those phones. What do I need Left?I don't need Padding left… and I don't need Text Align. All I wanted to do ischange the font size… so I'm deleting all of it, except… I want to change youdown to 20 pixels.Let's hit 'Save', let's checkin the browser. Desktop. Tablet. Mobile. It's probably a little bit small. Let's say 28 pixels, I thinkthat's what I wanted. A little bit bigger. So that is our Media Queriesfor all of our different sizes. We're just doing three in this classto keep it simple… and often for smaller websites,that's all I'll do. Some websites go a bit harder,they describe seven different sizes.So they have seven differentMedia Queries, it's up to you. I like to stick to just the basics,Desktop, Tablet, and Mobile. One thing we'll do in CSS,and before we go on is… we'll add some CSS commenting. All this means is that–I know because I just made this… what this thing does,and what this guy does here… but I'd like to add some notes to myself… to my future self of Dan, to say… just so I remember what these things do. So, with your cursor just in front of… '@media' query for thisone here, the 768… is I'm going to, on theleft hand side here… click and hold down the onethat says 'Apply Comment'. That is a comment in CSS, click on it. Nothing much happens… you can see, there's a forward slash '/'and two asterisks '**'… but inside of here, if Itype in 'Tablet'…This just means, this getsignored by the browser… nobody sees it, it's just there for humans. It's for other web designers… it's for yourself in the future,to know what you're talking about. I'm going to copy it, use it down here… and I'm going to call this one 'Mobile'. So let's go to 'File', 'Save All'. Check if it's working in the browser.If yours isn't… and yours isn't going down to Tablet,then down to Mobile sizes for this H1… you can just hit the 'Reset' button. So let's all do that. You don't have to. If yours is working, carry on,I'm going to do it. So you can close down 'index1', and go upto 'index3'. Click on that one there. Preview in a browser. And it should look exactly how wehad it a second ago. Nice! So if yours goes horribly wrong… open this one up here, and we'll reset,and go back to this part here.So the next part of ourresponsive umbrella… we've looked at Media Queries,that's considered Responsiveness. Another one is Responsive images. And all it means is, if I check outone of my final examples here… it means, when I re-size the browser,or it goes to different devices… the images actually re-sizeto the best for it. You can see, this backgroundmoves here at the top… and all these bottom ones kind of re-sizeas well to best fit the space provided. So, we're going to look atthis background image first… then we'll look at theseimages down the bottom here. They're both slightly differentin the way we approach it. So, jump back into Dreamweaver,open up our 'Styles'… and what we're looking foris the Hero Box. That's the big box that I've got here.Let's look at the one we're working on. You can see, that's the big pink box that I've already created for us. And all I did is, I gave it a height,and a background color of pink. What I'd also like to do to itis give it a background. So I'm typing in 'background', you can go down here to 'background-image'. What I meant to do now, is use 'url',hit 'return'. This is the long way, images,I started typing 'im'. This is really handy, this pre-filling out stuff. Especially when you get down to here,when you get to pick these images.And you get to hover above them,and it will preview them for you. There's even a quicker waythat Dreamweaver uses. So I'm going to undo all of that. Up to you, you can type it in that long way. There's some really good code ??. And in this case, it's 'bgi',so 'background-image'. And all I need to do is,instead of hitting return… or clicking one of those options… is just hit 'Tab' on my keyboard. It filled our background image, colon ';',added the URL that I needed. And I'm ready to start typing. If you're new you might be typing out the full thing just to get used to it… but once you get going… typing out the whole word'background-image', and the url… remembering it as well can be tough. so just type in 'bgi', and hit 'Tab'.What we want to do is… I want to grab my Image from myimages folder, so I typed in 'i'. Thank you, Dreamweaver. And it just looks at my images folder,and see the images that I've got. And I want this one called Background Image. Hover above it, and that'sthe one I want in the background. It even added the semicolon at the end. So I'm going to save it, and checkit in a browser, it's not going to work.It's there, but it's not responsive. I want it to be all stretchy,and fill the background. We'll do that by using a CSS property… and it's a CSS3 property. When people talk about HTML5 and CSS3… what they really mean is justsome of the newer things… we can do in CSS that wecouldn't do before. Before this there was HTML4 and CSS2. So it's just a newer version, but it doessound quite fancy and intimidating… but really they're just new things like this. So one of the newer CSS features is Background… and I want the one called'background-size', there he is there. And there's an option called 'cover',that's a really cool new CSS3 feature. Add the semi colon ';' at the end,hit 'Save', check in the browser. Now we're talking, now it's all responsive… and kind of fills the space provided… gets all stretchy… and it's that CSS3 feature called 'cover' and 'background size'.So we've unveiled one of the secretsof new modern Web Design. And it's this thing called CSS3. You see it in lots of parts, but reallyit's just some new things we get to do… that we couldn't do beforein the older version of CSS. Now if that went horribly wrong,and yours doesn't work – I'm going to save and close that one. – open up 'index4'… and that should get you backto the exact same spot. Just as a little rest, check in the browser. And yes, it's working perfectly. If yours is working fine,you don't need to reset… just carry on with your index1 throughout the course. If you do get lost, you can follow mewith these little resets.So next thing I want to dois build out– we've got this kind of top part going… I want to build out these smallerimage group down the bottom here. So we're going to have to put in a boxfor these images to go into. So let's have a look in Dreamweaver. These boxes are generally called Divs. We've got a Div already, there's onecalled Div hero-box. That's the thing that was pink, but nowhas the stretchy image background. So we're going to have to createone of these for ourselves. So underneath our hero-box,put a 'return' in… and we're going to type in a Div. So we go angle bracket, and we type in Div, '

‘… and then open our last angle bracket ‘<'. Just like, remember our H1,we put in that forward slash '/'. And it finishes it off for us. So that is exactly what Hero Box got made. We have just made our own version called col. Now if you are a little bit more advanced with HTML, and you're like… "Man, it's a long way of doing,I wish there was a shorter way'… there is, if you just type in '.col'… dot '.' at the beginning of itjust refers to it being a Class name. And if you hit 'tab' instead of 'return'…It just assumed you mean a Div Class with col… and it fills it all in,so it's super quick and easy. You can just type it in thelong way if you're new… just to get used to the syntax. Either way, Dreamweaver is awesome help for now. Inside of this I'd like to put in my image. So I've made the box, but the boxdoesn't really do anything yet. It's just an empty box,I want to put an image inside of it. The way to do it, the long way… I don't want you do it this waybecause this is a really long way. You type in <img title="digital marketing" alt="digital marketing" src… and then inside that src, we go off,and find our image… then we add Alt Text. There's all sorts of other things youneed to do just to put in a simple image.You can kind of see that there, I've already done it, so 'image src'… there's the image, then we gotto put in the Alt Text. So it's a little bit long. I'm going to undo it, and what I'm going to do is… use our super secret Dreamweaverawesomeness, and just type in 'img'… hit 'tab', not 'enter'… and you can see, it puts all that stuff in there for me. Now, inside of this 'source,where is my image coming from? I type in my 'i' for images folder… thank you, Dreamweaver… and it looks at my images folder,and says, "You mean, these?" And I say, "Yes, I need that one there,image1, please." Let's hit 'Save All', let's jump in a browser, check it out. And he's in there, he's not responsive yet…Because we just put in an HTML image,we haven't don't anything else. But that's the first part,we've put in our image. Now we need to make him responsive. We do that by doing it in CSS,let's have a little look. We do it a slightly different wayfrom the first way we did it… because the first option wewanted to be a background image. Remember, this guy hereneeds to be a background… so it works slightly differently. So what we want to do isjump to our 'styles.css'. Then down the bottom I want to put in… the Style for the Desktop view, not in Tablet. So I'm putting in a few 'return'sunderneath my top 'h1'… but before the Tablet. Hope you're ready… we're going to learn something fancy called a Compound Selector.So a Selector is referred to–it's a Selector, our H1. That was a Selector as well,these are all Selectors. So what I'd like to do isdo a Compound Selector. I'd like to do it to images. I want to make all images responsive,but not all images… I want the images that are onlyinside of our columns. That is called a Compound Selector,just means images… but not every image on every page,and every website… just the images that are insidethat thing we call col. Remember we called it a Class called col. Now in CSS, you refer to Classes by having a full stop '.' at the beginning.The things that you write yourself… that made from nowhere havefull stops at the front… the ones that pre-existin HTML often don't. You can see, this one here, I've made this thing up called Hero Box… so it's got a full stop at the front… but this H1, I didn't make up, it's just a pre-existing HTML Selector… so we don't have it. So images inside our col,what I'd like to do to it… I'm going to put in curly braces, and hit return. To make it responsive, what I'd like to dois I'd like to make it a width. Just type in 'wi', come down… and I want to make a width of 100%,don't forget the semicolon ';' at the end. Now that does most of it… but there's a couple ofother things to make it… a little bit better supportedacross all the browsers. Let's put in 'height', and the heightneeds to be 'auto;'.And the last thing we need to dois 'display ; block;'. Just do those because theywill help all the browsers… deal with responsive images. That's the guy doing most of the work,'width : 100%'. Let's have a little look in our browser. Cool, there he is,he is a responsive image. If I scale him down, you can see,he gets smaller with the browser… and gets bigger as the browser gets bigger. So it's not exactly what we want yet. We're going to have to make himget to a certain height, no bigger. But that's how responsive images are done. And the cool thing about using a Compound Selector… where we said, images inside columns… it's not messing withthis image up here… which is my logo, all those imagesin the background of this. It's just dealing with the imagesthat are inside my Column.Before we go and give it a widthto match our mock-up… what we're going to do isduplicate it a few times… to get all the images in there. So jump back into Dreamweaver,and jump to our Source Code. Source Code is HTML,it's called Source Code instead. And what we want to do isduplicate this col. So I want six of themto match my mock-up here. You can see, I've got six of these boxes. So what we're going to dois copy and paste the whole line.The easiest way to do it in Dreamweaveris to click anywhere in your image… and hit 'Control D' on a PC,or 'Command D' on a Mac. You can see, just makes a duplicate… because what I want is not just a duplicate of the image… but also the column around the outside. so I'm going to click in here,we want six in total. Then I want you to go through,and instead of image1, there's image2. Down here there's an image3… you're going to clickout, click back in, 4. You can see, it's previewing it for me.Awesome! Thank you, Dreamweaver. 5, and 6. Awesome! Let's hit 'Save',preview in a browser. Now we got that first responsive image… but now I've got all of them, all ready to go. Jump back into Dreamweaver, hit 'Save'. If yours is working, awesome, carry on. If yours is not, and it's totally not working… close down the one we have open,and open up index5.That will get us back. Preview in a browser, back tokind of where we are now. Next thing we need to do is, if we lookat our mock-up, there's actually– You can see, this image is only this big… but in our current mock-up,it's stretching to the whole size. So what we need to do is… the container that it's in, remember,we called it a Class of col. we need to say, "Hey col,you need to be 33%… not 100%, like you are at the moment"… so 33% makes up our block, 33.3. So let's go and look at how to do that now.Jump back into Dreamweaver. So in Dreamweaver, let's go into 'Styles'. And what I want to do, on my Desktop view,so, not Tablet… so if I find Tablet just in front of him… and put a few 'return's in,I'm going to put in '.col'. So I'd like 'col' here, curly braces,I'd like you to be a width of– I'm going to use a percentage of 33.3%. Remember, semi colon at the end. Make sure you've got the syntax right.Often, when I'm teaching people, they'll– We're doing weird stuff with 33.3%,so just make sure it looks like mine. Hit 'Save', it's going to kind of work,let's check it in a browser. So it's working, they're all 33.3%,thank you very much. But by default they stack on top ofeach other, they block on top. So we can override that by–underneath 'col' here, put in a 'return'.Just underneath 'width'. And say, float to the left, 'float: left;'. 'Save', preview it, and nowthey're all stacking next to each other. Oh my goodness, you are awesome! They're all 33.3%, no matterwhat view I'm in. So that is it for Desktop view. We'll add some Padding later on… but that's how to re-size our Div for our Desktop view. Well done. Next thing we need to do is,you can see, in my mock-up here… it's actually 33.3% on Desktop,but on Tablet, it's actually 50%, right? And when it's at Mobile, it's 100% across. So that's what we're going to do now. So in Dreamweaver, what we're going to do, in Tablet here… underneath our 'h1', before the closing one… because, you can see, Dreamweaver helpfully highlights it. You can see, if I click on anyof these, beginning or end… you can see, that's the wrapper. So we want to make sure that everything stays within these two curly braces.So underneath 'h1', but beforethis closing one. We're going to say, "I'd like '.col'… curly braces, return, I'd like it to be a width– just like we did above there… we're going to say, width of,in our case, it's 50% for Tablet. Semi colon at the end. I don't need to say Float Left… because this one at the top already says it. We only have to say it just once. But when it comes to width,we want to say… actually Tablet, override the 33.3%,and become 50%. Let's have a little look. 33.3%, man I'm finding that hard to say. Down to Tablet. Ready? Hey, now it's stacking how we wantedin Photoshop.And it's 50% across. I want you to pause this now… and see if you can go and do itfor Mobile, all by yourself. Pause it, go, do it, I dear you. If you're not up for the dare yet,let's go do it together… of if yours is going horribly wrong,watch mine. If yours didn't, and you did it,you paused it, and it's working…Be very proud of yourself,you have learnt… lots of Responsive Web Design in a very short time. You are awesome. So what I'm going to do, in Mobile, I want to use the same one, 'col'… curly braces… and I'm just going to say, width of 100%. Remember, don't forget the semi colon.'Save' it. Preview in a browser. Tablet, it's 50. Mobile, it's a 100%. We are Responsive Web Designersof the new century. Okay, I get a bit excited, but hopefullyyou are a little bit pumped up as well…Because we are really learning… the fundamentals ofResponsive Web Design. Everything else, we're goingto tickle, and make work… but we've got the real foundations done already. And those foundations are Media Queries… then we looked at Responsive Backgrounds. We did it for Hero Background. Remember, we did a background image… and we used this new CSS3 option called 'cover'. That was awesome. But then we wanted to useit slightly different… not as a background but justas a regular old image. And what we had to do islearn a Compound Selector… but really, the main part was this,where we said, width 100%. And the height of 'auto', and the display of 'block'. That is Responsive Images. And the last thing which we just learned,was, we said…"Hey column, on DesktopI want you to be this width… but when I use my fancy Media Query,I want you to be 50%. Basically all other responsive changes we're going to do… are going to be justreiterations on doing this… picking a Media Query, picking whatcontrols the things we want to change… then just doing some changes… depending if we're in Tablet, or in Mobile. If yours still totally didn't work… and it's not working, let's do a reset,and move on. So let's down index5,and let's open up index6. Getting close to the end. Hopefully, if I preview in a browser now… it's all working, 100%. Tablet, 50%, 33.3% for Desktop. So the next thing I'd like to do is, I want to– What's really annoying me isthere's no gaps in between here… whereas in my design, there's nice white gaps in between everything. So, let's go and add it, it's something called a margin.So in Dreamweaver here, we're going to go to 'styles.css'… and what we want to do isadd it around the column. We've got three columns now, right? There's this top one here which ismy Desktop version, the top one. It's also referred to as Global,the top version. Then in here, in my Tablet, there's another, then there's another col. So what I'm going to do isto this top one here. What I'm going to say is… in this column I'd like you to have a margin – in lower case – margin of 1%. And it's going to put 1% right aroundthe outside of every column. And it's going to cause usa little initial problem. So save it, make sure there's asemicolon at the end.You're getting sick of me saying that,aren't you? Let's jump into the browser.It kind of works. There's a border around the outside of 1%… but because there's 1% there… 33.3% here, plus 1%, plus another 1%… there's just not enough room. It always equals up to morethan 100%, which we can't do. So whenever you add a margin of 1%… you need to minus it off the width,and there's 1% on either side. You can see, there's 1% there, 1% there. So, we want to minus 2. So it's 31.3%. Let's hit 'Save' Check it out, and now,it has enough room to fit. So we need to do the same for all of them. If we get down to Tablet… does the same thing, not enough room… so what we need to do isminus 2 of our Tablet. So let's get down to 48%. Check it, working fine, all fixed. Now let's get down to Mobile. Mobile still kind of works, not sure why,it shouldnt. We're going to get down to 98%. So all fits, and we can seethe borders around the edges. Nice work. Now if yours is like mine, and youcan see 90 up there…I think it's just because I've gota Beta version of Dreamweaver. Hit reset, and it's gone. Happens to me a little bit at the moment… but I'm sure that's justa bug on my machine. One of the things you might be looking at,and bugs me as well… is, because we put a margin around this… it doesn't kind of line up with that anymore… and gets a little bigger from the top… so we just need to add a 1% border to this Div Tag at the top here. Remember what we called it?It was called Hero Box. So let's find Hero box in here, here he is. And you my friend get your margins on. So margin of 1%, semicolon ';', 'Save'. Now it's looking kind ofa little bit nicer… we see a margin around him as well. Because we didn't give him a width… he doesn't need to beminused off everything.You can see, he doesn't have a width anywhere. So if he did, you'll have to minusit off like we did these other ones… but we don't, so he's fine. Last but not least,what I want to do is… let's look at the Navigation. You can see here on my mock-up it stacks side by side, here on Desktop… but in Tablet and Mobile,they're on top of each other.At the moment though, they areall stacking on top of each other. So, what I'd like to do is, I'd like to say, in Desktop view… my Navigation, I've alreadymade a Compound Class here… to Style my Navigation… just to save time at the beginning. What I'd like to do to it is– you're looking for the onethat says 'nav ul li'. That is my list for my Navigation. What I'd like to say is, I'd like you to display… and I'd like you to do this onecalled 'inline-block'. That means they're going tostack next to each other. Don't forget the semicolon. Hit 'Save', check it out. Awesome! The only trouble is, when it gets down to Tablet… it also stays that inline block… and it gets all a bit messy, and there's no room for the logo… so it stacks underneath. So we need to switch it back,when it gets to Tablet…To that stacked on top of each othermethod that we had… and all we need to do is find 'nav ul li'… down here in Tablet, which doesn't exist. So what we're going to do is… underneath 'column', I'm going toput in this one called 'nav ul li {'… and I'd like to say, when it gets to here though… I'd like you to now display block. And that means they'llstack on top of each other. Let's hit 'Save', preview in a browser. Awesome! So, Desktop, stacked in line. And here, stacked block, same with Mobile. Well my friends, that is where we're going to leave our responsive journey.I hope you've learnt some amazingstuff about Responsive Web Design. Just to recap, responsive iskind of an umbrella term… used to describe a few specificthings in Web Design. One of the big ones, is under 'Styles',is our Media Queries. And these get triggeredat different browser widths. And in those Media Querieswe get to change things… like the font size and height. We also get to change the widthof some of our boxes. In our case, columnm, we changed the width of it, using percentages… depending on whetherit's Desktop, Tablet, or Mobile. Another one of the responsive termswas Responsive Images. We looked at two versions, there was the Background Image… where we used the CSS3attribute called 'cover'. We also looked at responsive regular images…They just sit on the page… not a background, and basically it's just 100% width. We also added a height of auto, and a display of block to make them work. You'll notice, a lot of work done for Responsive Web Design is done in CSS… the HTML over here gets nice and clean,and easy, and nice to work with… whereas our CSS kind of spreads out,and covers a few different styles… but you can see, the syntax in CSSisn't particularly hard… especially when you've created it yourself. Now we did have to skip over a few things at the beginning jut to get started…just to make sure that this videois epically long. If you want to learn more,I've got a bunch of courses. Check them out I've got lots of courses there on Dreamweaver… plus lots of other Web, Video,and Graphic Design products. So go check that out, There'll be a link downin the description. All right, that's it. haere r, good YouTube people. I'll see you in another video. Like and subscribe, I always forget to do that. Bye..

As found on YouTube

Share this article

Leave a comment