text editor training guide

Author: Glow Team of 28 Ref: GC406_v1.1

Text Editor Training Guide


Doc Ref: GC406_v1.1



Contents

Introduction ............................................................................................... 3

Features of the Text Editor web part.............................................................. 3

Tutorial 1: Getting started with the Text Editor ............................................... 4

Adding the Text Editor web part.................................................... 4

Opening the Text Editor window, adding and formatting text ............ 4

Tutorial 2: Using tables................................................................................ 6

Tutorial 3: Using Images.............................................................................. 8

Uploading and inserting an image ................................................. 8

Text wrapping .......................................................................... 10

Adding a hotspot....................................................................... 11

Tutorial 4: Inserting Flash Files ................................................................... 12

Tutorial 5: Inserting Media Files .................................................................. 13

Tutorial 6: Creating a new Library Web Part ................................................. 14

Tutorial 7: The Document Manager.............................................................. 15

Tutorial 8: Using hyperlinks ........................................................................ 16

Linking to the URL of a web site.................................................. 16

Linking to an email address ........................................................ 17

Tutorial 9: Using HTML to add a video clip .................................................... 18

Tutorial 10: Adding scrolling text................................................................. 19

Tutorial 11: Exporting and importing Text Editor web parts ............................ 22

Exporting web parts .................................................................. 22

Importing web parts .................................................................. 22

Appendix 1: File types which can be added to the Text Editor ......................... 24

Appendix 2: Text Editor Help ...................................................................... 25



Introduction

Web parts are the ‘building bricks’ of Glow, used on Glow pages either to hold

information or to link to additional functionality. The Text Editor is a particularly

flexible web part - used to display formatted text, graphics, tables, flash

animations, sound files and videos - and can be added to any site within Glow.

This guide assumes a working knowledge of the Glow portal. If you need further

information regarding the basic working of Glow, please refer to the Glow Groups

Training Guide or the Site Collection Administration Training Guide.

To complete the tasks in this guide you will need to be logged on to Glow as a

user with administrator rights to a Glow site. This could be a Glow Group that you

have created or, if you are a Site Collection Administrator, it could be the school

site or a role-based site.

Some variations may occur depending upon the internet browser used to access

Glow and where differences arise these are explained in the text.

Further information about Glow functionality can be obtained by clicking on the

link at the bottom of any page in Glow or by clicking on the the drop-

down menu in the title bar of a web part and selecting Help .

Features of the Text Editor web part

The web part is contained in both the Establishment/My Glow Gallery and the

Virtual Server Gallery. Multiple Text Editor web parts can be added to the page to

hold different information. The frame style can be changed to adjust the

appearance of the page. Once populated with information the Text editor web

part can easily be exported and imported into different Glow sites.

The Text editor can be used to insert HTML code by clicking on the HTML

editor icon. It isn’t necessary to be able to write HTML code as design mode

can be used. HTML code can be acquired from websites for eg. scrolling text,

videos or widgets. This can be pasted into the web part using the HTML editor

icon to make use of its functionality.



Tutorial 1: Getting started with the Text Editor

Adding the Text Editor web part

1. Navigate to the site to which you want to add the Text Editor web part and

click on Modify Shared Page.

2. Click Browse and then Add Web Parts.

3. Click on the Establishment/My Glow gallery.

4. Select Text Editor and in the Add to menu select an area of the page in

which to place it. Click Add.

5. Close the ‘Add Web Parts’ menu. The Text Editor web part will be displayed

on the page.

Opening the Text Editor window, adding and formatting text

1. On the title bar of the web part click on the drop-down menu and select

Modify Shared Web part. The Text editor menu will open.

2. Click on Edit Content. The r.a.d editor window will open.

3. Click to position the cursor in the window. If the cursor doesn’t appear with a

click press the space bar.

4. Add some text.



5. Text can also be copied and pasted from existing documents:

• To paste directly from Microsoft Word position the cursor where you want

