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
Dreamweaver Project Overview
- [Melissa] Let's go ahead and review what we're going to create, okay? So I'm going to show you guys everything that we're going to create here. And the first website that we're going to create is a very simple responsive website that we're going to create from scratch. So we're not going to rely on any templates. So we're actually going to build this from scratch, and you can see it's got…we've got a little navigation at the top. We have a header area for a logo. We have a sidebar, some main content. We've got a couple of pictures in there. And then at the bottom, we've got a footer section that has an email contact and it has our social media contacts in there. So a lot of this stuff, the majority of this, we're going to create from scratch. The media contacts are a little more complicated so we're actually just going to drop that in. I've already done the code and everything for you around that. We're going to access some pre-made CSS and some pre-made HTML code to get that in ther...
e, but as an alternative, if you find that you struggle with something like that, you can always use images. So those are not images. Those are all done with a font. So I'm going to teach you how to do stuff using all CSS, as much CSS as we can, to make your pages lean and mean and really load fast. So there's not a whole lot bogging them down. So really, the only images in there are the picture with the coffee and the doughnut, picture of our guy eating a doughnut, and our logo and that's it. Everything else is done…actually, I lied. There's a background image in there too. There is a little background image, but it's tiny. Everything else is done with CSS. So this is the first one that we're going to create from scratch, and this is…you know what? Before I move off of that, I want to show you, it is responsive. So what happens is if I move my image or my page smaller, you can see it jump there. So let me just show you. Here, we can see the background, it's 80% of the width of the browser. As we get a little bit smaller, it changes. It's now 100% the width of the browser. And as we get even smaller, it becomes…so the sidebar is no longer a sidebar. It sits on top, and we scroll down. So that's what we mean by responsive, and I'm going to show you some examples of that. So this is what it looks like. It's very, very plain. So you can see up top, there's a very plain responsive navigation bar. We have a large header area where we can put some content in. Then it says About Us. Just imagine that that first icon in that second section look exactly like the other four. I forgot I messed around with this one. And we're actually going to replace all of that. You can see what we're going to start to do right there with that doughnut image. And we're going to go ahead and we're going to place that whole section with content of our own, and the rest of the site, when we get into Bootstrap, but you'll see I deleted it already. There's a bunch more sections with content and a contact section, like a little contact form. But we're actually going to delete all of that. So we're going to restructure, redesign this whole top part, and then we're going to put in our own custom stuff for the rest of the page. And when we're done, it's going to look like this. So you can see the nav bar is nice and pretty and designed, and this looks a lot…I tried to make our…the one that we're going to make by hand look similar to this so you guys can kind of relate it all back and forth. So same thing. So we have a giant header section and we have a little bit of text and we have our logo and we have a giant doughnut as a background image, and here's that section with all those little icons there. And as we keep scrolling down, we got another section with some information, and some more information, and some more great information. And then we have our footer section. So again, just like the other page, in this footer section, we're using the same reusable code that I've already created for you so you guys can just drag and drop it in. And I'm really big on that. If you guys, if you figure it out how to hack it together, you're good. That's all you have to do. You don't have to memorize it, you don't have to know it. If you can go someplace else and find it already done and use it, you're good to go. So that's a quick overview of everything that we are going to cover, and I wanted to talk a little bit about responsive page designs. So as we get smaller, you can see as it gets smaller, we've got two rows. Same information, but now it's in two rows. As we get even smaller, it comes down to a single row. And then at the top of the screen, you'll notice this is called a hamburger. They call it a little hamburger because you got a top bun, the meat patty, and the bottom bun. I know it's dorky. - [Female] Hope we remember it. - Exactly. It's the hamburger icon. And so when you click on the hamburger icon, I'm sure you guys have experienced this. You all have phones and iPads and stuff. You click on it and the menu drops down. Now, this is all done in JavaScript and some fancy code and stuff, but you guys don't have to know that. That's what the templates are for. I don't know how to do it by hand. I just use my template, and I can go ahead and make it look however I like and then it just works for me. So that being said, I want to take a look at these websites on my phone. So I'm going to open up in Dreamweaver, and this does not live on a server so that's why I'm going through Dreamweaver. So on my phone, I have this QR Reader, little QR Reader, and then what I'm going to do is on my screen in the lower right-hand corner, there's a little button real-time preview button. I used to call it the world button back in the day in Dreamweaver. It was just a plain old world, so it was the world button. So we click on that button and Dreamweaver's thinking, "Give us a minute." I'm like, "Okay, I'll give you a minute." And then I bring up my QR Reader because it gives me a QR code and I hold this up to my screen and I click, and it's like magic. So now it's on my phone. Now I can scroll my web page. Come on. It's being a pill. I think it's taking a little while to load. There we go. So it's all set up to work on the phone, and if I turn it sideways, I get it sideways too. So it looks good no matter what I do, and as big as this phone is, I was actually surprised to see how little of my website I could see on it. This is a 7 plus and it's still only 350 pixels wide. So now what I want to do is I'm going to show you a non-responsive website on my phone, and I'm just letting you know. This website I'm going to show you is from 1995, so don't laugh, okay? It's really old. So we're going to go…there we go. Definitely not responsive. You're like, "What is that thing?" I have to zoom way in and mouse around to see it and my corny, little animated GIF cauldron there. And if I turn it sideways, it's not much better. I think it gets worse. So my point is that today, we're doing all responsive websites. This is ancient history, not ancient enough that there's still probably millions of sites out there that are designed this way. Google made it very clear last year that if your site is designed like this, they will no longer list you. They are not interested in your site. So you definitely want to be designing responsive websites. So just to kind of give you a brief history of responsive design, when we first started doing responsive design, companies would and these are still out there too sadly because they're horrible. They would create a version for each thing. So there'd be a version for the phone, and there'd be a version for the iPad, and there'd be a version for the computer. Terrible. I don't know. If you ever go to a website and you're like, "What can I do?" You're looking for something specific and you can't get there on the phone because they keep serving you up the mobile version. It's terrible. So anyway, that's kind of fallen by the wayside and now it's one page that's responsive, that'll work for everybody.
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