Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Image Project Six: Personal Website Images

The goal of this project is to prepare six images, one for each page of your Personal Website.The images are required to relate directly to the subject matter on the page. For example, the image on your links.html page should be related to hyperlinks. Each image will be 400 pixels by 400 pixels. The images will be placed on the left side of the table you created for body text in the Personal Website: Div Project.

 

  • Create a new folder inside of your image folder, and name it image_project_six

  • Prepare six jpeg images, 400 pixels by 400 pixels, with a resolution of 72 pixels per inch. You may use any school-appropriate images you wish, as long as each of the six images relates directly to the subject matter of each page of your Personal Website. You may download images from the web, or you may create your own images.

  • Name your images as follows:

    • academics_400x400.jpg

    • gallery_400x400.jpg

    • home_400x400.jpg

    • interests_400x400.jpg

    • links_400x400.jpg

    • tutorials_400x400.jpg

  • Insert your images into the left cell of the table you created in the body div.

  • While the image is still selected, add Alt Text in the Properties panel.

  • Repeat this process for all six pages of your Personal Website.

Example:

links

Welcome to my Links page. Here you will find links to aecenas tempus eros enim, sagittis porta elit tincidunt at. Maecenas tempus eros enim, sagittis porta elit tincidunt at. Proin non arcu sit amet justo mattis ullamcorper a nec augue. Sed in metus est. Vestibulum euismod tincidunt dui vel lacinia. Nulla sagittis nisl sit amet semper sagittis. Fusce egestas dolor eget commodo convallis. Quisque luctus posuere nulla quis interdum. Nullam venenatis, libero quis posuere feugiat, elit urna mollis quam, in pulvinar odio ipsum in sapien. Ut quis lorem at nulla scelerisque tristique. Suspendisse vitae mauris tincidunt, dapibus odio vitae, rhoncus est. Suspendisse varius facilisis malesuada.

Pellentesque fermentum molestie quam, ac volutpat ligula pharetra quis.Vestibulum sit amet odio sollicitudin, molestie arcu id, interdum velit. Nam lacus orci, tempor non consectetur nec, viverra non quam. Fusce tincidunt nunc eget elit dapibus, id eleifend ligula scelerisque. Cras egestas justo in augue vulputate rutrum. Fusce egestas dolor eget commodo convallis. Quisque luctus posuere nulla quis interdum. Nullam venenatis, libero quis posuere feugiat, elit urna mollis quam, in pulvinar odio ipsum in sapien.

 

When you're done, turn in your work through Google Classroom. Attach all six of your web pages.

In Google Classroom

  • Add<File<Select files from your computer
  • Navigate to your personal website folder
  • Ctrl click all six HTML pages
  • Upload
  • Turn In

F.A.Q.

  • Q: I tried to search Google using the method you taught us, by exact size. It doesn't work anymore. What should I do?
    • A: I checked, and as of this writing on 3/26/2018, you are right- it no longerworks. Instead, try this:
      In the Google search window, click on Images

      Enter the name of the image you wint to find, for example, "Tutorials"

      Settings<Advanced Search

      aspect ratio<square

      Click the Advanced Search button

      Download the image you want

      Open the image in Photoshop CC

      Resize the image to 400px by 400px

      Save as .jpeg

      Insert the image into your Dreamweaver page

      Move on to the next image. Repeat until you have all six images.