Photo Gallery Project

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Create thumbnail images
  • Turn thumbnail images into links to other web pages.
  • Utilize appropriate navigation schemes for a multiple-page website.
  • Add captions to images
  • Use external style sheets

Instructions

Finding Images and Creating Thumbnails

  1. Create a new folder called “Photo Gallery”.
  2. Search the internet for five images related to the place you’d like to visit for a year.
    1. You may use public domain images from websites or search for images at images.google.com.
    2. To save the image, right-click on the image and choose “Save Image As”. Make sure you save it in your Photo Gallery folder.
  3. Once you’ve save the five images you’d like to use, open Adobe Fireworks.
  4. You will now create thumbnails for all of your images. To create the thumbnails, complete the following steps for each of your five images:
    1. Select File > Open and open the image from your Photo Gallery folder.
    2. Select Modify > Canvas > Image Size. Make sure that Constrain Proportions is checked. Type in new values for the width and height. Thumbnail images should be about 250 pixels wide.
    3. Select File > Save As, and navigate to your Photo Gallery folder.
    4. Add “sm_” to the beginning of your filename. For example, if the filename is “Anchorage”, change it to “sm_anchorage”. The ‘sm_’ indicates that it’s a small file – the one to be used for the thumbnail.
    5. Close the file by selecting File > Close.
    6. Repeat these steps for each of the five images you saved.

Creating Your First XHTML File

  1. Use the Skeleton to start a new XHTML document.
  2. Highlight all of the XHTML code. Then, press Ctrl and C at the same time to copy it.
  3. Open Notepad. Select Edit > Paste to paste the code into your Notepad file.
  4. In Notepad, select File > Save As. Navigate to your Photo Gallery folder. Make sure All Files is selected from the Save As Type dropdown. Save your project as index.html. This will be your main page with all of the thumbnail images.
  5. Delete the comment that says <!– Site content goes here –>.
  6. Change the title of the document to (your name)’s Photo Gallery.
  7. Add a heading. Your heading should tell us the place you’d like to visit.
  8. Repeat the following steps for all five of your images:
    1. Add a beginning and ending paragraph element.
    2. Within the paragraph, add your thumbnail image using an <img> element. Remember, the thumbnail files are the ones that begin with sm_.
    3. Each image must have the following attributes: src, border, and alt.
    4. After the image, write one or two sentences describing the image.
  9. Separate each paragraph with a horizontal rule. Don’t forget to specify how long you’d like the line to be.

Creating Pages for Each Image

  1. Next, you’ll create the individual pages for your separate images.
  2. Once again, create a new XHTML document using the Skeleton.
  3. Highlight all of the XHTML code. Then, press Ctrl and C at the same time to copy it.
  4. Open Notepad. Select Edit > Paste to paste the code into your Notepad file.
  5. In Notepad, select File > Save As. Navigate to your Photo Gallery folder. Make sure All Files is selected from the Save As Type dropdown.
  6. Save this page as firstImage.html. This will be the page where the large image is displayed.
  7. You’ll create a separate page like this for each of your five images. First, we’ll add some elements that will be displayed on all five of your image pages. We want the ability to go from any image page directly to any other image page, so we’ll add links to each image page at the top of our document.
  8. Delete the comment that says <!– Site content goes here –>.
  9. Change the title of the document to “(your name)’s Photo Gallery”.
  10. At the top of the <body> section of your XHTML document, add a link to return to the home page, which is index.html.
  11. Add a link to the first image page, which is firstImage.html. Add a line break after this link so that the next link appears on its own line. If you’d like an example of how to add line breaks to a web page, find the reference information on the class website.
  12. Add a link to the second image page, which is secondImage.html. Add a line break after this link so that the next link appears on its own line.
  13. Add links to the third, fourth, and fifth image pages. These filenames will be thirdImage.html, fourthImage.html, and fifthImage.html. Add line breaks after each link.
  14. Add a heading. Your heading should briefly tell us about the picture that will be displayed on this page.
  15. Add the first image to your document. For example, if your first thumbnail image in your index.html page is sm_anchorage.png, the image you should add to your first image page is anchorage.png.
    1. Note: Your files may have a different extension than .png. Common file extensions for images are .png, .jpg, .gif, .tif, and .bmp. Make sure that you’re using the correct extension for your images. The extension for your image can be found by opening your Photo Gallery folder and looking at the information for the image.
  16. Save this file again as firstImage.html. Make sure that the Save As Type dropdown has All Files selected and that you are saving in the Photo Gallery folder.
  17. We’ll use this page for all of our image pages, and just change the elements that need to be changed. Save the file again as secondImage.html.
  18. Save the file again as thirdImage.html.
  19. Save the file again as fourthImage.html.
  20. Save the file again as fifthImage.html.
  21. Open secondImage.html in Notepad and make the appropriate changes. Change the heading to something appropriate to the second image. Change the image element so that the second image is displayed instead of the first.
  22. Repeat the previous step for thirdImage.html, fourthImage.html, and fifthImage.html.

