IDCC 370: Web Design I Fall 2009

Check this out:

Our focus in class will be on creating a number of CSS rules that allow you to float callouts and graphics left and right. The float, as many of you have learned already, is an essential design concept in CSS. Using your exercise six cleanly scrubbed, XHTML-ized, Semantic Web-proofed, well-formed and valid text, Open Communication Climate, you will plant two callouts and two graphics, both left and right, making necessary adjustments to the graphics and text to improve design for readability and overall aesthetics. You will want to pay special attention to the relationship of the graphics, callouts, paragraph size, and headings: a full-bore design experience is about to be yours.

The graphics above left and right are the ones you will use for this exercise. I will provide written instructions and will work through the design and rule-writing with you in class. I think you will find working with the float to be a lot of fun.

While you will be receiveing printouts of the exercise in class, you may want to have electronic access to them in pdf form:

1. Exercise 6a: Optimizing a Word File in XHTML
2. Exercise 6b: Callouts and Graphics Floated
3. Exercise 6c: Contents with Style

At the bottom of your newly designed page, you will add this source note after the Buchholz source note:

Microsoft Office Clip Art Photographs: j0406569.jpg (Shaking hands) and j0289517.jpg (2 women in office). (n.d.). Microsoft Office 2003. Redmond, WA: Microsoft Corporation.

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: CSS, Float, Graphics, Microsoft Clip Art, Open Communication Climate, scrubbed, Semantic Web, source graphic, spell-check

Check this out:

You will spend a good deal of time in this class making sure that your css rules are properly ordered. As the 370.css file continues to grow (we'll be adding a good number of rules in the next few weeks), you will want to be able to traverse the rules easily. Thus, in addition to good structure, you will want to add some descriptive sign posts along the way.

In setting up your signposts, you will need to comment your CSS style rules in the hierarchical chunks I keep alluding to in class. This css commenting model (pdf) will give you an idea of the way I have commented my 370.css thus far. Feel free to use this document as a reference point in your own commenting of 370.css for Assignment One. I will address any concerns you may have next class.

If you are interested in some further commenting ideas, check out "Brownspank, a standards-conscious Web Designer for Brown Battery Studios," who has posted an interesting article on CSS comments: Maximize CSS Comment Usage. Take a look at this for some good commenting ideas.

The graphic below illustrates the order (hierarchy) of your CSS rules in 370.css (click image to enlarge):


Remember that your 370.css must not only be in the correct hierarchy but also thoroughly and intelligently commented.

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: Assignment One, Assignment Two, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org

Check this out:

It's time now to put the finishing touches on your template and top-tier pages. With the banner in place (Exercise Four in pdf), you are now ready to move on to the top-tier navigation bar: Exercise Five (in pdf). This "nav bar," in conjunction with your banner and CSS colors for backgrounds and text tags, will complete the "look and feel" of your site. You will soon have your professional brand.

I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages. If you click on the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. With any luck, we will be able to complete the lion's share of this exercise in class. At any rate, you will receive a sheet of directions that will allow you to work on your own outside of class.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two with the annotated copy of Assignment One, is due Wednesday/Thursday, November 18/19, at the beginning of class.

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: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

Check this out:

Now 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).

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.

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: container, contents, CSS, Dreamweaver, Exercise 2, footer, header, sibling, template, wrapper

Check this out:

In the final class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation. The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

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: Cascading Style Sheets, CSS, PowerPoint, punctuation, style rules, syntax, tutorial

Check this out:

Lee Underwood's article on the HTML Hierarchy will help you to understand the container model and XHTML hierarchy, both essential to working effectively with Cascading Style Sheets CSS).

Underwood notes in part two of his article: "As we look at the structure of the page we will see that each element is related to another element. This is called a parent-child-sibling relationship [tree structure]. An element that is directly above another element in the hierarchy is called the parent of the element below it. The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings."

The PowerPoint tutorial on "Getting Started with XHTML" reviews this nesting/container structure at the tag level. We will examine this tutorial carefully in class. If you are thoroughly comfortable with the concepts of hierarchy and containment, you will be better able to master all areas of Web design.

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: Cascading Style Sheets, child, CSS, CSS box model, hierarchy, Lee Underwood, parent-child relationship, parent-child-sibling, relationship, sibling, sibling relationship, tree structure, XHTML

Check this out:

A revolutionary development in communication, the World Wide Web offers unprecedented access to mass audiences. This introductory course focuses on the principles and practices necessary to create effective pages for the Web.

You will receive instruction in writing hypertext documents, designing Web pages, authoring well-formed XHTML, CSS (Cascading Style Sheets), and meeting a variety of technical challenges. The course focuses on purpose, scope, and audience considerations in page design; writing informative and persuasive on-line documents; designing coherent, portable, navigable, and interactive pages; and employing the fundamental principles of color theory, typography, layout and graphic design for the Web.

Combining lab, lecture, and discussion, you will learn the best practices of electronic design to create your own interactive Web sites. Be sure to check into the class Web site every day for announcements.

Here is a picture of a Web designer. And this is what you want to turn into? I look forward to our journey together into the wonderful world of Web design.

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: Cascading Style Sheets, CSS, design, graphic design, layout, Semantic Web, spider, typography, Web designer, Web site directory, World Wide Web, XHTML

Check this out:
The graphic below illustrates the order (hierarchy) of your CSS rules in 370.css:

Remember that your 370.css must not only be in the correct hierarchy but also thoroughly and intelligently commented.

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: 370.css, CSS, hierarchy

Check this out:

Next class we will finish up the look and feel of your Web site template by creating the CSS "buttons." I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages. If you enlarge the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. With any luck, we will be able to complete the lion's share of this exercise in class. At any rate, you will receive a sheet of directions that will allow you to work on your own outside of class.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two with the annotated copy of Assignment One, is due Thursday, April 9, at the beginning of class.

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: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

Check this out:

You will spend a good deal of time in this class making sure that your css rules are properly ordered. As the 370.css file continues to grow (we'll be adding a good number of rules in the next few weeks), you will want to be able to traverse the rules easily. Thus, in addition to good structure, you will want to add some descriptive sign posts along the way.

In setting up your signposts, you will need to comment your CSS style rules in the hierarchical chunks I keep alluding to in class. This css commenting model (pdf) will give you an idea of the way I have commented my 370.css thus far. Feel free to use this document as a reference point in your own commenting of 370.css for Assignment One. I will address any concerns you may have next class.

If you are interested in some further commenting ideas, check out "Brownspank, a standards-conscious Web Designer for Brown Battery Studios," who has posted an interesting article on CSS comments: Maximize CSS Comment Usage. Take a look at this for some good commenting ideas.

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: Assignment One, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org

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:

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.

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: alignment icons, attribute, Cascading Style Sheets, CSS, deprecation, Dreamweaver, greeked text, layout, template, tutorial

Check this out:

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.

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: container, CSS, Dreamweaver, sibling, template, wrapper

Check this out:

In the final class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation. The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

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: Cascading Style Sheets, CSS, PowerPoint, punctuation, style rules, syntax, tutorial

Check this out:

Lee Underwood's article on the HTML Hierarchy will help you to understand the container model and XHTML hierarchy, both essential to working effectively with Cascading Style Sheets (CSS).

Underwood notes in part two of his article: "As we look at the structure of the page we will see that each element is related to another element. This is called a parent-child-sibling relationship [tree structure]. An element that is directly above another element in the hierarchy is called the parent of the element below it. The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings."

The PowerPoint tutorial on "Getting Started with XHTML" reviews this nesting/container structure at the tag level. We will examine this tutorial carefully in class. If you are thoroughly comfortable with the concepts of hierarchy and containment, you will be better able to master all areas of Web design.

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: Cascading Style Sheets, child, CSS, CSS box model, form elements, hierarchy, Lee Underwood, parent-child relationship, parent-child-sibling, relationship, sibling, sibling relationship, XHTML

Check this out:

A revolutionary development in communication, the World Wide Web offers unprecedented access to mass audiences. This introductory course focuses on the principles and practices necessary to create effective pages for the Web.

You will receive instruction in writing hypertext documents, designing Web pages, authoring well-formed XHTML, CSS (Cascading Style Sheets), and meeting a variety of technical challenges. The course focuses on purpose, scope, and audience considerations in page design; writing informative and persuasive on-line documents; designing coherent, portable, navigable, and interactive pages; and employing the fundamental principles of color theory, typography, layout and graphic design for the Web.

Combining lab, lecture, and discussion, you will learn the best practices of electronic design to create your own interactive Web sites. Be sure to check into the class Web site every day for announcements.

Here is a picture of a Web designer. And this is what you want to turn into? I look forward to our journey together into the wonderful world of Web design.

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: Cascading Style Sheets, CSS, design, graphic design, layout, Semantic Web, spider, typography, Web designer, Web site directory, World Wide Web, XHTML

Check this out:

Our focus in class will be on creating a number of CSS rules that allow you to float callouts and graphics left and right. The float, as many of you have learned already, is an essential design concept in CSS. Using your exercise six cleanly scrubbed, XHTML-ized, Semantic Web-proofed, well-formed and valid text, Open Communication Climate, you will plant two callouts and two graphics, both left and right, making necessary adjustments to the graphics and text to improve design for readability and overall aesthetics. You will want to pay special attention to the relationship of the graphics, callouts, paragraph size, and headings: a full-bore design experience is about to be yours.

The graphics above left and right are the ones you will use for this exercise. I will provide written instructions and will work through the design and rule-writing with you in class. I think you will find working with the float to be a lot of fun.

At the bottom of your newly designed page, you will add this source note after the Buchholz source note:

Microsoft Office Clip Art Photographs: j0406569.jpg (Shaking hands) and j0289517.jpg (2 women in office). (n.d.). Microsoft Office 2003. Redmond, WA: Microsoft Corporation.

Remember: when you hand in Assignment Two, due Thursday, November 20, or Friday, November 21, turn in the annotated Assignment One, so that I can make sure you had no trouble making your corrections. Be sure also to take advantage of shift-F7 in Dreamweaver; (spell-check is your best friend in Web design.)

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: CSS, Float, Graphics, Microsoft Clip Art, Open Communication Climate, scrubbed, Semantic Web, source graphic, spell-check

Check this out:

Next class we will finish up the look and feel of your Web site template by creating the CSS "buttons." I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages. If you enlarge the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. With any luck, we will be able to complete the lion's share of this exercise in class. At any rate, you will receive a sheet of directions that will allow you to work on your own outside of class.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two is due Tuesday, November 18, at the beginning of class.

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: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

Check this out:

You will spend a good deal of time in this class making sure that your css rules are properly ordered. As the 370.css file continues to grow (we'll be adding a good number of rules in the next few weeks), you will want to be able to traverse the rules easily. Thus, in addition to good structure, you will want to add some descriptive sign posts along the way.

In setting up your signposts, you will need to comment your CSS style rules in the hierarchical chunks I keep alluding to in class. This css commenting model (pdf) will give you an idea of the way I have commented my 370.css thus far. Feel free to use this document as a reference point in your own commenting of 370.css for Assignment One. I will address any concerns you may have next class.

If you are interested in some further commenting ideas, check out "Brownspank, a standards-conscious Web Designer for Brown Battery Studios," who has posted an interesting article on CSS comments: Maximize CSS Comment Usage. Take a look at this for some good commenting ideas.

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: Assignment One, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org

Check this out:

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.

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: container, CSS, Dreamweaver, sibling, template, wrapper

Check this out:

In the final class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation. The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

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: Cascading Style Sheets, CSS, PowerPoint, punctuation, style rules, syntax, tutorial

Check this out:

Lee Underwood's article on the HTML Hierarchy will help you to understand the container model and XHTML hierarchy, both essential to working effectively with Cascading Style Sheets (CSS).

Underwood notes in part two of his article: "As we look at the structure of the page we will see that each element is related to another element. This is called a parent-child-sibling relationship [tree structure]. An element that is directly above another element in the hierarchy is called the parent of the element below it. The element below the parent is called the child. When two elements are equal in the hierarchy, they are known as siblings."

The PowerPoint tutorial on "Getting Started with XHTML" reviews this nesting/container structure at the tag level. We will examine this tutorial carefully in class. If you are thoroughly comfortable with the concepts of hierarchy and containment, you will be better able to master all areas of Web design.

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: Cascading Style Sheets, child, CSS, CSS box model, form elements, hierarchy, Lee Underwood, parent-child relationship, parent-child-sibling, relationship, sibling, sibling relationship, XHTML

Check this out:

A revolutionary development in communication, the World Wide Web offers unprecedented access to mass audiences. This introductory course focuses on the principles and practices necessary to create effective pages for the Web.

You will receive instruction in writing hypertext documents, designing Web pages, authoring well-formed XHTML, CSS (Cascading Style Sheets), and meeting a variety of technical challenges. The course focuses on purpose, scope, and audience considerations in page design; writing informative and persuasive on-line documents; designing coherent, portable, navigable, and interactive pages; and employing the fundamental principles of color theory, typography, layout and graphic design for the Web.

Combining lab, lecture, and discussion, you will learn the best practices of electronic design to create your own interactive Web sites. Be sure to check into the class Web site every day for announcements.

Here is a picture of a Web designer. And this is what you want to turn into? I look forward to our journey together into the wonderful world of Web design.

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: Cascading Style Sheets, CSS, design, graphic design, layout, Semantic Web, spider, typography, Web designer, Web site directory, World Wide Web, XHTML