Midterm – Visual Narrative


At the end of this project, you will be demonstrate your ability to:

  • Create  wireframe options for your webpage
  • Optimize images for the web in a photo editing application
    (Adobe Photoshop)
  • Crop and or re-size images
  • Create a vertical navigation or horizontal navigation
  • Use the background property
  • Nested and float elements
  • Create layers within CSS

You will create a Visual Narrative of a Event/Activity/Journey with the use of a photo gallery using Photoshop, XHTML and CSS.


  •  6 pictures/images (minimum, you can use more) of a event/activity to create a visual narrative. So, it needs to follow in sequence.
  • A description of each image. (It must flow like a mini story!)
  • Background image behind the website

The web must of consist of

  • Directory structure is required
  • External Style Sheet
  • A navigation/menu
  • Six images (minimum) on the home page
  • Website width is set to 960px

Website Process

  1. Research – DUE November 15, 2016 
    1. Part 1 – Images
      6 pictures/images
      (minimum) of a event/activity to create a visual narrative/story (journey). So, it needs to follow in sequence.
    2. Part 2 – Story DUE November 23, 2016
      Have your Title/Name of website; and write a description of each image.
      It’s must flow like a mini story!
  2. Sitemap – Not needed
  3. Wireframe – DUE November 17, 2016
    Two Layout Options:

    • Layout 1 – Create wireframes for the home page and second page.
    • Layout 2- Create wireframes for the home page and second page.
  4. Design (Photoshop/Image editor file)  –DUE November 23, 2016
    Choose one layout option of wireframe and create the look/design of the Home page and Story page (choice of colors, images/patterns, font type)
  5. HTML and CSS  – DUE December 2, 2016
    • Home page (index.html)
    • Second page (e.g. story.html, name the files accordingly)
  6. Presentation of Websites DUE December 5-7, 2016

Midterm Project –December 2, 2016

All deadline are at the end of the day.


Format for Submission of Project


Upload to all files to Google Classroom > Visual Narrative  in a folder Last Name_First Name-Midterm

DUE on Friday December 2, 2016