ComputerScienceExpert

(11)

$18/per page/

About ComputerScienceExpert

Levels Tought:
Elementary,Middle School,High School,College,University,PHD

Expertise:
Applied Sciences,Calculus See all
Applied Sciences,Calculus,Chemistry,Computer Science,Environmental science,Information Systems,Science Hide all
Teaching Since: Apr 2017
Last Sign in: 5 Weeks Ago, 4 Days Ago
Questions Answered: 4870
Tutorials Posted: 4863

Education

  • MBA IT, Mater in Science and Technology
    Devry
    Jul-1996 - Jul-2000

Experience

  • Professor
    Devry University
    Mar-2010 - Oct-2016

Category > Programming Posted 26 Apr 2017 My Price 17.00

Part II: Cascading Style Sheets: CSS3Overview

Part II: Cascading Style Sheets: CSS3Overview

Remember, in order to meet the "creativity and problem-solving skills" objective, the student is required to produce programming project solutions from given problem descriptions. Note that this objective is not met if a student is able to produce solutions only by pasting together given code fragments. Although pasting code fragments together is sometimes appropriate, it does not enforce the development of creativity and problem-solving skills. Therefore, the homework directions and grading will be tightly aligned to these course learning outcomes.

  1. Demonstrate creativity and problem-solving skills.
  2. Analyze web programs in order to test, debug, and improve them. (Discussions)
  3. Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
  4. Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Please review the general directions from week 1. 

This week you will have a lighter week. You will be using what you learned with CSS and CSS3 to further enhance your web site and add content.

Remember your site this term is a ‘Rummage Sale” site. 

NOTE: Anytime you work with HTML, CSS and JavaScript, you have the potential of having differences across devices, platforms and browsers. Browser and security settings can also impact running code on the web pages. JavaScripts that run external scripts, create and read cookies, or pop-up windows may need to be configured to allow them in your browser settings. 

Problem 1

Your boss has asked you to create multiple pages of individual products.

Learning Outcomes

  • Demonstrate creativity and problem-solving skills.
  • Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.
  • Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall structure

  1. Create and save your Word document in the homework folder. Add this to your web site in the homework folder after you have completed both problems.
  2. Gather your data and create your basic page navigation structure.
  3. Edit the week4-1.htmlhome.html pages to have the same layout as in template.html and the link to the same style sheet: homework.css. Copy the code from template.html to these two pages.
  4. Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Don’t copy off of other web sites!
  5. Make sure there is some place on the home page that has links to all of the other pages. You can do this in the main menu if you chose the first page layout from week 2. If you chose the Jumbotron, just create a link to at least to the first page for each week.

Step 2. Create content and enhance the home page with CSS and CSS3 stylesCustomize your web page with CSS and CSS3

  1. Add a full page of content (text and images) to your home.html page if you don’t currently have content.
  2. Enhance your web page with CSS style sheets and CSS3 rules including shadows, transformations, animations, cursor, etc.

Step 3. Use JavaScript to modify the style rules dynamically

Change the values of the html elements using CSS3

Configure the program so that when the home.html page loads, the styles the page styles will change. Refer to the section on changing styles dynamically in the textbook and readings.

Problem 2:

Your boss has asked you to display one product on a web page. 

Learning Outcomes:

  • Analyze web programs in order to test, debug, and improve them. (Discussions)
  • Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
  • Demonstrate creativity and problem-solving skills.
  • Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Step 4. Create your web site formCreate the content and configure the HTML tags and attributes

  1. Modify the page week4-1.html to show one of the products.
  2. Add the content, including images and text.  
  3. Make sure to add details and pictures of the product. You want at least a full page of content and a variety of html tags to work with.

Step 5. Configure the style of the formStyle the form with CSS

Using CSS configure the page content and appearance.

Use CSS rules such as columns to create multiple columns of text.

Use multiple methods to modify the style rules such as pseudo-classes and pseudo-elements, attribute selectors, element selectors, universal selector, etc.

Use combinators to combine selectors. 

Above each combinator, insert a comment indicating what the combinatory does.

Step 6. Create a JavaScript program to modify the style rules dynamicallyChange the values of the html elements using CSS3

  1. Insert a button on the page.
  2. Create a JavaScript function that when the users click on the button, the styles In the page will change. Refer to the section on changing styles dynamically in the textbook and readings.

Submitting your Homework

  1. When you are finished, save the Word document. 
  2. You will lose points if you do not name the file correctly.
  3. For each screen shot, make sure the code is legible on a monitor (10 pts or higher).
  4. Compress your images
  5. Word allows you to compress the images so you don’t have a huge file. 
  6. When you are finished with the homework:Just click on the image in Word,
  7. Go to the Format Picture Click Compress.
  8. Choose Best for sending in email.
  9. Check: remove cropped picture regions.
  10. Choose: All pictures In this file.
  11. Save your document.
  12. Place this file inside the homework folder of your web project.
  13. Zip the CS321_LastName Make sure it’s named CS321_LastName.zip.
  14. Upload the file to the online classroom.
  15. Due to the length of the assignment, the instructor may take up to 6 days to provide you with feedback.

Answers

(11)
Status NEW Posted 26 Apr 2017 02:04 AM My Price 17.00

-----------

Attachments

1510426514-webproject.zip
(1)