Creating a Web Page CSS Style Layout

This tutorial illustrates creating a web page CSS style layout in Dreamweaver CS5.

Let's now create a web page using a CSS layout. If you're wondering where to get one from, don't worry. We can use one of the ones that comes with Dreamweaver.

Let's start with the usual dialog for a new page.

Select HTML as the page type to create as usual, but this time instead of selecting <none> from the Layout list, choose 1 column fixed, centered, header and footer.

Leave the DocType at its default value.

The choice in Layout CSS is very important.

Select Add to Head if you want the CSS code for this page layout to be added to the head of the page.

Select Create New File if you want Dreamweaver to create a new external style sheet that will be attached to the new page.

Select Link to Existing File to use an existing external CSS style sheet.

Let's create a new style sheet on this occasion. Click Create.

I now see the Save Style Sheet File As dialog. I have already created a css folder in my local site root folder, so I'll use that for keeping all of my style sheets. Dreamweaver suggests a name for the stye, which I'll use on this occasion. Note that I'm starting from one of the layouts supplied by Dreamweaver, and effectively making a copy of it to customize for my own use.

Here's the completed dialog.

Click on Save. The page is created, and we can see many of the stylistic elements of the page, including the space in the top left corner for a logo.

The text in the page gives some useful information about using and customizing the layout. These will - of course - be replaced by our content.

Note that the cursor is in the page header, and in the Properties Panel you can see that the Class header applies.

Let's take a quick look at the CSS style sheet that we have "inherited" from Dreamweaver. Open the file css/oneColFixCtrHdr.css as you would open a web page, and it looks like this.

If you scroll down you can see the commands that make up the style sheet. Don't worry if you can't understand most of them as you don't need to yet. However, you should find some of the accompanying comments (the text between /* and */ markers) helpful.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Creating a Web Page CSS Style Layout in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!