pdf file Download the Quick Reference Guide for using the HTML Editor (including E-mail info, too).

Personal Web Pages

OVERVIEW

Personal Web Pages give you the opportunity to create sophisticated web pages for anyone to view. There are different ways to create pages:
Conversely, if you have web pages (or even an entire site) that you want to upload to your site, you can do this as well -- and this includes .css files that you might be using.

Notes:

 Go to Top

Accessing the Personal Web Pages Tool

Click the Web Pages icon in the QuickBar.

-OR-

If you have the Personal Tools channel displayed in your Dashboard, click on the "My Web Pages" option.

-OR-
  1. Click the MyCruiser tab.
  2. Click the Personal Tools sub-tab.
  3. Click on the heading or icon for My Web Pages.
    The My Web Pages page will be displayed; take note that the Web Pages tab in the sidebar is active. The folder that is highlighted in this tab is the folder you are viewing.

What do you want to do now?
Then do this:
I want to create a new page but I don't know any HTML. You should Create a New Page with the HTML Editor.
I want to create a new page and I do know HTML. Look to one of the following sections:
I want to upload an existing page. If you're uploading many pages that have URLs that call up other items in sub-directories (folders), have you properly created those folders within the Personal Web Pages feature so that the structure matches what is in your URLs?
I want to upload media (or something that is not a web page, but is used in my web pages). If some of your pages up media or other files that exist in sub-directories (folders), have you properly created those folders within the Personal Web Pages feature so that the structure matches what is in your URLs?
I want to create a new folder. See Create a New Folder
Before I start creating my pages, I want some highlights on the different elements that I see in the Personal Web Pages feature. See ELEMENT FEATURES


 Go to Top

ELEMENT FEATURES

These sections describe the elements seen in the Personal Web Pages tool and how they function.

The "Web Pages" Tab in the Sidebar

When you are dealing with page management or folder creation, you will first need to click the Web Pages tab in the sidebar area. When this tab is active, the system knows you are about do one of the following actions:

 Go to Top

"New Page" Button

Use this New Page button to create a page in the folder that is currently highlighted in the Web Pages tab. There are numerous methods of creating pages, and the following sections discuss each:

 Go to Top

"Upload Web Page" Button

If you have many pages you've already created and you would like to have them stored in your CampusCruiser Personal Web Pages feature, you'll be using this button to perform the uploads. Refer to Upload an Existing Page for details.

 Go to Top

"This folder URL"

If a page exists in any folder, you will see an active URL that you can click on that will resemble this format:

https://prod.campuscruiser.com/cruiser/[yourschool]/[youruserid]/[foldername]

When you click on this URL, you will access a pop-up window that has each page listed as a clickable menu option.

Q: I might want to give this URL to others so that they can see some pages in this folder, but I might not want all of my pages to be accessible in this folder.
A: What you should do is this:
  1. Create your own Index page and select ONLY those pages you want to make public (see Create a CampusCruiser Index Page).
  2. Change the display options for this particular folder so that it only shows the Index page you created (see Change Default Display Settings for a Folder).
After these two steps, you can give the URL to the specific folder to others to view. When they click on the URL, the Index page that you created will be seen, and this Index page provides access to the pages you want to be displayed while omitting the pages you don't want displayed.


 Go to Top

"Change Default Display Settings" Button

This button accesses a feature that lets you control what can be seen when the URL to a particular folder is used by you (or is given to other people) to view contents inside a particular folder. Refer to the previous section for information on how this URL works, and see Change Default Display Settings for a Folder for instructions on how to change these settings.

 Go to Top

Individual File Names in the Table on My Web Pages

Web pages that are published get assigned a file name. (These file names can also be changed when editing the page properties; see Edit Page Properties). Web pages that are in Draft status DO NOT have this file name assigned to them; only published pages get a file name.

You can click on the file name to view the page in a new browser window. There, you will also be able to see the full path to this particular page in the window's address bar; if desired, the URL to an individual page can also be shared with others if you wish for them to see a particular page.

 Go to Top

"Content" and "Properties" Buttons

Once a web page is saved (either as a Draft or actually published), you can repeatedly edit both its content (section Edit Page Content) and its properties (section Once a web page is saved (either as a Draft or actually published), you can repeatedly edit both its content (section 1.4.8) and its properties (section 1.4.7) as desired when the Web Pages tab is active.) as desired when the Web Pages tab is active.

 Go to Top

The "Storage" Tab in the Sidebar

Upon first look, it doesn't appear that there is much difference between the Storage tab and the Web Pages tab; they will both show the same structure of folders you've got.
<
The difference is that when you are dealing with media (images, audio/video files, style sheets, etc.) -- essentially anything that does NOT have the ".htm" or ".html" file extension -- you will need to use the Storage tab. Images and other files that are uploaded are done by first clicking the Storage tab and then selecting the folder in which they should be uploaded. When the Storage tab is active, the page displayed is the My Web Page Storage page.

 Go to Top

"Upload" Button

When the Storage tab is active, the My Web Page Storage page is displayed. This page and the contents listed on the page will change as you select different folders to examine, but the Upload button will always be available to let you upload media (e.g., files NOT ending in ".htm" or ".html").

 Go to Top

"New Folder" Button in the "Web Pages" and "Storage" Tabs

This button will create a new folder inside the folder that is currently highlighted. After a folder is successfully created, it is the Web Pages tab that will be displayed (even if you clicked the New Folder button from the Storage tab).

 Go to Top

FOLDER MANAGEMENT

Sometimes it is helpful to first create folders in which to organize your web pages; if you have a set of web pages devoted to sports and a set of web pages devoted to your favorite bands, it might make sense for you to create folders called "Sports" and "Bands" into which they'll be organized respectively.

Creating folder structures becomes very important if you intend on uploading a set of web pages that have URLs which involve any sub-directories you may have created. For example, some web designers store all image files into a directory called "images" or "img" -- the web pages have code that point to this directory when looking for specific images. If you plan on uploading many web pages with URLs that search through numerous sub-directories, you may want to first create the sub-directories first by creating folders with the same names. Then you can upload your pages to the right folders, thereby keeping intact your URL sub-directory structures.

 Go to Top

Create a New Folder

Follow these steps to create new folders.
  1. In the sidebar of the Personal Web Pages feature, ensure that the Web Pages tab is active and displaying your current set of folders. Click on the tab if it is not.
  2. Click on the parent folder in which you wish this new folder to be created.
  3. In the bottom of the Web Pages tab, click on New Folder.
  4. Enter a name for your folder in the New Folder Name field.

    Note:
    Pay attention to the notes that are online below the New Folder Name field:
    • A folder name cannot contain any of the following characters: \ / : * ? " < > |.
    • If folder name contains space, the space will be converted to + in the URL.

  5. Click Create when you have entered the name of the folder.


 Go to Top

Change Default Display Settings for a Folder