Creating Links from Your Thumbnail Images

  1. Open Photo Gallery\index.html file in Notepad.
  2. When the user clicks on a thumbnail image, the appropriate image page should load, showing the larger image. To do this, we can turn our images into links.
  3. Create <a> elements around all of your images, like this:
<a href="firstImage.html">
<img src="sm_anchorage.png" border="1" alt="Anchorage" />
</a>
    1. Remember, anything between the <a> and </a> tags is turned into a link. When we place text between these tags, the text becomes blue and underlined so the user can click on it. When we place an image between these tags, the image border turns blue (if the image has a border), and the user can click on the image.
  1. Save your file again as index.html. Make sure the Save As Type dropdown is set to All Files.
  2. Open index.html in your web browser (Internet Explorer) and make sure the links work. If something isn’t working, check for these common mistakes:
    1. The filename is spelled wrong.
    2. The filename is missing an extension or has the wrong extension (.html, .png, or .jpg, for example).
    3. The file is not in the correct folder.
    4. One of the XHTML syntax rules has been broken.

Styling Your Website

  1. We’ll use an external stylesheet for our site so we don’t have to repeat our styles on each page.
  2. Add the following line somewhere within the <head> section of all of your .html pages (index.html, firstImage.html, secondImage.html, thirdImage.html, fourthImage.html, fifthImage.html):
<link rel="stylesheet" href="theme.css" />
  1. Open Notepad. Start a new document.
  2. Select File > Save As. Navigate to your Photo Gallery folder. Make sure All Files is selected from the Save As Type dropdown. Save the file as theme.css.
  3. Define for the following elements:
    1. Paragraphs: Color, font style, font weight, font size (all of these properties are required)
    2. Headings: Text align, font style, font weight, font size, font family (all of these properties are required)
    3. Any other styling you’d like to add
    4. Note: You do not need to encapsulate your CSS code in <style></style> tags like you did when you added it right to your XHTML document. We’re using a different technique here. We are putting all of our CSS styling code into its own file. Each of our XHTML pages is linked to this file, so when we make a change to this file, the changes will cascade to all of our XHTML pages. Hence the name Cascading Style Sheets.

Rubric

Index.html Page Possible Points Score
The page contains a header with the name of the place 2
A paragraph explaining the place is located after the header. 2
Thumbnail images are smaller versions of the original images 5
Paragraphs explain each of the five thumbnail images 5
The thumbnail images are placed just to the left of the paragraphs 5
Paragraphs are separated by horizontal rules 2
Each image links correctly to the appropriate image page 5
The XHTML page is linked to an external CSS file 2
Styles are applied to headings and paragraphs 8
There are no XHTML syntax errors. The content is accurate. 4
Five Image Pages
Each image page contains links back to the home page and the other image pages 5
Each image page displays a heading explaining the picture 5
Each image page displays a full-size version of the appropriate image 5
The XHTML page is linked to an external CSS file 5
The project was submitted on time (20% off for each day late)
Total Score 60

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.