Introduction to the fundamentals of Dreamweaver

What you will learn in this lesson:

1. What is Dreamweaver?
2. The basic layout
3. The Objects Palette
4. The Launcher palette
5. The Properties Inspector overview
6. A basic page

What is Dreamweaver?

Dreamweaver is a fully-fledged WYSYWIG (What You See IS What You Get) HTML (HyperText Mark-up Language) editor that allows you to create web pages and web sites easily and quickly. But it goes beyond that; it also allows you to delve into DHTML (Dynamic HTML) to create a far more interesting and interactive web site. It doesn't stop there; it also has a full FTP (File Transfer Protocol) to upload your site to the Internet when it's finished.

So Dreamweaver has everything you need to create and implement an effective web site.

The basic screen layout

When you first start Dreamweaver you will be presented with an Untitled Document (see upper left corner of Figure 1). This is your blank web page waiting for you to start adding elements such as pictures, text, etc.

You should also have some of Dreamweaver's palette's visible (see figure 1). If you don't, you simply need to go to the Window menu and select what you want visible from the available list. Figure 1 shows the Objects, Launcher and Properties Inspector palettes open. These will be explained later in this manual.

Figure 1 - A typical Dreamweaver screen.

The Objects palette

The first palette we're going to look at is the Objects palette (see figure 2). The Objects palette allows you to insert elements on your web page. You can insert things like: Images, tables, Flash movies, Java applets, and more. However, the Objects palette has more functions up its sleeve.

At the moment (for the sake of this tutorial) you are looking at the Common objects (see the top of the Objects palette in Figure 2). Dreamweaver offers you 5 additional functions (see figure 3), including: Forms, Characters and frames. To access these additional palettes simply press the small down arrow next to the word Common and a pop-out menu appears (figure 3).

Figure 2

Figure 3 - Pop-out menu

To see what each of the icons mean simply hold the mouse over the relevant icon and a 'help tip' will appear. We'll take a look at inserting different elements when we start making our first simple page later in the manual.

The Launcher palette

The Launcher palette (Figure 4) is the only palette that doesn't need to be visible to use it as it's replicated on the bottom right of Dreamweaver's screen (see Figure 1). So, if you do have it open feel free to close it down to make the most of your screen space.

Figure 4 - The launcher palette.

The Launcher palette is used to access some of Dreamweaver's other windows/palettes. From here you can open the HTML Source editor, the Site Map window, the Behaviours palette, etc. Try it now, click on the HTML Source icon. Don't worry; you can close the window like any other window in Windows 9x by clicking on the 'X' in the top right corner of the relevant window.

The Properties Inspector

The Properties Inspector works a little different to the other Palettes in Dreamweaver, as it is context sensitive. In simple terms, that means that the available options change depending on what you are editing or creating. For example, when you are editing text the Property Inspector will look like the image in Figure 5.

Create a table and the Properties Inspector will look like Figure 6.

Figure 5 - Properties Inspector for text.

Figure 6 - Properties Inspector for tables.

As you can see, the two Properties Inspectors are vastly different. You will become very familiar with the Properties Inspector, as you will be working with them frequently while designing and editing your web page/site.

Don't be put off by what seems to be a lot of features and functions to learn. If you are familiar with a word processor like Microsoft Word you should be comfortable using many of the functions of the text Properties Inspector (Figure 5). There are the usual Bold, Italic and text alignment icons. You will notice that there is no 'Justified' icon available; this is because you cannot justify text via the property inspector in Dreamweaver 3.

It is beyond the scope of this manual to cover every single function available within the Properties Inspector. There are several very good books that cover Dreamweaver 3 in-depth. You will use the most commonly used functions throughout this manual while creating both basic and advanced web pages.

There are more palettes and functions available to you in Dreamweaver, but for now we'll leave them alone.

A basic page
We've looked at the basic options available to you in Dreamweaver 3. Now we are going to define the page properties (Figure 7). These options include the page colour, page title, background image, etc.

As noted previously, when you open Dreamweaver you are automatically presented with a blank untitled page (see Figure 1). To access the Page Properties dialogue box you have 3 options. You can right-click anywhere on the blank page and select Page Properties. You can go to the Modify menu and select the first option, Page Properties or you can press CTRL+J on the keyboard.

Figure 7 - Page Properties.

As you can see from Figure 7 there are several options available to you when setting the properties for your blank web page. Most of these options will never be used when you create pages, so we are going to concentrate on the most common options.

Title: This is the name that will appear on the menu bar of the browser; don't confuse this with the pages file name. The title is more akin to the title you may print at the top of a word processor document.

Background image: You can assign an image to be tiled (repeated) for the background of the page. There are literally thousands of websites where you can download free background tiles or you could create your own in a program like Adobe Photoshop.

Background: If you don't want to use an image for your page's background you can simply assign a colour. To select the desired colour click the small colour chip (the small square) after the word Background and you will open the colour selector. The nice thing about the colour selector is that the colours you are given are all web-safe colours.

Text: This allows you to select the default text colour used on the page. Note: This is only relevant to the current page and not all the pages you have either created or the following pages.

Links: The 3 links options shouldn't really be altered as the browser that the page will be viewed on may override the settings you specify.

That's all we need to alter for now, so we'll leave the Page Properties there. One nice feature is the Apply button. This allows you to alter the settings for the page and see them without having to close the dialogue box and re-open if you're not happy with the alteration. Simple and effective, just the way a good website should be.

Let's create the first blank page

OK, so we've looked at some of Dreamweaver's fundamentals. Now, let's alter a few and see what happens. This simple exercise will take you through some of the simple functions available to you, plus we'll look at saving the page and previewing it in a browser to see what it will actually look like. The reason I say actually is because the page will alter on different screen sizes and resolutions. Keep this in mind when working and hopefully you will actually see what you want to see….

Right, you should still have the Page Properties dialogue open; if not, open it now.

1. In the Title option, delete 'Untitled Document' and type in 'My first page'.
2. Change the Background to a nice pale blue.
3. Change the Text to black

Finally, click Apply to see your alterations on screen. Once you're happy click on OK to close the dialogue box.

Now, type your name and a little about yourself so that you have some text on screen.

Now, before we preview the page we need to save it.

Go to the File menu and select Save As. Name the file mypage.htm. Ensure you DO NOT put any spaces or capitals in your file name as this may cause problems when you upload the file to the Internet.

Choose a location to save the file (this isn't too important at the moment) and click Save.

All that is left to do is preview the file in your default web browser (Internet Explorer or Netscape Navigator being the 2 most popular).

To do this, press the F12 key on the keyboard.

There you go, you have created your first simple web page, saved it and tested it in a browser.