the item to appear in the editor window. Click on the icon (with the

blue ‘W’) to paste.

• Click on the icon (with the brown ‘W’) to paste from Word and clear

the font formatting.

6. Some examples of the variety of formatting options are shown below. These

options can be accessed from the menu bar.

7. Once you have entered some text click Update at the bottom of the editor

window.

8. On the web part menu click Apply to preview the changes and then click OK

to close the menu.

9. The completed web part will appear on the page.



Tutorial 2: Using tables

1. Open the editor window and click to position the cursor in the window. If the

cursor doesn’t appear with a click press the space bar.

2. Click on the table icon . Move the pointer over the cells from top left to

bottom right to select the size of the table. Click in the final highlighted cell to

insert the table.

3. To edit the table click the right mouse button (Ctrl + click on a Mac) over the

table and select Set Table Properties from the drop-down menu. This opens

the Table Wizard.

4. To add or remove rows and columns click on the Table Design tab and click

the + or - buttons.

To merge cells click on the + or – buttons next to Column Span or Row Span.



5. To set the width and height of the table click on the Table Properties tab. A

suitable width for a single column web part would be around 350 pixels, but

this will vary with screen resolution.

Also on the Table Properties tab the layout of the table can be set, border

options selected and an image can be chosen as a background to the table.

Use the ‘Cell Spacing’ option to increase or decrease the space between the

borders of the cells and the ‘Cell Padding’ option to increase or decrease the

space between the content and the cell border.

6. To set properties, such as alignment, size and background, for individual cells

click the Cell Properties tab.

7. If you wish, use the options on the Accessibility tab to add row and column

headings, captions and summaries, to make the table more accessible.

8. Click Update at the bottom of the editor window and then click OK on the

web part menu.

9. The table will now be displayed in the web part.



Tutorial 3: Using Images

Uploading and inserting an image



2. Click on the Image Manager icon in the toolbar. The Image Manager

dialogue box will open. In the left-hand pane three folders are displayed by

default. Each of these folders links to a corresponding web part or page

governed by your current location in Glow. The Picture Library folder will

already contain any image uploaded to the site and is a suitable place to

store newly uploaded pictures.

Images in the Picture Library folder in the Image Manager can be deleted by

clicking on the bin icon. Note that this will also delete the image from the

Image or Picture Library web part, in the site you are working on.

3. Double click on the Picture Library folder, then click the Upload Image

tab. Click Browse and locate the required file. Click Upload. Note that the

maximum file size is 200KB.



4. In the left hand pane of the Browse Files tab select the filename. The

selected image will appear in the right hand pane.

A text description can be added to the ‘Image Alt Text’ field. The description

will be seen by users when they hover over the image. This text can be read

aloud by screen reader software.

5. Click Insert. The image will appear in the editor window.

6. To resize the image drag one of the corner handles.

7. If you wish to align the image, click on the image to select it, then click one

of the alignment icons (left, centre, right align) in the menu bar.

8. Click on the Set Absolute Position icon to allow an object to be moved

freely to any position on the window.



Text wrapping

9. Click the right mouse button on the inserted image and select Image

Properties.

10. Set the Image Alignment. Note that only aligning to the left or to the right

allows the text to wrap around the image.

Other useful options in the Image Properties dialogue box include setting a

border width and colour and resizing the image.

‘Image Alt Text’ and the ‘Long Description’ are useful for enhanced

accessibility, as the user will see the text when they hover over the image.

This text can also be read aloud by screen reader software.

11. Click OK to close the Image Properties dialogue box.



Adding a hotspot

Hotspots can be added to an image and used to link a section of an image to a

URL. The URL can lead to other sites within Glow or to external websites.

12. Upload and insert an image as before.

13. Select the image.

14. Click on the Image Map icon . A new window will open.

15. Click Create Area, select Rectangle or Circle and drag out an area over the

image to mark the hot spot. Drag the marked area to move its position on

