Hover Tags

In our other exercise, we covered how to change link colors. The code below provides examples of what the CSS Selector option in DW creates for changing standard link colors. (Remember, when selecting the CSS Selector option, under the "Selector" drop down menu, you are given options for four types of tags (link, visited, active and hover). We talked about the first three in the other exercise.

:link { color: #FF0000} /* for unvisited links */
:visited { color: #FF6600} /* for visited links */
:active { color: #800080} /* when link is clicked */

Now let's add "Hover" to the conversation. You've probably seen websites where the link changes color when placing your mouse cursor over the link text. This is how it is done.

:hover { color: #0000FF } /* when mouse is over link */

1. Simply select the "New CSS Style" button. In the "New CSS Style" window, select "CSS Selector". In the drop down menu for "Selector", choose Hover.

2. In the "CSS Style Definition" window, under the text area, select what color or other elements you'd like to change when users place their mouse cursor over the link text. WARNING: you can select a different font or weight but that will often lead to not so subtle changes to the text that sometimes disrupt the leading of paragraphs and other funny stuff. Usually, the color, an underline and/or background color is added. Anything that changes the sizing is too disruptive.

Lists

In this example, we will use the Listamatic website to review samples of different options and co-opt what others have built to add to our website. Spend a moment going to the Listamatic website and examine the variety of options that can be applied to lists. (If you desire, this site provides code to implement any of the examples provided. You can use these to add to your site later on.)

For this example, we are going to use DW to setup a list that uses an image instead of the default round bullet.

1. Download and example bullet image

• right-click
• select "Save Picture As"
• Save to your local website area (E:\Student Drive)
• Make sure the image is within your site (in your site window)

2. Create a new "Redefined HTML Tag" for the list element <li>. In the CSS Style Definition window, under the Category "List", you will need to select this image under the "Bullet Image" line (by clicking the "Browse" button and locating the image. [While in this window, look at the different options under the "Type" drop down menu for types of bullet items.]

Boxes

It's very easy to add a simple block into your pages without using a <table>.

1. Create a "New CSS Style" selecting the "Make Custom Style (class)" type. Give it a name of "box".

2. In the "CSS Style Definition" window, add the following items:

• under the "Background" category, select a "Background Color" (we've chosen grey below)
• under the "Box" category, choose a "Width" (we've chosen 50%) and choose a "Padding" amount (we've chosen 2 pixels)
• under the "Border" category, select the "Style" (we've selected "dashed"), the "Width" (this is the width of the border and we've select "thin") and the "Color" (we've selected "black").

3. To add this to your page, select a block of text you'd like to appear in the box and under the "Apply Styles" area of the CSS Styles tab, select the "Box" style. This will apply the box style to the element (probably the <p> tag)..

This is a box. It is a simple box and can be used to highlight areas instead of <table> the table element. They also look fun and people like them.

Boxes and Layers

We will use an example provided at the Layout Resevoir to create a Block based layout. We will choose a two-column layout example since it closely matches how many of your sites are setup. I've taken the code from the site and collapsed it into a single HTML page (the CSS rules are embedded to make it easier to deal with in-class).

1). Download this webpage (right-click on this link and select "Save Target As"). Save it into your (E:\Student Drive) folder.

2). Personalize the web page a little (change some of the text here and there) in Design View.

3). Upload on your web page and view.

This can give you an idea of how blocks (and layers in this case) can tranform your layout and how you achieve it. This will hopefully give you the resources and some hints on how you can use pre-built layouts to help tranform the structure of your sites.

Some of you may wish to implement this on your sites. Go ahead. However, you'll want to pull the embedded styles out and add them to your external style sheet (you can simply cut and paste).