© 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 item Library items Buttons 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 Box Name text box Description text box Code starts with <div