Layouts

Typesetting

In this in-class exercise, you will take a single image and some text, and develop 3 different layouts.

Pull the latest code into the webtype-demos repo via Github Desktop, and copy over the files from week2 folder into your own repository, in a folder called layout-exercise.

  • You may want to review some of this week’s suggested tutorials before diving in
  • See layouts for technical notes

1. Optimize your assets for web

  • Optimize the image circle-of-fifths-scale.jpg for web use, at a maximum of 500px wide
  • Consider the appropriate file format to save it

2. Markup the text with semantic HTML

  • Use the text in seven-principles.txt to markup in HTML

3. Organize your elements to recreate the following layouts

  • Add CSS styling to create 2 different versions
  • Choose two from the below three layout options
  • It may benefit you to reuse (at least some) of the html from other layouts
  • Keep your layouts in their own respective folders for easier management
Layout 1
image
text
.
.
.
.
.
.
.
.
.
.
.
Layout 2
left text
.
.
.
.
.
.
.
.
.
.
.
right image
Layout 3
fixed image
scroll text
.
.
.
.
.
.
.
.
.
.
.