the image. To resize the hotspot, drag the red handle.

16. Enter the URL that the hot spot will link to.

17. In the Target drop-down menu choose whether the link opens in a new

browser window or the same one.

18. Click OK.


web part menu.

20. The web part now displays the image. Click on the hot spot to link to the

selected site.



Tutorial 4: Inserting Flash Files

The Flash Manager works in a similar way to the Image Manager used to upload

and insert images in Tutorial 3. Flash files that you might want to upload could

include interactive games or simulations.



2. Click on the Flash Manager icon .

3. On the Browse Files tab double click on an appropriate folder in which to

store the file.

4. Click on the Upload Flash tab, click Browse, locate the file and click Open.

Click Update. Note that the maximum file size is 100 KB. Some other file

types can be converted to Flash files which are generally smaller.

5. On the Browse Files tab select the file and set any appropriate options, such

as the width and height for display. Click Insert.

6. To resize the displayed file, select it and drag one of the corner handles.


web part menu.

8. Play the Flash file by clicking on the web part.



Tutorial 5: Inserting Media Files

The Media Manager works in a similar way to the Image Manager and Flash

Manager used in the two previous tutorials. Media files that you may want to

upload could include podcasts and video clips.



2. Click on the Media Manager icon .

3. On the Browse Files tab double click on an appropriate folder in which to

store the file.

4. Click on the Upload Media tab, click Browse, locate the file and click Open.

Click Upload. Note that the maximum file size is 5120 KB. A range of file

types can be uploaded.

5. On the Browse Files tab select the file. The size, alignment and properties

are displayed on the right hand side and can be changed.

6. Select AutoStart from the Properties and set the value to No. This will stop

the file playing automatically when the page is opened. There are a range of

property options to choose from.

7. Click Insert.


web part menu.

9. Play the media file by clicking on the web part.



Tutorial 6: Creating a new Library Web Part

Documents or images stored in the default Text Editor folder structure will appear

in existing Document or Picture Library web parts as well as in the Text Editor

web part.

To add items which are visible in the Text Editor web part only, a new storage

folder must be added to the directory structure.

This is done by creating a new library.

1. Click on Advanced Settings.

2. Click on Create.

3. Select Document Library or Picture Library.

4. Give the new library a suitable name and description.

5. Click Create.

6. A new folder will be created in the directory structure.

7. Documents and images stored in this folder will not appear in Document or

Picture Library web parts



Tutorial 7: The Document Manager

The Document Manager allows users to click on text or images in the Text Editor

web part to link to a variety of file types which have been uploaded to the folder

structure within the current site.



2. Add text or insert an image which will link to a document.

3. Highlight the text or select the image.

4. Click on the Document Manager icon .

5. Double click on the Documents folder. If necessary, click on the Upload

Document tab to upload a file.

6. In the left hand pane of the Browse Files tab select the filename.

7. In the right hand pane click the Target drop-down menu and choose whether

the link should open in a new browser window or the same one. Add a tooltip,

if required.

8. Click Insert.

9. Click Update at the bottom of editor window and then click OK on the web

part menu.

10. Click on the link in the web part to link to the document.



Tutorial 8: Using hyperlinks

Hyperlinks can be used to link to URLs, a default email application and other files.

Linking to the URL of a web site

1. Open the editor window. Type or paste the URL of the web site you wish to

link to. URLs can be copied and pasted from: a web site, a Word document or

a Web Links web part in Glow

2. Click the right mouse button and select Set Link Properties.

3. The Hyperlink Manager window will open.

If the menu doesn’t appear, delete your original paste, Click Ctrl + K to open

the Hyperlink Manager, and paste your link directly into the manager window.

4. Click in the Link Text box and change the text you wish to be displayed as

the link, for example the name of the web site.



5. In the Target drop-down menu choose whether the link should open in a

new browser window or the same one. Add a tooltip, if required. Click OK to

save the changes.

6. If you wish to remove a hyperlink, click the right mouse button on the link

and select Remove Link.


web part menu.

8. Click on the link displayed in the web part to link to the selected web site.

Linking to an email address

1. Type or paste the email address you wish to link to.

2. Click the right mouse button over the link and select Set Link Properties.

If the menu doesn’t appear, delete your original paste, Click Ctrl + K to open

the Hyperlink Manager, and paste your link directly into the manager window.

3. Click on the E-mail tab in the Hyperlink Manager.

4. The e-mail address and Link Text appear automatically.

5. Enter a suitable default subject and click on OK.


web part menu.

7. Click on the link in the web part on the page to open Glow Mail or the default

email application on the computer and send an email.



Tutorial 9: Using HTML to add a video clip

1. Open the editor window.

2. Open a new browser window or tab. From a suitable website, such as

www.teachertube.com, identify the video you wish to add to your site. Look

for the ‘Embed’ or ‘Embeddable’ code displayed next to the video.

3. Click in the box containing the code, then on the browser tool bar click Edit

and Select All to highlight the text. Click Edit again and then Copy.

4. Minimise this browser window, or switch tabs to return to Glow.

5. On the editor window click on the HTML icon at the bottom of the window

to switch to HTML mode.

6. On the browser tool bar click Edit then Paste to insert the HTML code.


web part menu.

8. Click the Play button to run the video clip in the text editor web part.



Tutorial 10: Adding scrolling text

Scrolling text (also known as a marquee) can be added to sites within Glow either

by adding HTML code directly to the editor window or by using an external

website to generate appropriate code.


2. Open up a new browser window or tab. If you are not going to write your own

HTML code you now need to use a website to create the code that will

generate a scrolling message. There are many free websites that will do this,

such as:

http://www.quackit.com/html/. Follow the link to ‘Marquee generator’.

Alternative websites can be found by entering keywords such as ‘free html

generator scrolling text’ into a Google search. The website you use is likely to

offer a number of choices such as the font colour, size, style and the speed of

the scrolling text. Enter your choices – you will be able to amend these later,

if you don’t like the results.

3. Generate your scrolling text and preview. Check the results and make any

amendments needed.

Once you are happy with the results look for the HTML code displayed.



4. Click in the box containing the code, then on the browser tool bar click Edit

and Select All to highlight the text. Click Edit again and then Copy.

5. Minimise the window, or switch tabs, to return to Glow.

6. On the editor window click on the HTML icon at the bottom of the window

to switch to HTML mode.

7. On the browser tool bar click Edit then Paste to insert the HTML code.

8. Click Update at the bottom of the editor window and then OK on the web

part menu.

9. The scrolling text will appear on the Glow page. Minor amendments, such as

to size or colour or the wording of the message, can be made directly by

editing the HTML code in the Text Editor. To do this, open the editor window

and click on the HTML icon . The relevant sections of the HTML code for

size, colour, font style etc can easily be identified and amended.

10. To complete your message, you may wish to remove the title bar and border

from the web part. To do this, click on the drop-down arrow on the title bar of

the web part and select Modify Shared Web Part. In the web part menu,

click on the + next to Appearance, scroll down to Frame Style and in the

drop-down menu select None. Click OK at the bottom of the menu.

11. Your scrolling text will appear on the Glow page.



Alternatively, you can quickly create your own scrolling text without using an

external website by following these steps:


2. You can insert or type the text you wish to scroll directly into the web part,

using the editing tools to change the font size, colour and any background or

highlight colour you wish to select for your message.

3. Click on the HTML icon at the bottom left-hand corner of the editor

window.

4. The HTML code for the message you have created will already be there; at

the start of the code, type <marquee> and at the end of the code type

</marquee>

5. Click Update at the bottom of the editor window and then OK on the Text

Editor menu.

6. Your scrolling text will appear on the Glow page.



Tutorial 11: Exporting and importing Text Editor

web parts

