Hello lovely people. In this tutorial, we're gonna look at our cheat sheet. Okay, so this thing here is the video version. There's gonna be a PDF. There'll be a link on the screen just here of the downloadable, printable PDF. So watch it, print off the PDF and stick it next to your desk and become more awesome in Dreamweaver.
So first one we're gonna look at is something called quick edit. I love quick edit. It's new for 2017, Dreamweavers of using an earlier version. It's not gonna work. Now, quick edit is a way of editing the CSS really quickly. And in this case I have got this button and it's far too close to this Ptag, it's been annoying me, this whole tutorial series.
Okay, so I wanna push that down. So there's a P tag here. So let's jump into Dreamweaver. And Dreamweaver. Here's my header. There's my, actually where is it?
So header, there's my main content and there's the PT tag, the offending ptag, and there's the button underneath. So there's the Let's talk button, there's the PT tag and it's got a, a class called Hitting Body. So if I right click it, I can go to quick hit it or I can use Command E, the shortcut, even shorter shortcut. Okay. The cool thing about it is, can you see it's like a little wormhole, kind of goes through and finds my style. Um, css, it knows that it's at line 75 and this is my heading Body copy.
Great. It's gonna and found it. Okay. And I'm gonna put in padding bottom and we're gonna put in 20 pixels. Okay? I'm gonna close that little wormhole up and let's check in the browser.
Hey pH, some distance between the two. Okay, so why it's good, it's just different from going into styles and trying to figure out which style it is. Okay, there he is there. But if it's a long CSS go away Facebook. Um, yeah, it could be super helpful. Quick edit it.
Okay, the next one we're gonna look at is something called Emmett. Um, if you've done the videos tutorials, we've done a little bit. Okay? So just recap. Say I want to add a div tag. I, and I want to add a class to this div tag.
So I want a div tag and I want to add a class called column. Okay? Or a class called awesome. Okay. And I want there to be, how many of them? I would like there to be six of them please.
Okay. And if I hit don't put return hit tab, look at that. I've got classes, six of them with the class name of awesome. Okay, so let's say we need something else. Let's say we need uh, an unordered list with a bunch of list items. So we go L ul and we'll go ally and we'll say we want 20 of them.
'cause that'll take a long time. Hit tab, look at that and order list. Okay, with 20 of them, it gets even better if I want to have say a class applied to them of, I don't know, uh, Dan's bullets. Okay, then go here, hit tab, look at me with Emmett. Okay, there's a bunch of other things that Emmett can do. Okay?
Loads and loads and loads. Go check out Emmett. It's E-M-M-E-T. Okay. And there's a bunch of, there's a website and all sorts of stuff and you can go through and figure out what it is. Quick couple of other quick ones is IMG tab, okay?
Which gives you image and the source. It's alt tag. Great. Uh, another one that I know and can remember is link tab gives you the style sheet link. Okay. All with the right syntax in it.
Super quick. Thank you. Alright. Tip number three is gonna be multi cursor. Okay? So we've added a class to this group of divs that I've got randomly in here, but let's say I need to add another class.
Okay? What I can do is I say I wanna add a class to all of them. Okay? Uh, can be tough. So I can put multiple cursors. So what I can do is hold down the alt key or the option key on a Mac, okay?
And I can drag across all three of these. And look, I got loads of cursors. I can put another class and this might be my um, I can't remember what any classes. I've got a bold class. Okay? So you can just have the cursors going.
Now we've done that in our tutorial series. Great. But let's say we wanna do it in kind of random places. That's great when they're all, 'cause you can alt drag across. But let's say I need one there, but also I need to add it here as well. Okay?
ALT doesn't work, okay, you need to alt drag it. So what you can do is start here, hold down command and I wanna put one in there and I wanna put one there. So made in classes in all these places, can you see my curses one there, one there, one there all flashing. I can say, um, other class, I dunno what this class is called, but awesome. Okay, so multi cursors but even better when they're not just in one place, you can have them all over the shop. Alright?
That is the multi cursor, awesome cheat sheet shortcut. Okay? So this could be my favorite. This is number four. This is something called apply source formatting. And it just cleans up your code.
It does nothing to it, just kind of aligns it and tabs it out. It makes it look pretty. So I was working with this, I downloaded it from Slick N css, it's awesome. But I am very visual so I need everything to kind of like line up and tab out. And you can see there's a class there and my natural instinct is kind of just move it down and make sure he's away from that. And I'm not sure why, but I feel like this needs to be down there and the curly braces and, okay, so I'll do is I'm gonna go over here and there's one called source, uh, format.
Source code. Click on that one and go apply source formatting. You can do it to a selection, but I'm gonna do it to the whole thing and watch this transform into, ah, look at that. So pretty, okay I do this, um, with all of my stuff, okay? I'm picking on this, uh, CSS here 'cause it's not mine, but my stuff ends up looking just as bad. Well, not bad, but you know, my ends are looking a lot worse and it just tidies everything up.
Make it look nice, um, just so I can visually see everything in nicely. Okay? Um, if you're in an early version. So that works in, there's an option over here in 2017. If you've got during me the in earlier versions, um, there is it in there. It's in under, um, it's under edit.
It's under code and there's one in here that says apply source swimming. Okay? Awesome. Okay, so awesome. That is apply source formatting and that's number four. Number five in this lovely list of cheat sheets is something called code folding.
Okay? See these little um, arrows here, okay? It means that I can fold up all of my body and all of my head. Okay? And why it's useful is just tidy settings up, okay? This is not a particularly, um, stressful looking at a bit of h TM L got lots of returns in separate things out.
I wanna fold up the heading and my main okay, just keeps everything together. I find it probably the most useful is say that I've got a chunk that I need to delete instead of trying to, especially when it's off page. Okay? I hate that when it's a really long tag and it starts here and ends like somewhere like way off screen. Let's fake it here, okay? It's way down there.
Okay? So main, and I wanna try and select it and I, I wanna try and figure out where the end is and I'm trying to find it. Okay? So what you can do is just twill us up and then what I do is grab all of that and then delete it and it's a nice way of kind of like, you know, grabbing all of that stuff, okay? So when it's twilled up, it's not gone tool it back out. Code folding people.
I love it. Alright, next on our cheat sheet list is just duplicating, okay? Just a nice really easy shortcut on in Dreamweaver, say that I need another one of these buttons. Okay, this one here portfolio, I need another one. I could select it all, copy it, put return in, paste it out, get the tabs right now I find that's the biggest problem with it all, making it all look pretty. Okay?
So what I can do is I'm doing, doing undoing and instead of doing all that drama, watch this cursor flashing command D boom. Okay, you thrown a pc, it's control D, boom. Okay? But behind a Mac it's command D and watch. Nice. That is duplicating whatever tag it's in, it will reach out and duplicate it.
All right? And that is number six. Alright, the next in the super fantabulous cheat sheets for Dreamweaver is it works good for any sort of numbers. Okay? So obviously we're gonna work better a little bit in CSS with the properties, okay? Let's say the space in between the, okay, the line space in between this H one here, my H one, there's my line height.
If I have my cursor flashing inside any of the digits and I hold down command and alt, okay? If you're on a pc, it's control and alt okay? On a Mac it's actually command and option. And just use your up and down cursors. Okay? So your arrow keys and watch this go up and it goes 80, it goes down, goes to 70, down, down, down.
And you can see where the combination of this real time browser thing here, okay? Which is down the bottom or right? And it's a real time browser new and dream weather 2017, it's a, it, it adjusts exactly the exact same time. Okay? So any of these fields, anything you find, okay, font size here go up and go up and go down and that lovely people has that at adjust any of the numbers by holding down command option or control option and use your arrow keys. Okay?
The next cheat sheet awesomeness in our lovely list is number seven. And it is not, it's number eight. Okay? And it is a way to wrap a tag that exists. So say you've got these tags, they're just sitting here, but I want them to be inside my footer, okay? I haven't written the footer tag and I could go and write the footer up here and okay, put the closing and type it in down here and okay.
And that'll work okay, but it's a little long. So what I wanna do is grab all of these guys. So I'm gonna see you and all over you and I'm gonna hit command T on my mac or control T on a PC and can see there wrap tag. How good is this? I'm gonna wrap it. Okay, hit return.
You have to hit return twice. Okay, I'm not sure why you can see there. Here's my wrap tag. Great. So grab anything, select command T and it's gonna wrap it up. And that's number eight.
So let's move on to number nine and selecting the parent tag. Okay, so let's say I'm deep inside some, let, I don't have it this thing and I'm using these exercise files. Not great, okay? It's not particularly uh, confusing, but let's say it's a really big confusing, there's lots of, um, children inside these parents, okay? So what you can do, say I wanna select the, I'm not too sure who the, uh, you know, who the uh, rapper tag is or the parent tag is. So anywhere inside here, hold down command or control on a PC and use your square brackets.
Okay? I'm going to use the left side one, okay? The open and you can see it grabs the whole tag and go again, it grabs the parent. Go again, grabs the column, go again. Ruler, uh, ro you can see lovely way of grabbing where you know the parent, um, you know the guy around the outside and it's really great when, especially when this parent kind of spans more than one page. Okay?
So you can't quite see where the ending is so you can select it. Okay? So that is command and use open square bracket and that's the way to select the parent tag. Nice. Number 10 is a kind of a variation on number nine. Okay?
Selecting the parent tags, okay, we're gonna use this tag, select in the bottom people ignore this thing down here and it is awesome. Okay, so if I'm inside of here and it's really helpful when you're doing compound selectors and you're not too sure what to put, okay, so let's say I want to yoga navigation up here, put it inside. You can see there's my aag, okay? And this is my tag selected on the bottom here. This is my AAG and it's inside my list item, which is inside my menu, which has got, um, sorry my ul, which is got a a, an ID of menu, which is inside the header, which is inside the body. Just gives me an idea of where I'm at in the world.
Okay? So say I want to click the UL watch that clicks the whole ul grab the header, okay? It's a way of selecting and kind of using this parent uh, unit, using this tag selected on the bottom to kind of know where you are in the world. I love it. Alright, let's do the next one. Okay, so last on this amazing list of cheat sheet stuff, we're gonna look at snippets.
Okay, so I am here, I'm looking at the snippets panel, I'm in my CSS here. So we're gonna start with CSS snippets. There's lots in here, okay, we're just gonna start with the, the big guys. Okay, so let's say I need a footer and I need it to be fixed to the bottom so it doesn't move. So it's always there at the bottom. I could go figure it out or watch this fix footer, double take, look at that.
It's all the coding to fix the footer at the bottom. Nice. Alright? Another one might be you're starting a new project and you need to kind of like put some zero in code in just to clean everything up. Okay? It's really handy to do see some snippets.
There's a two in here. There's uh, H TM L style reset. Watch this first thing I do. Okay? That is a nice impressive style reset, okay? Everything's gonna look the same on different browsers.
Happy days. I'm gonna look at this one. There's another one here called Eric Myers One. Okay, which do I like better? I think I like Eric's one. It's nice and simple.
Okay? Just clears everything out. Padding at zero, happy days. Get started, build a website. Snippets gets even better. Watch this.
If I go into H TM L snippets look within here. So let's find some H, TM L, okay. And I need to add now a N bar. Okay? So I'm gonna go to, I'm gonna go into something, create a n bar. There it is there look.
Got a nav bar outta the class to it. It's add these guys into it. The list items are all linked and ready to go. There's classes, I can duplicate them snippets. Awesome. Okay?
Next little bit is let's do metatags. I need to add them. I can never remember what they all are. Okay? I get in trouble and I don't add them and here I go and I find them over here and it is general meag. Boom.
That one or versus that one? Nope. Or versus uh, metatags for SEO. Okay? Uh, I need probably a couple of those, but yes, the name in there, the syntax, right? I don't have to go and try and remember what they are.
Snippets. Okay? And the last one, okay, and this one comes with a double banger. It's the last one, the finale of the cheat sheets. Okay? And it is this lovely one here.
Oh imagine. Okay, so I've got a P tag, okay? So that's P and I wanna put some Lauren nips into it. And you go to that lips sum.com and yeah, there's the coffee cup on there, okay? And you go and copy it out, but it's got junk attached to it, so you gotta clean it. But watch this at Laurenson.
Oh my goodness. Lauren Ipsum built into there and I said this was the double banger for the finale. Okay, so Lauren Ipson was awesome, but imagine you're doing that quite a bit. Imagine if there was a shortcut you could make. Okay? You can.
Okay, you can see in here this one says lipsom. Okay, I'm gonna get rid of this one and just put in lower. Okay? And can you see underneath trigger here I can say I can make up anything I like. Okay. Oh male two, another good one.
Okay, so I'm just law now I'm in here. I've got my PT tag and I wanna put in LOR and hit tab. Oh, I'm making my own edit stuff. How good is that? Okay, mail two is another one. Okay, tab it out.
Who can remember how mail two goes? I guess that most of the time and I guess it, right, okay, but lot of the time I gotta go check. Is it Colon? How does it all work? Snippets, they're in there, they work. And that my friend is the end of your lovely cheat sheet.
Now remember if you're just watching this course, there is, this is kind of the end of a longer course. Um, what is it? 12 videos of making your own responsive website. Okay? Go check that out. Otherwise, there is a PDF you can download.
The link will be on the screen again here again and go forth, be quick, be awesome in Dreamweaver. Thank you very much.