INTRODUCTION 2 HOTKEYS FOR EDITING TEXT 5 EDITING TEXT 5 TO COPY TEXT FROM A WEBSITE 5 TYPING TEXT 6 LINKS 6

Transcription

1 Text Editing Manual

2 Table of Contents INTRODUCTION 2 HOTKEYS FOR EDITING TEXT 5 EDITING TEXT 5 TO COPY TEXT FROM A WEBSITE 5 TYPING TEXT 6 LINKS 6 FILE TYPES 7 NAMING DOCUMENTS 6 ANCHOR TAGS 7 LINKING URLS & PAGES WITHIN YOUR SITE 9 LINKING S 9 LINKING DOCUMENTS 10 UPLOADING DOCUMENTS 11 LINKING IMAGES 11 INSERTING IMAGES 12 INSERTING IMAGES FROM THE WEB 12 FORMATTING IMAGES 12 IMAGES CAN BE UPLOADED AND INSERTED INTO THE CONTENT OF THE MAIN BODY 13 EMBEDDING MEDIA 13 EMBEDDING GOOGLE MAPS 13 EMBEDDING YOUTUBE VIDEO 14 EMBEDDING GOOGLE CALENDAR 16 TABLES 17 NOTE: The method of uploading and linking documents has changed from the old system. Please see page 9 for instructions on how to upload documents, and please see page 10 for instructions on how to link previously uploaded documents. 2

3 Introduction This manual will facilitate the administrator s use of text editing by providing detailed instructions and screenshots of the RAMP text editor. Editing Text with Keys All these keys can be used for editing in Design mode. - Foreground Color - Background Color - Remove Format - Undo (Ctrl-z) - Redo (Ctrl-y) - Copy - Paste - Paste Plain Text - Paste from MS Word (with cleanup) - Align Left - Align Center - Align Right - Justify - Remove alignment and paragraphs - Ordered List - Bulleted List - Decrease Indent - Increase Indent - Create Link - Insert a Table - Horizontal Rule - Insert Image - Insert Icon - Copy Format - Apply Format - Convert to upper case - Convert to lower case 3

4 - Insert a special character - Insert anchor - Insert place holder - Print - Spell checker - Select All - Select None - Anchors indication - Place holders indication - Direction right to left - Direction left to right - Bold - Italic - Underline - StrikeThrough - SubScript - SuperScript - Increase the editing panel - Decrease the editing panel - Preview document appearance - Insert Form - Insert/edit CheckBox - Insert/edit Radio button - Insert/edit TextBox - Insert/edit Password field - Insert/edit Hidden field - Insert/edit Button - Insert/edit Submit button - Insert/edit Reset button - Insert DIV - Get context menu for current cursor position (the only way for Opera) - Insert Flash. - Insert Media. 4

5 - Mark selection as not editable. - Clear foreground color. - Clear background color. - Make paragraph. - Upload Image to site - Upload Document to Site Cmd/Ctrl-A - highlight the whole document's content Cmd/Ctrl-Z - the same as undo button click Cmd/Ctrl-Y - the same as redo button click Cmd/Ctrl-X - cut highlighted text Cmd/Ctrl-C - copy highlighted text Cmd/Ctrl-V - paste Clipboard content into Editor Cmd/Ctrl-B - the same as bold button click Cmd/Ctrl-I - the same as italic button click Cmd/Ctrl-U - the same as underline button click Cmd/Ctrl-S - the same as strikethrough button click Cmd/Ctrl-L - the same as align left button click Cmd/Ctrl-E - the same as align center button click Cmd/Ctrl-R - the same as align right button click Home - set cursor to start of current text End - set cursor to end of current text Ctrl-Home - set cursor to start of document Ctrl-End - set cursor to end of document Ctrl-Alt-Home - set cursor to start of document, is useful for cursor inserting before the first Table or List in document Ctrl-0/Cmd I - get information on your browser There are many ways to enter text in the main body. Users can manually type out the text they want to appear, or they can copy and paste the text from websites or word documents. Text copied and pasted from other text programs retains the original formatting. 5

6 1. Highlight the text you want to appear on your page, either by highlighting a portion of the text or using Cmd/Ctrl A to select all the text (WARNING If you are copying text from a website the Cmd/Ctrl A option will select everything on the page, including sidebars and links. Unless you want to copy the entire page, manually highlighting your text may be the best option). Cmd/Ctrl C will copy the text that you have highlighted. Return to your page, place your cursor at the point you wish your text to appear, and Cmd/Ctrl V will paste the text into the body of your page. 2. Alternately, you can use the drop down menus for your browser to achieve the same results. Highlight the text you want to appear and go to the Edit menu then down to Copy. Return to your page; place your cursor in the place you wish your text to appear, and then go to Edit and down to Paste. TO COPY TEXT FROM A WORD DOCUMENT: Highlight the text you want to appear on your page, either by highlighting a portion of the text or using Cmd/Ctrl A to select all the text. Cmd/Ctrl C will copy the text that you have highlighted. Return to your page, place your cursor at the point you wish your text to appear, and Cmd/Ctrl V will paste the text into the body of your page. Click the submit button to save your changes. 2. Alternately, you can use the drop down menus for your text program to achieve the same results. Highlight the text you want to appear and go to the Edit menu then down to Copy. Return to your page; place your cursor in the place you wish your text to appear, and then go to Edit and down to Paste. Click the submit button to save your changes. TYPING TEXT: 1. Using your keyboard, manually type in the text you wish to appear in the body of your page. You can change the font and font size, or you can change the look of the font by bolding, italicizing or underlining your text. 2. One of the security features of the system locks the user out of the program if there is no activity within minutes. Only activity on the left hand side of the screen (the main admin menus) is registered. As this is the case it is highly recommended that the user enters the text into another word program (Notepad, Microsoft Word etc.) and then copies and pastes the text. This will ensure that no information is lost. LINKS Users can add links to the text in the main body of the page. There are a few different types of links that can be added. Anchor Tags Links to outside websites Links to pages within your site Links to Links to Documents Image Links NAMING DOCUMENTS 6

7 The file names you choose have important ramifications for operating system compatibility and usability. When naming a document to upload it is important that there you use only letters and numbers, with no spaces, and no symbols (except periods, hyphens and underscores). The file name should be no more than 27characters. Try to make the name as descriptive but also as short as possible, to make it easier for you to find the file again in the future. We want to emphasize this as much as possible, because following these conventions will save you a significant amount of time fixing broken links. Play it safe; it ll save you hours of frustration. It's important to select a file naming convention for your directories, HTML files, and image files - and stick to it. You're less likely to get broken links caused by simple typographical errors if you stick to your naming rules. Many Web professionals recommend that you use only lower-case letters in file names: Less chance of coding errors because you don't have to remember what to capitalize and when. Visitors have an easier time if they're trying to type the URL directly into their browsers instead of clicking on a link. An all lower-case format reduces errors, but also makes file names harder to read. As a compromise, designers use the underscore symbol (_) or a hyphen (-) to separate individual words in a file name. Hyphens are more visible than underscores, as the underscore is usually impossible to detect in URLs that are underlined, as in a default hyperlink. Underscores can also cause problems in certain programming languages if it becomes necessary to refer to an external file. Never use spaces in file and directory names. Windows operating systems do allow spaces and even seem to encourage you to use them, but some computers will be unable to read a file or folder with spaces in the name. If you use spaces you won't have any problem when you test your page on your own Windows or Macintosh operating system, but problems may arise when you place the page on a Web server. FILE TYPES There are two different types of document files that can be uploaded to your site, and that have some very important differences. If you are using Microsoft Word or a similar text editor, documents will be.doc file types. When you upload this type of file to your website anyone who clicks the link to view the document will be uploading (saving and opening) the document to their personal computer, or the computer they are viewing the site with. These.doc files are editable by everyone, but only people with admin access will be able to upload an edited document back to your website. Another type of document is PDF (or.pdf). When a user clicks on a link to view a PDF file on your website they will be viewing the file online. These files are not editable by the viewer. It is recommended that you use a PDF file for important documents such as mission statements, newsletters, or policies and procedures. Using a PDF ensures that your valuable information can reach your users without worry of the documents being tampered with. ANCHOR TAGS 7

8 An Anchor tag can be used to link to another document by using the href attribute, or to bookmark a place inside a document, by using the name attribute. The href attribute would be used to provide a link to an outside source, for instance, to cite a news article. A good example of using a link inside a document would be adding links to each chapter in a long document, and then linking them to the index of the document. Then when a reader clicks on the link for Chapter 9 in the index, they will be taken to the beginning of Chapter 9 in the document. Note: Name your anchors in your pages something descriptive. An anchor named "#assessment" is easier to link to and tell others about than an anchor named "#anchor ". ADDING AN ANCHOR TAG AS A BOOKMARK: 1. Choose the place in the text you wish to bookmark, and place your cursor there. If we use the scenario presented above, then you would place your cursor at the beginning of chapter Click on Add Anchor. 3. Add an anchor name. Make sure you remember what the name is, as you will need to link to it. Click ok once you have added the name. An icon of an anchor will appear where you placed the anchor. 4. Place your cursor at the place in the text you wish the link to the anchor to appear. Click on Create Link. For instance if we are using the scenario presented above, you would place the link to the anchor in your index or table of contents. 5. In the protocol dropdown menu choose Anchor. 6. Name your link. It should have the same name as your anchor but with a # in front of it. Click ok once you are done. 7. Click the submit button to save your changes. 8

9 LINKING URLS & PAGES WITHIN YOUR SITE A link can be created to an outside website, or to one of the pages on your own website. 1.Type the word or words you wish to link (eg. More Information). 2. Highlight the word or words with your cursor. Click on the Create Link button. 3. Make sure the protocol drop down menu is set to http: then type or paste the URL into the URL field. Click ok once you are done. Click the submit button to save your changes. If you are using Internet Explorer it is possible to bypass these steps by typing the link in its entirety into the main body text. Once you hit the space bar the link should appear completed.* LINKING S A link can be made to open an to facilitate contact with your company. There are two ways to do this: LINKING TO TEXT: 1. Type the word or words you wish to link to the (eg. The contact name, contact us, support etc). 2. Highlight the words you wish to link. Click on the Create Link button. 3. Change the protocol to mailto:// 9

10 4. Remove the excess // from the end of the mailto: 5. In the URL field type the contact address (eg. Click ok. 6. Click the submit button to save your work. *If you are using Internet Explorer it is possible to bypass these steps by typing the address in its entirety into the main body text. Once you hit the space bar the link should appear completed. LINKING TO THE ADDRESS: 1. Type the address into the main body text. 2. Highlight the address. Click on the Create Link button. 3. Change the protocol to mailto:// 4. Remove the // from the mailto: 5. In the URL field type the contact address (eg. Click ok. 6. Click the submit button to save your work. UPLOADING DOCUMENTS Documents can be uploaded and linked on any page: 1. Click on to insert a link; a popup appears with the folder your documents are uploaded to. You will be able to view previously uploaded documents in this folder. 2. Click Browse beside the Document field 3. Select the document (.doc or.pdf) you would like to upload from its location on your computer. 4. Click Open. 10

11 5. Enter then name of the document as you wish it to appear in the link in the Description field. 6. Click Upload in the popup. LINKING DOCUMENTS Links can be made to uploaded documents by following these steps: 1. Click on to insert a link; a popup appears with folder your documents are uploaded to. 2. Click to select the previously uploaded file you would like to link on the filetree that appears. 3. Enter then name of the document as you wish it to appear in the link in the Description field. 4. Click Upload in the popup. 5. The document will be uploaded and the link will be created for you. LINKING IMAGES A link to an outside site, or a document, can be made to an image. 1. Select the image (see the next section for how to upload an image to the site) 2. Click on to insert a link; a popup appears. 3. Click on Browse button of the popup. 4. Select the document (.doc or.pdf) in Files browser, click Open. 5. Click Upload in the popup. OR 11

12 1. Select the image (see the next section for how to upload an image to the site) 2. Click on to insert a link; a popup appears. 3. Paste the website address of the website you wish to link to in the URL field. 4. Click OK INSERTING IMAGES Name your images with names that will help you remember what is in them. Users who name their images something like picture1.jpg or picture20.jpg find their images are difficult to identify later because they have to be fully downloaded before you can tell what image they are. If you instead name your images something more descriptive, they will be easier to find later. Here are some examples: lightbulb.jpg sticks_helmets.jpg tournament_2009_billy.jpg volunteers_2007.gif FORMATTING IMAGES Images can be formatted to a web friendly size and resolution using any image-editing program, such as Adobe Photoshop or Microsoft Paint. Most imageediting software has a Save For Web feature that will allow you to resize your image and adjust the resolution. It is very important that your image is the proper resolution, as the image resolution affects the file size. If the image is too large or you upload an image directly from your digital camera, it will effect the load speed of your webpage, and can cause your website to break. INSERTING IMAGES FROM THE WEB 1. Place your cursor where you want the image to appear in the body content. 2. Click on Insert Image to insert an image, a popup appears. 3. Enter the URL for the image you want to insert. 12

13 4. The alternate text is a description of what the image is. You can leave this blank, or you can enter a brief description of the image. This is very handy for the blind that use screen readers to view the Internet. If you enter anything in the alternate text field the screen reader will read it. 5. Clicking the Show Shadow box adds a shadow to your image, which gives it the appearance of floating above the content body. 6. The width and height should only be set if the image is too large to fit the body content. 7. Setting alignment will move the image within your body content. 8. Border thickness adds a border to your image. 9. Click ok. 10. Click OK to save your work. IMAGES CAN BE UPLOADED AND INSERTED INTO THE CONTENT OF THE MAIN BODY. 1. Place your cursor where you want the image to appear in the body content. 2. Click on Upload Image to insert an image; a popup appears with the tree of files structure for uploading to. 3. Click on Browse button of the popup. 4. Select the image in Files browser, click Open. 5. Click Upload in the popup. *Please be aware that most images uploaded to your personal computer from a digital camera need to be formatted for the Internet before being uploaded to your site. See Formatting Images for more information. 6. Once your image is uploaded it can be resized. Click on the image and use the boxes that appear to drag the image to the size you want. When you are finished click submit to save your changes. EMBEDDING MEDIA The system can embed media such as google maps or youtube videos, google calendars or music. EMBEDDING GOOGLE MAPS 1. To embed a map you first need to create your map with GoogleMap. This can be done by going to or going to the Google home page and clicking on the Map link at the top of the page. 2. Once you have your map created to your satisfaction, click on the Link button on the top right of the screen. 13

14 3. When you have clicked on the Link button you will notice two options appear. The second line of code in the Paste HTML to embed in website is the code that you want. 4. Copy the code in the Paste HTML to embed in website by clicking on it with your cursor until all the code is highlighted and then pressing Cmd/Ctrl C on your keyboard. 5. Return to you re the admin side of your website. Go to Pages and select Edit for the page you wish to have the map appear on. 6. Switch the view from Design Mode to HTML Text at the bottom of the main text field. 7. Place your cursor at the place that you wish the map to appear. If you have text on the page it will be after all the text that appears in the window, but before the text that reads <span class=etc. (example below) 8. Cmd/Ctrl V will paste your code where you have placed your cursor. 9. Click Submit to save your work. When you view your page in a browser you should now have a beautiful map! EMBEDDING YOUTUBE VIDEO 1. Find the video you wish to embed on YouTube ( 2. On the right hand side of the screen, under the channel information, there are two lines of code, URL and Embed. When you click on the code in the Embed field, a drop down menu appears when you can adjust the colors, sizes and other options for your video. A good standard size for websites is the 425x

15 3. After you have made your option selections, copy the code in the Embed field using Cmd/Ctrl C. 4. Return to the admin side of your website. Go to Pages and select Edit for the page you wish to have the video appear on. 5. Switch the view from Design Mode to HTML text at the bottom of the main text field. 6. Place your cursor at the place that you wish the video to appear. If you have text on the page it will be after all the text that appears in the window, but before the text that reads <span class=etc. (example below) 7. Cmd/Ctrl V will paste your code where you have placed your cursor. 8. Click Submit to save your work. You should now have a cool video on when you view your website! 15

16 1. Open 2 browser tabs, one with your Google calendar account, and one with your website (logged into your user or admin account). 2. On the Google calendar page, in the calendar list on the left, click the downarrow next to the calendar you want to embed, and select Calendar settings. (Alternatively, click the Settings link at the bottom of the calendar list, and then click the name of the calendar.) 3. Once the calendar settings page opens, look down the page to the EMBED calendar area. 4. Click on the link to the right of the image of the calendar that says "Paste this code into your website. Customize the color, size, and other options" 5. When the embed customization screen opens, change the width of the calendar to 500px. THIS IS IMPORTANT! If you don't do this, the calendar will mess up the appearance of your website. 6. Highlight the embed code, and copy it (CTRL/CMD C) 7. Switch to the tab your site is open on, go to "Site Content", and edit the page you wish to add the calendar to. 8. When the text editor opens, look at the bottom of the area where you type content, to find 2 tabs "Design Mode" and "HTML Text". Click on the HTML Text tab. 16

17 9. Paste the embed code into the page (CTRL/CMD V). 10. Click submit to save the page. TABLES INSERTING TABLES Open your text editor window, place your cursor in the area you wish to insert the table and click on. This will open the table window, which has many features. Each feature is examined after the screenshot below. 17

18 You can control where the cells are inserted and removed from by clicking the button shown here on the top of the table window Columns: The vertical cells. Pushing the + will add columns, pushing will decrease the amount of columns. Span: This option allows the currently selected cell to span more than one column. Pushing the + increases the amount of spanned columns, - decreases the amount of spanned columns. The result looks like this: Rows: the horizontal cells. Pushing + adds more rows, pushing decreases the amount of rows. Span: This option allows the currently selected cell to span more than one row. Pushing the + increases the amount of spanned rows, - decreases the amount of spanned rows. The result looks like this: 18

19 19

20 Here you can input the size of the cells. As you change the values you should be able to see the cells changing size in the text editor window. Cell Padding controls the amount of space INSIDE the cell. Increasing the padding increases the negative space inside the cells. See Image 1. Cell Spacing controls the amount of space OUTSIDE the cells. Increasing cell spacing increases the negative space surround the outside of the cells. See Image 2. Image 1 The cell padding here is 50 Image 2 the cell spacing here is

21 The border width controls the weight of the border. Image A has a border width of 1px, while Image B has a border width of 5px. Image A Border width of 1px. Image B Border width of 5px. This option allows you to change the border colors. If left at Not Set your borders will not be visible. Clicking on the eraser will change it from the color to Not Set. Clicking on the box opens up the color chart shown here. 21

22 None No Border Dotted A border of dots Dashed A border of dashes Solid A solid border Border style allows you to choose from 4 border options. Clicking on the dropdown menu opens the options shown here. This option allows you to set a background color for your table. Clicking on the eraser will change it from the color to Not Set. If left at Not Set there will be no background color. Clicking on the box opens up the color chart shown here. 22

23 This allows the administrator to add a picture to the background of their table instead of a color. If left at Not Set there will be no background image. Clicking on the eraser will change it from the image to Not Set. Clicking on the box opens up the options shown below. Clicking on the dropdown menu brings up the following options: Repeat Causes the image to repeat both horizontally and vertically, like tiles. Repeat-X Causes the image to repeat horizontally Repeat-Y Causes the image to repeat vertically No-Repeat The image will only show once. Clicking on the dropdown menu brings up the following options: Fixed The image is locked in place Scroll the image scrolls up and down as the user navigates the table. This allows you to control the horizontal position of the image. Clicking on the dropdown menu brings up the following options: Left Anchors the image to the left side of the table. Center Anchors the image to the center of the table Right Anchors the image to the right side of the table. This allows you to control the vertical positioning of the image. Clicking on the dropdown menu brings up the following options. Top Anchors the image to the top of the table. Center Anchors the image to the center of the table. Bottom Anchors the image to the bottom of the table. 23

24 This option causes the table to cast a slight shadow on the page, which makes it look like it is suspended above the page. See below. The cell properties area lets you adjust a single cell, and then apply the changes to a row, column or the entire table. This is the area where you would adjust the alignment of the table, or decide where on your page the table will sit. For instance, choosing alignment: center and vertical alignment: middle will cause your table to sit centered in the middle of your page. 24