Once populated with information the Text editor web part can easily be exported

and imported into different Glow sites. This is a quick way to add the same

information, for example a list of web links, on different sites. Text and HTML text

can also be copied and pasted between Text Editor web parts.

Exporting web parts

1. Click on the drop-down arrow on the title bar of the web part. Select Export.

Click Save, choose a suitable location in which to save the file and enter an

easily identifiable filename. Then click Save.

Importing web parts

1. Choose the location to which you wish to import the web part. Click on

Modify Shared Page, then Add Web Parts and Import.

2. Click on Browse and find the saved file. Select the file and click Open.

3. Click on Upload. The imported web part appears in the list.



4. The new web part can be added to the page in the usual way.

Note that if you export a text editor containing Flash or Windows Media files

you will have to upload these files into the picture library or document store

of the new site.

Note if the web part was created on another computer it may be necessary to

click the right mouse button on the .dwp file and click on Unblock to allow it

to be imported.



Appendix 1: File types which can be added to the

Text Editor

Maximum file size

allowed

File extensions allowed *

Images

200KB

*.gif, *.xbm, *.xpm, *.png,

*.ief, *.jpg, *.jpe, *.jpeg,

*.tiff, *.tif, *.rgb, *.g3f, *.xwd,

*.pict, *.ppm, *.pgm, *.pbm,

*.pnm, *.bmp, *.ras, *.pcd,

*.cgm, *.mil, *.cal, *.fif, *.dsf,

*.cmx, *.wi, *.dwg, *.dxf,

*.svf

Flash Files

100KB

*.swf

Documents

500KB Most commonly used file types

are accepted.

Media

5120KB

*.asf, *.asx, *.wm, *.wmx,

*.wmp, *.wma, *.wax, *.wmv,

*.wvx, *.avi, *.wav, *.mpeg,

*.mpg, *.mpe, *.mov, *.m1v,

*.mp2, *.mpv2, *.mp2v,

*.mpa, *.mp3, *.m3u, *.mid,

*.midi, *.rm, *.rma, *.rmi,

*.rmv, *.aif, *.aifc, *.aiff,

*.au, *.snd



Appendix 2: Text Editor Help

The following pages are accessed by clicking the Help icon within the editor

window.

GENERAL BUTTONS Shortcut

Design button - Switches editor into Design Mode. -

HTML button - Switches editor into HTML Mode. -

Preview button - Switches editor into Preview Mode. -

Convert the text of the current selection to upper case,

preserving the non-text elements such as images and

tables.

-

Convert the text of the current selection to lower case,

preserving the non-text elements such as images and

tables.

-

Allow users to create image maps through dragging over

the images and creating hyperlink areas of different

shapes.

-

Allow users to insert and format code blocks into the

content. -

Allows the user to apply to the current selection font

size measured in pixels, rather than a fixed-size 1 to 7

(as does the FontSize tool).

-

Toggle Screen Mode - Switches editor into Full Screen

Mode. -

Show/Hide Border - Shows or hides borders around

tables in the content area. -

Zoom - Changes the level of text magnification. -

Module Manager - Activates /Deactivates modules from

a drop-down list of available modules. -

Toggle Docking - Docks all floating toolbars to their

respective docking areas. -

Repeat Last Command - A short-cut to repeat the last

action performed. -

Find and Replace - Find (and replaces) text in the

editor's content area. Ctrl+F

Print button - Prints the contents of the editor or the

whole web page. Ctrl+P

Spell button - Launches the spellchecker. -

Cut button - Cuts the selected content and copies it to

the clipboard. Ctrl+X



Copy button - Copies the selected content to the

clipboard. Ctrl+C

Paste button - Pastes the copied content from the

clipboard into the editor. Ctrl+V

Paste from Word button - Pastes content copied from

Word and removes the web-unfriendly tags. -

Paste from Word cleaning fonts and sizes button -

cleans all Word-specific tags and removes font names

