New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Moodle 2.1 Essential Training for Teachers
Illustration by

Creating a custom web page


From:

Moodle 2.1 Essential Training for Teachers

with Chris Mattia

Video: Creating a custom web page

Many times the content that you want to post to your students has not been created yet and you need to create it yourself. In order to do this, you can go ahead and create your own web pages by using the resource type of page. In this movie, we're going to go through creating a new page inside of your Moodle course that the students can read to learn about the coral zooxanthellae symbiosis, or the relationship between the coral and the plants that live inside of their tissues. To do this, make sure you have editing turned on and then go ahead and scroll down to the bottom of the block for Week 1 and click the Add a resource menu and choose Page from the dropdown menu.
Expand all | Collapse all
  1. 3m 26s
    1. Welcome
      1m 14s
    2. Course overview
      1m 34s
    3. Using the exercise files
      38s
  2. 1h 10m
    1. What you need to get started
      4m 27s
    2. Installing Moodle on a Mac
      9m 23s
    3. Configuring Moodle for the Mac
      5m 29s
    4. Installing Moodle on a Windows computer
      11m 35s
    5. Configuring Moodle for Windows
      7m 21s
    6. Creating a custom theme
      10m 0s
    7. Creating user accounts
      6m 4s
    8. Creating a new course
      6m 35s
    9. Just enough site administration
      9m 51s
  3. 1h 20m
    1. Logging in and getting oriented
      4m 23s
    2. Managing private files
      3m 41s
    3. Customizing your profile
      8m 26s
    4. Customizing course settings
      10m 14s
    5. Editing the header block
      5m 18s
    6. Posting a course syllabus
      3m 43s
    7. Communicating news to students
      4m 4s
    8. Managing files and folders
      6m 14s
    9. Posting lecture slides
      4m 37s
    10. Organizing course content
      12m 31s
    11. Setting up the Gradebook
      5m 4s
    12. Creating a simple assignment
      9m 45s
    13. Messaging students
      2m 49s
  4. 26m 45s
    1. HTML Editor overview
      5m 9s
    2. Formatting text
      5m 10s
    3. Creating internal links
      3m 14s
    4. Creating external links
      2m 42s
    5. Inserting local pictures with HTML
      4m 26s
    6. Creating equations
      6m 4s
  5. 47m 28s
    1. Preparing images
      5m 19s
    2. Posting image files
      3m 18s
    3. Posting a photo gallery
      3m 23s
    4. Creating header graphics in Fireworks
      7m 58s
    5. Preparing audio
      9m 41s
    6. Posting audio files
      4m 49s
    7. Preparing video
      7m 21s
    8. Posting QuickTime video as .mov files
      2m 43s
    9. Posting Flash video as .flv files
      2m 56s
  6. 36m 9s
    1. Understanding repositories
      3m 5s
    2. Configuring a Dropbox repository
      6m 13s
    3. Using a Dropbox repository
      4m 43s
    4. Configuring a Google Docs repository
      1m 15s
    5. Using a Google Docs repository
      5m 20s
    6. Configuring a Flickr repository
      6m 13s
    7. Using a Flickr repository
      4m 5s
    8. Configuring the YouTube videos repository
      1m 7s
    9. Using the YouTube videos repository
      4m 8s
  7. 38m 50s
    1. Understanding resources and activities
      1m 9s
    2. Posting a file or document
      8m 36s
    3. Displaying a folder of documents
      4m 33s
    4. Using a label to bring your course to life
      6m 42s
    5. Creating a custom web page
      10m 33s
    6. Posting a URL for a web resource
      7m 17s
  8. 25m 51s
    1. Assignments overview
      1m 43s
    2. Advanced uploading of files assignment
      11m 32s
    3. Online text assignment
      4m 20s
    4. Uploading a single file assignment
      3m 42s
    5. Offline activity assignment
      3m 21s
    6. Assignment and Gradebook interactions
      1m 13s
  9. 35m 34s
    1. Creating a live chat room
      4m 57s
    2. Understanding Choice, Feedback, and Survey activities
      1m 23s
    3. Creating a Choice activity
      5m 10s
    4. Creating a customized Feedback activity
      4m 47s
    5. Adding a multiple choice question
      3m 14s
    6. Adding a dependent followup question
      3m 7s
    7. Adding a rating question
      2m 39s
    8. Adding an open response question
      2m 36s
    9. Analyzing Feedback results
      4m 16s
    10. Adding a standardized survey
      3m 25s
  10. 17m 18s
    1. Creating a main glossary
      5m 29s
    2. Adding concepts to the glossary
      2m 53s
    3. Enabling glossary auto-linking
      2m 53s
    4. Creating a secondary glossary
      6m 3s
  11. 11m 56s
    1. Creating a forum
      4m 40s
    2. Seeding a forum with questions
      3m 9s
    3. Participating in a forum
      4m 7s
  12. 31m 24s
    1. Creating a wiki
      4m 15s
    2. Wiki editing basics
      5m 28s
    3. Creating new pages
      2m 47s
    4. Creating lists
      3m 42s
    5. Adding images
      3m 53s
    6. Creating external links
      4m 24s
    7. Creating a table
      6m 55s
  13. 1h 4m
    1. Online assessment overview
      1m 20s
    2. Creating question pool categories
      2m 24s
    3. Creating a first question
      7m 10s
    4. Creating true/false questions
      3m 1s
    5. Creating multiple choice questions
      8m 22s
    6. Creating short answer questions
      8m 19s
    7. Creating essay questions
      4m 59s
    8. Creating match questions
      7m 10s
    9. Creating a quiz
      9m 0s
    10. Adding questions to a quiz
      2m 20s
    11. Changing the order of questions
      3m 1s
    12. Assigning quiz points
      1m 35s
    13. Previewing a finished quiz
      5m 50s
  14. 39m 38s
    1. Gradebook overview
      4m 53s
    2. Moving an assignment into a category
      1m 33s
    3. Completing assignments as a student
      11m 31s
    4. Grading assignments
      5m 5s
    5. Using quick grading
      1m 28s
    6. Grading assignments with uploaded files
      1m 58s
    7. Grading offline assignments
      1m 26s
    8. Grading an online quiz
      5m 1s
    9. Exporting grades to Excel
      2m 48s
    10. Importing grades from Excel
      3m 55s
  15. 9m 55s
    1. Calendars and events overview
      4m 8s
    2. Creating a new event
      2m 40s
    3. Creating a repeating event
      3m 7s
  16. 50m 41s
    1. Course administration overview
      2m 54s
    2. Managing course settings
      9m 5s
    3. Enabling completion tracking
      2m 20s
    4. Setting tracking for resources and activities
      3m 38s
    5. Managing tracking settings
      3m 51s
    6. Reporting on course tracking
      1m 32s
    7. Managing user roles
      4m 2s
    8. Backing up your course
      3m 36s
    9. Restoring data from a backup
      4m 50s
    10. Restoring a Moodle 1.9 course into Moodle 2.1
      6m 25s
    11. Importing content to another course
      3m 46s
    12. Resetting a course
      4m 42s
  17. 2m 6s
    1. Additional resources
      1m 37s
    2. Goodbye
      29s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Moodle 2.1 Essential Training for Teachers
