IDCC 370 Announcements

Monday, September 28, 2009

Template: Wrapper, Header, Contents, Footer, 09/28/09

Check this out! Check this out:

Exercise 2: Creating Your Site TemplateNow the fun begins: template creation. Exercise 2 is a guided tutorial through the creation of your site template. You will receive a handout in class stipulating all the steps necessary to create a viable template: Exercise 2: Creating Your Site Template,

Be sure that you understand conceptually the design principles depicted in the graphic below regarding the wrapper container that holds three other containing elements for your Web template: header, contents, and footer (click on the graphic to see an enlarged version).

Nested model of wrapper, header, contents, and footer.Proper nesting of these containers is critically important in designing the structure of your template. Note that the wrapper div contains the siblings: header, contents, and footer. It may seem strange that the contents div is at the same relational level as the header and footer divs, but think of these containers as all needing to be separate (but not equal) and contained within a parent element.

The commented markup is inserted to clarify the relationships of the divs, identified by their particular unique IDs (click on the graphic at left to see an enlarged version).

Note in the markup itself how the sibling divs (header, contents, and footer) are contained in the parent div (wrapper), which is contained in the ultimate parent, the <body> tag. This containment exhibits proper nesting of the divs, without which your Web template would not function properly. Commented markup.

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: , , , , , , , , ,

posted by WJB at | 0 Comments | Links to this post

Top of page.top of page


Monday, February 09, 2009

Site Template Construction, 02/09/09

Check this out! Check this out:

In undertaking exercise two, Web site template construction, you will be tackling some rather sophisticated design approaches that combine XHTML and CSS (Cascading Style Sheets). To gain a better understanding of the standards involved, please review the first seven slides in the PowerPoint tutorial on Cascading Style Sheets.

Also remember that when you create content for the Web in Dreamweaver, you must never use the alignment icons on the properties bar, as depicted (and crossed out) here:

No, no, no: do not add deprecated font attributes to your XHTML elements.These icons insert deprecated HTML attributes into your page markup (align="left"; align="right"; align="center"; align="justify"). Instead of these deprecated attributes, use CSS in creating your Web site according to standards.

Dreamweaver insert div icon. Click on this image to find out Microsoft's explanation of 'Lorem ipsum'When we create our site template, we are establishing the layout and design that will be used ultimately to generate all the pages of the site. Note that in creating this exercise, you supplied paragraphs of text in Latin. In the design business, this text is known as "greeked." (Click on this image to find out Microsoft's explanation of "Lorem ipsum.")

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: , , , , , , , , ,

posted by WJB at | 0 Comments | Links to this post

Top of page.top of page


Wednesday, February 04, 2009

Wrapper, Header, Contents, Footer, 02/05/09

Check this out! Check this out:

Nested model of wrapper, header, contents, and footer.Be sure that you understand conceptually the design principles depicted to the right regarding the wrapper container that holds three other containing elements for your Web template: header, contents, and footer (click on the graphic to see an enlarged version).

Proper nesting of these containers is critically important in designing the structure of your template. Note that the wrapper div contains the siblings: header, contents, and footer. It may seem strange that the contents div is at the same relational level as the header and footer divs, but think of these containers as all needing to be separate (but not equal) and contained within a parent element.

Commented markup.The commented markup is inserted to clarify the relationships of the divs, identified by their particular unique IDs (click on the graphic at left to see an enlarged version).

Note in the markup itself how the sibling divs (header, contents, and footer) are contained in the parent div (wrapper), which is contained in the ultimate parent, the <body> tag. This containment exhibits proper nesting of the divs, without which your Web template would not function properly.

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: , , , , ,

posted by WJB at | 0 Comments | Links to this post

Top of page.top of page


Tuesday, October 07, 2008

CSS Box Model, 10/07/08

Check this out! Check this out:

As I have mentioned in class numerous times, you will need to become familiar 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). Andy Budd's CSS Box Model from his book 'CSS Mastery: Advanced Web Standards Solutions.'

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 template, and as we do, you will continue to see 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: , , , , , , ,

posted by WJB at | 0 Comments | Links to this post

Top of page.top of page


Tuesday, September 23, 2008

Wrapper, Header, Contents, Footer, 09/23/08

Check this out! Check this out:

Nested model of wrapper, header, contents, and footer.Be sure that you understand conceptually the design principles depicted to the right regarding the wrapper container that holds three other containing elements for your Web template: header, contents, and footer (click on the graphic to see an enlarged version).

Proper nesting of these containers is critically important in designing the structure of your template. Note that the wrapper div contains the siblings: header, contents, and footer. It may seem strange that the contents div is at the same relational level as the header and footer divs, but think of these containers as all needing to be separate (but not equal) and contained within a parent element.

Commented markup.The commented markup is inserted to clarify the relationships of the divs, identified by their particular unique IDs (click on the graphic at left to see an enlarged version).

Note in the markup itself how the sibling divs (header, contents, and footer) are contained in the parent div (wrapper), which is contained in the ultimate parent, the <body> tag. This containment exhibits proper nesting of the divs, without which your Web template would not function properly.

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: , , , , ,

posted by WJB at | 0 Comments | Links to this post

Top of page.top of page


Announcements powered by Blogger.com.

Bentley University, Waltham, MA