Dreamweaver MX (6.1) Macintosh and Windows

What's New and Different in Dreamweaver MX?

There are a number of new features in Dreamweaver MX including an updated Insert window and improved capabilities for using Cascading Style Sheets. To get you started here is a list of some of the new features.

If you have questions about using Dreamweaver MX that are not answered here, please call the HelpDesk at x3333.

General Information

• Upgrading to Dreamweaver MX
• Dreamweaver MX is a native OS X application
• Change in preferred screen resolution
• Creating a New Document

Changes in Menus, Palettes and Windows

• Macintosh Insert window is now at the top of the screen
• New Tabs are available on the Insert window
• Items are in a different order on the Common tab of the Insert window
• Insert Anchor is now on the Common tab of the Insert window
• Windows screen layout options
• New View options for document window
• Preview in Browser button is available at the top of the document window
• Site Management Wizard

Changes in Design Options

• Color Palette has expanded
• Jusitifed Text button is now available
• Document Title field is available at the top of the document window
• Bold and Italic have new tags
• Cascading Style Sheets tools improved
• Site Management Wizard

Changes for HTML coders

• New Code and Code & Design View options
• Bold and Italic have new tags
• Cascading Style Sheets tools improved
• Code Reference is now available
• Tag Chooser button on Common tab of Insert window
• Print Code option is now available
• Find and Replace can change HTML tag attributes
• Snippets of HTML can now be saved and reused

Upgrading to Dreamweaver MX

Windows Installation Instructions
Macintosh Installation Instructions

Dreamweaver MX will run natively in OS X

Unlike Dreamweaver 3 (which runs in Classic Mode in OS X) Dreamweaver MX is a Native OS X application.

 

Change in preferred screen resolution

Dreamweaver MX will be easier to work with if you change your screen resolution to 1024x768 instead of 800x600.

 

Creating a New Document

1. Choose File > New
2. A New Document window will appear
3. Choose Basic Page from the left menu of options and select HTML from the right list of options
4. Click Create

 

New Insert window and Insert Menu Options

Macintosh Insert window is now at the top of the screen

On the Macintosh, the Insert window has been moved from the left to the top of the screen. Each of the tabs can be easily selected for browsing buttons. The Palette is floating (so it can be moved anywhere on the screen) and can be resized as needed by dragging the bottom-left corner.

New tabs are availabe including Text, Tables and Media

The Insert window has been expanded to include a number of new options. On the Text tab you will find (among others) buttons for Bold, Italics, Blockquote, and Lists. A new Media tab has buttons to insert Flash, Director and QuickTime movies. To find out what each new button is for, hover over it with your mouse for a pop-up label.

All of the tab options are also available under the Insert menu. For Text tab items choose Insert > Text Objects.

Note: On a PC, to get to the different tabs on the Insert window, click on the drop-down menu at the top of the palette.

Items are in a different order on Common tab

The buttons have been rearranged on the Common tab of the Insert window. To find out what each button is for, hover over it with your mouse for a pop-up label.

Insert Anchor is now on the Common Insert window

The Insert Named Anchor button has been moved to the Common tab of the Insert window for easier access.

 

Windows Screen Layout Options

In the Windows version of Dreamweaver MX you will have two workspaces available to you - Dreamweaver 4 and Dreamweaver MX.

The Dreamweaver 4 workspace has a similar look and feel to Dreamweaver 3 including the floating Palettes.

You will be asked when you install to choose your workspace and we suggest that you select the Dreamweaver 4 option. You can change this in the Dreamweaver preferences at any time.

1. From the Edit menu choose Preferences
2. In the Preferences window that appears, choose General in the list of options on the left and click on the Change Workspace button.
3. In the window that appears, select the workspace you want and click OK.
4. Click OK to close the Dreameaver Preferences window.

 

New View Options

You can now choose between three different views in the main document window: Code, Code and Design, or Design. To do this, select one of the first 3 options from the View menu or

click on one of the View buttons at the top of the document window.

Code View

