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 file. 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. Requirements 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.
Pages to are hidden for
"Exercise 6 Instructions"Please download to view full document