Building Web Sites All-in-One For Dummies® (42 page)

The Assets panel has several categories, represented by buttons in the left margin. (See Figure 6-7.) The categories (from top to bottom) are

•
Images:
Lists all the JPEGS, GIFs, and PNGs within the site.

•
Colors:
Shows color chips and the hexadecimal code for the colors used on the site.

•
URLs:
Lists the pages and URLs your site is linked to. You can quickly make links in your documents by highlighting the text or item you'd like to be the link, and then dragging the desired link onto the highlighted element in your Document window.

•
Flash:
Lists all files that are different from the Shockwave files. If you want to use images or Flash pieces, click the Flash button on the vertical toolbar and drag the item from the list to the place in the Design view window you'd like to place it.

•
Shockwave:
Lists multimedia created using Adobe Director. Flash files are sometimes referred to as
Shockwave,
but they aren't really Shockwave; they're Flash.

Shockwave is still in heavy use in building games (popcap games, for instance) and other intense applications. Flash and Shockwave are not the same thing. It is a common mistake to think they are. It can lead to some trouble if you are expecting Flash to be Director and Director to be Flash. At this level it is important just to know that Shockwave and Flash are not the same thing despite the fact that it's called “shockwave flash.”

•
Movies:
Lists all movie files that don't fit on the Flash or Shockwave tabs, such as QuickTime or Windows Media.

•
Scripts:
Lists all the external scripts, such as JavaScript files, that are on your site.

•
Templates:
Lists the Dreamweaver templates you built.

•
Library:
Lists the library items you created for the site.

You can access the assets of each type by clicking the appropriate button. This method of locating assets is helpful when you know you're looking for a particular item, and you'd like a list of just that type of object. For instance, if you want to place a Flash element on a page, click the SWF button. You're presented with a list of the Flash elements available on that site.

At the bottom of the Assets panel, you'll notice a few more buttons (refer to Figure 6-7): Refresh Site List, Add to Favorites, Edit, and Delete (looks like a trash can). At the top are a few more: Sort by Whole Site and Sort by Favorites. If you marked elements as Favorites, you can use the second option to narrow your search for assets while you work.

Discovering library items

Webmasters have several methods at their disposal for implementing similar types of functionality on a Web site; using the library items feature is the Dreamweaver-specific method. The Assets panel is usually open within the Files panel and can be accessed by clicking the Assets tab. If the Assets panel isn't open, you access library items through the Assets panel. (See Figure 6-8.) Choose Window⇒Assets from the Dreamweaver menu bar to open the Assets panel. After you create an HTML document, you can make parts of it into library items. With library items, you can reuse that content on other pages by dragging it from the Library into the spot on the document you'd like for it to be. By default, there aren't any library items: You have to make them yourself.

•
Create part of a page once and then quickly apply the code from it to other pages on your site.
You might find library items useful to implement and maintain consistency in footers, banners, and navigational elements.

•
Update all instances of a library item at once.
Library items maintain an association to the library item file, so if you update the original, the other instances of it are updated, too.

Library items are sort of like minitemplate pieces with a few differences. Like with templates, you can create as many library items as you like. Just keep in mind that the more variations you have, the more difficult maintenance can become.

With Dreamweaver library items, the code of the item does appear in the individual HTML document but is linked in Dreamweaver to the originating file. Other HTML editors won't recognize the association, so if you implement this method, you need to maintain and edit the files within your Dreamweaver site.

Creating a library item

To create a Dreamweaver library item, follow these steps:

1.
Create a Web page or open an existing one.

2.
Create the element you'd like to make into a library item.

Create a navigation bar or site banner, for instance.

3.
Open the Assets panel by choosing Windows
⇒
Assets from the Dreamweaver menu bar. Click the Library button on the Assets panel.

4.
Highlight all the code that makes up the element.

5.
Click the New Library Item button located in the lower-right corner of the Assets panel.

A dialog box warns you that style sheet information that applies to the code is not copied along with the code.

6.
Click OK.

7.
Name the library item.

Use a name that makes sense, such as
Navigation
for a navigation bar. Make sure you call it something Web legal. Making up strange naming schemes is not helpful and can actually confuse things later when you or other members of the team need to work with the files.

Dreamweaver automatically creates the library item folder called Library in your site. The new library item is in the folder with the name you gave it and the file extension of
.lbi
.

At this point, you might notice some new code in your document that looks like this:

The first line in this block of code alerts Dreamweaver that this piece of code is linked to the library item called
Navigation
. The last line tells Dreamweaver that it has reached the end of the block. Do not remove this code, or Dreamweaver won't be able to update this properly.

The block of code is also highlighted in Code view. This is just a visual cue to help you see that you have a library item on your page. It won't affect the visual display of your page at all.

Using a library item

Inserting library items into a site is very easy and takes only a couple of steps:

1.
Create or open an HTML document that you'd like to use the library item in.

2.
Drag the library item from the Library panel into the Document window into the location you'd like to place the block of code.

Your page has a block of code that resembles the code generated when you created the library item.

Updating library items

To update the library item, follow these steps:

1.
Select the library item in the Assets panel list.

2.
Click the Edit button.

It's in the lower-right corner of the Assets panel.

3.
Dreamweaver opens the document in the Document window.

4.
Make the desired edits.

5.
Save the document.

The Update Library Items dialog box opens, displaying a list of documents that will be affected.

6.
Click Update.

The Update Pages dialog box appears, giving you additional options and a status on the update process.

7.
Make any additional optional choices and then click Start in the Update Pages dialog box.

8.
Click Done to close the dialog box.

Detaching library items

In some cases, you might want to detach an instance of the library item from the main file. For instance, you could decide to expand an area of a site that has a library item–generated navigation bar. You can detach that navigation bar from the library file; make changes; and then make a new, secondary navigation library item for use within that section.

To detach an instance of the library item from the parent file, follow these steps:

1.
Open the page that has the block of code.

2.
Select the library item code.

You'll be able to find it easily; library item code is highlighted by Dreamweaver.