WebJunction

Back to User Guide Table of Contents »

Contributing Content

• Create a Document
• Using the WYSIWYG Editor
• Insert an Image
• Working with Images
• Copyright & Creative Commons

For more on Contributing See Also:

Contribute

Create a Document

You can publish articles, handouts, presentations and other types of content to WebJunction, thereby helping to build the community's knowledge base. You may post your document to any page that displays a Documents tab. Only signed-in members can post documents; anonymous publishing is not allowed.

You may post a document to any page that displays a Documents tab. Find the page most relevant to your content and follow the steps described below.

Create your Document

Click the Documents tab. You should see a Submit Document button at the top of this list. If you do not, please verify that you are signed in.

Click the Submit Document tab to begin the publishing process. There are four main steps to creating a document:

• Enter document details
• Enter content
• Set Preferences
• Copyright

STEP 1: Enter document details

1. Enter a Title. This can be no longer than 75 characters (including spaces). Be sure to choose a title that will make sense when read out of context from the rest of the document, such as in search results. Avoid vague or "cutesy" titles.
    
2. Enter the name of the document’s authors. By default, your name will appear in this field; you can change this if needed, simply by typing new text in that field.
    
3. Write a description, which will appear on the site under the title of the document, summarizing the content. This text will also be used to aid searching, so it is helpful to choose terms that are likely search keywords. The description field is limited to no more than 250 characters.

Note: All 3 fields in this step are required; you will receive an error message if any are left blank.

If you scroll down the page, you’ll see the other three fields:
 

• Publication Date: Defaults to today’s date; however, you can select a different date if needed.
   
• Choose Topic Pages: Defaults to the page you are currently working on. This field lists all of the pages in the site and lets you add the document to other pages in the site. However, it is currently recommended that you do not try to post to additional pages until we make refinements to this process.
   
• Tag this document: You can select tags from the list or add your own tags to describe your document.

STEP 2: Enter content

You can enter content directly into the WYSIWYG editor or copy and paste content from another source, such as a Word document or text file. You can also choose to attach a downloadable file to your document. Executable files (e.g., an .exe. or .bat file) are not allowed due to the possibility of a virus. Please be aware that large files will be difficult for people with slower connection speeds to download.

IMPORTANT: If you would like to display Creative Commons or other copyright information, please add that text to the WYSIWYG editor box, below the body of your article. This is necessary until we are able to fix the bug that is preventing the display of the copyright text shown in Step 4.

The WYSIWYG editor offers a variety of options for editing and formatting your text. You’ll find character selection and formatting tools, text search, and paragraph formatting, among others. You can add links to pages on other websites, images and tables to your own pages as well.

For more information on the editor see Using the WYSIWYG Editor to Create Content.

Upload files for download

You can also choose to upload a file such as a Word document or PDF file.
 

1. Go to add/or upload a file beneath the WYSIWYG editor.
    
2. Use Browse to locate the file that you want to upload. You can upload multiple files. Do not upload .exe. or .bat files, which are prone to viruses.

STEP 3: Set Preferences

The third step when creating a document is to enable or disable other members' ability to rate the document. You do this by clicking the checkbox on the left side of the page. Rating is a five-star system for members to rank the value of content.

STEP 4: Enter copyright information

The final step is to add copyright information. There is only one field in this step, and it is required for posting the document. You can accept the copyright notice that is provided on the page or you can provide your own. (Or you can choose not to enter a notice.) In any case, you must click the checkbox acknowledging that you are legally entitled to distribute the content in order to complete the posting process.

IMPORTANT: If you would like to display Creative Commons or other copyright information, please add that text to the WYSIWYG editor box, below the body of your article (as part of Step 2). This is necessary until we are able to fix the bug that is preventing the display of the copyright text shown in Step 4.

You can find more information about copyright under the Copyright and Creative Commons section of this guide.
 

Once you have created your document, you can choose the following options:

• Click Post to publish your document to the site
• Click Save and Continue Editing to save the document but not publish it at this time
• Click Delete to delete your document
• Click Preview to view the page before saving or posting
• Click Cancel to exit the document editor
   

See Also:

• Copyright and Creative Commons
• Using the WYSIWYG Editor to Create Content

Return to Top

Using the WYSIWYG Editor to Create Content

WebJunction provides a full set of tools for adding and formatting text and graphics on a page. The following illustration contains a screenshot of the editor and its toolbars:

The top two lines in the toolbar are for handling text. Many of these buttons may seem familiar if you’ve used a word processor like Microsoft Word. If you are unfamiliar with a particular button, you can hover your mouse over the button and the name of the tool will appear after a few seconds.

Text Editing Tools

This table describes all of the toolbars and their function.

Functions	Toolbar and Buttons
Set font properties such as font type, size and color
Set character formatting properties like bold, italic, etc.
Undo/redo; Cut, copy and paste; paste from plain text, paste from Word; select all content; and remove format
Find and replace content and perform spell checking
Create numbered and bulleted lists; indent or outdent paragraphs; left, center, right and full justify paragraphs

HTML Formatting Tools

Functions	Toolbar and Buttons
View HTML code
Create and delete links and anchors
Add images, Adobe Flash files, tables, emoticons and special characters

The rest of this topic will show you how to use most of the HTML formatting tools in the last row of buttons:

• Insert Link
   
• Remove Link
   
• Insert Anchor
   
• Insert Table
   
• Insert Smiley (Emoticon)
   
• Insert Special Characters

We are currently working on documentation around inserting Flash files and will make this information available soon.

Add Links

Rather than pasting a website URL into the text, it is preferable to create a hyperlink for text in your document.

To add a link to a page:

1. Select the link text you want to link from and click the Insert/Edit Link button.

