Difference between revisions of "Editor Tutorial"

From RCampus Wiki
Jump to: navigation, search
Line 3: Line 3:
  
  
==Invoke the online editor==
+
==Working with texts==
[[Image:CreateWebpage.JPG|left|frame|]]
+
===Invoke the online editor===
 +
[[Image:CreateWebpage.JPG|frame|First step]]
 
# Go to the page you want to build.
 
# Go to the page you want to build.
 
# Click on the '''create web page''' or '''revise web page''' tab.
 
# Click on the '''create web page''' or '''revise web page''' tab.
Line 11: Line 12:
  
  
==Enter title and basic text==
+
===Enter title and basic text===
[[Image:Title_Message.JPG|left|thumb|]]
+
[[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 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.
 
# Enter message (e.g. "Welcome to my site") in the '''content''' area.
  
  
==Change text color==
+
===Change text color===
[[Image:HighlightText.JPG|left|thumb|]]
+
[[Image:HighlightText.JPG|thumb|Highlight text]]
[[Image:Colors.JPG|left|frame|]]
+
[[Image:Colors.JPG|frame|Select color]]
 
# Highlight the text you want to change.
 
# 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.
Line 25: Line 26:
  
  
==Change text format==
+
===Change text format===
 
While the text is still selected:
 
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.  
Line 31: Line 32:
  
  
==Change text size==
+
===Change text size===
[[Image:TextSize.JPG|left|thumb|]]
+
[[Image:TextSize.JPG|thumb|Change text size]]
 
While the text is still selected:
 
While the text is still selected:
 
# Click on '''Size''' drop-down menu.
 
# Click on '''Size''' drop-down menu.
Line 38: Line 39:
  
  
==Create a link==
+
==Uploading content==
 +
===Create a link===
 
[[Image:InsertLink.JPG|thumb|Link dialog box]]
 
[[Image:InsertLink.JPG|thumb|Link dialog box]]
 
# Press '''Enter''' on your keyboard twice to add space and start a new paragraph.
 
# Press '''Enter''' on your keyboard twice to add space and start a new paragraph.
Line 48: Line 50:
  
  
==Upload a file or document==
+
===Upload a file or document===
 
# To upload a document, first [[#Create_a_link|create a link]].   
 
# To upload a document, first [[#Create_a_link|create a link]].   
 
# Then right click on the link and select 'Edit link' to open the link properties dialog box.
 
# Then right click on the link and select 'Edit link' to open the link properties dialog box.
Line 57: Line 59:
  
  
==Insert an image==
+
===Insert an image===
 
[[Image:ImageProperties.JPG|thumb|Image Properties dialog box]]
 
[[Image:ImageProperties.JPG|thumb|Image Properties dialog box]]
 
# Position the cursor where you want to insert an image.
 
# Position the cursor where you want to insert an image.

Revision as of 21:59, 4 June 2008

This tutorial will show you how to create a web page like this.

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.


Working with texts

Invoke the online editor

  1. Go to the page you want to build.
  2. Click on the create web page or revise web page tab.

Note: A web page is a document and will be saved into your document center.


Enter title and basic text

Enter text
  1. Enter title (e.g. "Home page") in the Title box. The title is not displayed to others.
  2. Enter message (e.g. "Welcome to my site") in the content area.


Change text color

Highlight text
Select color
  1. Highlight the text you want to change.
  2. Click on the Text Color (button.textcolor.gif) drop-down menu.
  3. Click on the color of your choice.


Change text format

While the text is still selected:

  1. Click on Bold (button.bold.gif) icon.
  2. Click on Center (button.justifycenter.gif) icon.


Change text size

Change text size

While the text is still selected:

  1. Click on Size drop-down menu.
  2. Select large.


Uploading content

Create a link

Link dialog box
  1. Press Enter on your keyboard twice to add space and start a new paragraph.
  2. Type some text (e.g. Book Exchange) and highlight it.
  3. Click on Insert/Edit Link (button.link.gif) icon. This will open the Link dialog box.
  4. Enter the web address or URL (e.g. http://www.TBXN.com) in the URL box then press [OK].

Note: The link is created, but it will not be active until the document is saved.


Upload a file or document

  1. To upload a document, first create a link.
  2. Then right click on the link and select 'Edit link' to open the link properties dialog box.
  3. Click on Upload tab then the Browse button.
  4. Select a file from your computer and press [Open].
  5. Click on Send it to the server button. When a success notice pops up, press [OK].
  6. Press [OK].


Insert an image

Image Properties dialog box
  1. Position the cursor where you want to insert an image.
  2. Select Insert/Edit Image (button.image.gif) icon. This will open the Image Properties dialog box.
  3. Click on Upload tab then the Browse button.
  4. Select an image from your computer and press [Open].
  5. 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.
  6. Press [OK].

Note: The uploaded image should be embedded in the page.


Save your work

  1. Click on the save button at the bottom of the page.


See also