Designing the Elements of a Web Page - Example of a Styled Template
(Page 6 of 6 )
To demonstrate how a consistent design can be achieved, below are a few pages of code that produces a table similar to the design grid on page three. I say similar as it has a nicely layered approach instead of the flat box look in the mock design. This template can be very useful as the pages are progressively designed over forthcoming weeks.
It should be stressed that style sheets are powerful tools in ensuring consistency and a well-balanced site design. Feel free to utilize this code as and when desired. Simply copy and paste the code into the software (Dreamweaver, FrontPage, Coffeecup, etc) or notepad, and save it as an .HTML file. It will certainly ensure a good starting point for realizing how effective style sheets can be at maintaining consistent web design.
May the creativity flow...
CSS Code for Initial Design Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS code for Initial Design Template</title>
<style type="text/css">
body {
margin:5px 5px 0px 5px;
padding:0px;
}
#sidemenus {
position: absolute;
left:1px;
top:50px;
width:90px;
background:#fff;
border:1px solid #000;
}
#content {
background:#fff;
border:1px solid #000;
margin-left: 90px;
margin-right:110px;
}
#adspace {
position: absolute;
right:10px;
top:50px;
width:100px;
background:#fff;
border:1px solid #000;
}
p,h1 {
margin:15px 1px 1px 15px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#branding h1 {
font-size:16px;
margin:0px;
}
</style>
</head>
<body>
<div id="branding"><h1><a href="yourhomepage.html">Place the site logo here. </a> - It should allow the visitor to go to the home page when clicked<br>Write the site message here below the logo and in just one line</h1></div>
<br>
<div id="sidemenus">
<h1>The<br>main<br>menu<br>options<br>can<br>go<br>here..</h1>
<br><br><br><br><br><br><br><br><br><br><br><br></div>
<div id="content">
<h1>The first piece of content when visiting the home page can go here. Also, for subsequent pages for the menus, that content appears here. Bear in mind, this is a generic template that will need to be customized to fit the mood and style of the site theme. What works is the standard left-right system with the main menu down the left. The main menu could also go across the page below the branding, left to right, instead of at the top of the page area.</h1>
<br/><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="adspace">
<h1>Possibly place ads here. It is by no means a hard rule. More menu options can go here that possibly fit into a category not covered in the main menu.</h1>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 4 
