Moodle: Coloured Boxes James Neill University of Canberra April, 2009
The Problem Moodle site home pages tend to be: <ul><li>Plain
Boring
Long
Navigationally complex </li></ul>
http://learnonline.canberra.edu.au/course/view.php?id=1414
Boxes and Tables <ul><li>Organisation of content into tables, with judicious use of styling (e.g., colour), can improve th...
A box is simply a single-celled table. </li></ul>
Link
Cut & paste from word processor Warnings: this can <ul><li>Add excessive code
Make it difficult to subsequently edit html
Upcoming SlideShare
Loading in …5
×

Moodle: Coloured Boxes

1,806 views

Published on

Shows how to use html tables to create coloured boxes.

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,806
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Moodle: Coloured Boxes

  1. 1. Moodle: Coloured Boxes James Neill University of Canberra April, 2009
  2. 2. The Problem Moodle site home pages tend to be: <ul><li>Plain
  3. 3. Boring
  4. 4. Long
  5. 5. Navigationally complex </li></ul>
  6. 6. http://learnonline.canberra.edu.au/course/view.php?id=1414
  7. 7. Boxes and Tables <ul><li>Organisation of content into tables, with judicious use of styling (e.g., colour), can improve the aesthetic and usability of information.
  8. 8. A box is simply a single-celled table. </li></ul>
  9. 9. Link
  10. 10. Cut & paste from word processor Warnings: this can <ul><li>Add excessive code
  11. 11. Make it difficult to subsequently edit html
  12. 12. Affect style of whole page </li></ul>
  13. 13. 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.
  14. 14. HTML editors Free, online: e.g., <ul><li>Online-html-editor.org </li></ul>FOSS: e.g., <ul><li>NVU </li></ul>Proprietary e.g., <ul><li>Microsoft Frontpage </li></ul>
  15. 15. 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>
  16. 16. Also try ... embedding Google Spreadsheets
  17. 17. 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>

×