IDCC 380: Web Design II Spring 2010

CSS Box Model, 01/30/09

Check this out:

As I have mentioned in class, you will need to become comfortable with the css box model, as that forms the conceptual and technical underpinning of all layout, navigation, and design elements using Cascading Style Sheets (CSS).

Note this figure from Andy Budd. You can see from this set of "boxes" how the container metaphor works and how white space can be introduced into page design. In class, we will continually put this box model into action, as we work throughout the semester with margins, borders, and padding. Of course, all of this guides the shape of the ultimate container: our "wrapper" div. I think you will enjoy the design power that css and its box model give you.

Next class, we will continue to work on our layout exercises, and as we do, you will see again and again the large number of ways that the CSS box model plays a major role, in layout, design, and ultimately navigation.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Andy Budd, cascading style sheets, css box model, design, Hakon Wium Lie, internal navigation, layout, template

WJB posted on Wednesday, January 28, 2009 (permalink) 0 Comments Links to this post

  top of page

---

Free Graphics for Layout Exercises 01/27/09

Check this out:

Here is a free graphics zip folder that you may use without providing a source note at the bottom of the page for layout exercises 1-5 (or any other exercises for the semester).

You are also free to use your own graphics, but I realize some of you don't have anything digitized that you have produced yourself. Throughout the semester, as we move into work with various media, I will supply material of my own that you may use free without sourcing. In fact, if you would like to see the motherlode of my graphics I'm making available to you, check out the Buchholz Picasa Public Web albums.

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.

Labels: exercises, graphics, layout, media, source note

WJB posted on Monday, January 26, 2009 (permalink) 0 Comments Links to this post

  top of page

---

Exercises 1-5: CSS Layout Templates -- Ice, Liquid, and Jello 01/23/09

Check this out:

Our layout exercises will deal with flow, layers (divs) and absolute pixel placement. The PowerPoint tutorial on Divs and Floats will prepare you for some of the basic layout and design principles that are predominant on the Web today. The tutorial is also available in PDF format for printing (Divs and Floats PDF). The print version also supplies notes on the discussion.

In preparation for building the five templates of exercises one through five, we will discuss the design terms "ice," "jello," and "liquid" layouts. Over the next few days, you will be creating pages that participate in each of these design schools.

Following are a few selected Web sites that illustrate the three layout concepts of exercises one through five.

Liquid design (all elements flow):
http://www.webstandards.org/
http://www.htmlbasictutor.ca/flexible-liquid-design.htm
http://www.maxdesign.com.au/presentation/em/
http://www.w3.org/
http://bluerobot.com/web/layouts/
http://www.mardiros.net/liquid-design.html
http://www.webdeveloper.com/forum/showthread.php?t=63332
http://www.evolt.org/article/Liquid_Design_for_the_Web/%2020/15177/

Ice (all elements are fixed):
http://www.mpix.com/
http://foreignexchange.tv/
http://lenovo.com/us/en/

Jello (some elements flow; some are fixed):
http://icanaz.org/
http://www.w3schools.com/css/
http://webdesign.about.com/od/layout/i/aa060506.htm
http://www.sitepoint.com/
http://webstyleguide.com/page/fixed-flex.html
http://www.themaninblue.com/writing/perspective/2003/12/22/
http://www.zdnet.com/
http://roselli.org/adrian/articles/liquid.asp
http://cyber.bentley.edu/faculty/wb/courses/370/
http://www.cnn.com/
http://bentley.edu/
http://lsvp.wordpress.com/
http://webdesigninfo.wordpress.com/web-templates/
http://www.webforumz.com/
http://www.search-this.com/2007/11/14/hip-to-be-square/
http://www.d.umn.edu/

On your layouts.htm gateway page, you will provide floated thumbnail screenshots (no larger than 200px x 200px) hyperlinked to an actual Web site illustrating each of these three layout types. I will provide explicit instructions in class on all aspects of this complete layout assignment.

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.

Labels: design, ice layout, jello layout, layout, liquid layout, template

WJB posted on Friday, January 23, 2009 (permalink) 0 Comments Links to this post

  top of page

---

CSS Box Model, 01/02/08

Check this out:

As I have mentioned in class, you will need to become comfortable with the css box model, as that forms the conceptual and technical underpinning of all layout, navigation, and design elements using Cascading Style Sheets (CSS).

Note this figure from Andy Budd. You can see from this set of "boxes" how the container metaphor works and how white space can be introduced into page design. In class, we will continually put this box model into action, as we work throughout the semester with margins, borders, and padding. Of course, all of this guides the shape of the ultimate container: our "wrapper" div. I think you will enjoy the design power that css and its box model give you.

Next class, we will continue to work on our layout exercises, and as we do, you will see again and again the large number of ways that the CSS box model plays a major role, in layout, design, and ultimately navigation.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Andy Budd, cascading style sheets, css box model, design, Hakon Wium Lie, internal navigation, layout, template

WJB posted on Friday, February 01, 2008 (permalink) 1 Comments Links to this post

  top of page

---

Free Graphics for Layout Exercises 01/26/08

Check this out:

Here is a free graphics zip folder that you may use without providing a source note at the bottom of the page for layout exercises 1-5 (or any other exercises for the semester).

You are also free to use your own graphics, but I realize some of you don't have anything digitized that you have produced yourself. Throughout the semester, as we move into work with various media, I will supply material of my own that you may use free without sourcing.

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.

Labels: exercises, graphics, layout, media, source note

WJB posted on Saturday, January 26, 2008 (permalink) 0 Comments Links to this post

  top of page

---

Exercises 1-5: CSS Layout Templates -- Ice, Liquid, and Jello 01/23/08

Check this out:

Our layout exercises will deal with flow and absolute pixel placement. In preparation for building the five templates of exercises one through five, we will discuss the design terms "ice," "jello," and "liquid" layouts. Over the next few days, you will be creating pages that participate in each of these design schools.

Following are a few selected Web sites that illustrate the three layout concepts of exercises one through five.

Liquid design (all elements flow)
http://www.evolt.org/article/Liquid_Design_for_the_Web
/ 20/15177/
http://www.webstandards.org/
http://www.htmlbasictutor.ca/flexible-liquid-design.htm
http://www.maxdesign.com.au/presentation/em/
http://www.w3.org/
http://bluerobot.com/web/layouts/
http://www.mardiros.net/liquid-design.html
http://www.d.umn.edu/is/support/Training/Online/
webdesign/usability.html
http://www.webdeveloper.com/forum/showthread.php?t=63332

Ice (all elements are fixed)
http://www.adobe.com/?ogn=EN_US-gn_home
http://www.w3schools.com/css/
http://www.mpix.com/
http://foreignexchange.tv/
http://lenovo.com/us/en/

Jello (some elements flow; some are fixed):
http://webdesign.about.com/od/layout/i/aa060506.htm
http://www.glish.com/css/
http://www.sitepoint.com/
http://webstyleguide.com/page/fixed-flex.html
http://www.themaninblue.com/writing/perspective/2003/12/22/
http://www.zdnet.com/
http://roselli.org/adrian/articles/liquid.asp
http://cyber.bentley.edu/faculty/wb/courses/370/
http://www.cnn.com/
http://bentley.edu/
http://lsvp.wordpress.com/
http://webdesigninfo.wordpress.com/web-templates/
http://icanaz.org/
http://www.webforumz.com/
http://www.search-this.com/2007/11/14/hip-to-be-square/

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.

Labels: design, ice layout, jello layout, layout, liquid layout, template

WJB posted on Wednesday, January 23, 2008 (permalink) 2 Comments Links to this post

  top of page

---

Mastering the Box Model, 01/30/07

Check this out:

As we begin to think of creating our Web sites, you will need to be comfortable with the css box model, as that forms the conceptual and technical underpinning of all layout and design elements with css.

Note this figure from Andy Budd. You can see from this set of "boxes" how the container metaphor works and how white space can be introduced into page design. In class, we will put this box model into action, as we create a "wrapper" div in preparation for our navigation, layout, and template exercises. I think you will enjoy the design power that css and its box model give you.

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.

Labels: Andy Budd, cascading style sheets, container metaphor, css box model, CSS Tab Designer, exercises, layout

WJB posted on Monday, January 29, 2007 (permalink) 0 Comments Links to this post

  top of page

---