Advanced HTML Recap + Intro to CSS

• Discussion: “The Creator Economy”
• Presentation: Advanced HTML recap and Intro to CSS
• The 3-pane working environment
• Image may be NSFW.
  Clik here to view.

Lab

• Go through W3 School’s CSS tutorial

  • Read and use “try it yourself” exercises for “CSS Basic” and “CSS Styling”
    • Image may be NSFW.
      Clik here to view.

Exercise 3: Style Your 2 Page Website – due 4/7/11

Requirements:

• Link your .html page to an external css stylesheet and use CSS for the following:
• Change the body background color
• Change default paragraph font-family to something else, i.e.:
  • p{font-family: garamond, georgia, “sans-serif”;}
• Make your H1, H2, H3, H4 a different font-family than the paragraph font (like “helvetica” or “arial”)
• Change the default hyperlink color from blue to something else
• Change default hyperlink from underline to no underline (tip: text-decoration: none;)
• Make hyperlinks underline when you rollover them
• Change the unordered list bullet style from the standard disc to another shape (tip: you can use a custom image – get creative)
• Add a colored border to images
• Style your table
  • Set a width for the table
  • Change the border colors
  • Add cell-padding to increase readability
• Extra credit: Make your navigation a horizontal unordered list (instructions on W3 Schools — you will need to know this in the future)

Note: Be sure to remove all html styles before you begin changing styles using CSS.

Note: Be sure to link BOTH of your html pages (about.html and index.html) to the external stylesheet.

Image may be NSFW.
Clik here to view. Image may be NSFW.
Clik here to view.

Homework – Due 4/7/11

• Read Saffer, Dan “Designing for Interaction” pg. 121-136 (available on XSRV)
• Response:
  • Provide a link to a website that you feel exhibits intuitive, successful interaction design. Explain briefly why you feel the interaction design is successful based on these concepts:
    • Layout (grid, visual flow)
    • Typography (typeface/font choices, amount and size of type)
    • Color (color scheme, contrast)
    • Material and Shape (texture, square, rounded edges)
    • Usability

TIP: Try closing your eyes then opening them; On the website you are looking at, what element do you notice first? Second? Third? Keep in mind how visual hierarchy informs us of the importance of different elements.

• • Provide a link to a website that you feel has poor interaction design. Based on the above concepts, what improvements would you make to make the interface more intuitive? Be creative.

Keep in mind while you are looking at websites that these above-mentioned interaction design concepts contribute not only to a purely aesthetic “look and feel” but are functional — they inform the user experience. For instance, does a rounded, shiny button-link seem more “clickable” than just a plain underlined hyperlink?

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.