Introduction

This page describes style restrictions required by the Content Management System and provides general suggestions for effective page layout.

Browser

Your browser should be the latest version of Internet Explorer or Mozilla's Firefox. The Content Management System's editor relies on features not present in older versions of these browsers or in other browsers. JavaScript must be enabled for the administrative site. (It usually is by default.)

If you are using a recent version of Internet Explorer, by default it will automatically put address and status bars on pop-up dialogs. To disable this feature, first add the URL of your Administrative site to the list of "Trusted Sites". (From the "Tools" menu, select "Internet Options...". Select the "Security" tab. Click on "Trusted sites" and then on "Sites..." Make sure "Require server verification" is unchecked. Add the URL of your Administrative Site to the list.) Then, before you close the dialog, enable pop-ups without address and status bars for trusted sites. (Click on "Custom Level". Under "Miscellaneous", select "Enable" for "Allow websites to open windows without address or status bars" .)

Pop-up Blocking & Ad Filtering

You must not block pop-up windows from your Administrative site. Pop-up dialog windows are required by the Content Management System.  If you are using ad filtering, such as Firefox's Adblock Plus, you should disable filtering on the administrative site.

Name and Size Restrictions

The Content Management System places a few restrictions on file, directory, and hyperlink names and on Side Menu contents.

Reserved Directory Names

The Content Management System reserves the following directory names for its own internal use:

where "/_*/" means any name that starts with an underscore. If other types of file uploads are installed, then other directory names corresponding to the file types (such as /audio/ or /video/) may also be reserved.

File Names

The only required file names are the names of the main page in each directory, which, by convention, must be index.htm . (This means that the home page of the website is the index.htm file that resides in the root directory.) The names of files cannot contain spaces or punctuation characters. Uploaded images or files cannot start with "TM_".

Directories and "index.htm"

Each directory must contain a page named "index.htm". This is the page presented by the Web server whenever a browser loads a URL that ends with a directory name. Whenever you create a new directory from the Edit Content page, the Content Management System automatically creates a file named index.htm in the new directory.

The index.htm file defines the Side Menu for all other pages in its directory. Side Menus are described here. Editing Side Menu contents is described here.

Hyperlinks

Four types of hyperlinks are supported: two types of local links and two types of off-site links . (In the Markup language, all hyperlinks are defined using the .LINK and .LINKIMG commands.)

• Local links (also known as on-site links ) refer to pages on this website. Local links to other pages must begin with "/" and must provide the entire hierarchy from the root directory. For example, the local link to this page is "/tools/man/style.htm". The local link to the index.htm file in this directory is "/tools/man/index.htm". Local links are checked by the Local Link Checker.
• Anchor links are a special kind of local link to Anchors placed in a page. Links to Anchors start with "#" followed by the name of the Anchor. (In the Markup language, anchors are placed using the .ANCHOR command.) Links to Anchors are checked by the Local Link Checker.
• Off-site links refer to pages on other websites. Off-site URLs must begin with "http://" and are checked by the Off-Site Link Checker.
• Email links are a special kind of off-site link that open an email composition page. Email links start with "mailto:" followed by an email address. Email links are not checked. (Use of email links is strongly discouraged. Spammers run robots that regularly gather mailto links and use them to send spam. Instead of using a mailto link, list email addresses in two plain-text parts, such as "username" at "domain.com". This makes it less likely that robots will find the email address.)

Side Menu Graphics

Pages with Side Menus on some sites may optionally display one or two Menu graphics on the top and/or bottom of the Side Menu or, depending on the page design, elsewhere on the page. Menu graphics files are uploaded using the Edit Content page and placed on pages using the Page Editor. (Pages may also contain general-purpose images mixed in with the body of the page's text.)

The Side Menu images can be encoded as GIF, JPEG, or PNG files. They should all be scaled to match the size of other side images in use on your site. If they are not, they will be scaled by the browser, which can cause significant distortion and degradation of image quality. It is far better to size the images in Photoshop (or some other graphics program) than to let browsers scale them.

To prepare images for use on the Side Menu using Photoshop, scale each image to match the size of other Side Menu images in use on your site, apply a 50% 1-pixel unsharp mask, transform the image to "indexed color" using either an exact or a 100-color "local adaptive" palette with a 75% "diffusion" dither and save the image as a "CompuServe GIF" file. GIF files of this size are generally smaller and sharper than JPEG images. Upload the resulting file to the /graphics directory on the site using the Edit Content page.

Banner Images

Different pages can display different Banner images. Banner images are uploaded using the Edit Content page and placed on pages using the Page Editor.

Banner images can be encoded as GIF, JPEG, or PNG files. They should all be scaled to match the size of other Banner images in use on your site. If they are not, they will be scaled by the browser, which can cause significant distortion and degradation of image quality. It is far better to size the images in Photoshop (or some other graphics program) than to let browsers scale them.

To a Banner image using Photoshop, scale the image to match the size of other side images in use on your site, apply a 50% 1-pixel unsharp mask. Use Photoshop's "Save for Web" command to select the file type that optimizes both file size and image appearance. Upload the resulting file to the /graphicsb directory on the site using the Edit Content page.

General Images

General-purpose (non-menu) images have no restrictions on their size or aspect ratio. They can be encoded as GIF, JPEG, or PNG files. Upload image files to the /images directory on the site using the Edit Content page. Add images to pages in the Page Editor. (In the Markup language, general-purpose images are entered with hyperlinks using the .LINKIMG command and without links using the .IMG command. )

Titles

All pages must have a Title, which appears in large type at the top of the page and on the Site Map. (This page's Title is "Basic Requirements".) All pages must also have a Short Title, which is appears on the Side Menu and on various Administrative pages. The Short Title should fit on one or at most two lines on the Side Menu. Both the Title and Short Title are entered using the Page Editor.

Design Suggestions

Consistency is central to good Web design. It is essential to use a consistent layout and hyperlink style to make it easy for users to interact with your site. Both the Page Editor and the Markup language provide flexible formatting controls that don't impose restrictions on their use. It is up to the content editor (probably you) to maintain a consistent style. This section describes some of the issues to keep in mind.

Hierarchy

Think of directories in your website hierarchy as "chapters" and files as "pages" in the chapters. Unless you have a large site, try to keep most of the pages on your site in directories that don't contain other directories; if possible, avoid directories that contain a mix of other directories and files. This generally makes smaller sites easier to navigate through.

Banner Use

Different Banners not only bring color and human interest to the site design, but also helps orient users to their location in your site hierarchy. If you vary Banners, you should use a unique graphic in every section of your site and the same graphic in every file in that section. That way, sections act as "chapters" and the Banners provide visual clues to what chapter a user is viewing. Don't use the same image in multiple chapters of your site.

Side Menu Graphics Use

The optional Side Menu Graphics not only bring color and human interest to the site design, but they help orient users to their location in your site hierarchy. If you use Menu Graphics, you should use a unique graphic in every directory and the same graphic in every file in that directory. That way, directories act as "chapters" and the Menu Graphics provide visual clues to what chapter a user is viewing. Don't use the same image in multiple chapters of your site; try to use different images in different areas of your site.

Title Consistency

Titles and Short Titles help orient users. Try to use the same types of names for similar sections on your site. You can review all of the Titles on your site using the Site Map. Review all of the Short Titles on your site using the Edit Contents page or, if the page is a Calendar entry, on the Calendar pages.

Section Headings v. Bold Text

It is possible to use bold text (Markup: .B command) to produce paragraphs that function as section headings. If you do this, however, you will be defeating some of the automatic features built into the Search system. Section headings automatically embed hidden anchors used by the Search system to jump to the location of the search text on the target page. If you use bold text instead of Section Headings, you will defeat this feature.

Link Labels and Downloads

Hyperlink text that triggers a download should be clearly marked as such. It is helpful to reserve the hyperlink label "download" for that purpose. If you make a link that takes a user to a page where downloads are available, label that link with something other than "download". Only label links that trigger downloads with "download".