Every folder that contains at least one web page has its own URL. You can click on this URL (or give this URL to others) to view all pages in this folder. By default, EVERY page in this folder is visible from its URL. If you DON'T want every page visible in this folder from the URL, you can do the following:
Note:
Neither of these display options fully prevent access to the folder: you or another user could still type in the full URL to a specific *page* in this folder and have that page be displayed. So keep in mind that this method only blocks page displays from the folder's URL. If the name of a page inside this folder is known, then the full URL to the page could still access other content in the folder. It is not meant to be used as a security measure on this folder.
  1. In the sidebar of the Personal Web Pages feature, ensure that the Web Pages tab is active and displaying your current set of folders. Click on the tab if it is not.
  2. Click on the folder where you wish to change the default display options.
  3. Click on Change Default Display Settings from the top toolbar.
    The Set up Default Page form will be displayed.
  4. From the Default display in this folder heading, select one of the 3 radio buttons:
  5. Click Save.
    The page will refresh and a confirmation will let you know that the settings were updated successfully.


 Go to Top

Delete a Folder

Folders can't be deleted until all items within the folder are deleted. (Refer to Deleting Web Pages for how to delete web pages; refer to Deleting Media Files for deleting all other types of files.) Follow these instructions to delete an existing folder.
  1. In the sidebar of the Personal Web Pages feature, click on the Storage tab.
  2. Click on the folder you wish to delete. Any items still existing in this folder will be listed in table format. Take note of the following:
  3. Locate the Delete This Folder button, located above the top right corner of the table (which should be empty).
  4. Click the Delete This Folder button.
    You will be prompted to confirm your deletion via pop-up; click Cancel if you wish to cancel your attempt at deleting this folder.
  5. Click OK.
    Your folder will be deleted; after the page refresh, you will be in the Storage tab but with the "Home" folder highlighted. The Storage tab will show you that the folder no longer exists.


 Go to Top

PAGE MANAGEMENT

There are different ways to add pages to your CampusCruiser Personal Web Page feature. You can create new pages, or upload pages from a site you may have already created.

Start Creating a New Page

Pages you create will need to be saved in folders. If you haven't yet created the folders you need, refer back to Create a New Folder.
  1. Access the Personal Web Pages feature.
    The My Web Pages page will be displayed.

  2. Click New Page.

  3. Under Step 1: Define Your Page, do the following:

  4. Under Step 2: Select Your Editor, select one of the 3 desired radio buttons.

  5. After all data is complete, click Next.


Go to Top  Go to Top

Create a New Page with the HTML Editor

Creating a new web page with the HTML Editor gives you more layout flexibility.

Note:
The HTML Editor is not available for users of the Safari browser, as that browser is not compatible with the Editor; please see Create a New Page with Your Own HTML Code for entering your own HTML code, or use one of the CampusCruiser templates.
  1. In the sidebar area of the Personal Web Pages feature, click on the Web Pages tab.
  2. Click on the folder in which you want to create your new page.
    The My Web Pages page will be displayed; any currently existing pages in this folder will be listed in table format.
  3. Click the New Page button from the toolbar.
  4. The Create A Page form will be displayed. Note that there are two sections, Step 1 and Step 2.
  5. Under Step 1: Define Your Page, do the following:
  6. Under Step 2: Select a layout template that fits the theme of your page best, select the third radio button for Build my page from scratch (via WYSIWYG editor). * Available on IE5.5+, Netscape 7.1+, and Firefox.
  7. Click Next.
  8. Refer to instructions here for how to use the HTML Editor.
  9. To save your page as a draft, click Save as draft.

    -OR-

  10. To publish your Welcome page, click Publish.
    You will be returned to the My Web Pages page, where your newly saved page is listed.


 Go to Top

Create a New Page with Your Own HTML Code

If you are comfortable with entering straight HTML, you can use the Source tab to do so and create your own page.
  1. In the sidebar area of the Personal Web Pages feature, click on the Web Pages tab.
  2. Click on the folder in which you want to create your new page.
    The My Web Pages page will be displayed; any currently existing pages in this folder will be listed in table format.
  3. Click the New Page button from the toolbar.
    The Create A Page form will be displayed. Note that there are two sections, Step 1 and Step 2.
  4. Under Step 1: Define Your Page, do the following.
  5. Under Step 2: Select a layout template that fits the theme of your page best, select the fourth radio button for Enter my own HTML.
  6. Click Next.
  7. Enter your source code in the text field.
  8. Use the Preview button to get a preview of how your page looks.
  9. To save your page as a draft, click Save as draft.

    -OR-

  10. To publish your Welcome page, click Publish.
    You will be returned to the My Web Pages page, where your newly saved page is listed.


 Go to Top

Create a System Index Page

"What is an index page?"

Suppose you have numerous pages created, and you wish that there was some way to have a menu displayed that lists the name of each page. When clicked, the corresponding page will be displayed. By default, the URL associated to a folder that contains at least one page will do precisely this; there is a default index page that will allow all pages in the folder to be displayed via a menu on the side. Each page gets listed in this menu.

"But maybe I don't want all of my pages to be shown in this index page."

That's fine: when you create your system Index page, you get to select which of your pages you want included for display. (Of course, you will then need to change the settings so that the URL to the folder *picks* your Index page to display - see Change Default Display Settings for a Folder.)

The resulting Index page you create will do the following:
  1. In the sidebar area of the Personal Web Pages feature, click on the Web Pages tab.
  2. Click on the folder in which you want to create your new page.
    The My Web Pages page will be displayed; any currently existing pages in this folder will be listed in table format.
  3. Click the New Page button from the toolbar.
    The Create A Page form will be displayed. Note that there are two sections, Step 1 and Step 2.
  4. Under Step 1: Define Your Page, do the following:
  5. Under Step 2: Select a layout template that fits the theme of your page best, select the last radio button for Menu index page - build a menu to include some pages.
  6. Click Next.
    The Create a Menu form will be displayed.
  7. In the Published Web Pages in This Folder list box, note that all web pages in this folder are listed. Click to highlight a web page that you want to include in your menu of this Index page.
  8. Use the right-arrow to copy the highlighted page to the Selected Web Pages list box. Any items placed in the Selected Web Pages list box will have menu options generated for them; items NOT in this list box will not have Menu Options in this Index page. Repeat steps 7 and 8 until all desired web pages are copied to the Selected Web Pages list box.
    To remove any pages from the Selected Web Pages list box, click to highlight the page you want removed, and use the "X" button.
  9. To sort the top-to-bottom order in which the menu options of your pages are displayed, click to highlight a page and use either the up-arrow or down-arrow to shift the item up or down in the list.
  10. Click Publish.
    You will be returned to the My Web Pages page, where your newly saved page is listed.


 Go to Top

Upload an Existing Page

Note:
Only pages that have the extensions ".html" or ".htm" can be uploaded in this fashion. If you are attempting to upload a file that has a different extension, then refer to Uploading Media Files instead.

