Overview

This is a single HTML page build using dreamweaver. It contains only basic structural tags. All the visual properties you see are controlled by a CSS document called, style.css. Even the graphics you see are displayed through the style sheet.

Structural Tags?

What do I mean by that? Well, that means the HTML document as no information other then descriptive tags marking up what the content MEANS not how it looks. For example right now you are reading a paragraph, so these few sentences are surrounded by a <p> tag. See the header of the document up there... "Sample Site in Dreamweaver", that is the heading my page so it is tagged as a <h1>. Get the idea? The markup marks up what the content is not how it should look, CSS handles that for us. This is also known as semantic markup.

How do I do it?

When you use Dreamweaver to create an HTML document type (or copy and paste) the text you are working with. If you copy and paste be sure to "paste special..." in the edit menu and select text only. Then format the text. Now, I don't mean change the way it looks I mean give it structure. Use the properties panel and keep it simple, only modify using the format menu and the Bold and Italics options. Don't worry about size, color, placement etc. We can change that using CSS.

One Note...

You can create additional structure in your document that will help styling. Take a look at the source of this page. Do you see any <div> tags? <div> tags allow you to create logical divisions of your page and aide the styling. To add a division simple type in the code view or highlight the area you want to wrap with a div and go to "Insert" ... "Layout Objects" and select Div tag. Name you division by entering an ID (No spaces, case sensitive)