Hi there, I’ve created this tutorial for DreamWeaver beginners, better yet for almost complete beginners, we will build a simple site step by step. If you have Macromedia studio, the better! If not, DreamWeaver alone can do just fine.

Before we begin this fairly long, but easy to follow tutorial, you will need to download a few graphics that will be used in later sections. Click the following link to download them:

Part I: The Interface

After you downloaded the images by clicking the above link, it's time to begin. The following steps should help you become better familiarized with the interface:

1. First, Open Dreamweaver.
    
2. Select File>New In the General tab.
    
3. Then click Basic Page and html then click OK.

Now take a moment to familiarize yourself with the area, if this is your first look here, it may look like a bunch of random stuff, but soon the usefulness of the site will begin do dawn on you!

[ the dreamweaver interface ]

The following bulleted lists will give you a brief overview of what each section in the above image accomplishes:

• The Design area is where most of the work will be done, it will be where you will type your text, maneuver your images and tables, etc.
   

• The Code Area is where, if we need to code HTML directly one would go, most of the time Dreamweaver does it for us, but sometimes it also creates annoying bits of code we don’t need.
   

• The Toolbar we will be here a lot, basically the tool bar is a bunch of shortcuts to what we need to do, and everything is nicely divided in to tabs for us.

---

Part II: Planning the Site

Okay before we continue any further it is always a good idea to plan your page ahead of time, this will make creating it a lot simpler and easier. For example in this tutorial I will be building an information page on one of my favorite games: Rainbow Six.

A map of your site can be quite simple:

[ graphical plan for the site ]
 

As you can tell from the above image, it is a basic plan, and the lines represent where the user can go. There will be altogether 6 pages including the homepage. The next section will continue this tutorial by teaching you how to create a basic layout.

 
Using DreamWeaver

This is a continuation of the tutorial from the previous section. If you stumbled upon this page without having finished the first page, please click here.

---

Okay now with the fun stuff:

1. On your Toolbar click the Layout tab.
    
2. Then click Layout View button.
    
3. Now click the Draw Layout Table button, and draw out a table, of just about any proportion, it doesn’t really matter:

[ the draw layout table button ]

4. Then at the bottom of the screen in the Property panel find Width and Height and enter 600 for width and 400 for height:

[ the property panel for your table ]

Now, with the table drawn, we can add places we will type and add a navigation bar and so on, first it’s a good idea to make space for them that way nothing will get in each other’s way. Another thing to realize is that most of the pages will be closely the same, so there is no point in creating everything all over again for each page so we will create a template. If your lost so far, don’t worry I will explain later.

Continuing on:

1. Now select the rectangle you just created, and again in the Properties Panel enter Width: 600 and Height: 50
    
2. Now create in the same fashion another rectangle, right below the first on, again using the Draw Layout Cell button.
    
3. With that done, select the rectangle you just created, and again in the Properties Panel enter Width: 600 and Height: 22.
    
4. And finally create another rectangle, but so it fits the rest of the Layout table, and then save your work! Save it as Rainbow.htm (File | Save).

So far your work should look something like the following image:

[ your table layout: zoomed out in this graphic ]

Part III

With your layout looking somewhat similar to the above graphic, I guess it is safe to continue:

1. Now in your Layout Tab, in your Toolbar, click Standard View. It is time to add some buttons for the navigational bar!
    
2. Click the middle cell of your table (the thin one you made earlier), and then click Insert | Interactive Images | Flash Button.
    
3. In the Button Text, text field enter Weapons, And in the link text field enter weapons.htm. Finally, select the Beveled Rect-Blue button and click “OK”

[ the Insert Flash Button dialog box ]

There you should have inserted in the middle frame a Flash button, the link does not work yet, but we will fix this in a later time.

4. Repeat the process for Tactics, Team, Equipment and Contact buttons,
   Making sure the text for each is different though. For example, the next button will have Tactics in the button text field, and tactics.htm as the link.
    
5. You should end up with something looking like this, and the order is not important:

[ how your buttons should look ]

6. Select all the buttons, either by dragging over the buttons, like you would select a text, or by clicking each one while holding shift.
    
7. Now if you look down, in the Property Inspector, under cell, you can see there is part where its written Horz. and the Default is selected, click it, and select Center:

[ select Center ]

Now all your buttons should have shifted, and aligned in the middle.

8. Click on the top Cell, in your table. Then select Insert | Image and locate title.gif that I pre-made, or you can yourself create a title, just as long as the final product is only 600x50 pixels.
   
   DreamWeaver might prompt you to see if you want the image copied to where the web page is, click okay, and save it.

We are almost done, but not quite! The next section will go into further details that involve images, colors, and styles!

 
Using DreamWeaver

This is a continuation of the tutorial from the previous section. If you stumbled upon this page without having finished the first page, please click here. To view the second page click here.

---

Part IV

This section will deal with CSS styles, colors, and other fun things. The instructions follow:

1. Right click anywhere in the table, and select table>select table.
    
2. In the Properties panel set Brdr Color (Border Color) to white, Border to 1 and Align to Center:

[ what should be in your table property panel ]

3. You may make any other modifications to make your table look better. If you can make your property panel look like the above image, all is well!

Part V
Now, onwards to the interesting stuff! We have so far had a pretty good start, and now we will create the main text field. We will use CSS, or Cascading Style Sheets to add some nifty formatting. CSS gives you more control to display cool effects to your users than HTML; it also simplifies a lot of work. I wont go much in to detail on them, but if you are interested in learning about CSS, the following URL may help you out:

http://www.w3schools.com/css/default.asp

Let's use a bit of CSS:

1. In the Design Panel that should be on your top right, click the little button on the bottom to add a New Style Sheet.

[ the New Style Sheet button ]
 

2. Then a window will appear. In that window under name type, type textfield. For Type enter 'Make custom style' and for Define select New Style Sheet File.

[ the New CSS Style dialog box ]
 

3. Once you have entered everything and press OK, you will be prompted to save the Style Sheet. Save the style as textfield.css.
    

4. If all goes as planned, the Definition field will appear; here we will define our style sheet.
    

5. We start in the Type category. Under font, select Arial, Sans serif. The Size should be 12 pixels, and the Style normal.
    

6. Then in the category on the left, click Background. In background image, select the pre-made image called, backgroundimg.gif. DreamWeaver may ask you to copy the image to the folder where you are creating the site, click okay, and copy it there.
    

7. Now apply all the info as posted in the following image (except background image location):

[ ensure you apply the info displayed in the above image ]

8. From the same window, select Block, in the Category section.
   Under Word Spacing enter: normal, and under Text indent, enter: 10 points.
    

9. Now lets apply to style sheet and see what you have done. Go to layout view (as stated earlier in the tutorial) and select now the bottom cell. With it selected click back to regular view.
    
   Now you should have the bottom cell selected, in the property inspector hit the CSS/HTML toggle button:

[ press the CSS/HTML toggle button ]

10. Right beside the CSS/HTML toggle button, where it says No CSS Style, select the textfield CSS you created previously!

---

Your site should look like the following image:

Neat huh? As you can see, the Style Sheet, set the background, and also put an indent in the cell, so the text doesn’t start right on the edge…

There are more parts to this tutorial, and they will appear shortly so keep on the lookout for more tutorials by RussianBeer!

Regards,

RussianBeer

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