Dreamweaver Cheat Sheet

Hello, lovely people. In this tutorial we're going to look at our teach sheet. So, this thing here, is the video version. There's going to 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 thing we're going to look at is something called QuickEdit. I love QuickEdit. It's new for 2017 Dreamweaver, so if you're using an earlier version, it's not going to work. Now QuickEdit is a way of editing the css really quickly, and in this case, I've got this bun, and it's far too close to this

 tag . It's been annoying me this whole tutorial series. So I want to push that down, so there's a

tag here.  

So, let's jump into Dreamweaver. In Dreamweaver, here's my header. There's my-- actually, where is it? So, header, there's my main content, and there's the

tag, dependent

tag, and there's the button underneath. So there's the 'Lets Talk' button, and there's the

tag. It's got a class called 'heading body'. If I 'right click' it, I can go to QuickEdit, or I can use command here, either a shortcut, even a shorter shortcut. The cool thing about it is, as you can see, it's kind of a little wormhole It kind of goes through and finds my 'style.css'. It knows that it's at line 75, and this is my 'heading body' copy.  

Great! It's gone ahead and found it. And, I'm going to put in 'padding-bottom'. And I'm going to put in '20 pixels'. Close that little wormhole up. And, let's check it in the browser. Hey, phew! Some distance between the two. So, why it's good? It's just different from going into styles, and trying to figure out which style it is. There he is there. But if it's a long css, go away Facebook, yes, can be-- this would be helpful. QuickEdit. 

The next one we're going to look at is something called Emmet. And if you've done a videos tutorial, we've done a little bit. So, just a recap, say I want to add a div tag, 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', or a class called 'awesome'. And, I want it to be, how many of them? I would like it to be '6' of them please, and if I had-- don't put 'return', hit 'tab'. Look at that. For our classes, six of them, with the class that said 'awesome'.  

Okay, so let's say we need something else, let's say we need an unordered list with a bunch of list items. So we go 'ul' and we'll go 'li', and we'll say, we want '20' of them, because that would take a long time. Hit 'tab'. Look at that. I've got a list with 20 of them. Gets even better if I want to have, say a class applied to them of, I don't know, 'Dans bullets'. Then go here, hit 'tab'. Look at me, with Emmet. There's a bunch of other things that Emmet can do. Load, and loads, and loads. Go check out Emmet, it's E-M-M-E-T. And there's a website, and all sorts of stuff, and you can go through and figure out what it is.  

Couple of other quick ones, there's 'img', 'tab', which gives you image, and the source, and it's all tagged. Great! Another one that I know, and can remember, is 'link', hit 'tab', gives you the style sheet link, all with the right syntax in it. Super quick. Thank you! 

Tip no. 3 is going to be multi cursor. 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. What I can do is I-- say I want to add a class to all of them. Okay, it 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, and I can drag across all three of these. Look, we got loads of cursors. I can put in another 'class'. This might be my-- I can't remember any classes. I got a 'bold' class.' You can just have the cursors going. Now, we've done that in our tutorial series, great! But let's say we want to do it in kind of random places, that's great when they're all-- because you can 'alt' drag across, but let's say I need one there, but also I need to add here as well. 'Alt' doesn't work. You need to 'alt' drag it. What you can do is, start here, hold down 'command', and I want to put one in there, and I want to put one there. The remaining classes in all these places. Can you see all my cursors? One there, one there, one there. All flashing. I can say, 'other-class'. I don't know what this class is called. Awesome! So, multi cursors, but even better when they're not just in one place, you can have them all over the shop. All right, that is the multi cursor, awesome cheat sheet shortcut.   

Okay, so this could be my favorite. This is no. 4. This is something called 'Apply Source' formatting. It just cleans up your code. It does nothing to it, just kind of aligns it, and tabs it out, and makes it look pretty. So, I was working with this. I downloaded it from 'slicknav.css'. It's awesome, but I am very visual, so I need everything to kind of align out, an tab out. And you can see there's a 'class' there. My natural instinct is to kind of just put it down, and make sure he's away from there.  I'm not sure why, but I feel like this needs to be down there, and the curly braces '{ }'.  

