DreamweaverMX Tutorials

2. Workspace

2.4 Document Window

Most of your work takes place in the Document Window; you can insert, modify, and delete elements that make up your Web pages.

Document Toolbar buttons allow you to switch between Code view, Split view, and Design view. When you are in Design View, Dreamweaver displays an approximate view of what your page will look like in a browser.

Document Toolbar buttons also allow you to modify title and status; to preview in browser. Buttons that have a small downward-pointing arrow, such as View Options, display a drop-down menu when clicked.

The name of the file appears in the title bar, displayed in parentheses after the title of the document. By default, this page is initially called "Untitled Document." An asterisk indicates that the file has unsaved changes.

The toolbar is fixed to the document window on the Macintosh; it is movable in Windows.

document tool bar Macintosh

document tool bar Windows

The Tag Selector is located at the bottom left of the Document Window. It always starts from the <body> tag and hierarchically displays the HTML tags that can be used with the currently selected element. Clicking on a tag will cause DW to highlight that part of the code, regardless of view.

document tool bar When in Design view, the bottom of the Document Window (status bar) contains information about download time (far right) and window size (near right). Each will pop up a menu when clicked.

this lesson

  1. Mouse over the Document Toolbar buttons to see their functions
  2. Toggle between Code View, Split View and Design View
  3. Explore the drop-down menus associated with File Management, Preview in Browser, and View Options
  4. Resize the Document Window
    In Design view, click the Window Size pop-up menu (lower right corner of Document window).

    Create a new size by choosing Edit Sizes..., which will launch Dreamweaver's Preferences dialog box. Click in the space below 544 (width column) and type 400; in the height column, add 400 as well. In the Description column, enter Test Window Size. Click OK

    Confirm that your setting has been added to the menu. Choose 400x400 Test Window Size and see how Dreamweaver resizes the window.

    Change the window size to 800x600. Click OK.


Tip:
If you'd like to learn HTML, one way is to keep DW in Split View and study the code (HTML) as you work in Design View.
Valid HTML 4.01!
next previous PDF print home