Snippets are a new tool that allow you to collect and manage sections of Code. In many ways the Snippets Library is a code library.
In this article you will learn how to use Snippets in Dreamweaver MX and how to create your own Snippets.
Using Dreamweaver MX Snippets
Using Snippets
Snippets are easy to use. Simply, open a web page, find the Snippet you need from the Snippets Panel and drag it in. Simple as that.
OK, nothing is really that easy. Yes, you can drag and drop Snippets wherever you like, but that is half the challenge. Snippets are selections of code. These sections may not be complete. For instance, if you select the Meta Tags Category, as shown in Figure C, you will have a Meta Tag Snippet. Click and drag the Snippet onto the page.
Figure C
Meta Tag Snippet
Seems simple, doesn't it? But, the simplicity of Snippets is somewhat of their downfall. Did you drag the Snippet to the correct location? If you placed the Snippet within the BODY tags then the Meta Tag will not work. The tag needs to be placed at the top of the page between the HEAD tags.
You may be thinking, well everyone knows that. And yes a lot of people do know where Meta tags are supposed to go. But what about the following snippet:
<a href="#" onMouseOver="window.status='';return true">xxxx</a>
This Snippet is within the JavaScript Folder - Link - Mask Links. The function of the Script is to allow you to mask a URL link in the Status Bar of the Web Browser window. However it is incomplete. Here you have the foundation for the script, but you need the URL link and the name for the link between the Anchor tags to change this code Snippet from being an example to functional tool for your web page. Here is the Snippet. It has been dragged on to the page and has to be modified with a URL link and some linking text.
<a href="http://www.matthewdavid.ws" onMouseOver="window.status='';return true">My Web Site</a>
The Snippets become increasingly more complex when you start to use more complex JavaScript. You will need to know what the JavaScript is so that you can apply it to page correctly. For instance, you can select JavaScript - Browser Functions - Disable Right Click. This JavaScript will prevent you from right clicking on your mouse (this function only works on Windows) within a web page. Go ahead and click and drag this code on to a page. The Snippet you added will look like this:
function disableRightClick(e) {
var message = "Right click disabled";
if(!document.rightClickDisabled) // initialize {
if(document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = disableRightClick;
}
else document.oncontextmenu = disableRightClick;
return document.rightClickDisabled = true;
}
if(document.layers || (document.getElementById && !document.all)) {
if (e.which==2||e.which==3) {
alert(message);
return false;
}
} else {
alert(message);
return false;
}
}
disableRightClick();
var message = "Right click disabled";
if(!document.rightClickDisabled) // initialize {
if(document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = disableRightClick;
}
else document.oncontextmenu = disableRightClick;
return document.rightClickDisabled = true;
}
if(document.layers || (document.getElementById && !document.all)) {
if (e.which==2||e.which==3) {
alert(message);
return false;
}
} else {
alert(message);
return false;
}
}
disableRightClick();
Preview the page and right click.
Did it work? Probably not. This is where you need to know a little JavaScript.
In Dreamweaver change the layout view to "Show Code View." You will need to add another Snippet for this code to work.
In between the HEAD tag on the page add the Snippet JavaScript - starter script - starter script. The following JavaScript will be added:
<SCRIPT LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>
<!--
//-->
</SCRIPT>
Now, click and drag the disable right click JavaScript you added earlier in between the SCRIPT tags. Now, when you preview the page the right click will be disabled.
Matthew David
Matthew David has been developing Flash based applications for over 6 years (that makes him very old in this business!). Examples of his work can be found at his web site www.matthewdavid.ws, or you can email him directly at mdavid@email.com.
Matthew’s most recent publications include content for Flash 5 Magic, Inside Dreamweaver 4, Flash 5: Visual FX, Web Publishing Bible and The Dreamweaver Bible. You can also see him popping up in many online magazines, such as Sitepoint.com, Windowatch.com, UDzone.com and DevX.com.
Currently, Matthew is working on two books and writing articles for Element K Journal’s Macromedia Solutions magazine. He is a available as a freelance consultant to work on web based projects.
Comments
Be the first to write a comment
You must me logged in to write a comment.