 What are Dreamweaver Snippets?
If you build a lot of Web sites you know that you’ll use certain
elements over and over again, but each time you need them you either have to
recall a particular command, or more likely copy and paste the code containing
the content you want to reuse. Knowing that is not the most efficient way to
work, Dreamweaver created a solution that most people don't know about called Code Snippets.
Similar in theory to Microsoft’s macros or Adobe’s actions,
Snippets are a fantastic way to automate some of your repetitive tasks and
make your job easier. They are composed of bits of code and/or content that
you can save, edit, use, and reuse as often as you want on any web site you
happen to be working on. Use any of Dreamweaver's pre-installed
snippets or create and use your own. The best snippets are ones that
save you time or at least limit the work you need to perform so you don’t
have to retype anything, such as the following:
- Code including HTML, JavaScript, ASP, JSP, and even CFML (ColdFusion Markup
Language).
- Text that you use often. For instance, you may like to add a copyright
notice such as “© 2005 All rights reserved” at the foot
of your pages.
- Navigation tables with bullets and text that have temporary links already
applied to each navigation word so all you need to do after inserting the
snippet on your page is type in the real navigation names and links.
- JavaScript information, such as the Set Text of Status Bar JavaScript behavior
or perhaps the opening and closing comment tags.
Using Dreamweaver’s Snippets
Dreamweaver comes with a great set of pre-written, logically categorized, ready
to use snippets in the Snippets panel. To open the Snippets panel
and check out the presets, select Window-->Snippets. Once
the panel is open you’ll see several folders including Navigation,
Meta, JavaScript, Headers, Footers, Content Tables, Comments, Accessible,
Text, and Form Elements. Each folder contains several snippets and/or subfolders
with even more snippets.
There are two basic types of snippets; a wrap snippet and a block snippet.
Wrap snippets will insert code above and below any selected content on the
page. Block snippets, by contrast, simply drop in the snippet content after
the insertion point on the page.
To use a block snippet:
Place an insertion point inside an open document,
then select the snippet from the Snippets panel, and click the Insert button
at the bottom of the panel. You can also drag and drop the snippet from the
panel into an open document, as you would an image or any other media file.
To use a wrap snippet:
Select the content in Design view that the snippet
will wrap around, then select the snippet in the Snippets panel and click
the Insert button at the bottom of the panel.
Create Your Own Snippets
Dreamweaver snippets are incredibly easy to create. Let’s start by making
a block snippet. Say you work with a lot of artists and have a standard copyright
notice you like to use regarding their work being displayed online. By creating
a code snippet, you never have to type that copyright notice again, save for
adding the correct artist name and company information after inserting the
snippet into your page.
Making a Block Snippet:
Follow these steps to insert a BLOCK SNIPPET with text onto your Web page:
- Choose Window@@-->Snippets to launch the Snippets panel.
Figure
1-1. The Snippets panel.
- Click the New Snippet icon—the one with the plus (+) symbol—at the bottom
of the panel to open the Snippet dialog box, as shown below in Figure 1-2.
- Type a name for the snippet in the Name text box.
Snippet names can’t
contain characters like slashes (/ or \), special characters, or double
quotes (").
In this example, the snippet name is “Artist Copyright Statement ”.
- Write a text description for the snippet in the Description text box.
In
this example, the description may read:
“This notice tells site visitors not to use any content on this site without
artist’s permission.”
- Choose Insert Block as the Snippet type.
Use this type because the code
in your snippet will be inserted below the insertion point on your document.
- Type the content in the Insert Code text box.
In this “Artist Copyright Statement ” example, the text displaying
in all capitals will be later customized by you to match the specific artist's
website URL, artist name, and representation, if any:
“All artwork featured on THIS WEBSITE is copyrighted material and may not
be reproduced, downloaded, or used in any other format, on any other
product, without permission from THIS COMPANY and the artist.”
Figure 1-2. An example of a Insert Block Snippet.
- Pick a Preview Type: Code or Design.
The Code preview type shows you the
code in the Snippet Preview panel. To see how graphics contained in your
snippet may appear, choose Design view.
- Click OK when you're done.
To see your new snippet in action, open a HTML page and in Design view,
click anywhere on the page to create an insertion point with your cursor. Select
the snippet and click the Insert button at the bottom of the Snippets panel
or double-click the Snippet icon to quickly
insert the snippet onto your page.
Next we’ll create a Wrap snippet.
The wrap option allows you to write opening and closing tags that surround
whatever code or content is selected on your page. Wrap option snippets are
especially helpful for applying links, scripts, special formatting, and navigation.
For instance, you may want to create a snippet that quickly adds a link around
selected text, such as <a
href="#">link</a>. Or maybe you’d like to create a
snippet that superscripts text, such as the "nd" in 42nd Street. Let’s
do that.
Making a Wrap Snippet:
Follow these steps to insert a WRAP SNIPPET with text onto your Web page:
- Choose Window@@-->Snippets to launch the Snippets panel.
- Click the New Snippet icon to open the Snippet dialog box.
- Type a name for
the snippet in the Name text box:
To create a “superscript” snippet,
this is where you’d
type in “Superscript” for the name.
- Write a text description for the snippet in the Description text box:
In
this example the description might read: “This snippet
will Superscript any selected content using the <sup></sup> tags.”
- Choose Wrap Selection as the Snippet type:
Use this type because the code
in your snippet will surround, or wrap around, your selected content. When
selecting the Wrap type, notice that the dialog box changes from displaying
one box for code input to displaying two boxes, as shown in Fig. 1-3.
Figure 1-3. An example of a Wrap Selection Snippet.
When using Wrap Selection,
you need to add code to two text boxes:
Insert Before: Type or paste in the code that goes before your selection.
Insert After: Type or paste in the code that goes after your selection.
- Add the appropriate code to the Insert Before input box.
In this example you are creating a superscript
snippet, so type the following here:
<sup>
- Add the appropriate code to the Insert After input box.
To continue creating
the superscript snippet, type the following here:
</sup>
- Pick Code as the Preview Type:
Since there are typically no graphics in
wrap snippets, select Code as the preview type to see code in the Snippet
Preview panel.
- Click OK when you're done.
Applying wrap snippets are a little different than block snippets because
you must select the copy on your page that you want to apply the snippet to
before you insert the snippet code. Using the 42nd Street example
from earlier, to apply the superscript snippet you’d
highlight the ‘nd’ in 42nd Street first, then insert the snippet.
Because this snippet contains simple HTML tags, Dreamweaver’s design
view will render and display the finished superscript code for you, without
the need to launch a browser to see it.
Editing, Deleting, and Managing Snippets
Now that you know how to create and use snippets you should also know how to
edit and delete them. In most cases once you create a snippet the likelihood
of you needing to edit it is small. However, there may be some snippets containing
specific dates or graphics that need occasional updating or editing.
Or you may want to create a new version of an existing snippet by the process
of duplication and modification.
Edit Code Snippets in any of the following ways:
- Click the Edit Snippet icon:
Select the snippet from the Snippets panel
and click the Edit Snippet button at the bottom of the panel.
- Choose Options @@-->Edit:
Select the snippet from the Snippets panel
and select Edit from the Options pull down menu at the top right corner of
the Snippets panel.
- Right-click (PC) or Control+click (Mac)@@-->Edit:
Select the snippet
from the Snippets panel, right-click (Windows) or Control+click (Macintosh)
to get the popup menu, and select Edit.
All three methods above launch the Snippet dialog box for the snippet selected.
Make the edits you need, then click the OK button to save the changes. You
can also learn a lot about snippets by looking at the structure of existing
snippets. Simply select a snippet from the Snippets panel and click the edit
button to review the existing snippet's code.
Delete Code Snippets quickly and permanently by any of these methods:
- Remove Button:
Select the snippet from the Snippets panel and click the
trash can-shaped Remove button on the bottom right-hand corner of the panel.
- Options Menu @@-->Delete:
Select the snippet from the Snippets panel
and click Edit from the Options pull down menu at the top right corner of
the Snippets panel.
- Right-Click (WIN) or Control-Click (MAC) @@-->Delete:
Select the snippet
from the Snippets panel, right-click (Windows) or Control-click (Macintosh)
to get the popup menu, and select Delete.
Regardless of which method you choose, Dreamweaver will always display an
alert dialog box asking if you are sure you want to delete that particular
snippet, giving you a chance to cancel the command in the event you selected
remove by accident or change your mind about deleting it.
Besides the preview panel, another cool thing about the Snippets panel
is that you can create your own folders to organize your snippets. Moving snippets
around the Snippets panel, from folder to folder, is as easy as dragging-and-dropping.
When creating new folders you will be prompted to give your new folder a name.
If you don’t
name it then, the folder will be called ‘untitled’ by default,
but you can always change the name later. Feel free to rename and delete folders
as needed.
Create new Snippet folders in any of the following ways:
- New Snippet Folder Icon:
Click the New Snippet Folder icon at the bottom
of the Snippets panel.
- Options Menu @@-->New Folder:
Select the snippet from the Snippets panel
and click New Folder from the Options pull down menu at the top right corner
of the Snippets panel.
- Right-Click (WIN) or Control-Click (MAC) @@-->New
Folder:
Select the
snippet from the Snippets panel, right-click (Windows) or Control-click (Macintosh)
to get the popup menu, and select New Folder.
When you make your own snippets you can either create your own new folders
and file them there, or file them in any of the existing Dreamweaver Snippets
folders. Besides creating your own new Snippets, there are several good sites
online to find and exchange Snippets with other designers and programmers.
You can easily find them by searching for the words ‘Dreamweaver snippets’ or ‘Snippets
exchange’.
Now that you know how to make and use Snippets you can streamline your repetitive
tasks and work more efficiently!
Sue Jenkins is a freelance web designer, graphic designer,
artist, writer, and illustrator, she teaches Dreamweaver, Illustrator, and
Photoshop classes at Noble Desktop in New York City, and offers
private training to companies in the New York area. Her first book, Dreamweaver
8 All in One Desk Reference for Dummies, is due to be published by Wiley
in early 2006. If your company needs a website, website redesign, logo, or
illustration, see Sue’s consulting
page for more information,or go directly to her website
learn more about her design services. http://www.luckychair.com.
|
