Building Template for WordPress
4 Replies
July 18th, 2008
Datis Design Weblog
Designing for Communicating
As you know WordPress is one of the lovely software that you can easily build a weblog with it, it is so powerful so you can easily use it as a CMS. So I decided to write a tutorial about building a WordPress template for you. I hope after reading this you will be able to easily make your custom templates for WordPress. I suggest to read tutorials about building website with HTML and CSS before reading this, because if you be familiar with those concepts then you will understand this more easily.
WordPress Template Structure
Every WordPress template should have at least 2 files, index.php and styles.css, look at this picture :
As you can see the picture shows that a WordPress template at general has these elements and can have less or more but at least it should have those 2 files.
For creating a CSS file follow this structure :
/*
Theme Name : Your template name
Theme URL : Your template url
Description : Descriptions
Author : Author name
Author URL : Author url
Version : Template version
*/Put these lines in the beginning of your styles.css file.
Normally index.php file has this structure :
<Your Doctype Goes Here...>
<html>
<head>
<title>Here Goes Your Title...</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="header">Your Header Information Goes Here...</div>
<div id="navigation">Your Navigation Links Goes Here...</div>
<div id="content">Your Content Goes Here...</div>
<div id="sidebar">Your Sidebar Goes Here...</div>
<div id="footer">Your Footer Goes Here...</div>
</div>
</body>
</html>For linking the CSS file use this code :
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />For begriming we need a folder inside wordpress/wp-content/themes which is usually our blog name. Then create two files inside it index.php and styles.css, now we use these commands to build our index.php file :
-
Blog Information :
We can show our blog name with this command :
<?php bloginfo('name'); ?>If you want to make a link for our blog title follow this :
<a href="#"><?php bloginfo('name'); ?></a>And if you want that link goes to front page :
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>Blog Description :
<?php bloginfo('description'); ?> -
Loop :
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?> <?php endwhile; ?> <?php endif; ?>First line will check to see if there are posts or not, if yes it will show it and continue it until there are no posts.
-
Post Titles :
<?php the_title(); ?>With this command we can show posts title and it should be between the_post and endwhile command. For linking each title to its own post use this command :
<?php the_permalink(); ?>With this command posts contents will be shown :
<?php the_content; ?> -
Posts Information :
With these commands we can show some information about our post, they should be between this tag :
<p class="postmetadata">......</p>With this command we show "Filled Under" :
<?php _e('Filled Under#58;'); ?>For showing the related category we use this command :
<?php the_category(','); ?>For showing "By" :
<?php _e('By'); ?>And author’s name :
<?php the_author(); ?>Showing numbers of comments :
<?php comments_popup_link('No Comments »','1 Comment»','% Comments»'); ?>If you login to your site with admin account you can put this line to have an Edit link for your posts :
<?php edit_post_link('Edit','|',"); ?>If there are no posts we can use these commands to show "Not Found" :
<?php else: ?> <div class="posts"> <h2><?php _e('Not Found'); ?></h2> </div>If you want to customize each of your posts with CSS, you can use this command to give each post an ID :
<div class="posts" id="post-<?php the_ID(); ?>">For generate pagination you can use this command :
<div class="navigation"> <?php posts_nav_link(); ?> </div>It should be between endwhile and else commands, and it can be customized like this :
<div class="navigation"> <div class="navigation"> <?php posts_nav_link('in between','before','after'); ?> </div> -
Sidebar :
For showing Category put this command before end of body tag :
<div class="sidebar"> <h2><?php _e('Categories'); ?></h2> </div>For showing categories use this command :
<ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchial=0'); ?> </ul>You can use these options :
sort-column=nameIt will sort categories by alphabetical order.
optioncount=1It will show number of posts in each of the categories.
hierarchial=0It wont show sub-cats inside categories, you should put & between each option.
For showing archives use this command :
<h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul>For blogroll :
<?php get_links_list(); ?> -
Search Form :
First create a searchform.php file and put these codes into it :
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <div> <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form>Now inside index.php put this code above all listing inside sidebar :
<li id="search"> <?php include(TEMPLATEPATH.'/searchform.php'); ?> </li> -
Calendar :
For showing calendar :
<li id="calendar"> <?php get_calendar(); ?> </li> -
Footer :
At the end of sidebar create a div and put these codes :
<div id="footer"> <p> Copyright © 2008 <?php bloginfo('name'); ?> </p> </div>
Slicing index.php file
Now after we have created our index.php file we should separate each part as you see in the picture above. From the beginning of index.php till the end of navigation div, cut the contents and put it a file and save it with header.php name and put this code in index.php in the position of those codes you have put in header.php :
<?php get_header(); ?>From the beginning of sidebar div till the end of it, cut and paste the codes in a file named sidebar.php and put this code in index.php :
<?php get_sidebar(); ?>Do the same work for footer div and put them in footer.php and write this code in index.php :
<?php get_footer(); ?> If you want to separate the archive from index page, copy the index.php content and put it in a file named archive.php, then find this code :
<?php the_content(); ?> And change with this code :
<?php the_excerpt(); ?> Now you can customize this page as you want.
These are the main parts of a WordPress template, but you can check the WordPress web site for more codes… Good Luck.
In previous tutorials I have told you how to design a website template in Photoshop and convert it to valid HTML/CSS file. Maybe some people cant do the coding in CSS and HTML. So Photoshop has a powerful tool to convert your template into a working website. But the generated code will not be so beautiful, but it is a fast way and you can easily customize the generated code to gain what you want, at last I will tell writing code by your self is very very better…
Making template ready !
I am using the same template which I have used it in previous tutorials. You should be able to work with slice tool in Photoshop. You should slice your template in the parts you need for example navigation, header, main content, footer and so on…
Look at the sliced template below :
Note : Slice tool has a shortcut which is very useful, it will create a slice based on your current selected layer, for using it you should select your desired layer and hit Alt+Shift+Ctrl+C or select New Layer Based Slice from Layer menu in Photoshop.
Now you Template is ready to be a HTML file…
Save for Web
Choose File menu and select Save for Web & Devices, the new window will be shown, in this window you can choose your slice image type, quality, change your slices, give them link and alt tag and… If you look at the picture below I have chose JPG for all slices and 80 for quality. When you are choosing images type and quality see the final image size and download time in bottom corner of this window it is important.
When you double click on every slice you can give them link and alt tags, look this image below :
Now when you are finished with your links and tags, click save a new window will appear again, Choose a name for your file, and for Save as Type choose HTML and Images and for Settings choose Custom, a new window will appear again, choose HTML from dropdown menu and select Output XHTML :
In dropdown menu choose Slices and in bottom choose Generate CSS and choose By ID for referenced. Now click ok and save. Your HTML file is ready !
You see how powerful is Photoshop ! With some simple clicks you have a website ready to upload ! If you are familiar with CSS and HTML you can easily customize your code to reach what you want, but again writing code by yourself is very better 
At the end I put all files for you to download… Have a nice time.
Download files (275 Kb)
In a major step forward in search technology, Adobe is working with Google and Yahoo to make Flash files searchable in online search. The project will enable searches on Flash content to return text and links, which can then be indexed, and hence available in search results for the users. Content from a Flash application or even a game or advertisement will be available to search engines, reports InfoWorld. Pages containing a Flash .SWF file will be returned in a search. Google has already implemented this, while Yahoo, ever the laggard, will enable Flash search in a future version, whenever that comes out.
As for images and video, no luck yet. From Google’s own description: "If your Flash files only include images, we will not recognize or index any text that may appear in those images. Similarly, we do not generate any anchor text for Flash buttons which target some URL, but which have no associated text. Also note that we do not index FLV files, such as the videos that play on YouTube, because these files contain no text elements."
Source : Neowin
I have talked about it in my previous posts a lot that use simplicity in web designing is always a good choice, users always want to get to what they want as soon as it is possible, they don’t have time for viewing extra stuff that are not useful for them…
I found an article about this problem from vnuet.com site that I think if you read yourself you will get it better :
Web content management firm SDL Tridion has released the results of its research into what elements of web site design most turn off Internet users, coming in top is pop up advertising.
Seventy-eight percents of respondents said that this type of advertising was the most frustrating web experience, complaining that ads appeared at inappropriate times and were difficult to get rid off.
SDL said that this kind of annoyance was indicative of what it called "bimbo web design", saying that sites were often "attractive, but with no substance."
“First impressions count and no company wants bimbo characteristics on its website,” said Erik Aeyelts Averink, President SDL Tridion. “All ‘fluff’ and no content drives web site users mad. Don’t push customers away and annoy them for no reason.”
Other complaints included the use of long introductions to web sites that cannot be turned off, the requirement to download new applications to view elements of a page, and a requirement to hand over a lot of personal information just to access company details.
“Companies need to ensure they aren’t alienating web users. The Internet is often the first port of call for research and a web site deserves the same time and effort spent on other marketing materials. If companies continue in this way they will lose not only customers, but reputation" added, Averink.
Source : vnuent.com
Webdesignerwall web site has collected a very nice gallery of new web site design trends in 2008, which includes pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds, vintage and retro styles.
Its very good source for web designers to get inspired by some of new designs around the world of web. Check this article here…
I have read an article about SEO for designers in webdesignerwall web site, I think it is very important for every web designer to know about SEO, it will helps so much for reaching your goals in web designing. So if you want a good article about SEO and web designing take a look at this address :
http://www.webdesignerwall.com/general/seo-guide-for-designers/
In the first part I have told you how can you make a HTML web page from a Photoshop template, Now in this part I am going to tell you how can you make a CSS file for that HTML file and finishing this web site. If you want you can see the first part here.
Building CSS File
First I set the general settings for the page, like font, font size, color and… :
*, body, html {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:0;
}Now if you look at the HTML file you can see that we have a container DIV which surrounds all of our elements in the page. So I can easily make it the size I need, also I give it a 10px margin to have some space from the top of the browser window :
#container {
margin:10px auto;
border:2px solid #000000;
width:800px;
}Ok, the header DIV in Photoshop file has 150px height and its background color code is 99cc66 :
#header {
background-color:#99cc66;
height:150px;
}And for the title header :
#header_title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:34px;
color:#FFFFFF;
padding:10px 0 0 20px;
}Slogan :
#slogan {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
padding:5px 20px;
color:#FFFFFF;
}For building the navigation I use the method that previously I write a tutorial about, you can check it here :
ul, li {
list-style:none;
}
#navigation {
margin:20px 0 0 0;
padding:0 10px;
}
#main_nav li{
display:inline;
margin:0 20px;
}
#home, #about, #portfolio, #services, #contact{
position:relative;
}
#home a, #about a, #portfolio a, #services a, #contact a {
text-align:center;
padding:5px 25px;
border:2px solid #FFFFFF;
background-color:#009999;
text-decoration:none;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
}
#home a:hover, #about a:hover, #portfolio a:hover, #services a:hover, #contact a:hover {
background-color:#000000;
}I need 450px width for content DIV, also I have added 25px padding all around it, and it should be left float :
#content {
width:450px;
padding:25px;
float:left;
}And for content header :
#content_header {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
padding:0 0 10px 0;
}For sidebar DIV I give it 250px width and 300px height, and it should be right float :
#sidebar {
text-align:center;
background-color:#009999;
border:2px solid #000000;
margin:25px 20px 30px 0;
width:250px;
height:300px;
float:right;
}Recent works title :
#recent_work_title {
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
font-size:18px;
padding:10px 0;
}Images of portfolio and mouse over effect :
.portfolio_image img {
border:2px solid #99cc66;
margin:5px;
}
.portfolio_image img:hover {
border:2px solid #000000;
}
And finally site info DIV which is similar to navigation part :
#siteinfo {
text-align:right;
clear:both;
height:50px;
background-color:#000000;
color:#FFFFFF;
padding:5px;
}
#siteinfo_title {
padding:5px;
}
#siteinfo_nav li {
display:inline;
}
#siteinfo_nav li a {
padding:5px;
text-decoration:none;
color:#FFFFFF;
}
#siteinfo_nav li a:hover {
text-decoration: underline;
}You can how can you easily make a valid (X)HTML/CSS web site with a designed Photoshop template, also your code is very readable…
You can download all files from this link. (13 Kb, RAR File)
One of the important objects that web designers need to know is to make a valid (X)HTML and CSS website with a designed template from Photoshop or other designing softwares. In this tutorial I am going to show how can you build a valid website with a template that I have designed in Photoshop. Please note that this tutorial is in two sections, first one is for making the HTML one and second one is for making the styles with CSS.
Dividing The Template
If you look at the websites, you can see that most of them are following a fixed structure, maybe in some cases you see that a website has more elements or less. When you are designing a website template you should note that arranging these elements is very important, if you look at this picture you will understand :
This simple template was made in Photoshop, if you look you will see that this has a division for Header, a division for Navigation, a division for Content, a division for Sidebar and a division for Site Info (or Footer). In some cases maybe you see that a website has more sidebars or other elements. Now look at this picture :
In this picture I have divided the template to the sections that I have mentioned above, now we can easily make a HTML file with this picture. (You can see larger images by clicking on them)
Building HTML File
We begin with the top of the picture, the first section is Header, so we can easily make a DIV tag for Header and give it an ID, We use to build other DIVs for other sections :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>In building a website which you want to be a Valid (X)HTML/CSS site and have a good SEO, you should bring all those elements that you have designed in the template, for example if you look at the template you will see that I have put a large text for website title (Welcome to my Site), so we can easily use H1 tag to create this text, and then we will create the style for it later. With this method at the end you will see that your website has a great readability which is very good for screen readers, also it is very understandable even without any styles and graphics.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
</head>
<body>
<div id="container">
<div id="header">
<h1 id="header_title"> Welcome to my Site </h1>
<h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>Giving an ID is very useful, later you can easily give any style to your HTML tags, you should keep this note in mind that you only can use each ID for one time. Now for Navigation we can use ul and li tags :
<div id="navigation">
<ul id="main_nav">
<li id="home"><a href="#" title="home">home</a></li>
<li id="about"><a href="#" title="about">about</a></li>
<li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
<li id="services"><a href="#" title="services">services</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
</ul>
</div>Put the code in Navigation DIV, Now Content DIV, we need H1 tag for this section, also because we have some paragraphs we need p tag too :
<div id="content">
<h1 id="content_header"> What Can I Do For You ? </h1>
<p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>Now for the Sidebar section, we need to put 2 images for our portfolio, so we need img tag :
<div id="sidebar">
<h3 id="recent_work_title"> My Recent Works </h3>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
<div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
</div>I have used another DIV in this section because we have 2 images which has same style, and I gave it a CLASS not ID.
And finally the Site Info is same as navigation section :
<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
<ul id="siteinfo_nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
</div>
</div>Building a HTML file for our website is complete, now you can save this file and view it in your browser, as I told you before this file has a great readability without styles too, you can easily understand the website structure with this file.
In the next tutorial I will show you how to make CSS for this HTML file… Good Luck…
Final Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1 id="header_title"> Welcome to my Site </h1>
<h2 id="slogan"> A Webdesigner Portfolio </h2>
<div id="navigation">
<ul id="main_nav">
<li id="home"><a href="#" title="home">home</a></li>
<li id="about"><a href="#" title="about">about</a></li>
<li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
<li id="services"><a href="#" title="services">services</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
</ul>
</div>
</div>
<div id="content">
<h1 id="content_header"> What Can I Do For You ? </h1>
<p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.
Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.
Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.
Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.
Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>
<div id="sidebar">
<h3 id="recent_work_title"> My Recent Works </h3>
<div class="portfolio_image"> <a href="#"><img src="images/portfolio_1.jpg" alt="Image 1" width="104" height="104"></a> </div>
<div class="portfolio_image"> <a href="#"><img src="images/portfolio_2.jpg" alt="Image 2" width="104" height="104"></a> </div>
</div>
<div id="siteinfo">
<h4 id="siteinfo_title"> www.mysite.com </h4>
<ul id="siteinfo_nav">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a></li>
<li><a href="#" title="services">services</a></li>
<li><a href="#" title="contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>
As I said before, Validating a web site is an important step in web designing. But when we want to put Flash contents in our web site, validation will be failed. There are some ways to prevent this error, the method I suggest is to use UFO object.
First download UFO from this link.
Next step is to create a new (X)HTML document. Create a placeholder and give it an unique ID. Look at this code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
</head>
<body>
<div id="ufo">
<p>Place Flash Content Here</p>
</div>
</body>
</html>In next step we should link the UFO script to our page, please note that the address of the UFO script is right :
<script src="ufo.js" type="text/javascript"></script>Then we should create an object for each of our Flash contents, look at this code :
<script type="text/javascript">
var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
majorversion:"6", build:"40" };
</script> In next step we should call UFO for each of Flash objects, we use the unique ID that we create in first step in our (X)HTML document :
UFO.create(FO, "ufo");We put this code at the end of our script code.
Final Code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
majorversion:"6", build:"40" };
UFO.create(FO, "ufo");
</script>
</head>
<body>
<div id="ufo">
<p>Place Flash Content Here</p>
</div>
</body>
</html>Usually you need only these parameters that I used in this code. movie parameter get the address of your swf file, width and height parameters get the dimension of your document, majorversion and build parameters get the version of your swf file. There are other optional parameters which you can see in the UFO website. Please note that the programmers of this script wont continue this project, maybe you like to try other scripts, SWFObject is another method for placing Flash files in your document.
One of the most important parts in every web site is its navigation system. Its better that navigation system follow these rules :
- Tell me where I am now
- I can easily find the difference between normal text and hyperlinks
- Tell me where I can go from here
- Tell me where I was before
- I should know what will happen if I click the link
Navigation should be somewhere that user can easily find it, Usually in Web 2.0 designs it is on top of the web site where the header is, and it is better that you follow this rule too.
If it is possible for you try to not use complicated menus with so many links and sub menus, try to guide user to reach all places of the web site with least menu links. Users usually lose their path with complicated menus and leave the site.
One of the most not to do is that try not to use flash menus, as I said before menus are the main part of the web site, and if a user couldn’t see the menu, simply he/she will lock in first place and cant go any further and leave the site. Also try to avoid DHTML and Javascripts menus. Maybe someone has disabled its javascript ! One of the other things that you should avoid is not to put only pictures for links (Rollovers), when user roll over it then the text appears, there is no standard for telling that this specific picture guide people to "About Us" page ! If you want to put icons for links, always put texts beside them.
And in the last, remember that simple menus are best for most of the users, always use simple words for links and don’t make users think about the meaning of menu word !
