The Dreamweaver Interface

Contact Us or call 1-877-932-8228
The Dreamweaver Interface

The Dreamweaver Interface

Panels

All of Dreamweaver's tools are contained in various windows and panels. Panels are divided and organized into a series of Panel Groups based on the functions they contain. You can control which of these panel groups is visible by selecting and deselecting them in the Window menu. The checked items are currently showing:Insert PanelDreamweaver CS6

Insert PanelDreamweaver CC

See Installing Database Panel for CC to read about the way you may add the Database, Bindings, and Server Behaviors panels to your menu.

Insert Panel

The Insert panel (shown below) allows you to insert various "objects" (such as tables, forms, and images) into your page. You can format or set attributes for these objects as you insert them.

Insert Panel The Dreamweaver CS6 Insert panel has several groupings of related objects:

  • Common (shown above) - for most commonly used objects.
  • Layout - for divs, Spry objects, and table elements.
  • Forms - for form elements.
  • Data - for Spry data objects and other dynamic elements, such as recordsets.
  • Spry - for building Spry pages.
  • jQuery Mobile - for building jQuery Mobile pages.
  • InContext Editing - for creating InContext editable regions within pages.
  • Text - for text-centric tags (e.g., headings, lists, inline tags, etc).
  • Favorites - can be customized to display just the options that you use most often.

The Dreamweaver CC Insert panel has several groupings of related objects:

  • Common (shown above) - for most commonly used objects.
  • Structure - for divs, and lists.
  • Media - for media elements.
  • Form - for form components.
  • jQuery Mobile - for building jQuery Mobile pages.
  • jQuery UI- for building jQuery User Interface.
  • Templates - for creating template regions within pages.
  • Favorites - can be customized to display just the options that you use most often.

You can switch between these groups using the drop-down at the top-left of the Insert panel: Insert Panel

The group options are shown below:Insert PanelDreamweaver CS6

Insert PanelDreamweaver CC

You can also drag the Insert panel below the Application Bar to give it a tabbed horizontal layout:

Horizontal Insert Panel

Many of the elements available in the Insert panel will be discussed in detail throughout the course.

Collapse All Panels

To collapse all the panels in the right column, click the arrow icon shown in the image below (in red square):Collapse Panel Groups

Click the arrow again to re-open the panels.

You can also open and close panels individually by clicking on the panel name: once to open and twice to close.

To completely hide all panels, press F4. Press F4 again to reshow them.

Properties Inspector

The Properties Inspector (shown below), which appears at the bottom of Dreamweaver in the Designer workspace, is context-based, meaning it will change depending on what type of object is selected. For example, if text is selected, text properties will be visible; if an image is selected, image properties will be visible, and so on: Properties Panel

Every page element can be customized via the Properties Inspector. For example, text can have a specified font, size, and style. Images can have a specified height, width, and source. To customize an element, select it within the Document Window (the main editing area) and make alterations via the Properties Inspector.

The Properties Inspector is split into two sections: HTML and CSS. Click on the HTML or CSS icons on the left side of the inspector to switch between the two.

Note CS6: When the CSS icon is selected and you attempt to change properties of text, Dreamweaver will automatically open the New CSS Rule dialog prompting you to create a new CSS rule. These rules will all be covered later in the course.

Note CC: When the CSS icon is selected and you attempt to change properties of text, Dreamweaver will automatically create a new Inline CSS rule. These rules will all be covered later in the course.

CSS Styles Panel (CS6)

The CSS Styles panel shows up by default in the Designer workspace. We will cover CSS later in the course. For now, you can close it by double-clicking on the panel name.CSS Panel

Files Panel

The Files panel (shown below) keeps track of all of the files and folders within your site. It can also be used to browse the files on a computer or network just as Windows Explorer can be used to browse files. Files Panel

Next