Uploading web pages is very easy. However if your pages rely on a specific file structure for URLs, then you may want to first take time to create the necessary folders in your Personal Web Pages feature (refer to section Create a New Folder) and then be sure to upload the proper pages to the proper folders. Otherwise, your URLs may not pull up the right pages.
  1. In the sidebar area of the Personal Web Pages, click on the Web Pages tab.

  2. Click on the folder in which you wish to upload your web page.
    The My Web Pages page will be displayed.

  3. Click on the Upload Web Page button from the toolbar.
    The Upload My HTML Document page will be displayed.

  4. Before uploading the file, take note of the following details below the HTML File text field:
  5. Click Browse.
    Your system's file feature will be displayed.

  6. Locate your desired file from your hard drive and select the file.
    When properly selected, your system's file feature will disappear, and the HTML File text field will display the path to the file on your hard drive.

  7. Click Upload.
  8. Edit the Page Title field as desired; if you employed the <TITLE> tags in your HTML code, you will find this field pre-populated with your code's title. Skip to step 12 if you wish to make no more edits to this uploaded file.

  9. If desired, enter a brief description about this page in the Description field. This may be helpful if you have many pages, and need a way to remind yourself which is which. Skip to step 12 if you wish to make no more edits to this uploaded file.

  10. If you would rather have this uploaded file to be saved in an alternate folder, then use the drop-down box in the Saved In row to select the desired folder. Skip to step 12 if you wish to make no more edits to this uploaded file.

  11. If you wish to rename the filename to be something else, edit the File Name field as desired, taking care to NOT use spaces or non-alphanumeric characters.

    If you are satisfied with all of your edits, click Update.
    The Update Page Properties page will refresh and let you know, "This page's properties were updated successfully."


 Go to Top

Edit Page Properties

Note:
To move a page from one folder to another, see Move a Page to a Different Folder.

You should give consideration to the following before editing properties of a page:
If the answers are "yes," then details in the referring pages may need to be updated if this target page is to get referenced properly.
  1. In the sidebar area of the Personal Web Pages, click on the Web Pages tab.
  2. From the Web Pages tab, click on the folder that contains your page that you want to edit.
    The contents of the folder will be listed in table format.
  3. From the "Edit" column, click on the Properties button.
  4. Edit the fields as desired, taking note of the following:
  5. Click Update when complete.
    The page will refresh and a confirmation message will alert you that the properties were updated successfully.


 Go to Top

Edit Page Content

You can always edit any web page that has been published. From this workflow, you can un-publish your web page (returning it back to Draft status), create a Draft copy of the web page, or delete the page.

Note:
If you are editing content of a web page that you uploaded, then the "Source" tab is displayed to let you edit the code.
  1. In the sidebar area of the Personal Web Pages, click on the Web Pages tab.
  2. From the Web Pages tab, click on the folder that contains your page that you want to edit.
    The My Web Pages page will display the web pages of the folder in table format.
  3. Click on the Content button for the target page of your interest.

    Note:
    If you see text / picture boxes and a "Migrate to HTML Editor" button in the top toolbar, then this page was created from either the Welcome or Default template. You can refer back to Modifying the Background Color, Editing Text Boxes, and Add Pictures with the Picture Box to continue editing within the template's tools, or you can migrate this template page to use the HTML Editor (refer to Migrate a Template Page to Use HTML Editor for details).

  4. You can edit the content as desired and click Publish to republish your edited page, or you can do one of the following:


 Go to Top

Migrate a Template Page to Use HTML Editor

If you have created a page from either the Default or Welcome template, you have the option of migrating it to use the HTML Editor. Once this migration takes place, it will not be possible to edit the page with the other template tools.

Note:
This option is not available to users of the Safari browser, as that browser is not compatible with the Editor.
  1. In the sidebar area of the Personal Web Page feature, click on the Web Pages tab.
  2. From the Web Pages tab, click on the folder that contains the page you wish to edit.
    The My Web Pages page will be displayed, listing the web pages in table format.
  3. From the "Edit" column, click on the Content button for the page that you created with the Welcome / Default template.
    The page will refresh; if you do not see the text / picture boxes from the template and there is no Migrate to HTML Editor button in the top toolbar, then this page was not a template page.
  4. Click on the Migrate to HMTL Editor button in the top toolbar.
    The page will refresh to show the "Design" tab of the HTML Editor.
  5. You can now continue to edit your page with the HTML Editor; click here for assistance on using the HTML Editor.


 Go to Top

Upload an Existing Style Sheet

A style sheet has a file extension of ".css" and is therefore considered media. Refer to Uploading Media Files for uploading media files.

 Go to Top

Move a Page to a Different Folder

If you created / uploaded a web page to a folder but now wish to move it to a different folder, then follow these directions. After relocating a page to a different folder, links within your moved page may also need to be edited!

Note:
This same type of moving can NOT be done to other web media (i.e., any file that ends in something other than .html).
  1. In the sidebar of the Personal Web Pages feature, click on the Web Pages tab.
    The My Web Pages page is displayed.
  2. From the Web Pages tab, click on the folder that holds the web page you wish to move.
    The My Web Pages page will refresh to list the pages in the selected folder.
  3. Click on the Properties button for the page you wish to move.
    The Update Page Properties page will be displayed.
  4. Look for the Saved In heading; there will be a drop-down list box displaying the folder name of this file's current location.
  5. Use the Saved In drop-down list box to select the new desired location for this file.
  6. Click Update.
    The page will refresh; you will be given a confirmation message that the page properties were updated successfully.

Click on the folder name to where the page was moved in the Web Pages tab to see the moved page inside its folder.

 Go to Top

Deleting Web Pages

If you are not sure if you want to delete a page and would rather delete the page after viewing it, then follow the instructions in Edit Page Content. Otherwise, follow these instructions.

  1. In the sidebar of the Personal Web Pages feature, click on the Web Pages tab.
    The My Web Pages page is displayed.
  2. From the Web Pages tab, click on the folder that contains the web page you wish to delete.
    The My Web Pages page will refresh to list the pages in the selected folder.
  3. Place a check next to the file(s) you wish to delete.
  4. Click Delete Checked.
    The page will refresh and your web page(s) will be deleted.


 Go to Top

MEDIA MANAGEMENT

"Media" refers to any other web-useable file that is NOT a file ending in ".htm" or ".html" (which is considered a web page). Media includes but is not limited to files ending in ".jpg," ".gif," ".css," and ".pdf."

You may see some image files in the folders of your Storage tab and think to yourself, "But I never uploaded these images here." Keep in mind that any image files uploaded with the HTML Editor or the CampusCruiser Welcome template will have their storage listed in the Storage tab, and within the same folder that their pages are stored.

Uploading Media Files

If you have any web pages that call up a style sheet, you will need to upload that style sheet to the appropriate folder via the Storage tab. These instructions can also be used for uploading any other files that are called upon by your web pages but are NOT .html files.

