Home
About Us
Contact Us
Help/Support


Search WebMedley 
  
  

User Manual - Chapter 4 - Editor toolbar
Return to table of Contents  

4. Editor Toolbar - Version 2.0
  4.1 Introduction
  4.2 Functions
    4.2.1 Text - (alignment, styles, fonts, colors, attributes)
    4.2.2 Tables (cells, borders, cell padding & spacing, editing)
    4.2.3 Images and Extra Media
    4.2.4 Links (within site, to other sites, to email addresses)
    4.2.5 Cut, Copy, Paste, Undo
    4.2.6 Find, Print Preview, Lists, Indent, Outdent
    4.2.7 HTML Source Code
    4.2.8 Absolute Positioning
    4.2.9 Save
  4.3 Version Notes

 
4.1 Introduction
The Editor Toolbar is the key component for managing the content of your Web site. The toolbar is an Internet Explorer plug in, and turns your Web browser into a full-featured online editor. The toolbar is how you enter text and images into your template pages. Additionally, you can create tables, lists and hyperlinks within your Web page documents.

[Back to Top]

4.2 Functions
There are numerous functions and option settings available from the Editor Toolbar. For specific information for each function please review the topics below:

4.2.1 Text
To enter text into your Web page, simply place your cursor inside the main body area of your Web page document and begin typing. To create a break for a new paragraph, hit the Enter key. (This will produce a double spaced line break). To create just a single line break, hold down your Shift key while pressing the Enter key.

Text Alignment
By default your text alignment will be to the left margin of your Web page. To change the alignment of a block of text, first highlight the block of text and then press either the left align, center align, or right align buttons on the toolbar.

Styles
For advanced users, the toolbar allows you to utilize styles for your text. Each Web page template has a pre-defined set of text styles. To change the text style of your text, first select (highlight) the text with your cursor and then press the Style button on the toolbar.  A drop-down menu will appear and allow you to select from the menu of pre-defined styles. The standard font for text is "body". Scroll through the list to select your desired font style and click OK.

Fonts, Colors and Attributes
The toolbar allows you set additional font properties by first the selecting the text you wish to effect and then selecting the Font pull-down menu to change font types.

You may also set the text color by using the color chooser (Foreground Color) or set the text background (Background Color).

You can also set your text as bold, underline, or italics by using the corresponding Bold, Underline or Italics button on the toolbar.

[Back to Top]

4.2.2 Tables
Using the Editor Toolbar, you can easily add spreadsheet-like tables into your Web page. To insert a table, simply place your cursor inside your Web page at your desired location and click the Insert Table button. A pop up window will appear with the options for your table. 

Rows & Columns - Enter a number for the table dimensions that you require.

Border - Enter a number for the pixel width of the border for your table. (Tip - Leave the default number of 1 for the table border until you have completed you data entry in the table. If you set the border to 0, you will be unable to see the table and cells in the page.)

Cell Padding - This is the amount of spacing (in pixels) that will surround or "pad" the inside of each table cell. This padding will produce a buffer for the contents of each cell. For example, if you enter text into a table cell with a padding of 4, there will be 4 pixels of white space between the border of the table cell and the text. (Tip - The border of a table cell is like a margin. Text is much easier to read if it is not aligned flush to the border. A 2 to 4 pixel padding of white space make reading text in a table cell easier to read.)

Cell Spacing - This is the amount of spacing (in pixels) that will set between each of your cells in the table. This padding occurs on the outside of each cell.

