adobe dreamweaver cs5 on demand part 66 potx

Creating Snippets Create a New Snippet Folder Click the Window menu, and then click Snippets to display the Snippets panel.. Open the Snippets folder, click the snippet folder or code

Although Dreamweaver supplies you with dozens of useful sections of snippet code, there will always be the time when you need something that isn't supplied One method is to jump out onto the Web, go to your friendly search engine, and look for something that might fit the bill Not only are there a lot of sites out there that have free code for you to use, it's very possible that you might be able to modify an existing piece of code to suit your purposes And let's not forget Adobe; they've given us the exchange that is just jam packed with high-end code snippets for just about any occasion; many of them free Just point your browser to:

http://www.adobe.com/cfusion/exchange/ While this section is not de-signed to make you a snippet programmer, there are probably a lot of you code warriors out there (myself included), who have the ability to write our own snippets And here's a bit of advice… if you design what you think is a really cool snippet, you can post it on the Adobe

Exchange and share it with others

Creating Snippets

Create a New Snippet Folder

Click the Window menu, and then

click Snippets to display the

Snippets panel

Select the folder where you want

to create a new snippet folder

Click the New Snippet Folder

button

The new folder appears selected

with the name, untitled

Type a name for the folder, and

then press Enter (Win) or Return

(Mac)

4

3

2

1

3

1

Did You Know?

You can rename a snippet folder or a

code snippet Open the Snippets folder,

click the snippet folder or code snippet

you want to rename, click the item

again, edit the name, and then press

Enter (Win) or Return (Mac)

Create a Snippet

Click the Window menu, and then

click Snippets to display the

Snippets panel

Select the folder that you want to

add your new snippet

Click the New Snippet button.

Use the following options to create

the snippet:

◆ Name Enter a name for the

snippet

◆ Description Enter a description

of the snippet

◆ Snippet Type Select the Wrap

Selection option for the wrap

type or the Insert Block option

for the block type (in this

example, Insert Block)

◆ Insert Code Enter or paste the

code for the snippet For the

Wrap Selection option, enter or

paste the code in the Insert

Before or Insert After box (in

this example, JavaScript code

was added to create a date last

modified area to the page; the

file is called Snippet.xml in the

Scripts folder)

TIMESAVER You can copy

code from another text program

(even Microsoft Word), and paste

it using Ctrl+V (Win) or A+V

(Mac) into the Snippet dialog box

◆ Preview Type Select the

Design or Code option to

specify how you want to

preview the snippet in the

Document window

Click OK.

Dreamweaver saves the code and

adds it to the Snippets panel

5

4

3

2

1

3

1

2

5

4

Introducing Assets and Libraries

Introducing Assets

Assets are individual elements, such as

images, movies, colors, scripts, and URL

links, you add to your Web site You create

assets when you insert elements from other

programs, such as Adobe Photoshop or

Adobe Flash The assets are stored in the

Assets panel, where you can insert and

man-age them for use in other parts of your Web

site

Introducing Libraries

Dreamweaver provides two special types of

assets: libraries and templates A library is a

Dreamweaver file that contains individual

assets or copies of assets, while a template is

a Dreamweaver file that contains editable

regions The assets in a library are called

library items

Library items are sections of a Web page

that can be used over and over again You can

create a library item from any element in the

body section of a document, including

naviga-tion bars, images, text, tables, forms, Java

applets, plug-ins, and ActiveX controls For

example, a navigation system that you want

to use on many of the pages in your site is

best created and saved as a library item That

way when you need it, all you have to do is

add the navigation to the page by dragging it

out of the Assets panel

This gives you a tremendous savings in

terms of time creating all those replicating

items in Web design And another benefit is

the consistency factor You know that if the

original Library item works, they all work,

because they are based on the original item

Library items also give you a grand

advan-tage when it comes to changes Again, let's

say that you've created a catalog Web site with hundreds of pages that contain images, and descriptions of your products However, they're not the only things on those pages;

you've got a header, footer, navigation, back-ground image or color There's a lot of stuff going on… and then something happens You make a modification to the site that requires you to add another button to the Navigation bar… OOPS

