- Announcements
- WJB Contact Info
- Buchholz Biography
- Student Info Form
- E-mail Buchholz
- E-mail IDCC Dept
- IDCC Faculty Info
IDCC 380 Announcements
Wednesday, January 28, 2009
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
Friday, January 23, 2009
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
Sunday, February 24, 2008
Exercise 7 - Usability Associates Services, 02/24/08
Check this out:Tuesday, February 26, we will begin Exercise 7, using one set of the tabs you generated with CSS Tab Designer, Thursday, February 21.
This tab set will become the top-tier primary navigation in the header of the services page of our prototype site, Usability Associates.Exercise 7 will allow you to place the tabs in a fully functional template, complete with wrapper, header, left-column secondary navigation, right column content, and footer. The screenshot at right (click for larger view) illustrates the prototype I built from a tab set placed into one of the earlier layout exercises.
This exercise introduces you to a number of new Web design challenges, chief of which is putting together layout (with appropriate color palette), primary navigation (generated), secondary navigation (hand carved), exported and commented CSS, exported JavaScript, W3C validation, and high level prototype functionality. All in all, this exercise is an excellent design, information architecture, and site management experience.
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: css, CSS Tab Designer, information architecture, internal navigation, navigation systems, primary navigation, prototype, secondary navigation, template, top-tier navigation, web design
WJB posted on Sunday, February 24, 2008 (permalink) 0 Comments Links to this post
top of page
Friday, February 01, 2008
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
Wednesday, January 23, 2008
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
Wednesday, April 11, 2007
RSS Source Code for Templates, 04/11/07
Check this out:Some of you had a bit of bad luck in class today and were not able to locate or generate your rss feed tags for the header of your blog. If that is the case, here is the easiest solution. (Do not try this solution if you are at all nervous about it blowing up; I could sit with you at some point and guide you through the process.) In Blogger:
- Proceed to your template page.
- Select a new template (any will do; you just want to regenerate the head tags primarily).
- Save the template.
- Republish your blog.
- View your blog in the browser.
- Right click to view source.
- Select the rss source code in the head. It looks like this:
Once you have these codes, just plant them into the head of your own template. Remember, if you are at all nervous about performing this operation, see me and I will give you a hand.
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: blogger.com, rss feed, template
WJB posted on Wednesday, April 11, 2007 (permalink) 0 Comments Links to this post
top of page
Tuesday, April 03, 2007
Blogger into Your Template, 04/03/07
Check this out:
In class Thursday, April 5, we will travel to blogger.com, create a blog, examine the power of blogger's feature set, post some entries, strip blogger tags, and plant blogger in your template. This should be a ball. Time permitting, we will undertake the RSS feed harvesting as well.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: blog, blogger.com, rss feed, template
WJB posted on Tuesday, April 03, 2007 (permalink) 1 Comments Links to this post
top of page
