Difference between revisions of "Editor Tutorial"

From RCampus Wiki
Jump to: navigation, search
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Image:SampleWebpage.JPG|thumb|A sample web page with an image and a link]]
 
This short tutorial shows the steps to create a basic web page.
 
 
 
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.
 
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==
[[Image:CreateWebpage.JPG|left|frame|]]
 
 
# 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 edit button (http://www.rcampus.com/images/buttons/SiteAdmin/edit_page.gif) located next to the page.
  
 
Note: 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.
  
  
==Enter title and basic text==
+
==Working with text==
[[Image:Title_Message.JPG|left|thumb|]]
+
===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 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 the text]]
[[Image:Colors.JPG|left|frame|]]
+
[[Image:Colors.JPG|frame|Select a 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 27: Line 24:
  
  
==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:
 
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 33: Line 36:
  
  
==Change text size==
+
===Change text size===
[[Image:TextSize.JPG|left|thumb|]]
+
[[Image:TextSize.JPG|thumb|Change the 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.
 
# Select '''large'''.
 
# Select '''large'''.
  
 
+
==Uploading content==
==Create a link==
+
===Create a link===
[[Image:InsertLink.JPG|thumb|Link dialog box]]
+
[[Image:InsertLink.JPG|thumb|Link dialog box will pop up]]
# Press '''Enter''' on your keyboard twice to add space and start a new paragraph.
+
# 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'''
# Type some text (e.g. '''Book Exchange''') and highlight 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 '''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.TBXN.com''') in the URL box then press [OK].
+
# Enter the web address or URL (e.g. '''http://www.RCampus.com''') in the URL box then press [OK].
  
Note: The link is created, but it will not be active until the document is saved.
+
Note: The link will not be active until the page is saved.
  
  
==Upload a file or document==
+
===Upload a file or document===
# To upload a document, first [[#Create_a_link|create a link]].
+
# In the online editor, type the title of your document as plain text, e.g. type '''My Document'''.
# Then right click on the link and select 'Edit link' to open the link properties dialog box.
+
# 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.
 
# Click on '''Upload''' tab then the '''Browse''' button.
 
# Select a file from your computer and press [Open].
 
# Select a file from your computer and press [Open].
Line 58: Line 61:
 
# 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==
 
[[Image:ImageProperties.JPG|thumb|Image Properties dialog box]]
 
# Position the cursor where you want to insert an image.
 
# Select '''Insert/Edit Image''' (http://www.rcampus.com/fckeditor/images/toolbar/button.image.gif) 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].
 
  
Note: The uploaded image should be embedded in the page.
+
===Insert an image===
 +
{{Insert an image}}
  
  

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.


Invoke the online editor

  1. Go to the page you want to build.
  2. Click on the edit button (edit_page.gif) 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 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 the text
Select a 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 background color

  1. Highlight the text you want to change.
  2. Click on the Background Color (button.bgcolor.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 the 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 will pop up
  1. 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
  2. Click on Insert/Edit Link (button.link.gif) icon. This will open the Link dialog box.
  3. 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

  1. In the online editor, type the title of your document as plain text, e.g. type My Document.
  2. Select the text by highlighting it.
  3. Click on Insert/Edit Link (button.link.gif) icon. This will open the Link dialog box.
  4. Click on Upload tab then the Browse button.
  5. Select a file from your computer and press [Open].
  6. Click on Send it to the server button. When a success notice pops up, press [OK].
  7. 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:

  1. 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.
  2. Click on Insert/Edit Link (button.link.gif) icon. This will open the Link dialog box.
  3. From the link dialog box, select Browse server from the link info tab.
  4. Select the document that was previously uploaded.
  5. Press [OK].

Note: The link will not be active until the page is saved.


Insert an image

Image Properties dialog box will pop up
  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].

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

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


See also