The name of an uploaded media file CANNOT be renamed.
  1. In the sidebar of the Personal Web Pages feature, click on the Storage tab.
  2. Click on the appropriate folder in which your style sheet (or other file) should be uploaded.
    The My Web Page Storage page will be displayed, listing any currently saved items to the folder you selected.
  3. Click the Upload button from the toolbar.
  4. Click the Browse button.
    Your system's file locating feature will be displayed.
  5. Locate your file using your system's file feature. When the file is successfully located and selected, the path to the file on your hard drive will be displayed in the "File" text field.
  6. If you did not select the proper folder in which this file should be uploaded, then you can click to a different folder in the "In Folder" drop-down list box. Otherwise, skip this step.
  7. Click Upload.
    The pop-up will disappear and the page will refresh; after the refresh, you will see that the file has been uploaded to the selected folder, and is now listed in the table of items.


Q: I accidentally uploaded my media to the wrong folder. Can I move it to a different folder?
A: No. You should delete it first, and then upload it to the correct folder. Once media is uploaded, it can't be moved to different folders like .html web pages can.


 Go to Top

Deleting Media Files

Follow these steps to delete media from your folders, but take time to consider if your target file is used in more than one web page before deleting the file. Also keep in mind that before a folder can be deleted, all items from the folder must be deleted; this includes any media files.
  1. In the sidebar of the Personal Web Pages feature, click on the Storage tab.
    The My Web Page Storage page is displayed.
  2. From the Storage tab, click on the folder that contains the media file(s) you wish to delete.
  3. Place a check next to the file(s) you wish to delete.
  4. Click Delete.
    The page will refresh and your media file(s) will be deleted.


 Go to Top

Create a New Page with a CampusCruiser Welcome Template

Note:
As of release 4.4 of CampusCruiser™ / CruiserMail™ products, the "Default" and "Welcome" templates were discontinued for creating pages. However, because existing pages can still be edited, these sections will remain in the document; for continuity, obsolete instructions will remain but be struck through.

This template gives you the chance to upload one image (which will be located in the center of the page) and one box of text.
  1. In the sidebar area of the Personal Web Pages feature, click on the Web Pages tab.
  2. Click on the folder in which you want to create your new page.
    The My Web Pages page will be displayed; any currently existing pages in this folder will be listed in table format.
  3. Click the New Page button from the toolbar.
    The Create A Page form will be displayed. Note that there are two sections, Step 1 and Step 2.
  4. Under Step 1: Define Your Page, do the following:
    • Enter a title for your page in the Page Title field. The title you enter here will be used as a menu option if you use the CampusCruiser Index page (refer to Create a CampusCruiser Index Page). Note that this is a required field. If this field is not populated, you will receive a pop-up error after step 6.
    • Enter a description that helps you recall what this page is all about in the Description field.
    • If you have accidentally selected the wrong folder from step 2, you can change the folder in which this page should be created by changing the In Folder drop-down.

  5. Under Step 2: Select a layout template that fits the theme of your page best, select the 2nd radio button for Welcome.
  6. Click Next.
    • The Create A Page form will refresh to show fields for the Welcome template.
    • Note that you can edit the "Page Title" and "Description" fields at this time, if desired.

  7. To upload an image, click the pencil icon in the Picture Box. Refer to instructions in Add Pictures with the Picture Box.
  8. To edit text, click the pencil icon in the Text Box. Refer to instructions in Editing Text Boxes.
  9. To change the background color of your Welcome page, click the Background Color button. Refer to instructions in Modifying the Background Color.
  10. To save your Welcome page as a draft, click Save as Draft.

    -OR-

  11. To publish your Welcome page, click Publish.
    You will be returned to the My Web Pages page, where your newly saved page is listed.


 Go to Top

Create a New Page with a CampusCruiser Default Template

Note:
As of release 4.4 of CampusCruiser™ / CruiserMail™ products, the "Default" and "Welcome" templates were discontinued for creating pages. However, because existing pages can still be edited, these sections will remain in the document; for continuity, obsolete instructions will remain but be struck through.



This template lets you input / paste 4 boxes of text.
  1. Repeat steps 1 through 4 from Create a New Page with a CampusCruiser Welcome Template.
  2. Under Step 2: Select a layout template that fits the theme of your page best, select the first radio button for Default.
  3. Click Next.
  4. To edit text, click the pencil icon in the Text Box. Refer to instructions in Editing Text Boxes.
  5. To change the background color of your Welcome page, click the Background Color button. Refer to instructions in Modifying the Background Color.
  6. To save your Welcome page as a draft, click Save as Draft.

    -OR-

  7. To publish your Welcome page, click Publish.
    You will be returned to the My Web Pages page, where your newly saved page is listed.


 Go to Top

Modifying the Background Color

Note:
This set of instructions is only applicable to pages created with the CampusCruiser Default or Welcome templates.
  1. When using the Default or Welcome template, the Create A Page form will display a Background Color button. Click this button.
    The Background Color Picker window appears.
  2. Select one of the 216 small colored blocks to select a background color.
    The color populates the blank box at the right.
  3. Click Update background color.
    The Create A Page form will refresh to show you that your page now has the selected background color.
  4. If you do not wish to make any more modifications, click Publish or Save as Draft. If you want to modify the text boxes and/or the picture boxes, proceed to the following sections.


 Go to Top

Editing Text Boxes

Note:
This set of instructions is only applicable to pages created with the CampusCruiser Default or Welcome templates.
  1. On the Create A Page form, click the pencil icon in the text boxes you want to edit.
    The Text Builder window appears.
  2. In the Edit the following text field, type the text you want to appear in the text box.
  3. Click a radio button next to Font to indicate the font you want the text to be.
  4. Select check boxes next to Style to make your text bold, italic, or underlined, or any combination of all three styles.
  5. Click a radio button next to Alignment to align your text within the text box.
  6. Click a radio button next to Size to indicate the size you want your text to be. (px stands for pixels. The greater the pixels, the larger the size of your text.)
  7. Select one of the 216 small colored blocks to select the color of your text.
  8. Click Finish.
  9. If you do not wish to make any more modifications, click Publish or Save as Draft. If you want to modify background color, refer to Modifying the Background Color; if you want to modify the picture boxes, proceed to the following section.


 Go to Top

Add Pictures with the Picture Box

Note:
While the picture box is only available from the CampusCruiser Welcome template, the steps for uploading a picture are nearly identical to those used when uploading an image in the HTML Editor.

The box that displays the flower image in the Welcome template is a picture boxes and you can replace the existing picture with an image from your hard drive. This procedure details the steps you must follow to add a picture with a picture box.

