Assignment #10

RCC Fall 2009 CIS/CAT-76B Dreamweaver
Dreamweaver CS4

50 Points
Due TUE NOV 24 at start of class

Before you attempt this assignment, you are required to have read and understood the information contained within the Assignment #0 document, which is available from the class web site. To avoid unnecessary point loss, make sure that you turn in all of the required printouts and staple them together in the order indicated within this document.

Part 1: "Lesson 12: Working With The Spry Framework"

Follow the steps below to learn about building interactive AJAX-based (Spry) widgets on your Web pages (from lesson 12 of our textbook). These widgets will spice up your page by interacting directly with the user's mouseovers and mouse clicks to update the Web page's display appropriately without any page refreshing or reloading. Examples of Spry Widgets include multi-level menus, and tabbed panels. Be careful to read all of the steps below before you begin your work.

  1. Read pages 293 - 318 and perform all lesson steps on those pages. This will give you a good background on the issues related to creating various Spry Widgets. based Web pages using Dreamweaver.
  2. Be sure to make a good effort to add useful CSS enhancements to the Spry Widgets when you reach the two "On your own" sections on pages 305 and 311. However, do not add any new content (just CSS styles) to the page -- you'll be asked to add specific new content in part 2 of this assignment.
  3. After completing the entire lesson, you are ready to continue on to part 2 to make some additional modifications to your lesson 12 page and to create some printouts.

Part 2: "Finishing Your Lesson 12 Spry Page"

