Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: Page content.

Page content

From MoodleDocs
Revision as of 10:45, 28 June 2008 by chris collman (talk | contribs) (Reword introduction)
Ver 1.5.3






The page content area is the usual place teachers enter material for students to view and evaluate on a question page.

In edit mode, teachers have many tools to assist them in presenting content. The page content area has a friendly tool bar with a WYSIWYG interface that has standard icons for different editing functions. Teachers can also switch the page content interface to one for direct HTML code entry.


Tool Bar

Toolbar in Ver 1.5 to 1.8








The toolbar should be familiar to users of word processors. The toolbar creates HTML code for the user. It is possible to see or reveal the code on the page with the icon that looks like <>. More help with HTML can be found here.

Text Editing

Brief review of text editing features Fonts, Centering, etc Special Characters Colors Paragraph Clean Word HTML

Image Insertion

Ed image.gif The Image Icon will assist you in creating HTML code. The Image Icon on the tool bar brings up this popup window. We should mention here that JPG, GIF and PNG files are recognized Moodle images file types.

Version 1.5.3

These folders and files can also be found in the administration block under files.

  1. The basic steps are to locate the file
    1. Using the File Browser Window for previously uploaded files, OR
    2. Upload a file
      1. Locate and click on the location the file will go to in the File Browser Window
      2. Use Browse button to locate file (local machine)
      3. Use Update button to place file in File Browser Window,
  2. click on file in File Browser Window to place file in "Insert URL"
  3. Enter Alternative Text
  4. Optional Use Layout, spacing and size parameters
  • Best practice is to put all of a single activities images in a folder such as "Lesson Example"
    • It is possible to zip a local folder with images and upload it to a course lesson. See files Click here for more information on files.
    • Remember to use the Refresh feature on your browser if the image does not appear to change in the Moodle Lesson.

When you browse for a local course image file its URL will be inserted like:

 http://www.yourMoodle.net/moodle/file.php/5/courseFolder2/pic1.jpg

Tips & cautions

Images in page content generally works just fine IF nothing is changed in the actual url address of the file. The famous red x where the image should be indicates something has changed. The first thing to do is to refresh your browser, then click on the image and use the insert picture tool again. Go through the steps again of finding the picture in the file structure in the file browser window.

  • Remember if you change your domain name, your moodle folder name, the image link won't work. In some cases, a backup and restore the course as a new copy or on another server, the link might be broken.
  • If you shorten the URL to:
  1. /moodle/file.php/5/courseFolder2/pic1.jpg it will work even if your domain is changed, but not if restored as new course.
  2. courseFolder2/pic1.jpg it will work even if your course file is backuped and restored as a new course, even on another server.
  • Site file folder linking: (on Moodle 1.8.2 at least)

The URL to files to the frontpage or site folder always contain /1/ like http://www.yourMoodle.net/moodle/file.php/1/siteFolder2/test.jpg Remember anyone with the URL can access files there. Files in a specific course generally are restricted to access only from that course.

A link like: /moodle/file.php/1/siteFolder2/test.jpg will work, and should even work if the site is mirrored on another server (AND the moodle folder name is not changed).

Moral, linking within Moodle is like linking on the internet. Sometimes things change and the teacher is the last to know.

Multimedia insertion

Linking a URLs to text is one way to point to multimedia resources and the appropriate multimedia player installed as a Multimedia plugin. Please refer to the specific type of media in MoodleDos for more detailed information about linking.


Embed a Flash (captivate) File in a Lesson

It is possible to embed your captivate simulations in the lesson page.

Go to your file space and copy the url of your swf file onto your clipboard. Go back to your lesson page and add the following to the code-view editor.

<iframe src="paste_url_here" frameborder="0" scrolling="0" width="400" height="550"></iframe>

That should do it.

Links & Anchors

The Link (chain icon)

Ed link.gif

An HTML link creates a path to external, internal or the current page. The icon saves writing code. One method is to copy the address bar from the location you want, click on the link icon,then paste it URL. Another method is to press the Browse button. This will take you to the Files area of the course. From here it is possible to select an existing file or to upload a new file and link to it.

There are three fields when the Link icon is used. HTML Link Insert1.JPG

    1. URL the web based address. Note a course file has a URL address via the browse button
    2. Title - what appears when the mouse rolls over the link
    3. Target - What kind of window should be called up.
    4. Anchors - A pull down list allows you to select an anchor.

Anchor

Ed anchor.gif


An HTML anchor identifies text within a page which can be referenced by a link. To use the Anchor, highlight the word, then click on the Anchor icon. Give the anchor a name. Anywhere on the page, highlight the word you would like to link to the Anchor. Use the Link icon and the pull down menu to find the correct anchor.

Tables

Add, edit, adjust

Path

What is that line at the bottom of Page Content show?

Content examples

Description of question or branch page contents

Creative examples

  • Add an icon to a title bar, such as a course or site catagory
    • Insert the image into the brief description, toggle HTML source code, copy the code for the image and paste it in the title bar.
    • It is possible to adjust the size via the width and height parameters, the alternative text and title parameters in the code are not needed.
    • Example of code

<img width="25" vspace="0" hspace="0" height="25" border="0" src="http://demo.moodle.org/file.php/4/f1.jpg"
inserted before text in course title gives this

Example Course Title Bar with icon

See Also

  • Files - Uploading, creating, moving, deleting course files and folders