week6 Ilab CIS 363A

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 collapsible and tabbed content with different content
for each.

Deliverables

Part

Deliverable/Components

Points

Part A

Create a new HTML file named Spry.

2

Part B

– Insert a Spry menu. (6 points)
– Modify the menu. (6 points)

12

Part C

– Insert a Spry collapsible panel. (6 points)
– Modify the menu. (6 points)

12

Part D

– Insert a Spry accordion. (6 points)
– Modify the menu. (7 points)
– Submit the zipped folder. (1 point)

14

Total

40

Required Software

Dreamweaver

Access the software at .rkon.com”>https://devrydesktop.rkon.com.
Steps: All

iLAB STEPS

Lab Preparation

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

Part A: Create a New HTML Page

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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

Select the Horizontal option.

Step 2: Modify Menu

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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 submenu options. Review other sites to get an idea of services to offer.

Modify Item 3 to About with no submenus.

Modify Item 4 to Contact Us with no submenus.

Part C: Spry Collapsible Panel

Step 1: Insert a Spry Collapsible Panel

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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 to the JS and CSS file in
the head of the code.

Step 2: Modify Menu

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

Insert a Spry Accordion under the Spry Collapsible panel.

Step 2: Modify Menu

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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

Step 4: Lab Submission

.equella.ecollege.com/file/1d24bbb5-e38b-49fb-8ed7-1e7f683f632c/1/CIS363A_W6_iLab.html#top”>
Back to Top

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).