Help only from tutors with web design experience
Scenario
Upon completion of this step, upload your site to the web server and attach a copy of the zipped folder to the Dropbox.
Submit your lab to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions or watch this Tutorial Dropbox Tutorial.
This lab supports the following TCOs.
TCO 5—Given a Web page that requires images and advanced styles, create and edit graphics and incorporate them into the page.
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.
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 that you find.
Create a Word document showing the source for your slideshow code. Be sure to document your HTML code as well.
Rubric
Deliverable
Points
Website – Includes slideshow code
10
Website – Text formatted using at least three different tags
6
Website – At least 10 images included and displaying correctly
10
Website – Document sources
8
Lab Report – All sections complete
6
Total
40
Lab Steps
Part A: Get Photos
The photos can be obtained through http://quest.eb.com.proxy.devry.edu/ or from http://commons.wikimedia.org.
If you have personal images that you wish to use for the assignment, be sure that you cite them correctly according to APA guidelines.
All of the images that you use should be cited in the Sources document that accompanies this assignment.
IMPORTANT! Make sure that the version of each image that you use for the slideshow is less than 500K. Ten images at 500K is 5 MB, and adding the document should total no more than 7 MB.
Part B: Research Slideshow Code
Do some research on the Web to find code that will let you take your photos and build a slideshow on a page. Try to find code that is CSS based and doesn’t require a lot of JavaScript.
One example is http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/
Part C: Build Page and Document Sources
Create the slideshow according to your selected research, using the images that you located in step 1.
The slideshow should run automatically and should contain a text-based title for each slide.
Write a description of the process that the slideshow uses to cycle through the slides and cite the source of your code.
Part D: Complete the Lab Report
Download the CIS363 Lab Report document from Doc Sharing.
The lab report must be completed for all labs. The key parts of the report include the following.
Objectives: A one-paragraph explanation of the purpose of the lab.
Results: Include a screenshot of the working website or page.
Conclusions: A one-paragraph explanation of what you learned while completing the lab, any challenges you had to work through, and how you can use what you learned going forward.
Submit Deliverables
Copy files from the Citrix server (if necessary).
Zip all of the files from Parts A, B, and C into a single zip file.
Submit your zip file to the Dropbox.
Based on the site, page layout, and navigation developed in prior steps, begin to add content to your site. Include appropriate typography, colors, and imagery as per the lecture and iLab assignments. Begin to implement the box model through the use of <div> tags and absolute positioning. Use inline and embedded where appropriate.
Upon completion of this step, zip up all of the files for the site into one single file and submit the file to the Dropbox.
Grading Rubric
Category
Points
%
Description
Content visible on two web pages
8
17
Content on pages is visible
Appropriate use of colors
7
16
Colors match theme of site
Appropriate typography (font, size, and color)
7
16
Typography is appropriate for site
Images visible with alt tags
7
16
Images render and are appropriate
Box model using <div> tags and positioning
8
17
Payout layout is implemented per site spec
CSS used for layout and formatting
8
17
Multiple CSS style rules are implemented
Total
45
100
A quality project will meet or exceed all of the above requirements
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.
See the Syllabus section “Due Dates for Assignments & Exams” for due date information.
