COURSE CALENDAR | WEEK 11 CLASS OUTLINE | Homework

Topics Covered in Class:

  1. AD650 Learning Forum: New Technique presentation
  2. Student Portfolio Client Sites: Today your site should be functional (all pages in the site are accessible through global and/or local navigation links) and structured (all pages in the site should have a template page applied with the basic stylesheet).
  3. Introduction to the DOM: Finish Week10 Tutorials
  4. Javascript Image Gallery (the final product)
    1. Start with a well-marked-up HTML document using a navigation list and a placeholder image that will be replaced with a linked image when requested.
    2. Write a JavaScript function to display a requested image.
    3. Save the script in a file called showPic.js and link the JavaScript file to the head of your HTML document.
    4. Trigger the function with an Event Handler from within the HTML document (not the best way, but we'll use it for now)
    5. Add a description below the placeholder image in the HTML document.
    6. Expand the showPic function using getAttribute to get the value of the title attribute and then
    7. Understand childNodes, nodeType, and nodeValue properties
      1. childNodes property is a way of getting info about the children of a specific element in the node tree. (diagram)
        1. firstChild property is used to get the value of the first node in the childNodes array. (diagram)
        2. lastChild property is used to get the value of the last node in the childNodes array. (diagram)
      2. nodeType property is a way of getting info about the type of node in the node tree. You can target specific nodes using functions. We will look at 3 of the 12 node types. Each node has a specific value. (diagram)
        1. Element nodes have a value of 1
        2. Attribute nodes have a value of 2
        3. Text nodes have a value of 3
      3. nodeValue property allows you to change the value of a text node. It allows you to get and set the value of a node. (diagram)
    8. Use nodeValue with firstChild to update the description paragraph. We want to set the value of the paragraph text node using the text from the title attribute of the link that is selected. (diagram)

Homework | Week 11

Client Site Work:

  1. Make sure you are on track with your Milestone Schedule
    • Phase 1: Site Definition
    • Phase 2: Developing Site Structure
    • Phase 3: Interface Design & Production
      • The Design Process
      • Protosite Development
      • Art Optimization/Production
    • Phase 4: Technical Engineering
      • HTML Production/Layout ---- WE ARE HERE!!
      • Beta Launch/QA Testing
    • Phase 5: Publishing/Marketing/Launch
      • Maintenance Schedule/Updating
      • Domain and hosting setup
      • Search Engine Submissions
      • HTML Style Guide
  2. FINAL Stylesheet: By next class you should have your art optimized and have refined your style sheet.
    1. Use environmental style and organize your styles with a basic/main stylesheet and import additional stylesheets for formatting, etc. (example)
    2. Please define your text sizes in ems and adjust the over size via % in the body.
  3. TEST everything in Browser CAM: email me your Browser Cam public link