Select Page
Digital Imaging IV
Class 06: Bootstrap


    • Wireframe
    • Boostrap
    • Wireframe Lab

Cursed class



The wireframe is the sketch, hand-drawn or digital, that is used to layout the basics of a web design. These are typically pretty rough and don’t contain any content specific items just labelled rectangles.


contact us
about us

final site

Cone Productions

providing animation and interactive services





about us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique libero quam, rutrum vehicula ligula aliquet vitae. Etiam hendrerit et massa vitae mattis. In ut ex quam. Nam massa sapien, molestie volutpat ex et, sollicitudin tempor orci. Aliquam volutpat nulla eu sagittis volutpat. Praesent non est tortor.


Phasellus condimentum posuere pretium. Morbi et turpis bibendum, bibendum nunc feugiat, tincidunt libero. Curabitur in congue neque. Aliquam at tincidunt mi.

© copyright jonathan cone

The Grid:

When making page layouts graphic designers often employ a grid. The idea is that you produce an underlying grid of boxes to place the content of your page into. The setup of the grid determines how well your page works composition-ally.

Grid Benefits:
  • Content is generally rectilinear (text blocks, images, media, etc.) so it fits well into a grid.
  • Forces alignment which results in a more cohesive design.
  • You can group elements that go together into nice blocks.
  • The blocks of the grid can be expanded, shifted, and easily adjusted based on the size of the window.



Bootstrap is the most popular solution for developing responsive, mobile-first web sites.

  • Responsive Web Design is aimed at producing a grid based layout that adapts to the proportions of the user’s screen.
  • Elements:
    • Fluid Grid (column/rows with percentages)
    • Flexible Images (%)
    • Adjustable Text (em)
    • Media Queries (detect device)
  • Mobile First is the idea of developing a website with consideration towards mobile devices first.

The official website may be found here.

Wireframe Lab

Wireframe Lab:

Using Adobe Dreamweaver you will produce the basic layout of a website. By using the WYSIWYG editor and other tools in Dreamweaver you design a bootstrap based responisve site with placeholder text and images.

You will be graded on the following:
  • Basic Document & File Structure:
    • Master folder created with correct sub folders.
    • All files named and placed correctly.
    • Basic HTML and CSS structure produced.
  • Bootstrap Layout:
    • Bootstrap files placed correctly in the folder structure.
    • Bootstrap linked correctly to the HTML document.
    • The grid is produced similar to the mockup wireframe.
  • Bootstrap Components:
    • Navbar, Slider, Jumbotron, etc. implemented successfully.
  • Content:
    • Placeholder text is applied.
    • Placeholder images are implemented.
Assignment Video Tutorials
You may watch these tutorial videos below to help you complete your assignment.
Assignment Lab Materials
You may download the lab materials here: N/A

Assignment Video Tutorials

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Web Homepage Lab on Blackboard