HCI 201 - Project Preparation Part 2

1. On your webserver and your local system, make sure you have a subdirectory called project. On yourwebserver project should be a subdirectory of hci201.
2. Make sure you have a subdirectory of project called images. Both at yourwebserver and local directory.
3. Go to http://condor.depaul.edu/~alarrain/hci201/project/greenback.jpg and download the green background. This must be saved to your images directory.
4. For this part you will create an external style sheet that will add style to tempnostyle.html.

   Make sure you view the page in your browser after you add each style.

   • Create a blank text file named style.css. Save style.css to the project directory. This file must be named style.css You will add the following styles to this file. After each style you add you must save the file.
   • Add this style to the file.
   body{margin:2% 8% 2% 8%;background:white;}
   • After you add the above style now you need to link this css file to your html document. Insert the following HTML code between the head tag of HTML file.
   <link href="style.css" rel="stylesheet" type="text/css" />
   • Add this style to the file.
   #head { background-image: url(images/greenback.jpg); height:90px; }

   Don't forget to view it

   • Add this style to the file.
   #head img { float:left; margin-right:10px; }
   • Add this style to the file.
   #head h1{ font-family:"New Century Schoolbook", "Book Antiqua", serif; font-size:1.5em; color:darkmagenta; margin:0; }
   • Add this style to the file.
   #head p{ font-size:1.2em; margin:0; }

   Don't forget to view it

   • Add these styles to the file.
   #navigation a { color:greenyellow; text-decoration:none; } #navigation a:hover{ color:salmon; text-decoration:underline; }

   Don't forget to view it. Place the mouse over the navigation links.

   • Add these styles to the file.
   #navigation table{font-size:1.2em;background:black; } #navigation td{padding-left:1em;}

   Don't forget to view it. Place the mouse over the navigation links.

5. Rename tempnostyle.html to index.html
6. Make sure you have a directory at yourwebserver named project. This directory must be a sub directory of hci201.
7. Transfer index.html, style.css to your project directory.
8. Make sure you have a sub directory of project named images.
9. Transfer the green background and the picture of suzie to your images directory.
10. Type the following URL into your browser.
http://XXX.comlu.com You should see the template web page