Planning a Site
Here is a description of the main steps in the process that I normally adopt when creating a new site:
1. Think long and hard about exactly what it to be published, how it is to be broken down into pages, and how navigation between those pages will work. (If necessary, map it all out with pencil and paper!)
2. Think about your page design. Make sure you understand the fundamental difference between paper and electronic documents, in particular how text and graphics resize and re-flow in different sized windows. If necessary, create a mock up. Test various colour schemes, font sizes, and other aspects that will affect the page's appearance. Be sure to include all possible elements, headings, paragraphs, menu buttons, lists etc, that the site will need to include. (Doesn't matter how much nasty "drag-select" technique is used at this stage!)
3. If you made a mock up, start again from scratch, this time, being careful to place all styling of the headings, paragraphs, lists, tables, forms, etc that will be used in an external style sheet. Save this page as "master.html", with the accompanying "style.css" file.
Once you are creating what will become the live site, rather than electronically sketching out the site's design, you will never drag across content in order to select it to adjust its appearance. All styling will be done by placing the content in an appropriate block element which may additionally have an ID or Class attached to it.
The master page will contain only fixed content to appear on every page, e.g. navigation and menu bars, company logos. Depending on the design, it may also need to include some dummy text or graphic image to remind you of some feature of your design that won't appear on every page of the site or to ensure a particular element of the design shows up on the master page.
In some cases, where a site has some pages of radically different structure from the majority, then you may need an "alternative master" file. For example, a site which has mainly text content, but also contains a photograph gallery, then you may need a variant of the master page to cope with the inevitable fixed-width nature of image files. Such an alternative may also be required for sites which present a lot of tabular data of fixed width. The "altmaster.html" file will, of course, link to the same original "style.css" file.
4. Create a copy of "master.html" called "index.html" and use it to create your home page. Create further copies of either master.html or altmaster.html, as necessary, to generate any further pages.
5. Upload the lot to your hosting service!
As you can see from all this. The time consuming bit is always going to be planning the structure of the site and coming up with the design (i.e. preparing the template - the master.html and style.css file). In particular, you will need to pay special attention to site navigation and any menu systems. A good rule of thumb is that no page should be more than three clicks from another.
There is a tendency with beginners to want to get straight into generating the content, but without a lot of experience, this always produces messy awkward amateurish looking sites with no consistency from page to page and a nightmare to find your way around.
Templates are a very necessary part of the web site creation process but, as you can see from the above, a template facility within the software isn't. Grabbing a pre-designed template from the web is rarely a quick solution, as you will need a full understanding of a template's structure to take best advantage of it.
Page updated: 16 October 2008