THEPROOFINGSYSTEMS.COM

bat proof house - www.theproofingsystems.com

Menu


Figure 3.51. HTML tags contain attributes, attribute values, and generally wrap literal text or in some cases, other HTML elements such as


images.   The more intricate the structure and inclusion of tags and attributes, the more detailed the design can look within the browser. As an HTML/XHTML developer, you'll quickly realize that there are hundreds of HTML/XHTML tags, with each tag having dozens of attribute combinations. As a developer, it's extremely difficult to remember them all. Fortunately, Dreamweaver's code hints automate what we may want to add. Accessing code hints is as simple as switching to Code view in a new HTML page, placing your cursor in the <body> tag, and typing. For instance, if I type the < symbol (this symbol represents the beginning of an HTML tag), the code hints menu appears complete with every supported HTML tag (see Figure 3.52). Figure 3.52. The code hints menu appears complete with all possible HTML tags. [View full size image]   I can use the keyboard up and down arrow keys to cycle through the tags in the code hints menu. When I've found the tag I want to use, I press Enter to add it to the code. Pressing the spacebar opens the code hints menu again, but this time only the attributes for the selected tag appear (see Figure 3.53). (You could also just continue typing, and Dreamweaver auto searches and updates the code hints menu with the most appropriate tag based the letters you have entered.) When your tag is highlighted, press Enter. Figure 3.53. All attributes for a selected tag appear in the code hints menu. [View full size image]   Again, pressing Enter adds the selected attribute. Depending on the attribute you add, the code hints becomes more detailed. In my case, I choose the href attribute (creates the reference for the hyperlink) of the <a> (tag used for creating links) tag. The Browse code hint then appeared, allowing me to choose a file. After I add my file, I can use the right-arrow key to move to the next attribute and press the spacebar to repeat the process. When I finish formatting the tag, I need only add the > symbol to close out the opening tag. Finally, I'll add the < symbol to begin the closing tag followed by the / symbol, in which case the closing tag is added automatically for me by Dreamweaver. As I mentioned earlier, the more intricate the structure of your HTML/XHTML, the better your designs will lookthe possibilities are limited only by your needs. The Code View Toolbar For developers used to working with code in HomeSite, the Code View toolbar docked to the left side of the coding environment and shown in Figure 3.54 should look relatively familiar. Figure 3.54. The Code View toolbar provides quick access to commonly used commands for the Code view user. [View full size image]   The Code View toolbar provides quick access to commonly used commands for the Code view user, specifically: Open Documents: Click and hold this icon in the toolbar to display all currently open documents. Then choose a document from the list to focus the document in Code view. Collapse Full Tag: You can place your cursor onto an opening tag and then click this button to collapse the tag and everything within it. This button is discussed in more detail in the next section.