Des•301 Advanced Web Design

Exercise: Positioning

Ellie

Rachel

Julie

Read through and try the positioning tutorial found here. Now use CSS positioning to create a collage of images and text.

Find/select at least 6 different images. They could be photos or examples of artwork. The subject is up to you (note that it's best to use your own imagery whenever possible).
Do some quick sketches (pencil on paper) to determine possible layouts. The images should overlap somewhat. In addition, you will need to add captions over the tops of the images, so allow room for text.
Resize the images in Photoshop; use your sketches as a guide. I'd recommend you keep the image sizes down to less than 300px square. Note that the images can (and should) be different sizes for best results.
Create a new HTML document. Create a containing element (like a <div>) to hold the images and text. Create a style rule that positions the containing element relatively.
Place the images on to the page; give each image its own id.
Create a series of paragraphs(or heading) tags with the image titles or captions; make sure you place these within the containing element as well. Give the images their own id attributes.
Use CSS to position your images. They should overlap some.
Position your text elements so that they fall on top of the images they correspond to. Adjust the text color and size accordingly.
Link you home page to the collage page and upload everything to the server.