Web Programming Step by Step
Lab 2: CSS Design and Layout

original lab idea and code by Victoria Kirst; revised by Brian Le and Marty Stepp

The purpose of this lab is to practice writing Cascading Style Sheets to control the appearance and layout of a web page.

Lab 2 Resources

• Lecture Slides
• Web Programming Step by Step textbook Ch. 4; Ch. 3 section 3.2.3 - 3.2.6, 3.3
• Install Firebug (Strongly suggested!)
  • When you try to install Firebug, you must tell Firefox to allow the installation. After clicking the Install Firebug link above, a yellow message will appear at the top of your Firefox window. Click the Edit Options... button, then on the window that appears, click Allow then Close. Then try to Install Firebug again. (You may need to refresh the page.)
• Solution to this lab, so you can see how your page is supposed to look and work

Victoria's Journal Web Page

You are given a file named journal.html (right-click and select Save Link As...) that represents a page from Victoria's journal. You are to write a stylesheet called journal_layout.css that will transform the layout in different ways throughout the following exercises.

To help you out, you are also given a file named journal_basic.css that defines some basic styles for this page, and it is already linked for you in the file already.
You do not have to edit this provided stylesheet or the link; just edit the journal_layout.css that you're writing.

Exercises for Today:

1. Arrange Your Page into Sections
2. Spacing With Padding and Margins, Backgrounds
3. Float, Alignment and Clear
4. Cosmetic Finishing Touches
5. Upload Your Page to the Web
6. Add 2nd Column: Friends List
7. Make Your Journal Annoying w/ Hover

Exercise 1: Arrange Your Page into Sections (roughly 20 minutes)

The first task is to organize journal.html by adding ids, classes, spans and divs as seen in lecture. Then, add "boxes" around these sections of the website by adding to your journal_layout.css stylesheet.

Hint: Remember the way to define a border in CSS:
border: thickness color style;

For example, the following gives a yellow, dashed, 1px-thick border:

border: 1px yellow dashed;

You are going to match the output below (between, but not including, the thick black lines).

• The borders are all 5px thick and solid.
• The colors are the intuitive HTML color names, e.g. the red border is the HTML color red.
• Note: You should not need define a class or id specifically for the h2s on this page.
  Hint: To reduce the amount of id and class attributes you need to set in the XHTML code, consider using CSS context selectors as appropriate.

The only major changes you should need to make to the XHTML code are adding ids, classes, divs, and spans. You may also change the text of the journal if you like, such as changing it to your name or rewording the journal entries. But please don't spend a large amount of time doing this, so you can move on to the later exercises.

Exercise 2: Spacing With Padding and Margins, Backgrounds (roughly 15 minutes)

You are now going to add padding, margins, and backgrounds to some of the parts you defined in Exercise 1. You should only have to change your journal_layout.css file, if you completed Exercise 1 correctly.

• The box with the green border should have a background color of white.
  
• The boxes with the blue borders should have a background color of #E8FBFB.
  It should have a padding of 5px (on all sides) and margin of 10px only on the top of the box (the margins for the remaining sides should be left at 0px).
• The overall page content area should become centered on the page, should have left and right margins of 10% and a background image using the following image:
  
  http://www.cs.washington.edu/education/courses/190m/09sp/labs/2-journal/images/background.gif

You are going to match the output below (between, but not including, the thick black lines).

Exercise 3: Float, Alignment and Clear (roughly 15 minutes)

Now you're going to practice float, clear, and alignment on the web page. Part of this exercise is understanding the difference between aligning and floating an element. You may have to edit your journal.html code as well as your journal_layout.css stylesheet to get the floats working properly.

• The heading text in the red box should appear on the right side of that section of the page.
  
• The journal entry images should hover on the right side next to the surrounding text. The image should stay within the bounds of the blue box; that is, it should not bleed into the other content below it.
  (Hint: 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.)

You are going to match the output below (between, but not including, the thick black lines).

Exercise 4: Cosmetic Finishing Touches (roughly 10 minutes)

Finally, we add some finishing touches to make the page look its best.

• Change the border of the box with the green border to be a solid, white, 10px-thick border.
  
• Change the border of the boxes with the blue border to have a solid, 4px-thick border, using the hex value #C2E9E9 for its color.
  
• Change the border of the box with the purple border to have only a bottom border, and let that bottom border be blue, dashed, and 2px-thick.
  
• Change the background color of the box with the red border to be #A8F0F0 and get rid of its border altogether.
  
• Change the font size of So fresh and so clean to 14pt and get rid of its border.
  

You are going to match the output below (between, but not including, the thick black lines).

Exercise 5: Upload Your Page to the Web (roughly 5 minutes)

Follow your instructor's directions to upload your page to your student web server. Verify that you did this successfully by viewing your page in the web browser.

Exercise 6 (advanced): Add 2nd Column: Friends List

If you manage to complete the first four exercises before lab time is up, work on adding a second column to the layout. You should copy and paste the following code into your journal.html:

<h1>Friends</h1>
<ul>
	<li><a href="http://www.cs.washington.edu/education/courses/cse190m/CurrentQtr/staff.shtml">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>

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. The layout with a second column must still be a liquid layout -- that is, all parts of it should adjust in size accordingly when the browser size changes. HINT: 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.

You are going to match the output below (between, but not including, the thick black lines).

Exercise 7 (for 1337 h4x0rz only): Make Your Journal Annoying w/ Hover -- Elegantly

Write your page so that if you hover over any element (i.e. any header, paragraph, image, etc), the element is highlighted in yellow.
This must be a one-selector, one-property addition to your stylesheet -- no commas allowed! (Note: This is tricky.)