Section 3.2

The Page Content Manager (PCM) is a combination of “What You See Is What You Get” (WYSIWYG) text editor and image manager. The Page Content Manager 2.6 is the most unique online HTML Editor which provides advanced editing facilities designed to create stylish content.

Page Content Manager 2.6 now supports MAC! The system requirements for PCM 2.6 are the following:

· IE5.5++ (Windows)

· Latest version of Netscape, Mozilla & Firefox (Windows & Mac OS X)

To begin using the PCM, select the “Content Manager” section of the administration system website. Choose the page that you want to edit from the “page content” listing of pages. To access one of the database driven manager tools, select the appropriate module from those listed in the “database content” listing.

Once you have selected the page you desire to edit from the “page content” section, you will access the PCM editor page. This page is shown in the following example.

The PCM has three sections: Edit Other Pages, Meta Data and Page Content. You will need to add images to the PCM through the “Images” section of the administration website before loading an image onto a specific page or make use of the image button.

Edit Other Pages: This section shows a drop-down list allowing you to move between those pages controlled by the PCM. To move to a different page, simply select the page you would like to edit from the drop-down list. You will then have your new selected page displayed in the PCM.

Meta Data: This section controls the meta data for the page being edited. Search engine crawlers and search engine spiders, the programs that scan your website, use this information when building their indices for use in ranking your website. This process associates your keywords with those keywords entered by the search engine users. This section becomes important if you want to position your website among the first results of a web page search.

This section consists of three fields:

Title: This is the text that defines the title for the current web page. Usually this appears as the title of the web browser window that displays the page.

Keyword:  These are the keywords that summarize the page content displayed upon each specific page. Proper use of keywords is critical to the good placement of your website within specific search engine queries. Keywords must be represented upon the page or the search engine may determine that a penalty should be applied to the page ranking.

Description:  Some search engines may use this field when building their internal indices. Other search engines may use this information to display what the page content of this page represents on their search results page.

Page Content: This is the main component of the PCM and utilizes a custom designed HTML editor to provide a WYSIWYG interface. Many of the features are similar to a Word HTML editor with such capabilities as; font types and sizes, font colors and image management. You may include an image or multiple images within the text area that you are composing; you can insert, video (avi, wmv, mpg), audio (wav, midi, wma), flash animation (swf), & any other files in the form of object or standard links using the toolbar.

The toolbar provides the following functionalities:

  Full Screen Allows you to work with the page content functionalities and text box in a full screen view.

  Preview This provides you of 3 screen resolution options (640x480, 800x600, and 1024 x 768) to preview your submitted content. You will have the opportunity to see how your web pages look like in advance.

  Search & Replace This is used to do a search or to replace any word or text inside the page content box.

  Cut This works the same as the MS Word ™ Cut function.

  Copy This works the same as the MS Word ™ Copy function.

  Paste This works the same as the MS Word ™ Paste function.

  Paste from Word Use this (rather than regular paste) when placing information on a page, which you are copying fro MS Word ™. This will strip out all of the unnecessary code which MS puts in their documents. It will help your page to load faster.

  Undo This works the same as the MS Word ™ Undo function.

  Redo This works the same as the MS Word ™ Redo function.

  Foreground (text) Coloring This is used to change the color of text letters to be displayed. This works similar to the MS Word ™ Foreground Color function. If you click this button at the beginning of a paragraph, all text within the paragraph will be the selected color. If you highlight text, and then click the Foreground button, only the highlighted text will be colored. To select the desired color:

1. Choose, by clicking a base color range in the small palette.
2. If you would like to have more color options, click on “more colors”” and a larger palate will be displayed.
3. Three color categories will appear: web palette, named colors and 216 web safe colors.
4. Click Apply and OK to apply the color to the text.
5. If you would like to add a color to your custom color table, click on the color desired, then the button “add to custom colors,” apply and OK.

Note that the currently selected color appears in the box to the left, along with its color code.

The HTML WYSIWYG Editor's color picker has a composition of 216 web-safe colors that are constructed in a smooth transition between each color. This will help users to find a wide selection of effective color combinations.

  Background (text) Coloring this is used to change the color of area behind the letters. This works similar to the MS Word ™ Background Color function. If you click this button at the beginning of a paragraph, all the background text within the paragraph will be the selected color. If you highlight text, then click the Background button, only the highlighted background text will be colored. To select the desired color:

1.  Choose, by clicking a base color range in the small palette.

2.  If you would like to have more color options, click on “more colors”” and a larger palate will be displayed.

3.  Three color categories will appear: web palette, named colors and 216 web safe colors.

4.  Click Apply and OK to apply the color to the text.

5.  If you would like to add a color to your custom color table, click on the color desired, then the button “add to custom colors,” apply and OK.

Note that the currently selected color appears in the box to the left, along with its color code.

Bookmark. This function is used when you are linking within a same large page. (Note it is not recommended that any page exceed 2 printed pages in length.) The bookmark is used to define places within a page that you may wish to jump into. You give each of those places a Name.

