Exercise 3: Adding Images and Graphics
In this Exercise we will learn the basics of how to use images and graphics effectively in your web pages. Some basic information about image manipulation can be found on the Saving Images for Web page. I have also created a pdf file with step-by-step instructions on Resizing Images for Web Use. You are not required to know an imaging program such as Photoshop (very handy though). Free images, available on the web, are perfectly acceptable. There are also some free images on the MAT Server in our Class Folder.
Example of a High Res and Low Res file -- same image - different loading times
Exercise Requirements
Watch: the step by step Videos Lectures for Exercise 3.
Read: Chapter 7 Adding Images in Learning Web Design. You do not have to test yourself.
Folder Name: Ex3
Number of Pages/Documents Required for Exercise: 8
Minimal text content on most pages. Mostly you will be working with how to add images to your pages in several different ways.
Text Content: Write about the images you are using.
- Index.html Add small images into text.
- Page2.html Use HTML coding to add the align left or right attribute and values to the img tag
- Page3.html Use CSS to align with float left or right. Use margin to add space between your images and your text.
- Page4.html, Page5.html, Page6.html Use all the variables in background images with tiling - one page for each (overall tiling, vertical tiling, horizontal tiling). Add text to page and work with CSS color styles, margin and alignment to make the text stand out.
- Page7.html Position a single image in the background using CSS. Add text to page.
- Page8.html Add an image in the background with CSS. Add a wide image into the body content area. Use CSS in the Document styles to make the images responsive to browser window sizes. Test to see if it works by changing your browser window size.
Review the Exercise 3 demo pages and video pages for more information.
Points: 30