Details of this Paper

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 the Dropbox, read these Step-by-Step Instructions or watch this Dropbox Tutorial.;See Syllabus/"Due Dates for Assignments & Exams" for due date information.


Paper#72825 | Written in 18-Jul-2015

Price : $22