Tips and tricks with Text boxes in Mahara

Transcription

1 Tips and tricks with Text boxes in Mahara This tutorial assumes that you know how to drag a Text box block down to your page content area. Contents 1. The parts of a Text box What each of the buttons are in the editor... 5 First row... 5 Second row... 5 Third row Pasting plain (clean) text into a Text box Pasting from Microsoft Word or OpenOffice/LibreOffice Writer Formatting text using styles and colours in a Text box Add a Heading Change the Colour of the heading Change the Font of the heading Change the Font family of the paragraph text Making certain words stand out Insert an image into a Text box Setting up Get the link for your image Insert your image into a text block Image layout in a Text box Wrapping images with text: aligned left or right Fine tuning images Inserting tables into a Text box Inserting a table Insert/Edit Table dialogue window sections explained Editing table cells in a table within a Text box Background colour in a Text box Superscript and subscript text in a Text box Subscript Superscript How to create a Drop Cap in a Text box How to create APA references in a Text box (hanging indents) Add your references Format your references Experimenting with the indent Learning Systems and Support (LTQ) 1

2 1. The parts of a Text box When you drag a text box down to your page, you will see this dialogue window pop up: Here you can put in a new title or delete the default one which is Text box. If you remove the Block title, it will appear as [No title] in edit mode: Learning Systems and Support (LTQ) 2

3 This does not appear in display mode: Retractable means collapsible. This means you can open and close the Text box so your page doesn t appear too long. This is where all of your written content goes. You can apply all kinds of formatting and styles to the text. Here you can copy content from another pre-existing Text box (called Notes in your Content area). Learning Systems and Support (LTQ) 3

4 Here you can choose a licence (Creative Commons or GNU or Other) for the content that you upload or create. If you are using content created by others, this is where you can list the Licensor (original author) and the Original URL (if you got it from a website). When you have finished editing your Text box, remember to click on the Save button. Learning Systems and Support (LTQ) 4

5 2. What each of the buttons are in the editor First row Font style Select text colour These buttons are used to make text bold, italic, underlined, or strikethrough. This drop-down to give you a choice of colours for your text. Text highlight colour Text alignment Horizontal line This drop-down to give you a choice of text background (highlight) colours. Align text, images or other content left, right, centre, and full. Adds a horizontal ruler to your page. Emoticons Inserts small emoticon images, such as smiley faces. Insert/Edit picture Spell check button Clean-up messy code Insert/Edit Link Allows you to insert an image into your text box. The image needs to be in your files area in Mahara. You can choose your language and do a quick spellcheck. Works best in Firefox. This button allows you to clean up HTML code, such text that you copied in from another source, such as the web. To insert or edit a hyperlink. Unlink This is used to remove a hyperlink. Edit HTML source Allows you to edit the HTML source code. Toggle full screen mode Allows you to make your editing window the full size of your screen. Second row Undo/redo Undo (CTRL+Z) and Re-do (CTRL+Y) the formatting you have just made to your text. Text List formatting Unordered (bulleted) list Ordered (numbered) list Insert/edit table Insert table Edit table properties Learning Systems and Support (LTQ) 5

6 Table row/cell properties Insert/delete rows Edit table row properties Edit table cell properties Insert row above Insert row below Delete row Insert/delete columns Split/merge cells Insert column to left Insert column to right Delete column Split merged table cells Merge table cells Cut / Copy / Paste Cut Copy Paste Must use keyboard, as these buttons do not work in most browsers. CTRL+X on your keyboard for Cut CTRL+C on your keyboard for Copy CTRL+V on your keyboard for Paste Paste from MS Word Paste from MS Word. Clicking on this button opens a dialogue window, where you must CTRL+V on your keyboard to Paste your content from MS Word (or other text editor, such as OpenOffice/Libre Office Writer) Firefox Safari, Chrome, Opera IE Learning Systems and Support (LTQ) 6

7 Third row Font family The list of fonts you can use (may depend on your computer): Andale Mono Arial Arial Black Book Antiqua Comic Sans MS Courier New Georgia Helvetica Impact Symbol Tahoma Terminal Times New Roman Trebuchet MS Verdana Webdings Wingdings Font size Format The list of available font sizes you can use: 1 (8pt) 2 (10pt) 3 (12pt) 4 (14pt) 5 (18pt) 6 (24pt) 7 (36pt) The list of available pre-set formatting you can use: Paragraph Address Preformatted Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Learning Systems and Support (LTQ) 7

8 3. Pasting plain (clean) text into a Text box 1. In your source document or web page, select the text you want to copy. Press CTRL+C on your keyboard to Copy it (or right-click with your mouse and select Copy): 2. Open up a plain text editor, such as Notepad, and paste your text into that: 3. Copy the text from Notepad, then press CTRL+V on your keyboard to Paste it into your Text box edit area. Learning Systems and Support (LTQ) 8

9 4. Pasting from Microsoft Word or OpenOffice/LibreOffice Writer 1. In your source document or web page, select the text you want to copy. Press CTRL+C on your keyboard to Copy it (or right-click with your mouse and select Copy): 2. Click on the Paste from Word button Learning Systems and Support (LTQ) 9

10 3. Clicking on this button opens a dialogue window, where you must CTRL+V on your keyboard to Paste your content from MS Word (or other text editor, such as OpenOffice/LibreOffice Writer): 4. Click on the Insert button. The major formatting (Headings, bold, italics, underline, etc.) should appear, though some font colours may not. 5. Click on the Save button on your Text box: Learning Systems and Support (LTQ) 10

11 5. Formatting text using styles and colours in a Text box Add a Heading 1. First delete your block title: 2. In the text editing area, highlight the words that are going to be your heading: 3. Select whatever heading size you want, in this case it will be Heading 1: Learning Systems and Support (LTQ) 11

12 4. Your text will now be sized as Heading 1: Change the Colour of the heading You can make your heading any colour you wish. 1. To begin doing this, select the heading: 2. Click on the font colour drop-down and select a colour: Learning Systems and Support (LTQ) 12

13 3. Your heading colour will now be the colour you chose: Change the Font of the heading You can change the font of your heading to one that appears in the Font Family drop-down list. 1. To begin doing this, select the heading: 2. Click on the Font Family drop-down list and select a font: Learning Systems and Support (LTQ) 13

14 3. Your heading Font Family will now be the Font Family you chose: Change the Font family of the paragraph text You can change the font of your remaining paragraph text to one that appears in the Font Family dropdown list. 1. To begin doing this, select the paragraph text: 2. Click on the Font Family drop-down list and select a font: Learning Systems and Support (LTQ) 14

15 3. Your paragraph text Font Family will now be the Font Family you chose: Making certain words stand out You can make certain keywords stand by making them bold, italic, underlining them or highlighting them with colour. 1. To begin doing this, select the word/s you want to make standout. Select the B (Bold) button (or CTRL+B on your keyboard). It will make the text bold: 2. Select the next group of words you want to stand out: Learning Systems and Support (LTQ) 15

16 3. Your text will now be highlighted: 4. The finished text box in edit mode: 5. The finished text box in view mode, with the text box with content pasted from MS Word beside it for comparison: Learning Systems and Support (LTQ) 16

17 6. Insert an image into a Text box Setting up You are going to have two browser tabs with eportfolio open, one where your page to be edited is open and one where your Files area is open. 1. To do this, from your Dashboard, first navigate to your page to be edited, by clicking on Portfolio: 2. That will take you to where your pages are: 3. Click on the Edit content and layout button to open your page ready for editing: Learning Systems and Support (LTQ) 17

18 4. Now, right-mouse-click on Content and click on Open Link in New Tab (this example given is showing Firefox, in Internet Explorer, it will be Open in new tab). 5. The new tab will immediately show your Profile content page: 6. Click on the Files sub-tab: Learning Systems and Support (LTQ) 18

19 7. You are now in your Files area: Get the link for your image To get the link for your image, right-mouse-click on the image (in this example, it is page.png) you want to link to, then click on Copy Link Location (in Firefox): In each of the browsers the terminology may be slightly different: Internet Explorer it will be Copy shortcut Firefox it will be Copy Link Location Chrome it will be Copy link address Safari it will be Copy link Learning Systems and Support (LTQ) 19

20 Insert your image into a text block 1. Go back to the browser tab where your page is ready for editing. 2. In your page edit view, if you are not already there, go to the Edit content tab, then the General sub-tab: 3. Hover your mouse over the icons, and you will see the last one on the right (which looks like a notepad with a pencil on it) says underneath it: Text box: Add notes to your page : 4. Click, hold and drag the text box block down to a column on your page: Learning Systems and Support (LTQ) 20

21 5. The Text box: Configure dialogue will come up, where you can add a Title (or delete the preexisting one) to the Text Box, and then add in text as you would a word processor: 6. To add your image into the text box, first put your cursor where you want the image to appear: Learning Systems and Support (LTQ) 21

22 7. Click on the Insert/Edit Image button: 8. The Insert/Edit Image dialogue will come up. Paste your copied Link Location into the Image URL field (the Dimensions will automatically populate): 9. Fill out the Image Description field: If you want your image to be between paragraphs, leave the Alignment set to -- Not Set -- in the dropdown menu. Otherwise, if you want text to wrap around your image, set the Alignment to Left or Right. Learning Systems and Support (LTQ) 22

23 10. In the Dimensions field, resize your image to suit your needs. (Do this if your image is larger than pixels.) 11. Border, Vertical Space and Horizontal Space: If you type in a numeric value into the Border field, you will get a border around your image. If you don t want a border, leave it blank. A numeric value in the Vertical Space field means that many pixels space above and below your image (between the writing and your image). If you are happy with the default amount of space, leave it blank, otherwise experiment with different spacing, to see what looks best. A numeric value in the Horizontal Space field means that many pixels space left and right of your image (between the writing and your image). If you are happy with the default amount of space, leave it blank, otherwise experiment with different spacing, to see what looks best. Learning Systems and Support (LTQ) 23

24 12. Click on the Insert button: 13. Your image is now within your text box: (This Text box has been toggled to full-screen so you can see the image fully inline.) Learning Systems and Support (LTQ) 24

25 14. Click on the Save button: Learning Systems and Support (LTQ) 25

26 15. Your image is now in your text box within your page: 16. Click on Done at the bottom of your page to save and exit editing your page. Learning Systems and Support (LTQ) 26

27 7. Image layout in a Text box Wrapping images with text: aligned left or right 1. Click on the Configure this block button: 2. Select the image by clicking on it: 3. Click on the Insert/Edit image button: Learning Systems and Support (LTQ) 27

28 4. In the Alignment drop-down, select Left: 5. Click on the Update button. 6. Your image will now be on the Left side of the text: (This Text box has been toggled to full-screen so you can see the image fully inline.) 7. Click on the Save button. This is what you will see: Learning Systems and Support (LTQ) 28

29 8. If Right was selected in step 4, this is what you would see: Fine tuning images Borders 1. Select the image by clicking on it: 2. Click on the Insert/Edit image button: Learning Systems and Support (LTQ) 29

30 3. In the border field, type in a number between 1 and 10 (try not to go any thicker than 10 pixels). Click on the Update button: 4. You image will look similar to the one below: 5. Notice that the text touches the edge of the image: Learning Systems and Support (LTQ) 30

31 6. ADVANCED EDITING: a. To change the colour of your border, click on the HTML button: b. This is what should appear: c. On the second line of code, you should see the word black. Replace it with the word red: d. Click on the Update button: Learning Systems and Support (LTQ) 31

32 e. Your image should now have a red border: f. After clicking on the Save button: Learning Systems and Support (LTQ) 32

33 Spacing around images 1. Select the image by clicking on it: 2. Click on the Insert/Edit image button: 3. In the Horizontal Space field, type in 5, click on the Update button: Note: This will reset your border colour back to black. You will need to go back into the HTML code to change it back. This is a bug with the TinyMCE editor that Mahara uses. Learning Systems and Support (LTQ) 33

34 4. Your image will now have 5 pixels of space on either side of the image: 5. Click on the Save button. This is what you should see: Learning Systems and Support (LTQ) 34

35 8. Inserting tables into a Text box Inserting a table 1. To add your table into the text box, first put your cursor where you want the table to appear: 2. Click on the Insert/Edit Table button: 3. The Insert/Edit Table dialogue window will pop up: For this tutorial we are going to leave it at the default values. Click on the Insert button. Learning Systems and Support (LTQ) 35

36 4. You will see the following: The dashed lines represent what your table will look like. (If you are having borders the dashed lines represent where they would go.) 5. Add some content then click on the Save button: 6. After clicking on the Save button, this is what you should see: Learning Systems and Support (LTQ) 36

37 Insert/Edit Table dialogue window sections explained Columns Rows These are table columns: These are table rows: Learning Systems and Support (LTQ) 37

38 Cell padding Cell Spacing This diagram represents what Cell Padding and Cell Spacing is in a Table: Learning Systems and Support (LTQ) 38

39 Alignment of table Learning Systems and Support (LTQ) 39

40 Border With nothing typed in the border field: With 5px typed in the border field: Learning Systems and Support (LTQ) 40

41 Width Table width can be per cent (%) or pixels. With nothing typed in the width field: With 600px typed in the width field: With 100% typed in the width field: Learning Systems and Support (LTQ) 41

42 Height Table height can only be in pixels. With nothing typed in the height field: With 300px typed in the height field: Learning Systems and Support (LTQ) 42

43 Class You won t really need this. Generally, Class is left set to -- Not Set --, as this is generally used only if there is a Cascading Style Sheet being used with the same class name applied. This is best viewed in the HTML code: Table caption Learning Systems and Support (LTQ) 43

44 When the Table Caption box is ticked, an extra cell appears across the top of the table: It is where you can put your Table Caption. It is automatically centre-aligned: Learning Systems and Support (LTQ) 44

45 9. Editing table cells in a table within a Text box Table cell content alignment NOTE: This feature can be buggy. You may need to go into HTML code to get your table cell alignment (vertical and horizontal) to work. There are two types of alignment in table cells: Horizontal (left, centre, right) Vertical (top, centre, bottom) Notice in this table, all of the content is aligned to the top of the cell. This is the default vertical alignment of table cell content: Learning Systems and Support (LTQ) 45

46 To edit alignment of a single table cell, click on one of the cells and click on the Table Cell Properties button: Change Alignment to Left and Vertical Alignment to Top: Click on the Update button, and your table will appear similar to the one below: Learning Systems and Support (LTQ) 46

47 Do the same for each of the rest of the table cells, changing the text as you go so it looks the same as the image below: If using the individual cell formatting doesn t work, here is the HTML Code for the above table (centre must be spelled center ): <table style="border-color: #000000; border-width: 1px; border-style: solid;" border="1" cellspacing="0"> <tbody> <tr> <td style="width: 120px; height: 50px; vertical-align: top; text-align: left;">top left</td> <td style="width: 120px; height: 50px; vertical-align: top; text-align: center;">top centre</td> <td style="width: 120px; height: 50px; vertical-align: top; text-align: right;">top right</td> </tr> <tr> <td style="width: 120px; height: 50px; vertical-align: middle; text-align: left;">centre left</td> <td style="width: 120px; height: 50px; vertical-align: middle; text-align: center;">centre centre</td> <td style="width: 120px; height: 50px; vertical-align: middle; text-align: right;">centre right</td> </tr> Learning Systems and Support (LTQ) 47

48 <tr> <td style="width: 120px; height: 50px; vertical-align: bottom; text-align: left;">bottom left</td> <td style="width: 120px; height: 50px; vertical-align: bottom; text-align: center;">bottom centre</td> <td style="width: 120px; height: 50px; vertical-align: bottom; text-align: right;">bottom right</td> </tr> </tbody> </table> Learning Systems and Support (LTQ) 48

49 10. Background colour in a Text box This can be done by doing a little trick with a single-cell table. You can make a blah looking plain page look a little more interesting by adding some colour to your textboxes. 1. To add colour the background of a text box, click on the Configure this block button: Learning Systems and Support (LTQ) 49

50 2. Select your text in the editor and cut it by pressing CTRL+X on your keyboard 3. You should have an empty text box: 4. Click on the Insert/Edit Table button: Learning Systems and Support (LTQ) 50

51 5. The Insert/Edit Table dialogue window will pop up: 6. On the General tab and change the: a. Columns field to 1 b. Rows field to 1 c. Width field to 100% Learning Systems and Support (LTQ) 51

52 7. Click on the Advanced tab: 8. Click on the Background Colour browse button: Learning Systems and Support (LTQ) 52

53 9. A dialogue window will pop up: 10. You have three different ways you can choose colour: a. Picker: (You can pretty much choose any colour.) b. Palette: (These are web compatible colours.) Learning Systems and Support (LTQ) 53

54 c. Named: (These are named HTML/web compatible colours.) 11. Click on the Insert button: 12. You will end up with a small coloured single-cell table: Learning Systems and Support (LTQ) 54

55 13. Click into the table and press CTRL+V to paste your content into the table cell: 14. The finished page has three columns of colour: 15. This could be made more interesting by adding images and having multiple tables within a text box. Learning Systems and Support (LTQ) 55

56 11. Superscript and subscript text in a Text box A subscript or superscript is a number, figure, symbol, or other indicator that appears smaller than the normal text and is set slightly below or above it: Subscript text appears at or below the text baseline Superscript text appears above the text baseline Subscripts and superscripts are often used in formulas, mathematical expressions and chemical compounds or isotopes, but have many other uses as well. This is subscript and this is superscript. Subscript To begin creating a piece of subscript, paste your text into your text box 1. Click on the Edit HTML Source button: 2. You will see some HTML code. This is the code behind what your writing looks look like: Learning Systems and Support (LTQ) 56

57 3. In this example, both words subscript will be made subscript. 4. Go to the first word subscript and on the left side of it, type in this tag: _{5. Now go to the right of the word and type in this end tag:} 6. Do the same for the second word subscript : Learning Systems and Support (LTQ) 57

58 7. Click on the Update button: 8. Your text should appear similar to this below: 9. Click on the Save button 10. The final text box (with extra text added): Learning Systems and Support (LTQ) 58

59 Superscript To begin creating a piece of superscript, paste your text into your text box 1. Click on the Edit HTML Source button: 2. You will see some HTML code. This is the code behind what your writing looks look like: 3. In this example, both words superscript will be made superscript. 4. Go to the first word superscript and on the left side of it, type in this tag: <sup> Learning Systems and Support (LTQ) 59

60 5. Now go to the right of the word and type in this end tag: </sup> 6. Do the same for the second word superscript : 7. Click on the Update button: Learning Systems and Support (LTQ) 60

61 8. Your text should appear similar to this below: 9. Click on the Save button 10. The final text box (with extra text added): Learning Systems and Support (LTQ) 61

62 12. How to create a Drop Cap in a Text box To begin creating a drop cap at the beginning of your text paragraph, paste your text into your text box 1. Click on the Edit HTML Source button: 2. You will see some HTML code. This is the code behind what your writing looks look like: Learning Systems and Support (LTQ) 62

63 3. On the first line, on the right side of the <p> tag, copy and paste the following code snippet: <span style="float: left; font-size: 300%; font-weight:900; line-height: 0.85em; margin-right: 0.09em; margin-bottom:-0.25em;"> 4. On the right side of the capital letter A copy and paste in this code snippet (end tag): </span> 5. Click on the Update button: Learning Systems and Support (LTQ) 63

64 6. Your text should appear similar to this below: 7. Click on the Save button. 8. The final text box (with extra text added): Learning Systems and Support (LTQ) 64

65 13. How to create APA references in a Text box (hanging indents) Add your references If you have your reference in a word document, copy and paste them into your text box using the Paste from Word button. This should preserve any italic, but be aware that the italic may be stripped out: 1. Clicking on the Paste from Word button: 2. Use CTRL+V on your keyboard to paste the text from Word into the window. Click on the Insert button: Learning Systems and Support (LTQ) 65

66 Format your references 1. Click on the Edit HTML Source button: 2. You will see a lot of HTML code. This is the code behind what your references look like: Learning Systems and Support (LTQ) 66

67 3. On the first line, on the left side of the <p> tag, press enter to create a new empty line: 4. Copy the following code snippet and paste it in: <div style="margin-left:20px; text-indent:-20px;"> Learning Systems and Support (LTQ) 67

68 5. Now you need to add in an ending tag. Copy the following code snippet and paste it in underneath the very end </p> tag: </div> 6. Click on the Update button, then on the Save button, and you will now have a hanging indent for your APA reference style: Learning Systems and Support (LTQ) 68

69 Experimenting with the indent You can make the indent greater or smaller by going back into the HTML code and experimenting with the numbers in the first tag: Example 1: <div style="margin-left:30px; text-indent:-30px;"> Example 2: <div style="margin-left:50px; text-indent:-50px;"> Example 3: <div style="margin-left:100px; text-indent:-100px;"> Example 4: <div style="margin-left:10px; text-indent:-10px;"> When sharing any aspect of your eportfolio, please limit sharing your pages to Specific Friends, Specific Groups, Specific People, or to a Secret URL. Do not allow Public Access to any page, or allow access to Logged-In Users unless you intend for those pages to be widely available and able to be reproduced. Academic staff sometimes choose this option for demonstration purposes, but students should consider their privacy before sharing widely with the Public or Logged in Users. Learning Systems and Support (LTQ) 69