Skip to content. | Skip to navigation

Sections
 

HOWTO: Use Kupu Web Page Creator/Editor

by Jon Dale last modified Jan 10, 2013 10:00 AM
Kupu lets you create web pages without knowing the HTML web language. Using Kupu, you can easily add text, images, links, tables and more to pages. Kupu uses many of the same commands as typical word processors, such as Microsoft Word.

Configuring Your Preferences:


1. Log in to the Portal

2. In the orange global preferences bar--just beneath the menu tabs--are several links.  Click on the Preferences link.  The title of the page will change to My Preferences.

  • Click on Personal Preferences and scroll down until you see the Content Editor heading.
  • From the box beneath this heading, select Kupu.
  • Click the Save button at the bottom of the page. 


Creating a Web Page using Kupu:

  • Note: Kupu uses many of the same commands as typical word processors. To determine the function of each icon in the toolbar, hold the cursor over the icon without clicking on the icon.  A description of the icon's function will appear.
  • Always remember to click "Save" after you have made changes to a web page.


1. To add a webpage, navigate to the folder you want the page added to.  This could be your my folder or a folder in a group that you have access to.

  • Click the add item dropdown menu and select page.  The Edit Page screen appears.
  • Click in the Title field and give the page a short title.  The Title is used to identify your page to portal visitors, and in searches. This is required.
  • Click on the Description field and type a description.  A description is a one-paragraph text abstract. It accurately and concisely describes your page though inclusion of key words.  Accurate keywords in the description ensure that the content will be found during a search.  This is required.

Editing Text:

  • Note: Kupu does not have a tool to change font size or color of text.  However, different styles for headings, subheadings, captions, etc. can be selected.


1.  To make a title, heading, or subheading, caption, etc., you can either a) use your mouse cursor to select text then click on the drop down list in the toolbar with the default style Normal.  Select the desired style; or b) select the style first, then add text. 


The following shows the text formatting of each of the options:

  • Heading

  • Subheading

  • Literal (this creates a text box around selected text) 

  • Discreet (for captions)

  • Pull-Quote

  • Call Out



2.  To Bold text, either

            a) select text using the cursor, then click on the Bold icon (B) in the toolbar; or

            b) click on the icon first, then add text. 


3.  To Italicize text, either

            a) select text using the cursor then click on the Italic icon (I) in the toolbar; or

            b) click on the icon first, then add text.   


4.  To add a subscript, either

            a) select text using the cursor then click on the subscript icon (X2) in the toolbar; or

            b) click on the icon first, then add text. 


5.  To add a superscript, either

            a) select text using the cursor then click on the icon (X2) in the toolbar; or

            b) click on the icon first, then add text.


6. In addition to typing text into Kupu, you can also copy and paste text from a web page or a word processor.


Aligning Text:


1. The buttons in the Toolbar controlling text alignment are the same as in Microsoft Word.  The alignment icons are the group of three icons in the tool bar that show a series of six horizontal lines positioned to the Left, Center and Right. The default alignment is Left alligned. 

  • To change the alignment, use your mouse cursor to select the text to be moved.  
  • Select the desired position from the icon in the toolbar (Left, Center or Right)


Creating Lists:

  • Note: Unlike word processors, Kupu does not support separate list types for nested lists.  If you change the bullet or ordering style of a nested list, the new style is applied to all levels of the entire list.  Although complex outlines cannot easily be created, simplicity is best for screen reading.


1. You can add ordered lists by clicking on the icon with the small numerals (1,2,3) followed by horizonal lines.  When the Enter key is pressed, a new number will appear. 

  • Alternatively, to add numbering to existing text, select the text to be numbered, then click on the numbered list icon.  Note:  numerals will appear at points that the Enter key was pressed. 
  • You can also change the list style.  Numerals are the default selection, but a style selector list (drop-down list) appears in the toolbar after the ordered lists icon has been clicked.  You can order lists by letter, number or Roman numeral.     


2. To add unordered, bulleted lists, click on the icon with the three small boxes next to three short horizontal lines.  When the Enter key is pressed, a new box will appear.  Note: Pressing the Enter key twice will end bulleted formatting.

  • Alternatively, you can add bullets to existing text by selecting the text to be bulleted, then clicking on the bulleting icon. 


3.  To create a definition list, click on the icon showing short horizontal lines followed by longer horizontal lines (located next to the bulleting icon).  The first line typed will appear in bold.  When the Enter key is pressed, the next line will be indented and the text will appear Normal.  Pressing Enter will give you another bold line.  


Other Text Alignment Tools:


1.  To return formated text to the default, left-alligned, normal-font text, use your mouse cursor to select the text to be un-formatted, then click on the Decrease Quote Level icon (the icon showing a blue arrow pointing to the left followed by bolded, horizontal bars).  Text that is typed after this icon has been selected will be in the default format.


2.  Clicking the Increase Quote Level icon (the icon showing a blue arrow pointing to the right followed by bolded, horizontal bars) offsets text in a colored box.  This icon performs the same function as the "Literal" text tool (see the above, Editing Text instructions). 


Adding Links:


1. To add a link to an external website:

  • Highlight the text that will be associated with the link.
  • Click on the Insert External Link icon in the toolbar (the Globe icon)
  • In the box under the "Link the highlighted text to this URL" heading, type the URL or web address, making sure to keep the initial "http://" (if you have copied and pasted the link from another window, make sure the "http://" does not appear twice).
  • Click OK.  
  • After you have been brought back to your webpage, click Save at the bottom of the page.  
  •  Find the link on the new page and click on it, making sure you are linked to the correct page. 


2. To add a link to a page within the RMPortal:

  •  Highlight the text that will be associated with the link.
  • Click on the Insert Internal Link icon in the toolbar (the Chain icon).
  • A popup consisting of 3 panels will appear to help you locate the item you want to link to.  Your four choices of starting point are:  the home folder of the site, the current folder where you are working, recent items created by you, or all recent items.  Browsing through the folders is straightforward: Click a folder, and it opens.  To go back up and out of the folder, click parent folder (the first item in the folder listing).
  • If the link you want is a folder, navigate to the folder you want, then click on it.  Kupu will open the folder, since it doesn't know yet if you want to link to it or keep browsing inside it.  Once you are inside, click the folder's name where it appears at the top of the listing (with the single dot before its name).  You'll know you selected the folder for your link destination because you'll see its title in panel 3.
  • When the folder or item you would like to link to appears in the panel 3, click OK.   

Note:  You may link to any content item you find in the Kupu link popup.  However,  be aware about members-only content.  If your link will be public, a link to members-only content will lead some readers to a dead end.


Adding Images:


1.  Move the cursor to the location on the webpage where you would like to position the image (*Note: Using the spacebar and tab keys, you will be able to adjust the image location after you have placed it on the page). 


2.  Click on the Add Image icon in the tool bar (the icon picturing a small tree).

  • A popup consisting of 3 panels will appear to help you locate the item you want to link to.  Your four choices of starting point are:  the home folder of the site, the current folder where you are working, recent items created by you, or all recent items.  Browsing through the folders is straightforward: Click a folder, and it opens.  To go back up and out of the folder, click parent folder (the first item in the folder listing).
  • After clicking on the picture's icon in the second panel, a thumbnail of the image will appear in the third panel.
  • First, enter any ALT-text in the text box provided (ALT-text is what screen readers for visually impaired users read out loud to describe the image). 
  • You are given options for Image alignment. (*Note: Ignore the message beneath the selections: you may choose to add an image "Inline" in addition to "Left/Right").

          1.  Click on the circle next to Inline to insert the image on the page exactly where you've placed your cursor.

          2.  Click on the circle next to Left to position the image in the same line as your cursor, but flush against the left border.

          3.  Click on the circle next to Right to position the image in the same line as your cursor, but flush against the right border.  

  • Make sure the image size is set on Original and click OK. 

         (*Note: Due to a browser-imposed limitation, you are not able to resize the image using the Portal.  To resize items, you must use Adobe Photoshop or another external image editor)

 

Adding a Table:


1.  Move the cursor to the location on the webpage where you would like to position the table. (*Note: Using the spacebar and tab keys, you will be able to adjust the table's location after you have placed it on the page). 


2. Click on the Add Table icon in the tool bar (the icon with a series of squares, located next to the globe icon).


3. In the table setup box that appears, you are asked to choose which type of table you would like to create.

  • Plain: creates a table that, when the page is saved and displayed, will not show columns or rows. 
  • Listing: creates a table that, when the page is saved and displayed, will divide by columns, but not by rows.
  • Vertical Listing: creates a table that, when the page is saved and displayed, divides into both columns and rows.
  • Unsorted Listing: similar to the "Listing" table.


4. In the spaces after the Rows and Columns headings, type the number of rows and columns to be created in the table.

  • You will also be able to add rows and columns once the table has been placed on the page. 

          1. On the newly created table, you will see a series of small icons, one series appearing vertically, the other horizontally. 

          2. Clicking on either of the small triangles will add a row/column.  Clicking on the 'X' in the circle will delete a row/column.


5. In the table creator box, you are also given the option of creating headings above each of the table's columns.  To create headings, click the box next to Create Headings. On the newly created table, the headings will appear as Col 01, Col 11, Col 21, etc. Click on these, erase them, and type your own headings. 


6.  To finalize table selections, click on Add Table.


7.  To edit a table once it has been placed on the webpage, click anywhere on the table, then click on the Add table icon.

Note:  Creating a table in MS Word, then copying and pasting the table into Kupu is an easy alternative to directly creating the table in Kupu. Bold, italics, left/center/right justification features are retained with the copy/paste from MS Word. Once in Kupu, the table can be changed using the methods described above. Cell contents may be altered. However, the width of the table may change, leading to a table that may not fit across a single page when printed.   

   

 
Back to Top