Resources

Resources are used as a general name on the images and the style sheet that realises the layout. The resources are normally kept in the catalog gfx. SiteLite depends on some gif's and a style sheet. When you modify templates or roll your own, you may find that you will add resources. When you refer to resources, always refer to them as if they were in a catalog called gfx, even if you have given a different name in the RESOURCE-line in the sript. SiteLite will identify the references to resources and correct them. It is safest and fastest to use the standard name gfx as the name on the catalog you specify in the RESOURCES=-line in the script.

Below is an explanation of the resources that should be present in gfx in a "standard" site, as SiteLite makes them without any changes in templates. It may be useful to have a look at the source for, for instance this page.

Gifs

bullet.gif is a small (3x5 pixels) image that is used to mark the current page in a table of contents. See element CONLIST for a description of how to turn it on or off. SiteLite hardcodes use of this image. May be edited, but should not be removed if you don't abandon the idea of a marker once and for all.

logo.gif is the logo (130x30 pixels) that appears in the top-let corner of a "standard" page. May be, and will most certainly be, edited. If you change the size of the logo, you should inspect the relevant templates to make sure it does not corrupt the layout.

navigare.gif is the small (50x30 pixels) cluster of arrows that appears in the upper-right and lower-right corners of a page. If you change the dimensions of this, you must also change the corresponding image map in the relevant templates.

up.gif is the little (17x9 pixels) arrow that brings you to the top of the page. You may edit this, but you should not delete it. SiteLite hardcodes this arrow together with a reference as a substitution for the  element. The reference depends on an anchor <a name="TopOfPage"></a> in the top of the template, or page.

pixel.gif is a small (1x1 pixels) transparent image that may be used to pad spaces in the pages. SiteLite does not hardcode any use this image, but it may be used in the templates. You may find it useful, since it is not possible to realise all layout plans with style sheets.

left_bg.gif is an image (2500x20 pixels) that makes the background of the pages, including the left column. SiteLite does not hardcode any use of this and it is up to your layout plans if you need this image or if you want to change colors and/or dimensions.

Stylesheet

[ Hardcoded styles ] [ Template styles ] [ General styles ]

SiteLite relies on cascading style sheets, and the file def.css is important. You will find the file in the catalog gfx, and there should be a reference to the file in all templates, typically by the line:
<link rel=STYLESHEET href="gfx/def.css">
(the actual reference is correct by SiteLite during build.)

If you are not familiar with style sheets, you should not be too worried. You may achieve great results with some educated guessing. There are lots of sources for Cascading Style Sheets (css) on the Internet. One is: http://builder.cnet.com/Authoring/CSS/ss02.html

The default styles distributed by SiteLite are chosen to be "reasonable", but you will almost certainly want to do some adjustments to reflect your preferences; colors, textsize etc.

The styles defined in def.css falls in three categories.

Styles that are hard coded in SiteLite. Use of these styles are inserted by SiteLite in a way that cannot be controlled by the user. The user may however change the style definitions.
Styles that is used by SiteLite templates. These styles are used in "standard" templates. User may inspect and edit their use in the templates or blocks, as well as the styledefinitions in the stylesheet.
General styles for standard html-tags. Some general styles are included for users convenience, so they easily may be edited in the style sheet.

Hardcoded styles

When SiteLite assembles lists and table of contents, it inserts styles as an integrated part of the lists. These styles are chosen and described in a way that allows the user maximum control of the appearance. Below is a list that explain their use and refer to the actual styles names in the style sheet.

Page relevant table of contents

marked as CONLIST in the templates, is the table of content that are made for each page, and which normally appears in the left bar of the page. Each of the possible levels in this table is described with its own style. A page with level 3 is for instance described by SiteLite as:
<div class="clevel3">pagename and reference</div>
There are defined 11 clevel-types to match page levels. These are found in the style sheet as:
.clevel0
.clevel1
etc

There are a matching set of styles aclevel which are used to mark the current page, the page that owns the table of content.

Site map

The site map, marked as TOC in the templates, have a structure that are like the CONLIST. To make the freedom of choice as great as possible there are defined a parallel set of styles for this table of content. The styles are found as tlevel, 0 to 10.

PageLocal TOC

The table of content that normally appears in the head of a page, with references to subsections in square brackets are controlled by the style: localtoc

Index

The index is marked as INDEX in the templates. An index consists of a series of keywords, each with a list of page references. The actual styles that are inserted by SiteLite are
<div class="indexkeyword">keyword</div>
<div class="indexentry">pageref1</div>
<div class="indexentry">pageref2</div>
etc

Based on

If you use BASED_ON:-lines in the script, SiteLite expects to find a  -tag in the template. The actual list of pages are hard coded by SiteLite as:
<div class="basedon">page name or reference</div>

Template styles

These styles are introduced to match specific needs of SiteLite. Their use is not hardcoded, or forced, but they are generally useful. The indicated use refers to the "standard" templates. You are of course free to use them in another way, simply discard them or introduce new styles, when you construct your own templates.

basedhead

sitename

Used to wrap the SITENAME-element

mainfooter

Used to wrap the footer, including SITEAUTHOR, PAGEAUTHOR, DATE, AMESSAGE elements. Offsets the content to match the main area on the page.

leftfooter

Used to wrap the footer, including SITEAUTHOR, PAGEAUTHOR, DATE, AMESSAGE elements. No offset, used by frame pages and print pages.

If you inspect def.css you will find that there are some styles used to wrap predefined (PRE) contents. They are defined to document program code. You may use them, modified or not, for other purposes. They are included to show samples of some useful styling with blocks and background color.

You may find it usefull to make your own styles. Probably the best candidates are (sub)classes of div, p or pre.

General styles

To control the overall appearance of your pages, it is useful to be able to manipulate the appearance of general html-elements. The html-elements that are defined in the std style sheet are:

BODY, defining styles for the page as a whole
P, defining the style for general paragraphs
A:link, defining style for links
A:visited, links that have been visited
A:active, the active link
A:hover, when you move cursor over a link (Does not work for all browsers)
H1, defining the style for heading, level 2
H2, for heading level 2
H3, for heading level 3
H4, for heading 4
UL, for unordered lists
OL, for ordered lists
TD, for table elements
PRE, defining style for predefined text

You may choose to include more definitions at will.

Vevsted: B Stenseth

Modul: B Stenseth

Bygget: June 24, 2002

---------------------------