Exploring the New Dreamweaver MX 2004 Interface - dummies

By Damon Dean, Andy Cowitt, Ellen Finkelstein, Doug Sahlin, Camille McCue

With Dreamweaver MX, Macromedia integrated ColdFusion and HomeSite into one single, powerful interface, though you had the choice of working with that new interface or with the old Dreamweaver 4 interface (or, in Macromedia parlance, workspace). With Dreamweaver MX 2004, Macromedia dropped the Dreamweaver 4 workspace and enables you to choose from only two versions of the Dreamweaver workspace: Designer style and HomeSite/Coder-Style.

Selecting a workspace on start-up

When you start Dreamweaver for the first time, you’re asked to choose the way you want your workspace set up. You have two options:

  • Designer: The WYSIWYG (What You See Is What You Get) interface, which shows the page you are working on much like it would be in a Web browser. This style is more appropriate for Web design novices working on basic HTML pages.
  • HomeSite/Coder-Style: The style that shows the page you are working on as an editable text document, which is appropriate for experienced coders and for pages on which you’re editing ColdFusion Markup Language (CFML) or other dynamic code.

Introducing the new Start page

After you’ve selected a workspace, when you launch Dreamweaver by double-clicking its icon on the desktop or by selecting it from the Windows Start menu, you’ll see something new to Dreamweaver: a Start page. The Start page allows you to perform the following tasks with a single click of your mouse:

  • Open pages you’ve recently edited: Simply click the file name of the page you want to open.
  • Create a new page in one of seven formats: Simply click the type of page you want to create, from basic HTML to ColdFusion (CFML) to CSS (Cascading Style Sheet).
  • Create a new Dreamweaver Site: Click the Dreamweaver Site icon (in the Create New column) to open the Site Definition wizard, which guides you through the process of setting up the directory location, FTP information, server technology (if applicable), and more for your Web site.
  • Create a new page based on Dreamweaver’s built-in samples: Click an option in the Create from Samples column to open the New Document dialog box and choose from the preset formatting options for that type of page.

The Start page also gives you fast access to a quick tour and set of tutorials for Dreamweaver, and to Macromedia’s Dreamweaver Exchange page, where you can find lots of nifty widgets that extend Dreamweaver capabilities.

If you find the Start page incompatible with your working methods, you can prevent it from appearing in the future by selecting the Don’t Show Again check box at the lower-left corner of the page.

Introducing the Document Window

Your primary workspace in Dreamweaver is the Document window, which appears automatically when you open a page in Dreamweaver. In the Document window, you construct your individual Web pages using panels and dialog boxes to format your work. The three primary views in Dreamweaver are as follows:

  • Design view: The graphical view of your document. You can select this view by choosing View –> Design.
  • Code view: This view shows the underlying code of your document. You can select this view by choosing View->Code.
  • Split view: As you may expect, this is a split screen view that includes both the Code and Design windows. You can select this view by choosing View –> Code and Design.

You can toggle between these views easily at any time by clicking their corresponding buttons at the top left of the Document window.

When you have several documents open in a site, you can select which document you want to work on by clicking the document’s name at the top of the Dreamweaver Document window. You can also click the Site tab in the Files panel to work on an entire site.

The Insert bar sits directly underneath Dreamweaver’s main menu. It gives you quick access to eight sets of buttons you can use to insert everything from tables to Flash movies to form elements in your page. To select one of the eight categories, click the Insert bar’s name (Common, Layout, and so on) and choose a new category from the drop-down list.