CSCI 121 - Lab 7

Lab Resources

Lab Instructions

In this lab you will use CSS along with DIV elements in order to layout a newsletter. The newsletter will have a header, a footer and three different width content areas for holding "news items".

  1. Start: Using Brackets author a new file named lab7.html.
  2. Author an external style sheet named lab7.css and place all style rules within it (none internal in the STYLE block).
  3. Your news letter should have the 5 different types of areas: the header, footer and three different content areas as shown in the example below:
  5. Let your imagination go wild with with the styles used for each area type (header, footer, content areas) of the news letter.
  6. Mock up something in each area of the newsletter (header, content areas, footer).
  7. Within one of the content areas, include a small image (anything) and wrap text around it.
  8. Important notes/hints:
    1. Get the basic layout of the page and its various areas working first using DIV and CSS then add in the text and other elements within.
    2. Make sure your newsletter has a fixed overall width and that everything lines up along the left and rightmost margins.
    3. The newsletter should use have a header at the top, a footer at the bottom, and at least one each of the full-width, narrow and wide content areas.
    4. Make sure to name the files: lab7.html and lab7.css
  9. Create a folder in your Google Drive named: Lab 7
  10. Upload the lab7.html and lab7.css files to Google Drive Lab 7 folder.
  11. Share the Lab 7 folder with thomas.rogers@millersville.edu.