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 with Fonts
- [Melissa] Okay, so there is a couple of ways to do this. I like to create a Body Tag which does… So here is the thing I wanted to tell you. I'm telling you this because this is like Photoshop. You guys all said that you know Photoshop, right? If I give you all the same project to do in Photoshop, you'll do it five different ways, right? Same thing with CSS. There is no, "This is the right way to do it." No, get it done. If it works, it works. Do it that way and do it the way you're comfortable with, just like Photoshop, okay? So there's different ways of doing things. There's not a right way and a wrong way. So don't freak out about that. The biggest thing that my students freak out about is, do I use an ID or a class? I'm like, "I don't care just use one, it doesn't matter. Just pick one." Right? And then if later down the road you run into problems, then we'll revisit the issue. Ninety-nine percent of the time it's not going to be an issue. It doesn't matter, we don't have to revis...
it it. So actually what I want to do is I'm going to create a New Selector. I'm going to start with Container because I want it to go above because body should be at the top for everything. Click plus, didn't go to the top, that's all right. Body. I want to set up some basic stuff like text and I don't want to use Times. So I'm going to go to Font Family, I'm going to click on the little place where it goes to Font Family. I don't know what they're thinking. I don't know what you're thinking, you guys. I'm on the Dreamweaver Beta Team, I need to go smack those guys around. These are dumb choices. Okay? So... - [Female] Really? - Yeah, right? - Oh God. - Exactly, right? I'm like, "What are you thinking?" Right? So it's okay, we have this little handy- dandy button called Manage Fonts. - Oh, great. - And look what comes up! So now we've go this new thing and we have these Adobe Edge Web Fonts. You're like, "Those are cool. What are those? I want to use those. Those are neat. You mean I don't have use Arial or Verdana?" No, you don't, actually. You don't have to use that junk anymore. So we've got Adobe Web Edge Fonts, local web fonts. I don't have any of those, Custom Font Stacks. I can make my own. I'm going to start with the Web Edge Fonts. So I can come in here and be like, "These are cool. I want to search for a header." And look, it's even going to help me. It's like, "Oh, look, I want a header. And I want the header to be handwritten." That's actually cool. Let's use that font. So I click on it and I need paragraph type, turn that one off. And I want it to be Sans Serif. Okay, cool. Source Sans, awesome. So what did I… What was the first one? I did Source Sans. - [Female] (inaudible). - I did this and this. I got to write it down. It's right on my stickies. Okay, I know I got Source Sans. - This is going to work beautifully (inaudible). - Kaushan Script, now here is the thing, you guys, we won't be really be able to see it until it's uploaded to a web server, but that's okay. It's not going to be Times anymore on here either. Because we wanted to set our own Font Stack, right? So what I'm going to do now is I'm going to Custom Font Stacks and look, they're there, see? So I need a Custom Font Stack for the first one. So I'm going to go over and I guess to substitute that one. I can type in whatever I want, it does not have to be on my computer. So if I know that I'm using a Google font or something else, I can type that in there and it will add it. I can add it. It doesn't have to be installed on my machine. So I don't know, let's just do… We'll just do, I hate to do Times but we'll do Times. We'll do Times Bold, okay, fine. And I'm going to make it go over there and then we'll do Serif. I didn't mean to click. Okay, get back in there. Manage Fonts. Go back to my Custom Font Stacks. Okay, Kaushan Script, and what did I say? Times. Sure, Times Bold and Serif. Push that over there. So now I click Done and it's an option for me right there. So I've got my own Custom Font Stack, right? So I'm going to go back and I'm going to do another one because I don't actually want to use that one, but while we're in here, I only want to do this once. I'm going to go back into Custom Font Stacks and make another one with Source Sans Pro and I'm going to push that one over there and then if they don't have Source Sans Pro, I guess we'll use Verdana. And if they don't have Verdana, we will use Sans Serif. Guys don't know the difference between a Serif Font and a Sans Serif font, just super-quick for anybody that doesn't know the difference between those. The Serifs are the little... They're chisel marks, that's what they really are. Back in the Roman days when they used a chisel and a hammer. You made chisel marks so the little hangy bits on the letters are the chisel marks. Those are Serifs. So if they're Sans Serif, it doesn't have a chisel mark. Exciting stuff, right? Cool, so I'm going to click... Source Sans Pro is going to be my basic. Click Done, okay, so then I can come in here and I can say Source Sans Pro, Verdana, Sans Serif. Bam, look at that, yes. Sweet. - Yes. - Okay, so that's my body stuff. Of course I didn't change it in Body, I changed it in Aside. How did I wind up in Aside? No big deal because, look, there's a handy-dandy little trash can button that you guys can't see over there, it's hiding, it's there, trash it. Stop it. Being a pill. I'm going to trash all this stuff that has to do with fonts because I don't know why it's jumping all over the place. It's just being difficult. It's like my ratty teenager. All right, we're going to put that up top. So we got Body, uncheck Show Set, go to Text, go to Font Family, choose Source Sans Pro, Verdana, Sans Serif. Now everybody changes, that's more better. And I can change my font, wait, I'm going to change this to 400. It just makes it a little bit heavier and it's normal. And that's all good. I'm happy with that. I'm going to do File, Save All. Okay, it looks good. I want to change up headers and paragraphs. I don't like how everything's all smashed together, right? So I'm going to create New Selector. I'm going to do H1 comma H2. What does that mean? That means if you are in H1 or in H2, that's what the comma means, right? So H1 or H2 you are going to be this guy, Caution Script. And you are going to be...I guess I only have 400. I wanted to do Bold. Can I do Bold? Font style. It's all got normal, normal stuff. That's all right, we're going to leave that there. What else do I want to do with those? I can set the size, so Font Size is going to be 200%. I don't have anything set. That's why it's not changing. Let's add some text. This is a header. Okay, so I'm going to select that guy. I'm going to come down. I'm going to do this in my Properties panel. I am, stay selected. And then in my Properties panel. - What the heck? - It's making me mad. All right, that's all right. I got my hamburger. I got my hamburger. I can click on my hamburger and I can change it here. It says format H1. It did show it. Sweet. So we got a header. We got some H1s going on. I'm going to add a paragraph. Actually, this time I'm going to do...if you are in paragraph or in H1 or in H2. We need some padding, right? We need to get away from the edges, we're all squished. So if you're any of these guys, we're going to go our Layout and we're going to say Padding. Okay, so this is the great thing about this, remember I said I hate numbers? Watch. I got a Scrubby Slider. That's not working because I'm on footer. Why does it keep jumping? Oh my God, it hates me. Okay, let's try this again. I'm on paragraph, I'm on H1, I'm on H2 and I'm going to use my cool Scrubby Slider. - Oh, yeah. - Pretty cool, huh? I really only need 15, okay. So I'm going to do 15 left and I'm going to do 15 right. Awesome, okay, now let's check it out. I know you're not going to work. I know you hate me. It's all good. Dreamweaver and I are having a spat today. I didn't take it out for Valentine's Day last night. - No chocolate? - No chocolate. All right, oh my God. I swear. Okay, all right, we're good. I'm going to hide others. I can figure this out. Simple doughnuts, index. I saved all, right? Yes! I did. So now we have some padding and stuff, too, going on, okay?
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