17.8 Library Tutorial

     

In this tutorial, you'll turn the National Exasperater copyright notice into a reusable Library item and add it to several pages in the site.

NOTE

The tutorial in this chapter requires the example files from this book's Web site, www.sawmac.com/dwmx2004 Click the Tutorials link to go to the tutorials page. Under Library Tutorial, click to download the Windows or Macintosh files, depending on the kind of machine you're using.

After your browser downloads and decompresses the files, you should have a DWLib (short for Dreamweaver Libraries) folder on your computer, containing the Web pages and graphics needed for this tutorial. If you're having difficulties, the Web site contains detailed instructions for downloading the files you'll be using with this book.

17.8.1 Creating a Library Item

Keep track of the location of the DWLib folder. You'll need it in the next step.

1. Following the instructions in Section 1.3.1, create a local site in Dreamweaver, choosing the DWLib folder as the root folder.

   Name the site DW Library and, in step 7 in Section 1.3.1, choose the DWLib file.

2. In the Site window, double-click the file index.html .

   The home page opens.

3. Scroll to the bottom of the page and select the copyright notice.

   Copyright information should be on every page of the site, so it makes a perfect candidate for a Library item. Notice that the copyright information is more than just text; it's actually a paragraph including a small image. The best way to select it is to click inside the text, and then click the <p.copyright> tag in the status bar of the document window (Figure 17-6).

   Click <p.copyright> to select the paragraph containing the site's copyright notice.

   

4. Choose Window Assets and click the Library button.

   The Assets panel opens and displays the Library category.

5. Click the New Library Item button on the Assets panel.

   A warning message appears, saying that the Library item may not look the same in other pages. Dreamweaver is trying to tell you that Library items can only contain HTML from the body of a Web page ”not Cascading Style Sheets. (You can still include HTML, such as this paragraph, that's had a style applied to it, as long as you make sure that any pages to which you add the Library item have the appropriate style sheets.)

   The text in this example is formatted using a style sheet, so sure enough, it won't look the same in pages that don't have the same style sheet. In this exercise, however, that won't be a problem, since all the pages in the site share the same linked external style sheet (see Section 6.1.2).

   Click OK to dismiss the warning. The copyright-notice item appears in the Library list, with an "Untitled" naming rectangle next to it.

6. Type copyright next to the new item on the Assets panel and press Enter.

   You've just checked this standard blob of text into your Library. It's ready to use anywhere else on your site.

7. In your Site window, double-click the file in the horoscopes folder called index. html.

   Notice that this page is missing a copyright notice at the bottom of the page.

8. Drag the copyright Library item from the Assets panel to the bottom of the page, as shown in Figure 17-7.

   In addition to dragging a Library item into the document window, you can also insert the item, by placing the insertion point in the document window and clicking the Insert button on the Assets panel.

   

   You can recognize the newly inserted Library item by its yellow background. Click the text in the item and notice that you can't edit it: Dreamweaver treats it like a single object.

9. Add the footer Library item to the other pages in the horoscopes folder.

   There are twelve other pages in this folder. Open each page (by double-clicking its name in the Site window) and repeat step 8. All right, you don't have to do all of the pages, but at least do three or four to experience the full impact of what's next.

   (You can close and save the pages as you go, or leave them open. Leave at least one open at the end and go on to step 10.)

10. Notice the mistake!

    The copyright notice has the wrong date. The year 2000 is long gone! Oh, great ” you'll have to change the date on every page. Fortunately, you've used a Library item, so making the change will be a breeze .

11. Double-click the copyright item's icon (not its name) in the Assets panel.

    The Library item opens up, ready for editing.

12. Change 2000 to the current year. Choose File Save.

    The Update Library Items dialog box appears, listing all of the pages in the site that use the footer item.

13. Click Update.

    Dreamweaver opens the Update Pages dialog box and updates all the Web pages that use the footer item.

14. Click Close to close the Update Pages dialog box.

    And now if you open a file in the horoscopes folder, you'll find that the copyright date is correct.

    Now imagine that you just used this auto-update feature on a 10,000-page site. Sit back and smile.