Warning:
You may only use images with the ".gif" or ".jpg" file extension for your image.
  1. On the Create A Page form, click the pencil icon ( ) in the picture box to which you want to upload an image.
    The Upload Image window appears.
  2. Click Browse to locate the saved file on your hard drive.
    Your system's file feature will be displayed.
  3. Navigate to the desired image and select this image.
    When properly selected, the Image File text field will display the path on your hard drive to this file.
  4. When the desired file has been selected, click Upload.
  5. Click the Resize button if you would like to resize the image.
    Note that the button changes to Cancel Resize.
  6. To resize the image proportionally, leave the "Preserve aspect ratio" checkbox checked, and then enter a new pixel size for either the "Width" or "Height". (To resize the image so that it appears stretched, uncheck this checkbox.) Click True Resize.
  7. Click More Attributes to have control over the following image attributes:
  8. Click Apply when complete.
    The image will be uploaded to the picture box of the template.


 Go to Top



Using the HTML Editor
Users of the Safari browser will not see the "Use HTML Editor" link, as the Editor is not compatible with Safari.

Overview

The HTML Editor allows you to create sophisticated HTML content without knowing HTML code. This Editor is available in the following areas, and keep in mind that depending on where it is available, some minor differences in either options or workflows will be apparent:

Location
Details
Personal Web Pages Any image you upload is saved to the Personal Web Pages storage, which is included in storage that is counted by the My Files feature

The "Select Image" option seen in other iterations of the HTML Editor is called "Existing Image" when the editor is in use here
[All Communities] > Admin Tools > Edit Announcements Any image you upload is saved to the community's Shared Files feature
Administration > Campus Tools > Edit Announcements Any image you upload is saved to the Campus Files feature
Administration > Campus Tools > Publish News Any image uploaded is stored within the News feature, which gets counted in the overall storage usage of the campus
Administration > Campus Tools > E-mail Members Any image you upload is saved to your My Files feature
Academics > Course Design Tools > Course Designer (for CourseCruiserı clients only) Available Tools button will provide links in HTML content to access class-specific features


There are two rows of tools that allow you to format your text or add additional elements, like tables, links, and images. Allowing your mouse pointer to hover over the button will reveal the tool's name and possible keyboard shortcut.

    FIRST ROW
  1. Text Color button - Clicking the Text Color button will allow you to access the Color Picker dialog where you can select a color. When a color is in use for the text, this button will display the color in the right side of the button.
  2. Background Color button - Clicking the Background Color button will allow you to access the Color Picker dialog where you can select a color. When a color is in use for the background, this button will display the color in the right side of the button.
  3. Cut button - Click-and-drag to highlight some text, and when this button is used, the selected text will be cut out from the content area and saved to the clipboard; it can be pasted elsewhere.
  4. Copy button - Click-and-drag to highlight some text, and when this button is used, the selected text will be copied to the clipboard; it can be pasted elsewhere.
  5. Paste button - After using the Cut or Copy buttons, use the Paste button to paste text from the clipboard elsewhere.
  6. Font button - This button allows you to pick a different font. When clicked, it displays a pop-up menu from which you can select another font
  7. Right Alignment button -
    Aligns text to the right.
  8. Center Alignment button -
    Aligns text to the center.
  9. Left Alignment button -
    Aligns text to the left.
  10. Outdent button - Shift text to the left.
  11. Indent button- Shift text to the right.
  12. Ordered List button - Create a list of items that are numbered.
  13. Unordered List button - Create a list of items that are bulleted.
  14. Image button - When clicked, it may display up to 3 options in its drop-down menu:
    • Image URL: you can specify a URL to an image on the web
    • Upload Image: allows you upload an image into your content - this option is not always available
    • Existing Images [Web Pages only]: select an image you've previously used in your other web pages
    • Select Image [E-mail & Announcements]: select an image from your hard drive or your My Files tool to include in your content

  15. Insert Link button - Allows you to enter text that behaves as a link, as well as where the link should go and if that link should be displayed in a new window.
  16. Link to My Other Web Pages [Web Pages only] - Allows you to create a text link that, when clicked, will display an existing web page you have already created in your Personal Web Pages tool.
  17. Insert Ruler button - Allows you to insert a horizontal line in your content.
  18. Insert Table button - Allows you to create a table by specifying the number of rows and cells. Other attributes can also be set.

    SECOND ROW
  19. Font Display - This box will show you the current font in use for the line of text you are typing.
  20. Font Size button - This button allows you to pick a different size for your text. When clicked, it displays a pop-up menu from which you can select another size.
  21. Font Size Display - This box will show you the current font size in use for the line of text you are typing.
  22. Bold button- This button will make text appear in bold
  23. Italic button- This button will make text appear in italics
  24. Underline button- This button will make text appear underlined
  25. Superscript button - The Superscript button allows text to be displayed like this.
  26. Subscript button - The Subscript button allows text to be displayed like this.
  27. Strike Through button - The Strke Through button allows text to be displayed like this.
  28. Remove Format button- Click-and-drag to highlight some text, and when this Remove Format button is used, all prior formatting will be removed.
  29. Spell Checker button - This button will access a companion feature that checks your content in the HTML Editor area for spelling errors.
  30. Toggle Editing Area button - Allows you to toggle the length of the HTML Editor to match the actual page's length.
  31. View HTML Source button - View the HTML being employed in your content.
  32. Preview button - Allows you to see your content displayed in a new pop-up browser window.

NOTE:
Many buttons in the HTML Editor function similarly to those found in other word processing applications.

 Go to Top of section

Dual-tab Interface



The HTML Editor employs a dual-tab interface. By default, the Design tab is displayed when the Editor is accessed. The HTML Source tab can be used to edit the source code.

Go to Top  Go to Top

Changing Text Attributes

Buttons that change the attributes of text (such as color, font appearance, and alignment) can be used in two ways:

  1. Click the desired button to have the feature activated and type your text. As you type, you will see the button's effect applied to your text.
  2. Click and drag to highlight selected text. When text is selected, click the desired button; you will see the button's effect applied to your selected text.
    • To stop using the button's effect, click on the button again to deselect it.
    • To remove all formatting from selected text, click-and-drag to highlight the desired text and use the Remove Format button.

 Go to Top of section

Changing Text Position

The buttons that allow you to manipulate the placement of text (such as cut, copy, paste, alignment, outdent, indent, ordered / unordered list) function similarly to those found in many word processing applications.

  • Click-and-drag to highlight selected text.
  • Click the Cut button to cut out the selected text, or click the Copy button to copy the selected text.
  • Click to place your cursor in the desired spot where cut / copied text should be inserted and click Paste.
  • Click the Ordered List / Unordered List buttons to start a list of items that is numbered or bulleted
  • Use the desired Alignment (Left / Center / Right) button to determine how text is aligned onscreen
  • Use the Indent / Outdent buttons to shift your text to the left or right

 Go to Top of section

Inserting a Link

