Frontier web editor guide

Using the WYSIWYG editor

Note: These instructions are for using the new WYSIWYG editor to edit any web pages on the Wheaton web site that use the "new template." They do not apply to faculty profiles or news releases. If you are unsure about the page you are trying to edit, contact David Caldwell (x3403) or Colleen Wheeler (x3923) for assistance.

Basic editing instructions

You have been given an account with Wheaton's web editor to allow you to manage and update your web pages easily. You don't need to know HTML or even be especially computer savvy to do this. The five step editing process is as easy as typing in a basic word processor.

• Point your web browser to http://www.wheatoncollege.edu/edit
• Login with your username and your password. On the subsequent screen, use the radio buttons to select "edit the text of a web page" and press "Submit".
• Choose a file to edit. The files you provide content for will be listed in a menubar for you. The filenames are usually similar to the address of the web page, with periods (.) replacing slashes (/) and the name "Wheaton" replacing the address http://www.wheatoncollege.edu.
  
  For example: http://www.wheatoncollege.edu/Athletics/basketballm/schedule.html becomes Wheaton.Athletics.basketballm.schedule
• Page title. At the top of the editing form you will see a box labeled "Page title". Oddly enough, this is where you edit your page title.
• Directives. Be very careful you do not change any of the items that appear at the top of the page in separate editing boxes unless you are sure of the effects. These are known as "directives" -- they control important functions on the page.
• You will see the text of your page in a large text box. Make any edits you wish to make. [If the page does not look right for any reason, do not click on the "Save and Publish Page" button! Call for help.]
• Press the "Save and Publish Page" button and your page will be published to the web server.

Tool bar

Across the top of the editing box there are two rows of icons: this is the Tool bar. These icons can be used to change attributes of your page. Some of the tools are described below.

Formatting options

If you just type, allowing your text to wrap naturally, the WebEditor will take care of everything for you, inserting the necessary HTML codes to make your page display properly on the web. Press return twice between paragraphs to insert a blank line.

Headlines

Within the text of your page you can create several levels of headlines by using the Format menu on the far right of the second row of the tool bar. To select a headline level, highlight your headline text then choose an item from the pulldown menu. To remove the headline level from a line of text, select (highlight) the text then choose --format-- (the first option) from the pulldown menu.

The Page Title will automatically appear at the top of your page, formatted according to the master stylesheet. You can edit the text of the page title at the very top of the editing page where it says PageTitle. Do not include any punctuation or HTML within the title.

The page title will appear as a first level headline (h1). You should not mark any other text as h1. (You can, but it will disappear when you save the page.)

Normal section titles are marked with h3. If your page has a few main divisions with sections within them, you should use h2 for the main division headings and h3 as usual for the section titles.

Emphasis

You can use the toolbar B and I buttons for bold and italic. Just highlight the text then click on the button. If the text is already bold or italic, clicking on the button will turn it off. Do not use HTML B or I tags.

Centering

Do not use HTML center tags, as they interact very badly with style sheets and will make a mess.

Including HTML

If you attempt to include HTML code directly in your page, it will be automatically removed.

Tables

The web editor can lay out text into tables in a variety of formats. The full range of possibilities is beyond the scope of this document -- call for a tutorial.

Templates

The WebEditor can publish your page in one of a family of related templates. All of the templates have a banner image across the top, a dividing bar and a background. Wheaton standard banner images are available for your department or program. The choice of template is one of the initial design choices you make when setting up your site. It is normally set by the site administrator when he or she creates the shell of the site for you.

The simplest template has a single panel for your page text. It is most appropriate for sites that consist of one or a few pages with no complex navigation needs. The text panel is an appropriate width for reading text on the screen, and pages using this template will print in portrait mode.

The most common layout is the two-panel template with a menu down the left and a panel for your page text. It is most appropriate for sites with multiple pages and multiple folders. The two-panel template also has a variant with a wider panel for the page text -- this is most useful when the page content is a table or other horizontally-oriented material rather than a page of text.

The last template has three panels, one for the left menu, one for the page text and one for news items on the right side. It is intended for complex sites that are going to be updated frequently.

Navigation

Links

You can include (or remove) links in your page text by using the Link (or Unlink) buttons in the first row of the tool bar. For instance, to make the word "LINK" into a link to Google.com, type LINK in your document and highlight it. Then click on the Link button (it looks like a few links of chain). A pop-up window will appear. Type (or paste) the URL for google.com (http://www.google.com) in the Link URL box and click on the Insert button.

Links to pages on the Wheaton web server do not need to include the "http://www.wheatoncollege.edu" at the beginning. A link to the About Wheaton home page should be written like this, beginning with a slash:
/About/home.html

Similarly, you can remove a link by putting your cursor anywhere in the link text, then clicking on the Unlink button just to the right of the Link button (it looks like a broken chain link).

If you have used anchors in your page so that you can link to a particular place in the page, your anchors will appear in your text as little anchors. To change an anchor's name, highlight it then click on the Anchor button in the menu bar (to the right of the Unlink button).

Menus

The menu on the left is separate from your page text. In this way it can appear with every page in your site while being stored in a single place for easy maintenance. You can edit this file, called MenuLeft, through the WebEditor. It normally resides in the top-level folder of your site.

In addition, you can have local menus for sections of your site that float on top of the MenuLeft. You might want to do this for all the pages in a folder to provide navigation among them. This file is called MenuLocal and resides in the folder with the pages it appears on. There is some planning and set up required to use these local menus -- talk with your site administrator.

The menu files, MenuLeft and MenuLocal, have a special format that you must follow when editing them. Each menu is a bulleted list. Each menu item is a single bullet, and its entire text is a link to another page on the site. (You should use the Link and Unlink buttons to manage the addresses (URLs) of these links.)

Crumbs

You can also provide navigation through "bread crumbs" or a "crumb trail" below the page banner. (Think of Hansel and Gretel leaving a trail of crumbs so they can find their way home.) The crumbs allow your visitors to navigate back up your site after they have drilled down through one or more levels of folders.

Setting up a system of crumbs is a site design decision you should make with your site administrator. Crumbs can be turned on or off for whole sites, for individual folders or for single pages.

Images

You can include images by placing the image file in the "Images" folder in your top-level folder on the web server, then use the image icon in the tool bar (it looks like a picture!) to specify the location and attributes of your image.

Note: At this time, images must be transferred to the server via FTP.