Recomendados
Recomendados
Más contenido relacionado
Último
Último (12)
Destacado
Destacado (20)
Sun Tzu _ The Art of Design part 5
- 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" />
- 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">© 2011 Fill in details here.</div> </body> </html>
- 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.