Getting Started

Let's start up dreamweaver. We're using Dreamweaver MX. If you have an earlier edition, it of course, may look a little different. Mac versions, as well, have a few differences.

When the Dreamweaver workspace displays you will notice several panels and toolbars. It can be quite confusing. And of course, if you share your computer with others, they may close certain windows or open additional ones. If that happens, don't worry, you can always re-display a missing panel or close a panel you don't normally use. Select Window and then click the window or panel you wish to view. You can do the same with the toolbars by selecting View < Toolbars.

This Introductory Tutorial will focus on the Insert Bar (1), the Properties Bar (Inspector), the Document Window and the Code Window, so for the moment you may ignore or close the panels on the right side by hitting F4 (all the screenshots on this tutorial are without panels).

• The Insert Bar (1) will allow you to add certain tags or codes to your web page easily using icons.

• The Properties Manager (2) will allow you to alter the look of items on our web page (for example: text, images, links, etc.).

• The Document Window (3) is where you type or create the content for your web page. Here you will start to see what your web page will look like when it is viewed by a browser.

Right above the Document Panel, note the three View icons (circled in green). They represent:

• View Code: this view displays the HTML code only, which is being written behind the scene. Use this view to examine or edit your code.

• View Code and Design: this view offers a split screen showing the HTML code in the top half as well as how the page will look to visitors in the lower half. Using this view you can work on your document in the Design half and Dreamweaver will automatically write the underlying HTML code in the Code view half.

• View Design: this view displays just the design as if we are looking at the page with a browser. As you create and work with documents, Dreamweaver automatically writes the underlying HTML code for you.

  Consider using the Code and Design View when creating your webpage. This let's lets you see the design, as well as keep an eye on the code that is being written by Dreamweaver.

Next session: Site Management