Learnit Training

2. The interface

To be able to work with Dreamweaver, it is important that you become familiar with the programme's interface (screen layout). When you open Dreamweaver you will see the following components:

  1. At the top: the menu bar
    • The menu bar is familiar from other programmes; under file, for example, you can choose to save or print a document.
  2. Centre: the document window
    • On the image below it is still an empty field but soon there will be a website here.
  3. Right: different windows, also called palettes called
    • In the palettes you will find a variety of possibilities.
  4. Bottom: the palette Properties
    • The property palette can be used for several common things like assigning ids and classes.

TIP: By default you will see the CSS design palette on the right, keep this palette visible, it is widely used.

Screenshot Dreamweaver CC for the free online training from Learnit.

To get started right away, it is a good idea to choose File at the top of the menu bar and then New. In the dialogue screen that appears, choose HTML for page type, fixed 2 columns for layout , left-hand sidebar, header and footer. At document type, select HTML5. When you leave the other settings unchanged and click the Create button, Dreamweaver will create a new document with a predefined page layout (see image below).

Screenshot Dreamweaver CS6 for the Free online training from Learnit.

Now that we have a website on the screen, it's a good idea to look at the toolbar under the menu, at the top of the screen. The image below shows a small but important part of this.

Screenshot Dreamweaver CS6 for the Free online training from Learnit.

The Code, Share and Design buttons on this toolbar are interesting to click on. By clicking on one of these buttons, you can switch between different views of the screen. When you click the Code button you will see the so-called back end of the website. This HTML code is actually what it is all about. After all: when a visitor requests a web page, the code is sent to his computer. The browser used, for example Mozilla Firefox or Microsoft Internet Explorer, will interpret this code and show the graphical result to the visitor. The button Design shows a graphical situation in which you also have the possibility to make adjustments. Finally, the Share button gives you a combination of the previous two. Half of the screen shows code and the other half of the screen shows a graphical situation.

Although some understanding of the code is an indispensable part of professional website development, during this free online course we will mainly focus on the graphical part. If you also want to be helped quickly on your way with the important HTML code, then perhaps a course in HTML and CSS is something for you.