So, what I'll do is, I'm going to go over here, and this one called 'source', 'Format Source Code', click on that one, and go 'Apply Source Formatting'. You can do it to a selection, and you can do it to the whole thing, and watch this transforming into-- Ah, look at that. So pretty! I did this with all of my stuff. I'm clicking on this 'css' here, because it's not mine, but my stuff ends up looking just as bad, well, not bad, but mine is looking a lot worse. And it just tidies everything up, make it look nice, and just like I visually see everything nicely. And if you're on earlier versions, that works in-- there's an option over here, in 2017. If you got Dreamweaver in earlier versions, there is, it's in there, it's under 'Edit', it's under 'Code', and there's one in here that says 'Apply Source Formatting'. Awesome! So that is Apply Source Formatting, and that's no. 4. 

No. 5 in this lovely list of cheat sheets is something called 'Code Folding'. See these little arrows here? It means that I can fold up the whole of my body, and all of my head. And, why it's useful? It just tidies your things up. This is not a particularly stressful looking bit of html. I've got some 'return's in to separate things out. I want to fold out the heading in my name. Okay, just keeps everything together. I find it probably the most useful, say that I've got a chunk that I need to delete, instead of trying to-- especially when it's off page, I hate that, when it's a really long tag and it starts here, and it ends somewhere like way off screen, it's-- if I click here, it's way down there. So, 'main', and I want to try and select it out. I want to try and figure out where they ended, and I'm trying to find it. So what you can do is, just twirl this up, and what I do is grab all of that, and then delete it. That's a nice way of grabbing all of that stuff. So, when it's twirled up, it's not gone. Twirl back out. Code Folding, people. I love it.   

All right, next on our cheat sheet list is, just duplicating. Just a nice really easy shortcut in Dreamweaver. Say that I need another one of these buttons. This one here, 'Portfolio' and I need another one, I could. Select it all, copy it, put 'return' in, paste it out. Get your 'tab's right. Now I find that's the biggest problem with that, making it all look pretty. Okay, so what I can do is, undoing, undoing, undoing. And, instead of doing all that drama, watch this. Cursor flashing, 'command-D', boom. For a PC, it's 'control-D', boom, but on a Mac, it's 'command-D', and watch. Nice. That is, duplicating. Whatever tag it's in, it will reach out, and duplicate it. And that is no. 6. 

The next in the super fantabulous cheat sheets for Dreamweaver is what's good for any sorts of numbers. So, obviously, we get to work a little better when in css, with the properties. Let's say the  spacing between-- the line spacing between this 'h1' here, my 'h1', there's my 'line height'. I have my cursor flashing inside any of the digit. And I hold down 'command' and 'alt'. If you're on a PC, it's 'control' and 'alt'. On a Mac, it's actually 'command' and 'option'. Just use your 'up and 'down' cursors, so, your arrow keys, now watch this, I go up, it goes to 80, it goes down, it goes to 70. Down, down, down. And you can see, with the combination of this real time browser thing here, which is down the bottom, and it's a real time browser, and if you are in Dreamweaver2017, it adjusts at exactly at the exact same time. So, any of these fields, anything you find, font size here, you go up, and go up, and go down, and that, lovely people, has had a-- adjust any of the numbers by holding down 'command' option, or 'control' option, and using your arrow keys. 

The next cheat sheet awesomeness in our lovely list is no. 7. And, it is not, it's no. 8. And it is our way to 'wrapper tag' where it exists, so, say you got these tags that are sitting in here, but I want them  to be inside my footer. I have it in my footer tagger. I could go and write the footer up here, and   put the closing, and type it in down here. And that will work. But it's a little long, so what I want to do, is grab all of these guys, and I'm going to say, 'You', and 'All of you', and I'm going to hit 'command-T' on my Mac, or 'control-T' on a PC, and you can see there, 'wrap tag'. How good is this? I'm going to wrap it. Hit 'return'. Had to hit 'return' twice. I'm not sure why. You can see there, there's my wrapper tag. Great! So grab anything, select 'command-T', and it's going to wrap it up. And that's no. 8. 

