Griffin | Web Design 2
 
Resume Table of Contents  

Web Design 2
DHTML

DHTML Rocks!

 
State Standards
 
  • WD 2.2 Content Standard:
    Students use commercial Web design software
    Dreamweaver) to create attractive Web pages.
Chapter Objectives
 
  • Download and modify a DHTML menu.
  • Describe and edit DHTML variables
  • Edit DHTML and Javascript files your ones own use.
1. DHTML Menu1 Assignment
Duration: 2 Periods
 

Create a New Folder called "DHTML".

This tutorial shows how to insert a DHTML menu into a web page. DHTML advantages are:

  1. DHTML Menu’s are compatible with FF1, IE5, Opr7
  2. DHTML Menu’s load quicker than menu’s developed in Fireworks.
  3. DHTML Menu’s are easy to update. You can update your entire menu from one file.

This assignment will give you experience figuring out how tech problems are solved in the "real world". You will need to problem solve with little teacher help. Answers will cost points.

Step 1: Please see http://www.dynamicdrive.com/, Menus & Navigation, , Multi-level menus, and then HV Menu to see a DHTML menu example.

  • If you have access to Winzip (if you are working from home) download the tutorial and go to http://www.dynamicdrive.com/. View the sample menu page.
  • If you are working from FHS, create a new dhtml folder, download each individual file there.

    Note 1: This tutorial assumes some basic technical and HTML knowledge.
    Note 2: Only make one change at a time before saving and viewing. One small error can make it difficult to troubleshoot.
    Note 3: You must have exmplmenu_var.js, menu_com.js, tri.gif, and example.htm in your DHTML folder. The other files are optional for installation help.

Step 2: Show the instructor a functional version of example.htm from your new dhtml folder. (Do not show the teacher example.)

Step 3: Read the HV page on Dynamic Drive and the Tutorial to see how to edit the exmplmenu_var.js file.

Step 4: Check out the graphic on the right to see what variables look like in javascript. Pick a color using visibone.com/colorlab/ and note the color code.

Step 5: Edit the exmplmenu_var.js so the example.htm has a different background and text color. Look closely at each description to figure out what to change.Do not change first variable (5).

Step 5: Show the instructor your new version of example.htm from your new dhtml folder.

    DHTML 1
    1. Different Background Color
    5
    2. Different Text Color
    5
    Total  
     ___ 10 points

 

2. DHTML 2 Assignment - Using a DHTML Menu
Duration: 2 Periods
 
 

Step 1: Create a new folder called dhtml2. Save all necessary (same five from above) files within this folder.

Step 2: Create a web page of your second semester schedule that looks like DHTML Assignment 2.

  • Make sure the heading is not more than 100 Pixels high.
  • Include your second semester classes for all periods (show free periods and study halls).
  • Include a Home Button.
  • Include at least three sub-selections as shown in the example.
  • Include at least one link.
  • Title your page.
  • Move the menu to the appropriate position. (Higher on the page)

    Note 1: In your exmplmenu_var.js file var NoOffFirstLineMenus MUST EQUAL the Number of first level items. (Click on thumbnail for more detail.)
    Note 2: There are two ways to begin this assignment.

Solution 1: Create a new dhtml2 folder. Copy all four files (exmplmenu_var.js, menu_com.js, tri.gif, and example.htm) to the new folder. Edit example.htm and exmplmenu_var.js to include the appropriate info.

OR

Solution 2: Create a new dhtml2 folder. Copy both javascript files and the tri-gif graphic to the new folder. (The js files must be in the same folder as the web page that calls it.) Create a new web page and make sure to include the correct code to call the js file. Code to include is on the dynamic drive site.

Step 3: Edit the exmplmenu_var.js so the menu is like the example shown above. Open the graphic files on the right to see more info regarding the javascript variables.

Note 1: See code descriptions for help.

 

 

 

 

Image 2: Be very careful when you cut menu levels. See image above for menu level help.

 

Image 3: See above for menu code descriptions.

.

 

 

Image 4: See image above for more menu level help.

Step 4: Link to you index and show the instructor your schedule page from your dhtml2 folder.

    DHTML 2 Assignment
    1. Entire schedule in menu  
    2. Menu Position (h/v alignment)  
    3. Menu background color fits scheme  
    4. At least 3 Sub-selections  
    5. 100 Pixels H Heading  
    6. Web pages for entire schedule  
    7. Web page for lunch w/ linked sub selection (see example)  
    8. Home Selection  
    9. Appropriate HTML Titles  
    10. No blank links  
    Total  
     ___ 20 points
 
3.

DHTML Quiz
Duration: 1 Period

 
 

Create a folder named 'DHTML-Quiz'. Save the appropriate files into the folder. Complete a simple DHTML Menu with the elements shown in the example and the grading scale below. Make sure to link the completed menu to your index.

Make your page look like the example quiz page.

Answer WHY we should use DHTML menu's!

    DHTML Quiz
    1. Different Number of Levels  
    2. At least one sub level.  
    3. Different Color Background  
    4. Different Color Text  
    5. At least two links (resturant and DHTML2).  
    6. Proper menu placement  
    7. Text not on edge  
    8. Menu height matches table height  
    9. HTML Title  
    10. WHY DHTML  
    Total  
     ___ 20 points

Additional Resources

A. Online Resource
http://www.dynamicdrive.com/

top