The width: 800px
The height: 600px
The height can be bigger, but anything important you want to make sure is seen in the top half of the page, some people don't like strolling and their is a percentage of folks that will miss the content if it goes off the page. Chances are that your user is using a screen bigger than 800x600 but this way you can be sure that you will serve it correctly for the least common denominator.
I learned in a class using Lynda Weinmens book, very design centered, she has a site with classes if your interested: www.lynda.com I would also suggest pickign up her book as a reference.
Here is a template file that I like to use when createing a site:
PHP Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Template File</title>
<meta name="description" content="<?php include
'content/metadescription.php' ?>" />
<meta name="keywords" content="<?php include 'content/metakeywords.php' ?>" />
<meta http-equiv="Content-Style-Type" content="text/css">
<?php include 'styles/style.css' ?>
<?php include 'scripts/javascripts.js' ?>
</head>
<body>
<div class="header"> <?php include 'content/header.php' ?> </div>
<div class="menu"> <?php include 'content/menu.php' ?> </div>
<div class="main"> <?php include 'content/main.php' ?> </div>
<div class="footer"> <?php include 'content/footer.php' ?> </div>
</body>
</html>
It is easier to remove the content from the structure of your document using PHP, the web is moving towards XML and in XML you are going to be seperateing the content, style, and script. The above code is valid XHTML and it's plug and play so instead of having to upgrade the entire page when the content changes you update the include file that the content is in. This also allows you to keep the structure clean so when applying your CSS you can focus on the individual components.
Your CSS-P file:
HTML Code:
<style type="text/css">
.header {width:800px;
height:100px;
position:absolute;
top:0px;
left:50px;}
.menu {width:200px;
height:450px;
position:absolute;
top:100px;
left:50px;}
.content {width:600px;
height:450px;
position:absolute;
top:100px;
left:250px;}
.footer {width:800px;
height:50px;
position:absolute;
top:550px;
left:50px;}
</style>
metadescription.php file
PHP Code:
This is my site it is about my site you we provide widgets in all shapes and sizes our service is the best in the area
metakeyword.php
PHP Code:
optician, spectacle, lenses, contact lenses, contacts, glasses, eyeglasses, eyewear, eyeware, ophthalmic, opthalmic, optomtery, opticianry, multifocal, bifocal, progressive lenses, progresive lenses
I like to also change the default values of the links to values that match the color scheme I'm using.
Bookmarks