Text Editor Training Guide Text Editor Training Guide Doc Ref: GC406 _v1.1 Author: Glow Team Page 1 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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 Author: Glow Team Page 2 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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. Author: Glow Team Page 3 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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. Author: Glow Team Page 4 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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. Author: Glow Team Page 5 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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 . Author: Glow Team Page 6 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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. Author: Glow Team Page 7 of 28 Ref: GC406_v1.1 Text Editor Training Guide Tutorial 3: Using Images Uploading and inserting an image 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 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. Author: Glow Team Page 8 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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. Author: Glow Team Page 9 of 28 Ref: GC406_v1.1 Text Editor Training Guide 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.