Goal

The goal of this assign­ment is to plan, develop and present a series of HTML and CSS layouts.

Objective

The objec­tive of this assign­ment is to use an estab­lished frame­work to recre­ate a series of com­mon web page lay­outs from sam­ple images.

Background

• Rob­bins, Chap­ters 14, 15, 16, 17
• http://​get​boot​strap​.com
• http://​design​shack​.net/​a​r​t​i​c​l​e​s​/​l​a​y​o​u​t​s​/​1​0​-​r​o​c​k​-​s​o​l​i​d​-​w​e​b​s​i​t​e​-​l​a​y​o​u​t​-​e​x​a​m​p​l​es/
• http://​www​.lip​sum​.com/

Assignment

Using the Boot­strap frame­work, recre­ate in wire­frame form the sam­ple lay­outs below. Wire­frames pro­vide a usable sim­u­la­tion to check basic doc­u­ment seman­tics, markup and styled lay­out. Wire­frames serve as a more media appro­pri­ate, work­ing sketch, which can be used to check browser com­pat­i­bil­ity among other things.

Part One

Using the frame­work from its host, begin to cre­ate the lay­outs below. Cor­rectly orga­nize, markup and style the doc­u­ment using each of the images pro­vided below as a guide. Trans­fer the nota­tions from the sketches to the HTML files, adding addi­tional markup and dummy con­tent as needed, includ­ing the pro­vided place­holder images. The final solu­tion for each sam­ple should closely approx­i­mate the images below, but may not appear exactly the same. There are mul­ti­ple pos­si­ble solu­tions to the problem.

Ulti­mately, you will need to repeat the process, cre­ate indi­vid­ual css files for each solu­tion, and, if needed, dupli­cate the Boot­strap folder up to five times. Archive and upload the result­ing files and file struc­tures to the appro­pri­ate D2L dropbox.

Assessment

• The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 03.04: Frame­works and Layout

Techniques

wire­fram­ing, mark up, tags, CSS, file organization,

Supplies

Dreamweaver, source files, Boot­strap, sam­ple images via Joshua John­son, Design Shack, Pub­lished on Feb­ru­ary 16, 2011.