Displays HTML only in the main document window.

Code and Design View

The main document window splits displaying HTML at the top and WYSIWYG at the bottom. You can adjust the split by dragging the the horizontal separation between the two up or down. You can refresh the design view to show changes by clicking in the design view portion of the window or by clicking on the Refresh Design View button at the top of the document window.

Design View

Displays WYSIWYG only in the main window.

 

Preview in Browser button

You can still preview your page in a browser by using the F12 key on your keyboard and by choosing File > Preview in Browser.

There is also a new Preview in Browser button at the top of the document window as well.

 

Site Management Wizard

For anyone setting up site definitions, Dreamweaver MX offers a Site Management Wizard which will appear when you choose Site > New Site.

To bring up the Dreamweaver 3 style site definition window, click on the Advanced tab.

 

Color Box (for font color, background color, etc) has been updated

Dreamweaver MX offers a new color box. You can still choose colors with the eye-dropper as you could in Dreamweaver 3, but the new color box offers expanded options.

Click on the color button at the top of the color window to select any color from a variety of color pickers including RGB, HTML and CMYK.

 

Justified Text has been added

You can now easily justify your text so that both the left and right sides are aligned.

1. Select the text
2. Click on the Justify button in the Property Inspector.

 

Document Title is available at the top of the document window

Instead of choosing Modify > Page Properties to change the Document Title,

you can now enter it in the Title field at the top of the document window.

 

Bold and Italics have new tags

When you choose to make your text Bold or Italicized using the Property Inspector buttons or keystrokes in Dreamweaver MX it will insert two new HTML tags: <strong> and <em> instead of the older <b> and <i> tags.

If you would prefer that Dreamweaver MX use the old <b> and <i> tags by default you can change this in the Dreamweaver Preferences. Open the Dreameaver Preferences, choose General in the left column of options, uncheck the box for Use <strong> and <em> instead of <b> and <i> and click OK.

You can choose between these tags on a case by case basis by using the B, I S and em buttons in the new Text tab of the Insert window or by choosing Insert > Text Objects > Bold, Italic, Strong or Em.

 

Cascading Style Sheets tools improved

Dreamweaver MX will allow you to create, edit, attach and save external Cascading Style Sheets (CSS). It will also allow you to work with Internal CSS as Dreamweaver 3 did.

From the Window menu choose CSS Styles. Select either Apply Styles or Edit Styles. Buttons for Attaching Styles and creating New Styles can be found at the bottom of the CSS Styles Palette.

 

Code Reference is now available

Dreamweaver MX provides a Code Reference which allows you to, among other things, find out the meanings of HTML tags. To use the code reference:

From the Window menu choose Reference. Use the menus provided to find what you are looking for.

 

Tag Chooser button on Common tab of Insert window

Use the Tag Selector to add a tag to a selection of text.

1. Select the text.
2. Click on the Tag Chooser button on the Common tab of the Insert window.
3. Click HTML Tags in the left column and select the tag you want from the right column.
4. Click Insert.
5. Click OK.
6. Click Close.
7. Click in the document window to see the tag applied.

 

Print Code option is now available

To print the code of your web page, choose File > Print code...

 

Find and Replace can change HTML tag attributes

Dreamweaver MX can search and replace text and HTML, but it can also search for HTML tags and adjust, add or remove attributes. It can also add and remove tags before and after already existing tags.

Choose Edit > Find and Replace... In the window that appears select Search For: Specific Tag and then choose the tag from the pull-down menu or type it in. Choose the options you want from the Attribute and Action menus. To add additional attributes, click on the + button.

 

Snippets of code can now be saved and reused

You can now use provided code Snippets or create your own so that the code can be easily reused without being retyped.

From the Windows menu choose Snippets. Browse through the folders for already created code or click on the New Snippet button at the bottom of the Snippet Palette to add your own.

Veronica Brandstrader, vbrandst@wellesley.edu
Information Services
Date Created: April 18, 2003
Last Modified: June 17, 2005
Page Expires: December 31, 2005