M6 SVGs and Background ImagesStudent Outcomes:
|
Recap:
In this module, we learned the difference between bitmap images and vector graphics and learn to embed vector (SVG) graphics in your files. We will also learn different ways to add images to the background (large bg image vs. tiled image).
In this module, we learned the difference between bitmap images and vector graphics and learn to embed vector (SVG) graphics in your files. We will also learn different ways to add images to the background (large bg image vs. tiled image).
Image format for the web: jpg, gif, png, SVG
- Photograph (a bitmap image) consists of a collection of dots of color. The higher the resolution of the image, the more dots of color the file contains. The file sizes for photographs are so large because photographs contain so many dots.
- Vector graphics, or line art, derive from mathematical equations that say, "Here's one point in space. Now draw a line from that point to another point along this mathematical equation. Then come back in a straight line and fill the space with this color." Because the data in vector graphics consist of simple equations, the file sizes are very small. You can zoom into a vector image at 10,000 percent, and the image will remain crisp and clear. (Question: when do we use vector graphics?)
Activities
- In this class, we will use the SVG I created as a place holder for your page. Embed this graphic on your personal page. If we have time, you will be creating your own SVG graphic. And add code to animate the color of the graphic. We will learn how to add background images to HTML document, and add at least one background image to one of the sections of your personal page.
- Working as a group, start your home page building with all the final images, videos and copy. Finish sub pages design layout.
Assignments:
- Assignment 6.1: Gather approximately 12 photographs to use for your site gallery page. These can be photographs you have taken of friends, family, things you like, or art works you have created, and any other subject of your choice. The purpose of this assignment is to gather photographs for the next module.
- Assignment 6.2 (optional): Work on your own SVG image, and replace the one on your personal site.