The Website Editor

Introduction

The website editor is the application that is used for:

This document serves as a guide to the various site editing features contained withing the Website Editor.

Contents

Getting Started

There are two ways to enter the Website Editor:

  1. From an editable page preview, click on one of the content management buttons. This will take you to the Website Editor screens for that content. The button takes you to an update screen, whereas the button takes to you a version management screen. You can also get into the Website Editor from the menu bar at the top of the editable page preview.

  2. From the Adminstrator Webtop, launch the Website Editor by clicking on its icon:

Overview of the Website Editor

The website editor looks like this:

The important features are:

  1. Escape buttons: these are available on every screen, and will take you Home (to the Administrator webtop, or to your site homepage, depending on your access level), to Help (if any is available on your site), or log you out of ExSite.

  2. Bread crumbs: this shows you where you are in your site and content hierarchy. You quickly navigate back out to higher levels by clicking on these links.

  3. Menu Bar: the options in the menu bar will change depending on where you are in your site and content hierarchy. These options allow you to reconfigure your site, pages, and content, add new content, remove old content, preview pages, and so on. The options that are available in the menu bar change depending on your permissions, so not all of the features described in this document may be visible to you.

  4. Configuration: the left sidebar shows you configuration information about the site/page/content that you are currently viewing. This configuration data can be modified by selecting the configure option from the menu above.

  5. Content View: the content objects that are available from your current location are displayed in the main part of the website editor window. Normally they are shown as icons, but alternative views are available in some cases. To work on a content object, simply click on its icon. The different icons and their meanings are:

    - a web site.

    - a web site template (a predefined site map that can be used to preconfigure new sites).

    - a web page.

    - a page template.

    - a content library (collection of reuseable content, such as images).

    - editorial content (eg. body text)

    - design content (eg. images, stylesheets, templates)

    - a content version

    - move back one step in the content hierarchy (eg. from page view to website view).

Content Structure

Web content has a nested structure. At the top level you have web sites, which are collections of pages. Pages are in turn collections of content items. And in ExSite, content items are collections of versions (from the current version back through various older, archived versions):

  • website 1
    • page 1
      • content item 1
        • version 1
        • version 2
        • version 3
        • ...
      • content item 2
        • ...
    • page 2
      • ...
  • website 2
    • ...

Alternatively, the content structure can be represented graphically like this:

When you view your website content, you can view it at the level of a site, page, content item, or version. The administration screens of Website Editor displays the contents of whatever "object" you are viewing, as described in the next section.

Editor Views

Your site's content can be viewed at five different levels:

  1. Top View: shows all of your sites
  2. Site View: shows all of the pages, templates, and libraries defined in a particular site.
  3. Page View: shows all of the content items defined in a particular page (or template, or library).
  4. Content View: shows all of the versions of a particular content item.
  5. Version Preview: shows a particular version of a particular content item.

Your position at each level is displayed in the "Bread crumb" view, shown above. For example:

Top > My Website > index.html > body > 99

This means that you are in site "My Website", inside the "index.html" page, working on version 99 of the page body. If you are not so deep into the content hierarchy, fewer levels will be displayed.

Top View

The top view displays all of the websites and website templates that you are permitted to work on.

To open a website to work on its pages:

Click on that website's icon.

To create a new website:

Select Websites > New site from the menu. This starts the Website Wizard, which leads you through the following steps:

  1. Website Details: provide a site title and description, and set the website type, which can be one of:
    • native website: publishes to the default document root for the webserver
    • stand-alone website: publishes to its own document root, but on the same webserver
    • remote website: publishes to its own document root, on a different webserver
    • website template: defines a set of pages that can be used to preconfigure a new website
  2. Location: specify this site's relationship to other sites in the system, and its publication location.
  3. Pages: select a website template to preload your site with pages from, and select a template to format those pages with. Templates may be previewed using the preview links.
  4. Webmaster: define who is permitted to manage this site. You can either create a new website manager account, or re-use an existing one. (You can also do both.) In either case, define whether the manager has editorial, designer, or administrator priveleges. This determines which content items the manager is allowed to work with, and what operations they are allowed to perform on thos items.

If there are websites in the system, but you cannot see them in the top view, that means that you haven't been granted access to those sites. This can be handled by the member manager or database manager applications, not the website editor.

Website View

The website view displays all of the templates, pages, and libraries known to a site. It is the second level in the "Bread crumb" display.

To open a page, template, or library, to work on its content:

Click on the page, template, or library icon.

To view a strutured site map instead of the icon view:

Select View > Site Map from the menu. Note that the site map is often handier for finding pages in a larger site site, but unlike the icon view, it does not show:

To change the site configuration:

Select Website > Configure site from the menu. This allows you to change the options that were originally selected in the website wizard, above.

To delete a whole site:

Select Website > Delete site from the menu. You will be prompted to confirm the deletion, with links to every database record that will be irrevocably deleted. Choose "Cancel" if you change your mind.

The Delete Site function cleans all site data out of the database, but does not delete files that have already been published to disk.

To create a new website that is a child of this website:

Select Website > New sub-site from the menu. This will lead you through the website wizard, as described above.

To create a new web page:

Select Website > New page from the menu. This will start the page wizard, which takes you through the following steps:

  1. Page Details: set your page's title, description, keywords, menu label, and configuration parameters:
    • status: only active pages are treated as part of the live site. Inactive pages can be retained for working on, or for archival purposes.
    • accessibility: pages can be publicly accessible, or restricted to members (logged-in users), or administrators.
    • static/dynamic: determines whether the page is published to a flat HTML file, or is rendered dynamically on request. Note that restricted access pages must be dynamic.
    • page visibility: determines whether you want the page to appear in site maps and auto-generated menus.
    • parent page: determines where in the site map this page is placed.

    You must also set the page's file name that it will publish to. Typically this is a name such as "filename.html", but if you want the published page to be run through PHP, it can be named "filename.php". The filename acts as a "handle" for the web page (ie. a unique name by which the page can be referenced), and so you must define it even in cases where the page is dynamic and not published to a file at all.

  2. Template: select a template to format this page with. You can preview the available templates, by clicking on the preview links.

  3. Body: you can select from a set of pre-defined page bodies, if any have been set up in this installation. If none have been defined, you will only have the option of a "normal body, fully editable".

Once the page is created, it will appear in the website view, and can be operated on normally.

To create a new library:

A library is just a place to store shareable and re-useable content (such as logos or generic images). Select Website > New library from the menu. Enter the basic configuration information for the new library, including a name, description, and directory name to publish the library files into.

Once the library is created, it will appear in the website view, and can be operated on normally.

To create a new template:

This is can be an involved procedure, depending on how complicated your template is, and how it relates to other templates in the system. Begin by selecting Website > New template or Template > New template from the menu. Full documentation is provided in the ExSite Templating Guide.

To change all pages in the site to a different template:

Select Template > Change for all pages from the menu. Select the site-wide template from the options presented.

To publish the site:

Select Publish > Publish site from the menu. It will report on the status of every file that is published.

Note: because ExSite dynamically determines whether to link to the static or dynamic version of a file based on whether or not that file already exists on disk, the first time you publish a site, many of the site links will point to dynamic pages because those pages haven't been saved yet. To change these to the correct static links, simply publish the site again. ExSite will see the static web pages the second time through, and will point to those instead.

Page View

The page view shows all of the defined content elements in your page. It is also used to display the content elements in templates and libraries (which are treated internally as similar to pages).

For simple pages, you will only have a body element to manage. For complex templates, there may be dozens of images, stylesheets, scripts, and other elements to manage.

To preview this page:

From the View menu, select:

To update a particular content element:

From the menu select Update > Update XYZ, where "XYZ" is the content element you want to update. This will lead you through the Update wizard. Click here for details on the update procedure.

To add a new content element:

Select Page > New content item from the menu. In the first step, you define and configure the new content element. The remaining steps follow the update wizard.

To publish this page:

Select Page > Publish page from the menu. This also works to publish the contents of templates and libraries.

Note: because ExSite dynamically determines whether to link to the static or dynamic version of a file based on whether or not that file already exists on disk, the first time you publish a page, many of the site links could be left pointing to dynamic pages because those pages haven't been saved yet. To change these to the correct static links, republish the page once the other pages have been saved.

To change this page to a different template:

Select Template > Change Template from the menu.

To change this page to use a preconfigured body:

Select Template > Change body from the menu. Preconfigured bodies are not available in all sites.

To jump to the template used by this page:

Select Template > Go to template from the menu.

To change the configuration parameters for this page:

Select Page > Configure page from the menu.

To delete this page:

Select Page > Delete page from the menu. You will be prompted to confirm the deletion of the page and all associated records from the database.

Content View

The content view displays all known versions of the selected content item, ordered with the most current versions on top, and the oldest at bottom.

To preview a particular version:

Click on the desired version.

To update this content (add a new version):

Select Update > Update from the menu. This will lead you through the Update wizard.

To cancel an update:

Select Update > Rollback from the menu. This will delete the most current version, restoring the previous version.

To remove old versions:

Select Versions > Clean Up from the menu. You can select which versions to keep and which to discard.

To reconfigure this content:

Select Content > Configure content from the menu. This allows you to redefine the types of content that will be accepted, and the types of users who can work on this content.

Version Preview

This view displays a particular content version. Note that the content is displayed outside of the context of its page, so it will be drawn with different style rules than it normally uses, and may appear slightly different as a result.

To remove this version:

Select Version > Delete Version from the menu.

To restore this version:

To restore an older version to the position of current version, select Version > Restore Version from the menu. This creates a copy of the older version, so the older version also remains in its original position.

Updating Content

There are several ways to update a particular piece of content:

  1. Click on a button in an editable page preview.

  2. Select the item to update from the Update menu in the Page View

  3. Select Update > Update from the menu in the Content View.

  4. Creating a new content item will also lead you into the update wizard after you define the basic content parameters.

Update Method

There are several methods for updating a piece of content, described below. ExSite selects the method that it believes is most appropriate for the context, but you can change the method using the update method selector. Warning: changing the update method will revert the content to the last saved version. If you want to change the update method, do so before you have made any changes to the content.

Edit using WYSIWYG HTML editor

This method provides a rich text editor (WYSIWYG = "What You See Is What You Get") that gives you a lot of control over how your text is formatted. The supported editor functions include:

EditingLayout
- undo
- redo

Ctrl-X - cut
Ctrl-C - copy
Ctrl-V - paste*
- left/right justify selected text
- center selected text
- left-align selected text
- right-align selected text
Text FormattingLists
- boldface selected text
- italicize selected text
- underscore selected text

There are also selectors for text type, font, and size.
- begin bulleted list**
- begin numbered list**
- indent selected list items
- outdent selected list items
ColorsSpecial***
- background color of selected text
- foreground color of selected text
- insert a link
- insert an image
- insert a table
- insert web application

* Pasting content: you can select content in any web page or document, copy it, and paste it into the editor. Web page content that is cut-and-pasted in this way will come with all images and formatting intact. Note however, that images remain at their original locations, so if the images change or are deleted, your page may no longer render properly. Note also that content copied from word processing documents (in particular, Word), will be pasted with reams of junk HTML that may foul up your page formatting. It is best to avoid this practice.

** Lists: use the indicated tools to begin a list. Hit <CR> to begin a new list item. To terminate a list, hit <CR> twice.

*** Special Functions: these are detailed individually below.

Edit using a simple text editor

This method shows your text in raw mode, with all HTML tags explicitly displayed. This is useful in certain circumstances:

The editing functions in this mode are primitive, and may vary between browsers.

Upload new version in a file

You can upload an entirely new version of your content in a file, and it will completely replace the old version. This is the normal method of updating images and other content that rests in external files.

Point to file on server

You can point to a file sitting on your webserver. This is not recommended, because the file is not in ExSite's control, and can be moved or changed without notice.

Point to URL

You can point to an external URL on a remote website. This is not recommended, because the URL is not in ExSite's control, and can be moved or changed without notice. There may also be copyright issues to deal with.

