Page Creator

From DB Primary Wiki

Page Creator

Contents 1 Page Creator 1.1 Getting Started 1.2 Creating a Custom Page 1.2.1 The 'Design Page' View 1.2.1.1 Further editing options 1.2.2 Page Properties View: adding navigation 1.2.3 Adding Subpages 1.2.4 History View: Restoring Previous Versions 1.3 Hiding pages in the community 1.4 Adding a Gallery or document list 1.4.1 Adding a gallery 1.4.2 Adding a document list 1.5 Embedding Media from external websites 1.6 Embedding video or other media files from the gallery, ‘myfiles’ or your computer/server 1.7 Adding an email feedback form to your page 2 Example Pages 3 More information on setting up communities

Page Creator is a tool for creating pages for communities. It includes a web editor to customise the community page and to create sub pages, or mini-sites, accessible from your community. It can also be used to let any member of the community contribute to a wiki-style page, or set of pages.

How do I access Page Creator?

Page creator can be accessed by administrators and teachers through the Administration Tool on the homepage, or by selecting the community and clicking on the edit page button.

Getting Started

1. Log in as a teacher or administrator and click Administration on the left hand menu.
2. Choose the Communities tab.
3. Open the community you want to change, and click on the pencil to the right of the community to edit:

4. Here you can customise the community features and add additional pages or a Mini site.

The Available Panels allow you to add feeds to the front page of your community.

When clicked they are added to the right, and you can then edit how many posts/questions/events etc will be displayed. The feeds will display underneath your customised front page. You can re-order them by hovering near the feed title and dragging the feed to the required permission:

“RSS Feed” allows you to pull in external feeds to your page. Add your title, choose how many entries to show, and then copy and paste (or type) the URL into the “Feed URL” box, and then click the “Add” button. In the example below I am adding the latest 6 news stories from the BBC.

Here you can see an “Eco Club” community front page, on which the display was set to the latest two calendar events as well as the latest three stories from the BBC Science and Environment feed:

Creating a Custom Page

So far we have looked at adding feeds to your community page. Now we are going to take a look at how we can customise the page to add our own content.

First, go to the community in question, if you have already been working on it then it will be the middle button on the top of the screen.

If you have never created any page contents, you will have a message to click the pencil to start designing the page.

If you are editing a page that already has some content, hovering over the wiki area will give you the following options:

Design Page. Click this to design the page
Go to home. Click this button to go to the main home page

Click on the Design Page icon.

The 'Design Page' View

In the Design Page view, a preview of our page is shown. The home page is the first page that will be displayed whenever anyone looks at your community. In this case, as we have not designed our page yet, the preview is blank:

Here we can start to create our own content. The text editor can be used to add text, images and links to the page. Some of the most common items on the text editor toolbar are explained below:

Adding an image

It is worth noting that when adding images, they must first be uploaded to the server (this means that they will be viewable wherever you log in).

To do this click the ”Insert/Edit Image” button .

On the dialogue that appears, click on 'Browse Server':

If you have already uploaded images to the server, you may choose from these.

Otherwise, to upload a new image choose “Upload”:

Once you have chosen the image, you can alter it's width and length (generally no larger than 400x400 is advisable).

You can also edit the “Alternative Text” if you want to, and click “OK”. (Alt text is displayed by browsers which can’t see pictures.)

To add a hyperlink to an image, so that when clicked it opens another page, click on the link tab of the image properties dialogue box:

Enter the link in the URL box. If you want the link to open in a new window, then choose 'New Window (_blank)' from the target dropdown.

If you would like a tooltip to appear (this provides extra information when you hover over an image), then click on the advanced tab and enter your text into the 'Advisory Title' text box:

Collaboration area

Creates an area where children can write contributions to the page.

Insert/Edit Page

Click this to create a link to a new or existing page. The page will be created at the same time (if it does not exist already).

Further editing options

On your text editing toolbar there are a number of advanced options for customising the page.

Below are some explanations for some of these functions:

Source: This allows you to view and edit the HTML code of the page. This is for users with some knowledge of how to make websites already.

New Page: This deletes all work, so you can start afresh.

Preview: This allows you to see how the page will look to other users.

Templates: Three simple templates for you to try.

Form buttons: To create a web form which submits post data.

Insert/Edit Anchor: After inserting an anchor you can then create links within the page. Most commonly used to create a “back to top” link.

Insert/Edit Flash: To add any flash content to your page.

Insert/Edit Multimedia: To add a video embed code from sites such as espresso and youtube.

Spellcheck: To check spelling within the body of the text.

Page Properties View: adding navigation

On the Page Properties tab you have the option to add navigation to your pages as well as rename the page:

