13 - Dreamweaver Cheat Sheet

Questions & Comments

Peter Mac Guinness - 2 years ago

Hi subscribed user here, the link to the resources page is broken

Administrator Tayla Coman - 2 years ago

Hi Peter, we're working on getting the resources page up and running. I'll email you a link to download it directly for now.

Emma Beukers - 2 years ago

Hi Tayla, Am I able to get the download link as well? Thanks!
Emma :)

Administrator Tayla Coman - 2 years ago

Hey Everyone, here's the cheatsheet!

Jason Bolton - 2 years ago

Just found out...That command+option+arrow key cheat changes in factors of 10. If you also hold +shift it changes in factors of .1 for fine tuning. kewl.

Administrator Daniel Scott - 2 years ago

Thanks for the super hint Jason. Makes the shortcut so much more useful. Thanks - Dan.

Administrator Tayla Coman - 2 years ago

I like it.

Ronnie Patrick - 1 year ago

Please help me understand this error.
The error is Line 8, Column 26, Expected RBRACE at line 8, col 26.
I think this means this symbol {} however it is there. See code below.

body {
font-family: font-family: 'Open Sans', sans-serif;
max-width: auto;
margin-left: auto;
margin-right: auto;
background-color: #DDDDDD;

.col {
float: left;
padding: 1%;

.col-lg {
width: 31.3%;

.col-lg img {
width: 100%;
height: auto;
display: block;

Style.css is where this error is happening


Administrator Daniel Scott - 1 year ago

Hey Ronnie, switch to code view. Then have a look along the right side of the screen where the lines of code are numbered. 1,2,3,4 etc. Look for one that is red. That will be the line with the problem. It's probably missing a } Let me know if you've fixed it. - DAn.

Ronnie Patrick - 1 year ago

Yes Sir, I fixed it, Thanks for replying through.


Administrator Daniel Scott - 1 year ago

Great news! Happy coding!

ItsZipzon - 1 year ago

Hi! i just wondered if you could show me how to make an email box in your website

Administrator Tayla Coman - 1 year ago

Hi Zipzon, were you wanting a email 'contact' box or you want to set up an email address from a domain name you've purchased?

ItsZipzon - 1 year ago

i want a contact us box

Administrator Tayla Coman - 1 year ago

Check this little guide out! Super easy: https://css-tricks.com/nice-and-simple-contact-form/

ItsZipzon - 1 year ago

I can't figure out how to connect my mail adress

ItsZipzon - 1 year ago

I can't figure out how to connect my mail adress

Administrator Tayla Coman - 1 year ago

the file "congactengine.php" has a variable called "EmailTo" which you change to your email address.

ItsZipzon - 1 year ago

I still get errors tho, and i have tried anything

ItsZipzon - 1 year ago

Hi! i made an overlay that i want to put on top of my website, but i cant put it behind some text i have put there, please help

Administrator Tayla Coman - 1 year ago

What do you mean by "overlay"?

ItsZipzon - 1 year ago

i figured it out but thanks 4 trying to help, it means alot

Administrator Tayla Coman - 1 year ago

Well done !

ItsZipzon - 1 year ago

Hi! i just wonder how i get an image on the tab of my website

Administrator Tayla Coman - 1 year ago

Hi Zipzon, could you give me more detail on what exactly you're wanting, what tab? Do you mean a favicon? If so, just google "favicon creator" and put it through one of those sites to be given a favicon.ico image file. Put in this the root of your folder and then that will give you a favourite icon. Which shows in the tab of a web browser window.

ItsZipzon - 1 year ago

yeah the favicon

ItsZipzon - 1 year ago

but i cant make it to show in the top tab

Administrator Tayla Coman - 1 year ago

Are you only hosting locally? This can cause problems. Try pushing your site to the server and clear your cache.

Administrator Tayla Coman - 1 year ago

Remember to check out the free, downloadable and printable cheatsheet!

Steven - 1 year ago

Hi Daniel,
Loved the tutorials... I have a question about how the client should send their photos?
What's the easiest and best way for them to get them to me for me to start my photoshop mock up? Send them via email?

Administrator Tayla Coman - 1 year ago

Hi Steven, we utilise Dropbox often, just because it means the client can add photos to it as they please.

Michael McCarthy - 1 year ago

Hi Dan, this tutorial was great and really easy to follow. This was the first time I have used dreamweaver. I want to start making my own site from scratch, is it better to start by mocking it up in photoshop and wire framing? Also to learn how to web design fully which order should I watch the other tutorials that will help me on my way?


Administrator Tayla Coman - 1 year ago

Hi Michael, I would recommend that you watch the Illustrator UI & Web design course, and in the coming days/next week we'll be releasing the follow up course which builds the mocked up site you make in the Illustrator course, in Dreamweaver, so you'll have gone through the whole process from beginning to end!

Ted Wales - 1 year ago

Thanks for the Lesson.
I would like to know how to create a photo gallery setup for a customer that they can change and upload their own photos.
using Dreamweaver-Bootstap.

Administrator Tayla Coman - 1 year ago

Hi Ted, sorry for the late reply. For the client to be able to upload the images themselves, you're going to need to work with a database and thats a whole other kettle of fish. You might want to think about using Wordpress

Noah - 1 year ago

hi, can you add auto play to the videos?

Administrator Tayla Coman - 1 year ago

Hi, thanks for the suggestion, we'll have a think about it!

Esperanza Gaffo - 10 months ago

Nice tutorial Dan :)

Christopher Wall - 6 months ago

Thanks for the nice tutorial.

Kerry Gall - 4 months ago

Thanks that was a good starting point

ALL ACCESS: $12 per Month + Cancel anytime   

Video Description

Click here to download our printable Adobe Dreamweaver CC 2017 Cheatsheet!

Free Adobe Dreamweaver CC 2017 Cheatsheet


Video Transcription

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! 

ALL ACCESS: $12 per Month + Cancel anytime