Difference between revisions of "Editor Tutorial"
(32 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | In this tutorial, you will learn how to create a sample home page with a welcome message, an image and a link to an external website. | |
+ | |||
==Invoke the online editor== | ==Invoke the online editor== | ||
− | + | # Go to the page you want to build. | |
− | # Go to the page you want to | + | # Click on the edit button (http://www.rcampus.com/images/buttons/SiteAdmin/edit_page.gif) located next to the page. |
− | # Click on the | ||
− | A web page is a document and will be saved into your document center. | + | Note: A web page is a document and will be saved into your document center. |
− | |||
− | |||
− | |||
− | ==Change text color== | + | ==Working with text== |
− | # | + | ===Enter title and basic text=== |
+ | [[Image:Title_Message.JPG|thumb|Enter text]] | ||
+ | # Enter title (e.g. "Home page") in the '''Title''' box. The title is not displayed to others. | ||
+ | # Enter message (e.g. "Welcome to my site") in the '''content''' area. | ||
+ | |||
+ | |||
+ | ===Change text color=== | ||
+ | [[Image:HighlightText.JPG|thumb|Highlight the text]] | ||
+ | [[Image:Colors.JPG|frame|Select a color]] | ||
+ | # Highlight the text you want to change. | ||
# Click on the '''Text Color''' (http://www.rcampus.com/fckeditor/images/toolbar/button.textcolor.gif) drop-down menu. | # Click on the '''Text Color''' (http://www.rcampus.com/fckeditor/images/toolbar/button.textcolor.gif) drop-down menu. | ||
# Click on the color of your choice. | # Click on the color of your choice. | ||
− | ==Change text format== | + | |
− | + | ===Change text background color=== | |
+ | # Highlight the text you want to change. | ||
+ | # Click on the '''Background Color''' (http://www.rcampus.com/fckeditor/images/toolbar/button.bgcolor.gif) drop-down menu. | ||
+ | # Click on the color of your choice. | ||
+ | |||
+ | |||
+ | ===Change text format=== | ||
+ | While the text is still selected: | ||
# Click on '''Bold''' (http://www.rcampus.com/fckeditor/images/toolbar/button.bold.gif) icon. | # Click on '''Bold''' (http://www.rcampus.com/fckeditor/images/toolbar/button.bold.gif) icon. | ||
# Click on '''Center''' (http://www.rcampus.com/fckeditor/images/toolbar/button.justifycenter.gif) icon. | # Click on '''Center''' (http://www.rcampus.com/fckeditor/images/toolbar/button.justifycenter.gif) icon. | ||
− | ==Change text size== | + | |
− | + | ===Change text size=== | |
+ | [[Image:TextSize.JPG|thumb|Change the text size]] | ||
+ | While the text is still selected: | ||
# Click on '''Size''' drop-down menu. | # Click on '''Size''' drop-down menu. | ||
# Select '''large'''. | # Select '''large'''. | ||
− | ==Create a link== | + | ==Uploading content== |
− | [[Image:InsertLink.JPG| | + | ===Create a link=== |
− | # | + | [[Image:InsertLink.JPG|thumb|Link dialog box will pop up]] |
− | + | # In the online editor, select the text or image to be converted to a link (or enter new text and highlight it). E.g. Type '''My Link''' | |
# Click on '''Insert/Edit Link''' (http://www.rcampus.com/fckeditor/images/toolbar/button.link.gif) icon. This will open the '''Link''' dialog box. | # Click on '''Insert/Edit Link''' (http://www.rcampus.com/fckeditor/images/toolbar/button.link.gif) icon. This will open the '''Link''' dialog box. | ||
− | # Enter the web address or URL (e.g. '''http://www. | + | # Enter the web address or URL (e.g. '''http://www.RCampus.com''') in the URL box then press [OK]. |
− | Note: The link | + | Note: The link will not be active until the page is saved. |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | Note: The uploaded image | + | ===Upload a file or document=== |
+ | # In the online editor, type the title of your document as plain text, e.g. type '''My Document'''. | ||
+ | # Select the text by highlighting it. | ||
+ | # Click on '''Insert/Edit Link''' (http://www.rcampus.com/fckeditor/images/toolbar/button.link.gif) icon. This will open the '''Link''' dialog box. | ||
+ | # Click on '''Upload''' tab then the '''Browse''' button. | ||
+ | # Select a file from your computer and press [Open]. | ||
+ | # Click on '''Send it to the server''' button. When a success notice pops up, press [OK]. | ||
+ | # Press [OK]. | ||
+ | |||
+ | Note: The link will not be active until the page is saved. | ||
+ | |||
+ | |||
+ | ===Link to a previously uploaded document=== | ||
+ | To link to a previously uploaded document from different pages: | ||
+ | # In the online editor, select the text or image to be converted to a link (or enter new text and highlight it), e.g. type '''My Link'''. | ||
+ | # Click on '''Insert/Edit Link''' (http://www.rcampus.com/fckeditor/images/toolbar/button.link.gif) icon. This will open the '''Link''' dialog box. | ||
+ | # From the link dialog box, select '''Browse server''' from the '''link info''' tab. | ||
+ | # Select the document that was previously uploaded. | ||
+ | # Press [OK]. | ||
+ | |||
+ | Note: The link will not be active until the page is saved. | ||
+ | |||
+ | |||
+ | ===Insert an image=== | ||
+ | {{Insert an image}} | ||
+ | |||
==Save your work== | ==Save your work== | ||
# Click on the '''save''' button at the bottom of the page. | # Click on the '''save''' button at the bottom of the page. | ||
+ | |||
+ | |||
+ | ==See also== | ||
+ | {{Editor see also}} |
Latest revision as of 22:15, 2 April 2012
In this tutorial, you will learn how to create a sample home page with a welcome message, an image and a link to an external website.
Contents
Invoke the online editor
- Go to the page you want to build.
- Click on the edit button () located next to the page.
Note: A web page is a document and will be saved into your document center.
Working with text
Enter title and basic text
- Enter title (e.g. "Home page") in the Title box. The title is not displayed to others.
- Enter message (e.g. "Welcome to my site") in the content area.
Change text color
- Highlight the text you want to change.
- Click on the Text Color () drop-down menu.
- Click on the color of your choice.
Change text background color
- Highlight the text you want to change.
- Click on the Background Color () drop-down menu.
- Click on the color of your choice.
Change text format
While the text is still selected:
- Click on Bold () icon.
- Click on Center () icon.
Change text size
While the text is still selected:
- Click on Size drop-down menu.
- Select large.
Uploading content
Create a link
- In the online editor, select the text or image to be converted to a link (or enter new text and highlight it). E.g. Type My Link
- Click on Insert/Edit Link () icon. This will open the Link dialog box.
- Enter the web address or URL (e.g. http://www.RCampus.com) in the URL box then press [OK].
Note: The link will not be active until the page is saved.
Upload a file or document
- In the online editor, type the title of your document as plain text, e.g. type My Document.
- Select the text by highlighting it.
- Click on Insert/Edit Link () icon. This will open the Link dialog box.
- Click on Upload tab then the Browse button.
- Select a file from your computer and press [Open].
- Click on Send it to the server button. When a success notice pops up, press [OK].
- Press [OK].
Note: The link will not be active until the page is saved.
Link to a previously uploaded document
To link to a previously uploaded document from different pages:
- In the online editor, select the text or image to be converted to a link (or enter new text and highlight it), e.g. type My Link.
- Click on Insert/Edit Link () icon. This will open the Link dialog box.
- From the link dialog box, select Browse server from the link info tab.
- Select the document that was previously uploaded.
- Press [OK].
Note: The link will not be active until the page is saved.
Insert an image
- Position the cursor where you want to insert an image.
- Select Insert/Edit Image () icon. This will open the Image Properties dialog box.
- Click on Upload tab then the Browse button.
- Select an image from your computer and press [Open].
- Click on Send it to the server button. When a success notice pops up, press [OK]. You should see the selected image in the Preview box.
- Press [OK].
The uploaded image is now showing on the page. Click on save at the bottom of the page.
NOTE: To display your image fast, first shrink the size of your image and save it as a separate file in your computer before uploading it. Large images take longer time to display.
Save your work
- Click on the save button at the bottom of the page.
See also
- Online editor
- Free Format
- Sliding Tiles
- Editor Tutorial: Learn how to do basic editing, insert images and links, and format text.
- Building content
- Upload pictures
- Editor Toolbar: Descriptions of toolbar icons
- Online editor FAQ