and text sizes.

-

Paste Plain Text button - Pastes plain text (no

formatting) into the editor. -

Paste as HTML button - Pastes HTML code in the content

area and keeps all the HTML tags. -

Undo button - Undoes the last action. Ctrl+Z

Redo button - Redoes/Repeats the last action, which has

been undone. Ctrl+Y

Format Stripper button - Removes custom or all

formatting from selected text. -

Quick Help - Launches the Quick Help you are currently

viewing. -

About Dialog - Shows the current version and

credentials of editor. -

INSERT AND MANAGE LINKS, TABLES, SPECIAL CHARACTERS, IMAGES and

MEDIA

Image Manager button - Inserts an image from a

predefined image folder(s). Ctrl+G

Image map - Allows users to define clickable areas

within image. -

Absolute Object Position button - Sets an absolute

position of an object (free move). -

Insert Table button - Inserts a table in the editor. -

Toggle Table Borders - Toggles borders of all tables

within the editor. -

Insert Snippet - Inserts pre-defined code snippets. -

Insert Form Element - Inserts a form element from a

drop-down list with available elements. -

Insert Date button - Inserts current date. -

Insert Time button - Inserts current time. -



Flash Manager button - Inserts a Flash animation and

lets you set its properties. -

Windows Media Manager button - Inserts a Windows

media object (AVI, MPEG, WAV, etc.) and lets you set

its properties.

-

Document Manager - Inserts a link to a document on

the server (PDF, DOC, etc.) -

Hyperlink Manager button - Makes the selected text or

image a hyperlink. Ctrl+K

Remove Hyperlink button - Removes the hyperlink from

the selected text or image. Ctrl+Shift+K

Insert Special Character dropdown - Inserts a special

character (€ ®, , , etc.) -

Insert Custom Link dropdown - Inserts an internal or

external link from a predefined list. -

Choose HTML Template - Applies and HTML template

from a predefined list of templates. -

CREATE, FORMAT AND EDIT PARAGRAPHS and LINES

Insert New Paragraph button - Inserts new paragraph. Ctrl+M

Paragraph Style Dropdown button - Applies standard

text styles to selected text. -

Outdent button - Indents paragraphs to the left. -

Indent button - Indents paragraphs to the right. -

Align Left button - Aligns the selected paragraph to the

left. -

Center button - Aligns the selected paragraph to the

center. -

Align Right button - Aligns the selected paragraph to the

right. -

Justify button - Justifies the selected paragraph. -

Bulleted List button - Creates a bulleted list from the

selection. -

Numbered List button - Creates a numbered list from

the selection. -

Insert horizontal line (e.g. horizontal rule) button -

Inserts a horizontal line at the cursor position. -

CREATE, FORMAT AND EDIT TEXT, FONT and LISTS

Bold button - Applies bold formatting to selected text. Ctrl+B



Italic button - Applies italic formatting to selected text. Ctrl+I

Underline button - Applies underline formatting to

selected text. Ctrl+U

Strikethrough button - Applies strikethrough formatting

to selected text. -

Superscript button - Makes a text superscript. -

Subscript button - Makes a text subscript. -

Font Select button - Sets the font typeface. -

Font Size button - Sets the font size. -

Text Color (foreground) button - Changes the

foreground color of the selected text. -

Text Color (background) button - Changes the

background color of the selected text. -

Custom Styles dropdown - Applies custom, predefined

styles to the selected text. -

Allow users to insert and format code blocks into the

content. -

Custom Links dropdown - Inserts custom, predefined

link. -

OTHER KEYBOARD SHORTCUTS

- Selects all text, images and tables in the editor. Ctrl+A

- Finds a string of text or numbers in the page. Ctrl+F

- Closes the active window. Ctrl+W

- Closes the active application. Ctrl+F4

text editor training guide

Documents

text editor web parts

text editor window

text editor help

formatted text

formatting text

scrolling text

text wrapping

glow groups training