Web Design 2

Week 1

Orientation

Activity 1.1: Email The Instructor

Send your instructor an email with the following: Name; Where are you from; Web Experience; Expectations / What do you expect to learn?; Special Interests

Send email to sager.joshua@pti.edu Make sure to set the SUBJECT LINE for ALL SUBMISSIONS to start with WEB DESIGN 2: For example WEB DESIGN 2: Email Activity

This Activity is worth 5 points

Doctype

Doctype (.pdf)

Basic HTML and Web Standards

Basic Rules Web Standards (.pdf) CSS 101 (.pdf)

Activity 1.2 - Basic Layout

Create a web layout using the provided files acording to the following spces:

Student Examples

Download project files
- Wrapper Example - Download Image File (png)
- Body Copy - Download txt file (.rtf)
Must use code editor - Code by hand
CSS should be in a separate .css file
Please use proper folder structure
- html
- css
- images
- working
Must use 4 Div’s for layout (wrapper, header, content, footer )
- see image below
Entire width should of the content should be no larger than 400px
Use the body copy identified below.
Create a designed banner based off of the content and design the content using CSS
Upload all files in the proper folder structure to your student web space in a folder named activity01
Must have a title tag
All of your code (HTML and CSS) must validate
Send a link to index file to sager.joshua@pti.edu

This Activity is worth 10 points. We will upload this in class together and at that time we will practice the validation and submission procedures.

Week 2

CSS Best Practices

CSS Best Practices (.pdf) CSS Box Model

HTML Staring Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

Tables

Tables (.pdf)

Activity 1.3 - Tables

Create a table based off of the reference image (.png):: You must use table tags; You must use tr and td tags; You must title the document; You must upload it to the server; You must have a H1 tag containing the Month of the calendar; Utilize class styles to style the table; It should look as close to the provided image as possible; All of your code must validate; Submit activity by email your instructor the link to the project; Rubric

This activity is worth 10 points

Week 3

Composition

Design to Web Translations (.pdf)

2.1 - Translation Activity

Translate a newspaper article into semantic markup plan: Break into Pairs; Place the appropriate tag next to the content in the newspaper article; Compare with my semantic markeup plan

The objective is to gain a better understanding of how to break down content into semantic markup

This activity is worth 5 points

Basic Tags

<h1> - <h6>
<p>
<hr />
<li>
<img />
<a>

2.2 - Plotting Mark Up Activity

Using your semantic mark up plan, plot out your mark up in index.html file.

Download and use the Newspaper Copy

Open Dreamweaver
Manage your site
Setup folder structure
Create index.html
Uset this code to start: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Place all content inside of the body tag
Add appropriate markup
Misc: favicons; Meta Description

The objective is to practice and become more familiar with plotting basic mark up.

This activity is worth 10 points

Week 4

CSS Starter Code (.css) Image for Article (.jpg)

2.3 - Newspaper CSS

Add CSS to the 2.2 activity to match the image example of the newspaper article.

Newspaper article checklist

This activity is worth 15 points

Week 5

Typography on the Web

Typography on the Web (.pdf)

Type on the Web Resources

Typekit
@font-face (be careful you must have the rights to distribute the font)
Font Squirrel
Google Web Fonts
WOFF

Periodic Type Table

Type Foundries

3.1: E-Newsletter

Find an existing e-newsletter that you want to redesign: Beware of brands like nike, apple, target, etc. They have teams of designers working on all of their public communication; Try to select a newsletter that is need of a redesign; Try looking at local government, organizations, and non-profits; You must get your e-newsletter approved by your instructor before moving on to the next phase
Redesign your approved e-newsletter using InDesign.: Work with your instructor to determine if the existing media is appropriate, or if all new media is needed
You are encouraged to use non system typefaces, but it's not required.: Consider font squirrel, typekit, and google web fonts
This project will be submitted in class as a critique: YOU MUST BE PRESENT AND PARTICIPATE IN THE CRITIQUE TO EARN FULL CREDIT; Bring a color printout of the original design and your design to be critiqued in class
Samples of Student e-Newsletter Projects

The Design and Critique is worth 25 points and is in class only.

Week 6

Redesign Tips

Grids
Hierarchy
Legibility
Expression

Website (Re)Design by Samantha Warren (.pdf)

Activity 3.2: E-Newsletter HTML Version

Rubric for HTML version of e-Newsletter
Make adjustments to design based off of feedback from in class critique
Convert the E-Newsletter PDF and it to HTML & CSS: You must title the document; The E-Newsletter must validate; The E-Newsletter should look exactly like your mock up

Upload project to the web server. Email a link to the project to your instructor. This project is worth 50 points.

Week 7

Rollovers

        onload = init;

        function init(){
            document.getElementById('imgId').onmouseover = changeImage;
        }

        function changeImage(){
            document.getElementById('imgId').src = "img/over.png";
        }

Interaction Slides (.pdf)

Activity 4.1 - Image Gallery

Create the interface using HTML + CSS: Use this wireframe as guide
Design an image gallery around a topic or theme.: Gather images for the gallery. They can be for your portfolio or themed around a topic.; You will need 5 thubnails and 5 large images; Size the thumbnails at 75px x 75px; Size the large Images at 375px x 375px
Interaction: You must have animated rollovers; Click on the thumbnail to display the large Image

Upload the project to the web server and email your instructor a link. This Activity is worth 25 Points

Supplimental

Week 8

Bullets

firefox
chrome
internet explorer
- IE9
- IE8
- IE7
safari

4.3 - Drop Down Menu Activity

Create 4 main links
Create 3 sub links per each main link
style the menu
links MUST actually link

This is an in class activity worth 10 points.

Week 9

Refresher on Link Creation

Final Project - Flow Chart and Body Copy

Flow Chart: Using Illustrator, InDesign, Photoshop, or Viso create a flow chart.; Sample (.png); Sample (.ai); Save Flow Chart as either a .pdf, .jpg, or .png.
Body Copy: Create a 5 page document.; Each page must have all of the content appearing on the corosponding web page.; Rember if it's on the website it MUST be in this document.

Email the flow chart and 5 pages of content to your instructor.
This activity is worth 10 points.

Week 10

Final Project - Interface Mockup

The interface mockup is a graphical representaion of what the site looks like.

Document Specs

Mock up Rubric (.xls)

No wider than 1000 pixel

DESIGNS MUST BE ORIGINAL NO USE OF TEMPLATES

Height is up to you

Have designed type

Headings
Sub Headings
Body copy
Footer
Call outs
Side bars
Accents

Navigation

Applied Colors

Samples of student work

Create all 5 screens fully designed in InDesign

Submit via emial as a web optimized PDF to your instructor.
This is worth 25 points.

Week 11

Final Project

Web Site Project: Web Site Rubric (.xls); The website should have 5 total pages; Navigation must work; The styles should be external; There should be substantial content for each page (not just the same images on every page); Samples of student work

To submit your final project you must prepare an email that contains a link of your site to the instructor. This Project is worth 50 points.