Needs Content

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; p 261–356
• 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

Cre­ate paper wire­frame dia­grams of each lay­out, using a sam­ple or grid tem­plate as a guide to label each sec­tion. Sev­eral base grids are avail­able for sketch­ing. Scan or Pho­to­graph these sketches for assessment.

Part Two

Down­load the assign­ment files from the course D2L site and the frame­work from its host. 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 your sketches to your 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 prob­lem. 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, struc­tures and sketch images to the appro­pri­ate D2L dropbox.

• The fol­low­ing rubric posted on D2L will deter­mine exer­cise score: Exer­cise Grading

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.