PC Plus HelpDesk - issue 220

PC Plus
Archive ☰

PC Plus HelpDesk - issue 220

This month, Paul Grosse gives you more insight into some of the topics dealt with in HelpDesk and HelpDesk Extra

From the pages of HelpDesk, we look at:

Camera shutter speeds and delays;

Misleading disk capacities;

Partitioning and formatting external drives; and,

Tabs in browsers.

From HelpDesk Extra, we look at: Making Webpages accessible:

Creating a homepage image;

Placing the image and other links on the page using tables;

Split Image:

Dividing up the image;

Inserting it into tables;

Image Map:

Collecting co-ordinates;

Client-side image maps;

Server-side image maps;

Creating images for other pages;

Using tables to make it look good at any size;

Using tables for menus;

Using Server Side Includes (SSIs):

Implementing SSIs for a simple menu;

Other SSI functions;

Frames:

Creating the same site but using frames;

Creating an alternative layout;

A Benefit;

1935 Saxophones.

HelpDesk

Camera shutter speeds and delays

If you have used your digital camera on anything that moves reasonably fast, you will probably have noticed that anything that moves from one side of the image to the other will appear slanted - here, we have a normal, everyday picture of one of Derby's Art Deco buildings that just happens to have a cyclist in the foreground

As you can see, the cyclist is quite distorted and as he appears to be leaning back, we can tell that the image was scanned from top to bottom (or the cyclist was moving backwards).
This type of distortion is typical of focal plane shutters in miniature and reduced medium format cameras at high speeds where the closing shutter is released before the opening shutter has got to the end of its travel (typically on shots faster than around ¹/₉₀^th to¹/₉₀^th second on miniature (35mm) cameras) - something that you would never see with a between the lens shutter, even at ¹/_2,000^th second, even on extended medium format (6x7cm) and plate cameras.

The amount of trapezoidal distortion that has to be applied to get him back to something that looks reasonable is around 30 degrees. Cars on motorways or aircraft in motion would clearly suffer too much to produce images that were of any use.
Note: If you want to use this effect to imply speed, you will have to take the shot with the camera upside down - interesting on a tripod.

The car on the right was moving at only a moderate speed - less than 30MPH - and the camera was held upside down - the only thing missing is the Road Runner. Before you draw any conclusions about distance and speed, note that the car was further away from the camera than the cyclist.
Note that this is real camera distortion because when you look at the axis of the hinges on the driver's door, if it was really like that, the door would swing out of control and the bottom would smash into the tarmac every time it was opened.

Another artefact to note is that rotating objects are squashed along one side and stretched along the other. The holes in the rear wheel show the trailing edge stretched (look at the size of the holes).

You can see for yourself just how much of this effect you can generate by wiggling the camera from side to side whilst taking a shot.
This is not Chesterfield's famous (warped, wooden) church spire but a stone spire in Derby.

Another aspect of this scanning effect is that anything that is rotating fast will appear to be bent.
Here, the flaming stick on the upper-right appears to be bent through almost 90 degrees - something that would make life hard for any juggler.

Another point of annoyance is knowing just when the shot will be taken - When I took the shot (pressed the button on the camera) of the Blue Pool, there was no cyclist there. Some cameras take the picture seemingly the instant the shutter release is pressed whereas others seem to take forever to get started.
In this latter group, if the picture is being taken by somebody who is not aware that such things can happen, they might have assumed that the picture had been completed and move the camera whilst or even before the camera has done its job. These things need to be quantified as they affect almost all digital cameras and knowing just when and for how long a picture is going to be taken after you press the release is probably quite important.

On this cover disc, I have included a program called DCSS.EXE in the files subdirecory.
If you run it (DOS or Windows required), it will assess the speed of your PC to derive a constant. After that, if you press Spacebar, it will count down from 5 in order to give you a chance to get into sync with it and when it gets to 0, you press the shutter release.

The camera will then record the position of the progress bars as well as the number so even if the start and finish of the shot occur in different seconds, you will be able to determine the values just by looking at the resulting photograph.

Click on the screenshot on the right (electronically captured by the computer) to see what the screen looks like.

The following are actual screenshots (as in 'shots of the screen taken by a camera'):

From a Praktica G 2.0
(the start is at around 0.9 seconds and the finish is at 1.1 seconds so, you have to wait for around 1 second for this and it takes around 0.2 seconds for it to scan the image)

and...

From one of the MN100-based cameras - a Digital Dreams l'espion.
(this one it virtually instantaneous - waiting around 100ms and taking around 75ms to take the shot)

Note that the Praktica takes a shot that is 1,600x1,200 whereas the Digital dreams takes one that is 352x288 pixels and as a result, the latter can manage 12 frames a second in video mode

Using the results from your testing, you might not be able to do anything about the delay or the amount of time it takes for your camera to take a shot, but at least you know the values and can adapt your picture taking accordingly.

