Lab 14 - HCI 201

Remember to upload your work to your students account.

It is a requirement for this lab to use FrontPage 2003.

  1. Add a hyperlink to a FrontPage document.  Follow instructions from the FrontPage 2003 tutorial prepared by me.

    2. http://condor.dpeaul.edu/~alarrain/hci201/frontpage
  2. Read the section Adding Pictures from the tutorial. For this question work the example. That is, you must insert the image of the Biograph into a blank document, resize it, add the alt attribute and play around with the pictures tool bar. Follow the example step by step. Do not alter the alignment of the picture. The picture should be aligned left.
    1. Cut and paste some text into the Biograph image document. Get the text here.
      2. http://condor.dpeaul.edu/~alarrain/hci201/frontpage/biotext.html
    2. Place this text on a new paragraph after the image.
    3. Next add the following styles to the Biograph image document. To do this go into Code View. Remember the styles go between style tags in the head.
      4. .rightimage{ float:right; margin-left:20px; margin-bottom:5px; } p{ text-align:justify; }
    4. Now you want to get the image tag to recognize the rightimage class style. This style will float the image right and allow the text to wrap around the image.

      1. Right Click on the Image ---> Select Picture Properties
      2. From the Picture Properties Dialog press the Style Button (Lower left corner)
      3. From the Modify Style Dialog box , look for the text box labeled class.
      4. In the textbox type in rightimage
      5. Click okay
      6. Look at the html code for the image tag you should see  the code attribute  class="rightimage"
      7.  If all went well the image should be floated to the right.
    5. Next we want to insert a horizontal line.

      1. Place the cursor at the end of the last line of text, right after the word 2005.
      2. Hit enter.
      3. From the Menu bar click Insert --> Horizontal line.
      4. Now we want the horizontal line to clear the image.
        1. Add the CSS code to the biograph document, remember switch to code view.
          2. .clear{ clear:both; }
        2. Go back to Design View, and highlight the horizontal line.  To highlight, just click the line once
        3. Right click on the highlighted line and select Horizontal Line Properties
        4. Press the Style button
        5. Enter the class name clear in the Class text field.
  3. For this part you will add a drop cap to the Biograph document.  A drop cap is a very large letter at the beginning of an article.
    1. Type the following CSS code into the Biograph document, remember to switch to code view.

      .dropcap{
      float:left;
      background:brown;
      color:white;
      font-family:arial;
      font-size:3em;
      margin: 0 .3em 0 0;
      padding: 0.1em 0.2em 0.2em 0.2em;
      border:2px solid green;
      }

    2. Replace the first letter 'T' with the following HTML code

      <span class="dropcap"> T </span>

  4. Upload your html document and the Biograph picture to your students account.
  5. Finish  lab13,  1-8