© 2011 Delmar, Cengage Learning Chapter 11 Adjusting Colors.
© 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.
-
Upload
brock-ledwell -
Category
Documents
-
view
220 -
download
3
Transcript of © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.
![Page 1: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/1.jpg)
© 2010 Delmar, Cengage Learning
Chapter 12
Working with Library Items and Snippets
![Page 2: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/2.jpg)
© 2009 Delmar Cengage Learning
1. Create and modify library items
2. Add library items to pages
3. Add and modify snippets
Chapter 12 Lessons
![Page 3: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/3.jpg)
© 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
![Page 4: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/4.jpg)
© 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
![Page 5: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/5.jpg)
© 2009 Delmar Cengage Learning
Create and Modify Library Items• Understanding the benefits of library items
• Viewing and creating library items
• Modifying library items
![Page 6: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/6.jpg)
© 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
![Page 7: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/7.jpg)
© 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
![Page 8: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/8.jpg)
© 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
![Page 9: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/9.jpg)
© 2009 Delmar Cengage Learning
Fig. 1: Library Items in Assets Panel
Library button Library items
Preview of selected library item
![Page 10: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/10.jpg)
© 2009 Delmar Cengage Learning
Fig. 2: Web Page with Library Item
Library itemLibrary itemsButtons for working
with library items
![Page 11: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/11.jpg)
© 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
![Page 12: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/12.jpg)
© 2009 Delmar Cengage Learning
Fig. 8: Update Pages Dialog Box
![Page 13: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/13.jpg)
© 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
![Page 14: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/14.jpg)
© 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
![Page 15: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/15.jpg)
© 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
![Page 16: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/16.jpg)
© 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
![Page 17: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/17.jpg)
© 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
![Page 18: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/18.jpg)
© 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
![Page 19: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/19.jpg)
© 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
![Page 20: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/20.jpg)
© 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
![Page 21: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/21.jpg)
© 2009 Delmar Cengage Learning
Fig. 19: Assets Panel after Deleting the Logo Library Item
Logo no longer appears
Delete button
![Page 22: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/22.jpg)
© 2009 Delmar Cengage Learning
Add and Modify Snippets
• Using the Snippets panel
• Inserting and modifying Snippets
• Creating new Snippets
![Page 23: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/23.jpg)
© 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
![Page 24: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/24.jpg)
© 2009 Delmar Cengage Learning
Fig. 21: Snippets Panel
Contents of expanded JavaScript folder
New snippet button
Selected snippet
Preview of selected snippet
![Page 25: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/25.jpg)
© 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
![Page 26: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/26.jpg)
© 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
![Page 27: © 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.](https://reader036.fdocuments.net/reader036/viewer/2022062515/56649cbf5503460f9498524b/html5/thumbnails/27.jpg)
© 2009 Delmar Cengage Learning
Fig. 26: Snippet Dialog BoxName text box
Description text box
Code starts with <div