Follow

Altering Page Content (Part 1)

The Page Content module is where the main content of your Web Page or Virtual Classroom is built. This is achieved through a WYSIWYG (“What You See Is What You Get”) Page Editor, which is a simple and visual way to design web pages. The interface of the editor itself should be very familiar to any user who has used a word processing or desktop publishing application. Additionally, because all page content is basically formatted as HTML, advanced users can also use the HTML view to either code pages manually or insert pre-made HTML from their preferred web-authoring applications.

This QuickSheet (Part 1) details the basics on getting text content into your Ultranet pages.  Part 2 explains how to add a variety of different media to your pages.

Getting started

To open the page editor on any Web Page or Virtual Classroom page, click on the Page Tools menu and select the “Edit page content” option. The WYSIWYG editor will open within a pop-up window.

New_Picture.png

Basic formatting of page content

To quickly get content into the page, simply replace the placeholder text with your own material. This could be pasted directly from pre-existing text documents or copied from other web pages. Once the text has been inserted, click the [Update Page Content] button in the bottom right corner of the pop-up window to save all changes.

Using font styles and colours

To add a bit more styling and vibrancy to your text content, select the text you wish to format and choose from the functions offered in the formatting toolbar to apply the effect immediately. Hover over each button in the editor to reveal its function. Note that the Format Stripper button is used for cleaning up text that may have been pasted in with inherited HTML or style tags from its source

Fonts and colours

Performing a spell-check

To perform a spell check of any text you have composed, simply click on the Spell-Check button on the Editor toolbar. A scan will then be performed on the text elements, and any items that are not in the spell-checker dictionary will be highlighted. You will then have the option to flick through the errors and choose suggested spelling-corrected variants, ignore the spelling, manually correct it, or add it to the dictionary.

Spell check

The spell-check will close itself when all items have been checked, or you can advance this by clicking the “Finish spellchecking” button.

Using Find & Replace

Use the Find & Replace button to either locate specific text in your content, with the option to replace this text with something else automatically. In the resulting pop-up window, choose from either the Find or Replace tab at the top to access the respective options. Enter the relevant text required and use the buttons on the right to activate the function.

Find and replace

Once you have completed the find/replace, click the “Close” button to return to the page editor.

Inserting and modifying tables

Textual or media based content in the editor can be formatted and structured with the assistance of tables or grids. To insert a table, click on the Insert Table button and select the number of columns/rows desired from the drop-down display menu.

Right-clicking on different parts of the table will also bring up contextual menus that contain most of the options from the Insert Table display menu.

For further information on using tables to structure your content in a user-friendly way, please refer to the Using Tables quicksheet.

Inserting a table

To insert a link to another web page, click on the Hyperlink Manager button. Within the Hyperlink tab, the URL to link to can be specified along with the text to be displayed as the link, where the page opens (Target), the text to be shown when the user hovers over the link (Tooltip) and how the link looks on the page (CSS Class). If the hyperlink is meant to be an Anchor link or Email link, choose the appropriate tab from the top of the window and insert the relevant details.

Hyperlink manager

Once the parameters have been set, click on the “OK” button to insert the hyperlink into the page content.

Cleaning formatting problems

When text is pasted into the WYSIWYG editor from another source (for example another website or a word processed document), it can bring with it HTML code and styling that is not necessarily wanted on the Ultranet page. If this happens, highlight the text to be stripped of formatting and click the “Format Stripper” button. There are five options to choose from, depending on the format stripping type required.

Formatting

Once the text has been stripped of unwanted formatting it can be reformatted in the required way using the other buttons on the toolbar.

Inserting and editing in HTML mode

By default, the page editor opens in Design View for easy visual-based page editing. However, if more advanced users wish to code their Web Page or Virtual Classroom directly in HTML, simply click the “HTML” view button in the bottom left corner of the editor window.

Inserting HTML

The main design pane will then display the current HTML code for that page, which can then be manually edited. To return to Design View, simply click the “Design” view button in the bottom-left corner.

Previewing page before publishing

Once page editing is complete, users can preview what their finished result will look like by clicking on the “Preview” button in the bottom-left corner of the editor window.

Your eventual design will ultimately be formatted to fit in the module zones (as set under the Page Layout option on the Page Tools menu). So to prevent clipping of content, make sure items inserted such as pictures, tables or videos do not exceed the maximum dimensions of the zone you are working in. As a reference, the different module zone widths available are shown here (unit = pixels):

 

WebSpace

ClassSpace

Sidebar

200px

200px

Half-width

360px

460px

Normal

528px

730px

Full-width

738px

940px

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk