Moodle: Coloured Boxes James Neill University of Canberra April, 2009

The Problem Moodle site home pages tend to be: Plain Boring Long Navigationally complex

Plain

Boring

Long

Navigationally complex

http://learnonline.canberra.edu.au/course/view.php?id=1414

Boxes and Tables Organisation of content into tables, with judicious use of styling (e.g., colour), can improve the aesthetic and usability of information. A box is simply a single-celled table.

Organisation of content into tables, with judicious use of styling (e.g., colour), can improve the aesthetic and usability of information.

A box is simply a single-celled table.

Link

Cut & paste from word processor Warnings: this can Add excessive code Make it difficult to subsequently edit html Affect style of whole page

Add excessive code

Make it difficult to subsequently edit html

Affect style of whole page

How to Although the Moodle WYSIWIG editing interface can be used, it is probably easier to use an external HTML editor and to edit HTML table code.

HTML editors Free, online: e.g., Online-html-editor.org FOSS: e.g., NVU Proprietary e.g., Microsoft Frontpage

Online-html-editor.org

NVU

Microsoft Frontpage

Example <table width=&quot;100%&quot; cellspacing=&quot;10&quot; cellpadding=&quot;10&quot; bordercolor=&quot;#111111&quot; border=&quot;1&quot; bgcolor=&quot;#ffcc99&quot; style=&quot;border-collapse: collapse;&quot;> <tr> <td width=&quot;100%&quot;>Hi, my name is <a href=&quot;http://learnonline.canberra.edu.au/user/view.php?id=47&quot;>James Neill</a>. </td> </tr> </table>

Also try ... embedding Google Spreadsheets

Also try ... embedding Google Spreadsheets <iframe width=&quot;480&quot; height=&quot;240&quot; frameborder=&quot;0&quot; src=&quot;http://spreadsheets.google.com/pub?key=pQnToDH18C8ZA_wxsiPqIBA&output=html&gid=0&single=true&range=A1:R11&quot;></iframe>