Lesson 5 - Libraries
Libraries vs Templates It is often difficult when building a site to decide which techniques to use to make your site building easier. In the Knowledge Quest lesson, one or more of your classmates presented their findings on Templates and Libraries or Assets. 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. Assets PanelThe Assets Panel which is a tab under the FIles Panel lists any elements you may use in a web site. There are nine different categories which are listed on down the left hand side of the Assets Panel as icons.
There are two ways to 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 image names.
The Favorites folder is a great place to store images that are commonly used in a site where there are lots of images. Instead of having to find it among hundreds of images the Favorites folder makes it much easier to find. To create a Favorites folder go to the top of the Assets tab and switch from Site to Favorites. At the bottom select the New Folder Icon button which will add a folder in the panel called 'untitled'.
Rename the folder and switch from Favorites to Site. Select an image and click on the icon at the bottom of the panel to add it into the favorites folder.
The image is now in the favorites folder and is much easier to find.
LibrariesA feature of Dreamweaver that has not been covered in lectures is the Library elements. The Library elements are similar to the template feature in that it makes it easy to use the same elements many times on multiple pages. You use Library items for objects that are used regularly in your site, but do not appear on every site. You can use the library feature to create items that are consistently used on many pages including text, navigation bars and image maps. A Library item is created and saved in a separate file and then these items can be added to many different pages. 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 apply to the entire web page. Library items are also used for content that occurs consistently throughout the web site and needs to be updated regularly. Another useful aspect of the Library is that elements such as navigation bars, buttons, logos etc., can be shared between web sites. You are able to copy and paste the Library elements and use them in multiple sites. Creating a new Library ItemTo create a Library item you open the page that contains the elements which you want to save as a Library item. You select the element(s) and choose modify>library>add object to library.
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.
The item has been placed in the library and will be available to all of the pages in the site. Adding a Library Item to a PageTo add the library item to a page you open the document in which you would like to add the Library items. You choose the File panel and click the Assets tab then click the library item you wish to insert. In the Code View click where you would like to add the item. Next, click the Insert button at the bottom of the Library panel.
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.
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. You then can edit the Library element. You then click on file>save to save the changes. To then 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.
Note: Do not add any Spry widgets into the library because only the html will be copied over, not the CSS. Use templates instead. Reference:McFarland, David Sawyer (2007). Dreamweaver CS3: The Missing Manual. O'Reilly Press, Sebastopol, CA. Copyright © 2008 - 2009 Robert D. Cormia - October 21, 2008 |