You can insert a hyper link to another location on the Internet using the HTML Editor in your E-mail messages, News articles and Announcements.

  1. Click and drag to highlight the text you wish to use as a link.

    -OR-

    If you don't have text you want to use, simply click on the Insert Link button.
    • The Create a Hyper Link dialog will be displayed.
    • If you have highlighted text you wanted to act as a link, then this text will be displayed in the Link Text field.
    • Click Cancel to cancel your attempt at creating a hyper link.

  2. Enter (or edit) text in the Link Text field that will be displayed as the clickable text acting as a link.
  3. In the Hyper Link text field, type out the remaining code for your link after the pre-populated code.
  4. If you would like the link to be displayed in a new browser window when clicked on, then enter _blank in the Target field.
    If you enter nothing in this Target field, then the viewer's current page will refresh to display the link.
  5. Click Apply.
  6. Note that your selected text will become underlined as it is formatted into a link; it will be displayed as a link once your content is saved and visible to your viewer(s).

 Go to Top of section

Working with Images



The Image button in the HTML Editor has a drop-down menu. Options seen from this drop-down will vary. Click on the button, and then select one option for what action you want performed:

Drop-down Menu Option
Action
Image URL You specify a URL to an image that exists on the web, and the HTML Editor incorporates the image through the URL
Upload Image Lets you upload an image from your hard drive
  • In Personal Web Pages, a different dialog is used than what is seen elsewhere.
Select Image When using for images in a community Announcement, lets you pick an image from the Shared Files feature

When using for images in a campus Announcement, lets you pick an image from the Campus Files feature

When using for images in an E-mail message, lets you pick an image from your My Files feature
Existing Images [Personal Web Pages Only] Lets you select an image that you've uploaded to a web page you've previously created


 Go to Top of Section

Inserting an Image URL



When you insert an image URL with the HTML editor, the result is not a link that is displayed, but the actual image being displayed in your content. You must specify the full path to the image, or else the image will not appear. Make sure you know the full URL that references the image. These instructions are valid in all areas where the HTML Editor is displayed.
  1. Click within the HTML Editor to place your cursor in the editing field.
  2. Click on the Image button.
    The Image button will display a drop-down menu.
  3. From the drop-down menu, click the Image URL option.
    • A pop-up dialog will appear.
    • Click Cancel to clear this pop-up if you want to cancel your attempt at entering an image URL.
  4. Enter the full path to the image, starting with "http" in the Image URL field.
  5. If you would like any text to be displayed when a mouse pointer hovers on this image, enter the text in the Description field.
  6. Click Apply from this pop-up dialog.
    The pop-up will be cleared and the page will refresh. After the refresh, the image will be displayed in the HTML Editor area.
  7. If you click on the image in the HTML Editor area, you will see handles on every corner and every side of the image. You can use the handles to enlarge or shrink the image's width or height.

    OR

    You can also click double-click on the image itself to access Edit Image pop-up to change the size and other attributes of the image (see Resizing an Image (Anywhere HTML Editor is Present)).


 Go to Top of section

Storage of Images Getting Uploaded



Note:
For uploading images inside the Personal Web Pages feature, see Using an Existing Image - Personal Web Pages.

First, take some time to understand how images uploaded are stored, as images that get uploaded for Announcements or E-mail get stored. But where they get stored depends on where you're uploading.

Storage of Uploaded Announcement Images



Any image that is uploaded via the HTML Editor for an Announcement will be stored in the community's Shared Files feature as a Public image and given a unique URL; if you're an Administrator and dealing with campus Announcements, then these images get stored in the Campus Files feature.

If you have images in the Shared Files / Campus Files that should NOT have a unique URL and should be considered Private, then you can change this attribute directly in the Shared Files / Campus Files feature (refer to help files from either feature for instructions). By default, images that are uploaded directly through the Shared Files featuer (and not via an Announcement) are Private.

A Note to CruiserMailTM Users Campus Files are not available on the CruiserMail site, but these images are still stored and can be updated to/from "Public"/"Private" as needed.


Once images are stored and made Public in the Shared Files / Campus Files feature, they can be used in other announcements (see Upload an Image: Campus / Community Announcements).

Note:
If you ever DELETE the images that have been stored in the Shared Files / Campus Files as a result of uploading them via the HTML Editor, then the images will no longer be seen in the Announcement.

 Go to Top of Section

Upload an Image: Campus / Community Announcements



Refer to Storage of Uploaded Announcement Images for details on how images that are uploaded inside announcements get stored.
  1. Place your cursor in the HTML Editor where the image should appear.
  2. Click on the Images button.
    A drop-down menu will appear.
  3. From the drop-down menu, click Upload Image.
  4. The Upload Image dialog will appear. Note that there are two tabs:
    • My Computer tab (the active tab) - this will let you search for an image from your hard drive.
    • Images from [your community / campus name] Shared Files tab - this will let you reuse an image that has been already uploaded and stored; if you wish to use this tab, stop following these instructions and see Select Image: Campus / Community Announcements.

  5. Click Browse... to access your system's file utility and locate your desired file. When a file has been successfully found, the Image text field will display the full path to the target file.
  6. If desired, use the Destination Folder drop-down to pick the folder from your community's Shared Files feature in which this uploaded image should be saved. Otherwise, the image will be saved under Folders Home of the Shared Files area.
  7. Click Upload.
  8. The My Computer tab will refresh, note the following:
    • A Description text field is displayed.
    • A preview of your image is displayed.

  9. Enter any desired description for your image.
  10. Click Apply.
    The Upload Image dialog will be cleared and your image will be displayed in the HTML Editor.


 Go to Top of Section

Upload an Image: Your E-mail Message



These steps are useable for uploading an image via the HTML Editor for your E-mail message.

Note:
Please keep in mind that although the HTML Editor is visible when you use Customize (or Settings from the Tools tab) > Outgoing Messages tab, you cannot upload an image into your Rich-Text Signature.
  1. Place your cursor in the editing area.
  2. Click on the Image button.
    The Image button will display a drop-down menu.
  3. From the drop-down menu, click the Upload Image option if the image you want to include is on your hard drive.
    • The Upload Image pop-up will be displayed, showing the My Computer tab.
    • Click Cancel at any time to cancel this pop-up.
    • If the image you want to include is already stored in your My Files personal tool, then see Selecting an Image - E-mail.

  4. Click Browse to access your system's file locating feature.
    • Your system's file locating feature will appear where you can search for and select the image of your choice.
    • Once the image has been selected successfully, the Image text field will display the full path to the target file.

  5. Click Upload.
    • The pop-up will refresh and a thumbnail version of your image will be displayed.
    • Note that the Browse button has disappeared; if you uploaded the wrong image, click Cancel to close this pop-up and start over.
  6. If desired, enter a description in the Description text field for this image.
    This text will show up when the mouse pointer hovers on the image; this text is ignored when you are uploading an image for an E-mail message.
  7. Click Apply.
    • The pop-up will clear and the HTML Editor will refresh to show you your image.
    • You can click on the image to obtain image handles, which can be click-and-dragged to resize your image. You can also double-click on the image to access a pop-up that will let you change many attributes of the image (refer to Resizing an Image (Anywhere HTML Editor is Present)).


 Go to Top of Section

