Assignment 4

This week we learn about layout and positioning.

Preparation:

Text: Chapter 12 - Arranging Elements: layout and positioning

Note: This is another huge chapter, so be prepared to spend a good amount of time in reading and doing the exercises. This chapter really sums it all up though - how to get things to appear where you want them to on a page, albeit with a few "issues" here and there.

CD: (optional): View lesson 4

Be careful as you watch the CD for this lesson. The author spends a great deal of time on 3-column layouts, and you are not responsible for 3-column layouts. Read the text first, then try the CD. If you find that dealing with 3-column layouts is causing you confusion, you may be better off without it this time.

For Credit:

1. Create several webpages that demonstrate various 2 column layout techniques (by following the steps below) -- 40 pts. total
   

   In this assignment you will name your first page (part "a" below) a4liquid.html. From that page you will link to the other pages that complete the assignment.

   1. (10 pts) In files named a4liquid.html and a4liquid.css create a "liquid" version of a webpage that has a header, 2 columns, and a footer. It must have a main column on the left that is liquid, and a "sidebar" column on the right that is a fixed width. You must give the divs ids of "header", "footer", "main", and "sidebar" so that I know which div is supposed to be in which role. Make sure to use the "float", "width" (see p. 504), "margin" (see pp. 506 - 509), and "clear" (see p. 511) properties correctly, as illustrated in the text.
      
      Note that in order for the main column to be liquid, it must contain no elements that have fixed widths, including images! In the interest of being flexible, I will allow you to have fixed width elements inside your main column, as long as they do not exceed 150 pixels.
      

   2. (10 pts) In files named a4frozen.html and a4frozen.css create a "frozen" version of the same webpage, following the instructions found on pp. 517 - 518 of the text. You must have the same 4 divs as for part a, plus a div with the id "allcontent" that goes around all of the content in your page.
      

   3. (5 pts) In files named a4jello.html and a4jello.css create a "jello" version of the same webpage, following the instructions found on the bottom of p. 518 in the text. You must have the same 5 divs as for part b.
      

   4. (5 pts) In files named a4absolute.html and a4absolute.css create a version of the same webpage that uses absolute positioning to create the 2 column layout, following the instructions on pp. 523 - 524 of the text. Note that in an absolute layout the main column must remain fluid, not frozen, so the rules about widths given for the liquid layout, above, also apply to the absolute layout. Because your main column is on the left, you'll need to use the "position", "top", "right", and "width" properties in the rule for your right column and give your left column a big right margin to make room for the right column. You must have the same 4 divs that you used in part a.

   5. (5 pts) Use "save as" to save your 2 files from part d as a4more.html and a4more.css. Add 2 new divs to your HTML page, and find a small image that you can use as the content for both of these divs. Give the divs ids of "absolute" and "fixed". Use absolute positioning to position the first image somewhere on your page, and also give the image a z-index of 99 to ensure that nothing covers part of the image (see pp. 528 - 529). (Note: you may not be able to see any difference to your page when you add the z-index property. That's ok. Just insert it anyway, for practice.) Use fixed positioning to position the second image. Give the "left" property a negative value so part of the image disappears off the left edge of the browser window. (See pp. 535 - 538.)
      

   6. (5 pt) Create a navigation bar on the first page that contains links to all 5 of these pages. Replicate that nav bar on each of the other pages so that I can move from one assignment to the next easily. You should name your links
      
      liquid | frozen | jello | absolute | more
      

   Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code.Links to these validators are on the Links page. Note that points will be deducted from your score for each error in your XHTML or CSS code.

   Upload your webpages and css files to the server. Upload them directly into your public_html folder, not into a subfolder.

2. Take quiz 2 on lessons 3 and 4 - 20 pts.
   
   Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything except to take the quiz itself. There is no time limit. You will only get one attempt. If you load the quiz more than once you will receive a 0.
   
   Note: you will be required to enter your CATE username and password. This will be the username and password that you chose at the beginning of the course when you checked-in, NOT your username and password for the student server. If you can't remember your username and/or password, go to the CATE password reminder page to have them emailed to you.
   
   Quiz 2
   
   
3. Participate in the lesson 4 discussion - 5 pts.
   
   Post a message on the "Lesson 4 discussion" topic of our message board. Make sure you find the topic with this title that was authored by me. This could involve asking a question, answering another student's question, giving an example of something that you struggled with and then overcame (or didn't!), giving an example of something you found particularly cool, or any other constructive way you can think of to participate. In the "Name" field the first word MUST be your student server username; after that you can type your real name to make it more personal. Contributions of just a few words will not receive credit.
   
   Do not post any new topics on the message board. New topics that are created by students will be deleted.