Chapter 1: An Introduction of Macromedia Dreamweaver

User Interface

The Dreamweaver interface consists primarily of a document window and a series of floating window palettes that allow you to format, edit and insert items in your document.

Let's review these windows and palettes in order to get familiar with the Dreamweaver user interface.

Document Window

The document window contains your web page in a WYSIWYG (what you see is what you get) environment. The main frame (1) in this window is the web page you are editing. Across the top of the frame are the standard pull-down menus (File, Edit, View, etc.). These menus (2) can be used to access all editing functions that are also available in the individual editing palettes.

New to version 4 of Dreamweaver is a set of toggle buttons that allow you to seamlessly jump from WYSIWYG editing, to code editing, or to a new split screen view. (3) Another new feature in DW4 is a set of tools accessible through buttons at the top of the screen (4) that allow you to put and get the current document, preview the current document, access the new built-in O'Reilly reference materials, and change your viewing options.

At the bottom of the document window, you'll find many useful tools and shortcuts. A context-sensitive menu (5) of the HTML tags used in your document provides one-click access to each HTML element. When your cursor is on the page, the active HTML tag is displayed in bold.

The bottom band also provides quick access to screen resolution and estimated download times (6), as well as the launcher icons (7) to open other feature-specific windows in Dreamweaver.

Launcher Palette

The launcher palette enables quick one-click access to your site management window, assets, styles, behaviors and history windows, as well as a shortcut to your HTML source code inspector.

When you launch your HTML source window, you can manually edit your HTML code by hand. Dreamweaver also provides seamless integration with an HTML editor of your choice. Simply specify the program you want in your "properties" section, and you can launch an external HTML editor from within Dreamweaver.

Objects Palette

The object palette is full of icons to easily insert images, tables, rules, and a host of other elements into your web documents. Simply hold your mouse over an icon to get a text hint for the action of each icon in the menu.

Click and hold the pull-down menu on the objects palette to get a menu of the various panels located there. Different panels provide you with different menus for inserting different types of objects into your document (forms panel for form elements, etc.).

Inspector Palette

The inspector palette is Dreamweaver's most versatile tool. It is context-sensitive, which means when you click on any element in your document, the inspector palette displays all available options for that element. Let's look at a few of these:

Above is the inspector palette with an image selected. The palette includes a thumbnail of your image, image size, filename (src), alignment and image mapping options, as well as a number of other useful editing and formatting elements.

You can also manually "quick edit" your HTML tags by clicking the icon for the quick tag editor.

Above is the inspector palette with a text link selected. The palette includes font and link information, as well as the standard alignment and formatting options for text. Note in the bottom section of the palette is an icon indicating a table. This text is located in a table cell. Therefore, you can also edit the size, border, and color of this table cell.

Note that all links and references to other files are followed by two icons. The first icon is the point-and-shoot icon. This icon allows you to click-drag-point-and-shoot to the file you are linking to. The second icon allows you to "browse" for your target file using an Explorer- or Finder-type of file menu.

Above is yet one more example of the inspector palette, this time with a table selected. Note that this menu allows you to specify the number of rows and columns in your table, width and height options, cell padding and spacing, and all the other options available for building and editing tables in your document.

Other Palettes

The Dreamweaver user interface also contains a number of other optional palettes to display the document history, styles, assets, etc. We'll discuss each of these later in the tutorial.

(Page 1 of 7) Next