Width - This is the default width (in pixels) of your new table. (Tip - The table will expand to accommodate the width and height of what's placed into the table cells.).

Edit Table - To insert content into each cell, place your cursor inside the cell and begin typing. The cell will expand with the content. To edit the attributes of the table itself, you must first get the focus of the table. To get the table focus, hover your cursor over the table border. When the cursor changes to a 4-way arrow, click on the table. The table will now appear with small square "handles" around it. You can now select the properties button to get the property options for the table. 

In the table properties window, you can reset the Cell Padding, Cell Spacing, and Border. You can also add a background or border color to the table by selecting the table and using the color chooser feature (either Foreground Color or Background Color).   To change the alignment of the table, select the table, then click on Align Left, Align Center, or Align Right.

[Back to Top]

4.2.3 Images and Extra Media (Documents, Flash, & Video)
The WebMedley System has a special management feature for images and other special file types. The Media Manager is a component of the Management Console and makes it easy for you to create your own library of images to be used in your site. The Media Manager also contains a few pre-selected images for your use to get started. Note: All media/extra media that you wish to provide for use in your Web site must first be uploaded to the Media Manager. This task is performed in the Management Console. Click on the Media Manager in the console navigation and follow the page instructions for uploading graphics. The acceptable file formats for graphics are .GIF and .JPG.  For documents, .PDF files work best, but you can also utilize .DOC (Word Document) files. - See 4.2

To insert an image/extra media into your Web page, first place your cursor in the area of the page that you want the image to appear. Click on the Insert Media icon in the toolbar. The Media Manager window will appear with tabs for each type of media, including thumbnail previews of the images available for your Web page. You can preview media/extra media from different libraries by selecting from the drop down list. To add an image/extra media to your page, simply click on the thumbnail and click the Insert button. Once you have an image in the page, you can resize and alter various properties by clicking on the Properties icon. In the image properties window you will be able to set the alternate text (label), alignment (text wrap), dimensions and border for your image. When changing the dimensions of an image, it is advisable to select "keep aspect ratio"; otherwise your image may become distorted.

[Back to Top]

4.2.4 Links
A link is how Web page users navigate from one Web page to another. A link can be either text or an image. You may link to another page in your Web site, to another Web site or create an email link.

Internal Links - To create a link to an internal Web page (a Web page on your site), highlight the text (or focus the image) that you want to link and press the Insert Link button on the toolbar. In the Hyperlink window select the type of link that you want to create (Http:// is the default for linking to a Web site) and type the link URL in the entry space. (For example, http://www.yourdomain.com/pagename.html) Click OK.

*To find the URL of the internal page, click on the page in the management console, and then choose the Advanced tab on the preview screen.  The Web page file name is the top field on the right column.  You may change this, as long as you do not use spaces, and it should always end in .html. 

External Links - To create a link to an external Web page (a site other than your own), highlight the text (or focus the image) that you want to link and press the Insert Link button on the toolbar. In the Hyperlink window select the type of link that you want to create (Http:// is the default for linking to a Web site) and type the link URL in the entry space. (For example, http://www.faithstreams.com) Click OK.

* Remember to always put www. at the beginning of each site's address, and leave the http:// prefix.

E-mail Addresses - To create a link to an email address, highlight the text (or focus the image) that you want to link and press the Insert Link button on the toolbar.  In the Hyperlink window select the type of link (mailto: is the necessary type for email addresses) and type the email address in the entry space.  (For example, mailto:pastor@yourdomain.com) Click OK.
To edit your link, simply highlight the text or image and click the Insert Link button. Change the URL address in the Hyperlink window.

[Back to Top]

4.2.5 Cut, Copy, Paste, Undo
The standard editor functions for Cut, Copy, Paste and Undo are available from the toolbar. You can also use keyboard shortcuts for each of these functions. Simply highlight the text or position the cursor in the page. Cut(Ctrl+x), Copy(Ctrl+c), Paste(Ctrl+v) and Undo(Ctrl+z).  You do need to be careful in what you copy and paste from, however. (more...)

[Back to Top]

4.2.6 Find, Print Preview, Lists, Indent, Outdent
Find - To search for word matches in your document, click the Find button and enter your search word in the search window.

Print Preview - To get a preview of how your Web page will look when printed, click the Preview button on the toolbar.
Lists - To organize your information, it is helpful to utilize lists.  The WebMedley toolbar has two types of lists:
Ordered List - This will create a numbered list on your page.
Unordered List - This will create a bulleted list on your page.
Indent/Outdent - Click on the Indent button to indent a paragraph of text, and Outdent to reverse the indent and align a paragraph with the rest of the text.

[Back to Top]

4.2.7 HTML Source Code
If you understand HTML, you can edit your Web page content directly by viewing the HTML source code. You can access and edit the source code by clicking the HTML Source button on the toolbar.

The user-friendly interface for HTML editing allows you to find content in one of two ways. The binoculars allow you to search for specific key words or phrases amongst the code. This makes it easier to find exactly what string of HTML you are looking for. Once you click this icon a dialogue box will pop up with a search field.  Input what you are trying to find and click Find Next.

You can also search by highlighting text and then pressing <> button.  It will jump to the text or image that you have selected in the body. This is a more preferred way due to the fact that it will highlight the entire string that corresponds to the actual content.
The refresh icons will point to the table that they are going to refresh.  To refresh the editable area, click the top one.  To refresh the HTML area, click the bottom one.

Refresh frequently to make sure that you are viewing the most recent changes you have made to your page.

[Back to Top]

4.2.8 Absolute Positioning and Layers
To send a picture or table into absolute positioning mode, highlight the media element, then click the Absolute Position button.  You will then have the ability to drag this media element wherever you want.  To position the element simply click away from it.  *Note:  This will disable text wrap capabilities.*

The layer buttons Bring to Front and Send to Back do exactly what they say.  They will take any item that has been in absolute positioning mode and move it in front or behind other media items that are have the same attributes.  An example would be to create a table that has text in it.  Once you have a table with text, insert a picture.  Select the picture and send it into absolute positioning mode then place it where you want.  Click on the table and send it in to absolute positioning mode.  Move the table over top of the picture and let go.  Click away from both of them.  Click the picture.  Then hit the Bring to Front button.  This will make the picture overlap the table that has the text in it.  To reverse this, click the Send to Back button after selecting the picture.

[Back to Top]

4.2.9 Save Icon
As you work on your Web page, it is important to save your data often.  (Since this is a Web-based login system, there is a possibility of your session 'timing out' and logging you out of the management console if you remain idle on a page for an extended period of time.)  To save, simply click the Save button on the toolbar. Your work will automatically be saved to the WebMedley Web servers.  *The toolbar Save button is the only way to save your information on your Editing screen.*  Be sure to also save once you have completed working on a particular page.  You may now publish your page(s) via the Content Manager functions in the Management Console.  The place to publish is located in the Home screen of WebMedley (see the top right corner of the management console, next to Logoff and Help).

[Back to Top]

4.3 Version Notes
The Webmedley system has two versions of the Editor toolbar.

For Windows 95 users:  You must use toolbar version 1.0.  Information about this toolbar and how to download it can be found at http://www.faithstreams.com/events/download.asp.   This toolbar has one row of buttons and will appear as "Editool" under your toolbar menu in Internet Explorer.

For Windows 98se (second edition)  & higher users:  You will use toolbar version 2.0.  To download this toolbar, visit http://www.webmedley.net/editor

Contact support@webmedley.net to obtain the password to install this toolbar.  This toolbar has two rows of buttons and will appear as "Authorworks Main" and "Authorworks Format" under your toolbar menu in Internet Explorer.

[Back to Top]

   ©2006 FaithandValues.com, Inc. All rights reserved
™WebMedley is a trademark of FaithandValues.com, Inc.