Sun Tzu _ The Art of Design part 5
Upcoming SlideShare
Loading in...5
×
 

Sun Tzu _ The Art of Design part 5

on

  • 352 views

 

Statistics

Views

Total Views
352
Views on SlideShare
352
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sun Tzu _ The Art of Design part 5 Sun Tzu _ The Art of Design part 5 Document Transcript

    • 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:
    • Using a previous Neogain article, I created index.php and style.css files using theexamples provided at: http://www.neogain.com/how-to-design-and-setup-a-holding-pageBefore:After:Now 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.
    • 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" />
    • <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>
    • 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.