Lesson 6 - Libraries


DW Cover


Assets

You can use Dreamweaver to keep track of and preview assets stored in your site, such as images, movies, colors, scripts, and links. You can also drag an asset directly to insert it in a page of the current document.

You obtain assets from various sources. For example, you might create assets in an application such as Adobe® Fireworks® or Adobe® Flash®, receive them from a co-worker, or copy them from a clip-art CD or graphics website.

The Assets Panel which is located in a tab next to the Files Panel lists all the images, colors, urls, and other assets, that you are using in your site. There are nine categories which are shown, vertically, on the left hand side of the Assets Panel as icons.

Assets Icons

You can view the assets by Site and by Favorites. We will view by Site. When you click on any of the icons it will show the corresponding type that is used in the site. If you select images it will show you all of the images that are used in the site. When you click on the name of the image it will show the actual image in the panel above the list of image names.

Library Image

Favorites is a great place to store assets that are commonly used in a site where there are lots of assets. Instead of having to find it among hundreds of assets, Favorites makes it much easier to find. We will add the image of the Dreamweaver box to Favorites. Click on the Images icon and find the image in the list and select it. At the bottom of the panel click the 'Add to Favorites' icon.

Add Image to Favorites

A popup will come up letting you know that the asset has been added to Favorites.

Library Favorites Message

As you start to get more assets in Favorites you can create folders to organize them. To create a Favorites folder go to the top of the Assets tab and switch from Site to Favorites. At the bottom, click the New Folder Icon button which will add a folder in the panel called 'untitled'.

New Favorites Folder

Rename the folder and drag and drop all the assets that you would like to add to the folder.

Add Assets to Folder


Libraries vs Templates

Dreamweaver also provides access to two special types of assets—libraries and templates. Both are linked assets: when you edit a library item or template, Dreamweaver updates all documents that use those assets. Library items generally represent small design assets, such as a site logo or copyright. To control a larger design area, use a template instead.

It is often difficult when building a site to decide which techniques to use to make your site building easier. When you create a template, you specify areas of the template that will not change from page to page, such as a copyright statement, a background graphic, etc. You also specify at least one editable region, which will contain the content that will change from page to page. Once you create a template, you can quickly create pages by choosing the File>New From Template command.

Using templates can help you to build a site quickly, especially one containing lots of pages that have the same elements in the same places on each page. The value of using templates for building a site is highest when you're creating a site that needs consistency among large numbers of pages. For example, you might create a site that contains biographical information for all of the members of a trade association. Certain elements, such as the association logo, will always appear on all the bio pages in the same place. You would create an editable region to contain the actual biographical information for each member.

Often, however, templates are not the best tool for building a large site. You may have elements that you want to use on many pages, but you might want pages to be arranged differently. In this case, Dreamweaver's Library feature of the Assets Panel might be a better choice.

Libraries give you the advantage of designating elements that you want to use often as page elements, but they allow you to implement those elements in a more flexible manner. For example, suppose you have a company logo that you want to use on various pages in the site. If you created a page template, you would most likely place that logo on the template, but not in an editable region. You would simply place it in a location on the page, which would be applied consistently to any pages that use that template. Once you do that, however, you really don't have the flexibility of moving that logo anywhere else on the page.

By placing the logo into a library, you can easily add it to the pages on your site in any location on the page.

You might be wondering at this point what advantages the Library feature has, since placing an element from a library seems to be similar to simply inserting an element on the page the "old fashioned way." Here is the main advantage: Once you add an item to a library and then place the item on a page, the library item on the page is linked to the library. Once that link is established, the management of the library items is done within the library, and not on individual pages.

For example, if you place a logo in a library, and then use the library to place that logo on various site pages, all of the pages that use the logo can be updated immediately. Managing repeating elements is much easier in this respect.


Libraries vs. Server-Side Includes

Many experienced web developers also wonder how libraries differ from server-side includes. A server-side include is a common site element that is stored on a web server and is brought onto a page via a script. By using a server-side include, you manage repeating site elements more easily than placing them individually on multiple pages. When you update a server-side include on a web server, the pages using that element will update, since the element is loaded with the pages as they are transferred to the viewer's computer.

However, server-side includes are more difficult to implement. First, a script is necessary to have the web server transfer the element along with the page. The script contains much more code than standard HTML tags, making the download time longer. Second, this strategy can easily tax a web server, since each time a page is accessed the server will also have to execute those scripts.

So, Libraries are just another tool you can use if your site calls for it. If you have a site with dozens of pages that are the same, it might be best to use a template. But, if you need to simply be able to quickly place and manage repetitive elements, then Libraries really could be your ticket.


Libraries

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.

A Library item is created and saved in a separate file in a Library folder within the local root folder for each site. Each site has its own library. To use them in other sites you must copy and paste the Library element.

After you save the code item in the Library, you can drag and drop it into the necessary pages. When you want to make changes to a Library item you edit the Library item stored in the separate file and Dreamweaver will update the items on all pages which contain the Library items. The difference between Library items and templates is that Library items are used for smaller contents like logos and buttons, while templates are applied to the entire web page. Library items are also used for content that occurs consistently throughout the website and needs to be updated regularly.

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.)

Note: 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.

For more information on how to handle behaviors and javascript visit the Adobe Help Site.


Creating a new Library Item

To create a Library item you open the document that contains the elements that you want to save as a Library item. You select the element(s) from the Document window and choose Modify>Library>Add Object to Library.

Add Library Object

Instead of using the menu to add a new Library item you may also click on the New Library Item icon at the bottom of the panel. The new Library item appears as untitled. You then name the untitled item.

Library Object Added

The new Library item is now in the library and is available to all of the documents in the site.


Adding an Asset to the Document

Now that we have seen all the assets associated with the site it is easy to add them to other documents within the site. Let's say that we create a new document and we wish to add the Dreamweaver box cover. Move the mouse where the image is to be added. Since the image is in the Library we click on the Library icon and then click on the name of the image from the list and press the Insert button at the bottom.

Insert Library Asset


The item is added to the page. Another way to add the item is to drag the item from the Library and then drop it into the document using the mouse.

Library Code


To make global changes to the Library items you choose the Files panel and click the Assets tab and click on Library. You double-click any item listed in the Library to open it. Now you can edit the Library element.Click on file>Save to save the changes. To apply the changes you made to all the pages, you click the Update button. *If you do not want to apply the changes to all the pages that contain the Library items, click the don’t update button.*

To edit a Library item on only a few pages and not all the pages in which the library items appear, you must detach the link between the original item in the Library. When you break the connection, you can’t update the page’s library item automatically. To do this you open any file that contains a Library item and select the library item. Click the Detach from original button in the Property Inspector. Click OK to detach the Library item.

Detach Library


Note: Do not add any Spry widgets into the library because only the html will be copied over, not the CSS. Use templates instead.


References

* click the link below to continue with this lesson *
Snippets

Up Arrow Top

Copyright © 2010 - 2011 Robert D. Cormia - December 14, 2010