IDCC 370: Web Design I   Spring 2008

Check this out:

During class on Tuesday, November 29, we will begin our foray into the grand adventure of tomorrow's Web through the technology known as Cascading Style Sheets (CSS). The screenshot to your right shows how Dreamweaver prompts you in context for a new css style. You are actually given a number of choices, some of which may or may not make sense to you, depending upon your stying intent. In class, we will carefully explore the options listed and work through some actual style rules so that you will understand all the possibilities and when they are best to employ.

Note the many options you have when styling CSS for XHTML (screenshot left). We will not examine everything available, as that would be overwhelming for IDCC 370. Those of you going on to IDCC 380 Web Design II will be able to explore more and create some actual designs using CSS. For now, however, it is enough that you master the CSS specifications for Assignment Three, as cited here: "Declare styles for P, body, ul, ol, H1, H2, H3, H6, and any other selectors you choose. Be sure to set H1, H2, and H3, font colors, paragraph indent, and left and right margins for body and headers. Create a minimum of two class selectors."

To fulfill even this modest specification will require that you understand the fundamental underpinnings of CSS, as described in the Cascading Style Sheet tutorial, slides 1-7 (please review these slides over the next few days).

The screenshot to your right depicts the 3 panel groups you should have open when designing with CSS. Dreamweaver gives you a number of snapshots into your CSS activity, in design and code view. We will examine all of these. I hope you don't get confused by all the options; there are many, and they often offer rich and deep access to styling.

After I give a brief chalk talk in class on CSS, you will download to your assign3 folder this Word doc file on Punctuation. Next you will import it into Dreamweaver, clean up the Word HTML, eliminate all align attributes and "strong" tags to make sure you have pristine XHTML for styling. Given this clean file, we will spend as much time as we need in creating style rules and in understanding the fundamental functions of CSS.

Don't forget the extra credit assignment. If you have any questions about the assignment, CSS, or Assignment Three, just ask in class or feel free to e-mail me at wbuchholz@bentley.edu.

Check this out:

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.

Questions? Drop me a line at wbuchholz@bentley.edu.

Check this out:

Come to class on Thursday, November 17, with any questions you may have about Assignment Two. Remember the new due date for the assignment is Tuesday, November 22. As I noted in class when making this offer to you, the graded assignment will be returned no earlier than Thursday, December 1. You will still have plenty of time to make your corrections on Assignment Two for turning in with Assignment Three, due no later than 5:00 p.m., Tuesday, December 13.

In the meantime, we will begin work on Assignment Three specifications in class. Our first challenge will be to understand and create interactive forms for the Web. 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. I will also make available an extra credit assignment that will give you the opportunity to build an interactive form.

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 Thursday, you will need this markup, often referred to as the cgi snippet, to test the functionality of your form.

If you have any questions about the specifications for Assignment Two, or the work we will begin next class in form building, please feel free to e-mail me at wbuchholz@bentley.edu.

Check this out:

Kudos to all of you for the good work and extreme patience you showed during the last two classes working with the vagaries of JavaScript and window spawning. I know that it was a real struggle for some of you, but you can be proud of what you achieved technically.

Our time was well spent, but I had promised you some in-class opportunities to work on Assignment Two -- and given the cognitive load of JavaScripting, we really never were able to devote much time to the assignment. Let's fix that.

Tuesday, November 15, be prepared to work in class on assignment two. I'll float around the room and troubleshoot various technical issues that may crop up. I will also answer any questions you may have about the assignment specifications.

Technical issue: Note that specification 15 requires you to use alt text "whenever possible" on images, image maps, and flash buttons. Flash will not take the alt attribute, so you will not be able to use it there (that is okay for purposes of this assignment; don't worry about not having the alt attribute on Flash buttons). Also Flash is unable to call up href fragments using a relative URL. You will have to use an absolute URL to make the link travel to the exact spot on the page.

If you have any questions about the assignment or have some technical issues that you need addressed, e-mail me at wbuchholz@bentley.edu.

Check this out:

The screenshot to your right depicts the look of a page you will design in class on Tuesday, November 8. The challenge of this assignment is to bring together various design principles, including:

1. jell-o design with a centered, padded table
2. two background colors layered (page and table)
3. appropriate use of H1 and H2 tags
4. page title for browser window, printing, system tray, et al.
5. text flow right and left around a graphic (also using hspace for some "breathing room")
6. graphics alt tags that clearly describe the link destination and window behavior
7. hyperlink title tags that clearly describe the link destination and window behavior
8. JavaScripts on all linking elements that open in new windows, placed as directed on the screen (you will have to add top and left parameters to the markup)
9. one style rule for the appropriate visual cue on a graphic hyperlink (style="cursor:pointer")
10. periodic checks for functionality and specification fulfillment in building the page
11. FTP the finished .htm document and graphic elements to your assign2 folder and images folder, respectively
12. perform a final functionality check on the Internet; when finished, call for a Quality Control (QC) checker to release your document

This word document contains the text and all the specifications for your page.

When you have finished your design and have passed your QC (Quality Control) check, then become a QC checker yourself. Should any of your classmates need help, you can give them a hand as well.

Check this out:

In class on Tuesday (11/01/05), we began to explore, through discussion and the hands-on exercises, various ways to create navigation media and spawn new windows using the HTML attribute target="_blank". I suggest that you read the tutorial on Floating Windows, as that captures in quite some detail much of what we covered in class and will continue to cover next class. Should you wish to print the tutorial and accompanying notes (recommended), simply click on the graphic at left for an easy-print PDF version of the complete discussion.

Here are some of the key terms and concepts covered in class on November 1:

1. image map (client-side and server-side; we created client-side)
2. hotspots (hyperlinks on image, located through coordinates, i.e., mapped onto the image)
3. visual cues through cursor change of state (arrow to index-finger hand) and tooltip using the alt and title attributes
4. spawn (to spawn a window or windows); to create "floating" windows
5. browser back button, browser history, emphasizing again the importance of the "title" tag
6. JavaScript behaviors (script generated in Dreamweaver)

Time permitting, we will continue to work during the next class on JavaScript behaviors for in-line text links, image maps, and image links. Our primary focus, however, will be to begin discussion of the navigation tutorial, so please be sure to print out the slides and notes available on the tutorial page in PDF form (for your convenience, just click on the graphic to the right for immediate access to the navigation PDF). Remember, a significant part of your Web page analysis for Assignment Two can focus on the navigation strengths and weaknesses of the site pages you choose. I would expect you to use all the class materials at hand (terms, concepts, tutorials, class discussion notes, and hands-on exercises) to demonstrate in depth and in detail your mastery of this Web design material.

If you have any questions about this material, or about Assignment Two, e-mail me at wbuchholz@bentley.edu or use the handy contact form at the bottom of this page.