teaching machines

CS 318: Lab 12 – Two-column Layouts

March 12, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Today we visit the canonical two-column layout. We’ll use the float property to allow other content to flow around it. We’ll do a quick example together of adding illuminated letters to a page.

Suppose we have this paragraph:

<p>A writer&mdash;and, I believe, generally all persons&mdash;must think that whatever happens to him or her is a resource. All things have been given to us for a purpose, and an artist must feel this more intensely. All that happens to us, including our humiliations, our misfortunes, our embarrassments, all is given to us as raw material, as clay, so that we may shape our art.</p>

First, let’s bump up the font size and impose some wrapping:

body {
  width: 400px;
  font-size: 18pt;
}

Second, let’s set apart the initial letter A by putting it an illuminated letter in its place:

<p><img src="https://path/to/some/a.png" class="illuminated" alt="A">writer&mdash;and, I believe, generally all persons&mdash;must think that whatever happens to him or her is a resource. All things have been given to us for a purpose, and an artist must feel this more intensely. All that happens to us, including our humiliations, our misfortunes, our embarrassments, all is given to us as raw material, as clay, so that we may shape our art.</p>

But there’s no flowing of content around our really big letter. Let’s add some floating and tweak the padding to make it look aesthetically balanced:

img.illuminated {
  float: left;
  padding-right: 5px;
}

That’s what floats do for us! However, we don’t always want content to flow. Suppose we have a few more paragraphs of text:

<p><img src="https://path/to/some/a.png">rt is a lie that makes us realize truth.</p>
<p><img src="https://path/to/some/a.png">ll our discontents about what we want appeared to me to spring from the want of thankfulness for what we have.</p>

These quotations bleed into each other, which isn’t appropriate. What can we do? We clear any previous floats:

p {
  clear: both;
}

And there we have it. Here’s your TODO list for next time:

See you then!

Sincerely,

Lab

Your task in this lab is to make a website for a pizza place. It consists of three pages: a home page, a menu, and an embedded map. All will share the same general layout, with only the content in the main element changing.

First create a lab12 directory. Add a partners.html and include your first names and last initials.

Home

In home.html and pizza.css, create a page that looks like this:

Complete this checklist:

Menu

Switch partners.

In menu.html, add a menu whose text flows around images of the various pizzas that can be ordered at your restaurant. Continue to put CSS in pizza.css. (Sharing styles between pages is one of the advantages of external stylesheets.) Match this general layout:

Complete this checklist:

Directions

In directions.html, add a map that your viewers can use to locate your business. Match this general layout:

Complete this checklist:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab12 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.