The website editor is the application that is used for:
This document serves as a guide to the various site editing features contained within the Website Editor.
There are two ways to enter the Website Editor:
The website editor looks like this:
The important features 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).
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):
|
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.
Your site's content can be viewed at five different levels:
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.
* Note that the "99" in this example does not mean the 99th version of the page body. 99 is simply an ID number that is assigned to this version of the page body. Every version of every content item in the system is assigned a unique ID number, so they will not necessarily be sequential for a particular content item.
The top view displays all of the websites and website templates that you are permitted to work on. (Note: If you only have access to one site, and the CMS.skip_topview configuration parameter is set, then you will automatically be promoted to the Website View.)
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:
- 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
- Location: specify this site's relationship to other sites in the system, and its publication location.
- 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.
- 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. See the User Management Guide for more info.
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:
- hidden pages
- templates
- libraries
The site map view can be made the default using the CMS.pageview configuration parameter.
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:
- 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.
- Template: select a template to format this page with. You can preview the available templates, by clicking on the preview links.
- 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.
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:
- Preview: display this page in a separate window
- Editable preview: shows the page, but with editing tools embedded in it, for easier content management.
- Non-editable preview: shows the page, but with editing tools explicitly turned off.
- Edit mode on: sets a flag so that editing tools will be embedded in not only this page preview, but also in every other site page that is navigated to from the preview.
- Edit mode off: un-sets the edit mode flag, so that you get normal previews instead of the editable previews.
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.
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.
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.
There are several ways to update a particular piece of content:
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:
Editing Layout - 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 Formatting Lists - 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
Colors Special*** - 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 WYSIWYG editor cannot perform a certain effect, but you know how to do it manually
- You want to delete or edit some HTML tags that you cannot see directly in the WYSIWYG editor
- You are an HTML hacker who prefers working with raw formatting codes
- You are working on a template and need to work with CMS tags directly.
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.
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:
- select an internal page from the option menu. This will automatically set the URL field.
- 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:
- None - image is inlined at the cursor position
- Left - image is left-aligned, and text will flow around it
- Right - image is right-aligned, and text will flow around it
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:
- number of rows
- number of columns
- row height and column width (in pixels, or %. Add "%" to the number if specifying in percent. Otherwise pixels will be assumed.)
- cell padding (white space around each cell, in pixels)
- cell spacing (white space between each cell, in pixels)
- alignment of cell contents (vertical and horizontal)
- border width (in pixels) and color (named, or #RRGGBB notation)
- background color
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:
- Web Application - select which web app you are inserting at this point. The list is determined by inspecting which web apps are installed on your site.
- Parameter - an optional text argument to the web application. Most web apps have a default behaviour if no parameter is provided, so this is optional. However, if you have a particular effect you want to achieve in this case, you can specify it here. The meaning and format of the parameter vary between web applications, so you have to consult the documentation of each web application to know what your options are.
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:
- vertical - create a vertically-formatted menu, with each link on a new line, and submenus (child pages) displayed when appropriate.
- horizontal - create a horizontally-formatted menu, with each link separated by a '|' character, and no submenus.
- path - create a path menu, showing the "bread crumb" path from the home page to the current page.
- sitemap - create a full site map, showing all visible pages in the site, and their relations to each other.
When a web application is inserted into the editor, it will be represented by an icon. This icon will expand into the dynamic content when a real page is viewed. If you mouse over the icon, the application and its parameters will be shown in a tooltip.
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 icon 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.
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.
After you have entered your new content, ExSite prompts you for some additional information to complete the update.
Content Type - ExSite makes an educated guess as to the MIME-type of the content you entered. It usually guesses correctly, but you should verify that it got it right, or your content may not render properly. One case where it can guess wrong is when you enter text without any special formatting or mark-up. In this case, ExSite doesn't have many clues to go by, and may choose "text/plain" or "text/html" -- double-check the result or your content may be oddly formatted.
Attributes - in the case of uploaded images, ExSite allows you to specify some optional attributes that can be included in the <IMG> tag. This can be used to, for instance, specify height and width attributes, borders, and so on. These attributes are only inserted if the image is referenced using the <!--&content(image-name)--> notation. If you use the <img src="[[image-name]]"> notation, then you are responsible for explicitly specifying all of your attributes.
Comment - ExSite maintains an audit trail of content updates, and a brief comment is required so that content managers can recognize the purpose and effect of each update.
Templates are a complex subject, and are fully detailed in their own section of the ExSite Manual, Templates.
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 created 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.
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 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 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)-->