FREEONLINEPROOFINGSITE.COM

proofing copy - www.freeonlineproofingsite.com

Menu


better, allows you to quickly modify them without ever switching to Code view. To see the Tag Selector in action, simply follow these steps: 1.


Make sure that you are in Design view and quickly insert a new table by choosing Insert, Table. When the Table dialog appears, modify some of the values and click OK. (Right now, it's not important what you specify in the dialog's text boxes.) 2. With the table now in Design view, place your cursor in a cell and observe the Tag Selector. As you can see from Figure 2.17, the Tag Selector displays the hierarchical list of tags with the tag your cursor is currently in highlighted. Figure 2.17. The Tag Selector displays a hierarchal list of tags, even highlighting the tag that your cursor is currently in. [View full size image] You can even use the context menu (right-click a tag in the Tag Selector) for complete control over the selected tag, including access to the following options: Remove Tag: Removes the selected tag. Quick Tag Editor: Allows you to edit attributes within a tag. Set Class: Allows you to set a CSS class for a tag. Set ID: Allows you to set a CSS ID for a tag. Collapse Full Tag: Collapses the tag in Code view. Collapse Outside Full Tag: Collapses the parent tag of the currently highlighted tag. For instance, if my cursor is in a table cell, selecting this option collapses the <body> tag because the existing <table> tag is nested within it. As an example of how to use the context menu on a tag, I'll quickly right-click the <table> tag and choose the Quick Tag Editor option. As you can see from Figure 2.18, the Quick Tag Editor appears, with the tag and attributes for the tag pre-populated. Figure 2.18. The Quick Tag editor allows you to quickly preview the structure of a tag and make quick edits. [View full size image]   Next, I'll add the bgcolor="red" attribute and value and press Enter. The table's background color in the Document window now has a red background. Zoom Tools Just to the right of the Tag Selector hierarchy is a new set of tools included with Dreamweaver 8 that allow you to zoom in and out of the Document window. Also shown in Figure 2.19, the zoom toolset includes a pointer icon, a hand tool for moving the page around within the Document window when zoomed in, a magnifying glass for zooming into the page (hold down the Alt key to zoom out), and a zoom percentage menu that allows you to quickly zoom into a specific value. Figure 2.19. Use the zoom toolset to zoom in and out of the Document window.   Window Size and Download Time You can use the Window Size option, located in the bottom right corner of the Document window to set the Document window's width and height while in development mode to design your pages based on a target browser resolution. For instance, latest browser studies have shown that as long as you develop for 800x600 browser resolutions, at least 95% of your viewers will be able to see your page without scrolling horizontally. Because this is the case, you can set up your development environment to keep this size in mind. To change your development window to accommodate 800x600 screen resolutions, simply follow these steps: 1. Select the Restore Down option located in the top-right corner of the Document window.