Select Image: Campus / Community Announcements



  1. Place your cursor in the HTML Editor where the image should appear.
  2. Click on the Images button.
    A drop-down menu will appear.
  3. From the drop-down menu, click Select Image...
  4. The Upload Image dialog will appear. Note that there are two tabs:
    • Images from [your community / campus name] Shared Files (the active tab) - this will display a small panel in the left showing the folders and files inside the Shared Files area.
    • My Computer tab - this will let you search your system to upload a new file; if you wish to use this tab, stop following these instructions and see Upload an Image: Campus / Community Announcements.

  5. In the left side small panel of the active tab, click on the name of the image you want to reuse; if an image displays the lock icon, then it is a Private image and cannot currently be selected for use in any announcement.
    • The tab will display a right side panel, showing a preview of your selected image along with details and some changeable fields.
    • You can click the Public radio button and click Update Attribute if the locked Private image you see should be treated as a Public image (refer to Storage of Uploaded Announcement Images).

  6. Enter any desired description in the Description text field and click Apply.
    The Upload Image dialog will be cleared and your image will be displayed in the HTML Editor.


 Go to Top of Section

Selecting an Image - E-mail



These instructions are applicable for selecting an existing, pre-stored image via the HTML Editor via E-mail.

Note:
Please keep in mind that although the HTML Editor is visible when you use Customize (or Settings from the Tools tab) > Outgoing Messages tab, you cannot select an image from your My Files feature to be used in your Rich-Text Signature.
  1. Place your cursor in the editing area.
  2. Click the Image button.
    The Image button will display a drop-down menu.
  3. From the drop-down menu, click the Select Image option if the image you want to include is already available in your My Files feature.
    • The Upload Image pop-up appears, showing the Images from MyFiles tab. The left side of this tab will list the folder structure of your My Files feature, and all selectable image files. If the image is within a specific folder, then the image will be displayed below that folder's name.
    • If you instead want to upload an image from your hard drive, see Upload an Image: Your E-mail Message.

  4. Click on the name of the image, and the right side of the tab will give you a thumbnail of the image you selected, along with the Description field.
  5. Enter any desired description for your image and click Apply.
    • The pop-up will clear and the HTML Editor will refresh to show you your image.
    • You can click on the image to obtain image handles, which can be click-and-dragged to resize your image. You can also double-click on the image to access a pop-up that will let you change many attributes of the image (refer to Resizing an Image (Anywhere HTML Editor is Present)).


 Go to Top of Section

Upload an Image - Personal Web Pages & News Articles



To upload an image with the HTML editor in the Personal Web Pages or News Article feature, do the following:
  1. Place your cursor in the editing area.
  2. Click on the Image button.
    The Image button will display a drop-down menu.
  3. Click Upload Image.
    1. The Upload Image dialog will be displayed. This version of the Upload Image is different from those seen during E-mail or Announcement image uploads.
    2. If this is a Personal Web Page, then you will not see the "Set As Featured Image" checkbox.
    3. To cancel your attempt at uploading an image file, click Cancel from within the Upload Image dialog; the dialog will disappear.

  4. In the Upload Image dialog, click Browse... to access your system's file locating utility.
    Your system's file locating utility will be displayed.
  5. Locate and select an image file of choice (make sure the file name ends in ".gif" or ".jpg"). When successfully selected, the file locating utility will disappear and the path to your selected image file will be displayed in the "Image File" text field of the dialog.
  6. If you would like descriptive text to be displayed when a viewer's mouse pointer hovers over the image, then enter a description in the Description text field.
    If this is a featured article and you wish for this image to be the featured image, then place a check in the checkbox for Set As Featured Image.
  7. When the desired file has been selected, click Upload.
    • The Upload dialog will refresh to display the image.
    • If you do not wish to change any attributes of this image, then you can click Apply now.

  8. Click the Resize button if you would like to resize the image.
    Note that the button ch anges to Cancel Resize.
  9. To resize the image proportionally, leave the "Preserve aspect ratio" checkbox checked, and then enter a new pixel size for either the Width or Height. (To resize the image so that it appears stretched, uncheck this checkbox.) Click True Resize.
    1. After using True Resize, the image will be resized according to your pixel entry.
    2. Click Resize again to try another attempt at resizing.
    3. Note that if you attempt to resize a second time, a Working size drop-down list box is displayed. Every resize attempt you do will be tracked here; you can select a set of dimensions and click View to see your past attempts.

  10. Click More Attributes to have control over the following image attributes:
    • Alternate Text (ALT) - enter text that should be displayed when a mouse pointer hovers over this image
    • Horizontal Space (HSPACE) - enter a number of pixels that adds white space to the left and right of the image
    • Vertical Space (VSPACE) - enter a number of pixels that adds white space to the top and bottom of the image
    • Inline Alignment (ALIGN) - select an option (bottom / middle / top / left / right) that dictates how text around the image should get aligned with the image.
    • Featured Image - (will only appear if this image is for a news article) - check this checkbox if the image you are uploading is to act as the Featured Image (which means that welcome page channels may give this image extra display prominence).

  11. Click Apply when complete.
    The image will be uploaded to the HTML Editor content area.


 Go to Top of Section

Using an Existing Image - Personal Web Pages



You can upload an existing image that you've already used from a different personal web page (rather than uploading a second copy).
  1. Place your cursor in the editing area.
  2. Click on the Image button.
    The Image button will display a drop-down menu.
  3. From the drop-down menu, click Existing Image.
    The Current Image pop-up will be displayed.
  4. Use the Images in folder drop-down to select the folder of your Personal Web Pages where this image is stored. By default, your "Home Folder" is displayed.
  5. When the folder is selected, you will see names of images with radio buttons. Click on the name of the image to get a preview of the image in a separate pop-up.
  6. When the desired image is displayed in this Current Image pop-up (after selecting the desired folder), select its radio button.
  7. Enter any desired description about the image.
  8. Click Apply.
    The image will appear in the HTML Editor area.


 Go to Top of Section

Resizing an Image (Anywhere HTML Editor is Present)



You can click on an image as seen in the HTML Editor area and use the square boxes ("handles") to resize the image; after the first click, click on the handle you desire and drag the handle in the direction that the image should be reshaped.

If you wish to edit other details while resizing the image, follow these instructions, which are applicable wherever the HTML Editor is available:
  1. Double-click on the image that is displayed in the HTML Editor area.
    • The Edit Image Attributes dialog will appear.
    • Click Cancel to cancel your attempt to edit the image.

  2. Alternate Text (ALT) field: enter text that should be displayed when a mouse pointer hovers over this image.
  3. Horizontal Space (HSPACE) field: enter a number of pixels that adds white space to the left and right of the image.
  4. Vertical Space (VSPACE) field: enter a number of pixels that adds white space to the top and bottom of the image.
  5. In-line Alignment (ALIGN) drop-down: select an option (bottom / middle / top / left / right) that dictates how text around the image should get aligned with the image.
  6. In the Width and Height boxes, your image's current dimensions will be displayed in pixels. Edit the width and size in pixels as desired.
  7. If you would like a border specified around your image, enter the width of the border in the Border field.
  8. Click Apply.
    Your image will be resized with the details you specified.


 Go to Top of Section

