Adding Content to the Style Sheet

Remember you are creating a template of a style sheet that will appear like the ones that come packaged with Dreamweaver. It will only hold text that gives instructions to users on how to enter their own text.

Adding Content to the Sidebar:

Place your cursor in the sidebar cell and type the word: Sidebar.

Use the Properties inspector to make it a Heading 2 <h2>

Press Enter after the heading and type a paragraph of descriptive text:

Sidebar Text

Press Enter after the paragraph and type a label for your first set of links. For example: "Main Links Here" which you need to format bold Bold.


Enter three sample links

Make a secondary label after your first set of links, then make three more sample links below it.

Make a new paragraph below the second set of sample links and type in some placeholder text.

Sidebar Text

Select the first three sample links and click the unordered list button on your Properties inspector to make it an unordered (bullet) list Unordered List.

Select the second set of sample links and make it an unordered list, too.

Your sidebar cell should look something like this:


Adding Content to the Main Cell:

Type the heading: Main Content then set it to a Heading 1 on your Properties inspector

Press enter and add several paragraphs of placeholder text

Your table should now look like this:

Main Content

The content area looks a little large. To change the size of the Main Content area open the the CSS Style in the CSS panel by double clicking the main content rule.

CSS Styles

Click the box category and assign the width to 650.

Box Category

Your content area now has a fixed width and appears smaller in the table:

Main Content

Notice that the sidebar content is now not flush to the top of the cell. To correct this, you can edit its CSS. Double click the Sidebar CSS rule to open the CSS rule dialog box. Select the Block category and select Vertical-align and select top.

Verticle Align Top

Save project.css but leave it open.

The sidebar content will now be flush top:

Top Aligned

Adding Header and Footer Content:

At this point you can add a logo to your header and some footer content. If you don't want to do that, simply type placeholder text for now.

In the header, type: [ Logo ]Header and in the footer, type: [ Footer ] Text.

Activating the Sidebar Links:

Set null links on each of the six sample links in the sidebar.

Select a link Select Link.

Type a # (hash mark) in the Properties inspector link box Null Link.

Creating a CSS Style Sheet