In this part, you will continue working on your lesson 12 Spry-based page from part 1 in order to complete the page. To do so, you will follow the steps below.

  1. First, copy the existing "index_work.html" file from lesson 12, calling the copy "index_work2.html". Keep it in the same working root folder that you used for your original lesson 12 files. Then open up that new "index_work2" page to make further changes to it in Dreamweaver.
  2. Insert your name into the beginning of this form page's title.
  3. To the existing Spry Menu Widget's "Products" menu, add an "Outdoors" product category, and then add an Outdoors submenu with menu items "Camping Supplies" and "Sporting Goods". To clarify, as a result of these changes, in the browser when the user mouses over the "Outdoors" menu choice on the "Products" menu, they should be presented with the "Camping Supplies" and "Sporting Goods" choices.

    Note that since there are no actual "Camping Supplies" or "Sporting Goods" pages currently in the site, the "links" for these two menu items should just be set to "#" like the others. Save, preview, and modify as needed until your new menu items are working correctly.
  4. To finish off the menu system, make sure that there are no "Item 1" kind of generic menu items -- all menu items should have meaningful names appropriate to this site -- rename any generic ones accordingly.
  5. Secondly, we'll make some modifications to the existing tabbed panel. First, change the wording on the "What Our Clients Say" tab to read "Testimonials" instead. Then add an amusing testimonial (quotation) of your own at the top of the testimonials content area and add your own full name as the person being quoted. Your new testimonial should match in format the others already there.
  6. To finish off the tabbed panel, add a 4th tab labeled "President's Message". Create some appropriate content for what a president might want to say regarding welcoming customers to the company's products and service. Find an image for the company president (use Google images for example to find something appropriate in size of your choice) and add it to the page to personalize the message. Float the image left or right appropriately so that text wraps nicely around it. The president's name should appear at the bottom of the message as a signature in a cursive font. The president's message itself should be at least 2 paragraphs long and be at least as long as the image is high (some text should wrap below the floated image.) Spell-check your president's message text. Then save, preview, and edit your page as needed until perfect (as defined by your level of obsession or mine, whichever is higher.)
  7. Thirdly, we'll modify the Spry Accordion. Add a new section to the bottom of the existing accordion. This new section should be labeled "Outdoors" and within that outdoors section you should list these 2 items: "Camping Supplies" and "Sporting Goods" (to match the 2 outdoor menu entries). Then save, preview, and edit your page as needed.
  8. Lastly, we'll modify the events (Spry Data Set) area of the page. First, change all dates in the XML file so that they are scheduled to take place in the current year instead of 2008. Also make sure the spacing within all the dates include one space after the comma. On the "Pre-Memorial Day Sale" item, change the wording of the event "title" by replacing "Pre-Memorial Day" with your own first and last name. For example, if your name is "Joe Student" the title would end up being "Joe Student Sale". Save the XML file and then test the Web page (not the XML file) in the browser to be sure that the changes you made to the XML file are reflected in the events area of the page.
  9. Save and test your page to make sure that all the changes made to the 4 areas of the page (menu, tabbed panel, accordion, and XML data set) are displaying and functioning properly. If so, you are ready to turn in your work.
  10. Your work can be submitted in either one of these two ways. Whichever way you decide to use for this part you must also use this same approach for the next part of the assignment too.

    Choice one is to upload your work to the RCC server. If you choose this approach, before you upload your work you should use Dreamweaver's FTP capabilities to create an "a10" folder within your remote site. This "a10" folder, standing for "assignment 10", will hold all of the files needed to correctly display your Spry-based work and keep it separate from all the other files that may be within your RCC server space now or in the near future when you work on your final project. To create this folder, select the main root folder on the remote (left) side of the Dreamweaver display, and use the "File" -> "New folder" menu commands. (You do not need to create any new folders on the local (right) side, just on the server.)

    Once the new "a10" folder has been created, you can upload the completed page (index_work2.html) into this "a10" folder on your RCC server account by dragging it across and dropping it directly on this folder. You should also upload all dependent files, including images, style sheets, XML files, the Spry Assets folder and all Spry related files within it (any and all files that the page needs in order to look and function correctly online). Be sure to test your page in the browser using your own server account. When you do, your url must include the new folder and file such as the address shown below, where you replace "jstudent" with your own first initial and last name.

    http://209.129.8.3/~smcleod/dwjstudent/a10/index_work2.html

    See a previous assignment for all uploading and account information as needed.

    To let your instructor know that you work has been uploaded and is ready for grading you must send him an email message as follows:
    1. Check the course syllabus for the email address to send it to.
    2. Enter a subject line of "DWA10 Lastname Firstname" where you replace Last name First name with your own actual name (lastname goes before firstname.)
    3. In the email message main area, identify yourself again, say "hi", and then include a clickable link on a separate line to the spry page "index_work2.html" on the RCC server that you uploaded to complete this assignment. This link will be similar to the http link shown above except with your own name instead of "jstudent".

      Be sure to test your pages in the browser using the server account and then just copy and paste the URL from your browser's address area directly into the email rather than trying to typing it yourself -- sending me a link that doesn't work is like turning in a blank printout and will earn you points accordingly. So you might just send the email to yourself first to make sure the links work in your own email before forwarding it on to your instructor.
    4. When the email message is complete, send it. The time stamp on your email will mark the assignment's turn in time (unless you upload another version of your files afterward -- then the date/time stamp of the files themselves on the server will be used instead of the email -- but don't do that because I may grade it before you upload your new version. Send the email after you are done making changes.)
    5. Expect that your instructor will acknowledge receipt of your email (and that your link is working) within 24 hours and will send you your assignment score (out of 45 points) before the next class meeting. Remember that sending your instructor a link that does not work will cost you points because your follow-up email with the correct link(s) will be considered late based on when it was sent (not when the original was sent.)


    Choice two is to create the 2 paper-based printouts as described below:

    Printout #1: Display your page in a browser of your choice. Make sure that your name is displaying in the title bar of the browser. Activate the tabbed panel for the president's message. Activate the accordion section for the "Outdoors" products so that the "Camping Supplies" and "Sporting Goods" entries are displaying. At the bottom right-hand side of the page, expand the Newsletter (collapsible panel) form so that the little newsletter sign up form is displaying. Lastly, put your mouse over the menu items so that the Outdoor menu product categories ("Camping Supplies" and "Sporting Goods") are displaying. With all of this displaying, obtain a printscreen printout to capture this screen image of your page displaying in the browser. Make sure the menu items display properly.

    Printout #2: Open the XML file in Dreamweaver in code view. Use Dreamweaver's File menu to print the XML code for your data set. This should include your name on the title of one of the events, as described earlier. Circle your name on this printout and turn it in as printout #2 of the assignment.
  11. That concludes your work for this assignment.

What To Turn In (if you Are Turning In printouts)

If you are turning in your work electronically, then ignore this section. If you are turning in paper printouts, then modify your cover sheet document from assignment 8 or 9 (or create a new one) as follows. Use either Dreamweaver or a word processor to create a document that contains the following information: Your full name, the class "CIS/CAT 76B Dreamweaver", your instructor "Scott McLeod", and the assignment number "Assignment #10", each on its own line in a large font, centered across the page (make it look decent). Then turn in the following items, stapled together in this order:

  1. The cover sheet (as indicated above)
  2. Printout #1, a printscreen printout of your modified Spry-based page, index_work2.html, displaying within the browser with the title, menu, accordion, tabbed panel, collapsible panel, and XML data set all displaying properly as indicated in part 2 above.
  3. Printout #2, a code printout of your XML file showing all events with your name circled.

Back-Up Your Work

Don't forget that it is important to back-up all of your work from this assignment. Some of these files may end up being needed on a later assignment, so copy them all onto a second disk, just in case. The easiest thing to do is just copy the local root folders for the two sites you worked on in this assignment.