© 2010 Delmar, Cengage Learning

Chapter 12

Working with Library Items and Snippets

© 2009 Delmar Cengage Learning

1. Create and modify library items

2. Add library items to pages

3. Add and modify snippets

Chapter 12 Lessons

© 2009 Delmar Cengage Learning

• Library item

–Can contain text or graphics

– Is saved in a separate file in the Library folder of your site

• When you make a change to the library item and then update the site, all instances of that item will be updated to reflect the change

Understanding Library Items

© 2009 Delmar Cengage Learning

• Code snippets

–Reusable pieces of code that can be inserted on a page

• Dreamweaver provides a wide variety of ready-made code snippets you can use to create footers, drop-down menus, headers, and other page elements

Understanding Snippets

© 2009 Delmar Cengage Learning

Create and Modify Library Items• Understanding the benefits of library items

• Viewing and creating library items

• Modifying library items

© 2009 Delmar Cengage Learning

Understanding the Benefits of Library Items• Using library items for repetitive elements

saves considerable time

• When updating the site, all instances of the library item will be updated to reflect the change

© 2009 Delmar Cengage Learning

• To view library items

– Open the Assets panel

– Click the Library button

• You can also view a list of available library items by expanding the Library folder in the Files panel

Viewing and Creating Library Items

© 2009 Delmar Cengage Learning

• To save text or an image as a library item

– Select the item in the document window and drag it to the Assets panel

– Or click, Modify Library Add Object to Library

• Temporary name: Untitled

Creating Library Items

© 2009 Delmar Cengage Learning

Fig. 1: Library Items in Assets Panel

Library button Library items

Preview of selected library item

© 2009 Delmar Cengage Learning

Fig. 2: Web Page with Library Item

Library itemLibrary itemsButtons for working

with library items

© 2009 Delmar Cengage Learning

• You cannot edit library items on the Web page

• To make changes to a library item, open it

• To open a library item, select the item in the document window, then click Open in the Property inspector

– Item will appear in document window

Modifying Library Items

© 2009 Delmar Cengage Learning

Fig. 8: Update Pages Dialog Box

© 2009 Delmar Cengage Learning

Fig. 10: Cropping the Logo

Drag the right edge slightly to crop the image

The border and handles indicate you can crop the image

© 2009 Delmar Cengage Learning

Add Library Items to Pages

• Adding library items to a page• Making library items editable on a page• Deleting and recreating library items

© 2009 Delmar Cengage Learning

Adding Library Items to a Page

• Drag item from Assets panel to desired location on page

• Or, select the item in Assets panel, and click Insert

• The content and reference to the library item are copied into the code

– Inserted library item is shaded in yellow in document window

© 2009 Delmar Cengage Learning

Adding Library Items to a Page• To insert the content from a library item, but

not the reference (link) to the library item

– Press and hold [Alt] (Win) or [option] (Mac) as you drag the library item from the Assets panel to the document window

© 2009 Delmar Cengage Learning

Making Library Items Editable on a Page• Make a library item editable on a page by

breaking its link to the library item

• Select the library item, then click Detach from original in the Property inspector

© 2009 Delmar Cengage Learning

Fig. 15: Property Inspector with Library Item Settings

Click to open library item

Click to restore deleted library item

Click to detach selected element from library item

© 2009 Delmar Cengage Learning

• To delete a library item

– Select it in the Assets panel

– Click the Delete button

• Deleting a library item removes it from the Library folder

– It does not change the content of the pages that contain it

Deleting Library Items

© 2009 Delmar Cengage Learning

Recreating Library Items

• You cannot use the Undo command to bring back a library item

• To restore a library item

– Select any instance of the item in site

– Click Recreate in the Property inspector

© 2009 Delmar Cengage Learning

Fig. 19: Assets Panel after Deleting the Logo Library Item

Logo no longer appears

Delete button

© 2009 Delmar Cengage Learning

Add and Modify Snippets

• Using the Snippets panel

• Inserting and modifying Snippets

• Creating new Snippets

© 2009 Delmar Cengage Learning

Using the Snippets Panel

• The Snippets panel contains a large collection of reusable code Snippets organized in folders named by element type

• The Snippets panel is located in the Files panel group

© 2009 Delmar Cengage Learning

Fig. 21: Snippets Panel

Contents of expanded JavaScript folder

New snippet button

Selected snippet

Preview of selected snippet

© 2009 Delmar Cengage Learning

Inserting and Modifying Snippets• To add a Snippet to a page

– Drag the Snippet from the Snippets panel to the desired location on the page

– Or, select the snippet in the Snippets panel and click Insert

• Replace the placeholder text, links, and images with appropriate content

© 2009 Delmar Cengage Learning

• To save a modified Snippet as a new Snippet

– Select the Snippet content in the document window

–Click the New Snippet button in the Snippets panel to open the Snippet dialog box

Creating New Snippets

© 2009 Delmar Cengage Learning

Fig. 26: Snippet Dialog BoxName text box

Description text box

Code starts with <div