Homework Assignments

A week-by-week schedule of reading and tests is on the home page.

Assignments must be complete, on time, and your own original work.
You are responsible for knowing the class homework policy.

Re-grades are not available after Assignment 3.


Assignment 5: Form Validation

Use Dreamweaver to create a working, accessible web form with Spry validation. (300 points)

Due date: Thursday, December 15th at 9:00 AM

  1. Create a professionally styled page with your page styles on an external style sheet.
  2. Your page's design, layout, and code should demonstrate your understanding of the information we have covered in the course, and should reflect revisions in response to any feedback I have given you on previous assignments.
  3. Your page must have at least one floated sidebar, and a content area with a headline and several paragraphs of text relating to your subject.
  4. Use the technique we learned with the Quinault demo to place a clickable logo in your header that blends seamlessly into your header's background. Make the logo link back to your Web 130 portal page.
  5. Use Dreamweaver's form-building tools to create a small form on its own web page. Build this form from scratch: don't copy and edit the form we built together in class.
  6. Your form must include at least:
    • two text fields
    • one text area
    • one list/menu (not copied from the internet)
    • three checkboxes
    • one set of at least three radio buttons.
  7. Important: Your form must include a text field with the name of "email" for the form handler to work!
  8. Include label tags for each form element. Wrap your label tags around the input tags, or attach them using the "for" attribute, as appropriate for each type of form element.
  9. Include a Spry validation widget for an email address. (Please note that we are NOT using the Validate Form behavior, described on pages 368-369 of our textbook. Follow the instructions for Spry Form Validation on pages 388-392, and the class handout, instead.)
  10. Include a Spry validation widget for a check box.
  11. Include a working submit button.
  12. Change the default background color for your Spry validation widgets’ Valid and Invalid settings.
  13. Change the default text color for your Spry validation widgets’ error messages.
  14. Change the default wording of your Spry validation widgets’ error messages.
  15. Include a behavior on your main page that opens the form page in a new mini-window, as described in our book on pages 360 - 362. Make the object/event that triggers the new window easy for me to find (i.e., use a null link with a hover state to show me that it's clickable.)
  16. Format the new window’s size and browser chrome settings, as described in our book on pages 360 - 362, to be appropriate to your form.
  17. Create a thank you page, sized to fit in the same mini-window as the form. Include a copy of the form on the thanks page, in case your user forgot to mention something before hitting "send".
  18. Style your form page and thank you page so it’s obvious that they go with the original page. (Don’t make your user wonder if they’ve left your site.)
  19. Edit the form handler we used in class so it sends your form results to rgilde01@seattlecentral.edu. (Please do your testing with your own email address, not mine!) If you are using an SCCC server, you’ll need to send your tests to your own SCCC email account.
  20. Validate your HTML and CSS for all three pages.
  21. Place both validation badges on each page, and test them.
  22. Upload your pages, including the form handler, to your server space and link to your portal page as Assignment 5 by 9:00 AM on Thursday, December 15th .

We will have in-class lab time to work on this assignment. I strongly recommend getting the functionality parts of the assignment (behaviors, form validation, and functioning form handler) finished before our last class, so you can ask questions. I will be available to answer questions until the end of class (7:30 PM) on Wednesday December 14th.


Assignment 4: Interactive Pages

Create an interactive web page, using Dreamweaver Sliding Panels, behaviors and Spry widgets. (300 points)

Due date: Wednesday, November 23rd at 2:00 PM.

  1. Create a professionally styled web page on any subject of your choice.
  2. Feel free to use your A2 page as a starting place, but be sure to revise your design and code in response to my feedback on your previous assignments.
  3. Your A4 page must have at least one floated sidebar, and a content area with a headline and several paragraphs of text relating to your subject.
  4. Place your page styles on an external style sheet.
  5. Add and style a Spry Sliding Panels widget. Include at least four panels. Your panels may slide either vertically or horizontally. Our Sliding Panels handout has step-by-step instructions for installing and styling the widget.
  6. Style the sliding panels CSS to fit your design. In other words, give the panels a height, width, font styles and/or background colors and/or images which are neither the default nor the values I used in my example.
  7. Style the navigation for the sliding panels to fit your design. In other words, give the links clickable text or images with font styles and/or background colors and/or background images which are neither the default nor the values I used in my in-class demo examples.
  8. Make sure your sliding panel navigation's null links use href="javascript:;" rather than href="#", so they don't make the browser scroll to the top of the page.
  9. Insert at least one rollover image on your page, using Dreamweaver’s Insert Rollover button. (See our Chapter 13 reading assignment for details on how.)
  10. Make the rollover image link to a new page. Any page is fine: it doesn't need to be one you built.
  11. Add a Spry Tooltip widget to an element on your page. (See our Chapter 14 reading assignment for details on how.) Make the element I’ll need to hover over to find the tooltip fairly obvious: don’t make me search for it!
  12. Add text to the tooltip that is appropriate for your page and subject.
  13. Style the tooltip so that its width, padding, background color, and font styles are appropriate for your page and are not the default values. Consider giving your tooltip a border, if it fits with your page design.
  14. Add any Spry Effect of your choice to an element on the page. (Exception: it can't be the Shake effect we used in our in-class demo.)
  15. Make the effect easy for me to find: if you want your user to click something, that thing should have a hover state to give visual feedback.
  16. Validate your HTML and CSS.
    (NOTE that .iframeTooltip won't validate. Don't worry about it.)
  17. Place both validation badges on your page, and test them.
  18. Upload your page and its dependent files to your server and link it to your portal page as Assignment 4 by 2:00 PM on Wednesday, November 23rd.

Note: Any code in the folder named sp_widget and its sub-folder(s), you are free to copy and paste into your files. Code from the pages I built for demonstration purposes may NOT be copied into your assignment.


Extra Credit: Spry Widgets

For 25 points extra credit, complete by 2:00 PM Wednesday, November 23rd.

  1. Turn in a professionally styled page with any ONE of the following Spry widgets applied and styled to match the page:
    • Menu Bar (horizontal or vertical, whichever works for your design)
    • Tabbed Panels
    • Accordion
    • Collapsible Panels
  2. Use at least five instances of the widget (5 menu items, 5 tabs, 5 panels) to demonstrate that you know how to use the widget in a page.
  3. Be sure your code validates, and your page includes both validation badges.
  4. Send me an email with the subject line "Extra Credit" before 2:00 PM on Wednesday, November 23rd to let me know that I should check your portal page for the extra credit assignment.

Lorem ipsum text is fine for this extra credit assignment. Feel free to start with a page from an earlier assignment, as long as you update it in response to any feedback I gave you about that page.


Professional Pages

Each homework assignment should be turned in on a "professionally styled page". What does that mean, exactly?

For the purposes of this class, a professional page is one that:

  1. Is styled. Your fonts, font size, colors, link styles, etc. should not be browser defaults. Pages with white backgrounds are fine, but your page should be intentionally styled so it's clear that you meant the background to be white.
  2. Is coherent. Your page should have a header, sidebar, text, images, and footer with copyright info, all of which relate to your chosen subject matter. Clear, consistent navigation should show me how I would get to other pages on the site, even if they don't exist yet (use null links).
  3. Is legible.
    • Colors and contrasts vary from screen to screen, so err on the side of caution. Avoid putting text over busy background images, or using dark text on dark backgrounds, light text on light backgrounds, etc.
    • Line height should be about 130% - 150%, depending on your font, but never the browser default of 118%.
    • Text columns shouldn't exceed about 500px max width: add sidebars or reduce page width as needed to avoid long, hard-to-read lines of text. Avoid flexible width layouts.
  4. Has no broken links or paths. Null links (href="javascript:;") are fine, but your links and image paths shouldn't try to take me to files that aren't there.
  5. Has no inline styles. All visual and positioning styles should be written in CSS, embedded in the head's <style> tags or linked in an external stylesheet.
  6. Validates. Before turning in your page, run it through the WC3 Markup and CSS validators. Your doctype may be either XHTML 1.0 Transitional or XHTML 1.0 Strict. (I recommend using Strict: it will help you learn to write better code.) If you use Strict, target="blank" won't validate, but that should be the only validation error on your page.