Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating a Library Item

  • Library items are a page element that you want to use across multiple pages
  • You create them and edit them from the Library area of the Assets panel
  • The Library icon is the book in the left column of icons
  • This is how you can add a library item to a page once you have created one, just drag it onto the page from this panel
  • Dreamweaver creates a Library folder in the site root that cannot contain other files or it can affect how the library item will work

Creating a Library Item

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Creating a Library Item 0:13
    • Delete a Library Item
    • New Library Item
  • Library Folder 3:31
  • How to Use a Library Item 4:17
  • Library Item Tag 5:12
  • Adding a Library Item 5:46
  • Summary 7:42

Transcription: Creating a Library Item

We are now going to take a look at working with a library item.0000

What I am going to do is take some page content, convert it into a library item, and then use that library item on some pages.0004

Let's take a look at how to create a library item first.0013

I am going to open the Destinations page; and this is a page that has been created throughout the course, and when I open this up, what I have at the bottom of this page is a copyright area.0018

And what I would like to do, since I already have it created on this page: I would like to convert this to a library item, and then use that library item across my other pages--my other main navigation area pages.0034

That is what I am going to do.0050

Now, in order to work with a library item, we want to move over to the Assets panel--that is the safest place to work with a library item.0052

What I am going to do is show you how to delete a library item if you need to.0061

Every once in a while in class, I have people create a couple of them instead of just one; so I want to show you how to delete it.0067

It is very similar to deleting other content in the Assets area.0076

What I do is select the library item.0081

Now, notice: if I select the name, Dreamweaver thinks I want to change the name; so I'll click off of that; if I select the icon in the Assets panel, you can see it selects the whole thing perfectly.0084

So, within the Assets panel, it is always good to get used to selecting the icon, not specifically the name.0099

And to delete it, I am simply going to move down to the trash can and click that; and Dreamweaver prompts me, just in case you accidentally clicked on that; and I just deleted a library item.0107

Now, that isn't one that is being used anywhere on my pages at this point, so I do not get any other prompts from Dreamweaver.0122

How do I create one now?--well, what I am going to do is, first of all, select the content I want to become a library item: so there is my content.0130

Now, within the Library area of the Assets panel, I am going to go down to the bottom and click the + sign--and you can see, the + sign says "New Library Item."0141

As soon as I do that, you can see I have copyright now in my library; I get an untitled, so it's all set for me to give it a name: so I'm going to name it Copyright.0153

I'll hit Enter or Return when I'm done; and there is my library item--it is really as easy as that.0167

Now, what is interesting is what happened to the content on my page that I made a library item.0174

Since I had highlighted it, Dreamweaver made that automatically a library item; if I click off of it, you can see, it has a light yellow color.0181

If I click on it, I cannot directly edit this library item; but if I click Open down in the Properties area, it opens that .lbi file for me to edit.0191

I am just going to close it for now; but you can see, it is definitely a separate file.0205

Now, if I go over to my Files panel, I will now have a Library folder within my Files panel.0212

And if I open that up (on the Mac, this would be an arrow that opens, not the + sign), you can see, there is my library item.0220

I try and stay away from working with this folder at all; it is easy to accidentally drag something into that area; so, if you move over to the Assets panel to work with your library items, you won't have that trouble.0229

There is our library item, and it's yellow on the page.0246

I'll go ahead and save this page, because I did make a change to it; it now has a library item.0250

How do I use that library item?--let me go out to some files and do that.0257

What I want is to add that library item to the About Us page; so I'll go ahead and open that.0263

How do I use it?--well, there are three different ways, just like working with images in the Assets panel.0271

I can drag from the picture; I can drag from the icon; or I can place my cursor in the page where I want it.0278

So, I'll hit Enter or Return to put my cursor underneath this content; I will select the asset, and specifically the Library Item asset, in the Assets panel; and I will click Insert down at the bottom.0287

Any of those three methods: if you prefer to drag, just drag from the Preview area or drag from the icon.0304

Once I have it on the page, you can see, once I have it selected, I get Library Item.0312

And here is an <mm:libitem> little tag, and that is some of the code that goes into the page, and that is the piece that Dreamweaver keeps track of.0319

I don't want to do anything with this; the mm represents Macromedia, who actually created Dreamweaver (and Adobe has not changed any of that coding).0330

So, there is the library item on my About Us page.0342

I'll go ahead and go out to Contact Us; I'm going to do the same thing.0347

Now, on the Contact Us page, if I place my cursor here, I will end up inside the form.0352

That red dotted line tells me that is a form tag.0359

And that is not where I want my library item.0363

So, how do I get my cursor out of the form tag, in order to add the library item underneath it?0366

What I am going to do is use our handy tag selector.0373

I'll click on the form here; I'm going to hit the right arrow on my keyboard, and then I will hit Enter or Return, and you can see, it gets me a space underneath the form.0377

That little feature comes in very handy.0390

So now, I am going to go over to the Assets panel and drag my library item out; and it is now on the page.0393

Now, you can see, I have added the library item to About Us and Contact Us, and have not yet saved; I'm going to add it to one more file before I do that--I am going to add it to Specials.0401

These are our main navigation pages; so I want the copyright to be in that area.0415

This one is pretty simple--just put my cursor at the end of the content and hit Enter or Return, move over to the Assets panel where the library item is open, and I'll drag it out; and there it is on my page.0422

I now have four pages with this library item available, as you can see.0438

I just created a library item and added it to four pages; now I need to make sure I do a Save All for all of these pages.0445

I will do a Save All here, and you can see, it took care of it all for me.0455

We just created a library item from content on a page; we replaced that original content with the library item; and then, we were able to add that library item to any other pages we wanted, and we just added it to About Us, Contact Us, and Specials.0462

And that is how you create and add a library item to pages within your website, using Dreamweaver.0484

Library items are a very handy feature within your website; even if you never end up creating templates, library items (more than likely) you will find handy.0492

That is creating and adding library items to your web pages in Dreamweaver.0504