• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 8. Using Libraries > Creating a Library Item

Creating a Library Item

You can create a library item by selecting one or more elements in a document and adding them to the library. When you do this, Dreamweaver converts the selection into non-editable content that is linked to the corresponding library item. The following exercise demonstrates this process.

Open Lesson_08_Library/culture.html.

Library items can only include content that appears between the <BODY> and </BODY> tags. They can include any document elements such as text, tables, forms, images, Java applets, plug-ins, or ActiveX elements.


Cascading Style Sheet (CSS) references (for example, <SPAN CLASS="green"> green text </SPAN>) are preserved in library items, but the style will not appear when the library item is inserted in a document unless the style sheet containing that style is linked to the document. The Library panel offers a visual reminder of this (in addition to a warning message) by displaying the text as it would appear if the style sheet were omitted. The best way to make sure style sheet information is included is to use external style sheets and remember to link them to all documents that need to make use of their styles. CSS is covered in Lesson 13.

Select the copyright text, the email address, the modification date, and the horizontal rule.


Be sure to select the space that is just before the copyright character. Because this document has margins of 0 defined, this space is necessary to provide a buffer between the edge of the browser window and the copyright text. If you want to use a similar space on your own documents you will need to use what is called a non-breaking space. Typing a space on a new line won't actually put a space in the HTML document, so you need to use the non-breaking space instead. To insert a non-breaking space, you can use the keyboard shortcut Option+Space (Macintosh) or Ctrl+Shift+Space (Windows). You can also choose the Characters tab on the Insert bar and click the Non-Breaking Space icon (second from the left). Non-breaking spaces can also be used to insert more than one space—HTML documents only recognize one standard space, and pressing the space bar multiple times will have no effect after the first space is inserted.

The text and horizontal rule are highlighted.

In order to create a library item out of multiple elements, those elements must form a contiguous selection in the document. If you need noncontiguous items to function as a library item does, you will need to create multiple library items.

The copyright text, email address, and modification date are standard information that might be used at the bottom of all pages within a Web site. Libraries can be very useful for this type of information.

A library item containing relative paths (such as links to pages or images) can be placed in any level of your site's directory structure—it does not have to reside on the same level as the original library item. In the sample directory structure shown in the following figure, a library item called Lens created in lightsource.html, containing a link to the image lens.jpg located in the media folder, will work when inserted into beacon.html because the path to the image (media/lens.jpg) is the same for both lightsource.html and beacon.html. The path is the same for both files because they are located in the same level of the site directory structure; both files are on the top level, directly inside the root folder Site-Libraries Example. The path media/lens.jpg tells the browser that the lens.jpg image is located in the media folder inside the current directory. The current directory is the folder in which the file that the browser is reading is located. In this case, the current directory is the folder in which the files that use the path media/lens.jpg (lightsource.html and beacon.html) are located—the Site-Libraries Example folder.

The same Lens library item would also function correctly if it were used in ship.html because Dreamweaver will automatically determine the appropriate path. The correct path for ship.html would be ../media/lens.jpg. The ../ at the beginning of this pathname tells the browser to go up one level in the folder directory structure—so the browser would look inside the site root folder, which is the next level up from the A folder. The browser will then look in the media folder for the lens.jpg image.


If a library item called Ship2 were to be created in ship.html with the path ../media/lens.jpg, then it would have the same path if it were placed in any file within folder A. It will also have the same path if it were placed in any file within folder B, such as water.html, because the path from a file in folder B to the lens.jpg image in the media folder (../media/lens.jpg) would be the same as the path from a file in folder A because the files in folders A and B are on the same level of the directory structure in this sample site.

Without a library item, a path in beacon.html to the image header.gif located in the top-level images folder inside the lighthouse site in the previous example would work in ship.html only if the image header.gif is duplicated inside the images folder in folder A. In this case, beacon.html and ship.html would be using the same path to access a different copy of the image. A library item, however, would automatically calculate the correct path.

Choose Window > Assets to open the Assets panel in the Files panel group. Click the Library button on the bottom left of the Assets panel to open the Library portion of the Assets panel.

The Library category of the Assets panel opens. This is where you will manage all of your library items.

Drag the selected objects from the document window to the lower half of the Library panel.


You can also click the New Library Item icon at the bottom of the Library category of the Assets panel or choose Modify > Library > Add Object to Library in order to create a new library item.

A new Untitled icon appears and is highlighted on the Library panel. A preview of the library item, created from the elements you selected in step 2, appears at the top of the panel.


When you create a library item, Dreamweaver creates a folder named Library at the top level of your local root folder and stores each library item there. This Library folder and the library files it contains are only stored locally; they do not need to be uploaded to a server unless you wish to share them with other members of your Web team. Dreamweaver saves each library item with the .lbi file extension.

Type copyright for the new library item, and then press Return (Macintosh) or Enter (Windows).

The library item is now known as copyright in the Library panel. You should give your library items descriptive names. The names are for your reference only and will not be displayed to the user in a browser window.

When you deselect the text in the culture.html document window, it has a pale yellow background. The yellow background indicates the text is linked to a library item and is not directly editable. This block of text is now considered one item, so clicking any part of it will select the entire library item. Leave the culture.html document open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint