Part 2 - It130 - Project Preparation

1. On your students account and your local system, make sure you have a subdirectory called project. On your students account project should be a subdirectory of it130.
2. Make sure you have a subdirectory of project called images. Both at your students account 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 {background:black; margin:0; padding:0; } #navigation ul{margin:0; padding:0; } #navigation li{list-style:none;display:inline; margin-bottom:1%;margin-right:10px; }
   • Add these styles to the file.
   #navigation a{ font-weight:bold; padding:5px; color:#FFF600; text-decoration:none; font-size:1em; } #navigation a:hover { color:#FFF; text-decoration:underline; }

   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 your students account named project. This directory must be a sub directory of it130.
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://students.depaul.edu/~yourLogin/it130/project

You should see the template web page

Do not upload any files to your lab directory. These files go into the project directory.

Go on to Part 3