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.
- 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!).
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.]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.- Select View | Source (or Page Source). Copy the entire code.
- Open an HTML editor (HTML-kit on the PC, Taco on a Mac) and start a new HTML document.
- 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.
- 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.
- Open a new file and save that file in the "styles" folder you created in step 1 as "stylesheet.css". (Note: all lowercase!)
- 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> - Press Save.
- 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. - Enter the following line just below the <head> tag:
<link rel="stylesheet" href="styles/stylesheet.css" type="text/css" />
- 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.
- If you look back at "test.html" you will see code similar to this:
<div id="container">
The code corresponds to the gray lines and boxes in the following manner:
<div id="banner"> </div>
<div id="sidebar-a"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
- To help you remember what is what for now, please add text so your "test.html" page looks something like this:
<div id="container">
Refresh "http://users.rowan.edu/~yourusername/index.html" and you will see something like the following:
<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>
- Go to "stylesheet.css" and find the following bit of code:
#content {
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:
padding: 5px;
margin-left: 215px;
background-color: gray;
}#content {
Now go back to "index.html" and change
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;
}<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: