Adding a Website Footer

Create the footer credits

The last thing to take care of is the credit which is seen at the foot of the website. For this site this is nice and easy - all we need to do is create a DIV tag which will be contained inside the ud-footer tag we created earlier.

To achieve this, in Design View click inside the ud-footer DIV container and locate the cursor in Code View. It should be flashing inside between <div id="ud-footer"> and its closing </div>.

Click Insert DIV Tag from the Insert palette and click New CSS Rule in the dialogue box, ensuring that ‘At Insertion Point’ is selected in the Insert: menu.

In the New CSS Rule dialogue, Selector Type should
be Class, Selector Name should be credits and your existing CSS file should be where the Rule Definition is defined.

In the CSS Rule Definition Pane make sure the following settings are applied:

Under Type

Font-size: 1.4 em
Font-style: italic
Font-Color: #666666

Under Block

Text-align: right
Display: inline

Under Box

Float: right
Margin-top: 32
Margin-right: 60

These Type settings make sure that the font appears at approximately 14 point size, is italic and colored gray. The Block align the text right and neutalise the IE6 double-margin bug. The Box settings float (align) the DIV Tag to the right, position it vertically correctly over the green border and keep it 60 pixels from the right of the ud-footer DIV Tag.

designTIP

Make the most of your footer
Footers can be so much more than just a 'signoff' or somewhere to dump the company address and Ts&Cs.. as is demonstrated in these sites:
Blog.SpoonGraphics
Red Tiki
Freelenz

Once done, replace the default text in the new DIV with your own credit. Mine is:

All content © Nick B Davies • www.using-dreamweaver.com

In Design View select the website address shown within the credit (assuming you have a link to activate) and create a hyperlink in the Link field of the Properties palette. Mine is:

http://www.using-dreamweaver.com

You’ll notice that the link turns blue - but I want it to be gray. To achieve this, open your CSS document, scroll down to the .credits entry and click below the closing bracket. Paste the following:

.credits a {
}

Click ‘Refresh’ in the CSS Styles Palette and locate the new style. Double-click it to edit it.

In the CSS Rule Definition Pane make sure the following settings are applied:

Under Type

Text-decoration: none
Font-Color: #666666

This will do away with the underscore and blue color.

...and we're done. Next we can create 'editable regions' in our template.