Creating a Bootstrap Navigation Bar
Lesson 21 from: Create Websites with DreamweaverMelissa Piccone
Creating a Bootstrap Navigation Bar
Lesson 21 from: Create Websites with DreamweaverMelissa Piccone
Lesson Info
21. Creating a Bootstrap Navigation Bar
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
Creating a Bootstrap Navigation Bar
All right, you guys. So, let's pick up where we left off. So, we have a Bootstrap template all ready to go. We've got our site set up. We've got all of our files in there. First thing we want to do, we're going to just start from the top, down. We want to change that navigation. That navigation is fancy. It's got some code in it. We do not want to mess with it because let me tell you, if you're anything like me, you will mess it up and you'll be like, "Now, it doesn't work anymore." So, instead of trying to do it all in here, the cool thing about CSS is there's like CSS Makers out there. Like, what the heck is a Maker anyway? Well, I'm going to take you to this website. Here it is. And this is a Menu Bar Maker, okay? So you guys have the URL here, it's in the notes. And create your own Bootstrap navbar. How cool is that? We already have one created. All I care about is the CSS because I don't want to mess with it. It's got 6,500 lines of code. The whole idea behind CSS is that... I mea...
n, behind CSS, behind Bootstrap CSS is that you have access to all that stuff. So, think about the code that we created, right? We created some CSS code and we said, "Do this," and then we called upon it as needed. Well, Bootstrap has 6,500 lines of code already done and formatted for you so you could go in and say, "Oh, I need it to do this. There's a piece of Bootstrap CSS I can use." You pull that out, you add it to your HTML, and it's formatted. What is that code? I don't know. They're 6,500 lines. So there are cheat sheets online, okay? Nobody expects you to memorize or know all this stuff. Again, it's one of those things the more you use it, the more you'll get it. And the things that you use all the time, you'll memorize. Like, I know there's a Bootstrap code for that. Do I know exactly what it is? No. But that's okay because Dreamweaver helps, right? So I start, so I'm like, "Oh, it's center something, or pull, or something." I know a piece of it, right? So I start typing it in and Dreamweaver starts giving me helper stuff. When I get really desperate, I just go to the Bootstrap site. It's GetBootstrap.com and I can go look it up. Sometimes, I bypass websites altogether. I just type something into Google and it pops up. So, it'll either take me to the Bootstrap website, sometimes it takes me to W3Schools, which is great because it tells you how to do stuff. Hey, I've been doing this a long time. Do I know everything? Not even close, you guys. Not even close. Do you know how many times I look stuff up just to put this together for you? I'm like, "Now, what does that do? I don't know what that does. Let's go look it up." And I look it up. So, just look it up. I said, you know, nobody's on the web more than web designers. So this stuff is all out there for you, right? I promise. Super cool, super easy, I know my colors. I know my colors. Why? Because I have my sticky. So, I'm going to come in here... As much as I love purple, we're not doing purple. So, we're going to get rid of it. So, I'm going to click on that default background and that is going to be my blue. And my blue is #23a4e4. Choose. Yay, it's blue. Active Background, that actually doesn't matter because we're not going to invoke it. But just for kicks, I wanted it to be our purple, which is #8f789d. Default color is actually our tan color. Our tan color is #f1deb3. And then our active color. So, the mouse-over color, that would be white, one, two, where are you? ff, #ffffff. Okie dokie smokey. Yeah, perfect. So you can see, I mouse over, it turns white. Awesome. So now, I can scroll down this page and it has these handy little tabs. I want CSS. Don't even worry about what all that...I don't know what that other stuff is. I don't use it. All right. But I know what CSS is and I know I'm going to use it. So I'm going to grab this baby, I'm going to be like, "Oooh." I just Shift, clicked at the bottom to select it all. I got it all selected, Cmd+C or Ctrl+C to copy it into my clipboard. I'm going to jump back into Dreamweaver. We already have crazy CSS going. I'm going to put this in its own CSS, just to make my life sane. So, I'm going to do File, New, Cmd+N or Ctrl+N. I'm going to go to New Document, CSS, choose Create. Come in here on line 3, I'm going to do Paste. I'm going to do File, Save As, navbar.css. Make sure I'm in my site root inside of my CSS folder. Click Save. Boom. Done. Close. I don't need that. I'm going to go into my CSS Designer and I'm going to link it. So, in my Designer... Make it to... There we go. Click on All Sources. I'm going to say Attach Existing, Browse. Make sure I'm in my root folder because I have a bunch of folders that look like this in my CSS. Choose my navbar.css. Choose Open. It's linked, it's open, it's good, and bam, ta-da. How easy was that? Right? A lot easier than trying to do it by hand and going through the CSS and trying to find the colors. You know, like, "Oh luck." That would've taken me like the rest of the afternoon just to do that by hand. Okay. Cool. So now we have a pretty navbar. It looks the way I want. I can see it's got my little hamburger. It's working great. Awesome. I don't need all this stuff. So, what's in here anyway? I'm just going to click on it to take me to the code. Okay. So in the code, I have a bunch of stuff going on. It's a little more complicated than what we were dealing with, right, because there's a lot of stuff in here. So, I have... Right away, you can see, here's my list item for this link. It has this purple thing on it. What is that? Well, that is like, that's the indicator of the page that you're on. We're not going to use that, too complicated. I don't need that. I know what page I'm on. I clicked on it, right? So what I'm going to do is here where it says li class="active," I don't want that. I'm just going to delete the class. Okay? And it goes away. So I've deleted the class. And now, I want to fix all this other stuff. I don't want to have to fuss in the code. I'm going to use the DOM for this. So I'm going to click on my DOM and I'm going to go to my nav. Okay? So here is my nav in the DOM. So let's take a look and see what we've got. I don't need a search bar. The search bar is inside of a Form, which we're not going to talk about, but I know I don't need that. So I have Form selected. I'm just going to hit Delete or Backspace on the PC. Get rid of that. Okay? I also have like two separate navbar things going on here. Well, I only want the one on the left. I don't need the one on the right. So let's get rid of that too. So in here, I've got this ul... Nope, that's the wrong one. It's this one. Make sure you're paying attention, right? So I had the wrong one. So now I have the right one. I have two unordered lists. You can see that inside of the DOM, right? Just real quick. So, I've got unordered list in my links on that side, unordered list, and you can see, it's this part that's selected. That's the part that's got to go. Hit Delete. Bam. Gone. Okay? So I'm good. I'm left with just the pieces and parts that I want, but we had three links, so I want another link. Okay? Easy-peasy. I'm going to go up to Design View. And you're like, "That looks terrible." Yes, it does. It's okay. Brand, I'm going to change my brand to Vivo Donuts or Donut. There's no plural. Link, link. Okay, so, I can kind of see what's going on, right? This is why we always look at both because I want to be able to see what's happening in the text. It all looks good. Then I have my nav. And I still have some weird stuff going on in my nav. So, I've got this link and it says span class="sr-only." I don't know what that is. Oh, that's another current thing. Oh, you know what? I don't need that. But I do need the end of my link. So I'm just going to select that whole span. So, what's a span? A span is the nail that you hang your curtain on. I said you only need a nail, just a nail. Span is your nail. That's all you need. That's all it's good for. Not good for anything else, it's just good to hang CSS on. Okay? So that's your nail. Delete the nail. Okay. Span's gone. I'm good. And you know what? I'm just going to copy and paste it in here because it's quicker and faster. So I'm going to copy that line, my list item, and I'm going to... Undo. Clearly didn't copy. Whoops. Okay. Try this again. Sometimes, when it fusses, I right-click and I say Copy, thank you, and then Paste. Much better. Okay. So now I have three links. Now, I'm going to call them Link One, Link Two. But see, you guys totally understand all the HTML now, right? It's not mysterious anymore. It really is easy. It's easy. It's a tag-based language, not programming. Just throw the programming thing right out of your head. And then you're like, "I got HTML. It's easy." Okay. So, I'm going to save. I somehow...I don't know how I did that. Oh, it's not really there. Okay, cool. I was going to say I somehow inserted an absolute div, but I did not. I did not. That looks good. Okay. So, back to Live View. Okay. And it's done. That's a lot easier than us doing it by hand in the last one, right? So even though this is more complicated, it's all kind of done for us, right? All right. Cool.
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