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

Required Software

Dreamweaver

Access the software at 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

Back to TopEstablish 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

Back to TopAt the top of the page, insert a Spry Menu Bar.

Select the Horizontal option.

Step 2: Modify Menu

Back to TopChange 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

Back to TopInsert 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.

<script src=”SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />

Step 2: Modify Menu

Back to TopChange 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

Back to TopInsert a Spry Accordion under the Spry Collapsible panel.

Step 2: Modify Menu

Back to TopChange 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

Back to TopUpdate 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

Back to TopYour 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)

Our website has a team of professional writers who can help you write any of your homework. They will write your papers from scratch. We also have a team of editors just to make sure all papers are of HIGH QUALITY & PLAGIARISM FREE. To make an Order you only need to click Ask A Question and we will direct you to our Order Page at WriteDemy. Then fill Our Order Form with all your assignment instructions. Select your deadline and pay for your paper. You will get it few hours before your set deadline.