Lab 6 - It130

Each of you must do your own lab. You can get as much help as you like from me or your classmates. Remember you have to turn in all of your labs.

  1. On your students account and your local system, create a subdirectory of lab called lab6 . Upload this lab to that subdirectory.
  2. Create a subdirectory of lab6 called images. Both at your students account and local directory.
    1. Install Photofiltre. Go to http://www.photofiltre.com Remember you cannot install into program files or on the C drive. Install into your hci201 folder.
      • Click the downloads link to your left
      • Click the English Version in the downloads section
    2. Download the sample photos on the second row, save them to your images directory. Make sure you click on each image first before you save them. Do not download the thumbnails. Go to http://condor.depaul.edu/~alarrain/hci201/photo.html
    3. Use photo ginjoe.jpg. Load it into Photo filtre. Make a duplicate.
      • Select Image.
      • Select duplicate
    4. Make a thumbnail out of the duplicate.
      • Select Image
      • Image Size

      Choose 100 for the width, the height should scale accordingly

    5. Save the thumbnail to your images directory. A good name would be ginjoethumb

      6. Usually thumbnails are saved as gif files. Select gif when saving. Your file should be ginjoethumb.gif

    6. Make sure both ginjoe.jpg and ginjoethumb.gif are in the images directory. Create a simple web page that contains this code. The HTML file should be saved to lab6 directory.
      7. <a href="images/ginjoe.jpg"><img src="images/ginjoethumb.gif"></a>

      Click on gin joe thumb, you should see the larger image.

    7. Add the dimension attributes and alt attribute to the above image tag. Also close the image tag.
      8. Remember width= height= alt=
    8. Add the following style to the above web page.
      9. img{border:0;}
    9. Make another thumbnail using another image. Add this to the above web page. Don't forget to make a duplicate of the image first
    10. Load the flower image into photofiltre. Play around with some of the filters, selection tools. Don't be afraid to experiment.
    11. Make the new flower into a thumbnail(Duplicate it first) and add it to the above thumbnail html file.
  3. This is one html file. This part of the lab will show you how to do a two column layout using css. Get the HTML code for http://condor.depaul.edu/~alarrain/hci201/examples/hw1nostyle.html

    4. View Source and save the code into your local system. Make sure the file name is hw1com.html

    1. You will add the styles using an external stylesheet. Create a text file and save it as twocolstyle.css
    2. Add the following styles to the stylesheet, but first link the HTML file to the stylesheet. Add the following html code to the head section of the HTML document.
      3. <link href="twocolstyle.css" rel="stylesheet" type="text/css" />
    3. Now add the styles to twocolstyle.css #header { background:#CCC; padding:15px; } #main { background:aqua; float:left; width:60%; padding-left:2%; } #main li { line-height:1.4em; } #rightbar { margin-right:5%; margin-left:62%; } #rightbar h2 { margin:0; padding:0; } body { font-family:verdana, sans-serif; margin-right:5%; margin-left:2%; }
    4. Add some of your own styles to make the document look visually appealing.
    5. Upload all your files to your lab6 directory. Upload all images to the images directory of lab6 at your students account.
  4. Look over homework2
  5. If you do not have any questions you can leave