Guidance for creating and editing website pages
Lesson 1 - Basic Principles
You will first need to download and install the following freeware programme:
You can get it from: http://bluegriffon.org
The basic (without licence and technical support) version is completely free.
It is a HTML 5.0 capable (current website code) WYSIWYG (What You See Is What You Get) editor.
Install this program onto your computer. When you start the programme you should see this:
Go to the top left-hand corner and click on 'Open':
Copy and paste this address:
http://birnbeckregenerationtrust.org.uk/newwebpage.html
Click 'OK'.
This is an almost blank test or template page which exists on the BRT website server.
(N.B. You cannot alter, damage or otherwise affect the original server file in any way - you have simply created a local editable copy. If you mess it up - simply reload and start again.)
You can also view the page directly, you can click on it here:
http://birnbeckregenerationtrust.org.uk/newwebpage/html
You will now see this - the page, now called up from the server, is loaded into the BlueGriffon WYSIWYG editor:
(N.B. ANY BRT website page which currently exists on the website can be called up this way, just by pasting in the correct URL (Universal Resource Locator) - its normal internet web address.)
The most commonly used modifiers, bold, italic and underline, are found here:
Many other text editing tools, as commonly seen in MS Word etc. are found on the same sidebar.
Five different heading sizes (and positions) are already defined on the server (in a CSS 3.0 style sheet).
The headings are already preset for colour, font and size. You can change these specific attributes in the editor (for example - by using the sidebar 'colour' icon directly next to Heading 5 here on the drop-down box) but you don't need to:
Above the blue-highlighted 'Heading 1' tab can be seen the two default page states, 'Body Text' and 'Paragraph'. 'Body Text' gives narrower line spacing than 'Paragraph'. Nearly all existing BRT web pages use paragraphs for default spacing purposes - images can also be placed in individual paragraphs for correct spacing. Both of these setting are predefined on the server CSS sheet to set the correct edge spacing:
Fonts can be defined here, although by default the website uses the 'Droid Sans', Tahoma, Arial, sans-serif' and 'Droid Sans', Verdana, Tahoma, sans-serif' font-families, as well as the 'Yanone Kaffeesatz' font for the title logo (with the differently arranged letter 'k'). Because the page you downloaded already has the default fonts embedded you do not need to change anything here.
Images are inserted into the page via the icon/button as circled below:
A pop-up box will appear, and you will need to navigate to where the image is stored on your computer.
This will need to be initially postioned in a new (My Documents > Website > images) folder - see further below for details about this folder structure.
It is essential that your image is no wider than 760 pixels and is in .jpg format. It will flow off the edge of the page if it is bigger than this, although you can resize it to below this if necessary.
It is considered to be good practice to fill in the box entitled 'Alternate text' with a short description of the image. Multiple images on the same page should be numbered. In the event of the image not being displayed for some reason (mis-naming or the wrong photo format - for example .png, .tiff, .bmp etc.) a note showing the alternate text will then appear on the page to indicate where it should be:
A preview of the image will also appear in the box.
Clicking 'OK' will add the image to the page:
The image can then be positioned (or resized) on the screen to wherever you want it to display by means of the alignment buttons in the left-hand sidebar (which highlight in blue when selected).
Further paragraphs or other images can then be added below sequentially:
When the page is complete you will need to save it to your computer - you cannot send it to the website server directly:
It is best to have a pre-prepared folder tree on your computer to place your newly created page into.
You will need to rename the file in an appropriate way - it was created as '..../newwebpage' but will now need an identity such as '..../something else'. For instance in this case it could be '..../HElogo'.
All separate pages need unique file names.
A suggested folder structure for local publishing (on and from your own computer for your viewing only) of web pages for your own review and testing purposes is as follows (in Win 7 - other Windows operating systems are similar):
Documents > My Documents > Website > images > (with sub-folders as needed).
Place ('Save' or 'Save as') your newly renamed file in the 'Website' folder