Link to My Other Web Page [Personal Web Pages ONLY]



Use this feature to create a link that, when clicked, it will display one of your other Personal Web Pages that you have already created. This button in the HTML Editor ONLY appears in the Personal Web Pages tool.

  1. Place your cursor in the HTML Editor area where you wish to insert a link.
  2. Click the Link to My Other Web Pages button.
    A pop-up will appear, with the text fields Link Name and Link To. Note that Link Name displays the highlighted text you selected.
  3. Scroll down in list box to find the name of the existing web page you want to link to, and click its radio button.
    The Link To field will display the path to your linked page.
  4. Click Apply.

You can also click-and-drag over text in the HTML Editor to select text that should act as this link, and then click the Link to My Other Web Pages button.

 Go to Top of Section

Adding a Table

To add a table with the HTML editor, do the following.

  1. Place your cursor within the editing field where you would like the table to be added.
  2. From the toolbar, click the Insert Table button.
    The "Create a New Table" pop-up dialog will appear.
  3. If you know how many rows and columns you want for your table, then enter the numeric value in the Rows and Columns text fields and click Apply & Close and proceed to 13.

    BUT

    To supply more details than just the number of desired rows and columns, click on the More Attributes... link.
    An extra panel in the dialog will be displayed.
  4. To specify the width of the entire table, first enter the numeric value in the Width field and then use the drop-down list box to the right to indicate if the value is expressed in percentage ("%") or pixels.
  5. To specify the width of the entire table border, enter a numeric pixel value in the Border text field.
  6. To specify the cell padding (space between text and the border of the cell), enter a numeric pixel value in the Padding text field.
  7. To specify the cell spacing, enter a numeric pixel value in the Spacing text field.
  8. If you would like a type of text alignment applied to all cells in the table, select a value from the In-line Alignment drop-down list box:
    • No (for none)
    • Left
    • Center
    • Right

  9. To select a color to be applied to the entire background of the table, click on the Background color square to display the Color Picker palate.
  10. Click on the desired color.
    Note that the Current box will display the color you have selected. You can continue to click on different squares until the color you like is displayed in the Current box.
  11. Once the desired color is displayed in the Current box, click Apply.
    • The Color Picker palate will disappear; note that when the Create a New Table dialog is displayed, the selected color will be shown.
    • You can repeat the previous 2 steps in order to select a different color; note that the "Old" box will display the last selected color.

  12. From the Create a new table dialog, click Apply & Close.
    The Create a new table dialog will disappear, and the table will be available in the HTML editing area.
  13. Click inside the cells to begin entering text.

 Go to Top of section

Delete a Table



To delete the table, click on a border of the table so that the handles appear around the table (you should see small white squares appear as handles), and then press the Delete button on your keyboard.

 Go to Top of section

Edit a Table



NOTE:
Changes made to a table with this dialog are not reversible by using the Ctrl+Z keyboard shortcut.

You can add or delete rows and columns from your table, or edit other attributes of the table by doing the following:
  1. To edit the table, double-click on the border of the table to get the Edit Table dialog.
    • If you wish to delete the table, click Delete This Table and answer OK when prompted to confirm your deletion.
    • If you instead meant to edit a specific cell, then click Close at this dialog and attempt to click on the top-most part of the cell's lower border, and then refer to instructions in the section, Edit a Table Cell.
    • Attributes that can be edited here are edited similarly as they were set up in the section, Adding a Table at steps 4-11. Refer back to those steps for how to edit these attributes.

  2. To insert a row, do the following:
    1. Click Insert... by the Rows heading to access an extra drop-down.
    2. From the drop-down select the before/after row option.
    3. Click Insert.
    4. The row will be inserted; repeat these steps as needed for more rows.
    5. To delete rows, click Delete... and then select row to delete from the companion drop-down.

  3. To insert a column, do the following:
    1. Click Insert... by the Columns heading to access an extra drop-down.
    2. From the drop-down select the before/after column option.
    3. Click Insert.
    4. The column will be inserted; repeat these steps as needed for more columns.
    5. To delete columns, click Delete... and then select column to delete from the companion drop-down.

  4. Click Apply to apply these changes to your table.
    The Edit Table dialog will disappear, and the table will reflect the new changes.

 Go to Top of section

Edit a Table Cell



NOTE:
Changes made to a cell with this dialog are not reversible by using the Ctrl+Z keyboard shortcut.

To edit a cell in a table, do the following:
  1. To edit a cell, double-click on the top-most part of the cell's lower border to access the Edit Table Cell dialog.
    • If you instead meant to edit the Table's attributes, then click Edit Table Attributes to get the Edit Table dialog, and refer to instructions in Edit a Table.
    • To delete this cell, click the Delete This Cell icon and answer OK when prompted to confirm your deletion; note that any data inside this cell will likewise be deleted.

  2. To change this cell's width, enter a numeric value in the Width text field, and then select how the value is to be recognized (i.e., either as pixels or % of the entire table length).
  3. Click on the Background Color box to change this cell's background color.
  4. Select an alignment for how text in this cell should be displayed (Left / Center / Right / None) with the Content Align drop-down list box.
  5. Select a vertical alignment for how text in this cell should be displayed (Top / Middle / Bottom / Base Line / None) with the Content Vertical Align drop-down list box.
  6. If this cell should span multiple table rows, enter the number of rows in the Row Span box.
  7. If this cell should span multiple table columns, enter the number of rows in the Column Span box.
  8. Click Apply.
    The Edit Table Cell dialog will disappear, and the table cell will reflect the new changes.

 Go to Top of section

Inserting a Horizontal Ruler

A "Horizontal Ruler" is how a line is added in HTML. If you would like to insert a horizontal line across the screen, do the following:

  1. Click in the HTML editor to place your cursor where you wish a horizontal ruler displayed.
  2. Click on the Insert Ruler button.
    A line will be inserted and the cursor will be placed below the line, where you can continue your edits.

 Go to Top of section

HTML Source Button

If you would like to see the tags that are currently employed in your content, click the HTML Source button. A pop-up dialog will be displayed, showing the source code employed in your content. Click OK to clear this pop-up dialog.

 Go to Top of section

HTML Preview Button



The Preview button in the HTML Editor is the right-most button on the bottom row, resembling a magnifying glass. When clicked, it will display your current HTML content inside a new pop-up window. Here, you can test any links that you may have created.

Double-clicking on the link inside the HTML Editor will access a pop-up that lets you re-edit the link. But previewing the target site should be done from the Preview window.

 Go to Top of Section

 Go to Top of Section -OR- Go to Top of Page

CampusCruiser Custom Edition - B_5_0_p1
CampusCruiser recommends that Java, JavaScript, cookies, and pop-up windows be enabled on your browser. Powered By CampusCruiser