Creating faux columns and editable regions in Dreamweaver.

We want the columnbar image you created in Photoshop to repeat all the way down the page. First, double-click the reporterstyle.css file in the Files Panel to view the style sheet.

Here, you will see the Style Rules organized for each unique element in the site.

In the Wrapper code, type the following additional features for the #wrapper:

overflow: hidden;

margin: 0 auto;

background-image: url(images/columnbar.png);

background-repeat: repeat-y;

To make this appear properly, we need to add one more bit of code, so that if the content is longer than the browser window, the colors will continue when you scroll. Open the template in Code view.

After the last column closing <div>, but before the closing of the wrapper <div>, type: <div id="clearfloat"></div>.

Make a New Rule for this ID.

Select Box > Clear > right in the Rule Definition window.

Click OK.

Select File>Save All...

...then view your page in Design view.

Now, let’s make the text editable.

On the template in Design view, select the text in the left column.

Select Insert > Template Objects > Editable Region.

Name this “Left Column” or something similar.

Repeat for the center and right column.

Select File > Save All.

You have now created faux columns and editable regions.