Tuesday 22nd August, 2017    Search:
      Not logged in
Site Structure

Generally you need to create pages and, even while they are empty, add those pages into a menu so that they can be loaded to be amended, or edit them via the site-edit page.

The menus are ordered lists of pages – each time you modify a menu you can specify or re-specify the sequence the pages will appear in the menu. You can move menu items around merely by specifying their order – using decimal notation if required to insert existing entries between other existing entries (e.g. 2.5 would be placed between 2 and 3)

Buttonsets relate to the graphic images that lie behind the menu (images and text) and that change with the status of the mouse position. They can visually represent anything but always occupy a rectangular space. There are three buttons associated with a buttonset (each with a filename starting the same, then followed by on.gif (hover) or off.gif (normal) or sel.gif (selected) ) – but they can all be the same if required.

The actual graphic is distorted by the required width and height settings – so a single graphic image can be used for several buttonsets. Some standard buttonsets are “Metal – gold” and “Metal – silver”, based on graphics called gold and silver respectively. All buttonsets in ‘system’ are automatically available.

It is advisable to have a clear picture of the structure of the site in your mind before you begin the construction process. However this is not essential as the structure can be changed, albeit a task which represents extra work.

The first requirement is to identify all the page presentations that will need to be made. Each page is then brought into being through the site maintenance menu.

Edit: permissions / site / page / menu / button set

This screen shows a menu at tye top, which is in three parts: Pages, Menus and Button Sets.

For each page to be created select a short name (for system reference purposes) and a page title (usually to define the function of the page for the user). At this stage there is no need to worry about defining any other elements of the page. Once the site structure is complete you will be able to return to each page to complete and then manage the content.

This process can be continued until you have defined in principle each page that will be included on your site.

Once you have defined each of the pages you can move to the process of establishing the menus. Each menu is defined by a menu name and a list of the pages to be included within the menu. It is possible to include pages in more than one menu and to have pages which are not included in any menu.

Menu selection
Select the default menu (by clicking on its name) if you only want a single menu for the site, or use the create new menu option if you want a multi-level menu structure. This presents a screen with a variable number of input fields.
Begin by entering a name for the menu. (The system names a single menu as “default” and this is already structured into the web site. The names of additional menus will be used as a further references for the structure of the site. Some structures require a different menu for each page presented and in such cases it may be of value to base menu names on the pages where they appear.

Include a page within a menu by using the page column; select the page name you want from the drop down list (which will contain the name of every page you have created). If the 'text to display' column was initially empty for this entry then the 'text to display' column will contain the page title or the page you have selected. You have the opportunity to override this title and enter the text you wish to appear as the menu entry associated with that page. Repeat this for every page you wish to include in the menu.

We only provide a small number of empty menu slots for you to complete, if you need more than we have initially provided merely ‘save changes’ and then re-enter the ‘menu edit’ facility – you will find five new blank slots at the bottom of the menu to be used. If you need more then just repeat the process of ‘save changes’ and re-entering the ‘menu edit’ facility.

If you want to change the sequence of pages in the menu, after you have created most of he menu, you can specify the ‘order’ of each item – by over-writing the existing numbers. You can use decimal numbers to signal insertions between the existing items.

There is no limitation to the number of menus you can build, nor to the number of pages they can contain. The only limitations are those of practicality and presentation in that a long menu can make for a long page presentation, particularly if you use deep buttonset graphics.

You can now adjust the visual formatting of the menu to specify the left offset of all the graphic buttons, to give 'white' space araound the buttons, and you can specify componenets of two mathematical formula that can alter the shape of the entire menu. You can then adjust the vertical spacing to be used between the buttons.

Once you have identified all the pages you wish to use on the menu save the changes (with the save changes button) and you are ready to move on to your next menu if you have one.

If the site is to have only a single menu you will find the default menu (named default) is already structured into the web site.

Once you have completed the definition of the menus save the changes and return to the site option

Each of the pages you have created will be listed in the left hand (pages) box of the site control menu and the menus will be listed in the central column. Select each page in turn and, from the drop down list in the menu box, select the menu - from the drop down list that appears - that you wish to appear on that page. Save the changes. (If you have a single menu this will have been done automatically as the default menu - default.

Once you have completed this process you have designed the site structure, which will be your starting point for the web site. Save all changes and return to the web site using the “return to website” button. You will now be able to travel through the structure of the site, visiting each page to confirm the structure. There will be no content to the pages at this point.

Page Content Management


Once the structure of the site has been established you can attend to the content of each page individually. Build-a divides the web page into four areas, each of which is independently managed. These areas are Logo, head, menu and body. Although the titles are derived from the fact that most web pages use this structure, the use of an area is not functionally limited by its title.

Within each of the areas a mix of text and graphics can be displayed and these can be enhanced by the use of “tags”. We will begin by considering the basic placement of text and graphics and the establishment of the default page presentation, which will be used if you do not define any other presentation.

The default appearance of your pages is defined in the site section of the maintenance menu

Edit: permissions / site / page / menu / button set

The topmost element of this area lists all the pages, menus and button sets included within the site. These are listed in red and are the key elements of structure for the site.

Below this there is a series of boxes, which define the default elements of the site.

These are:
Columns – The number of columns of page titles included in the site – purely for editing display convenience
Site title – Displayed by windows when site is minimised
Page template – Controls size and layout of the page presentation
Style Sheet – Controls default selections for font, colour size etc.
Default Logo – The default logo cell content
Default Head – The default Head cell content
Default Button set – The default button set where appropriate

Usually your site designer will control these but they are available to you if you wish to design and build your own site using Build-a. They require an understanding of the structure of the site. The most complex is the Page template and we recommend that you do not change the template without guidance from us.

The style sheet is the next most significant box and controls the individual elements of presentation within the pages. Within the style sheet you can set the size of the four areas along with the font type, size and colour, background colours and graphics used in each of them. In addition to the site style sheet, each page has a style sheet section which can be used to override the site style sheet for the individual page.

The Default logo is usually a single graphic and defines the top left hand corner of the page. Whatever is defined here will appear on every page unless it is overridden specifically on a page.

The Default Head contains text and graphics and defines the default head section, which will appear on every page unless overridden specifically on a page.

The Default button set will be used on all pages unless overridden by individual page settings.

In all sites the careful definition of the default style sheet will make it easy to add to the site with minimal effort. A well thought out design can present pages that require only the addition of content to the body section and the addition of any detail to the head section. Alternatively the page style sheets can be used to ensure that every page is individual.

To illustrate the way the various elements of the control menu are used we will look in detail at an example. This will highlight some of the most commonly used tags in Build-a and illustrate how they have been used in one particular case. For a more comprehensive discussion of the tags see the tag details section.

A basic site – Business Referral Exchange – Gerrards Cross

Logo cell – The logo graphic is logo.jpg. It is entered into the style sheet as the default logo.
Note the use of the square brackets [] isolates the tag instruction from other elements of text

Once entered into the style sheet the graphic file must be loaded to the system using the upload/maintain images link on the site maintenance page

Head cell


The head cell is defined as

The right hand image is controlled by the tag
[image align=”right” file=”logo.jpg”]
This defines the positioning of the image (may be right, left or centre) and the name of the file (logo jpg). The file logo.jpg has already been uploaded for the logo cell and so needs no further action.

The text is controlled through two command lines which illustrate how textual enhancement is achieved.

The smaller title line “The Business Referral Exchange” has the font tag applied to it. The tag is opened by
[font face=”Arial” colour=”#3e08a3” size=”14pt” center] and closed by [/font]. Everything between the two sets of square brackets will be set by the parameters of the tag. In this case the font is Arial. The size is 14 point , the colour is #3e08a3 (A hexadecimal definition. For more details of this see the colour definition section) lastly the text is centred (Note centre can be spelled centre or center within the Build-a system)

The larger text line is modified by opening the font tag [font size=”20pt”] and closing it [/font] Any parameters not modified by the second font tag are inherited from the first. In this case parameters face, colour and centre continue to apply.

Any changes to the text will be reflected on every page within the site.

Menu cell


The structure of the menu cell is set within the style sheet box by the segment
.menuCell {
width: 126px;
background #ffffff;
background-image=url("/images/bre/menu.jpg");
}



.menuText {
font-size: 0.9em;
font-family: Arial;
margin-top: 5px;
}

Each line of the style sheet applies to a feature of the menu cell in normal use. Most of the lines are obvious. The most complex feature is the line background-image=url("/images/bre/menu.jpg"); which provides details of where to find the background graphic file.

The size location and detail of the buttons are set automatically by the system once it knows which button set you wish to use. It is important to match the width of the menu cell and the size of the button set to get the visual results you are seeking

Body Cell


Whilst the default presentation of the site, including the body cell, is controlled through the site style sheet, the content is managed through the body section of the page. Select page from the maintenance menu

Edit: permissions / site / page / menu / button set

Within the page maintenance area you will find boxes containing:

Page Name
Page title

Below these is an area entitle page contents which contains boxes controlling:

Logo
Head
Body
Menu
Button set
Additional style sheets

Any of these can be used to put content into the area concerned for that particular page. The entry <default> in the logo and Head areas will ensure that the default presentation from the site maintenance screen are used for the page. This is the case on the home page of the bre-gx site.

The content of the body cell is defined in the body area. Details of any graphics are also included through the use of the image tag
[image align="right" file="border1.jpg"]The file must be loaded to the site through the upload/maintain image link

The text is modified slightly from the default case by the font tag
[font size="10pt"]
The content is just typed in, between the opening and closing elements of the font tag, as the viewer should read it.

Pages within the site are further enhanced by the use of the complete series of tags which can be applied in most areas.




Build-a ServicesSite authors: Nightingale Services