User Guide Cancel

Work with library items

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Use this topic to learn how to create library items in Dreamweaver, and insert and edit library items in documents.

A library is a special Dreamweaver file containing a collection of individual assets or copies of assets that you can place in your web pages. The assets in a library are called library items. Items that you can store in a library include images, tables, sounds, and files created with Adobe Flash. You can automatically update all the pages that use a library item whenever you edit the item.

For example, suppose you’re building a large site for a company that wants a slogan to appear on every page. You can create a library item to contain the slogan and use that library item on every page. If the slogan changes, you can change the library item and automatically update every page that uses it.

Dreamweaver stores library items in a Library folder within the local root folder for each site. Each site has its own library.

You can create a library item from any element in the body section of a document, including text, tables, forms, Java applets, plug‑ins, ActiveX elements, navigation bars, and images.

For linked items such as images, the library stores only a reference to the item. The original file must remain at the specified location for the library item to work correctly.

It can still be useful to store an image in a library item, though. For example, you could store a complete img tag in a library item, which would allow you to easily change the image’s alt text, or even its src attribute, throughout the site. (Don’t use this technique to change an image’s width and height attributes, though, unless you also use an image editor to change the actual size of the image.)

If the library item contains links, the links may not work in the new site. Also, images in a library item aren’t copied to the new site.

When you use a library item, Dreamweaver inserts a link to it, rather than the item itself, in the web page. That is, Dreamweaver inserts a copy of the HTML source code for that item into the document and adds an HTML comment containing a reference to the original, external item. It is this external reference that makes automatic updating possible.

When you create a library item that includes an element with a Dreamweaver behavior attached to it, Dreamweaver copies the element and its event handler (the attribute that specifies which event triggers the action, such as onClick, onLoad, or onMouseOver, and which action to call when the event occurs) to the library item file. Dreamweaver does not copy the associated JavaScript functions into the library item. Instead, when you insert the library item into a document, Dreamweaver automatically inserts the appropriate JavaScript functions into the head section of that document (if they aren’t already there).

If you hand-code JavaScript (that is, if you create it without using Dreamweaver behaviors), you can make it part of a library item if you use the Call JavaScript behavior to execute the code. If you don’t use a Dreamweaver behavior to execute the code, the code isn’t retained as part of the library item.

There are special requirements for editing the behaviors in library items. Library items cannot contain style sheets, because the code for those elements is part of the head section.

Create a library item based on a selection

  1. In the Document window, switch to Design view and select a portion of a document to save as a library item.

  2. Select Tools > Library > Add Object to Library.

  3. Type a name for the new library item, then press Enter (Windows) or Return (Macintosh).

    Dreamweaver saves each library item as a separate file (with the file extension .lbi) in the Library folder of the site’s local root folder.

Create an empty library item

  1. Make sure nothing is selected in the Document window.

    If something is selected, it will be placed in the new library item.

  2. In the Assets panel, select the Library category.

  3. Click the New Library Item button at the bottom of the panel.

  4. While the item is still selected, enter a name for it, then press Enter (Windows) or Return (Macintosh).

Insert a library item into a document

When you add a library item to a page, the actual content is inserted in the document along with a reference to the library item.

  1. Place the insertion point in the Document window.

  2. In the Assets panel, select the Library category.

  3. Do one of the following:
    • Drag a library item from the Assets panel to the Document window.
    Note:

    To insert the contents of a library item without including a reference to the item in the document, press Control (Windows) or Option (Macintosh) while dragging an item out of the Assets panel. If you insert an item this way, you can edit the item in the document, but the document won’t be updated when you update pages that use that library item.

    • Select a library item, and click Insert.

Edit library items and update documents

When you edit a library item, you can update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later.

You can rename items to break their connection with documents or templates, delete items from the site’s library, and recreate a missing library item.

Edit a library item

  1. In the Assets panel, select the Library category.

  2. Select a library item.

  3. Either Click the Edit button or double-click the library item.

    Dreamweaver opens a new window, similar to the Document window, for editing the library item. The gray background indicates that you’re editing a library item instead of a document.

  4. Make and then save your changes.

  5. Specify whether to update the documents on the local site that use the library item. Select Update to update immediately. If you select Don’t Update, documents won’t be updated until you choose Tools > Library > Update Current Page or Update Pages.

Update the current document to use the current version of all library items

  1. Select Tools > Library > Update Current Page.

