In addition, you'll learn how Library items can streamline What You’ll Do Introduce Snippets Insert a Snippet Edit Existing Snippets Create Snippets Introduce Assets and Libraries Use th
Trang 117
17
Using Code Snippets and
Libraries
Introduction
The Snippets panel is a collection of Scripts (called Snippets)
that you can drop into your Web pages Essentially, a snippet
is a pre-built selection of code The Snippets panel in turn
acts like a code library, with sections or folders for different
snippets There are ten major folders, and some folders have
subfolders to organize content
Each folder has a small triangle, located to the right of the
folder name Clicking this icon expands or contracts the
fold-ers contents, revealing either more foldfold-ers or snippets of
code For example, expanding the JavaScript folder reveals
16 more sub-folders, jam-packed with cool features to add to
your Web site There are thousands of JavaScript codes that
can be executed within a Web browser, so Dreamweaver
cat-egorized JavaScript into sub-folders to help you better
under-stand where to find the code you need You will find a group
of scripts for managing and controlling Browser functions,
cookies, readable functions and a whole host of additional
tools All said and told, the JavaScript folder alone has over
80 individual snippets
Most well designed Web sites have areas that are
repeated from page to page These would include header
areas, navigation bars, information boxes, footers, etc
Occasionally, changes need to be made in these areas There
are wonderfully easy-to-use components in Dreamweaver to
make those changes appear on multiple pages when the
change is made at one location Dreamweaver has two such
components, Libraries and Templates Library items are
sec-tions of a Web page that can be used over and over again
Dreamweaver Templates are really large Library items
In this chapter, you'll learn how to work with and add
snippets to your Web pages, as well as modify and edit them
In addition, you'll learn how Library items can streamline
What You’ll Do
Introduce Snippets Insert a Snippet Edit Existing Snippets Create Snippets Introduce Assets and Libraries Use the Assets Panel
Insert an Asset Work with Site Assets Work with Color and URL Assets Work with Favorite Assets Create and Insert Library Items Edit Library Items
Work with Library Items Create an External JavaScript Library Insert and Edit an External JavaScript Use Server-Side Includes
Trang 2Introducing Snippets
If you build a complex Web site, it's almost a
certainty that you will use design elements
over and over again However each time you
need them you either have to recall a
particu-lar 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 philosophy to Microsoft's
macros or Adobe's actions, snippets are a
incredible 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
Dreamweaver snippets allow you to save
and reuse chunks of code over and over This
saves time and effort in maintaining a large
Web site Plus Dreamweaver has a lot of
pre-written snippets to use Use snippets to store
things like headers and footers, logos, and
scripts
Snippets offer a simple and convenient
method of creating fragments of reusable
code Snippets can be a single line or a
con-siderable sized chunk of code such as HTML,
XHTML, CSS, CFML, PHP, JavaScript and
other types of code Since they are reusable,
snippets save you hours of time because you
don't have to recreate the same code over
and over You have the ability to create
snip-pets in Dreamweaver, or in another
applica-tion, and bring them into the Snippets panel,
use the pre-designed snippets supplied by
Dreamweaver, or use snippets created by
Snippet Example
The following is an example of snippet code, written in JavaScript that checks for the cur-rent location of the mouse
/*
Example:
function test() {
if (document.layers) getMouseLoc; //NS else if (document.all) getMouseLoc(); //IE alert(mouseLocation.x+","+mouseLocation.y);
}
in the BODY: <a href="#"
onMouseOver="test()">test</a> */
function Point(x,y) { this.x = x; this.y = y; } mouseLocation = new Point(-500,-500);
function getMouseLoc(e) {
if(!document.all) //NS {
mouseLocation.x = e.pageX;
mouseLocation.y = e.pageY;
} else //IE {
mouseLocation.x = event.x + document.body.scrollLeft;
mouseLocation.y = event.y + document.body.scrollTop;
} return true;
} //NS init:
if(document.layers){
Trang 3Information on the current location of the
mouse can be used to trigger a variety of
actions For example, when the user hovers
over an image, a dialog box could appear to
describe the image
Block and Wrap
Dreamweaver employs two 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
con-tent after the insertion point on the page
To use a block snippet, place an insertion
point inside an open document, select the
snippet from the Snippets panel, and then
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, select the snippet in the Snippets
panel, and then click the Insert button at the
bottom of the panel
Summary
Snippets are a great way to reduce the time
spent reproducing repetitive tasks They're
easy to use and apply to the documents
However, they do require some experience in writing code in languages such as: HTML, XHTML, CSS, CFML, PHP and JavaScript
While it's not the purpose of the chapter to teach you how to write snippet code, there are a lot of Web sites out there that offer free (and for cash) snippets, which you can down-load and use in the construction of your Web sites Some of these sites include:
http://www.assonetriver.com/snippets/
http://www.luckychair.com/downloads.html http://www.programmersheaven.com/search/
LinkDetail.asp?Typ=1&ID=13270
As a matter of fact, simply do a Web search using the words "free" and "snippets"
and sort through the hundreds of hits One word of caution: not all snippets are created equal, and may contain code that is not com-patible with every browser, so checking and testing is the rule of the day, when it comes
to downloading snippets In addition, some sites might use the downloading of a snippet
to also download a virus onto your computer,
so know the sites that you're using to down-loading the snippets
Trang 4Inserting a Snippet
Add a Block Snippet
Open the document you want to
insert the block snippet
Click the Window menu, and then
click Snippets to display the
Snippets panel
TIMESAVER Press Shift+F9 to
display the Snippets panel
Click in the page where you want
to insert the snippet
Click the Plus (+) icon next to the
folder in the Snippets panel with
the snippet you want to insert (in
this example, click the (+) next to
the Footers folder)
Select the snippet you want to
insert
Click the Insert button in the
Snippets panel
TIMESAVER You can also drag
a snippet from the Snippets panel
directly into the document at the
insertion point of the cursor, or
double-click the snippet in the
Snippets panel
6
5
4
3
2
1
As mentioned in the previous section, you can apply (add) a snippet to
a Dreamweaver document in one of two ways: block or wrap The blocking method requires that you click to create an insertion point in the document and then add the snippet; the wrapping method requires that you select (in Design mode) the selection of the page that you want to wrap the code around Both methods have their advantages;
for example, you could use the block method to insert a snippet into the HTML code that would pre-load rollover images, or you could use the wrap method to select a section of text, or an image, that turns the selection into a link, but is masked from appearing in the status window
of the browser Although Dreamweaver contains many pre-designed snippets, they may require a bit of editing before use
6
2
3
5
Snippets panel
4 1
Trang 5Add a Wrap Snippet
Open the document you want to
insert the Wrap snippet
Click the Window menu, and then
click Snippets to display the
Snippets panel
Select the text in Design view that
you want to apply this snippet
Click the Plus (+) or Minus (-) icon
next to the folder to display the
snippet you want to insert from the
Snippets panel (in this example,
click the (+) next to the Text
folder)
Select the snippet you want to
insert (in this example, click
Service Mark)
Click the Insert button in the
Snippets panel to wrap the snippet
around the selected text
NOTE The snippet will have to
be edited to include the proper
URL
6
5
4
3
2
1
3
2
4
5 1
6
Service Mark
Did You Know?
You can insert a recent snippet Click
the Insert menu, point to Recent
Snippet, and then select the recently
used snippet you want
You can add or edit a keyboard
short-cut for a snippet Open the Snippets
folder, right-click (Win) or control-click
(Mac) in the Snippets panel, click Edit
Keyboard Shortcuts, click the
Commands list arrow, select Snippets
(if necessary), select the snippet you
want to change, enter a keyboard
shortcut in the Press key box, and then
click OK
Trang 6In Dreamweaver, you can use one of the many pre-designed snippets, one you developed yourself or others you downloaded from the Web If any of these snippets is not exactly what you need, you can edit the snippet code directly in Dreamweaver In addition to editing snippet code, you can also change snippet options, including name, descrip-tion, snippet type (either block or wrap), and preview type (either in Design or Code view) The blocking method requires that you click to create an insertion point in the document and then add the snippet; the wrapping method requires that you select (in Design view) the selec-tion of the page that you want to wrap the code around
Editing Existing
Snippets
Edit a Snippet
Click the Window menu, and then
click Snippets to display the
Snippets panel
Click the Plus (+) or Minus (-) icon
next to the folder to display the
snippet you want to insert from the
Snippets panel (in this example,
click the (+) next to the Footers
folder)
Select the snippet that you need to
edit (in this example, click Title and
Hanging List)
Click the Edit Snippet button in the
Snippets panel
NOTE If you don't want to
change the original snippet, simply
make a copy of the snippet you
want to change, and perform the
edit to the copy
Edit the snippet using the following
options:
◆ Name Change the name for the
snippet, if desired
◆ Description Change the
description of this snippet, if
desired
NOTE Name and Description
appear in the Snippets panel
5
4
3
2
1
4
1
2
3
Trang 7◆ Snippet Type Select the Wrap
Selection option for the wrap
type or the Insert Block option
for the block type
◆ Insert Code Modify the code to
fit the particular situation (in
this example, the copyright
date, and links were updated
to reflect the current project)
◆ Preview Type Select the
Design or Code option to
specify how you want to
preview the snippet in the
Document window
Click OK.
6
6
5
Did You Know?
You can delete a code snippet or
snip-pet folder Open the Snipsnip-pets folder,
click the snippet folder or code snippet
you want to remove, click the Remove
button, and then click Yes When you
delete a folder, all the snippets in the
folder are also deleted
You can share a snippet Snippets are
located in the Program Files (Win) or
Applications (Mac) folder in the
follow-ing subfolders: Adobe/Adobe
Dreamweaver CS5/Configuration
/Snippets/snippet type name You can
copy and paste a snippet file into the
same location to share it with others