FLO Staff Support

This entry relates to styles and layout, in particular the HTML editor.

For reasons of accessibility, usability, universal design and sustainability, you are advised to apply styles that are built into the HTML editor when working with text. Categories of style usage include headings, quotes and other text elements. 

• Use Font colours to highlight a particular word or sentence. The range is limited to meet accessibility guidelines and create consistency
• Use Paragraph styles to create structure for your FLO site. Creating headings and other text styles will help you to meet accessibility guidelines 
  
• Use Styles to draw attention to particular information. This feature will help you to meet usability guidelines

Font colours

The font colour range is limited making it easier to be consistent. These colours ensure the text is readable on the screen. To view this feature you will need to expand the HTML editor menu.

Paragraph styles

Using paragraph styles will ensure that your site looks 'clean' (ie no unnecessary formatting) and consistent. These tools save you time as you don't have to worry about formatting text yourself, and are accessible to users with a sight disability, as their screen reader will be able to make sense of the text. Just as you wouldn't want to read a book that had no chapter headings or subheadings, so web users like 'chunked' text that makes reading easier.

1. In your FLO activity/resource/module, place your cursor where you want the style (eg heading) to appear, and from the toolbar menu, select the Paragraph styles icon 
2. Make a choice from the Paragraph styles menu 
   
   
   
3. Click Save changes once you have finished editing the text 

Styles

These styles can be used to highlight something important that you want students to see (eg guest lecturers, assessment items due, preparation for a workshop). Using an option in the Styles menu will make this information stand out in your FLO site.

Example:

1. In your FLO activity/resource/module, in the HTML editor toolbar click on the Show more buttons icon
   
   
2. Place your cursor where you want the style to appear, and from the toolbar menu select the Styles icon
   
   
3. Make a choice from the drop-down Styles menu
   
   
   
4. Click Save changes once you have finished editing the text