1. Place the cursor where you would like readers jump into when reading a specific subject of your page content.
2. In the HTML Editor, click the Bookmark button.
3. Type in a Name.
4. Click Insert.
5. Click Apply.
6. Click OK.

To link to that Name, use the Hyperlink.

1. Highlight the word or text to be linked to your bookmark.
2. Once inside of the hyperlink dialog, click on the bookmark option and select the name you previously defined in the Name box.
3. Click Insert.
4. Click Apply.
5. Click OK.

  Hyperlink This function can be used to link to another website or within your own website. The top left dropdown menu indicates the type of hyperlink to occur.

With the WYSIWYG Editor, you can insert & update hyperlinks. You can keep the hyperlink dialog open while editing the document. The dialog will show the hyperlink properties, including hyperlink type, bookmark, target & title which you can modify easily.

In most cases, we will use the http:// to link to another site. It is best to have 2 browser windows open at the same time. One is our HTML editor. The other browser should be at the exact page in the site you wish to link to.

1. In the HTML Editor, highlight the text you wish to trigger the link – for instance “Click here”.
2. In the HTML Editor, Click the Hyperlink button.
3. Select http:// from the hyperlink type dropdown menu.
4. Place the cursor in the box to the right of the hyperlink type.
5. Type the “link to” website information. Ex. www.anothersite.com
6. Select the link target dropdown menu. Unless you are using a famed site it is best to select “_blank” from the drop down menu. This will open a new browser window, then link to the desired site in that window.
7. Click Apply.
8. Click OK.

Using the https:// is for linking to secure websites.  Follow the same procedure listed above for http://.

Mailto: hyperlink type. Use this option if you do not want to show your email address on the web site.

1. In the HTML editor, highlight the words that you would like to trigger the email.
2. In the HTML Editor, Click the Hyperlink button.
3. Select the mailto: from the hyperlink type.
4. Type the email address in the box to the right of the hyperlink type.
5. Click Apply.
6. Click OK.
   
   

Image Use this to upload & insert images, or insert images which have been uploaded via Infolink Image Manager.

1. In the HTML Editor, click the Image button.
2. Click on Source folder in order to view the images already uploaded or browse into your files to upload a new image.
3. Click OK.
4. In the Source field, the image URL information should already be filled in.
5. In the Title field enter a short description of the image. (For instance Joe’s House.)
6. From the Alignment dropdown list select the image placement alignment. Left, Right and Middle are the most commonly used.
7. If you want a “frame” around the image, click on Border style button. You may choose from different border types and colors.
8. It is best to place a value in the horizontal and vertical spacing. This provides some “white space” around the image. A value of 5 pixels is usually a good starting point.
9. You may set the displayed dimensions of the image by entering values in the height and width fields. This does not change the Actual image itself. Make sure the height and width are proportional to the original image size; otherwise the image may appear distorted.
10. To finish, click Insert.

To add an image place your cursor on the area of the page you want to place the image. Select from the button entitled “Image” and then select the image you wish to insert onto the page. Close the window and automatically the image is displayed on the page content section. To move the image, simply drag the image to the section of the text area you desire. You can make the text wrap around the image by using the left or right alignment buttons on the toolbar. By selecting the Image option you can upload/Download/Delete files and Add/Delete folders from the folder containing the images.        

   

  Flash This feature allows you to easily insert Flash Animation into the editor.

1. In the HTML Editor, click the Flash button.
2. Click on Source folder in order to view the Flash animation already uploaded or browse into your files to upload a newone.
3. Click OK.
4. In the Source field, the image URL information should already be filled in.
5. Pick the color background of your Flash.
6. You may set the displayed dimensions of the image by entering values in the height and width fields. This does not change the Actual image itself. Make sure the height and width are proportional to the original image size; otherwise the image may appear distorted.
7. When a flash animation is previewed in the flash dialog, it does not show the dimensions in pixels, it shows 100 % in width and height.
8. From the Alignment dropdown list select the image placement alignment. Left, Right, Top, Bottom are the most commonly used.
9. If you want your Flash play continuously click yes into the Loop option.
10. To finish, click OK.

The code generated for the flash animation is not compatible across Netscape browser or Mac OS.

  Media Insert Media into the editor (avi, wmv, mpg wav, midi, wma.)

1. In the HTML Editor, click the Media button.
2. Click on Source folder in order to view the Media already uploaded or browse into your files to upload a new one.
3. Click OK.
4. In the Source field, the image URL information should already be filled in.
5. You may set the displayed dimensions of the image by entering values in the height and width fields. This does not change the Actual image itself. Make sure the height and width are proportional to the original image size; otherwise the image may appear distorted.
6. Depending the control you want to give to your web surfers about the media inserted, either check or leave blank the following options: auto start, auto rewind, show display, show status bar and show controls.

  Table This allows you to create a table. This works the same as the MS Word ™ inserts a table. The table creation & advanced table cover many important functionalities, such as table layout, dimension, and table formatting. You will be able to insert row/cols, collapse cells, include margin, borders and background, etc. When you place the cursor on the table cell, the dialog will show all the table properties which you can easily modify and insert in the predefined place in your text.

