Web pages are composed in the Dreamweaver Document window , which can be viewed in several modes:
Code view (View Code) allows you to edit HTML source code directly.
Design view (View Design) is Dreamweaver's WYSIWYG mode.
Code and Design view (View Code and Design), shown in Figure 1-1, shows the Code and Design panes simultaneously . Resize the two panes by dragging the horizontal line that separates them. Use the View Design View on Top option to reverse the location of the panes.
Figure 1-1. Code and Design view
You can switch view modes using the View Switch Views command, Ctrl+Tab (Windows), or Opt+Tab (Macintosh). While in Code and Design view, the Switch Views command moves the cursor into the other pane; otherwise , it toggles between Code view and Design view.
Text can be typed directly into the Design pane. Dreamweaver automatically creates the necessary HTML when you insert objects using, say, the Objects panel. Edits performed in the Design pane are reflected immediately in the Code pane.
You can hand-edit the HTML code directly in the Code pane, but the visible results, if any, won't appear in the Design pane until it is refreshed. The Design pane refreshes automatically when switching from Code view to Design view, but not when switching from Code view to Code and Design view.
| || |
After hand-editing HTML, use View Refresh Design View, F5, Ctrl+Space (Windows), or Cmd+Space (Mac) to reevaluate the HTML in the Code pane and refresh the Design pane.
You can configure the following Code pane options under View Code View Options:
- Word Wrap
Turn on this option to wrap long lines of HTML code (this option does not affect text in the Design pane).
- Line Numbers
This option provides line numbers for easier debugging.
- Highlight Invalid HTML
This option helps to avoid hand-coding errors by highlighting unsupported and unmatched tags in yellow. Reevaluate the HTML in the Code pane by using the shortcuts in the preceding tip. The Design pane always highlights errors.
- Syntax Coloring
This option highlights HTML tags and body text according to the settings under Edit Preferences Code Colors.
- Auto Indent
This option indents text automatically according to the settings under Edit Preferences Code Format.
While in Code view, some menu options that are ordinarily available in Design view are inactive. You can use some menu options, such as those under the Insert menu in Code view. Use caution, however, because they'll insert HTML wherever your cursor is, which may put the HTML in an invalid place, such as outside the <html> tags.
The Document window has a convenient Toolbar with icons for commonly used operations. Use View Toolbar, Ctrl+Shift+T (Windows), or Cmd+Shift+T (Mac) to ensure that the Toolbar is visible. The Toolbar, which changes according to the type and contents of your document, lets you switch among view modes and access other common functions as indicated in Figure 1-2.
Figure 1-2. Toolbar buttons
1.1.2 Status Bar
The status bar at the bottom of the Document window, as shown in Figure 1-3, contains the Tag Selector, Window Size pop-up menu, and the Mini-launcher bar. It also shows the current document's size and estimated download time. The status bar can be configured under Edit Preferences Status Bar or by clicking the Edit Sizes option in the Window Size selector as described in Chapter 18.
Figure 1-3. The status bar
- Tag Selector
The Tag Selector is visible only in Design view or when the Design pane is active in Code and Design view. It displays the HTML tags that control the currently selected item. The tag of the exact selection is shown in bold, and you can change the selection by clicking the other tags that appear in the Tag Selector. See Section 7.1.5 in Chapter 7.
- Window Size pop-up menu (Design view only)
- Document size and estimated download time
The document size shown in the Status bar is the size of the HTML page plus the size of any images or media files used in the document. The download time estimate is based on a 28.8 Kbps connection, but the target connection speed can be configured under Edit Preferences Status Bar. Most users have a 56 Kbps connection, but a more limited number have faster connections (ISDN, DSL, cable, satellite, and T1).
The Mini-launcher is a much more compact and convenient version of the Launcher bar, discussed later in this chapter.