General Instructions

  1. Display the formatted rugby page and print it out. This is in Adobe PDF format so you won't be able to see any of the html codes. Instead, you'll use Dreamweaver to format your own rugby page to look like this one. You may also want to print out html code demo to remind yourself of the codes we used there.

  2. Open up the beginning rugby page and save the page as rugby.htm in h:\www (File —> Save Page As in Netscape). Notice the ancillary "rugby files" folder.

  3. Start up Dreamweaver and create a site in the normal way pointing to h:\www (use the Advanced tab).

  4. Open up rugby.htm. You'll see a simple unformatted web page with some graphics and space for a table.
    You are going to do some html work on this; in subsequent sessions we'll be using this file to try out styles.

  5. Now you need to follow the instructions below and practice the following html :

    • headers <hn>....</hn>
    • Index as a nested list with internal links
    • aligning graphics left and right. Line break with clear all.
    • super scripted link to point to URL reference
    • blockquoted text with quotes
    • data table
    • email link
Apply Headings
In the Design pane:
highlight the heading text and from the Properties pane choose Format : Heading 1 / Heading 2 / Heading 3 whichever is appropriate.
Heading : Heading Text
h1 : Rugby - a beginner's guide
h2 : The Game, Scoring, Six Nations results, References
h3 : Duration, Players, Officials, Try
Insert Index

In Code Pane:
click after </h1> and press [Enter]
create the heading level 2 code and type in "Index"

create a nested unordered list with:
h2 headings - disk
h3 headings - circle

Comme ça:
Align Graphics
In Design pane:
rugby_field.gif
align left
add alt and title "rugby players and positions"
pitch.gif
align right
add alt and title "rugby pitch"

In Code Pane:
Now click after the paragraph and press [Shift][Enter] to insert a line break.
Add the clear all attribute to put the following paragraph underneath the graphics.

In Design Pane:
Align lions_300.jpg to the left, enter appropriate Alt and Title text and add a line break with clear all.
Align garvey_glou_pa300.jpg to the right and add appropriate Alt and Title text.
Align the caption paragraph to the right so that it goes underneath the graphic.
Superscript footnote reference
In Code pane:
Immediately after the paragraph"Garvey scores try ..." insert the superscript code and the number 1 (check html code demo to recall how to do this)

In Design Pane:
Click in front of the Reference "1. Link for Garvey ..." and insert an anchor called note1.
Highlight the superscript 1 and use the "point to file" pointer to make the link to the anchor you've just created.
Links and Stuff
In Code Pane:
Make the quote that Marcel Garvey gives to the Citizen a blockquote.
Add curly left and right quotes around it. (Insert bar : Characters tab).

In Design Pane:
Make the news.bbc.co.uk.... reference a link to itself (ie highlight the text and paste it into the link box) in a new blank window.
Insert a horizontal line.
Type Send email to your own name and highlight your name. In Properties : Link type mailto: username at earlham dot edu (to avoid spam).

Internal links

Insert appropriately named anchors just before all <h2> headings and link from the Index list items to these anchors.
Insert anchor called top just before the <h1> heading and link all the home.gif graphics to this anchor so that you can easily go back to the top.
Insert table

Within Dreamweaver, open the Table Practice file called table.htm that you have just created.

In Code Pane:
Select all the codes from <table> down to </table> and copy to clipboard.

Now switch to the other file, rugby.htm which should also be open (just click the tab at the bottom).

In Code Pane:
Highlight paragraph <insert six nations table here> and paste in the table - it'll overwrite the stuff you've just highlighted.
Now click Refresh and your results table appears in a new file!
Finishing up

When you have finished, paste the web URL to this page into your blog. Remember that it's in the format http://www.earlham.edu/~username/filename.htm.