building a basic CSS layout

This short tutorial will show you how to create a basic but effective CSS layout, using an excellent open source online tool: InkNoise’s Layout-o-Matic. Use this tool when creating your CSS-styled pages and you’ll have very few browser compatability problems — and the layout is flexible enough for you to adapt it to your more complex design needs.

  1. On your Desktop (at school) click on HOME#, and then click to until you open the "public.www" folder. Create a new folder called "styles" (use all lowercase!).
  2. Using Firefox, go to http://www.inknoise.com/experimental/layoutomatic.php and select which type of "layout" you’d like: full page, two columns, or three columns (this tutorial uses the "Two Column (left sidebar)" layout). [While the Layoutomatic is down, we will be using a template as if you had created the page using the Layoutomatic, which you can get at: http://users.rowan.edu/~wolffw/sample/template/index.html. Skip the next step.]
  3. Select the View button, which will bring you to a page that has some gray lines and boxes. This is the skeleton of your page.
  4. Select View | Source (or Page Source). Copy the entire code.
  5. Open an HTML editor (HTML-kit on the PC, Taco on a Mac) and start a new HTML document.
  6. Delete any code that shows up. Paste the code you just copied from step 3 into your new document. If your HTML editor has a Preview function, select it and you’ll see the same gray boxes and lines the Layoutomatic created.
  7. Go to File | Save As and scroll to the public.www folder in Home Directory. Save the file as "index.html" (Note: all lowercase!). By doing this you are saving directly to the school server. At home, you may need to drag and drop to the server using SecureFX or Fetch.
  8. Open a new file and save that file in the "styles" folder you created in step 1 as "stylesheet.css". (Note: all lowercase!)
  9. Go back to "index.html" and cut the following code:
    <style type="text/css">
    #container {
    width: 760px;
    \width: 780px;
    w\idth: 760px;
    border: 1px solid gray;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    }
    #banner {
    padding: 5px;
    margin-bottom: 5px;
    background-color: rgb(213, 219, 225);
    }
    #content {
    padding: 5px;
    margin-left: 215px;
    background-color: gray;
    }
    #sidebar-a {
    float: left;
    width: 200px;
    \width: 210px;
    w\idth: 200px;
    margin: 0;
    margin-right: 5px;
    padding: 5px;
    background-color: rgb(235, 235, 235);
    }
    #footer {
    clear: both;
    padding: 5px;
    margin-top: 5px;
    background-color: rgb(213, 219, 225);
    }
    </style>
  10. Press Save.
  11. Copy the following code and paste it in to "stylesheet.css":
    #container {
    margin-left: auto;
    margin-right: auto;
    width: 760px;
    border: 1px solid gray;
    margin: 10px;
    padding: 10px;
    }
    * html div #container { /* This is the Tan hack */
    width: 782px;
    w\idth: 760px; }
    #banner {
    padding: 5px;
    margin-bottom: 5px;
    background-color: rgb(213, 219, 225);
    }
    #content {
    padding: 5px;
    margin-left: 215px;
    background-color: gray;
    }
    #sidebar-a {
    float: left;
    width: 200px;
    margin: 0;
    margin-right: 5px;
    padding: 5px;
    background-color: rgb(235, 235, 235);
    }
    * html div #sidebar-a { /* This is the Tan hack */
    width: 210px;
    w\idth: 200px; }
    #footer {
    clear: both;
    padding: 5px;
    margin-top: 5px;
    background-color: rgb(213, 219, 225);
    }

    These changes may not make sense now, but will be discussed on page 2 of the tutorial.
  12. Enter the following line just below the <head> tag:
    <link rel="stylesheet" href="styles/stylesheet.css" type="text/css" />
  13. Save the document. Open a new Firefox tab (OpenApple + T) and in the address bar type: http://users.rowan.edu/~yourusername/index.html. You should see a group of grey boxes. From this point forward all you need do is refresh this page to see your updates.
  14. If you look back at "test.html" you will see code similar to this:
    <div id="container">
    <div id="banner"> </div>
    <div id="sidebar-a"> </div>
    <div id="content"> </div>
    <div id="footer"> </div>
    </div>
    The code corresponds to the gray lines and boxes in the following manner:
    layout with labels
  15. To help you remember what is what for now, please add text so your "test.html" page looks something like this: <div id="container">
    <div id="banner">This is my banner.</div>
    <div id="sidebar-a">This sidebar-a, where links can go </div>
    <div id="content">This is where my main content will go. </div>
    <div id="footer"> This is my footer.</div>
    </div>
    Refresh "http://users.rowan.edu/~yourusername/index.html" and you will see something like the following:
    layout with text in their appropriate div
  16. Go to "stylesheet.css" and find the following bit of code: #content {
    padding: 5px;
    margin-left: 215px;
    background-color: gray;
    }
    This code controls the appears of the content section of your web page. Lets make some changes to the code, so it looks something like this: #content {
    padding: 0 5px;
    margin-left: 215px;
    background-color: white;
    border: 1px solid #333;
    } #content p {
    font-family: verdana, arial, sans-serif;
    color: #000;
    font-size: 12px;
    }
    Now go back to "index.html" and change <div id="content">This is where my main content will go. </div> so it looks like this: <div id="content"><p>This is where my main content will go.</p> </div> If refresh the page in the browser you will see something like the following:
    layout with stylized content area

Continue on page 2.

Comments are closed.