Website Layouts Made Simple Starter Code

I’m in the heart of open source country: Corvallis, Oregon, preparing to teach a workshop on website layout design for the 2010 SuperQuest Summer Institute at Oregon State University. I’ll be covering a variety of CSS techniques to generate cross-browser layouts (1, 2, & 3-column). We’ll also cover typography, use of color, background graphic positioning, and other fun techniques.

So we can get right to the meat of the matter, I decided to post some “starter” code.

XHTML 1.0 Strict Template

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
<title></title>
</head>
<body>
</body>
</html>

HTML-Ipsum

Since our concern will be primarily with coding layouts, I want to jump right to some sample code to drop into our various columns, headers, & footers. A great site to drop sample code is the HTML-Ipsum site. Look at the page, decide how much or what type of sample code you want, click the title box above the code, and you’ll get the sample code copied to your clipboard, ét voilá!

Stay tuned for some more yummy CSS goodness forthwith…!