IDCC 370: Web Design I   Spring 2008

Check this out:

In preparation for your first assignment, you should be scouting the Web for sites whose design you admire. Also pick from three to five sites that offer free graphics. The best approach in discovering such sites is to begin with a Google search, using these terms: web graphics free. You'll get 127,000,000 hits, so start at the top and move down through the sites until you find some interesting material. Bookmark the good sites.

If you start to download free material, create a folder with the name of the site; for example, boogiejack. Then name any file you download into that folder with the name of the site as well; for example, pink_tile_boogiejack.gif. Remember that for assignment 1, you need to credit all your graphics sources and provide links to the sites. It is very important that you keep all of these files straight, so take care.

In selecting the graphics sites and downloading your material, you should be thinking of the whole look and feel of your site: colors, graphics, and page design. Do you want your site to be light and airy? Dark and brooding? Serious and professional? Wild and crazy? Subdued and understated? Adventuresome? Cute? Tough? Nationalistic (e.g., Irish, Italian, American)?

When we meet on Monday, I'll go around the room and ask what you've found. You will be expected to tell me some of the free sites you've discovered and the basic look and feel you are contemplating.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

You did a fine job of centering your wrapper layer and exporting your css file. Here are some of the key terms and concepts covered in class on Monday, February 6, 2006:

1. wrapper or matrix layer (div): holds all page content, usually against a background color or pattern
2. margin:auto = left and right margins are automatically measured by the browser, thereby centering the wrapper
3. wrapper height measure looks dramatically different in I.E., Firefox, and Opera
4. line length and readability
5. em and the relative size factor in browsers: easy magnification possible
6. character entities for nonbreaking space and quotes
   
7. styling XHTML selectors: h1, h2, and p
8. editing the font selection
9. moving the <div id="wrapper"> tag and ending with the </div> tag
10. stripping out styles to achieve a state of graceful degradation (a gracefully degraded page is in the default condition)
11. content plus structure minus style = a gracefully degraded page less the style rules
12. exporting a style sheet in Dreamweaver
13. page banner
14. background image on any container element (h1, h2, and p in class)
15. z-index of layers; stacking order
    

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

We are well on our way now to serious design using CSS, once we move into page creation with layers (in Dreamweaver-speak), otherwise known by the design community as divs, or page divisions. Here are some of the key terms and concepts covered in class on Wednesday, February 1, 2006:

1. wrapper or matrix layer (div): holds all page content, usually against a background color or pattern
2. background tile
3. tiling, seamless tiling
4. "absolute" layer placement, down from top, over from left
5. color palette (family of colors)
6. z-index
7. CSS styles panel: rules, properties, values
8. crosshairs
9. jell-0 design
10. liquid design
11. document flow
12. in-line style rule (local); embedded style rule
13. the clock (margins, padding, border)
14. browser window (viewport) restore down (snap the browser)
15. line break (shift enter)
16. URL (Uniform Resource Locator), hyperlink
17. RGB (Red Green Blue) color system
18. 16,777,216 color possibilities with 24bit RGB color system
19. color slider (white to dark); white = full color spectrum; black = total absence of color
20. container no smaller than its largest element
21. horizontal/vertical scroll bars
22. optical illusion (direction of light source)
23. pour content into the container (text and graphics on a page)
24. white space, let the design breathe
    

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.