BeWebmaster

Dreamweaver interface brief overview

Ad

Dreamweaver interface is made up of five elements: Menus, Insert bar, Document window, Properties panel and Other panels. Here is a brief overview of each.

Menus

Menus allow you to access most of the Dreamweaver features. Some of those features you will access very often and some you may never use.

File menu looks like most other applications. It includes file options such as Open, Save, Print, Import, Export etc. It also allows you to leave "Design Notes" to other designers/developers that may be working on a project.

Edit menu includes the usual Cut and Past, Undo and Redo, Selection options, Find and Replace options and Code formatting options. It also allows you to access application Preferences.

View menu gives you access to zoom options; toggle options, which allow you to switch between Design View, Code View and Split View; head content options; visual aid and grids, guides and rules options.

Insert menu will help you insert new items and objects into your document.

Modify menu includes options to modify items and properties of the working page.

Text menu provides options for editing text-based elements.

Commands menu provides you with options to record and play automated tasks; HTML clean-up options and source formatting options.

Site menu contains options that allow you to create and mange Dreamweaver sites.

Window menu deals with panel display options; workspace options; and it allows you to access currently open documents.

Help menu gives you access to the applications help files, Dreamweaver exchange and other Dreamweaver related websites.

Insert Bar

By default, Insert bar is located below the Menus and includes eight categories: Common, Layout, Forms, Text, HTML, Application, Flash elements and Favorites. Dreamweaver CS3 also includes SPRY category. Those categories can be displayed as menu (default) or as tabs. To display it as tabs select "Show as Tabs" option from the drop-down menu. To return to the menu view, select "Show as Menu" from the panel's context menu.

Each category displays a different set of icons that can be used to add the associated element to your working document. The icons with a downward-pointing black triangle display a menu with related options.

Favorites category allows you to create a set of icons that you use the most. To do that just right-click on the Insert bar and select "Customize Favorites..." option from the menu. Customize Favorite Objects dialog box opens, allowing you to find, add and edit your Favorites.

Document Window

Document window displays your working documents. And Dreamweaver gives you three ways of viewing your document: Design View, Code View and Split View. Across the top, the document window includes a toolbar with set useful buttons and menus, such as: view toggle buttons, browser check menu, markup validation, file download/upload menu, browser preview menu, view options menu and visual aids menu.

Across the bottom is the status bar which allows you to quickly select and edit tags/elements used in your document. In Design and Split view the status bar also includes: select tool, hand tool, zoom tool, magnification drop-down-menu and it shows you download size and time of the working document.

Properties Panel

Properties panel is a dynamic panel located under the document window. It is a dynamic panel, because it's options change based on currently selected item in the document window. For example, if you selected an image, image specific options such as: alt text, width, height, alignment etc. would be displayed.

This panel is used to apply basic formatting and styles, change alignment, create lists and text indents, and add links.

Other Panels

Other panels are by default located on your right-hand side. Here you have CSS Styles, Tag Inspector, Files etc. Those three are the once I use the most. CSS Styles lets you access all the style sheets related to the currently opened document. Files panel helps you  manage your sites, and with the Tag Inspector you can edit tags and objects of the currently opened document. You can add/remove panels by going to Windows menu.

And there you have it, a brief overview of the Dreamweaver interface.