Misleading disk capacities

This is a problem in that there is a lot of confusion about just what is meant. It is also a hangover to the days when disk capacities were not that greate - 20MB being enormous - when the errors involved were not that great.

So, what is the problem?

The international system of prefixes (SI) has a series of standard powers of 1,000. The IT industry uses 1024 instead (2¹⁰). The advertising industry does what it knows best and mixes the two. As a result, we find mixtures of factors of 1,000 and 1024. Thus,

SI
prefix World of science (SI) World of computing

k kilo- 10³ 1,000 2¹⁰ 1,024

M mega- 10⁶ 1,000,000 2²⁰ 1,048,576

G giga- 10⁹ 1,000,000,000 2³⁰ 1,073,741,824

T tera- 10¹² 1,000,000,000,000 2⁴⁰ 1,099,511,627,776

As you can see, the values range from a few percent to almost 10 percent so it is fairly convenient to talk about MB, GB and so on.

However, some people like to make round numbers and you can do this by mixing them up. Clearly, a kB is either 1,000 or 1,024 bytes but when you start getting into the 'giga' range, things can get interesting - thus...

SI
prefix Contribution
to powers Factor

SI Computing

k 1 0 1,000

k 0 1 1,024

M 2 0 1,000,000

M 1 1 1,024,000

M 0 2 1,048,576

G 3 0 1,000,000,000

G 2 1 1,024,000,000

G 1 2 1,048,576,000

G 0 3 1,073,741,824

T 4 0 1,000,000,000,000

T 3 1 1,024,000,000,000

T 2 2 1,048,576,000,000

T 1 3 1,073,741,824,000

T 0 4 1,099,511,627,776

In the shop, a 160GB drive has a nice, round number that is easy to remember. However, when it was on the machine, the two factors were 321,672,960 and 512 which, when multiplied together, gives 164,696,555,520 bytes or 164.7GB (10^{3 x 3}).

If, instead, you take a different mix of k factors, you can get 160.8GB (10^{3 x 2} x 2¹⁰), 157.0GB (10³ x 2^{10 x 2}) or 153.4GB (2^{10 x 3}). In Linux, you will see it reported as 153.3GB (depends whether you round or truncate as to whether you get .3 or .4) but in the shop you will see 160GB meaning 160,000MB which is not the same thing.

However, whether you see 164GB or 153GB, there is no need to worry where that 10+GB has got to because it is still there. The problem is knowing whether or not it was there in the first place

Partitioning and formatting external drives

There are many programs that you can buy for Windows that will partition your disks for you and like Windows programs, you have to pay good money for them. However, the ethos in the Linux world is rather different and instead of some utility being a potentially expensive addition to the system, you are most likely to find that it is already part of the system. The partitioning tools are like this and you can find them in the Control Center.

To add your new drive, you need to have a mount point so create one in the Konqueror file manager by right-clicking on a location in the tree and then selecting 'Create Directory..."
If you are partitioning for a friend, you can set up a dummy mount point anywhere - your home directory might be the most appropriate place for this.

Next you need to check that the system can actually see it.
In Control Center, look under YaST2 Modules. Hardware and then expand the tree as Hardware Information/ Disk/ Storage Device/ Resources/ size/ sectors. If you multiply the two numbers together, you will see the size of your disk - taking into account the distortions of different k multipliers - see 'Misleading disk capacities' above.

Note that there is no cluster size. In Windows, sectors are grouped together and any file that is saved starts at the beginning of a cluster of sectors. If the file is larger than a cluster, it is linked into a chain. In ReiserFS, any file that is smaller than a block of around 4k is saved contiguously so that if you have 30 gif files of 100 bytes (as you might have on a web server), they will take up around 3000 bytes of disk space. Under Windows, each one would take up a whole cluster so if a cluster was 64k (as it would for a drive of up to 127GB - a limitation), you would use 1.9MB with an efficiency of 1.5 percent (or to put it another way, nearly 98.5 percent thrown away).

Click on YaST2 Modules/ System/ Partitioner, click on 'Yes' and you will see the device in the /dev directory appear in the list.
Click on 'create'.

Select the disk you want to partition - make sure you get the right one - and click on 'Ok'.

Select 'Primary' and click on 'Ok'.

Now, you can play around with the partitions on your new disk. It is a good idea to have thought about the use you are going to make of this resource so choose well.
If you have an enormous disk drive to play with, you can probably afford to leave some of the drive unallocated so that you can assign it at a later date.

Select the file system and the start and finish for each partition along with the mount point and then click on 'Ok'.

You can now see the new partitions appear in the list.
Once you have finished, click on Apply.

Click on Apply to confirm that you wanted to do this...

... and you will see the progress bar move as your new partitions are created and then formatted.
The 160GB partition under ReiserFS took around 2 minutes to complete.

With it all done, your new disk is mounted in the file system where you told YaST2 to put it. The details of which are in the /etc/fstab file.

To go on and make the NAS (Network Addressable Storage), you need to adjust the permissions for the directory - if you are going to make it available to everybody then set the user as nobody and the groups as nogroup.
Make sure that the show entries, write and enter permissions are checked the way that you want them.

Click on 'Ok'.

Go into /etc/samba/smb.conf and generate a section for your network share. The name in the square brackets is the name that will be presented on Konqueror under smb:// and Windows Explorer as you look around the network neighbourhood.

You can check the mount point of the drive and alter it if you want.
If you just wanted to generate a partitioned disk for a Windows friend, delete the line in /etc/fstab acter you have unmoutned the drive (if it was hotplugged, you can just pull the plug but it is better to unmount first).

Tabs in browsers

Internet Explorer fans are stuck with having many browsers littering the desktop and with only one desktop to go at, that is a limited resource as well.

Konqueror users can open up pages in tabs instead of new browsers just by setting the 'Open links in a new tab instead of a new window' checkbox. This is found under 'Behaviour'.

With this set, each time you click on a link with a target="new" or target="_blank", a new tab opens up.

HelpDesk Extra

Making Webpages accessible

Creating a homepage image

You don't have to have an image to have on your main index page but if you want people to remember your site such that they will be able to remember that this was the one that they wanted when they come back to it, an image is a pretty good idea.

Another function of the main index page is to give the user an idea of the layout of your site - a way of visualising how you have chosen to divide up the pages so that if they understand it, they can get to where they want in a minimum of mouse clicks. Over the years, I have visited many sites that are virtually unnavigable because there is no idea that is conveyed to the user just how the information is ordered.

So, with an idea of the major categories you want to present as navigation routes and with a knowledge of the content and theme of the site, you can get down to playing around with your favourite image processing package and create what you want.

For this, I decided that I could demonstrate the concept by creating a fictitious site about abseiling off bridges - don't try this at home - although there is no content here that actually relates to how you would go about doing this. I suggest that if you really are interested in abseiling, you research it yourself. That's me off the hook - now onto the image...

I could have spend a few hours with a 3D modelling program, creating a virtual carabiner and then populating it with virtual straps but as I happened to have 22kN locking carabiners and straps already, I just scanned them in, producing the image on the right (okay, so I used a strip of blu-tak to keep the straps in place).

The carabiner is on its side for two reasons: 1, it was easier to align the straps that way, and 2, the lighting was correct that way around. To correct that, I just rotated the image clockwise by 90 degrees.

As you can see the lid of the scanner came out as a grey (this is because it is meant to be down flat when it scans and not to have a chunk of aluminium in the way) so that needed to be masked off and then whitened out. I also took the opportunity to give it a drop-shadow. Using a white background means that when people print your pages, they will use less ink which can only be a good thing.

Also the straps I had were only in red, yellow and blue and I wanted some of the colours of the rainbow. This was quite easy to do because the background was white by then so I just masked off each strap in turn and changed the hue until I had the set of colours that I wanted.

So, with it now the right way up, on the right background and with the right coloured straps, it is time to add the main menu items. This is where a little thought should come in because you will have gone to a lot of trouble to get this image and by the time you restructure your site (and need to replace or renew this image), you should have got quite a lot of use out of it. Take your time and make sure that your menu is correct (I have got a 30kN carabiner that can take an extra strap if I required 6 menu items).

Enter your text in the area you want your menu to appear and make sure that you have the right font, size and colour for your needs. Next, type in each item and position it carefully. I used white text and added a centred drop shadow to each menu item so that it stood out from the strap better by increasing local contrast. With each one in place and everything looking all right, I burned them into the main image.

The image still looks a little abstract and although it uses real equipment, it is still not particularly linked with the great outdoors.

To restore the balance, I decided to put a photograph inside the carabiner so that outside, out image remained white so that it was still printer-friendly.
For this subject, taking some moving footage and picking a frame is probably one of the more authentic ways of doing it so this one is off a footbridge - you can see part of a super-eight and can see that double rope is used. If you are going to do this, you might like to use a shunt as well so that you can lock off - giving you both of your hands free to use the camera with.