9h 53m Beginner Aug 22, 2011

Viewers: in countries Watching now:

In this course, author Chris Mattia helps educators create online courses that complement classroom-based instruction and foster student interaction using the free learning management system Moodle. The course details the basics of setting up a test environment, disseminating course information, creating forums, and assessing student progress. Tutorials on building course materials with Moodle's built-in HTML editor, preparing and posting various types of media, uploading assignments, and evaluating tests automatically are also included.

Topics include:
  • Installing and configuring Moodle
  • Creating assignments students can complete online
  • Posting instructions on the course home page
  • Messaging students
  • Configuring Dropbox, Google Docs, Flickr, and YouTube repositories
  • Creating a custom course web page
  • Building a live chat room
  • Designing surveys
  • Setting up course-specific glossaries
  • Seeding a forum with questions
  • Creating a wiki for students to contribute content
  • Developing multimedia exams to assess course comprehension
  • Handling course administration and settings
  • Backing up and restoring a course
  • Importing a Moodle 1.9 course into Moodle 2
Subjects:
Elearning Teacher Tools Education Educational Technology Higher Education LMS
Software:
Moodle
Author:
Chris Mattia

Creating a custom web page

Many times the content that you want to post to your students has not been created yet and you need to create it yourself. In order to do this, you can go ahead and create your own web pages by using the resource type of page. In this movie, we're going to go through creating a new page inside of your Moodle course that the students can read to learn about the coral zooxanthellae symbiosis, or the relationship between the coral and the plants that live inside of their tissues. To do this, make sure you have editing turned on and then go ahead and scroll down to the bottom of the block for Week 1 and click the Add a resource menu and choose Page from the dropdown menu.

When the Add a new page window opens, let's go ahead and give this file a name. We'll just call this Coral Zooxanthellae Symbiosis. In the Description, go ahead and type in "Learn about the interactions between corals and their zooxanthellae." Go ahead and scroll down to the Page content section.

This is where our web page is going to be composed. Now, normally we could just go ahead and begin typing directly into here, but I've already gone ahead and done a lot of the work for us. So if we go ahead and minimize our browser, in the Chapter 06 exercise files, you should find a file called background_html_formatted.txt. Go ahead and press Command+A, or Ctrl+A, on your keyboard to select all of the contents of this document once you have it open and then press Command+C, or Ctrl+C, to copy the contents of it. Let's go back into our page.

Now don't just paste your content directly into here. If you do, Moodle will attempt to display the HTML code that I've already added to this page content. So in this case, go ahead and click the button that says Edit HTML Source to get to the HTML Source Editor. Now press Command+V, or Ctrl+V, on your keyboard. You can see that there's HTML code that's already embedded that will have some of the formatting already started within this document for us. Go ahead and press the Update button and we can see all of the contents of the file flowing into this Page content section.

Now I understand it's a little hard to see all of the contents of this page, so let's go ahead and toggle to the fullscreen editing mode by clicking the button here in the upper right-hand corner. Now we can see all of the contents of the page. If we click inside of a few of these areas, we can see for instance that the Coral Zooxanthellae Symbiosis header has been renamed to Heading 1. If we want to change the color of that heading, we can simply select the text, hit the dropdown menu for font color, hit More colors, go ahead and type in our heading color that we've been using all along, which is #990000, hit Apply to apply that color, and we can make the changes directly onto here.

Now let's go ahead and insert an image to add some interest and emphasize some of the points that are contained within this document. Go ahead and click right in front of the first word, Hermatypic corals, so that your cursor is appearing right there. Then go up in the toolbar and click on the button for Insert/edit image. Click the button for Find or upload an image. Then click on the button for Private files. Go into your BIOL432 folder and go into your images folder. Now, in a previous movie we uploaded a bunch of files from our Dropbox folder and they should be in a folder called DropboxImages.

If you don't have access to these files, I've gone ahead and included them in the Chapter 06 exercise files as well for you. So go ahead into that folder, and you'll find a lot more files in here, but the one we're looking for first is called Dichocoenia_stokesii. If you look down in the list, you'll see two listings for them: one that says Dichocoenia_stokesii colony and the other that just says Dichocoenia_stokesii. Go ahead and select on the second one, click the button that says Select this file, and this image should preview for us. For the Image description, we could go ahead and type in the long scientific name, but in this case, we're just interested in showing that this is a coral, so we'll simply type in the Image description Coral.

Go ahead and click the button for Insert and the image appears inside of our page. We have our heading, we have our image, and we have to scroll way down here to find our text. Our image is way oversized for this page. That's not exactly what we were hoping to have. It would be much nicer if our image was a little bit smaller and it was added over onto the right-hand side of the page, so that the text flowed around it. We can also see that our image and our text are butting right up against each other. Go ahead and click one time on the image so you get the bounding box indicating that the image has been selected.

Then click back on the Insert/edit image tool. In Moodle 2.0, this will bring you right back to a series of controls so you can go ahead and you can control how this image is going to flow around the HTML text. Click on the second tab for Appearance. Here we have a bunch of options to control how this image is going to work within our page. Under the Alignment dropdown, go ahead and select Right. We have a preview over here on the right-hand side that's going to show us what our image is going to do with the text. So when we select the Alignment > Right, the image automatically jumps over here to the right-hand side.

The top of the image aligns with the top of the text. Okay, when we look at our dimensions, 323x500, well that seems a little bit large for the size of the text that we have on this page, so let's go ahead and just shrink this dimension down. So select the 323 and let's go ahead and type in 250. When you hit the Tab key over to where the 500 was, you'll notice that your dimension automatically changed to this new 387 setting. Now if your dimension didn't change and it remained 500, simply go ahead and delete the value for 500.

Then when your web browser goes to display the image, it'll simply take the Width parameter and it will auto-adjust that image to whatever size it needs. But since our browser here automatically jumped to 387, we'll go ahead and leave that as is. We want to make sure that the box is checked for Constrain proportions. That way our image will automatically scale appropriately. It won't skew and distort the image. Down here under Vertical space, go ahead and click inside of that box and we'll add a 10-pixel buffer vertically so our text will stay at least 10 pixels away from the image.

Let's do the same thing for Horizontal space and make that 10 also. We can click outside of the box and our preview window adjusts, so we can see that our image now is going to float with a 10-pixel border on all sides of it around the text. Now we're not going to go ahead and add a border; it would be a little weird looking. It would just have a line that would float around the image, and that's not necessary in this case. Okay, these are all the changes that we need to make. Go ahead and hit the Update button and we'll notice that our image now floats over here to the right-hand side. Now if I scroll up, you can see it aligns with the top of our text and it's floating over here nicely.

Okay, let's add one more image into here. Go ahead and scroll down on our page, and let's look for the section for Effects of Eutrophication. Now eutrophication is when more nutrients are being put into the surrounding seawater and the corals are having trouble growing because they're being overcrowded by other invasive species. Well, in this case, let's show a picture that's going to show some of this. So go ahead and click right in front of Tropical oceans, go back up to our Insert/edit image tool, click the Find or upload an image, let's go back into our BIOL432 folder, go back into our images folder, go back into our DropboxImages folder, and here you should find an image called Cliona_langae.

Go ahead and select that image and click the Select this file button. The image appears in here. For the Image description, again we'll simply just type in Coral. Now remember the Image description field is what is going to be displayed if the user is using a screen reader with their browser. Let's go ahead and go directly over to the Appearance tab, and let's make a couple of adjustments here. This time, under Dimensions, let's go ahead and set this to 250. Hit the Tab key and that will auto-adjust down the smaller size. Make sure that Constrain proportions is checked, and again we'll set the Vertical spacing to 10 and the Horizontal spacing to 10 as well.

Go ahead and hit the Insert button and our image appears inside of here. Whoops! We forgot to make it show up on the right-hand side. Once again, click on your image, hit the Edit image tool to go back into the Image Editor, go to Appearance, click the dropdown menu for Alignment, select Right from the dropdown menu, and choose Update. Now our image appears in the right-hand side where we wanted it, the text is flowing around it, and everything is looking pretty good on this page. Go ahead and scroll back up to the top if you want to see what the overall page looks like, and let's return back to our main page by clicking the Toggle fullscreen mode.

This will take us back into our editing page. Go ahead and scroll down to the Options section. The options here are to simply display the name of the page, or we could also display the page description. I'm going to go ahead and leave the default set. For the Common module settings, this is the same as we've seen before. We're going to go ahead and make sure that our students can see this page, so we'll leave it set to Show, and we're not going to set an ID number. Hit the Save and return to course page. Our browser should automatically refresh us back to Week 1, and let's go ahead and move this file up here into our LECTURE MATERIALS section.

So scroll down to the bottom of the Week 1 block, where you can find your Coral Zooxanthellae Symbiosis, grab the Move tool, and simply drag that item up. When you get up near the top of your browser window, just push up just a little bit and your page should automatically scroll up. We want to get until we're just above where the map is and just below the Vertical attenuation of sunlight with depth equation. Drop the item in here, and let's use the Move Right tool to tab it into place. Okay, let's do a final check of our work to make sure everything looks proper.

Go ahead and click on the link for Coral Zooxanthellae Symbiosis. Our page loads, we have our image in here, our text is flowing around nicely, our heading is colored the way that we wanted it. So we scroll down a little bit further. We have another image that's showing up with the effects of eutrophication. And the students are able to get all the information that they need right from this one page. Go ahead and scroll back up to the top of our page and click on the BIOL432 link. Many times you'll find yourself having to create content directly inside of Moodle, and the best resource type to add for this is the Page resource.

There are currently no FAQs about Moodle 2.1 Essential Training for Teachers.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Moodle 2.1 Essential Training for Teachers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.