<!--#include virtual="commontop.html" -->
<title>CSE 190 M Lab 2: CSS Design and Layout</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>University of Washington, CSE 190 M</h1>
<h2>Lab 2: CSS Design and Layout</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>University of Washington, CSE 190 M</h1>
<h2>Lab 2: CSS Design and Layout</h2>
<p class="license">
Except where otherwise noted, the contents of this document are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<p class="license">
<em>original lab idea and code by Victoria Kirst; revised by Brian Le and Marty Stepp</em>
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide">
<h1>
Basic lab instructions
</h1>
<ul>
<li>
You may want to <strong>bring your textbook</strong> to labs to look up syntax and examples.
</li>
<li>
We encourage you to <strong>talk to your classmates</strong>; it's okay to share code and ideas during lab.
</li>
<li>
You probably won't finish all of the exercises. Do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.
</li>
</ul>
</div>
<div class="slide">
<h1>Today's lab exercises</h1>
<p>
Today you'll style a "Victoria's Journal" page. Before you leave, <strong>check in</strong> with a TA.
</p>
<ol>
<li>Arrange Your Page into Sections</li>
<li>Spacing With Padding and Margins, Backgrounds</li>
<li>Float, Alignment and Clear</li>
<li>Cosmetic Finishing Touches</li>
<li>Upload Your Page to the Web</li>
</ol>
<ul>
<li>
Resources: <a class="popup" href="http://www.getfirebug.com/">Firebug</a> (make sure it's installed!), <a class="popup" href="../lectures.shtml">lecture slides</a>
</li>
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Arrange Page into Sections (~20-25 min)</h1>
<p class="readbeforestarting">
(The next 3 slides describe this exercise. Please read them all, then start.)
</p>
<p>
First download the following HTML file.
Then open it in your text editor, and also open the HTML page on your hard drive in Firefox. Then move on to the next slide.
</p>
<ul>
<li>
<a href="2/journal.html"><img src="images/icon_html.gif" class="icon" alt="html" />
journal.html</a>
</li>
<!--
<li>
<a href="2/layout.css"><img src="images/icon_css.gif" class="icon" alt="html" />
layout.css</a>
</li>
-->
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, details</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
Organize <code>journal.html</code> 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 <code>layout.css</code>.
</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>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>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, output</h1>
<p>
Your page should look like this when you are done:
</p>
<p style="width: 1030px; height: 380px; overflow: scroll;">
<img src="2/output1.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Padding, Margins, Backgrounds (~15 min)</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<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>white</code>.<br />
</li>
<li>
The boxes with the <strong>blue</strong> borders should have a background color of <code>#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>
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 following background image:
<ul>
<li>
<img src="http://www.cs.washington.edu/education/courses/190m/10su/labs/2/images/background.gif" alt="spatula city background image" />
(inspect the image in Firebug to find out its URL!)
<!--
<code style="font-size: smaller">http://www.cs.washington.edu/education/courses/190m/10su/labs/2/images/background.gif</code>
-->
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
This example is Victoria's page with padding/margins and backgrounds:
</p>
<p style="width: 1030px; height: 380px; overflow: scroll;">
<img src="2/output2.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Float, Align, Clear (~15 min)</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
Now we'll practice <code>float</code>, <code>clear</code>, and alignment. You may have to edit <code>journal.html</code> code as well as <code>layout.css</code>.
</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. The image should stay within the bounds of the blue box; that is, it should not <q>bleed</q> into the other content below it.
<ul>
<li>
(<em>Hint:</em> If your boxes are not tall enough to fit the floating elements inside them, see the "Making Floating Elements Fit" in Chapter 4 of the textbook.)
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
This example is Victoria's page with floating and alignment:
</p>
<p style="width: 1030px; height: 380px; overflow: scroll;">
<img src="2/output3.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Finishing Touches (~10 min)</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<ul>
<li>
Change the box with the <strong>green</strong> border to have a solid, white, 10px-thick border.
</li>
<li>
Change the boxes with the <strong>blue</strong> border to have a solid, 4px-thick border, in color <code>#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>#009097</code>.
</li>
<li>
Change the box with the <strong>red</strong> border to have a background color of <code>#A8F0F0</code>, and get rid of its border.
</li>
<li>
Change the font size of the <q>So fresh and so clean</q> area to 14pt, and get rid of its border.
</li>
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
This example is Victoria's beautified page:
</p>
<p style="width: 1030px; height: 380px; overflow: scroll;">
<img src="2/output4.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Put Page on Web (~10 min)</h1>
<ul>
<li>
Use our <a class="popup" href="../upload.shtml">Uploading Files</a> directions to upload your page to our Webster server.
<ul>
<li>
Put your files in a folder named <strong><code>lab2</code></strong> within your <code>public_html</code> area.
</li>
</ul>
</li>
<li>
Check the page by viewing it in the web browser. Its URL should be:
<ul>
<li><span class="url">http://webster.cs.washington.edu/<var>YOUR-UWNETID</var>/lab2/journal.html</span></li>
</ul>
</li>
</ul>
<p>
<em>Ask a TA if you have any problems logging in to Webster or uploading your files!</em>
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: 2nd Column, Friends List</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
Add a second column to the layout. Copy and paste the following code into <code>journal.html</code>:
</p>
<pre><code><h1>Friends</h1>
<ul>
<li><a href="http://www.cs.washington.edu/190m/">190m 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 below. 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 <q>liquid</q> 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 clear Property" for more information.
</li>
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
This example is Victoria's page with the friends list:
</p>
<p style="width: 1030px; height: 380px; overflow: scroll;">
<img src="2/output5.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: (h4x0rz only): Yellow highlight</h1>
<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>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: (h4x0rz only): Rounded borders</h1>
<p>
The new CSS version 3 will introduce borders with rounded corners. The CSS styles and properties for this won't pass the W3C validator yet, 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>
Make a new file layout-css3.css and link it to your page. In this file, add the necessary CSS rules to round the corners on your journal's borders. (Using a separate file keeps all the "invalid" CSS separate from the "valid".)
</li>
<li>
If you finish that, consider exploring some other properties from CSS 3, such as text shadows.
</li>
</ul>
</div>
<div class="slide">
<h1>If you finish them all...</h1>
<p>
If you finish all the exercises, you can add any other content or styles you like to your page.
</p>
<p>
If the lab is over or almost over, check with a TA and you may be able to be dismissed.
</p>
<p>
<strong>Great work!</strong>
</p>
</div>
<!--#include virtual="commonbottom.html" -->