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/

Exercise

Cre­at­ing an HTML page requires two sep­a­rate, yet con­nected sys­tems: HTML and CSS. With­out appro­pri­ate HTML struc­tural markup, the CSS ref­er­ences will not con­trol the posi­tion­ing. Only when the cor­rect code markup and lay­out posi­tion is achieved can appro­pri­ate cos­metic deci­sions begin.

Using the Boot­strap Frame­work, recre­ate in wire­frame form the sam­ple lay­out 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 and sta­tic wire­frame dia­gram of the lay­out below. Label as needed.

Part Two

Down­load the frame­work from its host. Cor­rectly orga­nize, markup and style the doc­u­ment using of the image 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 problem.

Archive and upload the result­ing files, struc­tures and sketch images to the appro­pri­ate D2L dropbox.

Assessment

• The fol­low­ing rubric posted on D2L will deter­mine assign­ment 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.