Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing your course in Moodle<br />CSS + Moodle HTML Editor <br />2 and 3 columns <br />Layouts with CSS<br />framework<...
CSS Framework – what is it???<br /><ul><li>With CSS Framework you don’t need to design your page from scratch. It’s a set ...
2-columns, 3-columns, 5-columns, columns in column… Create any layout you want.
More about popular CSS Frameworks: http://www.smashingmagazine.com</li></ul>http://moodle.site5.com<br />
Using CSS in Moodle course<br /><ul><li>Use CSS framework to create CSS code. We used 960 grid system, http://960.gs.
Upcoming SlideShare
Loading in …5
×

Simple designing in moodle

How to create various layouts in Moodle HTML Editor

  • Be the first to comment

  • Be the first to like this

Simple designing in moodle

  1. 1. Designing your course in Moodle<br />CSS + Moodle HTML Editor <br />2 and 3 columns <br />Layouts with CSS<br />framework<br />http://moodle.site5.com<br />
  2. 2. CSS Framework – what is it???<br /><ul><li>With CSS Framework you don’t need to design your page from scratch. It’s a set of standard classes that can be reused from page to page.
  3. 3. 2-columns, 3-columns, 5-columns, columns in column… Create any layout you want.
  4. 4. More about popular CSS Frameworks: http://www.smashingmagazine.com</li></ul>http://moodle.site5.com<br />
  5. 5. Using CSS in Moodle course<br /><ul><li>Use CSS framework to create CSS code. We used 960 grid system, http://960.gs.
  6. 6. Create a structure of the page
  7. 7. In your HTML page place CSS code between tags <style type=“text/css”>…..</style> before </head>
  8. 8. Now in <body> put and combine right blocks (<div class = “grid-12”>). </li></ul>http://moodle.site5.com<br />
  9. 9. Getting your page done in Moodle<br /><ul><li>Add HTML Page in Moodle (Course – Add a Resource)
  10. 10. In Compose Web Page Set Toggle HTML Source <> and place all HTML code of your page. If your page contains images upload them into Files and link manually. </li></ul>http://moodle.site5.com<br />
  11. 11. Thanks!<br />Yulia A Ivanova, project manager <br />Ya.ivanova@gmail.com<br />http://moodle.site5.com<br />http://moodle.site5.com<br />

×