Exercise 6 Instructions by BevHde9


									Download the corresponding illustrator file and recreate the layout using html and css. I
have provided a CSS file that contains a couple styles that help to align your page and
set the width. You must wrap your entire layout with a container div for these styles to
take effect. See the hints layer of your illustrator document.

Elements Used
Each colored section should be wrapped in a separate <div> tag.

All elements from your Web Terms sheet will be used except for blockquote, hr, br,
strong, and span. Not all levels of headings will be used, but you should use as many
are appropriate for the layout provided.

The image for the top box has been provided.

Source Material

You will be creating an html version of the layout that has been provided as an illustrator

There is a layer in your .ai file that gives a few hints as to the padding being used and a
wrapper div that needs to be added.


You are to match the illustrator layout with your html & css as closely as possible.
(Your lists and ordered lists will be given margins and padding by the browser. You
need not offset that or worry about it.)

You must use an external style sheet.

There are four spots on the layout which indicate they are links to another page. You
are to add these links to the corresponding text. ("More info about this class")

Your colors need to match the colors in the document. You cannot simply say "brown"
or "blue." You must get the hex value from the illustrator file.

Your image(s) must be placed in a separate folder and loaded into your html document
from that folder. (Don't forget your alt attribute)

Your document must validate, so you must add the appropriate doctype and html
opening tag.

To top