No problem You created the navigation system for those pages as a library item, and then you inserted that item into a template (more about Templates in a later chapter) So all you have to do is open the original library item, make your changes, and instruct Dreamweaver to update the site Sounds too good to be true, doesn't it?

Dreamweaver stores library items in a Library folder within the local root for each site However, for linked items, such as images, the library stores only a reference to the item When you insert a library item in a page, Dreamweaver creates a link to it instead

of inserting it, so the item is able to be updated later

Planning is the Key

The time to begin the creation of library items

is at the very beginning stages of site devel-opment As you are working out the natty details, look at sketches of your pages, and decide what items are worth creating library items and/or templates, and what are not It's

a bit late in the process (after the site is designed) to think back and wish that you had converted this item or that into a library item

or template Think up-front… begin with the end in mind

While the Files panel gives you access to your Web site and allows you

to add, delete, and link files, quickly and efficiently, it doesn't help you

in the actual placement of assets into the documents That job is left to the Assets panel The Assets panel holds all of the individual elements that make up your Web pages; they're the puzzle pieces that when properly assembled create awesome Web sites The Assets panel includes a variety of elements that you store in a site, such as images, movie files, colors, and library elements

Using the Assets

Panel

Use the Assets Panel

Click the Window menu, and then

click Assets to display the Assets

panel

Click the Site option to show all of

the assets in your site, or click the

Favorites option to show only the

assets you set as a favorite

Click any of the following category

buttons to display the assets you

want:

◆ Images Displays images in the

GIF, JPEG, or PNG formats

◆ Colors Displays the colors that

are used in pages and style

sheets in your site

◆ URL Displays any external links

in your current site documents

◆ Flash Displays files in any

version of the Flash format

◆ Shockwave Displays files in

any version of the Shockwave

format

◆ Movies Displays files in

QuickTime or MPEG format

◆ Scripts Displays JavaScript or

VBScript files

◆ Templates Displays a list of all

the templates in the site

◆ Library Displays a list of all

library items (elements used in

multiple pages)

3

2

3 2

Once an asset is part of a Web site, you can insert it in another page using several different methods You can drag the asset from the Assets panel directly into Design or Code view or click to place the insertion point where you want the asset and use the Insert button at the bottom of the Assets panel

Inserting an Asset

Insert an Asset

Open the Web page you want to

insert an existing asset

Click in the document to add an

insertion point

Click the Window menu, and then

click Assets to display the Assets

panel

Click the Site option to show all of

the assets in your site, or click the

Favorites option to show only the

assets you set as favorites

Select the category that contains

the asset you want to insert

IMPORTANT You cannot

select the Templates category

Templates are applied to an entire

document

Insert the asset using one of the

following methods:

◆ Click the Insert button in the

Assets panel The asset

appears at the insertion point

◆ Click and drag the asset from

the Assets panel directly into

the active document The asset

appears where you release

your mouse

6

5

4

3

2

2

5

6

Did You Know?

You can view an asset in the preview

area Open the Assets panel, select the

category that contains the asset you

want to view, and then select the

asset

The Assets panel does much more than let you look at assets of your site As a matter of fact, it's a powerful tool to help you manage and edit all the elements that make up a Web site You can use the Assets panel to edit an image, or even create a new image Once an asset is edited, it will impact all Web pages that use that particular asset For example, you use the Assets panel to reopen an image that's used on several Web pages, perform a bit of touchup, and then save the file In response, all the pages that used that particular asset will update to reflect the changes Now that's power

Working with Site

Assets

Modify an Asset

Select the Window menu, and

then click Assets to display the

Assets panel

Select the category that contains

the asset you want to edit

Double-click the asset you want to

edit, or select the asset, and then

click the Edit button.

Dreamweaver launches the

program required to edit the image

(default application is Fireworks)

Make changes to the image, save

the file, and then close the edit

program

The image is resaved with the

changes, and all Web pages that

utilize the image automatically

reflect the changes when loaded

4

3

2

2

3

Did You Know?

You can select multiple items in the

Assets panel Open the Assets panel,

select an asset, and then use

Shift-click to select a consecutive series of

assets, or use Ctrl-click (Win) or A

-click (Mac) to include or exclude

indi-vidual assets in the selection