CIS363A Week 1 iLab 1Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7834/cis363a-w...
For this lab, you will need to use Visio to create your site map. If you do not have Visioinstalled, be sure to try Visio ...
•   Hints: If using Dreamweaver, start by creating a Site first, then add pages to the site       (instead of starting by ...
•   Zip all of the files from Part A and Part B into a single zip file.   •   Make sure the .zip file has your name, class...
•   Create a page layout for your site, which will include notes for FONT, COLOR, and       TEXT SIZE.Step 2: Website Buil...
Scenario:Create an index.html file and create an External CSS file based on the specifications given in theassignment.    ...
Note: If your styles.css file does not show when needed in the remaining steps, then Click on theAttach Stylesheet icon, S...
•   Style -- solid        •   Color -- #003   Center the text   Margin on all sides 35 pixels   Font Georgiap Text color -...
Font-family Arial                                                              Background-color #6ffheader - this class wi...
Any other files necessary for the slideshow to work 5Total                                               30         iLAB S...
Step Deliverable/Components                                                                  Points       - Include all of...
o   credit card number.           •   There must also be a button to complete the order.You should choose the appropriate ...
TCO 6 - Given a project, develop an online form that uses client-side form validation.TCO 7 - Given a non-interactive web ...
Select the Horizontal option.Step 2: Modify MenuChange the Menu name in the Properties Panel to Lab6_menu.Change the Item ...
Insert a Spry Accordion under the Spry Collapsible Panel.Step 2: Modify MenuChange the Accordion Panel name in the Propert...
Upcoming SlideShare
Loading in …5
×

Cis363 a all ilabs devry university

2,299 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,299
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cis363 a all ilabs devry university

  1. 1. CIS363A Week 1 iLab 1Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7834/cis363a-week-1-ilab-1/This lab supports the following TCOs:TCO 1 - Given several websites, evaluate them for fundamental site and page design errors andidentify a goal-directed design approach for each.TCO 2 - Given a project idea, select an appropriate website structure and design a web pagelayout and a wire frame diagram illustrating the links that will enable the user to navigateintuitively and efficiently through the site.TCO 10 - Given a project, create a website that contains text, links, images, and any othercontent necessary to complete the website using HTML and external CSS.Scenario:You want to create an online resume where you can show off your skills to potential employers.Start by creating a simple 4-page website. You can keep adding to this site as you progressthrough your program, updating it with your knowledge, skills, and examples of projects youhave done.Create a home page with some information about yourself. Create a page for your educationalbackground, a page for your work experience, and a portfolio page with a list of projects youhave created. Link them all together and add appropriate graphics.Deliverables and Grading RubricPart Deliverable Points Site MapA - Appropriate icons used for site components (5 Points) 15 - Dynamic connectors used (5 Points) Web Pages - All pages included (5 Points)B - Links working (5 Points) 15 - Appropriate graphics used (5 Points) - Well-formed HTML code (5 Points)Total 30 iLAB STEPSLab Preparation
  2. 2. For this lab, you will need to use Visio to create your site map. If you do not have Visioinstalled, be sure to try Visio in the iLab early in the week in case you experience any issues. Tocreate the .html files, you can use Notepad or Dreamweaver (available in the iLab). You will alsoneed to know how to copy and/or save files from the iLab server to your computer as well ashow to zip files. Be sure to view the tutorials in the Student Resources area in Course Home ifyou are not sure how to do this.Part A: Site MapStep 1: Create Site Map using MS Visio • Log onto the iLab server and start MS Visio. • Create a New File. Select Software and Database for the Template Category. Select Web Site Map for the Template.Step 2: Add Pages to Site Map • Add the home page object, and 3 HTML objects. • Label the objects appropriately for your index page, education page, work experience page, and portfolio page. • Use the Dynamic Connector to add appropriate links between the pages.Step 3: Save File • Save the file to your local computer (NOTE: your local drive is mapped as the V: drive in the iLab). Put in an appropriate folder on your computer where you can easily find it.Be sure you remember where you save the file!Part B: Web PagesStep 1: Create Home Page • Create an index.html page. • Add some general information about yourself. • Add a picture. It could be a picture of you, or something you find interesting or related to your field of study. Be sure you have permission to use the picture. • Include at least 3 text formatting tags, such as heading level, bold/strong, italics/emphasis, etc.
  3. 3. • Hints: If using Dreamweaver, start by creating a Site first, then add pages to the site (instead of starting by creating individual .html pages outside of any site). • See textbooks and tv.adobe.com for information on HTML and working with Dreamweaver.Step 2: Create Education Page • Create an education.html page. • Add information about the schools you have attended, major, classes taken, expected graduation, etc. • Consider adding pictures of your campus or school.Step 3: Create Knowledge/Skills Page • Create a skills.html page. • Add information about the knowledge or skills you have. Add areas of interest that you would like to pursue (such as mobile development, cloud computing, etc.).Step 4: Create Portfolio Page • Create a portfolio.html page. • Add a list of projects you have done in your classes. If you do not have any projects yet, add some projects you would like to work on. Later, you can create links to .zip files with your projects but this is not necessary at this time.Step 5: Create Links • Using your site map for reference, create appropriate links from your home page to the other pages. • You may also want to create links directly from one page to the next (e.g., from the education page to the skills page, etc.).Part C: Submit DeliverablesStep 1: Copy Files from iLab Server (if necessary) • If you saved your files on the iLab server, use Windows Explorer in the iLab to copy them to your local computer (do NOT use your local copy of Windows Explorer). • Be sure to remember where you saved your files. Be sure to copy your site map and all files used in your website, including graphics.Step 2: Zip Files
  4. 4. • Zip all of the files from Part A and Part B into a single zip file. • Make sure the .zip file has your name, class, and assignment number on it (e.g., CIS363A_John_Doe_Lab_1.zip).Step 3: Submit FilesCIS363A Week 2 iLab 2Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7835/cis363a-week-2-ilab-2/This lab supports the following TCOs:TCO 3 - Given an original source document, convert the document to a web page using HTMLand CSS.TCO 10 - Given a project, create a website that contains text, links, images, and any othercontent necessary to complete the website using HTML and external CSS.Using the provided Word document for the content of your website, do the following: • Create a storyboard that will show the flow of your website along with the number of pages that will be in your site. • Create a page layout for your site, which will include notes for FONT, COLOR, and TEXT SIZE. 1. Using Dreamweaver, create a website using tables as the basic layout concept. NO DREAMWEAVER TEMPLATES ARE ALLOWED IN THIS LAB.Deliverables and Grading RubricDeliverable PointsWord or Visio document with web page design layout, including notes 5Completed website based on project specifications 25Correct external CSS file that attaches to each page 10Total 40 iLAB STEPSStep 1: Storyboard/Web Page Design • Create a storyboard that will show the flow of your website along with the number of pages that will be in your site.
  5. 5. • Create a page layout for your site, which will include notes for FONT, COLOR, and TEXT SIZE.Step 2: Website BuildingUse the following requirements for your website: • You must use thegraphicprovided as a link to the home page. • You must use the text provided for the website. • You must make sure that each link must has its own page. Links must be set up with no underlines and have a rollover color, and this must be done with CSS. • You must use tables to create a basic layout on all of your pages. • You must use a background color other than the default color. • You must use a text color that works with the background color you use. • You must ONLY use the graphics provided on the website. • You must use an external style sheet CSS in this project. All styles must be in the external style sheet.Step 3: iLab Submission • Create a folder called CIS363A_YourLastName_W2_LabA. • Put copies of each required deliverable into the new folder.CIS363A Week 3 iLab 3Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7836/cis363a-week-3-ilab-3/This lab supports the following TCOs:TCO 3 - Given an original source document, convert the document to a web page using HTMLand CSS.TCO 4 - Given an older website that requires updating, review the techniques used to create thecurrent site, develop a plan to revise the site using CSS layout techniques, client-side scripts, andother current website design techniques, and convert the web pages based on the plan.
  6. 6. Scenario:Create an index.html file and create an External CSS file based on the specifications given in theassignment. 1. You will need to create an inline and external CSS. 2. You will also need to attach an external CSS file to the original page.Deliverables and Grading Rubric 1. index.html with attached external CSS sheet 2. style.css filePart Deliverable PointsA Create HTML and CSS files (style.css) 3B Inline CSS 22C Tag CSS 22D Class CSS (index.html with attached external CSS sheet) 23Total 70 iLAB STEPSLab PreparationDownload the lab3Content.docx document found in Doc Sharing.Part A: Create HTML and CSS files (3 Points)Step 1: Create a new HTML file (1 Point) • Open Dreamweaver and create a new HTML page. • Enter index.html as the web page name.Step 2: Copy content from Word document (1 Point) • Open the lab3Content document found in Doc Sharing. • Paste the content into the index.html page.Step 3: Create CSS file (1 Point) • Create a new CSS page. • Save the file and name it styles.css.
  7. 7. Note: If your styles.css file does not show when needed in the remaining steps, then Click on theAttach Stylesheet icon, Select Browse, Locate the styles.css file, and then Click Ok. (Thestyles.css will automatically be links to the index.html file in the head section of the code.)Part B: Inline CSS (22 Points)Step 1: Create an Inline CSS (10 Points) • Go to the index.html file and create an Inline CSS for the following properties. Use the Page Properties option in the Properties Panel.Background color for the body A light tan -- #FC6Font color for all text in the body A dark blue -- #039Font for all text in the body Comic sans MSFont size for all the text in the body Body 14 pointsLink color for all links Dark red -- #CC0000Visited link color for all links Dark red -- #CC0000Rollover link color for all links Dark green -- #060Active link color for all links Dark red -- #CC0000No link should be underlined for all links Never underlineStep 2: Apply Inline CSS (12 Points) • Your index.html page should reflect the styles from above. • Go back to Page Properties if the page did not update with your Inline CSS.Part C: Tag CSS (22 Points)Step 1: Create Tag CSS (10 Points) • For all of the following Tags, create the CSS rule from the descriptions below. • Hint: To create a CSS, you need to click on the New CSS Rule in the CSS panel on the right hand side. Watch Adobe TV on best practices for creating a style sheet. You will need to enter Style Sheets or CSS in the Adobe TV searchbox. http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae 8d65-7e32a.htmlH2 Text color -- #333, boldH3 Background color -- #39f Border on the bottom with the following rules • Width--thin
  8. 8. • Style -- solid • Color -- #003 Center the text Margin on all sides 35 pixels Font Georgiap Text color -- #030 padding of 15 pixel on all sides Font-family Arial Background-color grayli Text color black, bold Text size 18 pointsStep 2: Apply Tag CSS (12 Points) • Apply the new Tag CSS to the content on the page.Part D: Class CSS (23 Points)Step 1: Create a Class CSS (10 Points) • Create a New CSS Rule using a Class CSS. You will need to select the option to include the Class CSS to the styles.css file. Font-family Times Romannavtable -- this class will be applied to navigation table Background-color #0ff Text color- bold, center Font-family Tahoma Background-color #699 Text color- #033, boldexample1 -- this class will be applied to example 1 Text size- 10 points Margin on all sides 25 pixels Padding on all sides 25 pixels Background color -- #66c Border on all sides with the following rules • Width--10pxexample2 -- this class will be applied to example 2 • Style -- solid • Color -- #06c Text size of 10 pixels Text color -- #ccc
  9. 9. Font-family Arial Background-color #6ffheader - this class will be applied to the heading Text color- 030"IEBGENER STUDY GUIDE" Text size -- 36 points Margin on all sides 50 pixels Padding on all sides 50 pixelsStep 2: Apply the Class CSS (12 Points) • Apply Class CSS as done in the Class CSS steps above.Step 3: Upload Zipped File (1 Point)Your index.html page should have all Inline, Tags, and Class CSS applied. • Create a folder called CIS363A_YourLastName_Lab3.CIS363A Week 4 iLab 4Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7837/cis363a-week-4-ilab-4/This lab supports the following TCOs:TCO 5 - Given a web page that requires images and advanced styles, create and edit graphics andincorporate them into the page.TCO 10 - Given a project, create a website that contains text, links, images, and any othercontent necessary to complete the website using HTML and external CSS. • Obtain 10 original photos. • Research on the Internet and find some code that will allow you to create a slideshow. • Create a page with your photos and the code you find. 1. Create a Word document, showing the source for your slideshow code. Make sure to document your HTML code also.Deliverables and Grading RubricDeliverable PointsWord document with sources 10Completed web page with slideshow 15
  10. 10. Any other files necessary for the slideshow to work 5Total 30 iLAB STEPSStep 1: Get PhotosFind 10 original photos.Step 2: Research Slideshow CodeResearch on the Web to find code that will let you take your photos and build a slideshow on apage. Try to find code that is CSS based and doesn’t require a lot of JavaScript.Step 3: iLab Submission • Create a folder called CIS363A_YourLastName_W4_Lab. • Put copies of each required deliverable into the new folder.CIS363A Week 5 iLab 5Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7838/cis363a-week-5-ilab-5/iLAB OVERVIEWScenario and SummaryThis lab supports TCO 6: Given a project, develop an online form that uses client-side formvalidation.You have been asked to design and implement a checkout form. Imagine that a user has beennavigating an online store that sells a variety of sport equipment. The user has added a number ofitems to his or her shopping cart and is going through the checkout process to order the itemsonline. The checkout page shows what the user bought and allows him or her to enter his orher information (name, address, credit card number, etc.) to complete the order. You are going todesign this checkout form.Deliverables and Grading Rubric
  11. 11. Step Deliverable/Components Points - Include all of the required elements: title, subtitle, table of items (5 points)Step 1 10 - Design, layout, CSS (5 points) - Include all of the required form elements: name, address, email address, ship/pick-up, credit card type/number (10 points)Step 2 20 - Choose appropriate controls for the input (5 points) - Set form tag correctly (5 points) - Validation of the required elements (5 points)Step 3 - Non-intrusive validation used (3 points) 10 - Prevent from submission on invalid data (2 points)Total 40 iLAB S TEPSStep 1: Create Web Page in DreamweaverUsing what you learned in Weeks 1 to 4, create a web page that includes: • A title for the online store. You make one up! • A subtitle that says “Complete Your Order” • The items that the user ordered: o 1 Kayak with rudder for $775.00 o 1 10L dry bag for $15.00 o 2 helmets for $50.00 each • The total cost for the orderFeel free to add a layout, style, color, and graphics to the page as you see fit.Step 2: Add an HTML Form to the Page • The page must include a way for the user to enter their o name; o address (street, city, state/province, country); o phone number; o e-mail address; o whether they want to ship or pick-up the order; o credit card type (one of: Visa, Mastercard, American Express); and
  12. 12. o credit card number. • There must also be a button to complete the order.You should choose the appropriate form element for each input. For example, a textbox shouldbe used for "name."Note: If this page was part of a real store, we would set the form action to a server-script tohandle the order. However, for the purpose of this lab, please set the form action to #. The #symbol will cause the form submission to submit the form back to itself.Step 3: Add Non-Intrusive Validation to the HTML FormInclude non-intrusive validation to the form. You must ensure that: • name and address are not blank; • one of the ship/pick-up options is selected; • a credit card type is selected; and • a credit card number is not blank.If the form does not validate, notify the user and do not allow the form to submit.Step 4: iLab Submission • Create a folder called CIS363A_YourLastName_W5_Lab. • Put copies of each required deliverable into the new folder.CIS363A Week 6 iLab 6Click this link to get the tutorial:http://homeworkfox.com/tutorials/general-questions/7839/cis363a-week-6-ilab-6/iLAB OVERVIEWScenario and SummaryThis lab supports the following TCOs:
  13. 13. 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 usingJavaScript and a JavaScript library such as JQuery or Spry.TCO 10 - Given a project, create a website that contains text, links, images, and any othercontent 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 acollapsible and tabbed content with different content for each.Deliverables and Grading RubricPart Deliverable/Components PointsPart A Create a new HTML file named Spry 2 - Insert a Spry menu (6 points)Part B 12 - Modify menu (6 points) - Insert a Spry collapsible panel (6 points)Part C 12 - Modify menu (6 points) - Insert a Spry accordion (6 points)Part D - Modify menu (7 points) 14 - Submit the zipped folder (1 point)Total 40 iLAB STEPSLab PreparationThe HTML file and Spry effects will be created on a new sheet.Part A: Create a New HTML PageEstablish your Site Manager. Use the best practices learned in Week 1. This will be important tosee the Spry Javascript, CSS, and Image files.Create a new HTML file named Spry.Part B: Spry MenuStep 1: Insert a Spry Menu.At the top of the page, insert a Spry Menu Bar.
  14. 14. Select the Horizontal option.Step 2: Modify MenuChange 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 anidea 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 PanelStep 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.<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />Step 2: Modify MenuChange 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 AccordionStep 1: Insert a Spry Accordion.
  15. 15. Insert a Spry Accordion under the Spry Collapsible Panel.Step 2: Modify MenuChange 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 2Update Label 2 with the content of your choice. This could be information about the companyslocations, updates, etc. Make sure you click on the second option in the Properties Panel.Step 4: Lab SubmissionYour Spry.html page should have the Menu, Collapsible Panel, and Accordion. You will alsohave 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.

×