Photo Gallery

Document Sample
Photo Gallery Powered By Docstoc
					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 <!-- Site content goes here -->.

   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 <img> 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 <!-- Site content goes here -->.

  22. Change the title of the document to “(your name)‟s Photo Gallery”.

  23. At the top of the <body> 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 <a> elements around all of your images, like this:

               <a href=”firstImage.html”>
               <img src=”sm_anchorage.png” border=:”1” alt=”Anchorage” />
               </a>

          a. 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.

  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 <head> section of all of your .html pages (index.html, firstImage.html,
    secondImage.html, thirdImage.html, fourthImage.html, fifthImage.html):

        <link rel="stylesheet" type="text/css" href="theme.css" />

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 <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.
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

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:56
posted:11/3/2011
language:English
pages:5