Add your first page

Most of the menu buttons do exactly what you’d expect (just like in Word) - but there are some differences. Remember, the changes you make are turned into HTML code by the content management system. You don’t have as much flexibility as you do in Word - especially over text and image placement as this needs to be more precise.

One of the quirks of using a content management system is line & paragraph breaks:

Usually when you press return on the keyboard you expect to go down just one line e.g. to
here!

When you press return in the website editor you might get more than one line – it thinks that you want a whole new paragraph which goes

here!

To go down just one line, press shift and then enter together.

This affects bullet points and other formatting (e.g. headings & indents). You will usually need to add a paragraph break (enter) before a set of bullet points, headings or indents/ other formatting. If you just use a line break it may carry on the formatting.

Headings

Don’t try and make up your own headings by changing the text size. Instead, highlight the text that you want to be a heading and then choose the heading size from the Paragraph or Format menu. Heading 1 is the biggest heading and your page title should always use Heading 1.

Use Heading 2 and so on for page content headings when you need them. If using Weebly, just drag and drop the title option or choose paragraph with title.

Main text on the page

This will always be Paragraph.

Indenting text

Don’t use the space bar to move text on the page. Don’t use the tab button to move text on the page. Use the Indent buttons instead.

Add your picture

Decide where on the page you would like your picture to appear – click at this point and then upload the picture file to add the picture.

You cannot drag a picture into place like you can in Word.

To change where the picture appears use the alignment options (e.g. left, middle, right).  Right click on the image to get this option (or just click on it in Weebly or Google Sites).

To put space between the text and the picture use the border options (left, right & top, bottom). Some systems use pixels (px) as a form of measurement. 5 to 10 pixels (px) for borders is a good place to start. 

There’s always a bit of trial and error as the changes you make in the content management system might look different on the live website.

When you’re happy with your picture size and border size, make a note of what you chose.

Design issues

You may find that the website looks different in different browsers (e.g. Internet Explorer, Firefox, Chrome).  This is a well-known website design issue. All browsers work differently so they all display the same HTML code (slightly) differently. In addition, computers, tablets and phones have a range of screen sizes, shapes and display settings so do not be too concerned by these minor differences – they are normal.

When should I worry? If something doesn’t work in a different browser e.g. menus or links then it’s time to check your site.

More help with editing

All the free website building packages mentioned on the course include a help section or user guide:

BT community website builder

Google sites 

Weebly.com

Wordpress.com

Getting the website you want is a workshop presentation by Sarah Moss, Voluntary Organisation Support Officer, © Community Action Bradford & District. 

Community Action Bradford & District

Questions?

Get help from the Voluntary Organisation Support Officer team.


Get Adobe Reader