How to build a web page which has the 'website' look
To build a page
- Make changes to any of the component files (explained below).
Use a plain-text editor.
Some editors can connect to the website via ftp (file transfer protocol).
Alternately, download the file, edit it, and upload it to the website host.
- Request the page using the '.shtml' extension
- View the proof of the page, repeating the previous steps if desired
- Submit using the Publish (or Republish) button. This creates the static page, which uses the '.htm' extension.
Required skills and resources
This assumes that the page designer has available a text editor and file transfer program on a home computer and can use them.
The designer must know the ftp password for the website.
Knowledge of html and word processing is not required.
General explanation
The web page is divided into 'components'.
Every level of the site's directory tree
can--but does not have to-- have its own component.
For example, in the trails/ section of the website, a certain style component can apply to every trail report.
'Trails' is divided into various years, and each with its own (optional) components.
'Years' is divided into dates, again with its own (optional) components.
The most specific component is used.
In this page, 'Howto,' the banner and trailer use the site-wide defaults. Every page has its unique text.
The purpose of the 'publishing' method is to minimize
the amount of work needed to build a page.
In determining the specificity of a component, we search for a file with the a certain
'basename' (the file name without the extension) and component's extension, using this order:
- Sibling, a file in the same directory with the same basename
- Ancestral folders, working upwards to the root, looking for a file with the basename 'default_page'
- The website default, located in root/cgi-bin/templates/, with the basename 'default_page'
The page can be located at any 'depth' (the number of subfolders below root/).
Since most pages on the website have no need for this feature, examples are
elsewhere.The components
| | Section | Extension | Typical generality | Details |
| Text | .txt | Page-specific | The actual text. This may include embedded html code. This is what the
page designer works on at home. |
| Head section | .hdr | Site-wide | This is the header section in html code.
None of it is directly visible to the requester.
It includes copyright, robot, and other information needed by the browser.
|
| Banner | .bnr | Site-wide | The layout of the banner, but not the banner text. |
| Variables | .var | 'Committee'-specific | Predefined variables, which include, among other items,
the text of the banner's text fields. |
| Message | .msg | Site or committee-specific | The contents of the message box. |
| Title | .ttl | Page-specific | The page title, which is often used by the browser when entering a bookmark. |
| Footer | .ftr | Site-wide | The page footer. |
| Style | .css | 'Committee'-specific | Style directives. This acts in addition to the site stylesheet. |
| Navigation | .nav | Site-wide | Site navigation bar. |
Although a unique .txt file is necessary, defaults are available so that a sample page is always presented when the .shtml page is requested.
How to create a web page
This assumes that the page name is
index and that it is in its own subdirectory. If multiple pages are in the same
directory, replace 'index' with the page name in the instructions below.
- Copy an index.shtml file from any adjacent folder into any directory at the same 'depth' from the root.
Examples are in the subdirectories root/support/years/...
Rename the file if you like, but retain the .shtml extension
Retain the execute privileges of the file (577, 'rwxr-xr-x', that is, it is an executable file).
Be sure that the virtual reference to default_page.pl is accurate: the number of up-one-level commands ('../') must equal the depth from the root
- Create the index.txt file.
- Optionally, insert the page title in index.ttl.
- Optionally, insert other component files, perhaps at higher levels of the subdirectory tree.
- Follow the steps for building a page, located at the top of this page.
Isn't this awfully complex?
It is complex, but the page designer must only deal with unique part of the page: the text.
When the site look-and-feel changes, all pages can be automatically republished.
Editing and permanence
Requesters are served the static (.htm) version.
The static version does not change until the 'Publish' button is pressed. Editing the component files has no effect on the static file.
Note that users of the site are not likely to find the proof page until the page is linked-to by other pages.
Page designers can use an html editor to create the content area of a page. The content is saved in a .txt file and transferred to
the server. (Page designers won't see the banner, trailer, and other boilerplate items on their home computer, since they reside on the server.)
When making site-wide changes, use the
automatic publishing option. To prevent automatic publishing, remove the component files from the server.
To prevent manual republishing, remove the .shtml file.
HTML Markup
In the .txt component you may insert any html element.
(Results may not be what you exepect, so proofreading is necessary.)
Common elements: <i> (italic), <b> (bold), <H#> (header level 1 through 6), <p> paragraph, <br> (new line).
Site wide elements: <p class='greenbar-medium'> (header 4 on a green background).
