Website design -- HTML 5 CSS Background and Images

General Technology Description/Standards

  • 1. Demonstrate knowledge of Printing and Print processes.
  • 1a. Understand how to make a rubber or foam stamp and print multiple copies.
  • 1a. Understand how to make a woodcut and print multiple copies.
  • 1b. Understand and make a two colored woodcut or Linoleum print.
  • 1c. Understand and make silk screen prints.
  • 1d. Understand Offset printing.

  • 2. Demonstrate knowledge and skills in Electronic Publishing and Website design.
  • 2a. Understand and use HTML code to create a basic website.
  • 2b. Learn and use Adobe Illustrator to create and edit images for a website
  • 2c. Learn and use Adobe Photoshop to produce graphics for a website
  • 2d. Learn and use advanced Web coding techniques including CSS, PHP and Javascript
  • 2e. Upload and publish a website

  • 3. Demonstrate knowledge and skills in robotics programming.
  • 3a. Follow instructions to build multiple robots out of Lego.
  • 3b. Program robots to do specific tasks.
  • 3c. Design and create original robots and program them.

  • 4. Demonstrate knowledge and skills of injection molding.
  • 4a. Properly prepare molds and parts for injection molding.
  • 4b. Reproduce objects using an injection mold machine.
  • 4c. Create original molds for injection molded reproductions.

  • 4. Understand 3-D CAD and sculpting software
  • 4a. Understand the vocabulary of 3-D software and printing.
  • 4b. Understand and use CAD software to create virtual 3-D objects.
  • 4c. Understand and use sculpting software to create virtual 3-D sculptures.
  • 4d. Understand and use an SLA 3-D printer to make computer generated virtual objects real.

  • 5. Understand and use metal fabrication machines.
  • 5a. Understand software to create pieces for Plasma cutting..
  • 5b. Use PlasmaCam to cut parts to be welded into a 3-d object.
  • 5c. Use Metal Lathe to create prototype parts.
  • 5c. Use Arc, Wirefeed and Gas welders.

  • 6. Demonstrate knowledge and skills in wood working.
  • 6a. Understand safety precautions for wood tools and equipment.
  • 6b. Safely and Accurately make wood projects.

    • HTML 5 CSS Background and Images

    The teacher demonstrates how to make and reference an external style sheet for student websites.

    link href="kdschoc.css" rel="stylesheet" type="text/css"/
    The teacher demonstrates the CSS code for commenting out text in a style sheet:
    /*comment*/
    The teacher demonstrates the CSS code for background attributes such as:
  • background-color: green
  • background-image: url("img_tree.png")
  • background-repeat: no-repeat (OR : repeat-x; OR : repeat-y;)
  • background-position: right top;
    • Next the teacher demonstrates how to make one pixel gradients in photoshop to use as background images for webpages and how to use the Image size menu and crop tool to resize images.
    Image position within a block of text is illustrated next.
    img src="img_tree.png" align="left"
    Students are to make a webpage that references an external style sheet with a color background and repeated background image. The page should contain 4 images aligned nicely within 4 blocks of text.

    Evaluation:
    3 points -- External style sheet with correctly formatted CSS code with at least one comment
    2 points -- Repeatable background image placed appropriately
    3 points -- 4 images cropped and sized equally
    2 points -- Overall finished look and content of the page

    10 points total




    Back to top