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
How to insert a CSS Reset
Basically what it is, it's a little piece of CSS that says zero everything out, take away all the margin, all the padding, all the styling of everything. So it gives us a blank slate to start working with, okay? And I happen to have it somewhere. I think it's on my desktop, so I'm going to hide others. We are working in simple donuts, right? This is the folder that we're working in. I have a folder called Website Resources and I have something called Reset.CSS. So this is something that once you download it, you can reuse it over, and over, and over again. So what I'm going to do is I'm going to duplicate that into...I'm not going to move it, so if you guys know how to duplicate or copy things over. On the PC you can just copy, but on the Mac, I'm just going to hold down the Option key and drag and drop it. Actually, I'm going to drag and drop it into the CSS folder. So now, my CSS folder has my Main.CSS and my Reset.CSS, and I'm going to attach it. So back in Dreamweaver, I'm going to...
go back to the page that we're working on. I still have my source code in my main, right? I'm going to go to my CSS designer. Let's pull this out again. There we go. I'm going to click on plus for the source, I'm going to Attach Existing CSS File, and I'm going to browse and I'm going to go to simple donuts. CSS, Reset, Open, OK. And now, it's linked. So two things happened. It showed up in here and it's right here. So you guys can see that Dreamweaver is adding the little link in the head section. So I've got the link from our main that we created here, CSSmain.CSS, and then it set a link to the CSSreset.CSS. The cascade, it's called Cascading Style Sheets. Why is it called that? Well, it's called that because there's an order, there's a hierarchy, there's a way things work and it's a lot more complicated than what I'm going to tell you, but my simple way works for me 99.9% of the time. Whatever CSS is closest to your HTML code wins. So mine's backwards. I've got my Reset right now underneath, the link is underneath. It's backwards. Whichever is closest to the code wins. The code, this is the code, it's all down there. I just put the Reset underneath my Main. It's going to overwrite my main, so I'm going to flip them around, super important. Will make you crazy when you're designing stuff. But in reality, you'll be adding the Reset first. Usually, that's the workflow. You create a page, you add your Reset, then you do everything else. So I'm just going to grab line seven, cut it out of there, and paste it above. So now, I have my Reset and now I have my Main. It's a good thing I caught that because in about five minutes, I would have been ready to start cursing because it wasn't going to work for me. All right, you guys, so that part is important. We have our Reset, we've got our Main, we've got more CSS we want to create. Oh, I know, I still have a couple more pages I want to show you, and then we'll get back to it. So we've got our box model. I'm going to close that up. We have our HTML defaults. I'm going to close that up. Now, let's just take a look at different ways to create CSS. So I told you the thing that's closest to the code wins, right? We also have a way of coding CSS, it's called inline CSS. So back in the day before we had CSS, CSS didn't show up on the scene until the late '90s and then you couldn't even use it because the browsers couldn't support it. So I got all excited in like, I don't know, 1999 or something. I don't know. I taught myself CSS and I was like, "This is so cool," and I was like, "But I can't use it." And then I promptly forgot it and it was about five years later before I could use it. So I've got HTML formatting and I've got CSS formatting. So what I want to show you, these pages are identical. You can see in the preview that they're exactly the same. This is the old school way of doing it. Look at that code, it's a nightmare. H1, font face, Verdana, size 5, color blue and font. Oh my God, so I used to code pages like this, you guys. I got a website to do for a company one time that was 300 pages and I was like, "I'm not going to use one of those dumb HTML editors. That's stupid. Why would I ever do that?" I was like... That was the day. I think I used Adobe PageMill or something way back then. So I was like, "I think I'll use an editor, I'm kind of tired of doing this by hand." So just think about it, to go in and change these, let's say I just wanted to change the H1s. Oh my God, I can't even do a search and replace because everything is blue. It would take me days to fix all that. So along comes CSS and I got nice, pretty code. Oh look, H1s, Ps, H1s, Ps, nice and simple. I'm like, "Oh, I want my H1s to be red, cool. I just say red and now, bam! They're red. So much easier. And of course, if I had 300 pages, it would be an external CSS and I just change that to red in 300 pages. Inline can still be used, again, extremely rare. Let's take an example. Let's say you have a 300-page website, and you have a home page, and there's one little H1 on that home page that needs to be red and everybody else is blue. Okay, fine, you can do it for that one, but you want to do it so you remember. You want to do it so you're like, "I know I did that one inline and the rest are controlled by the CSS." Because if it's inline, it overwrites every CSS you've got out there because it's more powerful, because it's right against the code. So again, you can do it, I don't recommend it. If you absolutely must, I still recommend that you do it with a different piece of CSS, but if you must, maybe just one tiny little thing in your website, that's 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