Today I wanted to share with you a really useful tool which can be found in Adobe Dreamweaver. The particular version I am working with is CS5 so will be demoing the snippet feature inside of that.
Many of you might already know what the Snippet feature is inside of Dreamweaver, but for those of you who don’t, it is as follows. In the Dreamweaver menu, navigate to Window > Snippet and select this. A pop-up panel should appear like below:
So theses are all of the preset ‘snippets’ loaded in to Dreamweaver. To use one, you can simply drag the snippet across to your page. This will insert the code in to your web design code. Alternatively, you can select the snippet, right click and then select ‘insert’.
Why?
You might be thinking, “why do I need this?”, “How can it benefit me?“.
I think the main reason for using this is speed – I’m a big fan of using shortcuts but only in the right instance. I think the best way to learn something (for me personally), is to do it over and over again. If you are copying and pasting code, using shortcuts again and again, then I don’t think you will learn much, but that’s my personal opinion. I use this when I have a nice bit of code that I will need to use over and over again – create my own snippet and assign it a keyboard shortcut. It’s up to you how you use this and here’s how.
How?
So firstly, you will need a nice bit of code, or something you need to use a fair few times. Here’s something I like to use qwuite a bit. If I am making changes to a live website, I put in place a nice bit of PHP which checks for your IP address and then displays only to that IP.
<?php if($_SERVER['REMOTE_ADDR'] == "IP HERE") { ?>
<?php } ?>
So I have written this on my page, selected the code and then right click. You get a little menu appear, select the option I have done:
You now get another pop-up window where you can define a few options:
So the first option is name, this will help you identify your snippet from the list. The second is description, again this is for your own use. Snippet type – you should select ‘insert block’ for the simple use. Wrap selection does exactly what it says on the tin. The preview type should be code.
Then click OK and you should now see your custom snippet loaded into the snippet panel. Simply drag and drop this in the content area to add your custom snippet.
You can right click the item in the menu and assign it your own keyboard shortcut if you want and that’s its. Within a few minutes you have a custom bit of code that you can simply copy into your website build.
I hope this has been of some help. Any questions or comments, please leave below.