Special Functions

The WYSIWYG editor includes some special functions for inserting complex objects into your page.

- Insert a link

The link tool creates hyperlinks to other pages. Select the text that you want to be hyperlinked, and press the link button, . This brings up the link tool.

Your selected text will be displayed in the "Link text" field. (It may be edited here, if you like.) The remaining fields are used to set the link destination. You have two options:

  1. select an internal page from the option menu. This will automatically set the URL field.
  2. specify an explicit URL, such as to an external site.

When you click the "Submit" button on the link tool, the link will be created. (It will not actually work from within the editor; you must proceed and then test the link from the actual page.)

- Insert an image

The image tool inserts images taken from the content management system. Place your cursor where you want the image to appear, and press the image button, . This brings up the image tool.

The image tool searches through the libraries on your site for images to use. The results of this search are shown in the "Select an image" option menu. When you select one, a preview will be shown under the "Image Preview" heading.

You can set the image alignment using the radio selector:

When the image is inserted, it will not display in the editor. You will see an empty image or the grey checker graphic instead. This is because the image is being drawn from another source, not the current page. The image will be located and displayed properly when the full page is rendered, however.

If you inspect the raw HTML, you will see that the image tool inserts tags like this into the text:

<!--&content(image-name)-->
This tells the content management systm to find the given image (whether it is located in the database, or published to disk) and insert the appropriate URL at that location. This tag can be edited directly by experts, simply by providing an alternate image name. (If the named image does not exist, the content management system displays nothing.)

- Insert a table

The table tool creates tables. Place your cursor where you want the table to appear, and press the table button, . This brings up the table tool. There are many parameters that you can set, including:

Once the table is inserted, you will be able to click on any cell in the table to begin entering or pasting text, images, etc. To change cells, click on the new cell to work on.

Modifying a table that already exists (eg. adding/removing rows) is tricker, and usually involves editing the bare HTML to insert/delete the appropriate tags.

- Insert Web Application

Web applications are sources of content, and can be inserted into pages like any other content item. To do this, place your cursor where you want your application to insert its content, and click the web application button, . This brings up the web application tool.

The web application tool has two input fields:

For example, the SimpleMenu web application dynamically creates site navigation links (menus) based on the current location in the site. It accepts the following arguments:

When a web application is inserted into the editor, you will see either an empty image, or the grey checker graphic. Passing your mouse over this, you should see a tool tip indicating which web application this image represents. The web application is not invoked in the editor (since its content is externally generated, it is not editable), so you will not see it until the normal page is viewed.

If you inspect the raw HTML after the update is completed, you will see that the web application tool inserts tags like this into the text:

<!--&SimpleMenu(sitemap)--> 
This tells the content management systm to invoke the given web application, and pass it the parameter in parentheses. The web application will pass a block of content back to the content management system, which will be inserted in place of this tag. This tag can be edited directly by experts, who can change the web application that is called, and/or the parameters it is passed.

To remove a web application from a page, simply delete the checker graphic that represents it. Although you can modify a web application call by editing the tag, as described in the previous paragraph, it is often simpler to delete the web application and re-insert a new one. (Position your cursor just to the right of the checker graphic, and hit the backspace key. Then repeat the step of inserting a new web application object.

Note that complex web applications can generate large amounts of content, or very diverse page views. They can also be recursive, meaning that you can revisit the same web application under different conditions, and have it produce very different content on each visit. If you insert a web application object into a page that contains other static content, that static content will be reproduced on every instantiation of this page, with the web application content embedded into it as you have specified. You should ensure that the static content is an appropriate wrapper for all possible outputs of the web application.

Completing the Update

After you have entered your new content, ExSite prompts you for some additional information to complete the update.

Templates

A template is very similar to a page, except that it does not appear in any site maps. Instead, a template serves as a framework that page-specific content is inserted into. However, templates can be previewed and managed exactly like regular pages.

Every real page defines the template that it will use as its framework. Reformatting a page is as simple as setting the page to use a new template. The simplest way to do this is to select Template > Change Template from the page view menu. You can also change all pages in a site to use a new template by selecting Template > Change for All Pages from the site view menu.

How Templates Work

When ExSite has to draw a page, it looks for a content item named "page", which contains the HTML framework into which all secondary content is inserted. In principle, a particular web page can define its own "page" content item (this is sometimes useful to override template layout for a particular page, while still using all of the template's image files), but normally a web page will borrow the "page" item from its template.

The "page" item will normally contain the base HTML for the page, with various content-management tags that tell ExSite how to find auxiliary content, such as style sheets, images, scripts, and body content. ExSite begins by parsing the content of the "page" item, finding each secondary content item that is referenced within it.

For each referenced content item, ExSite searches for content under that name, in the following locations:

As soon as a match is found, ExSite substitutes that content item in place of the content management tag. If no match is found, ExSite substitutes the empty string in place.

Since other content items can also contain content management tags, this process can continue to several levels depth, until ExSite is satisfied that all content references have been satisfied.

Template Inheritance

Templates can be derived from other templates. That simply means that the template itself has a template (and so on...). All templates that are related in this way will be searched for content.

This allows you to create a new template that shares all of the content of its parent template, but differs in only a minor respect, such as:

Only the differing content needs to be included in the derived template, since anything not explicitly defined will be searched for and found in the parent template.

Standard and Irregular Pages

A standard page is a page that references a "body" content item. This is a common template format, so ExSite includes some additional features for "body" management. In particular, ExSite will search for pre-defined "body" elements that can be dropped into place automatically, which can simplify the page creation process. (See Libraries, below.)

An irregular page has no "body" element. It may define its own named page elements, so it is still manageable using all the normal website editor tools. However, it will not benefit from any preformatted page bodies that are available in the system.

Creating and Managing Templates

This is a complex subject, so it is fully detailed in its own section of the ExSite Manual, Templates.

Libraries

A library is similar to a page in one respect - it holds content objects. However, a library has no public view, like a page does. It is an administrative tool that allows you to bundle related content for organization purposes. There are several reasons you might want to do this:

Libraries are creatd from the website view, using the Website > New library menu option. Inside a library, new content objects are created exactly as in normal pages.

Libraries are automatically searched for matching content when the content is not found in the current page or its templates. The search proceeds through libraries in the current site, and then through libraries in the parent site, and so on.

Libraries are automatically published to disk when you select Publish > Publish site from the site view. When you reference a library content item, it will automatically use the disk version, if it is available, but will resort to the internally stored database version if not.

Libraries of pre-formatted page bodies

When you create a new page, ExSite allows you to select from a list of page bodies to preformat your page contents. The default is a blank page, which may be edited using the standard update tools. You can add new preformatted page bodies into the system, to increase the options that are available in this list. The usual reason to do this is to include some preconfigured web application pages, which simplifies the process of creating advanced web application pages. Otherwise, the casual site editor must know how to select the appropriate web application using the web application tool, and provide it with appropriate parameters.

ExSite finds the list of preformatted page bodies by searching the libraries in the current and parent sites for all "body" content objects. To add a new preformatted body, simply create a new "body" content object in one of these libraries, and update it with some appropriate content. Be sure to give it a unique description, since that is how the bodies are distinguished in selector menus. The new body will be displayed in list of available page bodies, the next time you create a page, or select Template > Change body from the page view.

If you have a standard set of page bodies, it is a good idea to keep them all under a single library, to make them easy to find. One problem, however, is that when you open this library, you will see numerous content objects with the same name ("body"). However, if you mouse over each body, you should see a tooltip distinguishing each body.

Libraries as image galleries

Libraries can optionally be used as image galleries, if you want those images to benefit from the full features of the content management system. The images can be referenced individually, using the image tool. If you want to view them all at once, you can use a Photo Album web application that does this job.

Libraries as document repositories

Libraries can be used to store documents or other files that don't normally display directly on the web (eg. spreadsheets, PDF files, zip archives). In your document library, simply create a content object for your document, give it an appropriate name, and upload the current version of this file.

A link to download the document or file will be automatically inserted into your pages wherever ExSite encounters the content management tag:

<!--&content(document-name)-->