ptg 406 Chapter 17 Although Dreamweaver supplies you with dozens of useful sections of snippet code, there will always be the time when you need something that isn't supplied. One method is to jump out onto the Web, go to your friendly search engine, and look for something that might fit the bill. Not only are there a lot of sites out there that have free code for you to use, it's very possible that you might be able to modify an existing piece of code to suit your purposes. And let's not forget Adobe; they've given us the exchange that is just jam packed with high-end code snippets for just about any occasion; many of them free. Just point your browser to: http://www.adobe.com/cfusion/exchange/ While this section is not de- signed to make you a snippet programmer, there are probably a lot of you code warriors out there (myself included), who have the ability to write our own snippets. And here's a bit of advice… if you design what you think is a really cool snippet, you can post it on the Adobe Exchange and share it with others. Creating Snippets Create a New Snippet Folder Click the Window menu, and then click Snippets to display the Snippets panel. Select the folder where you want to create a new snippet folder. Click the New Snippet Folder button. The new folder appears selected with the name, untitled. Type a name for the folder, and then press Enter (Win) or Return (Mac). 4 3 2 1 3 1 2 4 Did You Know? You can rename a snippet folder or a code snippet. Open the Snippets folder, click the snippet folder or code snippet you want to rename, click the item again, edit the name, and then press Enter (Win) or Return (Mac). From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 407 Create a Snippet Click the Window menu, and then click Snippets to display the Snippets panel. Select the folder that you want to add your new snippet. Click the New Snippet button. Use the following options to create the snippet: ◆ Name. Enter a name for the snippet. ◆ Description. Enter a description of the snippet. ◆ Snippet Type. Select the Wrap Selection option for the wrap type or the Insert Block option for the block type (in this example, Insert Block). ◆ Insert Code. Enter or paste the code for the snippet. For the Wrap Selection option, enter or paste the code in the Insert Before or Insert After box (in this example, JavaScript code was added to create a date last modified area to the page; the file is called Snippet.xml in the Scripts folder). TIMESAVER You can copy code from another text program (even Microsoft Word), and paste it using Ctrl+V (Win) or A +V (Mac) into the Snippet dialog box. ◆ Preview Type. Select the Design or Code option to specify how you want to preview the snippet in the Document window. Click OK. Dreamweaver saves the code and adds it to the Snippets panel. 5 4 3 2 1 3 1 2 5 4 From the Library of Wow! eBook ptg 408 Chapter 17 Introducing Assets and Libraries Introducing Assets Assets are individual elements, such as images, movies, colors, scripts, and URL links, you add to your Web site. You create assets when you insert elements from other programs, such as Adobe Photoshop or Adobe Flash. The assets are stored in the Assets panel, where you can insert and man- age them for use in other parts of your Web site. Introducing Libraries Dreamweaver provides two special types of assets: libraries and templates. A library is a Dreamweaver file that contains individual assets or copies of assets, while a template is a Dreamweaver file that contains editable regions. The assets in a library are called library items . Library items are sections of a Web page that can be used over and over again. You can create a library item from any element in the body section of a document, including naviga- tion bars, images, text, tables, forms, Java applets, plug-ins, and ActiveX controls. For example, a navigation system that you want to use on many of the pages in your site is best created and saved as a library item. That way when you need it, all you have to do is add the navigation to the page by dragging it out of the Assets panel. This gives you a tremendous savings in terms of time creating all those replicating items in Web design. And another benefit is the consistency factor. You know that if the original Library item works, they all work, because they are based on the original item. Library items also give you a grand advan- tage when it comes to changes. Again, let's say that you've created a catalog Web site with hundreds of pages that contain images, and descriptions of your products. However, they're not the only things on those pages; you've got a header, footer, navigation, back- ground image or color. There's a lot of stuff going on… and then something happens. You make a modification to the site that requires you to add another button to the Navigation bar… OOPS. No problem. You created the navigation system for those pages as a library item, and then you inserted that item into a template (more about Templates in a later chapter). So all you have to do is open the original library item, make your changes, and instruct Dreamweaver to update the site. Sounds too good to be true, doesn't it? Dreamweaver stores library items in a Library folder within the local root for each site. However, for linked items, such as images, the library stores only a reference to the item. When you insert a library item in a page, Dreamweaver creates a link to it instead of inserting it, so the item is able to be updated later. Planning is the Key The time to begin the creation of library items is at the very beginning stages of site devel- opment. As you are working out the natty details, look at sketches of your pages, and decide what items are worth creating library items and/or templates, and what are not. It's a bit late in the process (after the site is designed) to think back and wish that you had converted this item or that into a library item or template. Think up-front… begin with the end in mind. From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 409 While the Files panel gives you access to your Web site and allows you to add, delete, and link files, quickly and efficiently, it doesn't help you in the actual placement of assets into the documents. That job is left to the Assets panel. The Assets panel holds all of the individual elements that make up your Web pages; they're the puzzle pieces that when properly assembled create awesome Web sites. The Assets panel includes a variety of elements that you store in a site, such as images, movie files, colors, and library elements. Using the Assets Panel Use the Assets Panel Click the Window menu, and then click Assets to display the Assets panel. Click the Site option to show all of the assets in your site, or click the Favorites option to show only the assets you set as a favorite. Click any of the following category buttons to display the assets you want: ◆ Images. Displays images in the GIF, JPEG, or PNG formats. ◆ Colors. Displays the colors that are used in pages and style sheets in your site. ◆ URL. Displays any external links in your current site documents. ◆ Flash. Displays files in any version of the Flash format. ◆ Shockwave. Displays files in any version of the Shockwave format. ◆ Movies. Displays files in QuickTime or MPEG format. ◆ Scripts. Displays JavaScript or VBScript files. ◆ Templates. Displays a list of all the templates in the site. ◆ Library. Displays a list of all library items (elements used in multiple pages). 3 2 1 1 3 2 From the Library of Wow! eBook ptg Once an asset is part of a Web site, you can insert it in another page using several different methods. You can drag the asset from the Assets panel directly into Design or Code view or click to place the insertion point where you want the asset and use the Insert button at the bottom of the Assets panel. 410 Chapter 17 Inserting an Asset Insert an Asset Open the Web page you want to insert an existing asset. Click in the document to add an insertion point. Click the Window menu, and then click Assets to display the Assets panel. Click the Site option to show all of the assets in your site, or click the Favorites option to show only the assets you set as favorites. Select the category that contains the asset you want to insert. IMPORTANT You cannot select the Templates category. Templates are applied to an entire document. Insert the asset using one of the following methods: ◆ Click the Insert button in the Assets panel. The asset appears at the insertion point. ◆ Click and drag the asset from the Assets panel directly into the active document. The asset appears where you release your mouse. 6 5 4 3 2 1 3 2 5 6 1 4 Did You Know? You can view an asset in the preview area. Open the Assets panel, select the category that contains the asset you want to view, and then select the asset. From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 411 The Assets panel does much more than let you look at assets of your site. As a matter of fact, it's a powerful tool to help you manage and edit all the elements that make up a Web site. You can use the Assets panel to edit an image, or even create a new image. Once an asset is edited, it will impact all Web pages that use that particular asset. For example, you use the Assets panel to reopen an image that's used on several Web pages, perform a bit of touchup, and then save the file. In response, all the pages that used that particular asset will update to reflect the changes. Now that's power. Working with Site Assets Modify an Asset Select the Window menu, and then click Assets to display the Assets panel. Select the category that contains the asset you want to edit. Double-click the asset you want to edit, or select the asset, and then click the Edit button. Dreamweaver launches the program required to edit the image (default application is Fireworks). Make changes to the image, save the file, and then close the edit program. The image is resaved with the changes, and all Web pages that utilize the image automatically reflect the changes when loaded. 4 3 2 1 1 2 3 Did You Know? You can select multiple items in the Assets panel. Open the Assets panel, select an asset, and then use Shift- click to select a consecutive series of assets, or use Ctrl-click (Win) or A- click (Mac) to include or exclude indi- vidual assets in the selection. From the Library of Wow! eBook . button. Use the following options to create the snippet: ◆ Name. Enter a name for the snippet. ◆ Description. Enter a description of the snippet. ◆ Snippet Type. Select the Wrap Selection. templates. A library is a Dreamweaver file that contains individual assets or copies of assets, while a template is a Dreamweaver file that contains editable regions. The assets in a library. hundreds of pages that contain images, and descriptions of your products. However, they're not the only things on those pages; you've got a header, footer, navigation, back- ground image