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
Prepare to Create a Web Page
We are going to get started on our website that we're going to create from scratch. So, we're going to plan out the whole thing from the beginning. By the way, everyone can follow along with this. It doesn't require any special files. We will add some images and stuff, but you can use any images lying around, if you guys don't have the files with you. All right. So I have Dreamweaver opened, but we have to do some planning before we ever even get inside of Dreamweaver. And I am going to close up Dreamweaver. Okay. So, what I want to do is, I want to create what's called a Root folder. And a lot of these terms and technologies and stuff come from Unix. Lot of websites are hosted on Unix boxes, so that's why I'm saying like, Roots or whatever. That's where all these names come from, you guys. And what I want to do is, I want to gather all of my stuff that I'm going to put inside of my web page. So I've already spent time in Photoshop creating the pieces and parts for the images, and I ne...
ed to figure out where my website is going to live on my computer, right? Super important because wherever I decide it's going to live, it kind of needs to stay there. You can move it, but it's kind of a pain to repoint Dreamweaver to where you move it to. So you really want to find it a permanent home, wherever that is on your computer. If you have some folder somewhere that says Websites or whatever. I'm going to do it on my desktop, okay? Because this is not going to live very long, just on this desktop for today. And I'm actually…I take it back. I'm going to stay on my desktop and I'm just going to right-click. I'm going to create a new folder on my desktop, and I want to give this folder some sort of name so that I know it's my website. And I am going to call it "simple donuts," because we're doing a simple one-page site about donuts. So, inside of my "simple donuts," this is now my Root folder. I want to bring in any assets that I already have. And the assets that we have, we created these handy little images inside of Photoshop, so I'm actually just going to drop those in here. But I'm going to rename this folder, right? Inside this folder is all my images. Let me go back. I'm going to rename it "Images." Because the web servers are set up to look for stuff like this, okay? So if you've ever wondered why we name an index page "Index." Why is it called "index.html?" Why isn't it just called "Home," or "My First Page," or whatever? Because the web servers are programmed to look for something called "Index," okay? Some of them are also programmed to look for something called "Home." I don't know if that's still true. It used to be a long time ago. So I have my "Images" folder. So I have my images. Everything that I'm going to create is going to go in here. So, I'm going to have CSS to go in here, I'm going to have HTML files that go in here. If I have extra stuff that I may want to access, let's say if I have like a Word document, or an Excel spreadsheet, or whatever. Whatever kind of content that I might have lying around, I might create a folder inside of here called "Resources," or "Content," or something as well. That folder is just to keep it handy, not necessary. I wouldn't even necessarily upload that to my server once I'm done with my website, but I want to keep everything in here. We are going to use multiple CSS files. I could have them all kind of out in the open, but I think I'm going to create a new folder for CSS too. So I'm going to call it "CSS." And in reality, you may just use one giant CSS file. I just want to keep them all separate. Okay. So now that I have that done, and I know where it's going to live. And I just want it off to the side, just in case I need to see it. I'm going to go ahead and go back into Dreamweaver, and I've kind of hidden the files that we were looking at. So if you don't have any sites inside of Dreamweaver already, you're just going to be looking at your computer, right? So in my Files tab, over here on the right, it says Computer. You can see I can look at the computer, I can look at the hard drive, I've got some externals on here, and I've got this donut site that I created yesterday. So, if you do have multiple websites, they'll all show up in here so you can always bounce back and forth. So Dreamweaver, I am now done monkeying around on the computer, okay? Things that I might do, is I might have to go to Photoshop and make new images, then I would dump them in the "Images" folder, okay? But I'm not going to move things around. I'm not going to rename them, and I'm not going to move them around because Dreamweaver will lose the links. From now on, once I've created that and I set up this site, everything's going to managed inside of Dreamweaver. So I'm going to go to Site, New Site. In New Site, it's asking me for a name. I'm going to call this, "simple donuts." The most important part, okay? Everybody's eager to get through this screen and click OK. The next part is the most important part, Local Site folder. This is our Root folder that we created. So I'm going to click, and to browse for my folder, I'm going to go to my Desktop, I'm going to choose that "simple donuts" folder that I created with my stuff inside and say Choose, okay? Don't skip that step. That part is super duper important. That's all I need to do to get started in Dreamweaver. I now just click Save and boom, inside of My Files folder, I now have... You can see my "CSS" folder, you can see my "Images" folder. If I do a little twirly arrow, you can see all of my images inside of there. I also have this Assets panel. Oh, I got them both to show up. So inside of my Assets panel, you can see, on the left-hand side of the Assets panel, there's a whole bunch of little icons. I am looking at the images, which is the first icon, and I can see a preview of my images, of what images I have to work with, okay? So if I'm not sure what they look like, I could just come in here to Assets and be able to see them.
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