Archive for the 'Website development' Category

Setting up the website template

Thursday, September 7th, 2006

I have developed my own CSS based template that gives me a clean layout and flexibility to control all the site colours, fonts, links, spacing etc. from a central CSS file. The CSS layout also allows me to get all of the important page content near the top of the code rather than being blelow loads of table settings and the navigation links - important for search engine spiders and page ranking.I

wil talk more about templates later and maybe make them available to others as part of the handbook - I have bought and used loads of other peoples templates and never really got quite what I wanted so I have taken the best of all thwenothers and tweaked then to get what I think is a really usable, good looking and SE Optimised site template.Critically

, my template allows me to build other template pages that are “nested” within it whcih is great when using variuos page building software as any changes I make to the global template or style sheet will be replicated right through the live site, even the pages built with the automated systems (more about this another day).

I use Dreamweaver to build my sites so it is always easy to add new pages based on the template and any changes to the template will update in all site pages based on that template.
So, having chosen the most appropriate template, I copy it into a new local directory for the site and then edit it to make the following changes:

  1. Choose an appropriate header graphic from my collection, edit it to change the text and site url and any colours I want changed, save as an original .psd and also as a .jpg in the site images directory (I use a standard site of 700 pixels wide in my site templates to keep things simple;
  2. Change the image link and target url in the template. Target url is the main domain as a full url, e.g. http://www.milsoms.com - it has to be like this as it will later be used in various sub-folders so a relative address would be no good.
  3. Select the main colours that will be used for the site (usually taken from the header graphic) and specify them in various places in the CSS file
  4. Change the target urls on the page - breadcrumb trail, home link, footer copyright link
  5. Change the default page title, meta description and meta keywords (they are editable areas and can be changed on individual pages built from the template later)
  6. Obtain or create an image to go beside the main Google Adsense large rectangle
  7. Create a new Adsense channel for this site and recreate the adsense code (link block, rectangle and search box) making sure the text colours match the rest of the site. Note that both the background and border colours in the Adlink block in the left menu panel need to be changed to match the background colour
  8. Set up a Google analytics account for the site and change the tracking code in the template. it can take a while for Google to visit the site and check the code (up to 24 hours) so leave it for a while then make sure it is showing as ticked and receiving data.
  9. Create a basic index.htm page from the template and upload to check that the Google tracking is working
  10. Create a sitemap.htm page from the template and give it a heading etc. No content yet as it has not been created but there is a link to it from the home page and I do not want any broken links on the site.

Upload the index and sitemap pages and associated files (images, stylesheet) and see how it looks. Correct any problems with the template and re-upload.

That’s it - we are ready to start building more pages.