Out of laziness, when building a website, I’ve often just started with one of the Dreamweaver basic template layouts – I’ll go in and delete a bunch of stuff and rework it to the way I wanted. This included copying and pasting code from websites I have built previously and rewriting the same sections of code with each new site. I was also using Dreamweaver as a code editor just because I started there. Dreamweaver is quite bloated however and if you are not using the WYSIWYG features, it is completely unnecessary. There are much better text editors out there already. I’ve currently switched to Notepad++ on the Windows side (what I use at work) and so far it has been working out quite nicely. I have put together a base CSS (2.1 and 3 valid) and HTML (5 spec valid and backwards compatible) template file with the structure I typically use for building a site. There are a few items in the CSS (like the comment block at the top) that are geared towards Wordpress users, but those can be ignored or removed as necessary. Now, let’s see the code. First the HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Website Title</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<!-- the header -->
<div id="header">
<div class="container">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<!-- main content of the page -->
<div id="content">
<div class="container">
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
<p>Copyright © yyyy Website Name
</div>
</div>
</body>
</html>
Pretty basic, right? The only thing that might throw you off is the DOCTYPE. This is the way HTML5 does it – much simpler. Also, there is some Javascript included for backwards compatibility with IE.
Now, on to the CSS
/*
Theme Name:
Theme URI:
Description:
Version: 1.0
Author:
Author URI:
*/
/* reset styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
body {
font-size: 62.5%;
text-align: center;
color: #000000;
}
/* container - place inside each section or around the entire page depending on your layout */
.container {
width: 960px;
margin: 0 auto;
text-align: left;
position: relative;
}
/* for clearing any floats <br class="clearfloat" /> */
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*--- header section - put whatever you want here ---*/
#header {
}
/*--- horizontal "block" menu ---*/
#menu {
float: left;
}
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
text-decoration: none;
height: 50px;
width: 125px;
padding: 5px 10px 5px 10px;
}
/* wordpress specific menu stylings */
#menu li.current_page_item a {
}
#menu li.first a {
}
#menu li.last a {
}
/*--- content section - put whatever you want here ---*/
#content {
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
}
/*--- footer section - put whatever you want here ---*/
#footer {
}
A few things of note in the CSS. One is that at the top, I’m using a modified version of Eric Meyer’s CSS reset. I changed some of the spacing and indentation to make it a little more compact. I also removed the ‘content: none;’ from the ‘blockquote’ and ‘q’ resets so the stylesheet would validate with CSS3. A final modification I made was to the font size (from 100% to 62.5%). This resets the font base to 10px for easy em calculations (i.e. 1.4em is a 14pt font). The rest of the stylesheet should be mostly self explanatory.
So, what do you use as a starting point when building websites? What do you like about my templates? What don’t you like? What would you do differently?
Finally, last but not least, here is the zip file if you want an easy download: SZ’s Barebones HTML and CSS.
Update: I made some minor changes to the font placement in the CSS file. It didn’t quite work properly before. I’m now setting the font size to 62.5% in the body rather than in the reset. Font size can be defined in em’s in individual classes or ids.
