Macromedia Dreamweaver

General: Main page  Hypertext History  Browser History  Browser Timeline
Browsers: Internet Explorer  Mosaic  Netscape  Opera
Web Editors: Frontpage  Dreamweaver

Macromedia Dreamweaver Interface

by Aaron West

Of all the WYSIWYG (What You See Is What You Get) Editors out there, Macromedia's Dreamweaver has consistently been reviewed the best. The clean code it produces as well as it's hands off approach makes it among the most popular editors for web developers.

Toolbars

Dreamweaver has 3 primary toolbars: Objects, Properties and Launcher. The Objects Toolbar allows you to insert objects with the click of a mouse. The Properties Toolbar is the most important of them all. It is used to specify attributes on the selected object. The Launcher Toolbar opens different palettes.

The Properties Toolbar

This is the toolbar you will use most often. This is where you specify attributes for the object you are working with. An object is anything HTML element. Text is an object, as is a graphic, a list, a table and a form. Options on the toolbar change according to the active object. The figure above is the default if no object is selected. As you can see, most of the default options have to do with the presentation of text.

When the 'More' arrow on the lower right corner is selected, the Toolbar doubles in size, with some advanced options.

With no objects selected, there are no advanced options.

Here we show the toolbar with an image selected. As you can tell, the options have all changed. There are fields for width and height dimensions, links, vertical space, horizontal space, alignment, maps ... These are all Advanced Options that will be explained later in the tutorial.

The Objects Toolbar

The Objects toolbar is where you can easily insert many HTML objects. With this toolbar you can insert images, tables, horizontal rules, layers, applets, active x, plugins, Flash, Shockwave and rollovers.

You can also toggle the items in this toolbar by clicking on the arrow near the top. This brings up a sub-menu where you can change to Forms, Head, and Invisibles. With Forms you can add standard form objects. With the Head Objects, you can define your meta tags and other information that appears in the <HEAD> container. With the Invisible Objects you can add anchors, comments, scripts and more.

The <HEAD> Tag

Unless you author with a large monitor, I recommend you keep this toolbar closed to avoid clutter in your work area. I've found the more workspace I have, the easier it is to work and the better the results.

The Launcher


This is an easy way to launch certain palettes and windows within Dreamweaver. You should note that this toolbar also resides in the lower right corner of the Dreamweaver window without the text descriptions. I recommend that you learn what the icons mean, then remove this toolbar from your workspace.

Site - This is where you can manage your site.

Library - Here you can keep a collection of objects just by dragging them into the window. You can also maintain templates here.

Styles - Here you can specify and apply Style Sheets

Behaviors - Here you can define and apply Javascript Behaviors

Timeline - Here you can control Dynamic HTML animations

HTML - Here you can view and edit the source code of the document

Menu Commands

Dreamweaver has many of the standard menus as other programs: File, Edit, View, Insert, Modify, Text, Commands, Window and Help. Just about everything in the program can be accessed via a menu command.

The File Menu

Under the file menu you can manage your documents, by saving, opening, creating new documents, etc. There are also many unique commands specific to Dreamweaver.

Import/Export - You can import XML into a template, export editable regions (of a template) as XML, and export CSS styles. More import/export features can be added by using plugins.

Convert - You can convert your document to 3.0 browser compatible or you can convert tables to layers.

Preview in Browser - You can check your document in your browser of choice. You can also define browsers here. When you get comfortable working in Dreamweaver, you'll find yourself checking your work in the browser often. The shortcut keys are F12 for the primary browser and Command (CTRL for PC) F12 for the secondary browser.

Check Links - Here you can make sure all the links within the current document are intact. You can also check links sitewide. The shortcut keys are Command (CTRL) F7 for the open document or Command F8 for the entire site.

Check Target Browsers - You can use this feature to check the compatibility of your document with a browser of your choice. Dreamweaver will check the HTML in your document for compliance with the browser you choose, and will generate an HTML report showing errors.

Recent Documents - There is always a list of the last few documents you worked on with Dreamweaver. You can easily re-open the document by selecting its name from the File Menu.

The Edit Menu

Undo/Redo - Here you can undo or redo a previous action. Shortcut keys are Command (CTRL) Z for undo and Command (CTRL) Y for redo.

Cut/Copy - Places the selected item on the clipboard. If Cut is selected, the item is removed from the document. Any object can be copied to the clipboard, including HTML elements (forms, tables). Shortcut keys are Command (CTRL) X for Cut, or Command (CTRL) C for copy.

Paste - Pastes an item from the clipboard. The shortcut key is Command (CTRL) V.

Paste as Text - This is useful when the clipboard contains HTML or other code Dreamweaver would recognize. If you want to display the code in the document, select this option. By default, Dreamweaver will paste the code into the source of the document and it will be applied immediately.

Launch External Editor - This is where you can launch the HTML editor of your choice, whether it be BBEdit, Simpletext, Homesite or Notepad. The default editor is specified in Preferences.

Preferences - Here is where you specify application preferences, such as editors, HTML, and more. We will be discussing the Preferences dialog in detail in the next section.

