Difference between revisions of "Building content"

From RCampus Wiki
Jump to: navigation, search
 
(32 intermediate revisions by 3 users not shown)
Line 1: Line 1:
This page explains various ways to build and organize your website or ePortfolio content.
+
[[Image:OnlineEditor.JPG|thumb|Online editor menus will appear after clicking the edit page button]]
 +
This page explains the various ways to build and organize your website or ePortfolio content.
  
== Organizing content ==
 
The [[side menu]] acts as the top-level index for your site.  See [[side menu]]s for more information.
 
  
Content can be further organized by structuring web pages and by creating links to other documents within these pages.  See the following for more informaiton.
+
'''Note:''' It is important that you DO NOT post any of your personal information i.e. address, phone number, etc. on the public pages of your site.
 +
 
 +
 
 +
== Organizing Content ==
 +
The [[side menu]] acts as the top-level index for your site.  See [[side menu|side menus]] for more information.
 +
 
 +
Content can be further organized by structuring web pages and by creating links to other documents within these pages.  See below for more information.
 +
 
 +
For a step by step instruction, see [[Editor Tutorial]].
 +
 
  
 
== Building Web Pages ==
 
== Building Web Pages ==
With out [[online editor|online editing]] capabilities, building a web page is as easy as using a familiar word processor. To learn more about this topic, see [[online editor]].
+
With our [[online editor|online editing]] capabilities, building a web page is as easy as using a familiar word processor.  
 +
 
 +
To learn more about this topic, see [[online editor]].
 +
 
  
 
== Uploading Content ==
 
== Uploading Content ==
You can upload documents directly into a web page.  That is a great way to organize your content within a web page while adding links and descriptions to the content.  To upload documents, use the http://www.rcampus.com/fckeditor/images/toolbar/button.link.gif link tool of the [[online editor]].
+
You can upload documents directly into a web page.  This is a great way to organize your content within a web page, while adding links and descriptions to the content.   
 +
 
 +