To add a navigation tool to your homepage, on the Page Properties screen you can choose from 'Navigation', which inserts a vertical navigation list:

or a 'Breadcrumb' which shows the address path to the page that is currently on the screen. The latter appears as a horizontal bar at the top of your page:

Note: “Moderated:true”, which appears at the bottom of this screen, means that each contribution will have to be approved before it is viewable by other members of the community.

Adding Subpages

To add a subpage to your community, first click on the grey arrow to the left of the design page:

Here you will see a hierarchy showing the pages you have already added:

You can add any number of new pages to your community. To add a new page, simply click the "Create new page” plus sign. In this case, we have clicked on the plus next to 'homepage'. This creates our new page as a subpage of homepage:

Note: If you clicked on the plus sign next to composting (see image below), for example, this would create our new 'school recycling' page as a subpage of composting.

You must then give your page a name:

You can now choose the navigation for your new page.

Looking at the picture above we have entered the details for a new page called “school recycling”.

The picture below shows that we have chosen breadcrumb navigation. The navigation choice is automatically saved for us once chosen.

When creating other pages we will keep the breadcrumb the same to create continuity between them.

History View: Restoring Previous Versions

If you have made changes to a page and would like to revert it to a previous version, you may do so by clicking on the History tab:

Click on 'View' to look at previous versions of your page. If you would like to revert to a previous version click on Restore or cancel by selecting the green arrow to the left of the page.

Hiding pages in the community

There may be times when you want to hide some of the additional community pages from the children.

To do this you can go into Design Page mode and click on the Page Properties tab.

Underneath the Navigation field you will notice a Hidden tick box.

To hide this page in the community from the children ensure that the box is ticked.

Members of the community will not be able to see this page in the navigation list but leaders will be able to access and view the community page.

Adding a Gallery or document list

Adding a gallery

To add an image gallery to your page, visit the design page view and click on the 'add gallery' button shown below:

You will need to have previously added tags to the pictures you would like to insert into your page.

On the dialogue box that appears, choose the appropriate tags and click on the blue cross to confirm your choices:

Click on 'OK' to insert the gallery into the page.

Once on the page, any of the photos can be clicked on to enlarge them and see them in slideshow view:

Adding a document list

To add a document gallery to your page, visit the design page view and click on the 'add document' button shown below:

The documents you wish to display must have been previously tagged.

In the dialogue box that appears, choose the tags you want from the dropdown menu and click on the blue plus to confirm your choices.

Click on 'OK' to insert the document list into the page.

Embedding Media from external websites

The Page Creator editor allows access to the source code of the page. This means that you can copy embed codes into the source to embed content like videos and flash games from other websites.

First find the embed code of the object you wish to embed, select it all (by triple clicking in the field) and copy it (ctrl+c or right click->copy):

Then go to your community front page and click on the "Design Page" button that appears in the top right of the panel:

(You can also click the cogs, and then the design page button from Page Creator)

Choose the "Advanced Editor" option from the bottom right:

On the toolbar you will see an 'Embed Media' icon:

Click the "Embed Media" button and paste the code into the box that appears:

Embedding video or other media files from the gallery, ‘myfiles’ or your computer/server

Note: When uploading video, although there is a maximum file size of 100MB, a far smaller size would be recommended so as to reduce the download wait from the DB servers. Any of the common video file types should play within the embedded DB player which will convert them to MP4 format.

Files can be embedded using the following steps:

1. First navigate to the design view of the page creator and click on the embed media button:

2. If you are embedding media from an external website, copy the code into the dialogue box. Otherwise, click on 'Browse Server':

3. Any file type that can be embedded is now shown.

4. As well as the files displayed, you also now have the option to embed the following:

• A video clip recorded through DB Primary (Select 'Record Video')

• An audio clip recorded through DB Primary (Select 'Record Audio')

• A file from your computer or server (Select 'Upload')

Confirm by clicking ‘ok’, then save the page in the page design view. Your video will now be embedded into the wiki page.

Adding an email feedback form to your page

Please click here for more information on adding an email feedback form to your wiki page.

Example Pages

Below is an example of the “Eco Club” community home page:

If we hover our mouse over the page, a new button appears in the top right:

This is the “Pop Out” button, which lets you see the page on its own with navigation:

Here you can see the navigation bar which lets us access any other pages we have created.

To get back to the un-popped out community page, use the middle button at the top of the page.

Underneath are the recycling and composting pages, as they would be seen by a student.

The composting page was made simply using one of the templates, with just the picture and text inserted.

More information on setting up communities

For more information on setting up your community, including adding members, setting the level of access (e.g. making a public or private community), adding a theme etc. please visit our Community Administration help page.