ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
Dreamweaver Tutorial - Index
Dreamweaver Tutorial - Dreamweaver Interface
Dreamweaver Tutorial - Making Website
Dreamweaver Tutorial - Site Structure and Content
Dreamweaver Tutorial - Style Sheets and Template
Dreamweaver Tutorial - Forms and User Intraction with ASP
Dreamweaver Tutorial - Database
Dreamweaver Tutorial - Dreamweaver Extensions

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > Dreamweaver Tutorial > Dreamweaver Interface

Dreamweaver Tutorial - Dreamweaver Interface

Page 1 of 1


Dreamweaver is an easy to use web development application that covers up the gap between a developer and a designer. Dreamweaver is a powerful web development tool that helps you create attractive, dynamic, powerful websites. It includes advanced features to develop complex data-driven web applications. Dreamweaver’s user friendly interface and extensive library not only enables even the amateur web designers to create professional websites easily, but helps one to structure the websites in such a way that they are easy to maintain after being built.

This tutorial is a practical introduction to Macromedia Dreamweaver 8. Starting with explaining all the entities of the user interface, this tutorial will quickly get you used to the robust features of dreamweaver.

Dreamweaver Interface

Dreamweaver has a very easy and user friendly interface that lets the user develop and manage simple as well as complex websites. The interface features in Dreamweaver allows the user to quickly create web pages in the WYSIWYG mode. The various elements and assets can be dragged directly into the document from an easy to use panel. Developers can work directly with the page's code, making use of the various tools Dreamweaver provides for ensuring correct syntax. Dreamweaver comes with the support to directly import images created using Macromedia Fireworks and other graphics applications.

In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window.


The toolbars contain the common commands. Many of these commands are also available in the Dreamweaver menus. Additional commands are available in the panel groups found on the right side of the Dreamweaver window; you can expand and collapse these groups as necessary. The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. We will go through the brief introduction of each of these features.

Insert Bar

You can use the insert bar to create and insert objects such as tables, layers and images. It includes images, hyperlinks, tables, forms, and multimedia objects. When the mouse is rolled over a button, its tooltip comes up with the name of the command button. These command buttons are organized into categories. These categories can be switched on the left side of the bar. In addition to this the categories also appear when the current document contains server code such as ASP or Coldfusion documents.


The various categories that these command buttons are grouped into are

Common - The default category, which contains commands for adding hyperlinks, tables, images, and multimedia objects.

Layout - It is used for designing the layout of the page, with the help of commands for tables, layers, and framesets.

Forms - Contains commands for adding form elements to your page.

Text - Contains commands for applying various formatting to the text on your page, as well as for inserting special characters.

HTML - Lets you select various HTML tags to insert into your page.

Application - Contains commands for adding database elements to your page.

Flash Elements - Lets you insert a Macromedia Flash movie into your page.

Favorites - Lets you customize your own toolbar by grouping your favorite commands.

To show or hide the Insert toolbar, open the View menu and select Toolbars, and then Insert.

Document Toolbar

The Document Toolbar can be used to toggle between different view modes i.e., Code, Design and Split View mode. In addition, there are some common commands related to viewing the document and transferring it between the local and remote sites. There are commands for naming, previewing, and publishing the current document:


Show Code View - displays only the Code view in the Document window.

Show Code and Design Views - displays Code view in part of the Document window and Design view in another part. When you select this combined view, the option Design View on Top becomes available in the View Options menu. Use this option to specify which view appears at the top of your Document window. Code view is updated automatically when you make changes in Design view. However, after making changes in Code view, you must manually update the document in Design view by clicking in Design view or pressing F5.

Show Design View - displays only the Design view in the Document window.

Document Title - Lets you specify a title for the page, which appears in the title bar of the browser's viewer.

No Browser/Check Errors - Provides a menu of options for checking browser compatibility with the page.

Validate Markup - lets you validate the current document or a selected tag.

File Management - Provides a menu of file management options for the page, including a command to upload the page to your web server.

Preview/Debug in Browser - Lets you preview the page in the browser you select.

Refresh Design View - Refreshes the appearance of the page in Design view after you've made changes to it in Code view.

View Options - Lets you specify various settings for the current view.

Visual Aids - lets you use different visual aids to design your pages.

If you don't see the Document toolbar, open the View menu and select Toolbars, and then Document to show it.

Document Window

The Document window shows the current document in either of the view modes among Design View, Code View and Split View. The Design View mode is used for visual page layout, visual editing and rapid application development. In the Design View mode the document is available as a fully editable visual representation similar to the final output that you would be seeing in the browser.

Code view provides the user with hard-core coding environment for writing and editing HTML and Javascript code as well as the backend server language code like PHP, coldfusion, ASP etc.

The Split view mode lets the user view both code and design view in the same window.


The title bar displays the title of the page and the file’s path and name. An astrisk is displayed after the name if any changes have not been saved.

When a Document window is maximized, tabs appear at the top of the Document window area showing the filenames of all open documents. To switch to a document, click its tab.

Panel Groups

The Dreamweaver Panel Groups are displayed vertically on the right side of the Dreamweaver window. Panel groups are collection of related panels and commands you will use to design your pages andbuild and publish your web site.

A Panel group can be collapsed or expanded and docked or undocked along with the other panel groups. A panel appears as a tab in the panel group when selected.

The commands available in the panel groups are far more extensive than the ones you'll find on the Insert bar, which contains the most common Dreamweaver commands.


Each panel includes an Options menu in the upper right corner, which contains additional options for that panel.

Design Panel Group


There are two panels in the design panel group: CSS Styles and Layers. CSS styles are used to maintain the styles in the document and creating and attaching style sheets. The layer panel shows all the layers of the open document. It can be used to lock or unlock, rearrange, and rename the layers.

Code Panel Group


You can use the Code panel group to work with the code in the document like HTML, JavaScript, and ASP. You can save code snippets using the Snippets panel, which can be reused later. The Reference panel contains HTML reference library.



ExpertRating Dreamweaver Certification - Get Certified Now!!
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.