IDCC 370: Web Design I Fall 2009

Check this out:

This handy little state drop-down element and this country drop-down element will save you a great deal of typing. (Warning: These links open in new browser windows.)

After opening a linked file, just copy the markup to the clipboard, and in code view paste it in your document at the desired place. Or if you prefer, save the file to your assign3 folder, then open, and take it from there.

You are free to use these form elements in Dreamweaver, whenever you need to, especially in your final assignment, due NLT 4:30, Friday, May 1, delivered to Gail Wessell, Smith 121. Be sure to sign the roster when handing in Assignments 1, 2, and 3 as a package.

Thinking about how to create a form is half the battle in designing an interactive survey for the Web. The Form Development Cycle tutorial (opens in a new window) will help you to understand the 8-part form development cycle that will make Assignment Three much easier for you as you go about designing your on-line survey. I highly recommend that you step through the tutorial before too much longer.

Note that you can save yourself much time and misery if you plan carefully. This assignment is a perfect example of how to use paper and pen (low fidelity prototyping) literally to sketch your plan and its phased implementation. This approach to form design is iterative. You design, implement, test, redesign, reimplement, and retest. Work slowly, carefully, and in small increments, just as we are working in class on understanding the various form elements.

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: check boxes, Dreamweaver, Form Development Cycle, form elements, Form Elements Accessibility Guide, interactive form, on-line survey, radio buttons

Check this out:

Next class we will begin work on the interactive form elements of the Assignment 3 specifications in class. Our first challenge will be to understand and create correctly labelled interactive form elements. Over the years, students have found this technology to be inviting and actually quite a bit of fun. I hope you will have the same experience. The screenshot of the forms tab insert bar (above) shows one easy way to access the 14 form elements available to you in Dreamweaver. The screenshot to your right shows the drop-down/fly-out menu system that also allows access to the form elements. I use them both, depending on where I am working in the form being built.

In class, we will very carefully construct a prototype form that will include all the elements needed for assignment 3.

To make a form work on our servers, you will need some special markup that calls up a Perl file (mailto_nt.pl) in the cgi-bin (Common Gateway Interface-binary) folder on the server atc.bentley.edu. This HTML markup is simple text in a Notepad file (cgimailto.txt) containing hidden elements that allow the form to function. These elements must be inserted into the head of the form tag. Therefore, in class on, you will need this markup, often referred to as the cgi snippet, to test the functionality of your form.

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 Three, binary, cgi snippet, Common Gateway Interface, form elements, form tag, interactive form, Perl

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:

This handy little state drop-down element and this country drop-down element will save you a great deal of typing. (Warning: These links open in new browser windows.)


After opening a linked file, just copy the markup to the clipboard, and in code view paste it in your document at the desired place. Or if you prefer, save the file to your assign3 folder, then open, and take it from there.

You are free to use these form elements in Dreamweaver, whenever you need to, especially in your final assignment, due NLT 4:30, Friday, December 12, delivered to Gail Wessell, Smith 121. Be sure to sign the roster when handing in Assignments 1, 2, and 3 as a package.

Thinking about how to create a form is half the battle in designing an interactive survey for the Web. The Form Development Cycle tutorial (opens in a new window) will help you to understand the 8-part form development cycle that will make Assignment Three much easier for you as you go about designing your on-line survey. I highly recommend that you step through the tutorial before too much longer.

Note that you can save yourself much time and misery if you plan carefully. This assignment is a perfect example of how to use paper and pen (low fidelity prototyping) literally to sketch your plan and its phased implementation. This approach to form design is iterative. You design, implement, test, redesign, reimplement, and retest. Work slowly, carefully, and in small increments, just as we are working in class on understanding the various form elements.

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: check boxes, Dreamweaver, Form Development Cycle, form elements, Form Elements Accessibility Guide, interactive form, on-line survey, radio buttons, survey

Check this out:

Next class we will begin work on the interactive form elements of the Assignment 3 specifications in class. Our first challenge will be to understand and create correctly labelled interactive form elements. Over the years, students have found this technology to be inviting and actually quite a bit of fun. I hope you will have the same experience. The screenshot of the forms tab insert bar (above) shows one easy way to access the 14 form elements available to you in Dreamweaver. The screenshot to your right shows the drop-down/fly-out menu system that also allows access to the form elements. I use them both, depending on where I am working in the form being built.

In class, we will very carefully construct a prototype form that will include all the elements needed for assignment 3.

To make a form work on our servers, you will need some special markup that calls up a Perl file (genmail2.pl) in the cgi-bin (Common Gateway Interface-binary) folder on the server. This HTML markup is simple text in a Notepad file (cgimailto.txt) containing hidden elements that allow the form to function. These elements must be inserted into the head of the form tag. Therefore, in class on, you will need this markup, often referred to as the cgi snippet, to test the functionality of your form.

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 Three, binary, cgi snippet, Common Gateway Interface, form elements, form tag, interactive form, Perl

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