Introduction

Today we are going to cover:

  1. Styling Links
  2. Styling Lists
  3. Positioning with float
  4. Style class - define and apply
  5. External style sheets - defining and using
  • Fire up Dreamweaver and open up the rugby.htm page that you were styling on Monday.
  • Make sure that you have the Code / Design View pane open.
  • Copy T:\right1_12.gif and T:\right2_12.gif from Temporary drive T: to H:\www\graphics (ie your graphics folder inside www folder)
1. Styling Links

Follow instructions from Monday's Basic Styles exercise.

2. Styling Lists

Read Castro chapter x p

Create Style
Type : • Redefine HTML tag
Define in : • This document only
Tag :   pull down to ul
Category : List
Type : Disc (this shows up if the image isn't present)
Bullet Image : Browse to graphics\right1_12.gif
Position : Inside

Preview in Netscape.
Q1 : Can you right-click on the bullet graphic to save it? Why not?

This looks cool but the nested list has the same bullet.
We can fix that!

Create Style
Type : • Use CSS selector
Define in : • This document only
Tag :   type in ul ul

We're styling ul ul because we want to hit the nested unordered list. Make sure you notice the differences in this style defintion.
Category : List
Type : Circle (this shows up if the image isn't present)
Bullet Image : Browse to graphics\right2_12.gif
Position : Outside

We now have separate bullets for both levels of the list.

3. Adjust width heading boxes

It would be nice if we could get <h2> boxes to be the same width as their text.

In Design : CSS Styles pane: 
double-click h2 style
Category : Box
Float : left

Woops - looks like we have the same situation as we had when we did align="left" on a graphic image.

Q 2 : How can we fix this problem?
Take a look at the text below graphic section of the Graphics with HTML session.

Now add the appropriate tag and attributes under each <h2> heading.
4. Create a “pull quote”

Create a “pull quote”. Using <div> and style class.

It would be nice to make a pull quote for the Marcel Garvey picture and have the caption and quote go directly underneath.

Firstly we need to add a container around the image and text that just applies a style and does nothing else. We'll use the <div> tag to do this. Remember that this is a block level tag and so has a clear box around it.

  1. Make some room around the "Garvey scores a try" image.
    Insert <div> </div> ahead of <img>
    Cut the </div> and paste it in after <img>. Add in a few blank lines between <div> and </div> to make space for the text you'll be pasting in.

  2. Now select the paragraph “Garvey scores try for Gloucester” together with the interview quote.
    Cut it (Ctrl-X) and paste (ctrl-V) it into the newly created <div> area underneath the <img> tag.
    A bit of a mess!

  3. Now add the Break-Clear-All tag (see above) after <img> to put the caption on the next line.

  4. Now we are going to create a style for the pull quote. Let's call it “pullquote” :

    Create Style
    Type : • make custom style
    Define in : • This document only
    Name :   .pullquote
    Category : Box
    Float : right
    Width : 320 pixels

    What has happened? Nothing. We have created the style but we haven't applied it yet.

  5. Apply the style to the <div> tag.

    Click at the end of the first <div| tag
    press space bar
    choose 'class' from the pulldown. Press [Enter]
    select 'pullquote' . Press [Enter]
    You should have something like : <div class="pullquote">

    Now you can tart up the pullquote style with a background color (light!), style italic and smaller text size like what I've done.

  6. Centre image in the box.

    Click on the graphic.
    In Properties: change Align : Right —> Align : none

    Surround the <img> tag with another <div> .. </div> and add align="center" attribute to give:

    <div align="center">
    <img src="..." ..>
    <p> ... </p>
    </div>
5. Save styles as external stylesheet
  • Select File —> Export CSS styles
  • Save as rugby_styles.css
  • Save the web page with File —> Save As rugby_styled.htm
6. Use external stylesheet
  1. Create a new page.
    File —> New : Basic Page —> Create
  2. Attach style sheet.
    In Design : CSS Styles, click on Attach Style Sheet micro-button.
    Add As   • Link
    Browse and find rugby_styles.css. OK
  3. Now enter some text and style with h1 and h2 headings and see the results!
7. Blog work
  • In your blog, use File Upload to upload the rugby_styles.css file into a new entry.
  • Add the web URL (as a link please) to the new rugby_styled.htm page