How can I copy, cut and paste text to, from or within the editor?
You use the keyboard sequences of Ctrl-c (to copy), Ctrl-x (to cut), and Ctrl-v (to paste). The standard toolbar icons have been turned off - in a website editor, they are more trouble than they are worth.
- If your browser is Internet Explorer, they allow you to inadvertantly paste potentially damaging code into the website whenever you copy from a Word document and paste into the editor.
- If your browser is Firefox, you cannot use these functions unless you alter your browser's security functions - and this is not a straightforward procedure.
What is straightforward, however, are the replacements to these icons.
- To copy something from Word (or any other wordprocessor) and paste it into the online editor:
- Copy your text in your normal way.
- Click in the main content space of the online editor
- Paste the text into the editor using keyboard sequence of Ctrl-v (Ctrl-v means depress the Ctrl key and, keeping it depressed, tap the "v" key)
- To copy something from within your document in the online editor to somewhere else in the document:
- Highlight the area you want to copy by dragging your mouse from the beginning to the end of the section
- Copy that section of text by using the keyboard sequence Ctrl-c (i.e. depress the Ctrl key and with it depressed, tap "c").
- Position your cursor at the place in the document where you want to copy the section to (i.e. paste)
- Paste the copied section using the keyboard sequence Ctrl-v.
- To cut something from within your document in the online editor and paste it somewhere else in the document:
- Highlight the area you want to copy by dragging your mouse from the beginning to the end of the section
- Cut that section of text by using the keyboard sequence Ctrl-x
- Position your cursor at the place in the document where you want to paste the section
- Paste the copied section using the keyboard sequence Ctrl-v.
Images: how big, what format is best, and how do I link to them?
The following 'rules' apply to images on this site:
- Photographs must be in a *jpg format
- Line drawings, with or without colour, must be in either a *.gif or a *.png format
- Images should be no wider than 600px
- Images should be no deeper than about 400px
- An image less than 100 pixels wide is usually too small to display its intended 'story'
- Images intended for left- or right-hand side positioning should be either 200 or 400 pixels wide
- The file size of any image should not exceed 40kb
- Copy the images onto the server and into the appropriate folder using the 'Multimedia manager' (> Manage images > Upload images) listed on the main menu.
- You link to images from within the editor by clicking on the image button and entering the string ../images/xxxx/zzzz.zzz - where xxxx is the name of the folder into which you uploaded the image and zzzz.zzz is the name of the image.
Images: how do I position them on the page and create a title for each of them?
Positioning images on the page requires a class statement to be manually added to the HTML image tag. You can do this after you've inserted an image tag using the WYSIWYG editor, or directly when you enter an image tag through the HTML editor.
The HTML image tag is structured as:
<img class="___" title=' src="../images/folderName/fileName" alt=' width="xxx" height="xxx" />
In order to be positioned on the page, the class statement must take one of three values:
- imgposr = position on the right and wrap text
-
imgposl = position on the left and wrap text
-
imgposc = centre on the page, no wrapping
Text entered into the title statement will be extracted and placed immediately beneath the image in the form of a title. The title statement will be automatically inserted into the alt statement, if the latter is empty.
Images: how do I create a zoomable image?
Zoomable images are ones which, when clicked, expand to a larger version of that image.
To create such an image, prepare the code for the image in the normal way (see the item above), with the only difference being that the class statement must take one of three following values:
- imgposrz = position on the right and wrap text
-
imgposlz = position on the left and wrap text
-
imgposcz = centre on the page, no wrapping
Obviously, both versions of the image must be loaded into the same folder on the server. They must share the same root name; the larger version must have a "_l" added to the end of its name. For example, "sprinkler.jpg" and "sprinkler_l.jpg".
Text entered into the title statement will be extracted and placed immediately beneath the image in the form of a title. The title statement will be automatically inserted into the alt statement, if the latter is empty.
This positioning and image titling is done by javascript on the user's side only - the functionality is not currently available on in the preview tab of the editor
How are the special links made?
- All these tags are invoked using the links icon on the toolbar.
- Tool tip
This link takes information entered in the title element of the 'a' tag and displays it in a dialogue box when the user hovers over the link.
Enter '#' for the href element, select 'tip' as the class, and enter the information into the title field e.g.
<a class="tip" title="This information will be displayed to the user when he/she hovers over the link" href="#">some word or phrase<a>
- Dynamic glossary link
This version of the 'a' tag is used to give the user an explanation of the word or phrase about which the 'a' tag is placed. The word/phrase must already exist in the site's glossary (use the 'Glossary wizard' to enter or check the presence of the word).
Enter '#' for the href element, select 'glossary' as the class, and enter the word to be searched for into the title field e.g.
<a class="glossary" title="climate change" href="#">climate change<a>
- Graybox/layer
This is used for external links that you want to load "in" the current page, so that the user does not move away from the site.
Enter the external address (complete with http://) for the href element and select 'sbox' as the class e.g.
<a class="sbox" href="http://en.wikipedia.org/wiki/Climate">climate<a>
- Link to other ebook pages
As the title suggests, this link is used to link to other pages in the current ebook.
Locate the filename of the page you want to link to from the lists located at "Utilities > Page index". Select just the filename (it will be of the general form e_chapterXXX_YYY).
Go back to the page content (i.e. the "Edit" tag) and highlight the word or phrase you wish to hyperlink
Click the link icon from the toolbar
Enter the hash character (#) into the "Link URL" box
Select the "linkto" class
In the advanced tab, paste the copied filename into the ID box
Click "Insert"