Description of this paper

week6 Ilab CIS 363A




Question;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;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 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;Back to Top;At the top of the page, insert a Spry Menu Bar.;Select the Horizontal option.;Step 2: Modify Menu;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;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;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;Back to Top;Insert a Spry Accordion under the Spry Collapsible panel.;Step 2: Modify Menu;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;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;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).


Paper#36460 | Written in 18-Jul-2015

Price : $32