Kavi Edit Help

Chapter 2. Edit Content Tab

The Edit Content Tab

The Edit Content tab provides a simple interface for editing your Web site. The Edit Content tab features "What You See Is What You Get" (WYSIWYG) editing.

If you have ever used a word processor (e.g., OpenOffice.org Writer, Microsoft Word, etc.) you will find the Edit Content tab familiar and easy to learn.

Back to top

System Requirements

To use the Edit Content tab's WYSIWYG editor, your computer must meet the following requirements:

Operating Systems: Windows 95 or later; Mac; Linux.

Browsers: Firefox 1.0 or later, Internet Explorer (IE) 5.5 and 6.0 with JavaScript enabled (Windows only), Mozilla 1.7.3 or later, Netscape 7.2 or later.

These are the minimum requirements to use the editor. However, the speed at which you are able to work will also be impacted by the speed of your computer's processor and the speed of your Internet connection.

Back to top

Saving Your Changes

Before you switch to a different tab or change from the Edit to the View mode, you need to save your changes. To save your changes, click on the Save Changes button on the bottom of the WYSIWYG editor window.

Important

Save your changes before you switch to another tab or mode or you will lose your work.

While you are editing, the page you are editing and all child pages under this page are protected by a session lock. The session lock persists until you accept the changes and finish your session, even if you close your browser or shut down your computer. None of your changes (even ones that you have saved) are visible to anyone else until you end your session and no one else can edit any of the locked pages. Go to the Finish Session Tab to release the lock, which will make your changes visible to others and allow others to edit these pages.

Important

Only you can release the session lock on the pages you've been editing, so its better to make sure you end your session before stopping work for the night to avoid inconveniencing other editors who may need access to these pages. If someone has left a session lock in place, support can give you the name of the person who owns the lock. Having to login to release some session lock at 0300 hours surely provides incentive to develop a habit of finishing sessions in a timely manner.

Back to top

Editing Multiple Content areas

If you are editing a page with multiple content areas, the WYSIWYG editor allows you to edit each content area separately. Click the Edit Content button for the area you wish to edit. The Page Sections bar displays buttons you can click when you want to edit other sections.

Note

When multiple content areas are defined for a page, you will not be able to edit the page as a whole, even in the Edit Source tab.

Back to top

Using the WYSIWYG Editor

The Kavi editorials WYSIWYG Editor is simple to use. Move your mouse cursor into the Editing Section and click in the editing window. Once you see a cursor blinking, you can begin typing whatever you would like.

You can also highlight text by selecting a point in the document and holding down the mouse button while you move the cursor over the text you want to highlight. After you highlight text, you can change the format of the text, delete the text, add links and many other options.

Note

This tool is designed to provide a simple and convenient way to perform light edits. The WYSIWYG editor does not support complex formatting options, particularly for tables. If you require features not available in this tool, you may have to use software designed specifically for architecting web sites. More information is included in the following sections.

Text Formatting

Once you have become accustomed to using the editor for basic editing, you can begin to experiment with the text formatting options that Kavi Edit provides.

All of the text formatting options are available via buttons located at the top of the Editing Section.

Note

When you press 'Enter' (or 'Return') the editor inserts a paragraph mark that will create white space between the current line of text and the following line. If you want start a new line without this white space, perform a soft return by pressing the shift and enter (i.e., return) keys at the same time.

Figure 2.1. Text formatting options

Text formatting options

The table below shows all of the buttons and labels. Below is a list of the options and a description for each:

Table 2.1. Text formatting options and their descriptions

Option Description
Style Predefined styles including several different sizes of headings. This is the preferred way to change the size of text because it retains the font and style settings that were created for the site. All of the styles that the editor uses are paragraph styles, meaning that they are applied to entire paragraphs. This means that you don't have to select all of the text that you want to format—you simply click within the paragraph that you want to format and then choose your style from the options available.
Bold Bold or turn off bold on the selected text. (Keyboard shortcut: Ctrl-B)
Italic Italicize or turn off italics on the selected text.
Underline Underline or turn off underlining on the selected text.
Strike through Strike across or turns off the strike on the selected text.
Subscript Turn the selected text into a subscript.
Superscript Turn the selected text into a superscript.
Remove Format Remove the most recent formatting.
Text Color Change the color of the text. A new window will open with a palette of colors from which to choose.
Background Color Change the background under the highlighted text (not the background of the entire page). A new window will open with a palette of colors from which to choosem.
Align Left Align the text to the left in the editing area.
Align Center Center the text in the editing area.
Align Right Align the text to the right in the editing area.
Numbered List Begin a numbered list.
Bulleted List Begin a bulleted list.
Decrease Indent Decreases the indention of the text. Can also be used to remove bulleted or numbered lists.
Increase Indent Increase the indention of the text.
Insert Link Creates a hyperlink to a separate page.
Insert Anchor Creates an anchor on the page that allows links to the anchor to be inserted in another part of the page or a different page.
Insert Image Inserts an image in the selected part of the page.
Insert Horizontal Rule Create a horizontal line in the selected part of the page.
Insert Table Create an empty table structure in the selected part of the page with the number of rows and columns of your choice.
Open Toolbox Open the toolbox window to access the various links and images that can be inserted into this page.
Undo Undo the most recent edit.
Redo Redo the most recent edit that you undid.

Text Formatting Tool Motto: Less Is More

Kavi Edit text formatting tools give you the ability to make the page look almost any way you choose, but it is best to use some restraint because any text formatting you do through these tools other than selecting one of the predefined "Style" options is actually a local, manual override of the styles set in your website's cascading style sheet (CSS). Your site's default style sheet defines the way that text should be displayed on webpages to maintain a consistent look and feel throughout your website. When localized formatting overrides one of these predefined styles or other aspect of the site design, it detracts from the uniform look of your site.

Local formatting tends to create maintenance issues and too many different fonts or text formats on a page can distract the reader and lessen the impact of the message.

Creating Hyperlinks

Kavi Edit makes it simple to add hyperlinks to pages on your website or to pages on other websites. Before you can link to a file or image, you will need to add that file or image to your website using the Upload an image or file section at the bottom of the toolbox, or by using the Manage Pages tab. To create a hyperlink, you need to highlight text or select an image on the page using your cursor. Next, click on the Insert Link button.

Figure 2.2. Insert Link button circled

Insert Link button circled

Clicking on the button will open the insert link window. This window will provide you with a list of the KPages visible to the editor to help you create links.

Figure 2.3. Insert Link window

Insert Link window

A list of pages available for the section you are editing will be displayed. When you find the page or file that you want to link to, click on the Insert link next to the item. The link will be inserted on the text or image that you highlighted.

Use the breadcrumbs at the top of the Insert Link window to navigate to another area of the site to choose a page to link to.

You can also choose to enter the path to the file or image to which you wish to link. Enter the URL to the file or image in the URL field in the Type in a URL section at the top of the toolbox. Enter the complete URL including the preceding http:// as shown in the following figure.

Figure 2.4. Enter URL window

Enter URL window

To create a link to an anchor, type in the complete path to the anchor or simply enter '#anchorname'.

To edit the href attribute of an anchor or link, highlight the link text, click the Link button and enter the new URL. You will not be able to see the URL. In Firefox 1.0.3 and Mozilla 1.7.3, you can edit the anchor name by double clicking on the anchor, then clicking the anchor button on the toolbar and type in a new anchor name. If you want to edit other attributes of a link or anchor, you will have to delete the existing link or anchor and create a new one. You may have to fool the browser by moving up or down a row before adding the new link, since most have a tendency to helpfully recreate your old link. Move your cursor to a new row, then enter the text for your new link.

To remove a link or anchor, select the entire link and press Delete. Since browser support for this feature varies, you may have to use the Edit Source tool for this purpose. Always save your work before switching to a different tab or you will lose any unsaved edits.

Inserting an image

Before you can insert an image into a page, you will need to add an image to your web site using the Upload an image or file section at the bottom of the toolbox, or by using the Manage Pages tab.

To insert an image into the page, place your cursor where you would like to insert the image. Click on the Insert Image button.

Figure 2.5. Insert Picture button circled

Insert Picture button circled

After you click on the picture button, the insert picture window will open. This window is the same as the insert link window. It lists the pages, files, and images on the server and other options for the insertion of the image.

Figure 2.6. Insert Picture window

Insert Picture window

When you find the image that you want to insert, click on the Insert Image link next to the item. The image will be inserted in the place that you selected.

Use the breadcrumbs at the top of the Insert window to navigate to another area of the site.

Figure 2.7. Example of image added to page

Example of image added to page

You can also choose to enter the path to the image that you wish to link. Enter the URL to the image in the Image Location field in the Type in a URL section at the top of the toolbox. Enter the complete URL including the preceding http:// as shown in the following figure.

Figure 2.8. Enter image location window

Enter image location window

Inserting tables

The Kavi Edit WYSIWYG editor also allows you to create and manipulate tables. Before you create a table, you should make some decisions about the size of the table that you will need, specifically the number of rows and columns.

If you plan to create complex tables or to use tables for HTML formatting purposes, it is probably worth your while to learn how to create tables by writing HTML source code. You can use the Edit Source tab to edit these tables. The Kavi Edit WYSIWYG editor's table creation tools are designed to be used for simple tables only.

To begin creating a table, place your cursor where you want to insert the table and click on the Insert Table button.

Figure 2.9. Insert Table button circled

Insert Table button circled

Once you have clicked on the button, the Enter Table Information window will open.

Figure 2.10. Enter Table Information window

Enter Table Information window

From this window, you can change the number of rows and columns that the table will contain. You can also change the thickness of the table border. The 'table with head' or 'table without head' option controls the column heading tag. Choosing the 'table with head' option will create a different tag for column headings which can be used to display styles for the headers.

After you have modified the Enter Table Information window to match your needs, click the Insert Table button to insert the table into your page.

Now you can enter your information in the table.

Note

Table editing is problematic due to the inherently complex structure of tables and varying degrees of browser support. Firefox and Mozilla 1.7.3 will allow you to add rows and columns. With these exceptions, you will have to delete the table add a new table configured the way you'd like, or edit the source. Browser support for table deletion also varies, so if you are unable to select and delete the table from the Edit Content tab, try to select and delete each column individually. If this doesn't work, you will have to go to the Edit Source tab to delete the table. Remember to save any edits you want to keep before switching tabs.

Changing the page title

Often people confuse the headlines that they create with the title of the webpage that they have created. The title for a webpage shows up at the very top of the browser window.

Figure 2.11. Page title in browser window

Page title in browser window

To edit the title of a page, simply change the Title field in menu bar of the WYSIWYG Editor.

Figure 2.12. Changing the page title

Changing the page title

Remember, your change will not show up until you save your changes.

Cutting, copying and pasting

After you highlight text, you can cut the text or copy the text. You can then paste the text that you cut or copied into another place in your document.

These functions can be performed by their standard keyboard shortcuts (Cut: Ctrl-X; Copy: Ctrl-C; Paste: Ctrl-V;).

Undo and redo

If you want to undo something that you have done using the WYSIWYG editor and you have not yet saved your changes or done something else, you can use the Undo or Redo buttons.

The Undo button will undo the last edit that you made. The Redo button will redo the last thing that you undid.

Back to top

Application code [[CODE]]

Occasionally when you are editing a page, you will see a page that has [[CODE]] on it when you view it in Edit Mode, but does not have [[CODE]] when you view it in View Mode.

[[CODE]] represents application code that Kavi has created. This application code cannot be modified using Kavi Edit. Therefore, the application code has been replaced with [[CODE]] so that you can see where the application code will display on the page.

Do not delete or change [[CODE]] or you will break the application.

On pages where [[CODE]] is present, you may modify the areas surrounding the application code to make the page appear the way you would like. To see the page as it will appear with all of the application code in place, save your changed, then switch from Edit to View mode.

Back to top

Remember to Save Your Changes

Remember to save before you switch to a different tab or change from the Edit to the View mode by clicking the Save Changes button at the bottom of the WYSIWYG editor window.

If you are finished editing for the day, this may be the right time to accept your changes and finish your session. While you are editing, the pages you've been editing are locked to prevent others from editing the same pages and to keep half-edited pages from being displayed on your web site. any pages that live under these pages. none of your changes (even those that are saved) will be visible to anyone else until you accept your changes and finish your session. Finishing your session also releases the lock on the pages you've been editing, and any pages that live under these pages. , which will make your changes visible to others and allow others to edit these pages.

Back to top