Hi there!
If you find that you are repeatedly writing the same or very similar lines of code for your web projects then Dreamweaver CC Snippets is going to be perfect for you.
Snippets are premade reusable bits of code that you can add to any web project.
If you can't see your Snippets panel, go to Window.
And it's down here under Snippets.
Okay, you can see here there are some Bootstrap_Snippets.
There are some CSS_Snippets.
There's some Responsive_Design_Snippets.
And the one I use the most is the HTML_Snippets.
You can see here: these are the names of my snippets.
Some of them are so long that they get cut off.
But if you hover above them you can see here it gives you the full name.
All right, so let's go and add one of these handy snippets.
We're going to use this one here the 'Adding a Mailto Link'.
This is one of the great examples of snippets where it's just a line of code that I use quite a lot.
It's a link.
When somebody clicks it's going to send me an email.
And I remember the code.
Mostly it's 'Mailto' and there's a colon.
Is there a question mark?
I can never remember.
So, it's one of those handy occasions, where I'm going to use my snippet.
So, it's down here on my footer between this <p>; and I'm going to add my 'Mailto'.
Cursor flashing in the code and just double-click it over here in my snippet.
There it is.
It's added a handy little comment to say 'don't forget to replace the email address'.
Thank you!
So, I'm going to go through, update it with my email address.
You can see up here in my live view: there it is there.
A little 'Email Us' button with the right syntax there.
So, that's adding a snippet.
We can go through and edit existing snippets as well.
Okay, let's say we're doing some page redirection.
Okay, we've got lots of pages that we are going to redirect to another site or another page just while we work on it.
So, what we can do is: we can select it; and we can click this option here that says 'Edit snippet'.
You can see this one is going to redirect to http://website.com/, which is a placeholder.
I'm going to switch it out for http://adobe.com/.
And while we're here, because we're going to be doing it over and over again to different pages, we're going to edit this thing here called a Trigger Key.
It's just a shortcut.
So, I've created a unique trigger.
Mine is going to be called redirect.
And I click OK.
You can see here my trigger key's being added: redirect.
So, what I want to do is up in my <head> at the top.
You can see up here before my page loads.
I'm going to get it to redirect to another page.
And I'm going to hit tab.
So, you saw earlier how it was quick to add a snippet.
It gets even quicker if you start adding triggers, especially to the snippets that you use really often.
So, now it's time to build our very own snippets.
As I'm building sites there are bits of code that I use over and over again.
And working with specific clients, there are things like colors and font groups that are specific to that client that I use over and over again.
So, let's speed it up.
Let's create our own group.
There's an icon down here called 'Snippet folder'.
I'm going to give it a name.
And this one is going to be called 'My Snippet'.
Now mine's ended up inside 'HTML_Snippets'.
So, I'm going to click, hold and drag it down the bottom here.
So, it's all the way down by itself.
I'm going to close down 'HTML_Snippets'.
Now with that selected I'm going to hit this icon here that says 'New snippets'.
And I'm going to give my snippet a name.
And it's going to be something simple this one.
It's my corporate green that I use over and over in the CSS.
Down here is where the code's going to go.
Now I click OK.
And I'm going to jump to my CSS and find out where it wants to go.
I want to put it - it's for this intro text here.
I want it to be the corporate green.
I'm going to find out the selector that controls them.
There it is there.
I'm just going to double-click 'Corporate Green'.
Awesome.
Now snippets get more exciting when it's large chunks of code.
You can see here; here's my <header> tag.
I'm going to grab all of this, because I use this kind of simple header to start most of my web projects.
I'm going to select it all.
I'm going to go down here to my 'New snippets'.
You can see, because I had it selected, it's already brought it through into the Insert code field.
Let's go and give it a Name.
Give it a Trigger.
Now 'nav' in this case wouldn't be a good name as it's already a shortcut used by Emmet.
So just stay away from using HTML element names as your triggers.
Use something very unique.
I'll use 'mynav'.
Click OK.
And what I can do when I make a new document and I'm getting started for the first time up the top here in my <body> I'm going to type 'my nav', hit the tab key.
You can see all my HTML structure is ready to go with just 3 letters and a tab.
So, you can see how super useful snippets are, whether you're using or editing the existing ones.
Or like in this last example where we created our own.
When you do create your own be sure to have the sync settings enabled.
It's this little icon here in the top right corner.
And this will sync your snippets to the clouds that are available to you, if you end up reinstalling Dreamweaver CC or if you use Dreamweaver CC on another machine.
So, to finish up I'd like to thank snippets and Dreamweaver CC for being awesome.
And you - you're awesome too for watching.
Now, there are loads more tutorials here to help you with Dreamweaver CC.
So, go check out those now.
