Tour Dreamweaver 8

Dreamweaver has a reputation for creating clean HTML code.  Among its tools are powerful ways to control the layout and design of both a web page and a complete web site.

You can download Dreamweaver directly from the Adobe website at http://www.adobe.com/products/dreamweaver.

Or you can purchase the Dreamweaver CD.

Install Dreamweaver

Install Dreamweaver as you would any other new software.If you have downloaded Dreamweaver, double-click on the file to start the installation process. If you have purchased a CD-ROM, the Installation Wizard will usually start as soon as you place the program in your CD-ROM drive. 

Or open the directory and the Dreamweaver folder and double click on the application to start the installation.

Follow the directions on the screen to install Dreamweaver.

You can open Dreamweaver in two basic ways:

• Click on the Start button in the lower left corner of your screen.
• Choose Programs, Macromedia, Dreamweaver

Or you can click on the shortcut button located on your desktop.

When you launch Dreamweaver for the first time, it might ask you to define a local root folder. You will define this folder when you are ready to create your first web pages in Dreamweaver.

Meanwhile, cancel the dialog box. From the Main Menu bar choose, File, New. The New Document dialog box opens.

Choose Basic Page and click on Create. Now take a look around the work area.

You will see:

• a colored title bar at the very top of the screen
• then the standard menu bar and just below it the insert bar
• the document toolbar
• a large white space called the document window
• the panel groups to the right of the document window
• a status bar just below the document window
• the property inspector

NOTE: the appearance of the bars and  panels on your screen may vary, as Dreamweaver defaults to the look it had the last time it was opened.

If your Dreamweaver screen does not look exactly like the screen displayed here, you can learn how to add and remove the various objects in the next lesson:  Customize Dreamweaver 8.

Let's examine each of these objects in a little more detail.

At the very top of the screen are the title bar and the main menu bar.

The title bar indicates the title you have given the current document and its location on your computer.

The menu bar gives you access to the drop down menus associated with its commands.

For example, the File menu is where you would find commands to open, save, and close files.

Take a minute to pass your cursor over each menu item and note the commands. We will look at each of these commands more closely when you are ready to use them.

Just below the menu bar is the insert bar; it is set to the Common category.

Using the buttons on this bar, you can quickly insert page elements such as links and images. If you run your cursor over each button, a tool tip will pop up to identify it. We will look at each of these commands more closely when you are ready to use them.

The document toolbar lets you switch between various views of your web page.

It also provides a place for you to title your page and contains other options to help you handle your web sites.

The Status Bar

The Status Bar at the very bottom of your screen displays very useful information about your page as it develops.

On the far left, the status bar displays the XHTML tags of the part of the web page you are working in.

On the far right, the status bar displays the window size, the current file size, and the current download time of the web page.

Below the document window is the property inspector.

The property inspector will adapt to the nature of the element you have selected to work on. The default property inspector shown above provides you with the ability to manipulate text.

We will examine the property inspector more closely as we discuss the elements of the web page.

If you don't see the property inspector on your screen, click on the down arrow in the middle of the line just below the status bar. To hide the property inspector, click again on the arrow.

The files panel is a floating window that provides you easy access to the files in your web site, your cascading style sheets, and assets--such as the images you are using--that you might use over and over again in a web site.

You can customize the files panel to display your favorite operations.

On the far right of the title bars of some of the file panels you will see a small down arrow you can click to reveal a list of commands to manipulate the panel or the data in it.

If you don't see the files panel on your screen, click on the left arrow in the middle of the right margin of the document window. To hide the files panel, click again on the arrow.

To learn how to rearrange your workspace, go to Start: Customize Dreamweaver.

More specific information about each of these toolbars and windows is located in the lessons in which you will actually use the various menu commands.

You can customize your Dreamweaver workspace in a number of ways.

Whatever you do to the Dreamweaver screen, your changes will remain.  When you open Dreamweaver again, your screen will look the way you left it.

You can choose to view your web page in design view or in code view or both

• by default Dreamweaver opens in design view, a WYSIWYG editor that displays your page much like it will appear in a browser window
• you can also work directly in code view to hand code or tweak the html
• you can choose to display the design and code views simultaneously.

If you want to restore a toolbar or you can't find a toolbar:

• Choose View from the menu bar. The views that are currently visible on the workspace will be checked.
• Click on any additional views you want access to.
• Click on a check-marked view to deselect it.
• If you want to display or hide a toolbar, choose View, Toolbars from the main menu bar. The toolbars that are currently visible on the workspace will be checked. Click on any additional toolbars you want to display.

If you want to restore a window or you can't find a window:

• Choose Window from the menu bar. The windows that are currently visible on the workspace will be checked.
• Click on any additional windows you want access to.
• Click on a check-marked window to deselect it.

As you get comfortable using Dreamweaver, you will want to arrange your toolbars and floating windows to suit the way you work. 

Web Design Center
Dreamweaver 8 Tutorials
© Agatha Taormina
Last Revised: September 14, 2009