FREEONLINEPROOFINGSITE.COM

print proofing - www.freeonlineproofingsite.com

Menu


Figure 2.12. The Refresh Design View option allows you to make changes to the code and then display them in the designer when you're ready. [View


full size image]   NOTE At first glance, the Refresh Design View feature might not make a whole lot of sense. To understand why this is even a feature is to understand how HTML works. Because HTML requires open and close tags and even nested tags in between, it would be nearly impossible for Dreamweaver to render HTML in the designer before you've actually completed working with the tag's structure. For this reason, Dreamweaver lets you complete your tag and then allows you to refresh the designer to view the changes.   View Options You can use the View Options menu to configure viewing preferences within your page. Depending on which view you're currently in (Code, Split, or Design), the View Options menu tailors itself accordingly. If you're in Code view, the View Options menu displays the options shown in Figure 2.13. Figure 2.13. The View Options menu in Code view. [View full size image]   The View Options menu in Code view supports the following options: Word Wrap: When this option is checked, code wraps to the next line when it reaches the end of the development window. Line Numbers: When this option is checked, line numbers appear in the leftmost gutter (highlighted in blue). Hidden Characters: When this option is selected, line breaks, similar to those in a word processor, are displayed within the code. It's important to note however, that even when these hidden characters are visible in Code view, they are still not shown in the browser. Highlight Invalid Code: When this option is checked, all invalid code is highlighted in yellow. Syntax Coloring: Checking this option enables various colors to be associated with different tags. You can configure these colors in the Preferences dialog, as described in Chapter 5, "Defining Preferences." Auto Indent: Checking this option automatically causes child tags to indent under the parent tags. For example, with this option enabled, the <td> and <tr> tags are shown indented under the parent <table> tag. If you're in Design view, the View Options menu displays the options shown in Figure 2.14. Head Content: When this option is selected, the Head Content menu appears just below the Document toolbar. The Head content menu, discussed later in this chapter, allows you to add and customize <head> tag-specific items such as the title, scripts, styles, meta tags, and so on. Rulers: When this option is selected, rulers become visible on the page, making it easier to see the dimensions of the page in terms of pixels. Grid: Selecting this option displays a grid in the background of the page. This visual feature makes positioning elements easier for a developer. Guides: When rulers are visible, you can use this option to drag visual guides into the Document window. Similar to image editing and print publishing programs, guides are a handy feature that allow you to position elements on the page based on guide placement. Guides are a new addition to Dreamweaver 8. Tracing Image: Discussed with greater depth in Chapter 11, "Layers in Dreamweaver," a tracing image is merely a completed prototype added to the page as a background to aid in the positioning of elements in the designer. Figure 2.14. The View Options menu in Design view. [View full size image]