Lessons
Class Introduction
02:51 2Dreamweaver Project Overview
09:33 3Designing Web Page Comps in Photoshop
14:33 4Save Images for Web
19:55 5Getting Started in Dreamweaver
05:47 6What is HTML
17:42 7What is CSS
05:27 8Prepare to Create a Web Page
07:00Add HTML5 Sections to a Web Page
16:06 10Add and Explain CSS
05:21 11The CSS Designer
19:40 12How to insert a CSS Reset
07:18 13Styling Web Page Elements with CSS
08:31 14Styling with Fonts
10:28 15Understanding Floats and Clearing
05:40 16Creating Navigation and Inserting Responsive Images
23:01 17Styling Navigation Links
14:07 18Add Social Media Buttons
10:29 19Media Queries in our Simple Page
13:29 20Creating a Bootstrap Webpage
10:16 21Creating a Bootstrap Navigation Bar
10:29 22How to add Custom CSS to the Bootstrap Framework
03:42 23How to Create a Bootstrap Header Section
15:24 24Create Custom Media Queries in the Bootstrap Framework
05:48 25How to Create and Edit an About Us and Main Section
27:51 26How to add a Jumbotron Model using Bootstrap
13:35Lesson Info
Media Queries in our Simple Page
Media queries. What the heck is a media query and why do we need them anyway? What is all that? A media query is how we tell our page…how we set things up to change at a certain size. What am I trying to say? My brain is not working. I'm not explaining this very well. Let me go back out here. So for this guy, it's great. It looks great, great, great, great, great, great, great, but then maybe here, it starts to get too skinny. So at some point, we want to create a break in the page and we don't want to continue with our same design. We want the design to change, but of course, we don't want to create a whole new page and we don't want to do too much to it. So what we do is we create something called a media query, and the media query is basically telling the browser, "Hey, when you are this big or between this big and between this big, or at least this big, or a maximum this big, then you should invoke this CSS instead." And we're just going to use the CSS that we already have and we'r...
e just going to change it up a little bit. So I'm going to come in here and I'm going to create some new media queries. I'm going to create a media query so that at one point...and that point is going to be at actually 800 pixels wide. So basically, it's going to be max 800. So if my browser window is 800 pixels or less, then it should look like this. Our container is set to 80%. In the media query, I'm going to take that same piece of CSS we've already created and I'm just going to reset it to be 100%. So when the browser reads that, it's like, "Oh, at this size, I should be 100%, and at this size, I should be 80%." So under @media, I'm going to go ahead and hit +. I'm going to do max-width and I'm going to type in 800 pixels and click OK. So what just happened? If I look in my CSS and I scroll down, it created the media query for me. So I'm going to do container. I already have container. I have container here. I can right-click on my selector in my CSS Designer, and I have some options. And I want to duplicate into media query. I don't want to recreate the whole thing. I already created it once. So I'm just going to duplicate into max-width:800. And then I scroll down and there it is, already done for me. Now, let's talk about inheritance theory. Why are we talking about descendant selectors and children and grandchildren and blah, blah, blah? So we're going to stick with the whole family theme. So we've got inheritance. So this container inherits everything from his big brother up top. So I don't need all this stuff. I don't need margin-left, margin-right, min and max-width. It's inherited automatically. I can get rid of that. The only thing I want to change is my width. I don't want it to be 80%. I want it to be 100%. That's it. That's all I need to do. And now I save, File, Save All. Jump back out. I think I need to close this up and start over with Chrome. And now watch, ready? Bam. So now when it gets to 800 pixels, it goes to 100% width. Does that make sense? This is a really important concept because it's going to get really complicated in a few minutes. So let's do another one. We're going to do one at 550 because once it gets too, too small for some reason…my browser at home, I can squish it all the way. This one won't let me squish it. I can keep going until it looks really, really tiny, like what it would look like on my phone. This one won't let me do it, but at some point, once we get smaller than this little sidebar, just like, "I can't breathe." So we have to change it completely. So let's go ahead and create another new media query, and this one is going to be max-width by 50. Five fifty. So I've got max-width:550 and what I want to put in here is a bunch of them. So I'm going to change the container. Actually, I don't need to change the container. I don't know why that's in there. That's going to stay…actually, I better. I better put it in there to make sure that it's 100%. We want the container. We want the aside. We want the main. We're going to change the size of the logo because the logo is too big. And we want our links to go back to being on top of each other. We don't want them to stay across because then they just wrap and they look terrible. So let's go ahead and do that. I'm going to start with container. So again, I'm just going to jump into main, all sources, container, right-click, duplicate into media query, 550. So I duplicated my container. I'm going to duplicate my aside, right-click, duplicate into media query, 550. I'm going to duplicate my main. Right-click, duplicate into media query, 550. I'm going to duplicate my logo. Oh, I didn't make logo. We got to make logo. I did not do that. And my nav a: li. So... I made a logo. The way we did it, I think I can probably do it this way. I don't think I need to make logo. Let's go ahead and duplicate this into media query 2 and see if it works. It should work. And let's go into our CSS. So we are here. I want to make sure that I am working in 550. Obviously, I can do it in code but I want you to know how to do it in CSS Designer. Now that we have media queries, it gets squirrely and you're like, "What am I working on? Am I working on the real one? Am I working on the media query one? I can't organize. I can't start dragging stuff around." I actually just…I sent Adobe a request about that. I was like, "I can't organize anymore. I need delineations." I want them to put some bar or something in there so I know. So that request is there. Just so you guys know, other requests I've made in Dreamweaver have shown up. So fingers crossed, they're listening. So what I'm going to do is I'm going to click on max-width:550. So when I click on it inside of the media section, it shows me just the media queries inside of there. So now I can go in there and change that. So if I click on container, I can see what I've got. So obviously, we want to set this back to 100%. I don't need this. Actually, I didn't…what I just did, I clicked the No button instead of the garbage can. What that does is it comments it out. You guys see that over there? So when you're troubleshooting and you're looking to see what does what and you just want to turn it off temporarily, just hit that little symbol and it'll comment it out, and then just hit it back again and it'll comment it back in. So that's for troubleshooting and stuff. So I'm going to hit that garbage can. By the way, zero is a setting. Do not over-style your stuff. Zero is a setting. These are not actually set but if you accidentally make a setting and say, "Oh, I don't need that," and set it to zero, you've created a setting. Zero is a setting. Delete the whole thing. That's a really important one because you can mess stuff up with that. Let me look and see what we've got in here. My width for my aside, I have to get rid of my float. Now here's the thing. It already has a float. I can't just delete my float. I can't just delete it because it's already in there. I have to say float: none. Big difference between deleting it and saying none. You guys get how that works? So I'm going to go to…I'm in my aside, float: none, which is a setting, float: none. If I just deleted that, it would still be trying to float left. So I've got float: none. This is actually 100%. Just for sake of time, I'm going to come in here and do it this way. So container, 100%. I don't need any of that. Aside is… I don't need the background color. Why? Because it's inherited. So I can delete that. My width is now going to be 100% and my float is going to be none. We can get rid of that space. I've got main. Again, my float is none. My width is going to be set to 100%, not 60% now. I don't need my background color, it is inherited. So I've got…I don't have logo. I've got this guy. Let's see. Nav li. We're going to do the nav, aside, container, main, logo. I'm going to get rid of this. Actually, where is it? It was in here a second ago. Hold on a second. Before I go messing all that up, let's do this guy. So my image, block left and right, auto, we need all that. I don't need it in there. I can get rid of it, though. Padding-bottom, height: auto. So what am I changing in there? I want to change the width. So instead of 75%, I'm going to make it 200 pixels. So everything else can go because it's inherited. And then my li is going to be…I want it to display like a list item. It knows us in there. I want it to display like a list item. I want the text to align left not center, and I need to add a margin. I don't care about the width so I'm going to change this to margin. Margin, just left. If I don't add a margin on the left, it's going to be budded up against the left-hand side. So margin – left. Look, I can pick it. And that's going to be… I don't know what it's going to be because I didn't have everything typed in there. We're going to make it 25 pixels. Semicolon. We're good. We're good. We're good. Save, File, Save All. Now, here's the cool thing. I haven't showed you this yet but you can actually test it right in here. I wish we didn't have all this stuff, but if I had a bigger screen…look, so here. I can test it here. Ready? Look, I have this little handy-dandy slider thingy. I can go…see that? So I can test it right in live view, and I can see, so now I've come down to my 550. My links are all up and down. I've got my margin over there. My logo was smaller, making me happy. This is still responsive. So look. It was really small and then it got really big because it's responsive and that's what I told it to do. So it's actually doing what I told it to do. Dreamweaver's showing me my media queries up here, these little green lines. So if I double-click on them, it'll jump to the screen that size, and then I can jump to 800. Cool, right?
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
lovemydreams
Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!
Kathleen
I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.
Linda Knapp
She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.
Student Work
Related Classes
Web Design