Instructions and Guidance for Site Maintenance
Using Font Styles - following styles are available. If none of these is
suitable, use Normal text, or the Formatted style, then apply the attributes you
want, i.e. bold, font colour etc. Try to minimise the application of attributes,
as this will cause formatting problems if we ever decide to change the site
styles.
H1 text - used for main headings
H2 text - used for first level sub headings
H3 text - used for most simple text requirements inside tables as it
spaces off the table edges correctly. However you can use it anywhere.
H4 text- (used for most simple text requirements outside of tables. It
spaces the text correctly off the page edges etc. otherwise it is just the same
as normal text.
H5 - used for Disclaimers and other standard links and content, though can
be use for picture annotations etc.
H6 Text - larger and bolder text normally used for second level sub headings
.link_text style is used for the bulleted news lists
.picture_caption style is used for photo captions
Normal text - is not indented etc. has some uses.
Note : some symbols like £ may not display properly unless you embed the
appropriate html code. For example to get £ to display you must go to the html
data, and replace the £ symbol with £
I can provide a whole list of special symbols if need be, or enter them for
you.
Photographs
Here are dummy photos, just to give you an idea of how large the pixel sizes
are on the display. Photos should be set to 72 dpi, and display pro rata to the
pixel size. So a photo of 400x150 would be twice as wide on the display to those
shown below. Bear in mind that you should ideally not have pages wider than
about 600 pixels. The photos below take 350 pixels, plus the cell padding of 10 pixels
per edge, so 390 pixels just for the photos.
 |
 |
Padding on this table set to 10 pixels, cell spacing is 0. Left hand
cell set to 150 pixels wide, right hand 200 pixels. This cell has no
specified width. Table width set to 100%.
Borders are
on (1 pixel) so you can see the table outline.
Cell alignment set to left and top.
This text is style H3.
|
Resizing procedure for photos (from high resolution sources)
First crop the original, so that the subject matter is what you want. Take
note of the aspect ratio !!. Say the ratio is 0.75 (as the example above). At
this stage from a high resolution source, the picture will have far too large in
terms of pixels. Work out what pixel size you want the resulting picture to be
on screen, say 200x150 as above, and resize the image to these pixel dimensions.
Because you know the aspect ratio, the pixel sizes should work out correctly.
The next step is to adjust colour, brightness and contrast if necessary. You
can also adjust sharpness using the 'unsharp mask', but care is needed !.
The last step is to save using the right amount of compression. JPEG is a
lossy format, so the higher the compression, the worse the picture qulaity on
screen, but the smaller the file size. Large file sizes will make the pages slow
to load, so a compromise has to be struck. In the jpeg save settings you can
adjust the compression applied. Compression of up to 20 generally OK, higher
compression results in a obviously degraded picture.
Lines etc.
Standard horizontal rule on the site is 'dark grey 2 pixels wide, and without
shading.'
Layout
Layout is controlled by means of tables. Normally the table width should be
set to 100%.
Updating Pages
Best to copy the original page first. Work on the copy until you are happy
with the result.
To bring the new page into service simply rename the original .old, then
rename the new file to the same name as the original.
If you have trouble with updates I can always work on the 'copy', for example
to sort out layout problems, and then rename the file to make it 'live'
Links
If you link from one page, to another page on the site, make sure that the
'target' is set to 'same frame' otherwise the target page will not display
correctly.
Links to external sites are best targeted to a 'new window'.
Colin Shead 1st October 2006