Quick Reference of Dreamweaver CS5 View Menu Commands

Here’s a quick reference to every command in the Dreamweaver CS5 View menu—and the answer to the occasional “What does that mean?” mystery.

The View menu controls the document window’s appearance. A checkmark in the menu lets you know which view you’re in:

Zoom In. Zooms in on the document in 50% increments. If you’re looking at a document at normal size (100%), selecting this option zooms in to 150%; selecting it again zooms in to 200%.
Zoom Out. Zooms out the current document in 50% increments.
Magnification. Lets you choose from a list of magnification levels from the absurdly small and illegible 6% all the way to the ridiculously large, land-of-the-giant-pixels 6,400%.
Fit Selection, Fit All, Fit Width. Additional magnification options that zoom in or out, depending on the size of the document or selected element.
Code. Displays the file’s source code.
Design. Displays the file’s visual design.
Code and Design. Splits the document window into two panes: source code on the left (or top), visual design at the right (or bottom). You can adjust where the split panes appear, and adjust how much of each pane you see by dragging the center divider left or right or up or down.
Split Vertically. When you’re in Code and Design view, this options displays the code and design views side by side…great for really wide monitors. Unselecting this option displays the code and design views one on top of the other—unless you have an unusually tall monitor, this option doesn’t let you see much of either the code or design view.
Design View on Left/Top. When you’re in Code and Design view, this option dictates where Dreamweaver puts the Design view pane relative to the Code view pane. If you’ve selected Split Vertically, you can display the Design view either to the right or the left of the Code view; when you stack Code and Design views on top of each other, you can place the Design view either above or below the Code view.
Switch Views. Switches between Code and Design views.
Refresh Design View. Updates the Design view to reflect changes you make directly to the source code in either Code view or Split (“Code and Design”) view.
Live View. Displays a web page as it would appear in a web browser (actually, as it would appear in Apple’s Safari browser). You can preview Javascript, Flash movies, and other interactive page features in this view.
Live View Options. Lets you control the display of Live View. You can pause Javascript—a useful way to see the HTML that Javascript creates on the fly—disable Javascript, turn off plug-ins, and control settings that affect how Dreamweaver displays the page in Live View.
Live View Browser. Dreamweaver CS5 adds the ability to navigate while you’re in Live View. Click a link on a page in Live View and it takes you to another page (but only if you’ve turned on that feature in the Live View Options menu). The Live View Browser lets you control the navigation just as you would in a web browser (page backward or forward, for example), view recent pages, and open the currently visited page in a new tab so you can edit it.
Live Code. In Live View, choose this option to display the HTML as it appears to a web browser— this is only useful for pages that include Javascript that can dynamically change the HTML of a page by adding classes to tags and even inserting or removing entire chunks of HTML. This feature is a good way to make sure the Javascript code you write does what you want it to do to the HTML of a page.
Inspect. New in Dreamweaver CS5, this option lets you inspect the CSS of page elements in Live View. This feature is a great way to inspect CSS in dynamically generated server-side pages (such as PHP pages), which you often can’t see in Design View.
Head Content. Opens a new menu bar in the main document window that contains shortcuts to the head section of an HTML page. You can use these menu items to highlight your document’s title tags, meta tags, and scripts, and then, in the Property inspector, edit their content.
Noscript Content. When you insert Javascript code into the document window, you can include what’re called <noscript> tags—information that appears in browsers that don’t understand Javascript (of which there are very few), or which have their Javascript turned off. After selecting this option, all information inside <noscript> tags appears in the document window. To hide this information, select this menu option again.
Table Mode. Lets you switch between the standard Table view, Expanded Tables view, and something called Layout Table view. Layout Table view is a holdover from earlier versions of Dreamweaver designed to make creating table-based layouts easier, but more often creating hard-to-edit HTML. Layout Table view used to appear front and center in the program, but the Adobe engineers have hidden it away in this menu, so that those who used the tool in the past can continue to use it. But don’t be tempted to! CSS is a far superior way to lay out web pages.
Visual Aids. Lets you summon onscreen symbols that represent typically invisible page elements, like image maps, anchors, and the borders of a <div> tag.
Style Rendering. Lets you hide or show the effects of all style sheets on a page, or selectively display the formatting changes caused by a style sheet applied for a particular type of media—screens only, for example, or printers only.
Code View Options. Lets you adjust the way your HTML appears in Code view. You can turn on (or off) options that wrap lines of text to fit in the document window, add line numbers, highlight invalid HTML, turn on syntax coloring, or indent lines of code.
Rulers. When you choose Show, Dreamweaver displays rulers along the top and left sides of the document window. Using the options you find here, you can choose your ruler units: pixels, inches, or centimeters. You can also reset the orientation of the two rulers so that both start from zero in the screen’s upper-left corner.
Grid. Places a grid of vertical and horizontal lines over the document window to use as a guide as you build your layouts. Selecting Edit Grid opens the Grid Setting dialog box, where you can adjust the grid’s colors, spacing, behaviors, and line appearance.
Guides. Shows, hides, locks, and erases guidelines you drag from a ruler onto the current page. Also controls options for guides, and displays guidelines that mark the visible area of a browser window for monitors of different resolutions.
Tracing Image. Adjusts the document’s background tracing image. You can load a new tracing image, make a current one visible, or adjust its position.
Plugins. Lets you “play” browser plug-ins within the document window to test embedded media. You can choose to play a document’s plug-ins one at a time or all at once, to simulate how the page will look to your viewers.
Display External Files. You can insert images and other files from your own or other websites on the Internet. When you insert an image from another site, you can type in or paste an absolute URL. Dreamweaver even displays the image in Design view, but only if you check this option. Because this feature requires an Internet connection to display the image, pages with links to external files may take longer to display in Dreamweaver (since it has to get the images and files over the Web). If you have lots of external images and files and your pages open sluggishly in Dreamweaver, uncheck this option.
Color Icons. Dreamweaver’s interface underwent an overhaul in CS4—the once bright icons were made hip, dull, and gray. They’re still hip, dull, and gray in CS5. If you you’d rather have the colorful icons from Dreamweaver CS3, turn this option on.
Hide Panels (Show Panels). Hides all open panels. If you’ve already hidden the panels, the command says Show Panels instead, and restores the panels to their original positions.
Toolbars. Displays toolbars for use with Dreamweaver. Select Document from the submenu to display the Document toolbar at the top of the document window. It displays the current page’s title and offers common commands, like display options, file management options, code navigation options, and browser previews. The Standard toolbar displays common buttons for common commands, such as opening files; closing files; and cutting, copying, and pasting content. The Style Rendering toolbar lets you toggle style sheets off and on, like the Style Rendering menu described earlier in this section. The Coding toolbar appears along the left edge of Code view and provides options for working with HTML, Javascript, CSS and PHP code, such as wrapping code in comments, indenting code, and more. Finally, the Browser Navigation toolbar (new in Dreamweaver CS5) lets you navigate from page to page in a site while you’re in Live View.
Related Files. Lists all external CSS, Javascript, and server-side programming files the current web page uses. Select one and you’ll see the code for that file. Better yet, just use the Related Files toolbar that appears in the document window—it’s much faster.
Related Files Options. Lets you filter the files displayed in the Related Files toolbar. For example, you can hide all server-side includes, display just external CSS files, or create a custom filter to show files that match a certain pattern (like all PHP files that include DB in the file name). You’ll find filters most useful for really complicated server-side programs (like WordPress, Joomla, or Drupal) that often overwhelm the Related Files toolbar with dozens of included PHP files.
Code Navigator. Pops open the Code Navigator window so you can scan all CSS rules that apply to the current HTML element.
Show Spry Tooltips. Shows or hides Spry tooltips when you work on a web page in Design view.

Cover of Dreamweaver CS5: The Missing Manual

Learn more about this topic from Dreamweaver CS5: The Missing Manual.

This Missing Manual helps you quickly and painlessly master the latest version of this industry-standard web design and management program. Perfect for beginners who need step-by-step guidance and for longtime Dreamweaver masters who need a handy reference, the 7th edition of this bestselling Missing Manual offers jargon-free language and clear descriptions for designing, organizing, building, and deploying websites. It's the ultimate atlas for Dreamweaver CS5.