Creating a Cascading Style Sheet Layout

Creating and developing a website with CSS is generally a straightforward task. It gives you significant advantages structurally since you’re not embedding presentational markup in your page. It also provides advantages on the presentation side because you can control your entire layout with one style sheet. Another important consideration is it generally makes your websites faster to load since the structural markup is clean and the presentational file is cached on the end users computer. Lastly, it can make developing a print style sheet much easier as well.

In this article, we’ll learn:

If you would like to follow this article’s step-by-step development or even try your hand at creating a Cascading Style Sheets Layout, you will find the project file links helpful.

See Demo

Download Project Files
Zip

Create our layout - Fireworks

A basic knowledge of Fireworks is needed to complete this section. If you’re not comfortable with this editor, you may use Photoshop. If you’re not comfortable with either, it’s recommended you spend a few hours visiting either’s help documentation. For our purposes, we’ll use Fireworks. Open Fireworks by following these steps:

Fireworks New Document

Import header and footer image

We’ll import the header and footer image provided from the project files download. In Fireworks, follow these steps:

Fireworks Carpenters Hand

Create the dashed line

Our dashed line will serve as a visual separator between our left and right “columns.” Follow these steps to create it:

Fireworks Line Tool

Fireworks Ruler

Fireworks Stroke

Fireworks Stroke Category

Fireworks Hard Dash Selection

Create navigation pattern

Our navigation has a light gray background pattern to help visualize the difference between the two columns. Follow these steps to create it:

Fireworks Rectangle Tool

Create the background

Our website has a subtle patterned image which repeats through our web page. Follow these steps to create it:

Fireworks Stroke

Fireworks Mesh

Slicing our graphics

Each of our web graphics will be exported as JPEG images. With this in mind, follow these steps to set JPEG as the default export option:

Fireworks Stroke

Slice header and footer

We need to slice each of these graphics independently so that we can insert them in our web page when needed. Follow these steps to slice each one:

Fireworks Header slice

Follow the same steps to slice our footer graphic, except give our slice a name of footer.

Slice our page background

Follow these steps to slice our page background:

Slice our columns

In order to create and simulate equalizing columns in CSS, we have to be creative with the use of images. In our layout, we’ll create one slice which will span both our navigation and right columns. We’ll then write a CSS rule which will repeat this graphic along the y-axis. When content is added to our web page, the graphic will repeat vertically which simulates equalizing columns. More on this concept will be discussed later when developing our web page. Follow these steps to slice our two columns:

Fireworks Slice Tool

Fireworks Slicing two columns

Export and save our images

In Fireworks, we can export and save our images using the same method. Follow these steps:

Fireworks Slice tool

Navigate to the directory where you have stored the project files download, your images should be present. At any time, you can modify colors, text and then export your images to your directory and they will be reflected in your website.

Save our layout

In order to make modifications to our layout in the future, we need to save it as a portable network graphic (PNG), which is Fireworks native editable format. Follow these steps:

Once completed, close Fireworks, we’re done with it.

We'll continue with creating our web page next.