Creating a roll-over text effect with CSS in Dreamweaver 8

(beginner level)

Rollovers make a web-page more dynamic and intuitive for the viewer. Having the link text change when the viewer mouses over the link allows the viewer to more easily determine what is a link and what isn't.

In HTML (Hypertext Markup Language) - links have three stages, the link (before the viewer clicks on it), the active link (this displays for the brief second as the viewer clicks on it) and the visited link (which appears after the viewer has followed the link and then returned to the starting page). Using CSS (Cascading Style Sheets) allow us to add one more stage, hover. The hover stage appears when the user's mouse is over the link but the link hasn't actually been clicked yet.

This tutorial assumes that you have already defined a site and are working on a page within that site.

To make this tutorial easier to follow we recommend that you set your workspace to Designer so that all the panels and tools appear in the same position as we are using. Choose Window > Workspace Layout> Designer

Step 1:

We are going to start by creating a simple link on your page. Start by typing the text you wish to make a link. In this example I am going to link to TrainStation.

Step 2:

Select the text and then in the link box on the Properties panel. Type in the full URL of the address you wish to link to. In my example that would be http://www.trainstation.cc

Your text will show the default link behaviour with the standard underline.

Step 3:

Open the CSS Styles Panel by using the twirl down (black arrow) . If for some reason the CSS Styles panel is not displayed on the right hand side of your screen choose Window > CSS Styles or F11 or click the CSS button on the properties button to launch the CSS panel.

The CSS panel will now expand.

CSS uses a series of statements called Rules to set the attributes of various objects. In this case it is going to allow us to specify the font, colour, weight and behaviour of our link tags. The CSS panel will simplify the process of Rule creation.

Step 4:

Click on the New CSS Rule Button (circled in the screen capture above). This will launch the New CSS Rule dialog box.

The first rule we are going to create will define the appearance of our links before a viewer clicks on them. In CSS terms that would be the a:link.

Tip: A standard that many designers follow is to have the links starting appearance brighter than the surrounding text, even brighter when the link is active, and then once the link has been visited they set the link color to the same colour as the text. This makes it easy for the viewer to know if he or she has already followed a link or not.

Set the following:

• Selector Type choose Advanced (IDs, pseudo-class selectors)
• Selector - use the drop down menu to select a:link
• Define in - This document only

Then Click OK

Step 5:

The CSS Rule definition for a: link dialog box will launch. This is the interface that will allow you to set all the various properties for your a:link.

Because we are working with fairly simple text links all the options we are going to use today will be found under the Type Category which displays by default.

Set the following:

• Font - choose a font set.
• Size - choose the size of the text for your links ( a good rule of thumb is to keep links the same size as your text).
• Weight - select from normal, bold, bolder etc.
• Style - choose from normal, italic and oblique. * Oblique is often not supported in the browsers.
• Variant - Allows you the small caps option.
• Colour - choose a noticeable colour so that your links stand out.
• Decoration - It has become popular strip off the underline on links - if you wish to dispense with the default underline for links select none.

Click Apply and look at text link you created at the beginning of the tutorial. Clicking Apply instead of OK allows us to preview our changes before commiting to them. Experiment with some different fonts, sizes, colours etc. Then Click OK when you are happy with the appearance of your a:link.

Simple Html link	After applying CSS

We have changed the appearance of our link but it still doesn't do anything.

Step 6:

Repeat steps 4 & 5 for a:active, a: hover and a: visited. Choose a different colour for each.

At the end of this process Dreamweaver's CSS panel will have generated code similar to that below (depending on the choices you made).

<style type="text/css">
<!--
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #6666CC;
text-decoration: none;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #6699CC;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #6600CC;
}
a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF0066;
}
-->
</style>

Step 7

In order to test our roll-over behaviour we have to view it in our browser.

Choose File > Preview in Browser > Choose one of the Browsers on your system.

Dreamweaver will prompt you to save your file if you haven't already.

Test your link.

This is my example: Trainstation

© TrainStation - an Adobe Authorized Training Provider
all rights reserved
Author - Leslie R. Williams