This is the main page for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
A Basic Layout
There are a blue million ways to lay out a Web site, from extremely simple to incredibly complex. If you search Google with the terms “CSS layout,” you’ll see what I mean.
We’re going to start simple, by coding a CSS-driven layout with four of the most fundamental elements of the basic Web page:
- the heading;
- the main content area; and
- the sidebar;
Simple enough, right?
Not so much, but if you follow along closely, you’ll get the hang of it readily enough.
Important Note: By learning to create layouts for your Web page, you are leaving the realm of "novice" or "beginner" Web design and entering the "intermediate" level. Many Web designers leave layouts to others, relying on freely provided layouts created by CSS gurus (such as my personal favorites, the layouts created by Matthew James Taylor, which I often modify for my own use), and spending their time designing other elements instead of "reinventing the wheel." Whether you choose to do this is entirely up to you. There are many, many free layouts out there that are well-done and standards-compliant, and nothing prevents you from relying on those. But you really should learn to create them, if for no other reason than to gain understanding of how they function.
You’ll also be reworking your pages, particularly the navigation scheme, to reflect the new layout. Don’t worry, it won’t be too difficult. The HTML will remain much the same. Only the CSS will be drastically changed.
Let’s get started!
Credit where credit is due: I’m adapting this from the initial layout lesson provided by Ian Lloyd, with some input from WestCiv.
Starting Our Layout
We’re actually going to go backwards a bit to go forward. What I mean by that is, we’re going to create an entirely new home page, and transfer some of our old content to the new page.
In your text editor, create a new, empty file and call it index2.html. Save it in your mydesign folder.
Way back in Lesson One, we created the basic structure of an HTML page. Let’s do that again. You can refer back to that lesson if you like before moving forward.
I’ve made a couple of minor changes to the structure as given by Lesson One. Can you spot them? Take a look while you copy and paste this into your index2.html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My First Layout</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen"> </head> <body> </body> </html>
I changed two things: the title and the name of the stylesheet we’re going to create.
Let’s create that stylesheet now.
Open a new text file and name it layout.css.
If you remember Lesson Two, we created a basic stylesheet and added lots of text formatting, colors, and images. We’re not going to do that right off the bat here. Instead, in a moment we’re going to start our new stylesheet with some layout formatting.
First, we’re going back to our index2.html file, and add some layout formatting. Put the following code in the body section of your page (between the <body> and the </body> tags):
<div id="heading"> </div> <!-- end of heading div --> <div id="sidebar"> </div> <!-- end of sidebar div --> <div id="maincontent"> </div> <!-- end of maincontent div -->
Notice that we’ve commented the three divs, alerting us to what those ending divs are. This is always a good thing to do, helping us to keep everything straight in our coding.
We’ve created three sections to our page: the heading, the sidebar, and the maincontent. Because of the way we’ve named them, there should be no problem in figuring out what each section is for.
Remember, your page is entirely unstyled as yet.
Adding Content
Now let’s add a bit of content, to make something appear on our page.
Put this in between the heading divs:
<h1 id="brand">My First Web Layout</h1> <h3 id="tagline">The first of many!</h3>
Notice we’ve created two more IDs, brand? Many designers call their site’s h1 heading a “site brand,” and the secondary heading underneath the “tagline.”
In our sidebar, we’re going to add an unordered list for our site navigation. This will be the exact same unordered list we used in our first navigation scheme, from Lesson Eleven.
Copy and paste this between your sidebar divs.
<h2>Navigation Links</h2>
<ul id="navlist">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="about.html" title="About Me">About Me</a></li>
<li><a href="links.html" title="Links and Credits">Links and Credits</a></li>
<li><a href="contact.html" title="Contact Me">Contact Me</a></li>
</ul>
Remember, the CSS can change dramatically while leaving the HTML untouched. That’s why we can use the same code for our HTML as we did earlier.
Now we’re going to add some “dummy text” to our maincontent area. We’re going to use what designers call “lorem ipsum” text, which is in Latin. We use it not because we know what it means (nor do we care), but because it looks like real English (or Spanish, or whatever language you prefer) content. Great for design. Just don’t leave it there when you post your pages on the Internet … We can get all the "lorem ipsum" text we want from Lorem Ipsum, a site that gives us a large selection of Latin to use for our purposes. We won’t need much.
Copy and paste this between your maincontent divs.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
Having done all of that copying and pasting, refresh your page and see what it looks like.
Here’s what it should look like. (Remember, the bottom “go back” link isn’t part of your design. It’s just there for your convenience.)
Your first reaction might well be, “Hey, it’s not arranged at all! It’s still stacked up like the other page! What are you trying to pull here?!?”
Remember, we haven’t done anything to style, or structure, this page in our CSS file. Now that we have some content, let’s get to that.
Adding Structure
We’re going to start by adding some spacing, and a temporary red border around our elements. We do this because it helps us visualize everything as it is structured on the page. It’s an ugly thing, and will be removed later on in the process.
Add this to your layout.css:
#heading, #brand, #tagline, #sidebar, #maincontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
More about margins and padding.
Here’s what it should look like.
Wow, that red border does absolutely nothing for the looks of the page! But it will help us keep things sorted properly. Again, we will remove it before we finish. Same with the padding and margins, which are there merely to keep things sorted out a bit.
Let’s do some preliminary formatting. I’m making some arbitrary font and color decisions to keep things moving. If you don’t like them, wait until the end of the lesson, then change them to suit you.
Copy and paste this at the top of your stylesheet:
body {
background-color: #b2dfee;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}
If anything, it got even uglier. The rather dull blue background color is okay, I guess, but the borders are shoved over to the side. The font changed, and there is some more spacing between the lines, so that’s not a bad thing. Overall, we’re not going anywhere fast. Let’s make a few more basic styling changes to make things appear a bit better. Remember, this is a step-by-step process.
Add this to your stylesheet, under the body rule you’ve just added:
h1 {
font-size: 2em;
}
Add this under the h1 rule you’ve just added:
h2 {
font-size: 1.5em;
}
Add this under the h2 rule you’ve just added:
h3 {
font-size: 1.25em;
}
And under that h3 rule, add this:
p, li {
font-size: .9em;
color: #000033;
}
Here’s what it should look like.
Hmmm. With all of that, now it (probably) looks more like it did before we started adding all of this stuff, except for the various blues. The difference is, instead of the browser deciding what the page looks like, now we decide. And, if we want, we change.
Now, we add the four IDs to our stylesheet. We won’t add any selectors yet, so you won’t notice any changes in your HTML file.
Copy and paste all of this in your stylesheet, below everything else:
/*** layout ***/
#heading {
}
#brand {
}
#tagline {
}
#sidebar {
}
#maincontent {
}
/*** end layout ***/
Notice the CSS comments that tell us the layout is beginning and ending?
Adding Some Style
Since we’ve got our layout rules in place, let’s add some styling to them.
Add this to your #heading CSS rule:
background-color: #27408B; color: #f0f8ff; padding: 0; margin: 0;
This dramatically changed the appearance of the entire heading, coloring the background dark blue and changing the color of everything in it to a light blue. Zeroing out the padding and margins forces the heading all the way to the top of the page by overriding the browser defaults.
Add this to your #brand CSS rule:
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
This changes the font to a more decorative sans-serif.
Add this to your #tagline CSS rule:
font-style: italic; font-family: Georgia, Times, "Times New Roman", serif; padding: 10px 20px; margin: 0; color: #f0f8ff;
We’ve changed the font of the tagline, given it a different color, and italicized it; we’ve also used padding and margins not only to give some breathing room, but to tighten up the design.
More about margins and padding.
Now we’re going to move that sidebar to the side where it belongs. There are several methods to do this; we’re going to use the simplest one. We’re also going to set it off by adding some color.
Add this to your #sidebar CSS rule:
width: 220px; background-color: #ffe4e1;
That constrained the width of the #sidebar element, and gave it a pretty pastel pink background.
Now all of that makes a big difference....
Here’s what it should look like.
Look at the red borders: we’ve tightened up the design considerably with these seemingly minor tweaks.
We’ve covered a lot of ground in this lesson. Why not take a break? We’ll finish this layout in the next page.
