Web Page Design & Intro to Web Page Development

The Dreamweaver interface

We will begin by describing the layout of the Dreamweaver interface. The windows you see may vary slightly depending upon the version of Dreamweaver you are using, but for the most part the functionality is the same.

Close all the tool windows that appear at start-up (by clicking the X in the top-left corner) with the exception of the properties inspector. If the properties inspector doesn't appear when you begin the program, you can bring it up by selecting Window-Properties. The properties inspector will allow you to modify the parameters of any object you add to your Web page. This includes text, tables and images. This tool will allow you to complete about 90% of the necessary tasks while designing your pages.

Basic functions

Executing functions

Dreamweaver allows you to execute its many functions in three different ways, a menu option, a property inspector tool or a shortcut. For example, to makes some text bold I can:

1. select from the menu - Text-Style-Bold.
2. press the B icon found on the property inspector.
3. press CTRL-B on the keyboard.

Each route will have the same result. In this guide, I will direct you towards the property inspector whenever possible. If the command can't be found there, I will give you the directions for the menu.

Saving Work

Before you begin working with some of the functions you will want to save your document. To save you can select File-Save from the program menu, but before you do that, take note of the following file and folder name suggestions:

1. save your home page file as index.htm (Web server programs recognize this file name as the default Web page).
2. use lowercase letters
3. end file names with .htm (.html will work but being consistent will help when linking files later)
4. avoid all punctuation (although the underscore "_" character can be used to indicate a space)
5. don't use spaces (use the underscore instead)
6. give your Web site its own folder

Sometimes the hardest part of creating a webpage is just getting started. It can be intimidating to look a blank white page. This is why Dreamweaver has made it easy to get things started by helping you to choose a color scheme. In order to do this, go to Commands and select "Set Color Scheme." Here you can preview how background colors go with text and link colors. Once you find a setting you like, click Apply, and your page will reflect the choices you make.

Adding and formatting text

In most instances, Dreamweaver will behave much like a word processing program. You can add and format text just as you would in those programs. To change the format of some text, highlight it, and select the option you would like to change from the property inspector. For example, if you would like to change a word to Bold type, highlight the text and press the Bold button on the Properties Inspector.

Previous    |    Next