Cascading Style Sheets (CSS)

 
 
presented by linda hemenway

Layout pt 3 Assignment Explained

Listed below are the steps you need to follow to complete the layout part 3 assignments.

  1. The textbook emphasized layouts that use float and clear. I considered eliminating the lesson on absolute positioning, however students often wrote to me that they appreciated learning about absolute positioning. I have kept those demonstrations on the DVD even though they are no longer in the textbook.
  2. Open the DVD > css-part2 > start-here.html > layout [pt 3] lesson. Here is a list of what you need to watch for the first 2 assignments.
    * 2 col. absolute
    * 3 col. absolute
    * add a header
    * order of content * absolute resources
    * files used in this lesson
  3. The 2 column absolute page will have a fixed width for the first column and a fluid width that adjusts to the browser window in the second column. This is not exactly what the text book demonstrates, however I have found this layout to be extremely popular and wanted students to create it. Save the file as "2col-absolute.html" and place it in the "samples" folder.
  4. The next homework assignment asks you to create a 3 column layout where the left and right columns are fixed and the center column stretches and shrinks to accommodate the size of the browser window. Save the file as "3col-absolute.html" and place it in the "samples" folder.
  5. Next, add header code to the 3 column absolute sample. Adjust the top postion value to acomodate the height of the header. Save the file as "3col-absolute-header.html" and place it in the "samples" folder.
  6. The final homework assignment asks you to create a page that lists content in one order on the HTML page and displays that content in another order in the browser. Follow the model of the page found at layout [pt 3] lesson > order of content. Save the file as "order-content.html" and place it in the "samples" folder.
  7. Please upload the files (including your modified homework page) onto "student". Use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
  8. I will use the "student work" page to grade your work.

 

arrow-black arrow-white