Logo
HOW TO
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows Vista

Adobe Dreamweaver CS5 : Using Library Items and Server-side Includes (part 2) - Using the Library Assets Panel - Inserting a Library item in your Web page

11/29/2013 1:46:15 AM

2.2. Moving Library items to a new site

Although Library items are specific to each site, they can be used in more than one site. When you make your first Library item, Dreamweaver creates a folder called Library in the local root folder for the current site. To move the Library item to a new site, follow these steps:

  1. Open the Library category from the Assets panel.

  2. Right-click (Control+click) the Library item you want to move.

  3. Put your mouse over the Copy to Site section of the context menu, and then choose the site you want to copy the Library item to.

Be sure to move any dependent files or other assets, such as images and media files associated with Library items. The Copy to Site function does not move dependent files.


2.3. Inserting a Library item in your Web page

When you create a Web site, you always need to incorporate certain features, including a standard set of link buttons along the top, a consistent banner on various pages, and a copyright notice along the bottom. Adding these items to a page with the Library items can be as easy as dragging and dropping them.

You must first create a Web site and then designate Library items (as explained in the preceding section). After these items exist, you can add the items to any page created within your site. To add Library items to a document, follow these steps:

  1. Position the cursor where you want the Library item to appear.

  2. From the Library category, select the item you want to use.

  3. Click the Insert button. The highlighted Library item appears on the Web page.

As noted earlier, you can also use the drag-and-drop method to place Library items in the Document window.


When you add a Library item to a page, you notice a number of immediate changes. As mentioned, the added Library item is highlighted. If you click anywhere on the item, the entire Library item is selected.

Dreamweaver treats the entire Library item entry as an external object being linked to the current page. You cannot modify Library items directly on a page. 

While the Library item is highlighted, notice that the Properties panel also changes. Instead of displaying the properties for the HTML object that is selected, the item is identified as a Library item, as shown in Figure 2.

You can also see evidence of Library items in the HTML for the current page. Open the Code inspector, and you can see that several lines of code have been added. The following code example indicates one Library item:

<!- #BeginLibraryItem "/Library/Copyright.lbi" -><span i
class="fineprint">Copyright &copy; 2010</span><!- #EndLibraryItem ->

Figure 2. The Library Item Properties panel identifies the source file for any selected Library entry.

In this case, the Library item happens to be a phrase: Copyright © 2010. (The character entity &copy; is used to represent the c-in-a-circle copyright mark in HTML.) In addition to the span wrapping the copyright, notice the text before and after the HTML code. These are commands within the comments that tell Dreamweaver it is looking at a Library item. One line marks the beginning of the Library item:

<!- #BeginLibraryItem "/Library/Copyright.lbi" ->

and another marks the end:

<!- #EndLibraryItem ->

Two items are of interest here. First, notice how the Library demarcation surrounds not just the text (Copyright © 2010) but all its formatting attributes as well. Library items can do far more than just cut and paste raw text. The second thing to note is that the Library markers are placed discretely within HTML comments. Web browsers ignore the Library markers and render the code in between them.

The value in the opening Library code, "/Library/Copyright.lbi", is the source file for the Library entry. This file is located in the Library folder, inside of the current site root folder. Library source (.lbi) files can be opened with a text editor or in Dreamweaver; they consist of plain HTML code without the <html> and <body> tags.

The .lbi file for the title example contains the following:

<span class="fineprint">Copyright &copy; 2010</span>

The power of repeating elements is that they are simply HTML. You need not learn proprietary languages to customize Library items. Anything, except for information found in the header of a Web page, can be included in a Library file.

The importance of the <!- #BeginLibraryItem> and <!- #EndLibraryItem> tags becomes evident when you start to update Library items for a site.

Other -----------------
- Configuring Startup and Troubleshooting Startup Issues : How to Configure Startup Settings (part 2) - How to Use BCDEdit
- Configuring Startup and Troubleshooting Startup Issues : How to Configure Startup Settings (part 1)
- Configuring Startup and Troubleshooting Startup Issues : Important Startup Files
- Accessing and Using Your Network : Collaborating with Windows Meeting Space (part 2)
- Accessing and Using Your Network : Collaborating with Windows Meeting Space (part 1)
- Accessing and Using Your Network : Working with Offline Files and the Sync Center (part 2) - Synchronizing Offline Files, Handling Synchronization Conflicts
- Accessing and Using Your Network : Working with Offline Files and the Sync Center (part 1) - Working with Network Files Offline
- Accessing and Using Your Network : Sharing Resources with the Network (part 3) - Hiding Shared Resources
- Accessing and Using Your Network : Sharing Resources with the Network (part 2) - Sharing a Resource
- Accessing and Using Your Network : Sharing Resources with the Network (part 1) - Setting Up File and Printer Sharing, Deactivating the Sharing Wizard
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
 
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro