Assignment for Tuesday, March 3

What we did in class today

1. Begin from these files.
2. Focus first on creating the main content area, with the rounded corner box and drop shadows around it.
3. Slice the mockup, so that you have a top image, a middle repeating image, and a bottom image. BE SURE to slice them so that you include all of the drop shadow around the edges of the box. Use guides to slice them all the same width.
4. Modify the width of the container so that it is slightly wider than your background image slices. (Also modify the height, width, margin, padding, and borders of this AND other elements, as necessary or desired.)
5. Place the top image as the background for the header div, and make the header the correct height so that it displays the background image properly.
6. Place the middle image on the container div, making it repeat vertically.
7. Place the bottom image on the footer dive, making the footer the correct height so that it displays properly.
8. Adjust margins and padding so that these three elements fit together. (If they do not fit perfectly, we will work together to fine-tune things in class.

Now for class on Tuesday, March 3

Repeat any of the steps above that were difficult for you. You will want to be able to do the steps above, as well as the steps below, with relative speed and efficiency.

Continuing from where we left off on in class on Thursday, do as much of the following as possible, in this order of priority:

1. Make the content columns be approximately the same width as those in the mockup.
2. Place an h2 heading — Welcome, Item 1, and Item 2 — at the top of each column.
3. Place lorum ipsum filler text in each column. Also remove borders, etc., that you do not need.
4. Create a logo div or h1 in your markup, just inside the wrapper and before the container.
5. Slice out the logo image from the mockup and make it the background image for the logo div or h1 you created in step 4. (You will need to make the height and width of the logo div or h1 be exactly the size of the logo image.)
6. Create a 2-state (or 3-state) version of the logo image. Using the pixy-rollover method (css background positioning), make it so that you see the second state of the logo on hover.
7. Use the Gilder-Levin replacement method to replace the h2 text in the content of the site with the sliced-out images from the mockup headings.

We will briefly revisit the above steps in class, and then continue to do the following, which will be essential skills for your Exam 2, March 4.

1. [These steps are coming ...]