Web Design 35S‎ > ‎CSS‎ > ‎

Divvying Things Up

Before you make your web site, make a rough sketch on a piece of paper to show where all the various parts of the assignment will be located. Make sure I see the sketch before you begin.
  1. You are about to try the coolest project of your life. It will give you thrills, chills, and new levels of excitement you've never known before.
    • Or something like that.
    • Actually, you'll be working with "div"s which are useful but fairly tricky parts of CSS.
  2. Divs are the different sections that show up on a page layout.
    • They may be the columns, the header, or the footer.
    • There could be one div on a page or many.
    • They do the work of tables, but they aren't tables. They're more like boxes stacked on top of each other.
  3. Using this website here, Little Boxes, cut and paste whatever funky design strikes your eye.
    • For the purpose of this exercise, try to pick a simple one since it will be considerably easier for you to work with.
    • Though you want simple, it should still have at least 3 divs. Don't pick "One Box," for example.
  4. Once you have your design copied and pasted into notepad, save it as a .css file.
  5. You're going to create a couple of divs in an HTML file,
    • Name them the way the style sheet does
    • Open it up in Chrome.
  6. Decide on a color scheme for your design.
    • The most common background color for Internet websites is actually white. Other colors generally provide accents.
    • The dominant color for this website is white, and the accent color is black.
  7. The colors for the divs are defined in the stylesheet that goes with your design.
    • The problem you're going to see if that the divs have different names.
    • Each div has its color defined separately (sometimes in several places) and so you have to find each one and make the necessary changes.
  8. Give your site a name. The name is normally found in the header. But you may not have a header, so put the name in the left hand or upper div.
  9. Create a copyright notice for your site.
    • It would usually appear somewhere in the footer of your site. However, you don't have a footer do put it in the right hand or the lower div.
  10. Create a small logo to go in your left hand or upper div.
    • There are logo sites listed in the left sidebar. Try using one of those to create a cool logo.
  11. Make sure your site has some content.
    • What it is doesn't really matter for today. Just make it interesting.
      • Include at least two pictures on your site and at least 150 words of text so that it looks like you've actually got something on your page.
James Dykstra,
Jan 13, 2011, 7:36 AM