Lab 8: DHTML

Student Learning Objectives

• Design and implement using interactive Web page that uses the DHTML to provide user feedback
• Use an externally linked JavaScript file with functions called by user events
• Use your imagination and an externally linked CSS to come up with a Web page style that will impress (or repulse) the grader
• Use comments, meta tags, and Tidy within HTML-Kit to create JavaScript, Web, and CSS pages that conforms to the CS 350 Coding Standards

Assignment

Use your imagination and a combination of XHTML, CSS, Javascript, and DOM to create an interactive Web page. You should assume that Firefox will be used as the test browser.

Save your pages as index.html, lab8.js, and lab8.css in folder U:\Lab8 in your cs350 account.

• As ususal, begin your page with your account number (e.g. in cs35002_nn [h1]) and your own name [h2].
  • Embellish the CS 350 account number and name so that it changes in appearance as the mouse moves over the text.
• Use an externally linked JavaScript file to provide the event handlers
• Use an externally linked CSS style sheet to supply the initial page style rules
  • Modify the style rules applied to the page elements with your JavaScript event handlers
• Develop page content to demonstrate the power of DHTML
  • Look through some Dynamic HTML tutorials to pick up some useful tricks
  • Use at least five different DHTML effects
  • Annotate (hand annotation is OK) your screen printout to help the grader know the different DHTML effects enabled on your page

To Receive Credit

• Print out and staple together four printouts:
  • your Web page as displayed in a browser
    • Annotate this printout (with pencil) to indicate the DHTML features you implemented
  • your index.html XHTML 1.0 strict code
  • your lab8.js JavaScript functions (external file)
  • your lab8.css external style sheet
• Save your files as index.html, lab8.js, and lab8.css in folder U:\Lab8 on your cs350 u:\ drive.

Grading Criteria

• Labs will be graded on a scale of 0 to 10:
  • 10: Excellent: no problems detected in the code and you used at least 5 different DHTML features
  • 9: Very well done: one minor problem detected in the code or only 4 different DHTML features
  • 8: Well done: two minor problems detected in the code or only 3 different DHTML features
  • 7: Acceptable: three problems or only 2 different DHTML features
  • 6: Problems: four or more problems or only 1 different DHTML feature.
  • 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone.
  • 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score.

Screen Snapshot

None provided, use your own design. Begin the Web page with your CS 350 account number [h1] and name [h2].