John Doe's Art 128 Page

Assignments:

• Assignment #1: A simple page with standard HTML markup and no CSS
• Assignment #2: A simple HTML page linked to an external CSS file
• Assignment #3: Using CSS to control simple presentation features such as background color, margin, and padding
• Here are some div tests/experiments that I did:
  • Div Test #1: Div's appearing as normal flow.
  • Div Test #2: One div with absolute positioning.
  • Div Test #3: Another div, with right-side absolute positiong.
  • Div Test #4: One div with relative positioning.
  • Div Test #5: All divs with different "float" settings.
  • Div Test #6: All divs with different "float" settings.
  • Div Test #7: All divs with different "float" settings.
  • Div Test #8: All divs with different "float" settings.
  • Div Test #8: All divs with different "float" settings.
• Assignment #4A - Long Scrolling Page that Preserves Normal Flow
• Assignment #4B - Short/Fixed Height Page that breaks normal flow (all absolute positioning)
• Assignment #5 - Three types of Navigation using unordered lists
• Assignment #6 - Using a:hover to create a rollover on a top navigation
• Here are some experiments that I placing images via CSS backgrounds:
  • Image background Test #1: a repeating background on the body
  • Image background Test #2: header div background and logo
  • Image background Test #3: body gradient background, header bg, and logo
• Assignment #7 - Mike Rundle's CSS Image Replacement Technique (text-indent: -9000px;)
• Assignment #8 - Using Seamus Leahy's CSS Image Replacement Technique to place images into a top navigation
• Here are some layout experiments using the same html page:
  • Layout #1: Left Justified, Fixed Width
  • Layout #2: Centered, Fixed Width
  • Layout #3: Centered, Fixed Width, 100% Height
  • Layout #4: Centered, Fixed Width, Fixed Height - Version 1 (negative margins - NOTE: DOES NOT WORK IN MAC IE)
  • Layout #5: Centered, Fixed Width, Fixed Height - Version 2 (floating height controller - NOTE: DOES NOT WORK IN MAC IE)
  • Layout #6: 2 column layout, small left column, 100% container width
  • Layout #7: 2 column layout, small left column, fixed container width
  • Layout #8: 2 column layout, small right column, 100% container width
  • Layout #9: 2 column layout, small right column, fixed container width
  • Layout #10: 3 column layout, 100% container width
  • Layout #11: XHTML + CSS LAYOUTS :: 3 column layout, all fluid/no container width
• In-class Exercise - NMA home page quick redesign from Photoshop file
• MIDTERM Assignment - NMA site redesign using CSS
• Javascript Show/Hide Layer Test
• Image Transparency Test
• Here is a tables vs. css layout experiment coding the same layout (TB Site) two different ways:
  • TB Layout with Tables
  • TB Layout with CSS