2. Enter the URL for the page you are linking to and click OK. In this case, we are linking to a page with information about USB flash drives.

If you prefer to display the URL in your text, watch out for long URLs that can distort the layout of the page. If your URL is long, consider using tinyurl.com to create a short version.

Remove a Link

To delete a link from a page, select the link and click the Remove Link button. This will not delete the text that was associated with the link.

Insert/Edit Anchor

Anchors are used to allow a user to jump to a specific area on the page. For example, if you have a very long HTML page with several sections, you might put the phrase “Back to Top” at the end of each section. Doing this makes it easier for members to read and move through your document.

Create the Anchor

1. Select anchor text and click the Anchor button.

2. Enter a name for the anchor and click OK. For this example, we’ll call the anchor content_management

The anchor has been added; now we need to link to it.

Add a Link to an Anchor

1. Select the text on your page that you want to link to your anchor.

2. Click the Insert/Edit Link button.

3. Select the Link to anchor in text.

4. Select the name of the anchor that you created earlier in the Select an An Anchor by Anchor Name dropdown box.

5. Click OK.

Insert/Edit Table

Please be aware that tables created in HTML can create problems for readers using certain browsers or accessibility devices, and they are therefore discouraged.

To add a table to a page:

Place the cursor where you want the table displayed and click the Insert/Edit Table button.

In this window, you can set

• The number of rows and columns.
   
• The width of the table in pixels or percent of the window. This should be no more than 700 pixels to prevent distortion of the page layout.
   
• The height of the table in pixels.
   
• The width of the border around the table.
   
• Its alignment on the page – Left, Center or Right.
   
• The amount of spacing between cells.
   
• The amount of spacing between the border of the cell and its contents.
   
• The caption for the table.
   
• A summary of the table’s content.

These settings in the above example will create a table that looks like this:

You can then insert content into each cell in the table.

Insert Smiley (Emoticon)

To insert a Smiley face on a page:

1. Click the Smiley button in the editor.

2. Select the “Smiley” character you want to use. The image will be placed on your page, in line with your text.

Insert Special Character

Special characters are those which cannot be created with your keyboard, such as diacritics and certain punctuation.

1. Click the Special Character button in the editor.

2. Select the Special Character that you would like to use. The character will be placed on your page, in line with your text.

External Topics

The following site has additional information on using the WYSIWYG editor included with the WebJunction platform: http: //docs.fckeditor.net/FCKeditor_2.x/Users_Guide

Return to Top

Insert an Image

You can add images to a document you create or edit on WebJunction. Before you can insert an image, you need to make sure your image is stored in a place where it can be accessed from the site. A photo-sharing website such as Flickr is a good option for this. Any formatting or resizing of your image should also be done before it is inserted into your document or portlet.

Adding an Image to your Document

The following example will show you how to add an image to your document:

1. Locate the document you will add your image to and click the Edit link.
2. Select the location where your image will be placed.
3. Click the Insert/Edit Image button.
4. Copy the image URL and press CTRL + V to paste the image URL into the field.
5. Add Alternative Text to your image. This text will appear if the browser is unable to display your image, which is important for those users with special accessibility requirements.



6. Click the OK button and the image will appear on the page.
 

For our example, the page would look like this:



Note: Adding alternative text or “ALT text” to your images makes your site more accessible for users who rely on a screen reader to interact with your site. The screen reader will read the ALT text and give visually impaired users a better understanding of the content on your site.

See Also:

• Working with Images
• Images and Graphics Best Practices
• Images and Graphics Discussion

Working with Images

This topic describes how to format documents with images and text.

• If you haven’t used the WYSIWYG editor, you should see the Using the WYSIWYG Editor to Create Content topic.

We also recommend that you resize your images to the size you want displayed on the page before you insert them into your document. This will ensure that your image is displayed correctly. Altering the size of your image within the WYSIWYG editor can cause some distortion. Images should be no wider than 675 pixels to avoid distortion of the page layout.

Scenario: You are creating a document about life in France and you want to add an image of the Eiffel Tower on the top left side of the page.

1. Enter your text into the WYSIWYG editor.

2. Place the cursor where you want the image.

3. Click the Insert/Edit Image button on the toolbar and complete the following fields

• Leave the first two values as they are. They are the width and height of the image in pixels.
• For the border field, set the value to 3.
• For the HSpace field, set the value to 5
• For the VSpace field, set the value to 5
• For the Align dropdown, select Left.

4. Click the OK button.

• HSpace refers to the number of pixels to the left and right of the image
• VSpace refers to the number of pixels above and below the image
• Alignment refers to the position of the image relative to the text and the margins of the page. While the editor offers your 10 different options for aligning images, the topic will deal with only two of them – right alignment and left alignment

Here are three samples to show you how these values interact.

The image aligns with the top and left side margins of the page, but there’s not enough space between the image and the text. The number of pixels between the bottom of the image and the top of the next line of text are another matter.

There is also no border around the image because the width of the border field is also set to 0.

Example 2: Border = 9, HSpace = 9, VSpace = 9

In this case, the image does not align with the margins to the left and above, but there is more room between the image and the text to the right and below.

A border has also been added to show what a border of that width looks like.

This sample is possibly the best of the three. The top of the image aligns with the top margin. The space between the right edge of the image and the text looks better, but the left edge of the image doesn’t align with the left margin of the page.

Align the Image to the Margin

There are nine values for alignment. This illustration shows you your choices:

For the most part, you’ll use either Left or Right alignment. The samples above have shown you how Left alignment works.

This illustration shows you what Right alignment looks like when the text is left-aligned:

This illustration shows you the right-aligned image with right-aligned text: