Seamless Editing System (SES) User Guide

1. SES Overview
2. Getting Started
3. The SES Toolbar
4. The Editor Toolbar
5. Common Tasks
6. The Draft/Publish/Archive System
7. Frequently Asked Questions

1. SES Overview show all / hide all

• What is the SES?

  SES stands for Seamless Editing System. It's a new system of page management that integrates our Page Templates, Content Editor, and Components into one single page. Now you can enter your content, add your components on the fly and get an accurate depiction of what the page will look like while you're working on it. No pop-up editors, and no text-only boxes that limit the type of content that can be entered.

2. Getting Started show all / hide all

• Page Layout and Structure

  Overview

  Every page in the Web Manager is based on a template, and every page based on that template has the exact same layout. Each template is divided into one or more editable regions which are distinct sections of content. Each region can support content that you type or paste in, as well as one component which will display immediately after the content. It is important to keep this in mind as you edit your page as planning out where your content and components will appear will save a lot of time in the long run.

  Typically a page is divided up into a banner area, a menu area, one or more columns for page-specific content, and a footer area. Each of the columns will usually have one or more regions, with the top-most region being required (it will display no matter what, and if it's empty then a line space is displayed) and the following regions being optional (they will not display if they are empty).

  Some regions may be defined in the template as shared and they can only be edited on a particular page. If you click on these regions while editing, an information box will appear that will instruct you as to which page is responsible for the shared content. Shared content regions are generally used for banners, menus, and footers - anything that you would like to have displayed on every page in the site. These special regions save a tremendous amount of time when managing your content; for example you need only place your banner on one page instead of each and every page on the site. If you want to change the banner, you just change it on the sharing page and the rest will be updated automatically!

  A sample screenshot can be viewed here. Note that the shared regions are somewhat opaque and greyed out, while the editable regions are denoted by dotted borders.

  Page Components

  The SES is comprised of several distinct parts:

  The SES Toolbar - allows you to save drafts, publish the page, and recall archived versions. See The SES Toolbar.

  The Editor Toolbar - provides styles, fonts and colour formatting as well as layout tools such as tables, images, etc. See The Editor Toolbar.

  Page Regions - where content and components are managed.

  It is a good idea to familiarize yourself with the toolbars that are outlined in the next sections. If you would like to skip directly to the process of editing a page, See the Common Tasks section.

Top

3. The SES Toolbar show all / hide all

• 

• Toolbar Overview

  The SES Toolbar provides access to all the functions that save, load, and view the available versions of the page information regarding the archive and publish dates.

• Toolbar Functions

  The toolbar functions are listed below. Note - some functions may not be available depending on the status of the page and your level of access.

  • Save Draft - Saves a copy of the page content, and all component associations as a draft.
  • Publish - Archives the current live version of the page, and then copies the content and component associations of the page to the live site.
  • Preview - Displays the page as it would look to visitors of your site once published.
  • Close - Closes the page without saving and returns you to the Administrator area.
  • Help - Opens this help guide.
  • Available Version List - Lists all Draft, Published and Archive versions of the page with the date of activity and the name of the Administrator who made the changes.
  • View - Previews the selected version in a new window.
  • Load - Loads the selected version, allowing you to edit and publish its content.
  • Activity Date Label - Displays the date and status (Draft/Published/Archived) status of the current page.

Top

4. The Editor Toolbar show all / hide all

The Editor toolbar provides access to all the functions responsible for the layout and appearance of your content. The functions are outlined below:

• Source

  Enters into Source Mode, giving you direct access to the underlying HTML markup. The use of this mode is recommended only if you have a working knowledge of the HTML markup language.

• Cut

  Cuts out the selected content and remembers it in case you want to paste it elsewhere.

• Copy

  Copies the content, allowing you to duplicate it elsewhere.

• Paste

  Pastes the content in at the cursor position.

• Paste as Plain Text

  Pastes the content in, but without any formatting.

• Paste from Word

  Opens the Paste From Word dialogue. This function will strip out Word-specific formatting allowing you to maintain the general structure of the content, but without the extra formatting that is not applicable on the web.

• Print

  Opens the print dialogue for printing the content.

• Spell Checker

  Opens a dialogue that will check the spelling of your content. Note: Only the content in the selected region is checked for spelling errors. The spell checker does not check for spelling on the entire page.

• Undo

  Cancels the last change made to the content.

• Redo

  Restores the last change made to the content after an Undo operation.

• Find

  Searches the content for the requested word or phrase.

• Find and Replace

  Replaces the search text or phrase with the given text or phrase.

• Select All

  Highlights all the content in the region.

• Remove Format

  Removes all the formatting code in a text selection, reducing it to plain text.

• Bold

  Bolds the selected text.

• Italic

  Italicizes the selected text.

• Underline

  Underlines the selected text.

• Strikethrough

  Strikes the selected text.

• Subscript

  _Subscripts the selected text.

• Superscript

  ^Superscripts the selected text.

• Numbered List

  Puts the selected text into a numbered list. If no text is selected, a new numbered list is created.

• Bulleted List

  Puts the selected text into a bulleted list. If no text is selected, a new bulleted list is created. You can also use this button to remove bullets.

• Decrease Indent

  Reduces by one increment any indenting applied to the selected text or at the cursor position.

• Increase Indent

  Adds an indent to the selected text or at the current cursor position.

• Block Quote

  Puts the selected text in a

  block quote

• DIV

  Puts the selected text into a DIV element. This is useful for isolating a chunk of text or applying customized styles to it.

• Left Justify

  Aligns the selected text to the left.

• Center

  Centres the selected text.

• Right Justify

  Aligns the selected text to the right.

• Block Justify

  Aligns the selected text so that it attempts to fill the space, minimizing white-space on the left and right sides.

• Link

  Opens the Link Dialogue to create a link to a page or file. See Creating Links.

• Remove Link

  Removes the link from the selected element.

• Insert Image

  Inserts an image at the current cursor location, or displays the properties of the selected image. See Adding an Image.

• Insert Flash

  Inserts the HTML code to display a Flash movie, or displays the properties of a selected Flash movie.

• Table

  Inserts a table at the current cursor position, or displays the properties of a selected table.

• Horizontal Line

  Inserts a horizontal line separator at the current cursor position.

• Special Character

  Opens a dialogue allowing you to select a Special Character to insert a the current cursor position. These include letters with accents and symbols.

• Page Break

  Inserts a Page Break at the current cursor position. Any content appearing after the break will begin on a new page when printing.

• Style

  Applies pre-defined formatting rules to the selected text. See Applying Styles.

• Format

  Applies pre-defined heading styles to the selected text.

• Font

  Allows you to change the font of the selected text.

• Size

  Allows you to change the size of the selected text.

• Show Blocks

  Outlines the underlying HTML block elements in the region.

• Text Colour

  Allows you to change the colour of the selected text.

• Background Colour

  Allows you to change the background colour of the selected text.

• Component

  Opens the Component Management dialogue for the selected region. See Managing Components.

• Info

  Displays the Region Information dialogue, which lists the region's dimensions, sharing and component details.

Top

5. Common Tasks show all / hide all

• Editing Content

  Adding content to your page is fairly straight-forward. Each region that can be edited is highlighted in a dotted red box. Select a region that you would like to edit and simply click on it to begin editing. Alternatively, if you hover over a region you should see the region management dialgue open up. Click on the Edit link to begin editing the region.

• Managing Components

  Components are tools that are configured by an administrator and added to a page to perform a certain function. These tools can range from data collection forms, to photo galleries to searchable item libraries. For more information and a complete list of the available components, visit our Components page.

  To add a component, first choose the region which you'd like to associate with the component, keeping in mind that the component will display below the content in the region.

  1. Hover over the region until the Region Management dialogue appears, and click the Component menu option.

     If you are already editing a region, you can click on the Insert Component button on the toolbar.
  2. The dialogue displays the available types of components, with a drop down list for each instance of that type. Choose a component by clicking on the radio button next to the component name to enable the related list, then select an instance of the component from the list.

     

  3. When you are done, click the Submit button and the component will display under the region. You can change the component by simply selecting a different component or instance in the list, or remove it altogether by clicking the Clear button.

• Applying Styles

  Styles are pre-defined sets of rules that you can apply to the text on your page. These rules alter the appearance of the text to which they are applied. A common use for a style would be to create headings that are larger than the regular text on the site, and are a different colour.

  The greatest benefit to using styles is the amount of time they can save you. For example, if all of your headings on your site are a large font size, purple, bold and underlined then you would have to select your heading text, change the font size drop down to "Large", change the font colour option to purple, click the bold button, AND finally click the underline button for EVERY heading on your site! This could all be done in one step by using a style that had these rules defined. Moreover, if you want to change the appearance of your headings in the future, you would only need to have the style changed in one place rather than updating every page that has the heading! Styles provide a more consistent and professional look to your site. For these reasons we strongly recommend that you use styles as opposed to the font formatting drop downs and colour pickers whenever possible.

  To apply a style, simply highlight the text you want stylize, and choose the style from the dropdown box. Each style that has been defined for you should appear in the list the same way that it will appear on your page, so it's easy to determine which one to use. Note that if the text has been defined as white, it will display with a grey background colour in order for you to see it in the list.

• Creating Links

  You can create links to pages or files within your site, as well as any address external to your site.

  1. Select the text or image that you would like to use for the link.
  2. Once the text or images is highlighted, click on the link icon in the toolbar.
  3. The link dialogue should appear. If you are linking to an external page or file, enter the address into the URL box and click OK.
     
     If you are linking to a page or a file on your website, click on the Browse Server button. Find the page in the file tree, or click on the Files tab to select a file such as a PDF or other document. Once you select the page or file, its URL will automatically enter into the Current URL box. Click submit to return to the link dialogue, then click OK and your link will be created.
     
     

  Note: If you are wanting to apply a style to a link, it's best to create the link first. Once the link is created and while the text is still highlighted, choose the style from the Style drop down. It's important to follow these steps in order to ensure that the style is properly assigned to the link element.

• Adding Images

  To add an image, click on the Insert Image button on the toolbar.

  The image dialogue appears, allowing you to enter the URL of the image. In most cases, you will be adding an image that is on your site, so you will need to click the Browse Server button. Locate the image in the file tree and click the Submit button.

  You should see your image in the Preview box. Click the OK button to add the image to your content.

Top

6. The Draft/Publish/Archive System show all / hide all

• How it works

  The system records a copy of the page every time the content is saved. This copy can be in the form of a Draft, Archive, or Published page. The system makes it easy to control which version is displayed to your site visitors and which can be accessed only via the administrator console. It also provides quick access to previous versions if you need to restore past content.

• Available Version list

  The Available Version list is located in the middle of the SES Toolbar. Versions are listed in the order in which they are created with the most recent at the top. The most recent version of the page is always the one that is loaded when you begin editing - so if you were working on a Draft after publishing a page, the Draft will be the version that is initially loaded for editing.

• Draft Versions

  Drafts are working copies of a page. They are not visible to any public visitor of your site and can only be accessed via the administrator console. You can only have one draft copy of a page at any time, but you can keep the draft as long as you want even after publishing the page.

  If you are working on a page but don't have time to complete it or need to come back to it at a later date, then saving the page as a Draft is a good choice. You can also save a Draft copy if you need to have the content approved, or you want feedback on the content before making it live on the website.

• Published Versions

  The Published version is what is currently being displayed on your website. There is only one published version of the page at any time. When you choose to Publish the page, a copy of the existing live content is automatically saved to an Archive, and the new content is immediately made available to the public visitors of your website.

  Note: Newly created pages will appear blank to your site visitors until you save a Published version. You should ensure that you have published the page before linking to it from anywhere on your website.

• Archive Versions

  Archive versions are saved every time a page is Published so that you can refer to historical versions of the page if necessary, or to recall information that was accidentally deleted.

  The system will store up to ten days worth of Archives. If you Publish a page multiple times on a given day, then all resulting Archive versions will be listed until the end of the day, at which time only the last version for the day is kept in the Archive.

• Using Draft, Published and Archive Versions

  We recommend that you save your page content periodically as a Draft until you are ready for it to appear on the live site.

  Once you are ready to have it "go live", clicking the Publish link will make the changes available to your visitors.

  You can view any Archive or Draft version by simply selecting it from the list and clicking the View link. It will pop up in a new window and will not interfere with any content that you were editing. Choosing the Load option will load the selected content into your page for you to work on but will not be saved in a Draft or be Published until you click the respective link. However, any unsaved content that you were working on will be discarded when you load another version.

Top

6. Frequently Asked Questions (FAQ) show all / hide all

• Is there a FAQ for the SES?

  You can access the FAQ here