Section 16.8. Snippets and Library Tutorial

16.8. Snippets and Library Tutorial

In this tutorial, you'll do two things: first, you'll create a useful form pull-down menu snippet, and then you'll turn the National Exasperator 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/dw8/. Click the Tutorials link to go to the tutorials page. Then click the link under Snippets and Library Tutorial to download the files.After your browser downloads and decompresses the files, you should have a DWSnipLib (short for Dreamweaver Snippets and Libraries) folder on your computer, containing the Web pages and graphics you need 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.

To begin, you need to define a new site in Dreamweaver, using the folder you just downloaded as the local root folder. You can use Dreamweaver's Site Wizard by following the steps on Section 1.3.2, or you can use the alternate setup method described on Section 13.1.1. In either case, name the site Snippets and Library and specify the DWSnipLib folder as the local root folder. Defining sites is discussed in more detail on Section 13.1.1.

16.8.1. Creating a Snippet

With your site freshly defined, make sure the Files panel's open .

If the panel isn't open, press the F8 key or choose Window Files.
Click the first form menu at the top of the page .

This menu appears to the right of the words "Months of the Year." You've selected the menu (and its underlying HTML code.). To add this as a snippet you need to open the Snippets panel.
Click the Snippets panel tab to the right of the Files panel, or choose Window Snippets .

The Snippets panel (Figure 16-1) is your control center for adding, editing, and deleting Snippets.
Click the New Snippet button at the bottom of the panel (Figure 16-1) .

The Snippet window opens. Dreamweaver automatically copies the code for the menu into the window. You just need to name the snippet and add a few more details.
Type Month Menu in the Name box, and A list of month names , with numeric values in the description box, as pictured in Figure 16-6 .

The name and description appear in the Snippets panel. In this case, the description identifies what appears in the menu on the page (a list of month names) and what value someone submits when selecting a month from the list and submitting the formin other words, the name/value pair for this form field. (See Section 10.1.1 for more information on how forms work.)
Select the "Insert block" radio button .

This button identifies the snippet as a chunk of HTML that's simply plopped down on a page, as opposed to HTML that wraps around a selected graphic or text like a link or table cell might (if you wanted to do that, you'd select the "Wrap selection" button).
Select the Design button at the bottom of the window .

You've just told Dreamweaver to display the snippet visually when it's selected in the Snippets panel. In other words, when you select this snippet in the panel, you see a preview of the form menu, not a bunch of HTML code.
The window should now look like Figure 16-6. Click the OK button to create your new snippet .

The snippet should now appear in the Snippets panel, ready to be inserted into a page.

Figure 16-6. The HTML code for the snippet appears in the "Insert code" box. You can edit it, adding or removing HTML, or you can create code that wraps around anything selected on the page by choosing the "Wrap selection" button.
Select the Files panel by clicking the Files tab or pressing the F8 key; then double-click the file form.html .

This opens a blank Web page, the empty canvas for your latest and greatest form. Remember that snippets don't have smarts; that is, when you insert a snippet, Dreamweaver doesn't make sure the HTML is correct. In this case, the snippet's just a menufor it to really function, it has to be part of a form, so you first need to insert a form field.
Choose Insert Form Form .

A dashed red line appears on the page, indicating the outline of the form. Inside this area you can insert any form element you want, including your new snippet.
Return to the Snippet panel once again by clicking the Snippets tab or choosing Window Snippets .

Now for the moment of truth.
Drag your new snippetMonth Menufrom the Snippets panel to anywhere inside the form's red outline .

Ta-da, Dreamweaver adds the new menu. Now, whenever you need to add a menu listing the months of the year, don't bother creating it from scratch. Just use the snippet! If you wish, you can create more snippets using the other menus on the snippet.html page.

16.8.2. Creating a Library Item

Now you'll see one way in which Dreamweaver's powerful Site Management tools can help you create and update your Web sites more effectively:

In the Files panel, double-click the file index.html .

The National Exasperator's home page opens.
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 16-7).

Figure 16-7. Click <p.copyright> to select the paragraph containing the site's copyright notice.
Choose Window Assets, and then click the Library button .

The Assets panel opens and displays the Library category.
Click the New Library Item button on the Assets panel (Figure 16-4) .

A warning message appears, saying that the Library item may not look the same in other pages. Dreamweaver's trying to tell you that Library items can contain only HTML from the body of a Web pagenot 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, this formatting isn't 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.
Type copyright next to the new item on the Assets panel, and then press Enter .

You've just checked this standard blob of text into your Library. It's ready to use anywhere else on your site.
In the Files panel, double-click the file called index.html that's inside the horoscopes folder .

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

You'll frequently jump between the Files panel and the Assets panel, so these keyboard shortcuts come in handy: the F8 key to open the Files panel, and the F11 key to switch to the Assets panel.
Switch back to the Assets panel, and drag the copyright Library item to the bottom of the page, as shown in Figure 16-8 .

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.

Figure 16-8. 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 then clicking the Insert button on the Assets panel.
Add the footer Library item to the other pages in the horoscopes folder .

There are 12 other pages in this folder. Open each page (by double-clicking its name in the Site window) and repeat step 7. 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 9.)
Notice the mistake !

The copyright notice has the wrong date. The year 2000 is long gone! Oh, greatyou'll have to change the date on every page. Fortunately, you've used a Library item, so you can easily make the change.
Double-click the copyright item's icon (not its name) in the Assets panel .

The Library item opens up, ready for editing.
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.
Click Update .

Dreamweaver opens the Update Pages dialog box and updates all the Web pages that use the footer item.
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.

16.8.1. Creating a Snippet

Figure 16-6. The HTML code for the snippet appears in the "Insert code" box. You can edit it, adding or removing HTML, or you can create code that wraps around anything selected on the page by choosing the "Wrap selection" button.

16.8.2. Creating a Library Item

Figure 16-7. Click <p.copyright> to select the paragraph containing the site's copyright notice.

Figure 16-8. 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 then clicking the Insert button on the Assets panel.