1. Sun Tzu – The Art of SEO Part 5
Subtitle: How to design a static page with a menu.
So far in Neogain’s ‘The Art of War’ series we have covered SEO and CMS. Now we
move onto design, but taking SEO and CMS into consideration. In part three of the
series we briefly looked at CMS choices and whether a CMS could actually be right for
you. This article will cover creating a non-CMS based website.
“He will conquer who has learnt the artifice of deviation.”
It could be considered that a non-CMS based website is outdated, but if all you want is
a small selection of pages, which are rarely updated, then creating one isn’t too hard
and can provide you with a fast loading website not dependant on a database server
such as MySQL.
“Do not move up-stream to meet the enemy.”
You need to choose what is right for you and not mirror your competitors. A static flat
file based website will help you free up time to work on SEO and other marketing
strategies.
The following content is an example of a basic static file
website with a menu system:
2. Using a previous Neogain article, I created index.php and style.css files using the
examples provided at: http://www.neogain.com/how-to-design-and-setup-a-holding-
page
Before:
After:
Now to convert these files into a basic multi-page website, both index.php and style.css
need modifying. The index.php then afterwards can be copied to create further pages.
3. In the style.css file I created left and right div layers
#left { width:20%; float:left; padding:2%;}
#right { width: 70%; float: right; padding:2%;}
Also in the style file I modified the code to include an extremely
simple menu
#menu li { text-docoration:none ; padding:0px 5px 5px
5px; list-style-type:none; }
Also the #main div layer height was decreased
height:480px;
As the menu, left and right div layers did not have their active layers configured, they
inherited from the #main layer. In the index.php file I then modified to include the new
div layers and the simple menu.
Below is an example of the full modified index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title> </title>
<meta name="description" content=" " />
<meta name="keywords" content=" />
<meta name="author" content=" " />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
5. How to create additional pages
You simply copy the index.php page and use the same code for each new page, with all
referring to your style.css . You then make sure the new pages all share the same menu
with associated links.
The Meta Tags
Don’t forget for each individual page to set the meta tags, as this will help with your
search engine optimisation.
This isn’t a perfect template and requires further modification if you want to create
lengthy pages. However why not hire Neogain to help you with your website project?
If you need help designing or modifying a website, then
please hire Neogain.
