Creating the Base Page
Open Dreamweaver and your Site window (F8), then select the site you defined using the downloaded project files.
-Open the included page called: worksheet.htm
This is the page you will be using as you complete this tutorial. Remember to save your work at regular intervals.
We provided a blank page (worksheet.htm) not merely to save you the trouble of creating a new page, but to ensure that you are working with a page that has a full DOCTYPE. The DOCTYPE that Dreamweaver (MX and lower) uses is not complete and will cause some browsers to render CSS in a less-than-optimal way. The DOCTYPE goes on the first line of a page's source code and looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Dreamweaver's default DOCTYPE does not include the second line. If you create subsequent pages, please be sure to include the full DOCTYPE.
Note: Dreamweaver MX 2004 does add a full DOCTYPE.
Start a Style Sheet and link it to your page
-Choose Text--> CSS Styles --> New CSS Style.
-The New CSS Style dialog will open.
-Enter the following values:
- Tag: body
- Type: Redefine HTML Tag
- Define In: [New Style Sheet]
-Click OK
The Save Style Sheet File As window will open.
Make sure the Save in box is pointing to your current Dreamweaver site.
-Enter project.css in the File name box
-Click Save
The CSS Style Definition window will open with the Type Category active.
Enter the following values:
- Font: Georgia, "Times New Roman", Times, serif
- Size: 14 pixels
What it does: This sets the default font size for your entire page. If we later set font sizes for our table cells to a proportional (%) size, then the only size we ever need to edit is the one in the body rule, all changes will cascade down. Thus, one setting can control all font sizes throughout every page of your site.
Switch to the Background Category.
-Enter #FFFFFF (white) for your Background Color
What it does: This sets your page background color.
Switch to the Box Category.
Enter the following values:
Padding: Check Same for All and enter:
- Top: 0 pixels
Margin: Uncheck Same for All and enter:
- Top: 0 pixels
- Right: 10%
- Bottom: 0 pixels
- Left: 10%
What it does: This sets your page padding to zero to accomodate Opera, which renders pages with a default padding of about 12px. More importantly, it sets your top and bottom page margins to zero and your left and right margins to 10%. Any content you enter on your page will fill 80% of a browser's available window width, and will expand and contract as the window is resized.
Here is the final rule as it appears in your style sheet:
body {
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin: 0px 10%;
padding: 0px;
}As we enter additional CSS rules, we'll do so manually... directly in the CSS file we just created. It's our preferred way of writing CSS and allows us to focus on teaching you more about how CSS works... as opposed to how Dreamweaver's CSS Editor works... or does not work. If you would rather use Dreamweaver's CSS Editor as you work through this tutorial, please feel free to do so. Make sure, however, that you periodically open the CSS file and check it for accuracy using the actual CSS code found in this tutorial.
- Introduction
- Creating the Base Page and a New Style Sheet
- Next: Creating the Main Layout Table
- Adding Content and finishing the Style Sheet
- Changing the Layout with CSS
- View the Example Page