Update the entire site or all documents that use a particular library item

  1. Select Tools > Library > Update Pages.

  2. In the Look In pop‑up menu, specify what to update:

    • To update all pages in the selected site to use the current version of all library items, select Entire Site, then select the site name from the adjacent pop‑up menu.

    • To update all pages in the current site that use the library item, select Files That Use, then select a library item name from the adjacent pop‑up menu.

  3. Make sure that Library Items is selected in the Update option.

    To update templates at the same time, select Templates as well.

  4. Click Start.

    Dreamweaver updates the files as indicated. If you selected the Show Log option, Dreamweaver generates a report showing whether files were updated successfully, along with other information.

Rename a library item

  1. In the Assets panel, select the Library category.

  2. Select the library item, pause, and then click again. (Do not double-click; double-clicking opens the item for editing.)
  3. Enter a new name.
  4. Click elsewhere, or press Enter (Windows) or Return (Macintosh).
  5. Specify whether to update documents that use the item by choosing either Update or Don’t Update.

Delete a library item from a library

When you delete a library item, Dreamweaver removes it from the library but doesn’t change the contents of any documents that use the item.

  1. In the Assets panel, select the Library category.

  2. Select the library item.
  3. Either click the Delete button or press the Delete key, then confirm that you want to delete the item.

    If you delete a library item, you can’t use Undo to retrieve it. You may be able to recreate it, however.

Recreate a missing or deleted library item

  1. Select an instance of the item in one of your documents.
  2. Click the Recreate button in the Property inspector (Window > Properties).

Customize highlighting of library items

You can customize the highlight color of library items and show or hide highlighting by setting Highlighting preferences.

Change the highlight color of library items

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select the Highlighting category from the list on the left of the Preferences dialog box.
  3. Click the Library Items color box, then select a highlight color using the color picker (or enter the hexadecimal color value in the text box).
  4. Select Show to display the highlight color in the Document window.
  5. Click OK.

To show or hide highlighting in the Document window

  1. To show highlighting, select View > Design View Options > Visual Aids > Invisible Elements. To hide highlighting, deselect Invisible Elements.

Edit the properties of a library item

You can use the Property inspector to open a library item for editing, detach a selected library item from its source file, or overwrite an item with the currently selected library item.

  1. Select a library item in a document.
  2. Select one of these options in the Property inspector (Window > Properties):

    Src

    Displays the filename and location of the source file for the library item. You can’t edit this information.

    Open

    Opens the library item’s source file for editing. This is equivalent to selecting the item in the Assets panel and clicking the Edit button.

    Detach From Original

    Breaks the link between the selected library item and its source file. You can edit the detached item in the document, but it’s no longer a library item and isn’t updated when you change the original.

    Recreate

    Overwrites the original library item with the current selection. Use this option to re-create library items if the original library item is missing or has been accidentally deleted.

Make library items editable in a document

If you’ve added a library item to your document and you want to edit the item specifically for that page, you must break the link between the item in the document and the library. Once you’ve made an instance of a library item editable, that instance isn’t updated when the library item changes.

  1. Select a library item in the current document.
  2. Click Detach From Original in the Property inspector (Window > Properties).

Edit a behavior in a library item

To edit a behavior in a library item, you must first insert the item in a document, then make the item editable in that document. After you’ve made the changes, you can re-create the library item, replacing the item in the library with the edited item from your document.

  1. Open a document that contains the library item.

    Note the name of the library item, as well as the exact tags it contains. You’ll need this information later.

  2. Select the library item, and then click Detach From Original in the Property inspector (Window > Properties).
  3. Select the element that has the behavior attached to it.
  4. In the Behaviors panel (Window > Behaviors), double-click the action you want to change.
  5. In the dialog box that appears, make your changes, then click OK.

  6. In the Assets panel, select the Library category.

  7. Record the exact name and capitalization of the original library item; select it, then click the Delete button.
  8. In the Document window, select all the elements that make up the library item.

    Be careful to select exactly the same elements that were in the original library item.

  9. In the Assets panel, click the New Library Item button, then give the new item the same name as the item you deleted, using the same spelling and capitalization.

  10. To update the library item in your site’s other documents, select Tools > Library > Update Pages.

  11. In the Look In pop‑up menu, select Files That Use.
  12. In the adjacent pop‑up menu, select the name of the library item you just created.
  13. In the Update option, make sure Library Items is selected, then click Start.
  14. When the updates are complete, click Close.

More like this

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy