Kavi Help CenterKavi® Edit Help
| Chapter 2. Edit Content Tab | ||
|---|---|---|
 |
|
|
Table of Contents
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 very familiar and easy to learn.
Back to topTo use the Edit Content tab's WYSIWYG editor, your computer will have to 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 topIf 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.
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.
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.
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. |
While the text formatting tools give you the ability to make your page look almost any way you choose, it is best to practice restraint in your use of these tools.
There are several reasons why less text formatting is better. For example, too many different text formats on the page tends to appear inconsistent and may be distracting for the end user.
Perhaps most importantly, any text formatting other than selecting one of the predefined "Style" options is actually a local, manual override of the styles set in the default style sheet established for your web site. The default style sheet defines the way that text should be displayed on web pages so that a consistent look is maintained throughout your web site. When you apply formatting to a predefined style or other setting, you deviate from the uniform look of your site. Local formatting overrides also tends to create maintenance issues.
Therefore, we urge you to practice restraint when it comes to text formatting and remember the old adage: "Less is more."
Kavi Edit makes it simple to add hyperlinks to pages on your Web site or to pages on other Web sites. Before you can link to a file or image, you will need to add that file or 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Once you have clicked on the button, the Enter Table Information window will open.
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.
Often people confuse the headlines that they create with the title of the web page that they have created. The title for a web page shows up at the very top of the browser window.
To edit the title of a page, simply change the Title field in menu bar of the WYSIWYG Editor.
Remember, your change will not show up until you save your changes.
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;).
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.
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 topBefore 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.
Because you are editing in a session, none of your changes (even ones that you have saved) are visible to anyone else until you decide to accept the changes by finishing your session, nor can anyone else edit these pages. Finish your session to release the lock, which will make your changes visible to others and allow others to edit these pages.
Reminder: Save your changes before you switch to another tab or mode or you will lose your work.
Back to top|
|
|
|
| Chapter 1. Core Concepts |  |
Chapter 3. Edit Source Tab |