Thumbnailing Mini-Project

Description

In this project you will be given the XHTML code, image files, and empty CSS file for a half-completed image gallery. You are responsible for editing the images and XHTML as well as creating the CSS code. This project is due on Friday, September 10.

Inheriting a half-done project is a typical experience as a Web designer and developer. Often, clients will hire a cheap designer who only gets partly done, and when the client gets fed up with the slow and/or bad work, they find someone else. For this project, you are that someone else. View the half-finished project here.

Getting the Half-Done Project (Standard 4)

Shows file path in explorer window
  1. Use "My Computer" to navigate to the Shared folders, Central Business, Nielsen, Web3-4
  2. Copy the "thumbnailing" folder into your "web folder" on your I: drive.
  3. Rename the thumbnailing folder so that your login name comes before "thumbnailing."
  4. View the index.html file in a Web browser to see what has been done.
  5. Also open the index file in Notepad to get ready for the next section.

Validating (Standard 4)

  1. Usually Web designers do not know who else worked on a Web site before it came to them. So the first thing to do is validate and make sure you have quality code to start from.
  2. Go to the W3Schools Validator.
  3. Click on the "Validate by File Upload" tab.
  4. Browse for the index file of your project and then click "Check."
  5. Notice there are errors. Start at the top of the list and try to fix them one at a time, revalidating after you fix each one.
  6. When all of the errors are fixed, move on to the next section.

Editing the Images (Standard 2)

Steps 8,9,10 below
  1. In your thumbnailing folder there are two image folders. One is for the originals (which are all present) and one for the thumbnails (which you are about to make).
  2. Choose a width for your thumbnail images. It can be between 100 and 300 pixels, and you may want to think about any other styles you are going to use when you pick the size.
  3. Open Photoshop.
  4. For ALL of the images in the original folder, do the following:
    1. Open the original image out of the "images_original" folder.
    2. Go to File, Save As... and save the image in the "images_thumb" folder.
    3. Now you are safe to edit the thumbnail without risking saving over the original.
    4. Crop the image to focus the visitor on the most important part of the picture.
    5. Resize the image so that it is the standard width you chose in step 2.
    6. Optional: Add an additional effect to all of your thumbnails that gives them a consistent look.
    7. Save.
    8. Use File, Save for Web... and Select JPEG
    9. Use the quality slider to choose a quality that looks ok and has a good file size.
    10. Save. Go ahead and write over the current file.
  5. When this is done for ALL of the images, close Photoshop.

Re-Sourcing and Linking the Images (Standard 4)

  1. Open your index page for editing.
  2. Notice all of the <img> tags. Their source attribute has the path to the file, and it looks like "images_original/somefile.jpg"
  3. For each of those, change "images_original" to "images_thumb"
  4. Save. View the changes in a Web browser. Your thumbnails should now be showing instead of the original images.
  5. Let's link the thumbnails to their originals. For ALL images on the index page:
    1. Find the <img> tag. Around the image tag, place an anchor link tag (<a> tag).
    2. The href attribute of your <a> tag should have a value of "images_original/somefile.jpg"
  6. Save and view the changes in a Web browser.
  7. Test to make sure all of the images are linked to their originals.
  8. Re-validate your code. I expect your code to validate!

Styling (Standard 1)

  1. This page is very boring. Style it until it looks great!
  2. Here are some things I will be looking for:
    1. When you link an image, it automatically puts a blue border around the image. Change that border in some way to make it look better.
    2. Apply background styles that are appealing but not distracting away from the images.
    3. Apply color, font and text styles that make the page easy to read.
    4. The images and their captions are placed in convenient div elements. Use what you know about the box model to style them.
    5. (Hint on the box model: You may want to explore the "float" property of CSS.)
    6. You may have to edit the XHTML to reorganize the content a little bit before applying styles. Do so if necessary and re-validate.
  3. Styling is where I expect to be giving lots of Level 5 grades. Impress me with your designs!

Review Grading Rubrics (Standards 1,2,4)

  1. In your thumbnailing folder there is a Word doc called "grading_rubric"
  2. This file tells you exactly what I will be looking for to assign grades.
  3. I highly recommend that when you think you are done with your project, go into the rubrics and highlight the things you completed.
  4. Then you will know if you are missing anything that will hurt your grade.
  5. It will also give ideas for how to improve your grade.
  6. When you are absolutely sure that you are done with your project, turn it in by submitting to the shared folder.