MYONLINEPROOFING.COM

digital color proofing - www.myonlineproofing.com

Menu


Instead, you can add it as a snippet for easier reference and use. To create a new snippet, follow these steps: 1. As an example,


I'll write a simple snippet that causes a table row to change color when the user's mouse rolls over the row:   <table width="125" border="0" cellspacing="0" cellpadding="0"> <tr onMouseOver="javascript:this.style.backgroundColor='Silver';" onMouseOut="javascript:this.style.backgroundColor='White';"> <td align="center"><a href="#">Hello World</a></td> </tr> </table>   The code added to the page resembles what is shown in Figure 2.38. Figure 2.38. Add some code to the page in Code view that we can later turn into a snippet. [View full size image] 2. Highlight the code, right-click to access the context menu, and choose Create New Snippet. 3. The Create New Snippet dialog appears, allowing you to give your snippet a name, description, type, and more. Fill in the blanks so that your dialog resembles the one shown in Figure 2.39. Figure 2.39. Give your new snippet a name, description, and associative type. [View full size image] 4. Click OK. The new snippet is added to the Snippets panel automatically. NOTE Snippets are added to the Snippets panel and are placed into the folder where your cursor was last positioned. You can reposition your snippet simply by dragging it into a new folder or creating a new folder altogether by selecting the New Snippet Folder icon located in the bottom-right corner of the Snippets panel.   Of course, you can use your new snippet by selecting it and dragging it to the Document window as often as you want. To view it in the browser, choose Preview In Browser or press F12. The Tag Inspector Panel Group The Tag Inspector panel group, which includes the Attributes and Behaviors panels, is a handy panel to use for setting various attributes of selected HTML tags and styles. Although the true benefits of this panel group become more obvious as the book unfolds, you can see the power of the Attributes panel immediately by placing your cursor in the code of your page and then expanding the nodes in the Attributes panel. As Figure 2.40 illustrates, various attributes and their values associated with a selected tag are outlined in the panel. Figure 2.40. The Attributes panel outlines attributes and their values for a selected tag. [View full size image]   You can begin to see that the Attributes panel mirrors functionality in the Properties Inspector. The obvious difference however is that the Attributes panel is a more simplistic and less visual approach to the attributes of a specific tag. You can also switch between a categorized and list view by clicking the appropriate button located just under the tab itself. You can make the Tag Inspector panel group visible and hidden by selecting the Tag Inspector option from the Window menu or by pressing the F9 shortcut key. The Results Window