So let's move on to no. 9. And it's, selecting the parent tag. So, let's say I'm deep inside some layers. I don't have them. These things that I'm using, these exercise files, not that great. It's not particularly confusing. But let's say it's really a bit confusing, there's lots of children inside these parents, so what you can do is, say I want to select the-- I'm not too sure who the wrapper tag is, or the parent tag is, so anywhere inside here, hold down 'command' or 'control' on a PC, and use your square '[ ]'brackets. I'm going to use the left side one, the open ' [ ', and you can see, it grabs the whole tag. And I go in again, it grabs the parent, go again, grabs the column, go again. So, as you can see, lovely way of grabbing, where the parent, the guy around the outside. It's really good especially when this parent kind of spans more than one page, so you can't quite see where the ending is, so you can select it. So that is 'command' and use open square bracket, ' [ ', and that's the way to select the parent tag. Nice. 

No. 10 is a kind of a variation on no. 9. Selecting the parent tags. We're going to use this tag selector at the bottom. People, ignore this thing down here, but it is awesome. So, if I'm inside of here, and-- it's really helpful when you're doing compound selectors, and you aren't too sure of what to put. So let's say I want to-- I go up to navigation up here, put it inside. You can see, that's my tag. And this is my tag selector. On the bottom here is my tag, and it's inside my list item, which is inside my menu, which has got-- sorry, my ul which has got 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. So, I want to click the 'ul'. Watch that. It selects the whole ul. Grab the header. So, a way of selecting, and kind of using this parent-- using this tag selector at the bottom to kind of know where you are in the world. I love it. 

All right, let's do the next one. So, last on this amazing list of cheat sheet stuff, we're going to look at snippets. So, I'm here, I'm looking at the snippets panel. I'm in my 'css' here, so we're going to start with css snippets. There's lot's in here. We're just going to start with the big guys. 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. 'Fixed Footer', 'double click'. Look at that. It's all the coding to fix the footer into the bottom. Nice! 

All right, another one might be, you're starting a new project, and you need to kind of put some zero encoding just to clean everything up. It's really handy thing to do. css snippets. There's two in here. There's 'HTML Style Reset'. Watch this. This thing I do. That is a nice impressive style reset. Okay, where everything's going to look the same on different browsers. Happy days. I'm going to look at this one. There's another one here called 'Eric Mayer's'. Which one do I like better? I think I like Eric's one, it's nice and simple. Just clears everything out, padding as they are. Happy days! Get started. Build a website. Snippets. Gets even better. Watch this. If I go into 'HTML_Snippets', look in here, let's find some html. And I need to add a 'nav' bar. So, I'm going to go to, I'm going to go into something called 'Create a Nav Bar', there it is there. Look, we got 'nav' bar. We've added a 'class to it, and settled all these guys into it, the list items are all linked, they're ready to go. These classes, I can duplicate them. Snippets. Awesome! 

Next little bit is, let's do Meta tags. I need to add them. I can never remember what they all are. I get into trouble when I don't add them. And here I go, and I find them over here, and it is "General Meta Tag'. That one, all of this is that one. All of this is 'Meta Tags for SEO'. I need probably a couple of those, but, yes, the name, and their own syntax. Now I'll have to go and try and remember what they are. Snippets.  

And, the last one, and this one comes with a double banger. It's the last one, the finale of the cheat sheets. And it is this lovely one here. Imagine, I've got a

tag, okay, it says 'p', and I want to put some 'Lorem Ipsum' into it. I go to that, lipsum.com. There's the coffee cup on there. And you go and copy it out, but it's got junk attached to it. You got to clean it. But watch this, at 'Loreum Ipsum' Oh, my goodness! 'Loreum Ipsum', built into there. And I said that this was a double banger to the finale, so 'Loreum Ipsum' is awesome, but imagine you're doing that quite a bit. Imagine if there was a shortcut you could make. You can. You can see in here. This one says 'Lipsum'. I'm going to get rid of this one, and just put in 'lor', and can you see, underneath the trigger here, I can make up anything I like. Oh, 'Malto', another good one. So, just 'lor'. Now, I'm in here. I've got my

tag, and I want to put in 'lor', and hit 'tab'. Oh, I'm making my own Emmet stuff. How good is that?  

Okay, 'mailto' is another one. Okay, 'tab' it out. Who can remember how 'mailto' goes. I guess that most of the time, and I guess it right, but by the time I go to check, it's a colon. How does it all work? Snippets. They're in there, that works. 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 our longer course. It was 12 videos of making your own responsive website. 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!