Readings:

1. Osborn – Lesson 13 with CD
2. W3Schools Online Web Tutorials
   • CSS Box Model
   • CSS Border
   • CSS Outline
   • CSS Margin
   • CSS Padding

______________________________________________________

Spry Widgets

What:

• a JavaScript library for AJAX developer developed by Adobe
• Data-driven interface elements that can be easily added to a page
• Can be build and updated themselves using real-time data from XML or HTML

Include:

• Spry menu bar
• Spry tabbed panel
• Spry accordion panel
• Collapsible panel

Please pay special attention to the following:

1. When you insert a panel on a page, a separate folder called SpryAssets will be created automatically in your folder where your .html file is. Inside this SpryAssets foler, you will find two files, one is a javascript file (.js), the other a CSS file (.css). If you insert three panels on a .html page, there will be three sets of files (one .js and one .css) inserted in this SpryAssets folder. Remember, this folder, as well as these .css and .js files, is created by Dreamweaver automatically. When you upload your .html file, this folder (with the files inside) has to be uploaded to your server exactly the same (same folder name, same file names, and at the same location).
   NOTE:  You cannot upload folders onto your server, you have to create a folder (SpryAssets), name it exactly the same, and upload your files into it.
2. If you would like to know what each CSS style for under the CSS Style panel on your right, click the .css file link on the top left window, such as SpryMenuBarHorizontal.css. It will open up the .css codex. Above each definition, you will see grey comment lines.

______________________________________________________

Section 1. Spry menu bar:

Please watch Lesson 13 DVD accompanied with your textbook. It explains the Spry menu bar clearly. The video posted below is supplementary. Pay attention to where to insert the Spry menu. You do not have to watch this video to the end – up to 14:21 is enough.

______________________________________________________

Section 2. Spry tabbed panel:

** You may skip the validation part.

______________________________________________________

Section 3. Spry accordion panel:

______________________________________________________

Section 4. Collapsible panel:

This video demonstrates how to create collapsible panels with images linked to Web sites.

This video also shows how to change the CSS settings of the panel, so that the color and fonts coordinate with your webpage’s theme.

______________________________________________________

Assignment (5 points):

Please revise your week4 page (the page constructed with <div> tags) by adding the following panels (here is the example):

1. Horizontal menu bar with (2 points):
   • menus (at least 3 tabs,  and valid links to your assignments and other webpages);
   • sub-menus ( at least one of the tabs on the main menu has sub-menus, and valid links);
   • change the background and text color to coordinate with your page color;
   • change the background and text color of hover state;
2. Spry tabbed panel (1 point):
   • at least two tabs with contents, background and text color coordinated with your page color;
   • make the colors change in different state (hover, stable, or open);
3. Spry accordion panel (1 point):
   • at least three accordions with contents, background, and text color coordinated with your page;
   • displayed in the side column;
   • make the colors change in different state (hover, stable, or open);
4. Collapsible panel (1 point):
   • contents, background, and text color coordinated with your page;
   • make the colors change in different state (hover, stable, or open);
   • displayed in the side column.

***When you are done, please submit the link of this page to Assignment 6 folder on the Blackboard. I am going to make this page your linked home page on our class blog.