Find/Find Next/Replace - This is where Dreamweaver will look for a specific string of text (you define). This is a powerful feature when working with large sites. We will be discussing this feature in more detail later.

The View Menu

Here you can change aspects of how your workspace is displayed.

Head Contents - With this selected, a toolbar appears at the top of your document just below the menus. Here you can quickly add or modify elements that belong in the <HEAD> of the HTML document, such as Meta Tags, Javascripts and Styles.

Invisible Elements - These are elements that cannot be seen on the page, such as Styles, Comments, Hidden Fields, etc. Dreamweaver will use a symbol to show that an object is present (see below). If View | Invisible Objects are selected, they will be displayed in your workspace like the icon below.

Rulers/Grids - You can turn rulers and grids on and off. You can also specify which unit to measure by. Pixels is recommended.

Layer/Table/Frame Borders - By default, Dreamweaver has an outline border for all these elements. You may turn them off here.

The Insert Menu

This is where you insert objects to your page. You can insert images, tables, horizontal rules, layers, active x, plugins, Flash, Shockwave, rollovers, forms, form objects, anchors, columns, scripts, line breaks, non breaking space, server side includes and <HEAD> elements.

Modify

This is where you modify certain elements of the page, such as Tables, Frames and more. We will be discussing these in more detail as we start creating documents.

Text

This is where text can be formatted. Many of these same commands are mirrored on the Properties Palette while working with text. We'll also be discussing this in more detail as we work more with documents.

Commands

This is where you'll find some Dreamweaver specific commands.

Clean up HTML - Here you can remove redundant and empty tags, non-Dreamweaver tags or specific tags. This feature comes in handy when working with a document either created by someone else or by another WYSIWYG code generating program that inserts proprietary tags.

Apply Source Formatting - Here you can apply HTML formatting settings to the document.

Set Color Scheme - Here you can choose from pre-set color schemes within Dreamweaver.

Sort Table - Here you can sort elements within a table.

Format Table - Here you will find more advanced table formatting options.

Window

Here is where you can open toolbars and palettes, such as Properties and Site Files. You can also hide the palettes or arrange them. There is also a list of documents currently open within the program. This makes it easier to work with more than one document at a time.

Help

We hope you won't need this ;)

Preferences

This is where you set your application preferences. We recommend you change these settings before doing any serious work in Dreamweaver. It'll make your work easier in the long run. We're not going to cover every single option within this dialog box. Most of the options are self explanatory. We'll take a deeper look at just a few of the most important options.

General - We recommend you have 'Show Site Window Only On Startup.' The site window is where it all begins within Dreamweaver. This is where you should manage all your files. It's also easy for first-timers to close the application inadvertently when closing a document. When the Site Window is open, the application remains open.

We also recommend that you make sure the 'Add Extension When Saving' box checked. You can use either .htm or .html. Some browsers will not recognize an HTML document without the extension. It's quite easy for Mac users to leave the extension off, since they don't require it to open the file.

External Editors - Here is where you specify which HTML editor to use when modifying the code. Dreamweaver bundles with BBEdit for the Mac and Homesite for the PC. These are the two strongest tag editors out there, so we recommend these for managing the code. If you want something lighter weight, you can use Simpletext or Notepad, depending on your platform.

To specify which program, just click on the browse button and navigate to the application file. Once you've found it, double click and that's it.

You can also specify an image editor. You can use Photoshop, or an image optimizer such as Image Ready or Fireworks. We recommend the latter. This makes it easier to optimize your images on the fly. Simply bring them into Dreamweaver, select them, and click on Edit. They can then be optimized in your program of choice, with little interruption.

HTML Format - For those who want their code just so, this is where you specify how Dreamweaver will handle it. We all have our preferences, a tab here, a space there. If you communicate your preferences correctly to Dreamweaver, it will feel like it was handcoded when you bring it into your favorite editor.

HTML Rewriting - Dreamweaver can fix mistakes, but it can also be wrong on occasion. If you feel you know more than Dreamweaver, tell it so right here. It can prompt you when it finds a mistake, or it can ignore the mistake entirely. I've found Dreamweaver to be fairly accurate when reporting mistakes, so I have it prompt me when it finds one.

Invisible Elements - As mentioned above, Dreamweaver can show you invisible elements with that pretty yellow icon. Here is where you specify which ones it shows you. It might not be necessary for it to show you each line break. Personally I like to know everything that's there. But it's up to you to decide.

Preview in Browser - As already mentioned, this can be defined from the File Menu. Here is another place where you can specify which browsers are primary and secondary.

Site FTP - Yes, you can even upload your site using Dreamweaver. This is where you set your communication preferences for the FTP client, such as a Firewall, if you have one. You can also define how long to wait for timeouts, etc.

Status Bar - I've found this is to be a useful feature. What I check most is the download time of different modems. Dreamweaver will display the size of the page and the download time for the page and all it's elements in the status bar. You just have to specify the modem speed, which depends on your audience.

You should browse through the rest of the Preferences. Everyone's different, so some might be more important to you than the average user. Now that you're finished, let's start working.


Note: This page is modified from A Macromedia Dreamweaver Tutorial.

Web Accessibility