Home arrow Web Standards arrow Page 6 - Designing the Elements of a Web Page
WEB STANDARDS

Designing the Elements of a Web Page


My previous article on information architecture dealt with planning the content properly. Now, that great content needs a great design to sit inside. This is where the web design part steps in and it is equally intricate. Many people will say "I don't know where to start." There is no requirement to be a professional designer to create a web site.

Author Info:
By: Stephen Davies
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
August 13, 2007
TABLE OF CONTENTS:
  1. · Designing the Elements of a Web Page
  2. · The Starting Tools
  3. · Designing the Grid
  4. · Web Design Tips
  5. · The important principles of white space
  6. · Example of a Styled Template

print this article
SEARCH DEVARTICLES

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><b
r><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.

blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials