Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 75246 Viewers
80 Video lessons · 130075 Viewers
52 Video lessons · 64209 Viewers
59 Video lessons · 50016 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.