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
Getting Started in Dreamweaver
Open up your Dreamweaver. We're just going to get our Dreamweaver all set up and ready to go. So we're going to create a custom workspace inside of Dreamweaver. Alrighty. So when you open Dreamweaver, just so you guys know too, I made all the stuff go away. Hopefully. But when you first open Dreamweaver, it starts like, "Oh, are you new? Do you know what you're doing?" And I'm like, "I know what I'm doing, leave me alone." And I still have to click through all the stupid stuff until I can click the close box. So once we come in here, this is the Start Screen. The Start Workspace. All right. So lets talk about this interface, or this setup, on Dreamweaver. I can come in here and see my recent files. You notice too that when I first opened it up it opened up the last page I was working on. Okay. So if your Dreamweaver is already set up and you're using it for something, that's what you're going to get. But I want to show you from beginning - beginning. Okay. So I've got recent files, I'v...
e got my CC files. So my CC files mean stuff that's saved. I don't even go in here, because I don't even know what these are. I don't even remember what they are. They're all in my Creative Cloud. So I'm not going to worry about those. I've got this Quick Start screen which isn't very pretty. I don't like to look at things that pretty, so I am like "What is all that?". I don't know what that is either. It's just basic documents which we can get to from the new dialog box. So these are the starter templates. Again, you can access these from with inside of the new dialog box as well. Okay. They just make it easy for you to get a start here. So if you want to get a start here, you can. You can come in here and take a look at all this stuff. And you kind of visually see how it's all laid out. And then in all the applications they have this stuff down here, and it's just kind of Adobe talking to you. So. Learn. See what I can do with Dreamweaver. These are actually pretty cool. The thing that I like about them is that they tell you how long it's going to take you. They lie, by the way. It takes you longer. I mean I know what I'm doing, and I do these. That's supposed to be five minutes, it's 15 minutes later. But they're good, they're good. You're not going to learn the whole application from this stuff, but it's going to give you a good start, right. It's pretty good. So here we can see what you can do with Dreamweaver. Code with shortcuts and error checking. Okay, great. And you go to Show All and it opens Adobe's website, and they have all these little movie tutorials, and all that stuff for you. What I want to do, is I want to create a new workspace. Okay. So we can do this with all of our Adobe apps. All of our Adobe apps have some workspace thing going on. So, I'm in standard. Just to make sure that mine is really standard, I'm going to say reset standard, and it resets everything. Nothing changed because this is the standard workspace. I don't like this workspace. I often create my own custom workspaces. So I'm going to create a custom workspace right now for us to work with. I'm going to start with my Insert Menu. I have this insert, it's actually a panel, I'm going to pull it out. So I just grab it by the tab, I pull it out, now it's floating. I actually like my insert menu to go at the top, that's the way I've been using Dreamweaver for a million years and I want it that way because that's the way I like it. So I take this insert and I drag and drop it, and I'm looking for this blue line, and I release my mouse and it snaps right up there for me. How cool is that? So, while it's in the side it has a drop-down but now I've got all these cool tabs. I'm like, "Oh, look at..." I can't do anything because I don't have anything open. But I've got all these cool tabs that I can play with, right. So I can see all my insert stuff up top. Very cool. CC Libraries, love them, not in Dreamweaver. Okay. So I'm just going to close them up. I don't need them. Remember, if I ever do need them everything is located under the Window Menu. I can always go bring back any panel that I want to, right. So now I've got Files and I've got the CC Designer thing, and that's what I want. I'm going to save this with my name. And the state that it's in when I save is the state that it's always going to go back to, okay. So I need to make sure it's exactly the way I want it. And this is not how I want it, so I'm going to make this CC Designer a little bit wider. So it's two columns. Okay. So this is how I use the CC Designer in two columns. And then behind that are my files, which are great. You may not have any files in yours, it's totally okay. To open and close collapsed panels we double-click. I think this screen is too small. Normally on my screen at home I've got my CSS designer at top, and then I've got the DOM, the Document Object Model, on the bottom, and they're both open, okay. I'm not going to be able to do it here, which is fine. So what I'll do is I'll snap it shut, right. And I'll just go back and forth as I need them. I want to see the Designer. That's more important to me than the DOM, and I think that's all that I wanted to change in there, right? There's no more coding stuff that comes up, we used to have coding stuff that used to come up too. Oh, one more thing, I want my Properties panel, they took it away, it's not out here all the time anymore. So I'm going to go up to my Windows Menu, I'm going to open up my Properties panel, I'm going to set this guy right at the bottom of my screen. So my Properties panel is context sensitive, whatever I have chosen it's going to give me options for that. And I get why they hid it, I don't use it as much as I used to. We can do a lot of stuff right...there's little hamburger icons in there...we can do it all in Design View now. It's changed quite a bit. It's like a brand new application.
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.