This is the shadow but rather than being taken from the bridge, the fact that the reflection in the grass is brightest around the shadow of the abseiler shows that it is taken by the abseiler (many things reflect light back in the direction from which it came whether this is water droplets, crystals in rocks, glass beads in cat's-eyes, reflective paint or plant cells).

This one, again, is taken by the abseiler.
With the chosen image, you can extend the exposure range, posterise it, colourise it, do what you like but you have a decent picture.

This is the mask. It is based on the inside of the carabiner but then shrunk by 12 pixels so that there is a border around it.
In Picture Publisher, you can use the smart-mask tool to turn the white into a mask. Then, copy that and paste it into the images that you have selected. If you turn the transparency to around 50 per cent, you can position the object so that the image is framed well within it. Next, turn it back to 100 per cent and create a mask from the object. Then, delete the object, feather the mask by a few pixels, invert the mask so that everything but the mask is covered and paint it with white. Invert the mask again so that you have your image, copy it and then paste it into the image with the carabiner and straps. I gave it a drop shadow as well.

Before combining it with the base, I also messed around with the colours a bit with it in situ to make it look better.
Finally, I expanded the image base, faded the straps off to the right and added some title text.
Placing the image and other links on the page using tables

One of the advantages of tables is that they are supported by many browsers in a fairly standard way - even text-only browsers such as Links support tables.

Tables are very versatile in the way that you can use them to organise images and text on a page. Here we are going to use a series of nested tables to get our image and its supporting text in the middle of the page such that if the page is bigger than the image (plus text) it will be in the middle no matter how you resize it.

First of all, you need to have a single-cell table that covers the whole page. To do this, you need to have the right attributes - the height and width need to be set to "100%" (note the use of quotes) and the align for the cell needs to be set at "center"
<table border="0" 
     cellpadding="0" cellspacing="0" 
     width="100%" height="100%">
  <tr>
    <td align="center">The middle of the page.</td>
  </tr>
</table>
Note that there is no valign="middle" attribute in the <td> tag because that is the default and it is therefore unnecessary in most cases. If you want to, you can add it just to make sure.

One thing to be aware of is that some wysiwyg html page editors will take out tags that they see unnecessary or do not recognise - the result being that your image stays at the top of the screen instead of centring itself nicely because it has stripped out the height="100%" attribute. All you have to do once you have finished getting the page the way you want it is to load up the html file in a text editor and restore the attributes manually.

Click here to open up a page with the above code in it in a new window. If you resize the page, the text will stay in the middle, regardless of the size or shape of the page. Of course, you can put anything in there (images, text, other tables, iframes) as long as you tell it what to do.

Here, you can see that the above table is represented in blue (1). Inside that, we have the image in a table (-set) of its own (red - 3) and below that is the additional text under the image - if all else fails, the user has the text links to fall back on. In this way, the nested tables, of which number two is the outer one, sit at the centre of the browser, within the nested code above. As with the code above, if you resize the page, (the user might want to do this or there might be within the population of users a variety of browsers on screen resolutions going from 800x600 through 1024x768 to 1600x1200 and beyond. With this set-up, it will always be in the middle - just where their eyes are supposed to be aimed.

Click here to see this in action in a new browser window. Just like the text in the example above, the image and its text links stay in the middle, regardless (unless your window is smaller than the table block).
Split Image

This takes a little effort but it is worth it because the resulting links are compatible with more browsers and the conditions of more users

Dividing up the image

Take your image (with a copy saved) and just slice it up with your image processing program. Here, we want to have the five menu items on the right so we need to have a way of separating them from the rest of the image in a way that the browser can understand.

If we start off by highlighting the left half of the image and then copy that into a new image (in Micrografx Picture Publisher, press [Ctrl]+[Shift]+[N]) then remove the mask ([Ctrl]+[R]), go back to the image that we have just taken the clipping from, invert the mask ([Ins(ert)]) and then crop to the mask ([Ctrl]+[Y]), we now have two images split nicely. We can now do a similar thing with the right-hand half of the image, cutting it into horizontal strips until we have the pieces that we want. Next, you should save all of the images in files that have names that might mean something to you when you come to reassemble them again. If you are not using a wysiwyg editor for the html coding, you might want to make a note of the image sizes at this point.

Inserting it into tables

This is just how to put the image back together again in a table structure. You would then put that table in another one with your text links along the bottom and then that assembly into our automatic screen-centalising table.

It is very tempting just to place all of the images in just one table but this has a bit of a problem. It just doesn't render correctly.

In the image on the right (I have given the table a purple background and the page a black background to highlight the situation), the table has tried to give all of the cells on the right a similar height and as a result, there are spaces resulting in spaces on the left as well. The result is a mess.

Instead of doing this, we can create a two cell table, place the image on the left in its cell and in the right half, insert a new table that is (in this case) 7 cells high. Each of the images can be loaded into this and it will all work correctly. The five images that form links must have the border= tag set to zero otherwise you will get the default (usually 2 pixel wide) border around them.

In Internet Explorer on Windows, with images turned off, it renders as the part-screen-shot image on the right with the alt tag text in the right places and the borders of the images outlined correctly.

You can test this for yourself by going into Tools/ Internet Options... / Advanced [tab]/ Show Pictures (about 2/3^rds of the way down the list) and unchecking the box then reloading the page.

In Links, it looks like this...

You can see all of the links, even in the images.

If you click here, you will be able to see for yourself how this works - a new browser window will open up with the split image version in it.

Try navigating through the links with the tab key and you will see that you can get to all of the links on the page..
Image Map

The image map is simpler in some respects because you can make changes to your image (tweak the colours, use a different effect here and there) and as long as your links stay in the same place, you will only have one image to save.

Collecting co-ordinates

The image maps use the co-ordinates of the image itself. There are a number of ways of getting these co-ordinates (all of them better than simply guessing them). One way is to use the image processing program - in The GIMP and Picture Publisher (amongst many, including Paint) the co-ordinates are given in the bottom left or right. All you need to do is to decide what the shape should be - rectangle, circle or polygon - and make note of the co-ordinates.

For the rectangle, you need to know the top-left and bottom-right co-ordinates.

For the circle, you need to know the centre and the radius (that is to say the length of the radius, not a point on the circumference).

For the polygon, you need to know the pairs of co-ordinates for each point that you are going to use.

Client-side image maps

With a client-side image map, you need to let the browser that you intend to use a map definition for an image. You do this by including the attribute usemap= in the tag and giving it a value, dependent upon where your map is.

If you have a separate file called, say, "hpmap" and it is located in a directory one level further down the tree (relative to the page that is calling it) called "imaps" , you would use the relative reference usemap="imaps/hpmap"

If you had the map information in the html file itself, you would use a hash mark to tell the browser. Such a complete image map (here called "homepage") reference in the image tag would look like this...
<img src="images/220x-a-full.jpg"
    width="410" height="401"
    border="0" usemap="#homepage">
The advantage of using a map file instead of putting the information in the html file is that if you use the same map information for many pages, you only have one set of data to change should you change your map image. The disadvantage is that there are browsers that do not support a separate map file.

The map information, if it is to be in the html file, should go at the end, just before the </body> tag and for our file, looks like this...
<map name="homepage">
  <area shape="rect" coords="184,109,308,141" 
    href="safety.html" title="Safety">
  <area shape="rect" coords="186,147,389,186" 
    href="equipment.html" title="Equipment">
  <area shape="rect" coords="188,193,363,225" 
    href="abseiling.html" title="Abseiling">
  <area shape="rect" coords="190,239,370,268" 
    href="locations.html" title="Locations">
  <area shape="rect" coords="192,280,291,309" 
    href="links.html" title="Links">
  <area shape="default" noref>
</map>
This is a little more versatile than just straight rectangles though as you can define other shapes (something that you cannot do with slicing up the image). So, we have:

Rectangles (top-left, bottom-right)
<area shape="rect" coords="192,280,291,309" 
href="links.html" title="Links">
Circles (centre, radius)
<area shape="circle" coords="75,81,15" 
href="links.html" title="Links">
Polygons(first co-ordinates, second co-ordinates ...)
<area shape="poly" coords="186,380,203,253,254,296,291,380" 
href="links.html" title="Links">
Click here to see how the page functions in a new browser window.

Without images, it renders like this:

As you can see, there are no labels from alt tags (as there are none) and the only indication that there is something there is if you tab through it (which is where the rectangular box comes from) and if you hover the mouse over it to get the title tag used in the link (here, hovering over a different link). Try tabbing through the page to see what happens.

Also, some browsers don't know what to do and as a result, they don't even display the image.

On a text browser, it looks like this:

and when you press enter or the right arrow key, it expands to this:

Unless you have pretty obvious file names, your user is not going to see them in a meaningful way.

Server-side image maps

Server-side image maps use pretty much the same principles as client-side image maps except that:

Details of what link is where is not sent to the browser so the browser knows nothing of the significance of any particular part of the image (it doesn't know whether your mouse is over a link for kitten pictures or a piece of sky),

As there is no information about links, you cannot see any indication of what the links are without the image in place,

As there are no links there, the links within the image cannot be spidered and therefore, the image will not pass on any useful information to a search engine. This is a double edged sword in that if you are using this as a means of hiding part of your site from spiders, this will be thwarted the instant that a human who has clicked on a link and got to another page then puts a direct link on their website.

If you want your users to be able to use this set of links off-line, they will end up fighting an almost impossible battle against the laws of probability because, in order to hit the 'page' that their browser has cached locally, they must hit exactly the same pixel on the image map each time they do it. Whilst this makes it infeasible to browse off-line, it also means that there is additional traffic between the server and the client as parts of the image that are not links are returned and parts that do effect a new page will, even if the resulting page has been downloaded before, mean that it will have a new name (look at the name of the page you will try to download at the bottom of the browser window). This generates extra traffic and uses up cache space.

So, here is how to generate one. You enclose your image tag with an anchor in the same way that you would if you were making it into a single image. However, to tell the browser that it is an image map that you are looking at, you include the 'ismap' attribute within the img tag thus...
<a href="homepage.map">
<img src="images/220x-a-full.jpg" 
  width="410" height="401"
  border="0" 
  alt="Click on the links" 
  ismap>
</a>
If you do this, any clicks on the image will send a request to the server, along with the mouse co-ordinates - you can see the name of the program and the data passed to it on the status bar of the browser as in the screen-shot on the right.

On the server, this call runs a program (script or whatever) that takes the co-ordinates and returns a page if required. Whatever happens, each mouse-click requires processing from the server.

If you have images switched off, you will see nothing as the browser itself knows nothing as in the screen-shot on the right. Also, there is the problem that some browsers do not know what to do and as a result, display nothing.

You will also see that you cannot tab your way through the links for exactly the same reason.

In short, with no image loaded, you might as well not have bothered loading the page and this is why you should have your text links at the bottom.

This is all that is seen in a text-only browser. It does recognise it as a link though and if you press enter or the right arrow key to call the link, it will pass on the co-ordinates 0,0 to the server.

If you use a server-side image map, you should really include a link to an additional page for when 0,0 is called - this having all of the links on it that would have been available if the user was using a graphical browser.

Click here to see the page in action in a new browser window.
Creating images for other pages

If you just want a menu down the left side, a table will work the best for organising its appearance but you have a few options - do you use:

a text link on a coloured cell background;

a text link on an image cell background; or,

an image link in a cell?

The first is most flexible as it is not bound by the limitations of an image and the user can impose his/her own style if it is required (such as in the case of visual impairment). The second is still fairly flexible as long as the text does not get bigger than the image. The third is the one favoured by many web designers because absolute control over the appearance of the page remains with them but it means that if you have a screen that does not resolve clearly enough, you could end up with links that are blurred that you cannot do anything about. If users cannot use a site easily enough, they will go somewhere else.

So, if we are going to have a background image for a menu, we need one that will tile - the top and bottom match as to the left and the right such as the one on the right.

If you want a menu that links up with links on the other side of the page, you need to create that - dividing it up so that it works is the clever bit. The one on the right is a variant of one that I used on a website of mine recently. It allows a number of links down the left with a contact link on the right. The use of tables means that it will change its size to fit any browser window. Additionally, if the user changes the font or its size, it will accommodate that as well. You just need to cut the image up into sections for: bottom-left menu item; middle-left menu item; left-hand vertical; top-left; horizontal; top-right; right-hand vertical; bottom-right menu item;

You can see that in both of these cases, the images created are quite simple. You just need a way of making them work for you...

Using tables to make it look good at any size

We know how to make a table fill the width of the screen by using the width="100%" attribute.

Put

the

menu

in

here

For the menu down the left, we need to generate a fullwidth table with two cells, the left of which is justified top and left and then we need to put another table in it that we will used for our menu - the cell on the right containing our page content like this.
You can see - if you change the size of the text in the browser, that the page (red outline) and the menu (green outline) will change as well.

or...

/Top-left image Horizontal image as background Top-right image \

+ Put

+ the

+ menu

+ in

\ here

For our menu that has elements on the right and runs a line over the top of the page, we need to create a table that has two cells - one above the other.
The top cell of this then has a three cell table inserted (green) with a top-left alignment for the left cell and a top-right alignment for the right cell.

In the left cell, you need to place your top-left image (/) and have your horizontal image as a background image.

In the middle cell, you need to have a small, transparent image that you can size to a few pixels as your foreground image otherwise it will resize your cell height and throw out the design. For a background image, you use the horizontal image again so that it joins up with the cell on the left.

In the right-hand cell, place your top-right image and as the background, use the horizontal image.

The bottom cell then has a three-cell table inserted with the left and right cells having left and right alignment respectively and with all three having top alignment - you align the middle cell as you want for your content.

The left cell has the table in it for the menu. Each row has two columns (both cells being top and left aligned) - the right one being for the menu itself. Except for the bottom row, the left cell of each row has a left-hand vertical image as its background and in the foreground has a middle-left menu item image. The bottom cell has just the bottom-left menu image.

The right hand cell has the table in it for the contact menu item. Essentially, it is the same as the bottom row of the left menu but laterally reversed.

The centre cell has whatever your content requires of it.

Contact /

You can take the image of the over-the-top menu, slice it up (making sure that your images have the same dimensions), copy the code for the above page into a page of your own, insert the images as described, change the border size to zero and see how it works.

Using tables for menus

There are a number of ways of using tables with a background image in a menu.

These are very simple solutions that look good. If you want to mess around with edge graphics in the same way as we built up the tables in the last menu above, you can and retain the flexibility required for different text sizes and so on. Using text in menus is by far the best idea as, unlike graphics which are static in size and style, text can be translated by online translators.

If you have tried to navigate your way around a website that is written in a language that you do not understand but have solved the problem using an online translator, you will have found that if the site is constructed with graphics-only menus, they will still be in their original language and therefore of no use to you. If you don't use text in your menus, you will cut out a lot of people who do not understand your language.

you

put

your

menu
items

in

here

and

so

on...

On the left, you can see a simple, flat menu made from a table.
The table has a picture for its background and a border size of 1 pixel - having a picture background for the table means that the cells can all look different and even double height cells look all right.

The cell padding is 3 pixels and the cell spacing is set to 0. The border is set to white so that it gives the impression of there being spaces between the menu buttons. Finally, the width of the menu table is set to 100 pixels.

Like this, there is plenty of room for expansion and if things get a little too tight inside the cells when the user opts to use a font with a size of 72 points, they can always get bigger.

As you can see, the menu stays nicely at the top of the left hand side and as this text is in the right hand cell of the main page table, it will not intrude into the left margin.

or

you

put

your

menu
items

in

here

This is another example but with light and dark borders for each cell to give it a 3D effect.
The table has a border size of 1 pixel. The cell padding is 2 pixels and the cell spacing is set to 2. The border is set to white so that it gives the impression of there being spaces between the menu buttons again and of course, the width of the menu table is set to 100 pixels.

However, the cell properties are set to have the background image and each cell has a light border of dark cyan and a dark border of light cyan (doing it the wrong way around like this makes the cells look as though they are standing out of the page).

The menu performs like the example above.

but...

you

put

your

menu
items

in

here

This is what happens if you use a background image in the table instead of the cells with the above example. It might be just what you want but then again...
Using Server Side Includes (SSIs)

Adding the same menu, over and over again can become a little laborious, even for a website with only half a dozen pages on it - especially if you decide to make a change. There is a better way though. If you get the menu looking just the way that you want it, you can save a lot of time.

Implementing SSIs for a simple menu

Once you have created your menu, you can open up the code in a text editor and select the piece you want. Copy the text (highlighted with bold in the example below) into a new file and save it (with any extension - it doesn't matter). Note that this new file should only contain the code fragment and is not a full html page.
<table border="0" cellpadding="0"
    cellspacing="0" width="100%">
  <tr>
    <td valign="top">
    <table border="1" cellspacing="0"
        width="100" bordercolor="#00FF00">
      <tr>
        <td align="center">Menu</td>
      </tr>
      <tr>
        <td align="center">Links</td>
      </tr>
      <tr>
        <td align="center">Here</td>
      </tr>
    </table>
    </td>
    <td valign="top">Lorem ipsum dolor sit
Instead of the now missing code in the page, you need to add a tag to let the server know where to insert what file...
<table border="0" cellpadding="0"
    cellspacing="0" width="100%">
  <tr>
    <td valign="top">
    
    </td>
    <td valign="top">Lorem ipsum dolor sit
...where menu1.text is the name of the file with the menu code in it.

In order to let the server know that it needs to parse a html file you need to tell it, either by changing its extension (usually to .shtml) or by changing the permissions attribute to executable (XBitHack on). Doing the latter will enable you to change the status of a file (from plain html to one that has SSI code in it such that the server will scan it) without needing to change its name and therefore, any file that referred to the static (html) file will still refer to the now SSI html file.

For example: you might have a page called somepage.html that thirty or so other pages refer to and decide to add some SSI code to it. If you changed the extension to .shtml, you would have to edit every page that referred to it. However, with HBitHack on, you just have to change the file's permission to executable. As it keeps the file name, the files that refer to it do not need to be edited.

You can see the Server-Side Includes website version on the SuperDisc by looking in the directory by clicking here. If you have a server and you want to check that it can do SSIs (not all servers can) then just copy this directory to it and see if it works. It works with Apache and a number of other servers support SSIs as well.

One interesting thing about this is that you are not limited to menus. You can have a page that uses SSIs to to include other parts of the page as well such as footers (say a copyright notice that you have at the bottom of every page and you just update that each year instead of having to trawl through and edit every page individually.

Other SSI functions

SSIs are not limited to including files in server html output - other things such as variables and program output can go there as well.

You can include the output of variables such as the date or when the document was last modified: eg,
This file was last modified on

You can also run programs in bash or a DOS shell (depending whether you are using one of the Unices or Windows - Windows users beware of using programs that give output that includes < and > such as DIR and so on). Use the <pre></pre> tags to format the text properly. eg,
<pre>

</pre>
and you can use environment variables and test them with conditional program flow.

In section 1 of your httpd.conf file you would have...
BrowserMatchNoCase MSIE IE
which searches the browser string for "msie" and puts the result in a variable called "ie"

You then might have a web page with a body fragment that looks like this...
<body>

Internet Explorer is not supported by this Server.



</body>
One word of caution is that running executables on a remote machine can be dangerous if people can write their own web pages such as with WEBDAV on home pages or with guestbooks. In that case, make sure that you disable this in the Options directive using the 'IncludesNOEXEC' argument which will still leave the other SSI functions available for use.

There is a lot more about SSIs, possibly enough to do a HelpDesk Extra about in the near future.
Frames

Frames are a way of dividing up the browser into areas so that each area can have pages sent to it without the other areas needing to be downloaded as well. There are some benefits (for the programmer, similar to those with SSIs) but when you take into account local caching, the fact that:

some browsers do not support frames;

that frames support is inconsistent between browsers because of the browser wars of the late twentieth century; and,

that frames do not degrade gradually (they work or they don't),

They are not a particularly graceful solution to a problem that can usually be solved better in other ways. Having said that, here is how to do it...

Creating the same site but using frames

If we want to generate a site that appears to function the same as the site we have already created without frames, we have a little bit of a problem but more about that in a while. First of all, frames load on your page instead of the body and appear in something called a frameset. A full frames page might look like the following:
<html>
<head>
<title>Bridge Abseiling :: frames example</title>
</head>
  <frameset cols="100,*" border="0"
    frameborder="0" framespacing="0">
    <frame src="menu1.html" name="menu">
    <frame src="abseiling.html" name="main_page">
    <noframes>
      <body>
        <p>It appears that your browser
          doesn't support frames.</p>
        <p>I'll have to write a better
          website, won't I?</p>
      </body>
    </noframes>
  </frameset>
</html>
Instead of the body, we have some tags called frameset that define areas of the browser display. Any particular frameset can only divide an area into rows or columns but you can divide a row into columns and vice versa by nesting framesets..

The frameset tag has the attributes cols= (you can use rows= instead) and then, in quotes, a number of pixels (100, 20, 350 whatever) or it can have a percentage (10%, 23% or whatever) followed by an asterisk. If you are only using percentages, you could have then add up to 100% but if you are using mixed or don't know the width of the screen, the asterisk lets the browser know that the rest of the screen wants filling up with that column. If you had cols="60,3*,2*" (note - no spaces), the browser would be divided up into three columns of 60 pixels and then ³/₅^ths and ²/₅^ths of whatever was left. Note that you can mix so, rows="10%,32,*" would be valid.

Next, we have the frame tag which allows us to define the content of each frame in the order that they appears in the frameset definition. The first frame (the one that is a column, 100 pixels wide) is occupied by a file called 'menu1.html' as defied in the scr attribute. Note also that we have given it a name - 'menu'. If we have anything later on that needs to go into this frame, we can use the target attribute to direct it there as in target="menu"

The second frame is called 'main_page' and it is to this that the file menu1.html will direct all of the pages.

Following this, we have a section bounded by noframes tags. Within this we have a body tag pair just like a normal web page. This is your chance to create an alternative site for people with browsers that do not support frames - either: linking to an alternative, fully functional site with the same content, assembled with the same care giving the same browsing experience; or, a link to your alternative site that functions identically. However, most people just have a message that most people would read as; "so you haven't got a browser that interprets frames - tough." If you do this, you might just as well say; "go somewhere else and have a better time."

So, if we want to have a home (index) page that has the image and associated text as before, when we click on an individual link in the image (or associated text), we need to be able to call up a frame that not only has the same index page on the left but also the correct page on the right. This means that for our five page site (that is to say five pages linked directly from the index page) we need to have five frame sets - one of which will be loaded, dependent upon which link is selected in the index page. However, once it is loaded, it stays there, loading other pages within it until someone clicks on home upon which command, it loads the home page into the _top, overwriting the frameset.

Click here to see it in action

If we drop the pretence of having a site that functions exactly the same, we can cut down on the number of files we need to have...

Creating an alternative layout

The only real difference here is to have a different home page - this having our image on the index page (as people will load it although it is in fact the index.html frameset that they are loading) but tolerating the menu on the left. Click here to see it in action.

A Benefit

There are actually some benefits of using frames once you have set up a second (frames) website with the same functionality, content, navigability and so on as the first (non-frames) version. One of them is that with having only a small, single file to edit for your menu, you can be more versatile with it - giving it sub-menus instead of having to use scripts (which will get filtered out at the firewall by responsible sys-admins anyway) or other means.

In short, you can get the menu file to load up another version of itself into the same window without having to load the page in the other frame. You can use this to expand on menus. Of course, in the non-frames world, you can load up the main page of that section with that part of the menu already expanded. If you click here, you can see a crude version of this in action (click on equipment to expand this) - this is only a start (you can do more with formatting and so on), if you want to expand on this idea, you can end up with a number of menus and before you know it you have one for each section of your site again.

1935 Saxophones

Just in case you are interested why I mentioned this as a possible subject for a website, up to the beginning of the 1930s, saxophones had the pads on the bell (the big bit at the front at the bottom) on the left. By the end of the 1930s, they had migrated over to the right so that people in marching bands wouldn't have the brass protective structure around the pads scuffing against their trousers whilst they marched. In the mid-1930s, there was a situation where only one of the pads had moved over. As this was a decade of change, these instruments are not as common as those that were made afterwards.
Back to PC Plus Archive Index Page