Lab 10a - HCI 201

  1. Create a directory named lab10 at your webserver and locally.
  2. Check your project online. That is, using both explorer and firefox view your project. If your page does not display the way you intended. Check for a few things.
    1. The style sheet has no syntax errors. (Using colons and semi colons)
    2. file names you link to should not contain spaces.
    3. Make sure all images are uploaded to your webserver
    4. Cgeck the casing pic1.jpg is different than pic1.JPG

    It is a requirement for the remaining part of the lab to use FrontPage. FrontPage is installed in all of the Depaul labs. If you have Dream Weaver you can use that as well. Dream Weaver is not in the Depaul public labs.

  3. Open up FrontPage and look around. Hover the mouse over tool bar items. You will notice that many of the items are self explanatory. Write a simple web page using FrontPage using headings and lists. Redo the fivers exercise from lab2a question 2, add three groups of fivers. Each group should have a heading and each fiver group should be a list. See the FrontPage tutorial. http://condor.depaul.edu/~alarrain/hci201/frontpage
  4. Add a hyperlink to the above fivers document. Follow instructions from the FrontPage 2003 tutorial.
  5. For this problem you will create a simple web page using tables in FrontPage 2003. The page will consist of a background image, a heading, a 3 by 5 table and some links. Also, some styles will be added.
    1. Create a new Blank Page in front page
    2. Add the following heading (h1) to the page. Do not align it or change the font, you will style this later.

      House Of Tunes Concert Schedule 2005
    3. Follow the step by step instructions, under Adding a Table section, in the FrontPage 2003 tutorial.

      http://condor.depaul.edu/~alarrain/hci201/frontpage
    4. Download the background image

      http://condor.depaul.edu/~alarrain/hci201/frontpage/bluemusic.jpg
    5. Add the following styles.


      body{
      margin:2% 5% 2% 5%;
      background-image: url(bluemusic.jpg);
      }

      h1{
      font-size:1.5em;
      margin-left:-1em;
      }

      table{
      background:linen;
      font-size:1em;
      font-family:verdana;
      color:maroon;
      font-weight:bold;
      }

      th{
      background:maroon;
      font-size:1.2em;
      color:linen;
      font-family:"High Tower Text";
      }

      table a{
      text-decoration:none;
      color:maroon;
      font-weight:bold;
      }

      table a:hover{
      color:darkviolet;
      }
    6. Next,  turn the data in the website column into hyper links.
      http://www.georgebenson.com

      http://www.jeffbeck.com