by Sam Bourim aka RussianBeer

This is a continuation of the tutorial from the previous page. 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 ]

  1. 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:

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 ]

  1. 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 ]

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

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

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

  4. 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.

  5. 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 ]

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

  2. 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 ]

  1. 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!




Previous Page    


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.