or area of functionality. As you can see from Figure 3.63, Dreamweaver includes numerous code snippets you can use. Figure 3.63. Code snippets are organized into folders specific to the respective technology. Dreamweaver includes prebuilt snippets you can use.   Notice that the Snippets panel is organized into two halves. The top half includes a preview of the code snippet selected from the categorized list of snippets in the bottom half. HTML snippets are usually shown in Design view (showing what the HTML looks like in the browser), whereas JavaScript and other code snippets are shown in Code view (so that you can see the actual code). Inserting a snippet is merely a matter of selecting the appropriate snippet and either dragging it into the code environment or clicking the Insert button located in the bottom left of the Snippets panel. Creating your own snippet is just as easy but slightly more involved. To create your own snippet, follow these steps: 1. Create a new folder for your snippet by right-clicking in the Snippets window and choosing New Folder. Give the snippet folder a descriptive name, remembering that other developers might want to use these snippets, too. If the folder is created in the "wrong" place, you can drag it to the level you want. I'll call my new folder Table Row Rollover. 2. Right-click the folder and choose New Snippet from the context menu. If you have already written the snippet code in the page, highlight the code you want to use as the snippet, right-click the highlighted code, and choose Create New Snippet from the context menu. 3. You are presented with the Snippet dialog. Fill in the snippet name and description. If you have highlighted existing code, the code box is already filled in. I'll add the following HTML code to the Insert Before text box:   <table> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Home</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">HelpDesk</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Company Directory</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Employee Store</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Admin</a></td> </tr> </table>   This code effectively creates a new table, complete with rows; when the user's mouse rolls over the rows, the background color changes to a gray color. 4. If you want the code to flow around a selected object, such as an image or table cell, select the Wrap Selection option, specifying which part of the code goes before the object and which after the object. If the code is a standalone