Web-site notes

Creating and editing web-pages

Creating and editing web-pages is rather different from the corresponding operations with word processing programs and spread sheet programs. One reason is that the final destinations of the information are unknown at the time and place of creation. The files are stored in a remote server along with the rest of the web-site, but in order for someone to view their contents, they have to be downloaded to a computer. With a word processor you are working with a computer, monitor and printer whose properties can be made known to the program, so that the results can be configured to suit those devices. Even when files are transmitted to other people, those people can configure the information to suit their printer and paper if their operating system does not do that automatically. Word processing programs, for example, are designed in such a way that typing information into the program creates not only data that appear correctly on the screen, but also hidden data that contain the information needed to create the required appearance on the screen, and to cause the local printer to print the information on the paper in the required style.

This is not so easy with web-pages, because the information has to be made public in such a way that it will be legible on a great variety of computers, using many different operating systems and screen sizes. The same principle of creating hidden information still applies, but there is much less flexibility and versatility than with locally acting programs. With web-pages the information is in a language called Hypertext Mark Up Language, or HTML. Hypertext is text in which the user can insert links to other places in the text, or to other pages and even other web-sites.

Creating and editing can be done in several ways, three of which are described below.

The most basic way is to write in HTML, which is tedious, especially when tables, frames and other constructions have to be generated. This method does result in pages that look exactly as they are specified.  This method is rather like composing text without using a word processor, putting in by hand all the instructions about arrangement of the text on the screen and the printer paper.

A second way, somewhat easier, is to use a program rather like a word processor, which produces a visible result on the screen and a hidden HTML text at the same time. The HTML text when sent to another computer will produce the same result on the screen as on the local computer, subject of course to the differences between the computers, their monitors, and their programs, for example browsers. Even with one of these programs it is useful to know about HTML and be able to modify the text to do things that the program cannot do.

A third way is to try to avoid the need for any technical knowledge by using a program called a site builder. This type of program provides templates for pages, usually with some scope for varying colours, shapes, sizes, fonts, etc, to suit the user's taste and purposes. A site builder makes web-site design accessible to anyone who can use a computer. The penalty is that there are always limitations imposed by the design of the site builder. One can sometimes transcend these to some extent with a knowledge of HTML, but that rather negates the purpose of the program. Very good looking sites can be created using some of these programs.

An intermediate method of working is to build the site oneself, but to use a builder program for image galleries, to avoid the tedious work of laying everything out in a tidy fashion. This is the way the current site was created.

Whatever methods are used to create a web-page, the result will depend on the taste of the designer as well as the technical skill of the designer of the page and the site-builder, if one is used. It is always useful to imagine oneself as a reader with no previous knowledge of the page or the details of its subject. Some people will have a smaller monitor than that of the designer, and some will have one with fewer pixels. Some will have impaired vision.


Galleries

The galleries are based on SimpleViewer-Pro, or SVPro.

There are currently three galleries, in the following folders.

+++++/galleries/gallery_p for pets

+++++/galleries/gallery_h for humans

+++++/galleries/gallery_m for more images

Each gallery is defined by two files as follows.

+++++gallery.html, which contains the title and any required text and links, and

+++++gallery.xml, which contains two sections,

++++++++++the SVPro settings, and

++++++++++the lists of file names of the large images and the thumbnail images.


Some details of gallery.xml

Near the start of the files there is a title, of the form given below.

+++++title="Gallery_y"

Any characters may be placed between the quotation marks, if there is a need to identify the file among several versions. SVPro does not use this title, and there is no way of knowing from the web-page which version of gallery.xml is in use.

In the settings section of gallery.xml files, the following lines define the layout of the thumbnails.

+++++thumbColumns="4"

+++++thumbRows="2"

Multiplying the number of columns, C, by the number of rows, R, gives the maximum number of images, M = C x R, that the gallery will show. If the number of images files in the files section of the xml file is greater than M, only the first M images will be shown. No error is flagged, so in principle an xml file can be used to retain old references for possible future use

The suggested maximum width of an image in a gallery is 805 pixels (px), which will make the left and right margins the same as the left and right margins of a row of ten thumbnails of the 79 px size defined below. The maximum height of an image in a gallery is not critical, but probably should not be more than 650 px for the benefit of people with low resolution monitors.

The overall size of the thumbnails is 79 px in each dimension. On all four sides there should be a 2 px white border, within which there should be a 1 px black border, making a total of 3 px all round. Thus the size of the area showing the actual image is (79 - 3 - 3) px = 73 px in each dimension. The white border becomes pale grey during mouseover.

If the number of images, and therefore of thumbnails, is changed, it may be necessary to change the number of columns. With the existing sizes, no more than ten columns of thumnails can be fitted in the box. If more than twenty images are required in a gallery, the number of rows must be increased.

The titles in the gallery pages are not made in the same way as those in the other pages, in order to be able to place links on the same line. The font, 18 px bold, has been chosen to match the other titles, which are h2 in the style sheet.


Other notes about editing

The style of all the pages is defined by a style sheet, in file jcp.css, but individual pieces of text may have their fonts and attributes modified locally. Local changes should be used sparingly, to preserve a unified appearance to the site.

Each page includes a white rectangle which contains the contents of the page except for the logo of the web-site, and the main menu.

The font throughout the web-site, except for the logo, is Verdana, which was designed for viewing on screens.

Note that in html there is no tab function, and multiple spaces will not work either. White space needs special features, which is one of the ways in which working on a web-page differs from working in a word processing program.

The width of the rottweiler photograph on the home page is 800 px, chosen to give a reasonable margin left and right. A blank line statement gives a similar margin above the photo.

The width of the panoramic puppy photograph at the bottom of this page is 822 px, chosen to match with the margins of the text in the white box.

The menu setup is defined in the style sheet. It is a good idea to retain the same order of links on all pages, except that no page should include a link to itself.

Before changing a page it is sensible to save a copy, either in the same folder with a different name, or in a different folder. Then you have a fallback procedure if you cannot make the changes work as you want.

When you intend to upload a file be sure that the source folder and the destination folder are the ones you want.

When you initiate an upload or a download, if the new file would over-write the old file the program will stop and ask whether you wish to proceed with the over-write.

It is a good idea to change only one thing, or possibly a very few things, at a time, so that if there is a problem you will have a good idea of the source of the problem.

To view changes in a page you may need to press F5 or, if that doesn't work, Ctrl+F. Even Ctrl+F may not work: in that case you need to clear browsing history and empty the cache over a suitable period of time.