<section>
<?= t_head("Arrange Your Page into Sections", "15–20") ?>
<p>First download the following HTML file. Open it in your text editor, and also open the HTML page on your hard drive in Firefox.</p>
<p class="resource"><a href="journal.html">journal.html</a></p>
<figure class="example">
<a href="output1.png">
<img src="output1.png" alt="Output after exercise 1" />
<figcaption>Your page should look like this when you are done.</figcaption>
</a>
</figure>
<p>Organize <samp>journal.html</samp> by adding <code>id</code>s, <code>class</code>es, <code>span</code>s and <code>div</code>s. Then, add borders around these sections by editing your <samp>layout.css</samp>.</p>
<ul>
<li>The <strong>borders</strong> are all <code>5px</code> thick and <code>solid</code>.</li>
<li>The <strong>colors</strong> are the intuitive HTML color names, e.g. the red border is the HTML color <code class="color">red</code>.</li>
<li><em>Hint:</em> To reduce the needed <code>id</code> and <code>class</code> attributes, consider using CSS <strong>context selectors</strong>.</li>
</ul>
<p>The only major changes to make to the HTML are adding <code>id</code>s, <code>class</code>es, <code>div</code>s, and <code>span</code>s.</p>
</section>
<section>
<?= t_head("Add Spacing with Box-Model Properties", "15") ?>
<figure class="example" style="margin-top: -4em;">
<a href="output2.png">
<img src="output2.png" alt="Output after exercise 2" />
<figcaption>Victoria’s page with margins, padding, and backgrounds.</figcaption>
</a>
</figure>
<p>Add padding, margins, and backgrounds to the page. Change only your <code>layout.css</code> file.</p>
<ul>
<li>The box with the <strong>green</strong> border should have a background color of <code class="color">white</code>.</li>
<li>The boxes with the <strong>blue</strong> borders should have a background color of <code class="color">#E8FBFB</code>.
<ul>
<li>It should have a padding of <code>5px</code> (on all sides) and margin of <code>10px</code> only on the <em>top</em> of the box.</li>
</ul>
</li>
<li>
<figure class="example">
<img src="background.gif" alt="Patterned background image" style="float: left;"/>
<figcaption style="margin-left: 5em;">Inspect this image in Firebug to find out its URL.</figcaption>
</figure>
The <strong>overall page content</strong> area should become centered on the page, should have left and right margins of <code>10%</code>, and the background image at right.
</li>
</ul>
</section>
<section>
<?= t_head("Float, Alignment, Clear, and Overflow", "15") ?>
<figure class="example">
<a href="output3.png">
<img src="output3.png" alt="Output after exercise 3" />
<figcaption>Victoria’s page with floating and alignment.</figcaption>
</a>
</figure>
<p>Now we’ll practice <code>float</code>, <code>clear</code>, and alignment. You may have to edit <samp>journal.html</samp> code as well as <samp>layout.css</samp>.</p>
<ul>
<li>The heading text in the <strong>red</strong> box should appear on the <strong>right</strong> side of that section of the page.</li>
<li>The text of each journal entry should be widened so that each line fills the entire width of the section (“fully justified”).</li>
<li>The journal entry images should hover on the <strong>right</strong> side next to the surrounding text.</li>
<li>Each image should stay <em>within the bounds of the blue box</em>; that is, it should not “overflow” into the other content below it.
<ul>
<li>(<em>Hint:</em> See <a href="../lectures/morphing-floating-elements/#slide20">this lecture slide</a> about containers being too short.)</li>
</ul>
</li>
</ul>
</section>
<section>
<?= t_head("Add Finishing Touches", "10", array('extra' => true)) ?>
<figure class="example">
<a href="output4.png">
<img src="output4.png" alt="Output after exercise 4" />
<figcaption>Victoria’s beautified page.</figcaption>
</a>
</figure>
<ul>
<li>Change the box with the <strong>green</strong> border to have a solid, <code class="color">white</code>, 10px-thick border.</li>
<li>Change the boxes with the <strong>blue</strong> border to have a solid, 4px-thick border, in color <code class="color">#C2E9E9</code>.</li>
<li>Change the box with the <strong>purple</strong> border to have <em>only</em> a bottom border that is dashed and 2px thick in color <code class="color">#009097</code>.</li>
<li>Change the box with the <strong>red</strong> border to have a background color of <code class="color">#A8F0F0</code>, and get rid of its border.</li>
<li>Change the font size of the “So fresh and so clean” area to 14pt, and get rid of its border.</li>
</ul>
</section>
<section>
<?= t_head("Add Second Column", "15") ?>
<figure class="example">
<a href="output5.png">
<img src="output5.png" alt="Output after exercise 5" />
<figcaption>Victoria’s page with the friends list.</figcaption>
</a>
</figure>
<p>Add a second column to the layout. Copy and paste the following code into <samp>journal.html</samp>:</p>
<pre><code><h2>Friends</h2>
<ul>
<li><a href="http://courses.washington.edu/info343/">
343 Buddies</a></li>
<li><a href="http://www.willsmith.net/">
Big Will</a></li>
<li>
<a href="http://youtube.com/watch?v=mZHoHaAYHq8"
title="Conan the Librarian">
Conan the Librarian</a></li>
</ul></code></pre>
<ul>
<li>Use the appropriate layout-related tags/attributes and CSS to make this list into a second, left-aligned column as shown in the screenshot. The colors, borders, etc. of the list are not important; the focus is on the layout.</li>
<li><strong>The layout with a second column must still be a “liquid” layout</strong> — that is, all parts of it should adjust in size accordingly when the browser size changes.</li>
<li><em>Hint:</em> When multiple elements float in the same direction, they arrange themselves into columns. <!-- Also see textbook Chapter 4’s section on "The <code>clear</code> Property" for more information. --></li>
</ul>
</section>
<section>
<?= t_head("Upload to the Course Webserver", "5", array('extra' => true)) ?>
<p>Upload your work to the course web server. If you don’t remember how, follow the instructions from <a href="../1/#upload-to-the-course-web-server">Lab 1</a>.</p>
<p>Since you’ll be uploading a lot of your work, we recommend keeping your folder organized with a consistent naming convention. For example, upload your second lab to the folder <samp>lab2</samp>.</p>
</section>
<section>
<?= t_head("Advanced Tweaks", "10", array('optional' => true)) ?>
<ol>
<li>
<p>Write your page so that if you hover over <em>any</em> element (i.e. any header, paragraph, image, etc), the element is highlighted in yellow.</p>
<p>This must be a one-selector, one-property addition to your stylesheet — no commas allowed! How can one rule apply to all elements? Google away! (Tricky.)</p>
</li>
<li>
<p>The new CSS version 3 will introduce borders with rounded corners. The CSS styles and properties for this won’t pass the default W3C CSS validator yet (you have to tell it to validate using <strong>CSS Level 3</strong> instead), but they are supported in Firefox and Chrome and other browsers.</p>
<ul>
<li>Using a search engine, figure out how to do rounded corners on your journal borders. Try to find a way that will work in both Firefox and Chrome/Safari.</li>
<li>If you finish that, consider exploring some other properties from CSS 3, such as text shadows.</li>
</ul>
</li>
</ol>
</section>
<footer>
<p>If you’ve finished everything, good job! Start researching more things you could add to your page to make it even better.</p>
</footer>