11:00 Section: Tuesday, Dec. 9, 10:00 – 10:55 a.m.

Those who wish to re-take the mid-term exam may stay after class to do so. If you need to schedule a time later in the day, please e-mail me in advance.

There are three possible levels: C-level (to earn as much as a C-plus), B-level (to earn as much as a B-plus), and A-level (to earn as much as an A-plus).

Additionally, you may choose to re-take the mid-term exam as an opportunity for partially-improved exam credit.

C-Level Project: Create one (1) functioning web page, including the following components:

1. Files and Folder
   1. place ALL of the following in a folder named: yourlastname-final
   2. place the Photoshop mockup in a sub-folder named PSD
   3. place all other images in a sub-folder named images
2. Photoshop Mockup
   1. Name layers clearly named to indicate what they are.
   2. Organize layers into folders (or “groups”).
3. Background Images
   1. Incorporate at least one repeating or tiled image. May repeat horizontally or vertically, as appropriate.
   2. Use GIF, JPG, or PNG format strategically, as appropriate to obtain optimal image quality and file size.
   3. Place optimized in folder named “images”.
   4. Name optimized images to clearly indicate where and how they are used in the site.
4. HTML (“markup”)
   1. named index.html
   2. use strict doc-type
   3. include a title
   4. link to external stylesheet
   5. display one or more images in the content of your web page — include image in your images folder
   6. wrap an image in a link, turning it into a link to another web page on the web
   7. use an unordered list for the main navigation, with at least 4 navigation items linked to dummy pages
   8. use a numbered list, with a nested unordered list
   9. Use <div>s with appropriate ID’s to create header, footer, main content, and sidebar or sub-content sections.
   10. Use HTML comments to indicate what section of the site each closing div tag closes off.
   11. Somewhere in the content, provide links to at least 3-4 different websites, perhaps such as OKWUeagle.com, OKWU.edu, think.ingcreative.com, volunteerbartlesville.com, etc. (You may link to different sites if you would like. These are just ideas.)
5. CSS
   1. Use an external stylesheet, in a file named style.css
   2. Declare the following as recommended in your textbook:
      • font-family
      • font-size
      • line-height
   3. Use CSS comments to clearly set apart each major section of your CSS code.
   4. Layout the page, positioning logo, navigation, content, and footer where you want them
   5. Set background images (incorporating background images guidelines in #2 above)
6. Submission
   1. Submit your folder with ALL required files to me on or before the day of our final exam.
7. Presentation
   1. Present your design(s) to the class in a 5-minute walk-through presentation on the day of our final.
   2. You will stand and walk us through the key features of your site.
   3. NOTE: We will NOT expect absolute perfection. Your site may not function perfectly in one area or another. But this presentation gives us all a chance to see how things came out here at the end of our first semester.

B-Level Project

Do everything for the C-Level Project, plus create a second design, incorporating all of the above elements, but with the following distinctions and specifications:

1. Organize files and folders
   1. Create separate sub-folders for each of your designs. Call one design1 and the other design2.
   2. Inside each of these sub-folders should be everything described for the C-Level project.
   3. Everything described below applies to design2:
2. Give it a new look:
   1. Create a new PSD mockup.
   2. Use this to create different background images, producing a site that looks significantly different than the other.
3. Modify the layout
   1. Change the width and/or height of head, footer, columns, etc
4. Demonstrate your ability to innovate
   1. The more your deviate from a given tutorial, demonstrating your ability to apply these skills with your own creative flare, the better your score.

A-Level Project

Do everything for the B-Level Project, plus add one or more of the following additional wrinkles:

1. Incorporate particularly interesting, professional-looking background images, reminiscent of some of the best, most interesting websites out there.
2. Incorporate rounded corners somewhere in the site. Build it so that the section with rounded corners can grow longer (typically by using a repeating image for the mid-section).
3. Incorporate a fluid rounded corners design, able to grow horizontally as well as vertically.
4. In these or some other ways, wow me.

OPTIONAL: FINAL EXAM

If you would like to improve your overall exam score, you may take an exam very much like the mid-term exam. The score on this final exam will be averaged with the score on the mid-term, giving you an exam score halfway between the mid-term and final.

Your assignment for Tuesday, Nov. 25:

1. Complete the NETTUTS tutorial, “Build a Sleek Portfolio from Scratch,” down through THE END, or as much as is possible.
2. Bring at least one Photoshop mockup of a design that you could use for your final.

Turn in your folder with images, HTML and CSS files at the first of class.

Turn in your folder with images, HTML and CSS files at the first of class.

Create a Sleek, High-End Web Design from Scratch

1. Creating a Simple Gradient, in the “Creating a Simple Gradient” in Creating Web 2.0 Effects
2. Create a Glossy Gradient, in the “Gradients” section in Web 2.0 Design Kit
3. Create Rounded Corners using Gaussian blur, in the “Rounded Corners” section of Web 2.0 Design Kit

Oklahoma Wesleyan University students: take advantage of major savings on Adobe Creative Suite Software.

Required

• Liquid Positioned Two-Column Layout (255-59)
• Liquid Positioned Three-Column Layout (259-64)

EXTRA CREDIT

1. To really begin understanding what’s going on, you need to experiment and play around a bit. After following Collison’s steps, do another version where you mess with the code yourself and come up with something similar but different. Bring your folder containing the files showing your work to class.
2. Work along on more of the photoshop tutorials from the post, Style Your Site. Bring your results to class.

Required

• Liquid Float Left, Float Right (248-49)
• Liquid Floated Three-Column Layout (250-55)

EXTRA CREDIT

1. To really begin understanding what’s going on, you need to experiment and play around a bit. After following Collison’s steps, do another version where you mess with the code yourself and come up with something similar but different. Bring your folder containing the files showing your work to class.
2. Work along on more of the photoshop tutorials from the post, Style Your Site. Bring your results to class.

Since we covered up through page 220, this means you work through page 233.