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
Add Social Media Buttons
I'm going to create some space in my footer. So my footer definitely needs a little bit of padding, right? So let's go ahead and add 15 pixels on the top and bottom. Give us some space to work with so we can see what's happening. The other thing is, I want everything in my footer to be centered, right? I don't like the text being that way. So I can just come to "Footer," and I can go into "Text," and I can say "Center." And now everything's aligned centered, right? Easy peasy. I'm going to do a File, Save All. Just to make sure we're good. And now what I want to do is I want to add... I want to add our social media links. I have that stuff out here. Let's go find it. I'm going to hide all this stuff. So, we have our "Simple Donuts" website. This is our root folder, the one that we've been working in. And, I have website resources. Hiding inside of my website resources, I have some files that I need. One of them is the HTML file that I told you I created for you, that has all the HTML i...
n it, okay? So, socialmediatemplate.html. I'm actually going to open that up in Dreamweaver, so you can see it. And then I'm going to jump back out to "Finder." The other thing that's in here that we need is, we need this thing called "font-awesome," okay? So, I'm going to talk a little bit more about this when we do our bootstrap template in a little while, but for now, know that you can go to the website, fontawesome.io/get-started/, okay? And, it tells you what to do. Basically, it downloads the file, you unzip the zip file, and you take the entire folder, and you move it into your website. Which is exactly what I'm going to do. So, when you unzip it, you get exactly what I have here, this folder, all right? Inside this folder, there's a bunch of stuff in there. You don't even need to worry about it. Just grab this baby and stick it in there. So I'm going to do an OPTION+drag, copy and paste it in there. And, there is a CSS in here. See the CSS? In order to make this work, I need to link my page to the font-awesome CSS. So, basically, font-awesome is a font, okay? So the idea is that these guys are not images. It's all done with CSS, okay? So, they're icons inside of the font-awesome set. Again, this is an option I've created for you, so you might as well use it. However, if you find yourself struggling on your own, you're like, "I can't make this work," it's okay. You can do it with images. You don't have to do it this way, okay? I'm just trying to show you a cool, fancy way of doing it. Just make images. Go into Photoshop and make yourself a Facebook image, and a Twitter image, whichever one that you want, okay? You can totally do it with images. In the meantime, let's take a look at my code. So I have my code, and I have commented my code for you, okay? So, this is an entire webpage. Obviously we don't need the whole webpage, we just need the part that we need. But look, I've told you, "Download Font Awesome. Place folder in root folder." I'm telling you what to do, right? And then, what happens is, just like the other CSS links that I've showed you already, this link is going to pop up. You need to create it. You need to link to the Font Awesome CSS, which I'm going to show you how to do on our page, in order to make it work, right? And then, in this single document, I have the CSS that I created for you. Custom ICSS, okay? And the HTML for each one of these. So what I'm going to do, is I'm going to cut and paste these out of here, and I'm going to put them in our document. If this is something that you're going to use over and over, you can create what's called a "Snippet" inside of Dreamweaver. So down here, next to "DOM" and "Assets," we have "Snippets." Let's close this up. That's a lot of snippets. These are all snippets that come with Dreamweaver, okay? That are available for you to use. There's even Lorem Ipsum one in there, somewhere, or there used to be. I kept looking for it for this class, I couldn't find it. I don't know if they took it out or not, but...I'm going to create a new folder inside my snippets. I'm just going to right-click. And I'm going to say, "New folder," and I'm going to call it "Melissa," okay? And I am going to make a selection of...this is really big. I'm going to select the CSS, social UL...so, you know, this looks a lot like what we just created, right? Unordered list, list item, list item that is a link, list item hover, right? So I'm just going to go ahead and select just that CSS. Just the bit. It doesn't have to be a whole...you know, a whole file, right? It's just the bit that I want. And I'm going to come down to the bottom of the snippets and I'm going to click on "New snippet." And it inserts the code that I have selected, and it's asking me for a name. And I'm going to call this, "social media CSS," okay? I can give it a description if I want. I'm just going to click OK. I'm going to move that into my folder, "Melissa," all right? So now I've got my social media CSS, I can also do it with HTML. So, I've got all that...I'm going to come down here. And my CSS that I've created for you is already applied to the HTML, right? So this unordered list has a class of social, right? So I'm going to select this, and look, I even told you, "Icons won't show up until page has correct path to fontawesome.css." So, if you, like, pull this out and you start using it, and you're like, "Why isn't it working?" Because you didn't link it to the CSS, okay? So I'm going to grab this, all the way down to the bottom of the unordered list. I'm going to click on "New snippet." I'm going to call this, "social media HTML," okay? And now, I'm going to show you how to use it from a snippet. You could just copy and paste it, but snippets are cooler. I want to create a brand new CSS. Remember I said I was going to keep it all separate so we don't get crazy, right? Just because I want you guys to be able to work with what we have in here. You can see it's getting long, it's getting full. I don't want to add more junk to this, okay? So what I'm going to do is I'm going to create...I'm going to do File, New, so, CMD or CTRL+N. I'm going to say, "New document," "CSS." "Create." I'm going to come down to line three, and I'm going to go to my snippets, and I'm going to do my social media CSS. And I can just double click, and it pops right in there, okay? And I'm going to do File, Save As. I'm going to call this social.css. I'm in my site root folder. I'm going to click on my CSS folder that I created earlier, and I'm going to keep it in there. And, I've got that. Okay. So, cool. I've got that. Let's go to index. I'm in my footer. I need to go to my footer. I'm in my CSS. Source Code. There's my footer. I've got my copyright information in there, so I'm going to place my cursor before copyright, and, you know, I like to be able to see what I'm doing, right? So I'm going to make lots of space in there. All right. I got it in there. I'm going to go to socialmedia...my social media HTML snippet, double click. Boom. It's in there. And...nothing happened...and because I still need to attach that stuff, right? Let's just make sure it's all in there. Yeah, it's all in there. All right. At the top, let's go to files, CSS designer. I want you to see where it's going to get added...and it'll be right here. Okay. So at the top of our page, line six, I've got my reset. Line seven, I have my main. Let's go ahead and add in this new one. So I'm going to go to Plus, and Sources, Attach Existing, Browse... I did save it, right? I think I saved it. Options, Root Folder, make sure I'm there...CSS, Social, Open. And, click OK. Now the other thing I need to do, is I also need to link it to Font Awesome. So, not only do I need it to link it to that social one that I created, but I also need to link this guy to the Font Awesome one as well. So now, social came in here...it's there. I'm going to do +, and I'm going to do Attach Existing, Browse, make sure I'm in my root, Font Awesome, CSS, and I'm going to go to the minimum one...Link, OK. It added it...I don't know why it keeps jumping down like that. It's up there...right there. Font Awesome. All right. And there we go. It's in there. So I just had to link all that stuff together to make sure that it all showed up.
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