Teacher Pages Editor Guide
Contents
1. 4 5 l Page l of 1 Items 1 to 32 of 32 Insert Cancel 8 Page SharpSchool User Manual Appendix A RadEditorAjax Page Content 7A 3 4 Ga E Ey G 9 ala B Z U E J Uaex 24 1 4 i Paragraph St gt Font Name Sizer Zoom 9 zor OAR Real lt Thanks for visiting our web site The site s main purpose is to enhance the home school community connection that is so vital to the success of our educational program for all students We are Committed to Excellence and we work hard to make the site a primary source for timely information for all users and a main gateway for improved communication between parents teachers students and other members of our community 5 To resize an image Either click on the image and drag it to the size required or right click on the image and click Properties Insert Form Element This tool allows you to include form elements on your page such as Checkbox Radio Button Text Box Text Area Dropdown Button Hidden Field and Password 9 Page SharpSchool User Manual Appendix A RadEditorAjax Paragraph St Size This button allows you to customize the Format of text on your page Font Mame O CU ou Real Font Size This button allows you to customize the Size of the text on your page Background Color This button allows you to change the background color of text of your page Insert Recor2. S Note It a good idea to create a folder with your name before uploading documents This will make it easier to find resources when you return To create a folder simply click on the New Folder icon and enter the new folder name Double click on the folder to open it and upload documents in it Open this folder for all future uses 28 Page SharpSchool User Manual Appendix A RadEditorAjax a Browse Files As mentioned above you may browse through files that have already been uploaded into the system Click on a folder name to open it and view its contents Once the correct folder s contents are displayed select the file in the middle column of the document manager The file location will be inserted in the file address field beneath the tool bar and the word or phrase you have chosen and highlighted to serve as the hyperlink will be inserted into the Link Text field in the right column At this point you may click Insert to insert the link to your page or click on Cancel to delete all changes You also have the ability to define the Tooltip Target and CSS Class of the link before inserting it Reminder Target dropdown menu sets which window the document will open in Tooltip determines what text is displayed when a visitor moves the mouse over the link 29 Page SharpSchool User Manual Appendix A RadEditorAjax E gt 2 B H Upload 4 UserFiles Servers Server_766046 File 4 Filename C District Files
3. Sharpsch l elping schools succeed User Guide Appendix A RadEditorAjax SharpSchool User Manual Appendix A RadEditorAjax Table of Contents ADOUTEHIS CRaDter 2202950909229900 60A vie ene cements E PAGA ECE E E O EA 3 Whatis RadEdIitorAjaX enurese niine EO E E 3 Section 1 RadEditorAjax at a GlanCe esesseseeesrresreresrerssreessrresseresreresreossrresseeessereseeeeseeens 5 PUDICA O BUONG orir irie E E TE E E NL AR0 AR 0 DAAI RE AA 11 Keyboard Shortcuts Quick Reference ccccccsssccccesececescecseseeeceeececeeeceeseseeeseuecessueeseees 12 Section 2 Formatting TOONS iincauasncsrenesdeusenbesannsetecaceeearaavendeteducnsesanseedave etusvacavensruedeenecsees 13 1 The Hyperlink Managel ccccsscccsssecccssccccesececesececsescecseseceseeecessusecesenecessuecesaeaess 13 a 5 e 3 6 14 Geen eee ere ee ere nen ee ern eee eee 14 ACO n eee A EE ae 15 12 E E A E ve E A S eee eer 16 De PEP IE NECK era E E E E E 17 Find and RED I O an E A E E 18 OE e a E E AEEA E ee ee 2202029 es 19 CENE NOG aa E E EE 20 a TBE DE IE Te E A 20 6 Table Propertie Seenen 0900000 tecenueatescquamnoneet 22 C Cell Properties cercen E OT 24 d Table AccessiDINEy occore an one nO oe PE ne ore eee o ee 26 e Tbe Ward SNOrnCUT nee ne nee cen ne eee 27 SEHON 3 M RIMEdi ais crise deta sensentteavonatare O E 28 L TRS DOCU ICING Manager 4900 VLA SERE A9 A10I0 N 28 a Browse FCS scacen des caccrebaeceatensencnensnnddsaenrasaaceba
4. Bos U dex X 4 Y j vr gt he lade Sa gt a amp lt P align center gt lt STRONG gt lt FONT size 4 gt Hello My amp nbsp Name Is lt FONT gt lt STRONG gt lt P gt lt P align center gt lt STRONG gt lt FONT size 6 gt Angela Barker lt FONT gt lt STRONG gt lt P gt lt P align center gt amp nbsp lt P gt lt P align center gt lt IMG style Z INDEX 0 alt src UserFiles Servers Server_766046 Image chaucer jpg width 309 height 387 gt lt P gt lt P align left gt Welcome to my English dass where we will spend the year learning about Geoffery Chaucer and the wonders of Middle English lt P gt lt P align left gt This course offers a delightful insight into a time bygone through readings of The Canterbury Tales lt BR gt lt BR gt The first tale on our list is the Cock and the Hen and then we ll cover the Wyf of Bath lt P gt Design lt gt HTML amp Preview i lal wit Wh Save Publish Ca cel Save Publish 2 Figure 20 HTML View 40 Page SharpSchool User Manual Appendix A RadEditorAjax Furthermore the Module Manager a allows advanced users to view several aspects of the page These will appear on the bottom of the editor The modules are i Statistics Displays the number of words and characters on the page ii Tag Inspector Allows you to view and remove tags associated with a highlighted element on the page iii Prope
5. image you wish to utilize To upload an image into the Image Manager click on the Browse button and click Select to browse images you wish to upload from your computer The Directory will display the path for the currently selected folder If you are replacing an existing file then check Overwrite if file exists and press Upload Once an image has been uploaded you may preview it in the right side of the window Clicking on the Properties tab beside the Preview tab will allow you to configure a number of elements relating to the image i Border Width You can specific the thickness of a border or click No Border to remove the border ii Border Color select a color of the image border iii Image Alt Text displays an alternative text instead of the image iv Long description This is an Accessibility option The text entered in the ong Description field will be read by the Windows Narrator tool and other screen readers v Image Alignment Specifies the alignment of the image on the page vi Width Allows you to alter the width of the image Note select Constrain to prevent the image from distorting This option will resize the height of the image in relation to the width alterations vii Height Allows you to alter the height of the image Note select Constrain to prevent the image from distorting This option will resize the width of the image in relation to the height alterations 34 Page SharpSchool User
6. color and border of individual cells in the table d Accessibility This tab will allow you to monitor the accessibility compliance of the table These tabs have been detailed in the sections below a Table Design Through the Table Design mode you have the ability to preview the look of the table To add or remove a row or column simply click on the plus l or minus buttons next to the words Rows and Columns respectively If you wish to widen a particular cell then click on the plus lor minus Ibuttons in the Row Span or Column Span respectively Once the table layout appears as you like click the Table Properties tab 20 Page SharpSchool User Manual Appendix A RadEditorAjax Table Design Columns Columns Figure 8 Table Wizard in Design mode 21 Page SharpSchool User Manual Appendix A RadEditorAjax b Table Properties Through the Table Properties tab it is possible to alter various characteristics of a table This window is broken into the following segments Dimensions Here the Height and Width of the entire table can be set in units of Pixels px or Percent Layout Here you have the ability give the table a background color and align text within it You can set table wide cell spacing or cell padding which inserts blank spaces between the cells d Cell Spacing This option allows you to specify the space between the cells of the table Cell Padding Th
7. the word To insert a word from this list simply click on the word and it will replace the incorrect word Furthermore you also have the ability to Ignore the spelling error or override the suggestions of the spell checker and alter the text manually by clicking on Change Manually or you may click Add to dictionary to add the word to the site s dictionary Once completed click the Finish spellchecking button to save any corrections If you would like to undo changes you have made in the spell checker click the Cancel button Once all words have been corrected the RadEditorAjax will automatically exit spell checking mode 17 Page SharpSchool User Manual Appendix A RadEditorAjax Spell checking mode Misspelled words are with yellow background Finish spellchecking Cancel Be generous with D ioe a well When you see an area that a improvement fi si a posiovev nanan best Help your child by him or her to do the best in school and at home Remember personal best does not mean perfect and learning is not the same as high grades Children like adults need the freedom to make misatkes and to learn from them Make learning a priority Your atitude toward school education and involvement in the school makes a strong and lasting impression on your child Show your child by example that lerning is a priority Figure 5 The Spell Checker 3 Find and Replace Find And Replace Replace Search Opti
8. your text Justify This tool equalizes your text to give it a clean streamlined look with equal f ic space on both sides Hyperlink This tool allows you to link selected text to another website or document 1 To include a hyperlink first highlight the text or area you want hyperlinked 2 Click on a icon 3 Enter the Link Text Tooltip and the URL and click OK 6 Page SharpSchool User Manual Hyperlink URL Link Text Target Existing Anchor Tooltip Appendix A RadEditorAjax Hyperlink Manager Anchor E mail http www sharpschool com Sharpschool None None Sharpschoo C55 Class Apply Class Cancel Insert Image This tool allows you to insert an image in the content box 1 To insert an image click on the E icon This opens an Image Manager box B 2 X F Upload Eb Image Editor E fe 4 UserFiles Servers Server_766046 Image 4 i Image C Library ual Science Ll Stock Art ua theme 4 pyramids giza jpg Filename J Library C Science C Stock Art _ J theme 4 pyramids giza jpg 45905 im Adam Bede jpg 53839 im Agar jpg 44297 i Bakery jpg 49702 chaucer jpg 51863 i elementary art jpg 46368 t elementary artThumb 6012 i Garden jpg 516424 S ImageManager gif 627 Library Books jpg 31089 g I ihranr Reuse ine Preview Properties Insert Cancel 2 In this window you may select an image that has been
9. District Files Lull Field Trip Forms J Field Trip Forms Bakery jpg 49702 E books jpg 59630 E elementary art jpg 46368 My Notes xlsx 8212 New Microsoft Office Por 38291 test document docx 12692 Tulsa Sites xlsx 13825 T Web Hosting Brochure 0 2056316 4 CK Pagel of 1 Items 1 to 10 of 10 Figure 12 Document Manager 30 Page SharpSchool User Manual Appendix A RadEditorAjax b Upload Files If you wish to upload files to the Document Manager simply click on the Upload tab Here you can click Select to browse and select a file from your computer and click Upload to add it to the Document Manager If you are inserting a file that already exists you may click on Overwrite if file exists to delete that file x Remove Add Overwrite if file exists Max file size allowed 10 00 MB File extensions allowed Upload Figure 13 Upload Document 2 The Flash Manager Uploading a Flash file to the Flash Manager is achieved in precisely the same manner as uploading a file into the Document Manager Here you must click on the Flash Manager icon Z in the editor which will then open the Flash Manager window This window also contains two primary options the Browse option allows you to navigate through files that are already added to the system the Upload option allows you to upload files from your computer to the system Note Create a specific folder for yourself before uploading fla
10. Manual Appendix A RadEditorAjax viii CSS Class Allows you to select a particular CSS class to apply to your image ix Best Fit E This option resizes the image to fit in the preview window x Actual Size displays the actual size of the image P xi Zoomin allows users to zoom into the image xii Zoom Out allows users to zoom out of the image In addition to these elements the Image Editor at the top of the right column offers a number of other options These options will be detailed in the following section 5 d 2 GP Upload Eb Image Editor Jel f UserFiles Servers Server_766046 Image L Image Filename b Lal Library J Library Ld Science Science Ll Stock Art 3 Stock Art d theme J theme im 4 pyramids giza jpg 45905 im Adam Bede jpg 53839 E Agar jpg 44297 E Bakery jpg 49702 E chaucer jpg 51863 E elementary art jpg 46368 E elementary artThumb 6012 Garden jpg 516424 57 ImageManager gif 627 E Library Books jpg 31089 E l ihran lt Aare inn ATIM i Preview Properties 4 lJ gt Page 1 of 1 Items 1 to 32 of 32 Insert Cancel Figure 16 Image Manager 35 Page SharpSchool User Manual Appendix A RadEditorAjax a Editing an Image You can easily resize and create thumbnails of images To resize your image to thumbnail size or otherwise simply select the image from the Image Manager and click Image Editor at the top of the right column You can create a thum
11. also contains the two primary functions Browse Files and Upload Files The Browse Files tab allows you to navigate through files that are already added to the system The Upload Files tab allows you to upload files that have been added to the system Once a file has been selected in the right column under the Properties tab you have the option of setting the following Specify Class ID Width Height Alignment and Properties Under the Preview tab you can view a sample of the video prior to inserting it on your page If you re satisfied with the changes click Insert to add the file on your page or click Cancel to delete all changes Ej Media Manager d gt 2 Upload UserFiles Servers Server_766046 Media Specify Class ID J Media Filename Size Butterfly wmw 2797732 Width 150 Height 150 Align Baseline Properties Preview Properties b Pagel of 1 Items1 tol of 1 Insert Cancel Figure 15 Media Manager 33 Page SharpSchool User Manual Appendix A RadEditorAjax 4 The Image Manager The Image Manager is used to upload and insert images onto your web site To access this feature click on the Image Manager x icon in the editor This window contains two primary options the Browse option allows you to navigate through files that are already added to the system the Upload option allows you to upload files from your computer to the system To browse existing images use the centre column to select the
12. bnail image by manipulating the Width and Height fields in the Resize box and selecting to Save those changes The resized image will be previewed in the left column as you adjust the Width and Height values You may also Flip or Rotate the image If you Flip the image you may choose Flip Horizontal Flip Vertical or Flip Both If you Rotate the image you can choose between 90 180 or 270 If you wish to display only a portion of the image you may also use Crop to choose a portion of the image to turn into a new file Image Editor Opacity Opacity Resize Width t Height Constrain proportions Flip Rotate None None Flip Horizontal 90 Flip Vertical 180 Flip Both 270 Crop x C px Width lt px k Enable Crop y px Height 33 px Restore Image Save As 4 pyramids giza_thumb Overwrite if file exists Cancel Figure 17 Image Editor When you have finished making your changes click Save to save your new image 36 Page SharpSchool User Manual Appendix A RadEditorAjax b Editing Image Properties Much like the Table Properties section covered earlier in this manual the Image Properties allow you to edit various aspects of a specific picture once it has been inserted onto your site To access image properties simply right click on the image and select Image Properties we will cover the Image Map Editor later in this manual This wi
13. der This tool allows you to record a video from a webcam and publish it on your page Document Manager This tool allows you to insert links to documents on to your page such as PDF files Microsoft Word files Microsoft Excel files to name a few 10 Page SharpSchool User Manual Appendix A RadEditorAjax Publishing Options Once formatting is completed there are 3 available options 1 Save Clicking Save will save your changes as a work in progress and will not make the changes live 2 Publish This option will make your changes live instantly on the site 3 Cancel This option will delete all your changes Saving Your Pages vs Publishing When you are creating your pages in SharpSchool you have the option to save them and continue working on them later before publishing Save As the name implies Save saves your work You can come back again later and continue to edit the page Clicking Save does not make changes to the live page on the site Anyone who visits the webpage will see the live version of the page they will not see your saved changes When you are ready to make your saved changes live on the site just click Publish Publish If you want to immediately make your changes to a page live use the Publish button Your changes will instantly appear on the page and any visitors will see the updated version of the page 11 Page SharpSchool User Manual Appendix A RadEditorAjax Keyboard Shortc
14. e s address here or use the Document Manager icon to browse existing files from or upload new files to your computer b The Target allows you to select which browser window the link will open in c Existing Anchor allows you to create a link to another position on the same page Anchors are detailed in the next section d The Tooltip defines the text that will appear when a user s cursor hovers over the link The tooltip is important element in making your site accessible to users who rely on screen readers e Finally the CSS Class determines what formatting color size etc the link will have Note In most cases you will only be required to fill the URL field and the tooltip All other elements are optional 14 Page SharpSchool User Manual Appendix A RadEditorAjax b Anchor If you wish to link text to another position on the same page you must create an Anchor on that position before creating the hyperlink In order to create an anchor open the Hyperlink Manager and click the Anchor tab In the new window name the anchor and click OK It is important to note that the name used in the anchor should be the word you wish to see hyperlinked on your page After creating the anchor create the hyperlink by selecting the designated name in the Existing Anchor field Hyperlink Manager Hyperlink 2 Anchor de E mail Name Figure 3 The RadEditorAjax Hyperlink Manager in Anchor mode 15 Page SharpSchoo
15. e width alterations ix Height Allows you to alter the height of the image Note select Constrain to prevent the image from distorting This option will resize the height of the image in relation to the height alterations c Image Map Editor The Image Map Editor allows you to create multiple clickable areas on an image You may create an image map by right clicking on the image and selecting Image Map Editor Image Map Editor Preview Choose Image Choose Image UserFiles Servers Server_i a Select Area Shape Rectangle Circle Define Area Properties Left px Width px URL Target Target Alt Text Cancel Figure 19 Image Map Editor 38 Page SharpSchool User Manual Appendix A RadEditorAjax Here you may select a rectangular or circular area to highlight the image You can then adjust the dimensions of the selected area by dragging the corners of the area itself or specifically defining dimensions under the Selected Area Properties heading Finally you must specify a URL to complete this step Reminder The Target dropdown allows you to select whether the new site e will open in a new window or the same window 39 Page SharpSchool User Manual Appendix A RadEditorAjax Section 4 Advanced Source Editor For technical users the RadEditorAjax features advanced features Simply click on the HTML lt gt icon to convert the page into code Page Content Y 00 ke b E a
16. ent box Cut This function will allow you to quickly cut and move text Highlight the chosen text in the content box before using this button Copy This function will allow you to copy and duplicate text Highlight the desired text in the content box before using this button Paste This function allows you to paste cut or copied text to a different area of the content box Paste as Plain Text This button pastes text however it removes all formatting coding from the copied text Paste from Word This button allows you to paste text copied from Microsoft Word while preserving the original formatting Paste from Word strip font This button will allow you paste text copied from Microsoft Word while stripping the fonts from the original document Paste as HTML This function allows you to paste cut or copied text as HTML CE Print This button prints the contents of your page pe Spell Checker This button runs a spell check on your page and notifies you of any errors that are found Undo This button allows you to undo your last action s on a page u Redo This button allows you to redo the action or actions that were last committed on your page 5 Page SharpSchool User Manual Appendix A RadEditorAjax dt E ee a E E OO o Numbered This tool allows you to create numbered lists Decrease Indents This button allows you to decrease indents for your paragraphs E Center Align This tool center aligns
17. ght gt pixels Width pixels Content f xy Alignment Background aa Color Style Builder Say CSS Class Apply Class Back Image Id no text wrapping Select All Cancel Figure 10 Cell Properties 25 Page SharpSchool User Manual Appendix A RadEditorAjax d Table Accessibility If you have heading rows or heading columns in your table it is recommended to indicate how many there are for accessibility reasons You can also add a caption and a summary which can be used to improve the accessibility of a table E Table Wizard Table Design Table Properties Cell Properties Accessibility Accessibility Options Heading rows 0 Max 2 Heading columns 0 Max 2 Caption Caption Align Associate cells with headers Figure 11 Table Accessibility 26 Page SharpSchool User Manual Appendix A RadEditorAjax e Table Wizard Shortcuts After inserting a table to a page you have the ability to edit properties of the table by simply right clicking in it This will open a range of options in a dropdown such as EET REE 2 Insert Row Below This option adds a row below where the cursor is located 4 Insert Column to the This option deletes the column to the eft of where the cursor is Left located 6 Delete Column This option deletes the column where the cursor is located 8 Merge Cells Vertically This option merges cells vertically 10 Delete Cells This opti
18. is option allows you to specify the padding within the cells of the table Alignment This option allows you to choose how to horizontally and vertically align your table on the page Background color This option allows you to set a background color for the table Style Builder Users can employ the Style Builder as a platform from which they can customize a wide variety of style features relating to their webpage Within the style builder you can configure the following options for the table i Font Various font elements can be utilized through this feature including font name font attribute color size capitalization and font effects such as strikethrough overline and underline ii Background You can select a background color as well as using the Image Manager to select a background image and configure it accordingly iii Text this tab allows you to set the following text variables alignment spacing and text flow indentation and text direction 22 Page SharpSchool User Manual Appendix A f vi vii RadEditorAjax Layout Allows configuration of features relating to flow control such as visibility display as a block or inflow element allowing text flow and allowing floating objects as well as features relating to content such as overflow and clipping options Edges Allows you to specify dimensions relating to margins and padding Border Allows you to specify dimensions of top right botto
19. l User Manual Appendix A RadEditorAjax c Email You also have the ability to create a hyperlink that launches an e mail client such as Microsoft Outlook To do so simply select the text on your page that you want clickable and then click on the Hyperlink Manager In the row of tabs select the E Mail tab Here type in the e mail address in the Address field You may also add an optional default Subject for the e mail Note CSS classes define formatting elements such as font and color This option may only be used if CSS styles have been created for your site Contact your site administrator for information E Hyperlink Manager Hyperlink Anchor E mail Address Subject CSS Class Apply Class Figure 4 The RadEditorAjax Hyperlink Manager in E mail mode 16 Page SharpSchool User Manual Appendix A RadEditorAjax 2 The Spell Checker No matter how careful we try to be spelling errors are a common occurrence in all written text Despite this general understanding you never want to be found guilty of housing a spelling error on your website Therefore the RadEditorAjax features a built in spell checker This spell checker uses standard American spelling to verify the spelling of words and highlights misspelled words with a yellow background To use the Spell Checker click the lt 7 icon on your toolbar When a misspelled word is discovered a menu will open above it that displays suggested corrections for
20. ll open a new window through which you can edit many of the same elements as under the Properties tab which was available when you uploaded and inserted the image initially Properties Width 309 px Height 387 px 4 Border Color Border Width Alt Text Long Description Image Alignment X v Image Src UserFiles Servers Server ail Top Right E Margin _ gt T Bottom lt Left CSS Class Apply Class OK Cancel Figure 18 Image Properties i Border Width You can specific the thickness of a border or click No Border to remove the border ii Border Color select a color of the image border iii Image Alt Text displays an alternative text instead of the image 37 Page SharpSchool User Manual Appendix A RadEditorAjax iv Long description This is an Accessibility option The text entered in the Long Description field will be read by the Windows Narrator tool and other screen readers v Image Alignment Specifies the alignment of the image on the page vi Horizontal Spacing Specifies the distance to the left and to the right between the image and adjacent content vii Vertical Spacing Specifies the distance to the top and to the bottom between the image and adjacent content viii Width Allows you to alter the width of the image Note select Constrain to prevent the image from distorting This option will resize the height of the image in relation to th
21. m and left borders as well as whether the style width and color will be the same for all borders Lists Allows you to choose bulleted or not bulleted lists as well as various bullet characteristics including style position whether you have a custom bullet or if you want to select an image to use as a bullet using the Image Manager CSS Class If your organization prefers a standard look and feel for tables you may select a CSS style and apply it Background Image This option allows you to set a background image for the table It is important to note that pictures must first be uploaded to the SharpSchool system before they can be used in a table ID This option allows you to specify an ID for your table Tip Having a table ID allows you to style this table when editing the page s style sheet Click OK to insert the table on your page or click Cancel to delete changes 23 Page SharpSchool User Manual Appendix A RadEditorAjax E Table Wizard Table Design Table Properties Cell Properties Accessibility Dimensions CSS Class Layout Height pixels No CSS Class Layout m Width lt pixels Apply special formats to Layout Heading Row Last Row First Column Last Column Cell Spacing Cell Padding Alignment Background Color lt v Style Builder fy CSS Class Apply Class Back Image Id Cancel Figure 9 Table Properties c Cell Properties The Cell Properties
22. o Microsoft Word and therefore many of the icons and features available will seem familiar to most users In addition to having the ability to alter the look of text on a page users can also insert links images flash videos and more Furthermore for the technically savvy the editor features tools that allow for webpages to be formatted in HTML as well 3 Page SharpSchool User Manual Appendix A RadEditorAjax 7A Ga 15 6 6 F B Z U ae x X amp 3 4 35 Z Normal gt Tahoma 3 16px SF 7 Apply CSS Cl Zoom 2 RA w 2 Content may contain text that is bold fa c underlined la rge or small Also links images and content copied from programs such as Microsoft Word can be used Jf Design lt HTML amp Preview Save Publish Cancel Figure 1 The RadEditorAjax 4 Page SharpSchool User Manual Section 1 RadEditorAjax at a Glance The following table provides a definition and function for all the icons available in the RadEditorAjax lt gt HTML The Editor allows technical and non technical users to create their pages For technical users simply clicking on the HTML option will instantly convert the page into HTML code Clicking on Design again will revert back to the simplified WYSIWYG interface Preview This button allows you to preview a page before you publish it Template The Templates button allows you to use preexisting content templates in your cont
23. o go back to the version of content you had before you opened the Find and Replace dialogue w Tip It is possible to open more than one Find and Replace dialogue box 4 CSS Styles Users can use Cascading Style Sheets CSS to ensure that content appears consistent across the website Creating specific CSS classes is outside of the scope of this manual and is almost exclusively done by advanced administrators However for regular users applying CSS is a straightforward task Simply highlight the text and select the style you wish to use from the Apply CSS Class dropdown menu Apply CSS Cli lt Clear Style list link Title 4 Figure 7 Apply CSS Class Menu You may clear existing CSS classes by selecting Clear Class from the Apply CSS Class dropdown menu 19 Page SharpSchool User Manual Appendix A RadEditorAjax 5 Creating Tables The RadEditorAjax features a robust Table Wizard that gives users the ability to create advanced and sophisticated tables without the need for knowledge of HTML To start the Table Wizard click on the Insert Table icon in the WYSIWYG editor and select Table Wizard from the dropdown This will open a window with 4 tabs in it a Table Design This tab creates the framework of the table b Table Properties This tab customizes various properties such as color and border of the table c Cell Properties This tab customizes various properties such as the
24. on deletes the selected cell 12 Table Properties This option opens up the Table Properties tab 27 Page SharpSchool User Manual Appendix A RadEditorAjax Section 3 Multimedia The RadEditorAjax offers users several ways of uploading multimedia files such as documents video Flash videos audio files and webcam recordings to a site The icons corresponding to these specific multimedia files are tabulated in Section 1 of this guide 1 The Document Manager There are two ways by which you can include documents within SharpSchool s system you can either upload them into a Document Container refer to Chapter 10 for more details or you may insert document hyperlinks on a webpage In this guide we will cover the steps required to create a document hyperlink To create a document hyperlinks simply click on the Document Manager ticon in the editor This will open the Document Manager window that contains two primary functions Browse Files and Upload Files To Browse Files is to allow you to navigate through files that have already been added to the system The Upload Files option allows you to upload files from your computer to the system Reminder You may wish to highlight a specific word or phrase on your page before opening the Document Manager This word or phrase will become a hyperlink that will open the document If you do not highlight anything then the document link will be inserted with the original file name
25. ons Direction Match case Up Match whole words Down Figure 6 Find and Replace Dialogue Box The Find and Replace tool allows you to quickly make changes to the same content in multiple places within the portlet The Find and Replace dialogue opens in Find mode by default To search for a particular word or phrase simply type the text in the Find field and click Find Next To replace text click on the Replace tab and then type the replacement text in the Replace with box Click Find Next to go through the changes one by one until the text 18 Page SharpSchool User Manual Appendix A RadEditorAjax you wish to replace is highlighted To replace a highlighted instance of the text simply click Replace Also you may click Replace All to replace all instances of a specified text There are several replacement options available Search Direction and Match Case i Search This is set by default to search the entire text but you can also search a particular portion of the content by first selecting highlighting the text and choosing Selection only under the Search setting ii Direction You can also search Up or Down from the current position iii Match Case You can find and replace text with the exact same case by selecting Match case or to only find and replace instances which are not part of another word by selecting Match whole words When you are done select OK to accept your changes or Cancel t
26. rties Inspector Allows you to view and adjust the properties of a highlighted element on the page iv Real time HTML View Allows you to view the HTML of a highlighted element ste ait Vv th 2 5 amp amp w v gt aa z CE B Z U abe x X 4 1 4 G EE Normal Tahoma 2 10pt GF Apply CSSCl A v Zoom 8 RA ww 2 E Statistics Tag Inspector Properties Inspector Real Time HTML View J Design HTML amp Preview Figure 21 Module Manager 41 Page
27. sdiabes pneaaaenaddeuen saaqeaneradiateaanaceerbeedatesed 29 5 Uno FE neers go ene eee Se eee eee eee 31 2 TAFA AN NIE T orae E occa auncauamsantseuteesnaucne recor E 31 THE Megdia MINE aena ererateerescatavarenetacntuessiswaietanesaneeoencanseatmeeanneccencnneens 33 4 THIM EMN BG enen EEE rE 00h 34 a Editing an Image een 36 b Editing Image PropertieS 000c00u0memuemmgnomdir ee 0 eren 37 C _ Tmage Map Editor aan ee eee eee ne ee ee ee 38 Section 4 Advanced Source EqitOr cccccssssscccccssessecccecseesseccceeueueecceesseueeeceeeeueaeeseeeeaas 40 SharpSchool User Manual Appendix A RadEditorAjax About this Chapter This chapter will be provided to users in the form of an appendix with Chapter 1 of the SharpSchool set of user guides The document details aspects of the RadEditorAjax that are available u act ma ting et ad a to users via the WYSIWYG What You See Is What You Get editor The content in this guide is intended for all levels of users of the system The chapter is divided into two broad sections Definitions and Functions At first we will discover the basic definitions of all the features of the RadEditorAjax through the section RadEditorAjax at a Glance and then go into detail explaining multi step modules from Section 2 onwards What is RadEditorAjax The RadEditorAjax is a rich text editor that allows for easy creation of web content This tool functions in a similar way t
28. sh files 31 Page SharpSchool User Manual Appendix A RadEditorAjax Once a Flash movie video has been inserted you can specify several criteria for its output This information will appear in the right preview window of the Flash Manager using the default Properties tab and here you can define the width height quality and other components of the video If you are placing a flash object in the area below a dropdown menu on your site selecting the Transparent option will allow the menus to appear on top of the Flash video If you wish to see how the video would look on your site simply click on the Preview tab If you re satisfied with the changes click Insert to add the file on your page or click Cancel to delete all changes E Flash Manager amp gt 2 EF P Upload UserFiles Servers Server_766046 Flash Ll Flash Filename No records to display Preview Properties b Pagel of 2 Items 1 to 100 of 101 insert Cancel Figure 14 Upload Flash File 32 Page SharpSchool User Manual Appendix A RadEditorAjax 3 The Media Manager The RadEditorAjax makes it easy to add videos to a page as well This function is achieved in the same manner as adding a file or flash video Here you must click on the Media Manager icon in the editor which will then open the Media Manager window which works in the same way as with the document and flash managers As with the previously discussed managers this feature
29. tab functions similar to the Table Properties tab except that in this case you can apply unique style and settings to individual cells on the table and not the overall table itself To apply cell specific properties it is essential to click on the cell in the preview box first This tab contains specific functions such as i Content Alignment This option allows you to align text in a selected cell ii Background Color This option allows you to assign a background color to a specific cell iii Style Builder Offers a variety of options as discussed above in the previous section 24 Page SharpSchool User Manual Appendix A RadEditorAjax iv Dimensions here the height and width of individual cells can be set in units of pixels px or percent v Background Image This option allows you to set a background image to a selected cell It is important to note that pictures must first be uploaded to the SharpSchool system before they can be used in a cell vi CSS Class If your organization prefers a standard look and feel for cells you may select a CSS style and apply it vii Additional In addition you can specify an Id for a particular cell as well as whether you want to enable text wrapping in relation to that cell Once completed click OK to apply the changes to the table or click Cancel to delete changes El Table Wizard Table Design Table Properties Cell Properties Accessibility Preview Cell Properties Hei
30. uploaded to your site If you wish to select an image from your computer click on Upload Select the image by clicking on Select and click Upload 7 Page SharpSchool User Manual Appendix A RadEditorAjax aa Remove Select x Remove x Remove Add Overwrite if file exists Max file size allowed 10 00 MB File extensions allowed qif xbm xpm png 1ef jpg jpe peg tiff tif rgb q3f xwd pict ppm pgm pbrn pnm bmp ras pcd cgm mil cal fif dsf cmx wi dwg dxf svf Upload 3 Once the image has been uploaded double click the image to insert it 4 You will return to the Image Properties box from where you can customize the size of the image border etc Click on OK when completed Customize the Width and Height of Upload Er Image Editor E f f images here shal Width 450 px Height 337 px 7 Hl Seance Border Color lt b 7 al Stock Art Lil Stack Art Border Width C theme themi a Alt Text H 4 pyramids giza jpg 45905 Long Description Adam Bede jpg 53839 Agarjpg 44297 Image Alignment t Bakery jp 49702 4 Z YIP Top Right chaucer jpg 51863 Margin z Bottom Left elementary artjpg 46368 elementary artThumb 6012 CSS Class Apply Class Garden jpg 516424 W ImageManager gif 627 E Library Books jpg 31089 r i i
31. uts Quick Reference 12 Page SharpSchool User Manual Appendix A RadEditorAjax Section 2 Formatting Tools The RadEditorAjax features a range of formatting tools such as inserting hyperlinks a built in Spell Checker the ability to Find amp Replace text and even the application of CSS Styles and the creation of Tables This section goes into the details of how these topics work 1 The Hyperlink Manager The RadEditorAjax s Hyperlink Manager allows users to insert several kinds of links on a page The three primary available links are 1 Linkto an external website 2 Linkto a different portion of the current page Anchor 3 Linkto an Email address To insert a hyperlink you must first select the text you wish you be clickable then open the Hyperlink Manager by clicking on the Hyperlink Manager icon 2 in the editor This will open a window with three tabs Hyperlink Anchor and Email Hyperlink Manager Hyperlink Anchor E mail URL http Target None Existing Anchor None Tooltip CSS Class Apply Class v Cancel Figure 2 The RadEditorAjax Hyperlink Manager in Hyperlink mode 13 Page SharpSchool User Manual Appendix A RadEditorAjax a Hyperlink When you first open the Hyperlink Manager it opens in Hyperlink mode This window allows you to include links to external sites on your page a The URL field allows you to create a link to another page or document Simply type in the sit
Download Pdf Manuals
Related Search