PHOTO GALLERY
Creating a multiple page website with cascading style sheets
This project will demonstrate your ability 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
Finding Images and Creating Thumbnails
1. Create a new folder called “Photo Gallery” in My Documents\Create A Web.
2. Search the internet for five images related to the place you‟d like to visit for a year.
a. You may use images from websites or search for images at images.google.com.
b. To save the image, right-click on the image and choose “Save Image As”. Make sure you save it in your
My Documents\Create A Web\Photo Gallery folder.
3. Once you‟ve save the five images you‟d like to use, open Macromedia Fireworks (Start > All Programs >
Macromedia > Macromedia Fireworks MX)
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:
a. Select File > Open and open the image from your My Documents\Create A Web\Photo Gallery folder.
b. 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.
c. Select File > Save As, and navigate to your My Documents\Create A Web\Photo Gallery folder.
d. 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.
e. Close the file by selecting File > Close.
f. Repeat these steps for each of the five images you saved.
Creating Your First XHTML File
5. Open the class website: http://www.myteacherpages.com/webpages/roggenkamp. Select the My Resources link
on the left, and then select XHTML Document Structure.
6. Highlight all of the XHTML code. Then, press Ctrl and C at the same time to copy it.
7. Open Notepad. Select Edit > Paste to paste the code into your Notepad file.
8. In Notepad, select File > Save As. Navigate to your My Documents/Create A Web/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.
9. Delete the comment that says .
10. Change the title of the document to (your name)‟s Photo Gallery.
11. Add a heading. Your heading should tell us the place you‟d like to visit.
12. Repeat the following steps for all five of your images:
a. Add a beginning and ending paragraph element.
b. Within the paragraph, add your thumbnail image using an element. Remember, the thumbnail files
are the ones that begin with sm_.
c. If you need an example of how to add images to a webpage, follow the links on the class website: Go to
Create A Web, then click Adding Styles to Web Pages, then click Adding Images.
d. Each image must have the following attributes: src, border, and alt.
e. After the image, write one or two sentences describing the image.
13. 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
14. Next, you‟ll create the individual pages for your separate images.
15. Open the class website: http://www.myteacherpages.com/webpages/roggenkamp. Select the My Resources link
on the left, and then select XHTML Document Structure.
16. Highlight all of the XHTML code. Then, press Ctrl and C at the same time to copy it.
17. Open Notepad. Select Edit > Paste to paste the code into your Notepad file.
18. In Notepad, select File > Save As. Navigate to your My Documents/Create A Web/Photo Gallery folder. Make
sure All Files is selected from the Save As Type dropdown.
19. Save this page as firstImage.html. This will be the page where the large image is displayed.
20. 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.
21. Delete the comment that says .
22. Change the title of the document to “(your name)‟s Photo Gallery”.
23. At the top of the section of your XHTML document, add a link to return to the home page, which is
index.html.
a. If you‟d like an example of how to add links to a web page, go to the class website and follow the links:
Create A Web, then Introduction to the Internet, then Links.
24. 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.
25. 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.
26. 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.
27. Add a heading. Your heading should briefly tell us about the picture that will be displayed on this page.
28. 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.
a. 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 My Documents\Create A Web\Photo Gallery and
looking at the information for the image.
29. 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 My Documents\Create A Web\Photo Gallery folder.
30. 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.
31. Save the file again as thirdImage.html.
32. Save the file again as fourthImage.html.
33. Save the file again as fifthImage.html.
34. 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.
35. Repeat the previous step for thirdImage.html, fourthImage.html, and fifthImage.html.
Creating Links from Your Thumbnail Images
36. Open My Documents\Create A Web\Photo Gallery\index.html file in Notepad.
37. 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.
38. Create elements around all of your images, like this:
a. Remember, anything between the and 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.
39. Save your file again as index.html. Make sure the Save As Type dropdown is set to All Files.
40. 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:
a. The filename is spelled wrong.
b. The filename is missing an extension or has the wrong extension (.html, .png, or .jpg, for example).
c. The file is not in the correct folder.
d. One of the XHTML syntax rules has been broken.
Styling Your Website
41. We‟ll use an external stylesheet for our site so we don‟t have to repeat our styles on each page.
42. Add the following line somewhere within the section of all of your .html pages (index.html, firstImage.html,
secondImage.html, thirdImage.html, fourthImage.html, fifthImage.html):
43. Open Notepad. Start a new document.
44. Select File > Save As. Navigate to your My Documents\Create A Web\Photo Gallery folder. Make sure All Files
is selected from the Save As Type dropdown. Save the file as theme.css.
45. Define for the following elements:
a. Paragraphs: Color, font style, font weight, font size (all of these properties are required)
b. Headings: Text align, font style, font weight, font size, font family (all of these properties are required)
c. Any other styling you‟d like to add
d. Note: You do not need to encapsulate your CSS code in 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.
PHOTO GALLERY
Creating a multiple page website with cascading style sheets
Name: ________________________________
Index.html Page Possible Score
Points
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 2
Paragraphs explain each of the five thumbnail images 2
Paragraphs are separated by horizontal rules 2
Each image links correctly to the appropriate image page 4
The XHTML page is linked to an external CSS file 2
Styles are applied to headings and paragraphs 4
There are no XHTML syntax errors. The content is accurate. 2
Five Image Pages
Each image page contains links back to the home page and the other image pages 2
Each image page displays a heading explaining the picture 2
Each image page displays a full-size version of the appropriate image 2
The XHTML page is linked to an external CSS file 2
The project was submitted on time (20% off for each day late)
Total Score 30