Edit Table/Cell This allows you to edit features of the defined table. You can edit specific cells within the table; edit text formatting, border, background, etc. In addition, the edit dialog perform the updates in a real time, there is no need to close the dialog in order to see how the table looks like with the performed changes.

  Show/Hide Guidelines This allows you to show or not show the borders around the table with a click of a mouse.

  Special Characters Click this button if you would like to add any special characters into your text, such as, accents, currency symbols, copyright symbol, etc.

  Line This will insert a horizontal line at the place where the cursor is. One use is to separate flat page content from content extracted from a database table such as the products table Line.

Remove Formatting. Click on this to clean up HTML tags and extra code.

  View/Edit Source This is for advanced users only! You must know HTML. You can preview/edit the HTML Source with code formatting & coloring. The HTML Source Window is resizable.

  Paragraph Formatting This let’s you determine the size of the text within a paragraph. Click the down arrow to select the appropriate size from the displayed list. WYSIWYG Editor has Text Formatting (modeless) dialog that provides advanced control of the text style. You can apply the formatting over either Selected Text or Selected HTML Tags/objects.

  Text Font There is a list of potential fonts to use in this page. Click the down arrow to see a complete list. If you select a font at the beginning of a paragraph, that font will apply to all text within the paragraph. To change a font type, simply highlight the desired text and select the font type while the text is highlighted. Note: Ariel, Courier, Tahoma, Times, and Verdana are pretty much universally supported.

  Text Size This display the standard HTML font sizes. Click the down arrow to see a complete list. If you select a size at the beginning of a paragraph, that size will apply to all text within the paragraph. If you highlight specific text, then select the size, the specified size applies only to that text. To select a font size, simply choose from the dropdown menu. The font sizes are defined from 1 (smallest) to 7 (largest).

  Bold This works the same as the MS Word ™ Bold function. If you click this button at the beginning of a paragraph, all text within the paragraph will be bold. If you highlight text, then click the bold button, only the highlighted text will be bold.

  Italics This works the same as the MS Word ™ Italics function. If you click this button at the beginning of a paragraph, all text within the paragraph will be Italic. If you highlight text, then click the Italic button, only the highlighted text will be italic.

  Underline This works the same as the MS Word ™ Underline function. If you click this button at the beginning of a paragraph, all text within the paragraph will be underlined. If you highlight text, then click the Underline button, only the highlighted text will be underlined  

Strikethrough This works the same as the MS Word ™ Strikethrough function. If you click this button at the beginning of a paragraph, all text within the paragraph will be struck through. If you highlight text, then click the Strikethrough button, only the highlighted text will be struck through.   

  Justify Left This works the same as the MS Word ™ paragraph Justify Left function. If you click this button at the beginning of a paragraph, all text within the paragraph will be left justified.

  Justify Center This works the same as the MS Word ™ paragraph Justify Center function. If you click this button at the beginning of a paragraph, all text within the paragraph will be center justified. Hint: This is often used when displaying contact and address information.

  Justify Right This works the same as the MS Word ™ paragraph Justify Right function. If you click this button at the beginning of a paragraph, all text within the paragraph will be right justified.

  Full Justify This works the same as the MS Word ™ paragraph Justify Full function. If you click this button at the beginning of a paragraph, all text within the paragraph will be full justified.

Superscript This works the same as the MS Word ™ Superscript function. If you click this button at the beginning of a paragraph, all text within the paragraph will be superscripted. If you highlight text, then click the Superscript button, only the highlighted text will be superscripted.

  Subscript This works the same as the MS Word ™ Subscript function. If you click this button at the beginning of a paragraph, all text within the paragraph will be subscripted. If you highlight text, then click the Subscript button, only the highlighted text will be subscripted.

  Numbering This works the same as the MS Word ™ paragraph Numbering function. If you click this button at the beginning of a paragraph, all text within the paragraph will be numbered. At the end of each line you wish to be numbered, press the Enter key. At the end of the last numbered line, press the Enter key twice to turn off numbering. Hint: This is great for display procedural steps.

  Bullets This works the same as the MS Word ™ paragraph Bullets function. If you click this button at the beginning of a paragraph, all text within the paragraph will be bulleted. At the end of each line you wish to be bulleted, press the Enter key. At the end of the last bullet line, press the Enter key twice to turn off bulleting. Hint: Use to display a list of products, services, locations etc.

  Paragraph Indent This works the same as the MS Word ™ paragraph Indent function. If you click this button at the beginning of a paragraph, all text within the paragraph will be indented. Place the cursor at the beginning of a paragraph, where you wish to indent then click the Indent button. You may indent more than once within a paragraph. Use this to return to original desired paragraph alignments. See also Paragraph Outdent.

  Paragraph Outdent This works the same as the MS Word ™ paragraph Outdent function. If you click this button at the beginning of a paragraph, all text within the paragraph will be outdented. Place the cursor at the beginning of a paragraph, where you wish to outdent then click the Outdent button. You may outdent more than once within a paragraph. Each time you press the Enter key (creating a new paragraph) you will be aligned with the current active Outdent. To return to original settings, use the Paragraph Indent function. See also Paragraph Indent.