{June 29, 2011

W 

% fernando completed

W 

% Robert completed

W 

% Sehee completed

W 

% Marco completed

W 

% Divya completed

W 

% Nic completed

Outline

  1. Forms have come a long way with HTML5 and CSS3
  2. Some nice examples of contemporary forms
  3. Let’s code up a sample

Examples

  1. A bunch of form elements
  2. New York Times starter

Exercise

Design a search form for the upper right inside pages of The New York Times website. You may either take a screencapture of the web page and place it in the background, or code your form on a white page and then photoshop it onto the site. Place your finished png or .html file on your FTP area and categorize a post with the link under exercise 6.

f
4 Lessons    { June 29, 2011    J   b 0   
W 

% Camila completed

W 

% Aary completed

W 

% fernando completed

W 

% Nic completed

W 

% Sehee completed

W 

% Stephen : ) completed

W 

% Amy completed

W 

% Divya completed

W 

% Jessie completed

W 

% Peter completed

W 

% Sue completed

W 

% Marco completed

W 

% Robert completed

Outline

  1. Lists often used for navigation
  2. Examples of lists in action
  3. Pseudo classes
  4. Border instead of text-decoration
  5. Web Inspector

Example

  1. A list with several properties in it
  2. List example from Camila
  3. Submenu example adapted from Elsbeth

Exercise

Using the examples below as inspiration, create a horizontal nav bar that can replace a site you like or could work for your own portfolio site. Consider pseudo classes, anchor states and the box properties. Make use of the Web Inspector to see what other sites are doing. Place your results in a new post on this site in category exercise 5.

f
4 Lessons    { June 29, 2011    J   b 0   
W 

% Nic completed

W 

% Nic completed