Using the Xopus WYSIWYG Editor.

1.   Getting started

XML (eXtended Mark-up Language) is a programming language in which websites are written.  Xopus™, provided by Factonomy™, is an on-screen editor which enables users with no knowledge whatsoever of computer programming to edit pages of their XML websites.

This course is in two parts, both ‘Elementary’ in that they do not cover aspects of Xopus which are inherently part of the programming language.  Part 1 teaches you how to edit using the Xopus toolbar and part 2 explores the actual structure of an XML website and teaches you how to edit using the Xopus contextbar, which will be explained in part 2.

Note that when you are editing a page of a website using Xopus you are not working in your own computer, but on the server where the website is located.  You must remain connected to the internet throughout.  It is impractical to edit any website with only a dial-up connection.

1.1. Logging on

Open your internet browser.

In the browser address bar, type the address that Factonomy has supplied to you for logging on to your site as an administrator or editor.  This is not necessarily the same as the normal address of your site.  It finishes with /login.aspx.  Then hit Enteron your keyboard.

Before going any further, save this Login page as a Favourite, or Bookmark it, so that you can pick it up easily in future.

Enter your username and password and click Submit.

1.2. Navigating to a page for editing

Use the website’s tabs and menus in the normal way to navigate to the page you want to edit.  If you need to edit a page which is not in the menu system but is reached by a link from another page, click the link to get to that page.

The pages you have permission to edit have the words Edit this pageabove the menu on the left.  (see white hand cursor in image, right). If it doesn’t have that but you think you should have permission to edit it, consult your site administrator.

1.3. Edit this page

Once you are on the page you want, click Edit This Page.

Xopus starts, and you now see the same page, but with the Xopus toolbarat the top, and the Xopus contextbarat the foot.  A Xopus webpage may contain many different elements; text, images, hyperlinks, lists, tables and so on.  Each type of element has its own particular attributes which define its appearance on the page.  In Xopus you can insert, remove, move or edit all of these elements using either the toolbar or the contextbar.  You can navigate to any other page on the current menu and edit that as well.

AS YOU WORK THROUGH THE INSTRUCTIONS WHICH FOLLOW, SAVE FREQUENTLY.  THEN IF YOU DO SOMETHING WRONG, SIMPLY CLOSE XOPUS WITHOUT SAVING YOUR LATEST EDITS, AND START AGAIN FROM EDIT THIS PAGE

2. Edit Text

Click in a paragraph of text anywhere on the page.  Type a couple of words.  Click somewhere else and delete a different couple of words.  Select a piece of text and overtype with something different.  Create a new paragraph by hitting Return.  This all works exactly as it does in your word processor.

You can also edit text in headings, tables, panels and other elements of Xopus, all of which elements will be explained later.  Just click in the item and type or delete anything you like

Nothing has happened yet on the live site.  This will only change when you save.  Don’t save these practice edits you have just done unless you really want them on the live site.  Undo them (Undo icon on the toolbar or CTRL-Z), or edit them back to what they were, or close Xopus without saving and start again from Edit this page.

2.1. Copy text from elsewhere

You can copy text into a Xopus page from any source, eg elsewhere on the current page or another page of your site, your word processor, an email, another website, etc.  Whenever you first cut, copy or paste during a Xopus session, your internet browser asks if you want this webpage to have access to your clipboard.  Click ‘Permit Access’(or equivalent words).

Open the item from which you want to copy, SELECTyour desired text, COPYit using whatever toolbar icon or shortcut key works in the software you are in (CTRL-C usually works) return to Xopus and PASTEusing the toolbar Pasteicon or CTRL-V.

The text you paste in appears in the basic typeface for the site, regardless of original fonts, though some features such as emphasis (bold etc), indenting, paragraph numbering and bullets, are preserved.

You can also copy text into headings, tables, panels and other elements of Xopus.  The copying work in exactly the same way as above.

You can copy a table, or part of one. and its structure of rows and columns is preserved, though the fonts and some other characteristics such as cell borders appear as defined within the theme of your site, regardless of how they are set in the source you copied from.  You can change these details in Xopus; see section 9.

3. The Xopus Toolbar

You can edit every element of Xopus using either the icons on the Toolbar above the page or a menu system which is accessed from the Contextbar below the page.  In this part of the course we will use only the toolbar.

