Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sun Tzu _ The Art of Design part 5


Published on

  • Be the first to comment

  • Be the first to like this

Sun Tzu _ The Art of Design part 5

  1. 1. Sun Tzu – The Art of SEO Part 5Subtitle: 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 wemove onto design, but taking SEO and CMS into consideration. In part three of theseries we briefly looked at CMS choices and whether a CMS could actually be right foryou. 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 isa small selection of pages, which are rarely updated, then creating one isn’t too hardand can provide you with a fast loading website not dependant on a database serversuch 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 flatfile based website will help you free up time to work on SEO and other marketingstrategies.The following content is an example of a basic static filewebsite with a menu system:
  2. 2. Using a previous Neogain article, I created index.php and style.css files using theexamples provided at: to convert these files into a basic multi-page website, both index.php and style.cssneed modifying. The index.php then afterwards can be copied to create further pages.
  3. 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 extremelysimple menu#menu li { text-docoration:none ; padding:0px 5px 5px5px; list-style-type:none; }Also the #main div layer height was decreasedheight:480px;As the menu, left and right div layers did not have their active layers configured, theyinherited from the #main layer. In the index.php file I then modified to include the newdiv 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" />
  4. 4. <style type="text/css">a{text-decoration:none;}</style></head><body><div id="wrapper"><div id="title1"><img src="logo.png" alt="logo" align="left" border="4"/></div><div id="main"><div id="left"><div id="menu"><li><b>Main Menu</b></li><li><a href="chocdigestives.php">Choc Digestives</a> </li><li><a href="custardcreams.php">Custard Creams</a> </li><li><a href="gingernuts.php">Ginger Nuts</a> </li></div></div><div id="right"><b>Write your title here</b><BR><P>text</div></div></div><div id="footer" align="center">&copy; 2011 Fill in details here.</div></body></html>
  5. 5. How to create additional pagesYou simply copy the index.php page and use the same code for each new page, with allreferring to your style.css . You then make sure the new pages all share the same menuwith associated links.The Meta TagsDon’t forget for each individual page to set the meta tags, as this will help with yoursearch engine optimisation.This isn’t a perfect template and requires further modification if you want to createlengthy 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.