ptg 17 17 399 Using Code Snippets and Libraries Introduction The Snippets panel is a collection of Scripts (called Snippets) that you can drop into your Web pages. Essentially, a snippet is a pre-built selection of code. The Snippets panel in turn acts like a code library, with sections or folders for different snippets. There are ten major folders, and some folders have subfolders to organize content. Each folder has a small triangle, located to the right of the folder name. Clicking this icon expands or contracts the fold- ers contents, revealing either more folders or snippets of code. For example, expanding the JavaScript folder reveals 16 more sub-folders, jam-packed with cool features to add to your Web site. There are thousands of JavaScript codes that can be executed within a Web browser, so Dreamweaver cat- egorized JavaScript into sub-folders to help you better under- stand where to find the code you need. You will find a group of scripts for managing and controlling Browser functions, cookies, readable functions and a whole host of additional tools. All said and told, the JavaScript folder alone has over 80 individual snippets. Most well designed Web sites have areas that are repeated from page to page. These would include header areas, navigation bars, information boxes, footers, etc. Occasionally, changes need to be made in these areas. There are wonderfully easy-to-use components in Dreamweaver to make those changes appear on multiple pages when the change is made at one location. Dreamweaver has two such components, Libraries and Templates. Library items are sec- tions of a Web page that can be used over and over again. Dreamweaver Templates are really large Library items. In this chapter, you'll learn how to work with and add snippets to your Web pages, as well as modify and edit them. In addition, you'll learn how Library items can streamline your workflow in the creation of a complex Web site. What You’ll Do Introduce Snippets Insert a Snippet Edit Existing Snippets Create Snippets Introduce Assets and Libraries Use the Assets Panel Insert an Asset Work with Site Assets Work with Color and URL Assets Work with Favorite Assets Create and Insert Library Items Edit Library Items Work with Library Items Create an External JavaScript Library Insert and Edit an External JavaScript Use Server-Side Includes From the Library of Wow! eBook ptg 400 Chapter 17 Introducing Snippets If you build a complex Web site, it's almost a certainty that you will use design elements over and over again. However each time you need them you either have to recall a particu- lar command, or more likely copy and paste the code containing the content you want to reuse. Knowing that is not the most efficient way to work, Dreamweaver created a solution that most people don't know about called Code Snippets. Similar in philosophy to Microsoft's macros or Adobe's actions, snippets are a incredible way to automate some of your repetitive tasks and make your job easier. They are composed of bits of code and/or content that you can save, edit, use, and reuse as often as you want on any Web site you happen to be working on. Dreamweaver snippets allow you to save and reuse chunks of code over and over. This saves time and effort in maintaining a large Web site. Plus Dreamweaver has a lot of pre- written snippets to use. Use snippets to store things like headers and footers, logos, and scripts. Snippets offer a simple and convenient method of creating fragments of reusable code. Snippets can be a single line or a con- siderable sized chunk of code such as HTML, XHTML, CSS, CFML, PHP, JavaScript and other types of code. Since they are reusable, snippets save you hours of time because you don't have to recreate the same code over and over. You have the ability to create snip- pets in Dreamweaver, or in another applica- tion, and bring them into the Snippets panel, use the pre-designed snippets supplied by Dreamweaver, or use snippets created by other designers. Snippet Example The following is an example of snippet code, written in JavaScript that checks for the cur- rent location of the mouse. /* Example: function test() { if (document.layers) getMouseLoc; //NS else if (document.all) getMouseLoc(); //IE alert(mouseLocation.x+","+mouseLocation.y); } in the BODY: <a href="#" onMouseOver="test()">test</a> */ function Point(x,y) { this.x = x; this.y = y; } mouseLocation = new Point(-500,-500); function getMouseLoc(e) { if(!document.all) //NS { mouseLocation.x = e.pageX; mouseLocation.y = e.pageY; } else //IE { mouseLocation.x = event.x + document.body.scrollLeft; mouseLocation.y = event.y + document.body.scrollTop; } return true; } //NS init: if(document.layers){ document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = getMouseLoc; } From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 401 Information on the current location of the mouse can be used to trigger a variety of actions. For example, when the user hovers over an image, a dialog box could appear to describe the image. Block and Wrap Dreamweaver employs two types of snippets: a wrap snippet and a block snippet. Wrap snippets will insert code above and below any selected content on the page. Block snippets, by contrast, simply drop in the snippet con- tent after the insertion point on the page. To us e a bl ock sn ip pe t, pla ce a n in se rt io n point inside an open document, select the snippet from the Snippets panel, and then click the Insert button at the bottom of the panel. You can also drag and drop the snippet from the panel into an open document, as you would an image or any other media file. To us e a wr ap sni ppe t , sel e ct th e co nt en t in Design view that the snippet will wrap around, select the snippet in the Snippets panel, and then click the Insert button at the bottom of the panel. Summary Snippets are a great way to reduce the time spent reproducing repetitive tasks. They're easy to use and apply to the documents. However, they do require some experience in writing code in languages such as: HTML, XHTML, CSS, CFML, PHP and JavaScript. While it's not the purpose of the chapter to teach you how to write snippet code, there are a lot of Web sites out there that offer free (and for cash) snippets, which you can down- load and use in the construction of your Web sites. Some of these sites include: http://www.assonetriver.com/snippets/ http://www.luckychair.com/downloads.html http://www.programmersheaven.com/search/ LinkDetail.asp?Typ=1&ID=13270 As a matter of fact, simply do a Web search using the words "free" and "snippets" and sort through the hundreds of hits. One word of caution: not all snippets are created equal, and may contain code that is not com- patible with every browser, so checking and testing is the rule of the day, when it comes to downloading snippets. In addition, some sites might use the downloading of a snippet to also download a virus onto your computer, so know the sites that you're using to down- loading the snippets. From the Library of Wow! eBook ptg 402 Chapter 17 Inserting a Snippet Add a Block Snippet Open the document you want to insert the block snippet. Click the Window menu, and then click Snippets to display the Snippets panel. TIMESAVER Press Shift+F9 to display the Snippets panel. Click in the page where you want to insert the snippet. Click the Plus (+) icon next to the folder in the Snippets panel with the snippet you want to insert (in this example, click the (+) next to the Footers folder). Select the snippet you want to insert. Click the Insert button in the Snippets panel. TIMESAVER You can also drag a snippet from the Snippets panel directly into the document at the insertion point of the cursor, or double-click the snippet in the Snippets panel. 6 5 4 3 2 1 As mentioned in the previous section, you can apply (add) a snippet to a Dreamweaver document in one of two ways: block or wrap. The blocking method requires that you click to create an insertion point in the document and then add the snippet; the wrapping method requires that you select (in Design mode) the selection of the page that you want to wrap the code around. Both methods have their advantages; for example, you could use the block method to insert a snippet into the HTML code that would pre-load rollover images, or you could use the wrap method to select a section of text, or an image, that turns the selection into a link, but is masked from appearing in the status window of the browser. Although Dreamweaver contains many pre-designed snippets, they may require a bit of editing before use. 6 2 3 5 Snippets panel 4 1 From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 403 Add a Wrap Snippet Open the document you want to insert the Wrap snippet. Click the Window menu, and then click Snippets to display the Snippets panel. Select the text in Design view that you want to apply this snippet. Click the Plus (+) or Minus (-) icon next to the folder to display the snippet you want to insert from the Snippets panel (in this example, click the (+) next to the Text folder). Select the snippet you want to insert (in this example, click Service Mark). Click the Insert button in the Snippets panel to wrap the snippet around the selected text. NOTE The snippet will have to be edited to include the proper URL. 6 5 4 3 2 1 3 2 4 5 1 6 Service Mark Did You Know? You can insert a recent snippet. Click the Insert menu, point to Recent Snippet, and then select the recently used snippet you want. You can add or edit a keyboard short- cut for a snippet. Open the Snippets folder, right-click (Win) or control-click (Mac) in the Snippets panel, click Edit Keyboard Shortcuts, click the Commands list arrow, select Snippets (if necessary), select the snippet you want to change, enter a keyboard shortcut in the Press key box, and then click OK. From the Library of Wow! eBook ptg 404 Chapter 17 In Dreamweaver, you can use one of the many pre-designed snippets, one you developed yourself or others you downloaded from the Web. If any of these snippets is not exactly what you need, you can edit the snippet code directly in Dreamweaver. In addition to editing snippet code, you can also change snippet options, including name, descrip- tion, snippet type (either block or wrap), and preview type (either in Design or Code view). The blocking method requires that you click to create an insertion point in the document and then add the snippet; the wrapping method requires that you select (in Design view) the selec- tion of the page that you want to wrap the code around. Editing Existing Snippets Edit a Snippet Click the Window menu, and then click Snippets to display the Snippets panel. Click the Plus (+) or Minus (-) icon next to the folder to display the snippet you want to insert from the Snippets panel (in this example, click the (+) next to the Footers folder). Select the snippet that you need to edit (in this example, click Title and Hanging List). Click the Edit Snippet button in the Snippets panel. NOTE If you don't want to change the original snippet, simply make a copy of the snippet you want to change, and perform the edit to the copy. Edit the snippet using the following options: ◆ Name. Change the name for the snippet, if desired. ◆ Description. Change the description of this snippet, if desired. NOTE Name and Description appear in the Snippets panel. 5 4 3 2 1 4 1 2 3 From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 405 ◆ Snippet Type. Select the Wrap Selection option for the wrap type or the Insert Block option for the block type. ◆ Insert Code. Modify the code to fit the particular situation (in this example, the copyright date, and links were updated to reflect the current project). ◆ Preview Type. Select the Design or Code option to specify how you want to preview the snippet in the Document window. Click OK. 6 6 5 Did You Know? You can delete a code snippet or snip- pet folder. Open the Snippets folder, click the snippet folder or code snippet you want to remove, click the Remove button, and then click Yes. When you delete a folder, all the snippets in the folder are also deleted. You can share a snippet. Snippets are located in the Program Files (Win) or Applications (Mac) folder in the follow- ing subfolders: Adobe/Adobe Dreamweaver CS5/Configuration /Snippets/ snippet type name . You can copy and paste a snippet file into the same location to share it with others. From the Library of Wow! eBook . navigation bars, information boxes, footers, etc. Occasionally, changes need to be made in these areas. There are wonderfully easy-to-use components in Dreamweaver to make those changes appear on. the follow- ing subfolders: Adobe/ Adobe Dreamweaver CS5/ Configuration /Snippets/ snippet type name . You can copy and paste a snippet file into the same location to share it with others insert code above and below any selected content on the page. Block snippets, by contrast, simply drop in the snippet con- tent after the insertion point on the page. To us e a bl ock sn ip pe