Many icons on the Xopus toolbar are familiar from other software.  After the word Xopus we have Save, Refresh, Print and Spellcheck.  Further along there are Delete, Undo and Re-Do, Cut Copy and Paste, Find and Replace, Bold Italic and Underline, Bullets and Numbering, Indent and Decrease-indent, all familiar in word processing, email and many other types of software.  They do exactly the same in Xopus as they do anywhere else. 

There are also a number of icons with which you may be less familiar, though they all exist within some other Windows software.  We will now look at some of these and see what they do in Xopus.

4. Add a Xopus element

When you click this icon a drop-down menu appears.  A Xopus webpage may contain many different elements; text, images, hyperlinks, lists, tables and so on, and Xopus is an ‘intelligent’ system in that the elements offered in the drop-down list are only those which are permitted by the XML structure at the point where the cursor is. (XML is the computer language the site is written in.)

Click the cursor at different points on the page and click this icon.  The drop-down list changes depending what type of element the cursor is in.

Some of the most basic are:-

• bold, italic, underline, superscript, subscript:  all of these can be applied to any selected text, or to the current word if the cursor is in a word; otherwise applied to whatever text you type next.

• linebreak:  inserts a new line

• paragraph:  inserts a new paragraph

• Each of the formats h1, h2, etc is pre-defined in the website’s theme, and may be any combination of font-size, emphasis, colour, etc. to provide different levels of heading within the website.

• link: - see section 0

• list (ordered), list (unordered):  - see section 7

• table:  see section 9

• Panelbar

5. Move an element

Move an element up or down the page.  This might be a heading, a paragraph, an image, a link etc.  (Again when you click the icon the intelligent Xopus system only offers elements that are currently available at the cursor position).  If the current element is not moveable (ie is already at the top, or the bottom) then one or other of these icons is greyed out.  To use this feature, click in the element you want to move and then click the icon and repeatedly click the appropriate element from the drop-down till the item is in the desired position on the page.

6. View or edit the Attributes of an element

Click in the element whose attributes you want to edit, eg a paragraph, an image, etc.  Then click this icon and click the appropriate element from the drop-down.  Xopus displays a form called ‘Edit elementAttributes’, where elementis the type of element you have selected.  We will study the attributes of different elements as we come to them.

7. Create a List

A list may be either ordered (numbered) or unordered (bulleted).  The way each of these is set up, eg single or double spaced, indented, the font used, etc., is defined within the theme of the website.  Only the website administrator can change these settings.

There are two ways of applying a list.  Either enter the text first, in successive paragraphs.  Select the paragraphs you want to make into a list, and then click the icon for whichever type of list you want.  The selected paragraphs will then be numbered or bulleted.  You can go on adding to the list using the Return key to start each new item.  To finish the list, Return twice.

Alternatively, start in a blank paragraph, click the icon, and start typing your list.  Finish with Return twice.  This should be familiar from the way lists and bullets work in word processors.

REMEMBER NOTHING IS ‘LIVE TILL YOU SAVE SAVE YOUR WORK FREQUENTLY

8. Create a link

Inserts a link (hyperlink) to another page of your site, or to a different site, or to an attached document, or an email link.  If you first select some text already on the page, then this is used as the labelfor the link (the highlighted bit on the page that you click to open the link), but equally you can start without selecting anything and supply a label later.

Click on the icon and a dialog box(a small pop-up form) called ‘Edit Link Attributes’appears which lets you enter the attributes of the link.  The first field on the form is Target.  There are four possibilities here.  You might want the link to go to another page of your site, or to a page of an external site.  You might want to open a document which you have attached to your site, or you might want to set up an email to a specified email address.  In the Target  field you must enter a pointer to one of these.

8.1. The address of another page of your site

It is more accurate to go to the page you want and copy its address, than to type it from memory or from a pencilled note.

To get the address, return to the live site (which should still be open and can be found on your taskbar) and navigate to the page you want.  The full name of the page is shown in the browser’s address bar.  Select this and copy it (CTRL-A then CTRL-C).  Return to Xopus and paste it (CTRL-V) into the Target  field of the attributes form.

8.2. The address of an external site

Again it is better to copy the address than to type it.

Return to the live site and open a new browser tab, or open another copy of your browser.  Browse to the site you want.  Select, copy and paste the contents of the browser’s address box, as above.

8.3. The filename of an attached document

Beside the Target  field is a Browsebutton.  Click this and a form called ‘Select a Target‘ presents you with a list of all the documents and other resources already available on the site.  These might be .doc, .html or .pdf files, or sometimes other formats.  If you want one of the resources in this list, then just click it.

If the document you require is not already on the site, see section 12 for how to upload it from your computer.

8.4. An email address

Simply type the email address you want into the Target field.  Or - more accurate - switch to your email program, open your address book, find the contact you want and copy the email address, then return to Xopus and paste in the Target field.

8.5. Mode

This field of the form need to be completed.  It has a drop-down.  For an Email link select mail;  for everything else select new.

8.6. Label

This field of the form may need to be completed.  If you began the creation of the link having selected some text from the page, you need not put anything here.  Even though the field remains blank, Xopus uses whatever you had selected as the label for the link.  However, if you do type anything in the Label field it overwrites the selected text on the page.  If nothing was selected, you must type a label, otherwise the link will not be visible on the page.

8.7. Finishing the Link

When these three items are completed, click OK.  All the other attributes can be ignored at this stage.

Having created your link, save the Xopus page, return to the live site and refresh the page there.  Then test by clicking the link to make sure it goes where it should.

8.8. Edit a link

In the Xopus page, click on a link.  This does not activate the link.  In Xopus everything is editable, and you can now edit the link.  Click the attributesicon on the toolbar and select link.  The Edit Link Attributes form appears.  Add, delete or modify any of the attributes described above.  Other attributes may be ignored.

9. Upload a resource file

Section 8.3 explains how to create a link to a resource (eg a document) which is already available to you within your site.

However, You cannot create a resource directly on the server.  You have to create it locally on your own computer (or have it send by email to your computer, or download it from another website to your computer) and then uploadit to your website before you can make it available on your site through a link.

Click the Linkicon.  Then click the Browsebutton alongside the Target box in the Edit Link Attributesform.  The Select a targetform opens.  At the head of the list of available resources there is another Browse button.  Click this and you find yourself on your own hard disk, in My Documents, where you can browse to the file you want and click Open.  (if it is a file attached to an email you are advised to save it in advance to somewhere accessible in My Documents, where you will easily find it.)

Now click Upload and the file is added to the list of the site’s resources, from where you can select it as in section 8.3.

If the filename already exists in your resources list, BE CAREFUL.  You will NOT be asked if you want to overwrite it.  The uploaded file will replace the existing resource without warning.  If this is what you want, then fine, but if in doubt look carefully at the existing resource and the one you are about to upload and if necessary re-name the file on your computer first.

10. Create a Table

A table need not be just an array of boxes with numbers in them.  If you want to lay out information on your page in any sort of structure, a table might well be the best way to do it.  For example a simple list which is displayed over 2 or more columns.  You can even use a table to create an image gallery (this one is from http://images.google.com; see also section 11 on inserting images).

The simplest way to get a table into a Xopus webpage is to create it in your word processor, make sure it is set up exactly as you want it in terms of cell widths and alignments, etc, and copy it across (see section 2.1).  Doing it this way is particularly helpful if there are alignments in the cells, eg right aligned for money, or some cells in bold, italics etc.  While it is perfectly possible to do all the fine tuning in Xopus, it is just a bit more complicated.

Emphasis will be preserved during the copying, as will column widths and cell alignments.  Other details such as table and cell borders may not be.

To start a table directly in Xopus, click this icon and a grid appears which lets you choose the number of rows and columns (as in a word-processor).  Before doing that, note that there are two tick boxes at top left.  One to set the top row as header cells and the other to set the first column ditto.  Either or both may be selected, and a second tick will un-select.  Then slide the cursor to the required size and click.  The empty table grid appears on the page and you can enter the contents.

The layout may not be as you require.  Initially a table is set up as defined in your site’s theme and only the site administrator can alter that.  Header cells are probably bold and centred, with all other cells left aligned.  Cell widths are not defined, so they will adjust to accommodate what you type in the cells.

You can however change the attributes of the table, a row, a column or a cell.  While in the table, click the Attributesicon on the toolbar and the drop-down contains all the elements relevant within a table (ignore Section, Content and Root).  Which of these elements are available (ie not greyed-out) depends on where you are in the table.

If you choose to edit the attributes of the Table, the Edit Table Attributes form is displayed.  Here you can choose to have borders round the all the cells, just horizontal, just vertical or none.  You can apply a coloured background to the table, or to alternate rows of the table, you can change cell widths, heights and alignments.  Other items in this form may be ignored.

If you choose to edit a cell, you can again change the height (which is applied to the current row) the width (which is applied to the current column) and the alignment (which is applied to the single cell). You can also arrange for a particular cell to be extended to span more than one row, or more than one column.  This in effect merges the cell with however many cells you choose for the span, either horizontally or vertically.  BE CAREFUL, as this has the effect of wiping out the contents of any cells merged into this one.

11. Insert an image

Put the cursor where you want your image to be on the page (though you can move it later if you need to).  Click on this icon and a form called ‘Edit Image Attributesappears.  The first field in this form is Source.  This is similar to the Targetfield in the Edit Link Attributesform.

Click Browsealongside the Sourcefield and a form called Select an Imageis displayed, containing thumbnails of all the image files  currently available on the site.  Below each the size in pixels is shown.  Click one of these thumbnails to select the image.

Other field on the Edit Image Attributesform which you need to consider are:-

Caption- type a caption which will appear on the page immediately below the mage.

Alt- Anything you type here will be used as ‘alternative text’ to assist a partially sighted user of your website.  The words will appear on screen when the user mouses over the image, and will be spoken aloud by any software installed for the purpose.  Use of alternative text on all images is an essential if you want your site to be compliant with accessibility standards.  By default the filename of the image is used, but something more descriptive would of course be preferable.

Align - aligns the image to the left, right or centre of the page.

Other attributes may  be ignored.

12. Upload an image

As with Resources(above section9) the image you want may not be available on the site and you will have to uploadit from your computer.

In the Edit Image attributesdialog box, click the Browsebutton and then click Upload a new image.  This opens the Image Upload Wizard.

Click Browse.  This puts you back into your own computer, where you can browse to a folder containing images which you want to have on your site.

Double-click the image you want, which brings its filename into the box in the Image Uploader, and click Next.

On the next screen you have to define the size you want your picture to be on the webpage.  Xopus scales your picture to the size you pick, but see section 13 below for some tips on re-sizing pictures in your computer before uploading them.

Use the drop-down to select a size.  Either of the ‘auto’ sizes will retain the shape of the original image.  If you select any other option your picture may be distorted either horizontally or vertically.  Having selected a size, click Next.

On the next screen you have the opportunity to crop the picture by pulling the edges of the cropping box until they enclose the bit you want.  If you want the complete image, just pull the box to include all of it.  Click Nextagain.

The final screen of the Upload wizard lets you, optionally, provide a new filename.  This is not essential, as when you are choosing an image to insert on your web page  you do so from thumbnails not filenames, but you might nonetheless prefer to assign descriptive names to your pictures.

On the final screen of the wizard you sinply click Finish.  The thumbnail of the new image is then included in the list from which you can select it as described in section 11 above.

13. Optimising images before upload to Xopus

There are countless books and voluminous websites devoted to working with images on the computer, and many and clever are the tricks of graphic artists and designers.  But you don’t have to be an expert to be able to improve your pictures for presentation on the web.

Most people have some sort of image editing software.  New computers may come with something already loaded, eg Microsoft Office Tools which includes Microsoft Photo Editor.  Digital cameras usually come with some image software.  And there are many dedicated products on the market.

You can use any of these software packages to crop a picture, to sharpen it, which can improve its appearance on the web, lighten or darken the image, change the colours or even merge two or more pictures together to create some special effect.

But the most important attribute is size.  Even though Xopus will re-size your pictures during import, it is better to make them the right size on your own computer before uploading.  Decide in advance how big you want the pictures on your website to be.  Since not all pictures are the same shape, you may decide to standardise on either height or width.  This is by no means a rule.  Sometimes you may want a picture to be wide and shallow, or the reverse, tall and narrow, so there is certainly no need to be too rigid.  But in general, pictures of uniform size and aspect throughout the site give it a professional appearance.

Reducing size reduces the number of pixels per inch, thus reducing definition.  Since the standard of web image definition is considerably less than the average used by a good digital camera this should not matter too much, but reducing by a very large factor might make a picture a little fuzzy.  Conversely, increasing the size does not increase the definition and increasing too far can cause the image to pixelate. If you scan a picture which is intended for your website, scan at at least 300 dpi (dots per inch).  Though the web definition is less than this, scanning at the higher definition gives you room to edit the picture before uploading it.

14. What’s next

See Part 2 for how to edit in Xopus using the contextbar, which is at the bottom of the Xopus screen and which enables you to do all of the above and more.