To upload documents, use the (http://www.rcampus.com/fckeditor/images/toolbar/button.link.gif) link tool of the [[online editor]]. Click [[Editor_Tutorial#Uploading_content | here for step-by-step instructions]].
 +
 
  
 
== Inserting Images ==
 
== Inserting Images ==
You can eaily upload and insert images into a web page.  Use the http://www.rcampus.com/fckeditor/images/toolbar/button.image.gif insert image tool of the [[online editor]] to insert and manage images.
+
You can easily upload and insert images into your web page.   
 +
 
 +
Use the (http://www.rcampus.com/fckeditor/images/toolbar/button.image.gif) insert image tool of the [[online editor]] to insert and manage images. Click [[Upload pictures | here for step-by-step instructions]].
 +
 
 +
 
 +
== Inserting Flash Components ==
 +
Use the (http://www.rcampus.com/fckeditor/images/toolbar/button.flash.gif) insert Flash tool of the [[online editor]] to insert flash components to your website.
 +
 
 +
 
 +
== Displaying Content==
 +
=== YouTube and other sharable content===
 +
To insert a clip from YouTube.com or similar content sharing websites:
 +
# Put your web page in the edit mode.
 +
# Press the '''Source''' located on top/left of the online editor toolbar. 
 +
#* This will put your page in HTML editing format.  Be extremely careful with this page.
 +
#* As a precaution, copy the entire HTML content to a file on your computer.  In Windows, press Ctrl-A to select all HTML code, Ctrl-C to copy, open Notepad, and press Ctrl-V to paste the content.
 +
# Open YouTube (or other sharing sites) in a separate browser window
 +
# Go to the clip that you want to add to your webpage
 +
# Copy the '''embed''' code.  In YouTube, the '''embed''' code is under '''share''' / '''embed'''
 +
# Switch back to the online editor.
 +
# If you are familiar with HTML, paste the code from Youtube to the desired location.  If you are NOT familiar with HTML, paste the code to the very bottom of the HTML content (in Windows press Ctrl-V).
 +
# Press the '''Source''' button again.  You may NOT be able to see the video yet, but you can see a box where the file will be displayed.  You can move the box to the desired location at this time.
 +
# Press [save]
 +
 
 +
 
 +
=== PowerPoint presentations ===
 +
This section explains different methods of showing a PowerPoint presentation on your RCampus web pages:
 +
* Using sites such as slideshare: The process is exactly the same as [[#YouTube_and_other_sharable_content|Displaying YouTube and other sharable content]].
 +
* Using Google Docs: See [[#Google_Docs_on_your_web_page|Displaying Google Docs on your web page]]
 +
 
 +
 
 +
=== PDF documents ===
 +
See [[#Google_Docs_on_your_web_page|Displaying Google Docs on your web page]]
 +
 
 +
 
 +
=== Word documents ===
 +
See [[#Google_Docs_on_your_web_page|Displaying Google Docs on your web page]]
 +
 
 +
 
 +
=== Google Docs on your web page ===
 +
You can use Google Docs to display a Word, Excel, PowerPoint or PDF directly on your web pages:
 +
# Upload your PowerPoint, PDF, Word, or other files to Google Docs.  This will require you to login at http://docs.google.com.  Create an account on Google or Gmail if you don't have one.
 +
# Open the document that you want to display on RCampus in Google Docs.
 +
# Click on File and select "Publish to the web..."
 +
# Select "Embed" and press '''Publish'''
 +
# Copy the code displayed on the screen.
 +
# Open a new browser window and go to the RCampus page that you want to add the Google Doc to.
 +
# Put your web page in the edit mode.
 +
# Use the button labeled '''Source'''.  This will put your page in HTML editing format.  Be extremely careful with this page.
 +
# As a precaution, copy the entire HTML content to a file on your computer.  In Windows, press Ctrl-A to select all HTML code, Ctrl-C to copy, open Notepad, and press Ctrl-V to paste the content.
 +
# If you are familiar with HTML, paste the code from Google Docs to the desired location.  If you are NOT familiar with HTML, paste the code to the very bottom of the HTML content (in Windows press Ctrl-V).
 +
# Press the '''Source''' button on top.  You may NOT be able to see the Google Doc yet, but you can see a box where the file will be displayed.  You can move the box to the desired location at this time.
 +
# Press [save]
 +
 
 +
 
 +
==Inserting an Anchor==
 +
# Place your cursor before the text or section you want the anchor to refer to and press the anchor button on the toolbar.
 +
# In a popup window called '''Anchor Properties''', specify the anchor name.
 +
# Press [OK] and the anchor will appear in your document.
 +
# Highlight the text where you want to place the anchor and press the link button on the toolbar.
 +
# Select '''Link to anchor in the text''' from the '''Link Type''' menu.
 +
# Select your anchor name and press [OK].
 +
 
  
 
== See Also ==
 
== See Also ==
Line 22: Line 98:
 
* [[Document center]]
 
* [[Document center]]
  
[[Category:Electronic portfolio]]
+
[[Category:ePortfolios]]
[[Category:Course Management System]]
+
[[Category:LMS]]
 
[[Category:Websites]]
 
[[Category:Websites]]

Latest revision as of 17:58, 23 January 2023

Online editor menus will appear after clicking the edit page button

This page explains the various ways to build and organize your website or ePortfolio content.


Note: It is important that you DO NOT post any of your personal information i.e. address, phone number, etc. on the public pages of your site.


Organizing Content

The side menu acts as the top-level index for your site. See side menus for more information.

Content can be further organized by structuring web pages and by creating links to other documents within these pages. See below for more information.

For a step by step instruction, see Editor Tutorial.


Building Web Pages

With our online editing capabilities, building a web page is as easy as using a familiar word processor.

To learn more about this topic, see online editor.


Uploading Content

You can upload documents directly into a web page. This is a great way to organize your content within a web page, while adding links and descriptions to the content.

To upload documents, use the (button.link.gif) link tool of the online editor. Click here for step-by-step instructions.


Inserting Images

You can easily upload and insert images into your web page.

Use the (button.image.gif) insert image tool of the online editor to insert and manage images. Click here for step-by-step instructions.


Inserting Flash Components

Use the (button.flash.gif) insert Flash tool of the online editor to insert flash components to your website.


Displaying Content

YouTube and other sharable content

To insert a clip from YouTube.com or similar content sharing websites:

  1. Put your web page in the edit mode.
  2. Press the Source located on top/left of the online editor toolbar.
    • This will put your page in HTML editing format. Be extremely careful with this page.
    • As a precaution, copy the entire HTML content to a file on your computer. In Windows, press Ctrl-A to select all HTML code, Ctrl-C to copy, open Notepad, and press Ctrl-V to paste the content.
  3. Open YouTube (or other sharing sites) in a separate browser window
  4. Go to the clip that you want to add to your webpage
  5. Copy the embed code. In YouTube, the embed code is under share / embed
  6. Switch back to the online editor.
  7. If you are familiar with HTML, paste the code from Youtube to the desired location. If you are NOT familiar with HTML, paste the code to the very bottom of the HTML content (in Windows press Ctrl-V).
  8. Press the Source button again. You may NOT be able to see the video yet, but you can see a box where the file will be displayed. You can move the box to the desired location at this time.
  9. Press [save]


PowerPoint presentations

This section explains different methods of showing a PowerPoint presentation on your RCampus web pages:


PDF documents

See Displaying Google Docs on your web page


Word documents

See Displaying Google Docs on your web page


Google Docs on your web page

You can use Google Docs to display a Word, Excel, PowerPoint or PDF directly on your web pages:

  1. Upload your PowerPoint, PDF, Word, or other files to Google Docs. This will require you to login at http://docs.google.com. Create an account on Google or Gmail if you don't have one.
  2. Open the document that you want to display on RCampus in Google Docs.
  3. Click on File and select "Publish to the web..."
  4. Select "Embed" and press Publish
  5. Copy the code displayed on the screen.
  6. Open a new browser window and go to the RCampus page that you want to add the Google Doc to.
  7. Put your web page in the edit mode.
  8. Use the button labeled Source. This will put your page in HTML editing format. Be extremely careful with this page.
  9. As a precaution, copy the entire HTML content to a file on your computer. In Windows, press Ctrl-A to select all HTML code, Ctrl-C to copy, open Notepad, and press Ctrl-V to paste the content.
  10. If you are familiar with HTML, paste the code from Google Docs to the desired location. If you are NOT familiar with HTML, paste the code to the very bottom of the HTML content (in Windows press Ctrl-V).
  11. Press the Source button on top. You may NOT be able to see the Google Doc yet, but you can see a box where the file will be displayed. You can move the box to the desired location at this time.
  12. Press [save]


Inserting an Anchor

  1. Place your cursor before the text or section you want the anchor to refer to and press the anchor button on the toolbar.
  2. In a popup window called Anchor Properties, specify the anchor name.
  3. Press [OK] and the anchor will appear in your document.
  4. Highlight the text where you want to place the anchor and press the link button on the toolbar.
  5. Select Link to anchor in the text from the Link Type menu.
  6. Select your anchor name and press [OK].


See Also