Exercise 11.04: Framework Page Layout


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


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.



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.

sample webpage layout Three Boxes
Fig­ure 1: Three Boxes

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 assign­ment score: Exer­cise Grading


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


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


As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.