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
Styling Web Page Elements with CSS
- [Melissa] So I want to start, we're going to invoke our box model right now. I want to get that container to be 80%. Well, the container is just a div. I want to have lots of divs on my website, so I'm definitely not going to create a new piece of CSS that is div, right? So I'm going to go back to Main, so we can see just our plain stuff. Actually, just real quick, so you guys can see what's going on in here. So there is the link. Look, it's right in this document. There is the link to the reset, and you can see he's named every little piece of HTML known to man. Margin, zero. Padding, zero. Border, zero. Font size, 100%. Right, so he's just zeroing everything out. Okay? So that's what's happening in there. So back in Main, we have our basic stuff, I need another piece of CSS to style the div that's going to be our container. I am not going to style a div because we're going to have a bunch of divs, so I'm going to create... I'm only going to have one container. I'm not going to have...
more than one container. So I have a choice, I can create an ID or I can create a class. I'm only going to have one. I'm going to go for ID. Doesn't have to be ID, but that's a good choice. So we're going to go ahead and go... We're in Main, yes we are, okay. I'm going to do New Selector, I'm going to call it "#container." All right, I'm going to move that guy to the top. I am really anal about keeping the CSS in order. Okay? And the reason I am is because it's going to save you time in the end. I've got so many students that come back to me six months later and they're like, "Oh my God, I have to give this out tomorrow and I can't figure out what I'm doing. You need to help me." And I'm like, "Okay, okay, calm down." And I'll get online with them and I'm like, "Stop." And I need 30 minutes to organize their CSS and I can fix it like that. But that's the first thing I... I'm like, "Oh my God, what have you done?" There's CSS everywhere. So keep it in order. And the way I keep it in order is I go in order of my HTML. My container's the first thing. It wraps around everybody else and I keep it at the top of the page, then my nav, then my header, then my aside, then my footer. And we'll talk more about this as we keep going. Again, your order is actually important when it comes to certain things because of the cascade, okay? All right, so I have container. I'm going to go into my Properties and I'm going to turn off Show Set. I'm going to go to my margins. I want it to be 80%, so actually, I need to start with width. My width is going to be 80%, so I'm going to choose percent, I'm going to type in 80, I'm going to hit Return or Enter. It's now 80%. Well, what does that even mean? We need to set the margins. Well, I don't know how wide your browser's going to be, so I'm going to let the CSS figure it out. So my left margin, I'm going to set to auto, and I am going to set my right margin to auto. All right. And it wrote it, so you can see I'm in here. So width 80%, margin left, auto, margin right, auto. Google Chrome, yes. Yes. No, maybe. It doesn't jump to it anymore. It used to jump to it. Nope. Oh, you bugger. All right. Let's see. Okay. That's okay. We're going to do it this way. We're going to save, everything's linked. I'm going to go out to my Finder and I'm going to bring Chrome up. And in my Finder, I'm going to go here. I'll drag and drop. Oh, it's still not working. Oh, I know why. You guys know why it's not working? Because I didn't apply the CSS to anything. - [Crowd] Oh. - Oh, that would help, huh? I just created it. What did I say? CSS can't exist by itself, it needs some HTML, right? So I have to hang it on the div tag. I totally forgot to do that. All right, let's go into the source code. So, I need my div tag. All right, good time to introduce the DOM. I know you guys don't love code and you're not going to want to go hunting in the source code all the time, so we have this thing called the DOM. It is the Document Object Model, that's what it stands for. So I have this little DOM panel, so you can see it's got HTML, head, body. I am looking for, actually, stuff in my body, not in my head, and I want that guy. So I can choose that guy right there, right? And I can also choose that guy. I'm going to go into Live View. I can use my arrow keys, right? I'm on my aside. There's a bunch of different ways to pick it. Okay? And this is important because you're going to be picking stuff all the time, so you want to be comfortable picking stuff out of your file. So you can use the DOM, right? I can click directly on the div here. I can also come down here in the Tag Selection Bar, okay? So I've got body, div, aside. I want the div. I can click on the div here and I'll have it. And I can also mess around inside of here. So now that I'm on the aside, if I hit my up arrow, now I'm in header, now I'm in nav, now I'm in Div. So I can use my arrow keys, too. Okay? So my arrows keys are going right up here, they're going right back on the Tag Selection Bar and they're going back, back, back, or in, in, in, inside of my HTML, okay? So lots of different ways to pick your HTML. So now that I have my div, I'm in Live View to do this, and look, I have a handy little plus sign. Do you see? It says "div," and a little plus, right? So I click on the plus, it says "Class / ID," I start typing in "#". Took it long enough. But it's like, "Oh, you want that one?" Yes, please. Thank you. Down arrow, hit Return, it adds it. It's 80%, look at that. Because I actually applied it to something. Okay, so we go File, Save, I saved all. Let's try that again. Dreamweaver's not working. We'll just hit Enter, and now it's 80%. Now, it's 80% no matter what. Okay? I don't want it no matter what. I'm actually going to put some limits on it. Okay? So let's put some limits on it. I have those limits in here somewhere. I should. That's all right. I know what they are. I don't know where they are. Okay, I want to go back into CSS Designer, back into main, back into container, and I'm going to say, "Minimum width, don't get any smaller than 350 pixels," which is the size of my phone, "And don't go any wider than 1,200 pixels." Okay? Now, save again. I need to do File, Save All because, see, I saved and it didn't save my CSS, right? So File, Save All, come back into my browser. No. That was funny. No, I don't need to translate, thanks. So it won't go wider. This screen is really small, you guys, so I don't know. Yeah it's not going to show. This screen is really small because of the way the video goes. So it's not going to show us but it is. It's constrained, trust me. I promise, okay? So that's pretty easy, right? Hey, we just created some pretty cool CSS. That was easy-peasy, right? And look, it's all in there. So we've got our container in there, we've got our background colors in there. This is easy.
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