Frontier Web Editor Using HTML and Linking
Basic editing instructions
Directives. Be very careful you do not remove any quotation marks or other punctuation if you need to change any of the lines at the beginning that start with the pound sign (#). These are known as "directives" -- they control important functions on the page. For instance,
#PageTitle "Meet our staff"
#Keywords "concerts, tickets, events"
Press the "Save and Publish Page" button and your page will be published to the web server.
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 including special characters. Please use these markings rather than fussing around with HTML heading and bold tags. By using these markings you are describing the structure of your document, not just the formatting. This makes your documents more portable and easier to automatically reformat for different uses.
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.
If for some reason you do not want the page title to appear on a page, insert this line at the very top of the page text window:
#noHeadline "true"
This is often desirable on the home page of a site, where the name of the department is already included in the page banner image and it would look silly to then repeat the department name as the page title.
Primary titles.
For titles of the (few) main divisions of the page, put the title on a line by itself. At the very beginning and very end of the line put two ampersands. Make sure there are no stray spaces before or after the ampersands.
Section titles.
For titles of sections, use two asterisks instead of the ampersands -- at the very beginning and very end of the line put two asterisks.
Item titles.
For titles, use two percent signs instead of the ampersands. These do not have to stand alone on a line as the other titles do, there may be text following them. For example,
Item titles.
Emphasis
You can include standard HTML tags for bold and italic. Do not use tags.
Centering
Do not use center tags, as they interact very badly with stylesheets and will make a mess.
Including HTML
If you know what you are doing, you are welcome to insert HTML tags into the body of your document. In general this should not be necessary, so before going down this path, please make certain that what you are trying to achieve cannot be accomplished more simply.
Within an HTML block the Web Editor assumes you know what you are doing, and it stops providing any automatic formatting for you. In particular you must take care of all your own line breaks. Do not use unmatched paragraph tags: either make your line breaks with break tags or enclose your paragraph in a matched pair of paragraph tags.
There are some limitations to the HTML that you can include, because your page text is embedded in a larger web page. In particular, you cannot include an HTML block within another HTML block of the same kind. For instance, you cannot include a table block within another table, or a DIV within a DIV.
Templates
The Web Editor 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 to an external url
You can include links in your page text by including a standard HTML link tag. For instance, to make the word "LINK" into a link to Google.com we would cut and paste the html that is next to link example at the bottom of this page. Where it says "paste url here" you would past google.com. Where it says "paste text here" type what word you want to be able to click on to bring you to google.com
Links to pages on the Wheaton web server
Links to other Wheaton pages do not need to include the "http://www.wheatoncollege.edu" at the beginning. A link to the About Wheaton home page should be written where it says "paste url here" in the html next to the link example at the bottom of the page. It should look like this, beginning with a slash:
/About/home.html
Images
You can include images by placing the image file in the "Images" folder in your top-level folder on the web server (through Fetch/FTP), then including a standard HTML image tag that refers to the image. For instance, if you have an image file named "bigpicture.jpg" in the Images folder for the Web group you would paste the html found at the bottom of this page next to "Image example" and where it says to "paste URL here" you would type in the file path from Fetch/FTP. In this case bigpicture.jpg would be in /web/images/bigpicture.jpg
You can also right click (or control click on a Mac) on your image inside of Fetch/FTP and choose copy link location and paste it into the html here. Just remember to remove extraneous information before the first slash and folder (usually it will say the word Frontier and have your WID).
Additional subtleties are possible, including adding space around the image and flowing the text in different ways around the image, by using standard HTML options on the image tag.
Note: At this time, images must be transferred to the server via FTP.
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 item consists of three lines in the file: a link or URL line, a text line for the text which appears on the menu, and a blank line to separate the item from the next item.
link1:/admin/SFS/staff/
text:Staff Listing
You can make submenu items indented underneath a main menu item. For example, use link1a to create an indented submenu item below an item labelled link1.
link1a:/admin/SFS/staff/SamSnead.html
text:Sam Snead
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.
Tables
The web editor can lay out text into tables in a variety of formats. The full range of possiblities is beyond the scope of this document -- call for a tutorial.
For a simple table consisting of rows of data elements, follow this example. The data elements on each line must be separated by tab characters (which you cannot type in the web editor) or by backquote characters (top left of most keyboards, above the tab key.) Enclosing a row in pairs of asterisks (like a section title) will make it into a bolded heading row.
| Name | Position | Weight |
| John Smith | forward | 165 lbs |
| Mary Jones | center | 122 lbs |
| Sam Snead | forward | 145 lbs |
| Emma Peel | center | 127 lbs |
which produces:
| Name | Position | Weight |
|---|---|---|
| John Smith | forward | 165 lbs |
| Mary Jones | center | 122 lbs |
| Sam Snead | forward | 145 lbs |
| Emma Peel | center | 127 lbs |