CIS 363a wk 6 ILAB do all the steps everything you see in description.

---

This lab supports the following TCOs:

TCO 6 - Given a project, develop an online form that uses client-side form validation.

TCO 7 - Given a non-interactive web page, incorporate a custom interactive element using JavaScript and a JavaScript library such as JQuery or Spry.

TCO 10 - Given a project, create a website that contains text, links, images, and any other content necessary to complete the website using HTML and external CSS.

You have been asked by a client to create a simple menu bar and provide an example of a collapsible and tabbed content with different content for each.

Deliverables and Grading Rubric

Part	Deliverable/Components	Points
Part A	Create a new HTML file named Spry	2
Part B	- Insert a Spry menu (6 points) - Modify menu (6 points)	12
Part C	- Insert a Spry collapsible panel (6 points) - Modify menu (6 points)	12
Part D	- Insert a Spry accordion (6 points) - Modify menu (7 points) - Submit the zipped folder (1 point)	14
Total		40

i L A B S T E P S

Lab Preparation

The HTML file and Spry effects will be created on a new sheet.

Part A: Create a New HTML Page

Establish your Site Manager. Use the best practices learned in Week 1. This will be important to see the Spry Javascript, CSS, and Image files.

Create a new HTML file named Spry.

Part B: Spry Menu

Step 1: Insert a Spry Menu.

At the top of the page, insert a Spry Menu Bar.

Select the Horizontal option.

Step 2: Modify Menu

Change the Menu name in the Properties Panel to Lab6_menu.

Change the Item 1 to Home with no submenus.

Modify Item 2 to Services to include at least three sub menu options. Review other sites to get an idea of Services to offer.

Modify Item 3 to About with no sub menus.

Modify Item 4 to Contact Us with no sub menus.

Part C: Spry Collapsible Panel

Step 1: Insert a Spry Collapsible Panel.

Insert a Spry Collapsible Panel under the Spry Menu bar.

Note: you will have to save the Spry.html file so the Spry JavaScript and CSS can be applied. You will see the link the to the JS and CSS file in the head of the code.

Step 2: Modify Menu

Change the Collapsible Panel name in the Properties panel to Lab6_cp.

Set the Default State to Closed.

Update the div.CollapsiblePanelTab to Company Info.

Include some information about the company in this Content area of the Collapsible Panel.

Click on Live View to test the Spry Effect.

Part D: Spry Accordion

Step 1: Insert a Spry Accordion.

Insert a Spry Accordion under the Spry Collapsible Panel.

Step 2: Modify Menu

Change the Accordion Panel name in the Properties panel to Lab6_acc.

Update the div.AccordionPanelTab to Services.

Include some information about the company s services in the Content area.

Step 3: Update Label 2

Update Label 2 with the content of your choice. This could be information about the company's locations, updates, etc. Make sure you click on the second option in the Properties Panel.

Step 4: Lab Submission

Your Spry.html page should have the Menu, Collapsible Panel, and Accordion. You will also have the Spry JavaScript files and CSS with images in the Spry Assets folder.

• Create a folder called CIS363A_YourLastName_W6_Lab.
• Put copies of each required deliverable into the new folder.

• Right-click on the folder and select Send To -> Compressed (zipped) Folder. You can also use other tools to compress the files into a single zip folder (e.g., 7-zip).

Upload the zip file to the Week 6 iLab Dropbox located on the silver tab at the top of this page. For instructions on how to use theDropbox, read these Step-by-Step Instructions or watch this Dropbox Tutorial.

See Syllabus/"Due Dates for Assignments & Exams" for due date information.

Do you want a similar Paper? Click Here To Get It From Our Writing Experts At A Reasonable Price.