| The HSSC web-site Websites are written in a language called HTML - Hypertext Markup Language - which is basically ordinary text with formatting and set-up information contained in a series of tags. Each individual web page is stored in a file, usually with a .HTMLl or .HTM extension. Pictures and other graphic images are stored in separate files, in either .GIF (graphics interchange format) or .JPG formats. To be viewed by the outside world, these files must be kept on a computer which is permanently connected to the internet and accessible to all (a web server). The HSSC web site consists of some 250 .HTM files, along with over 300 graphic images and approximately 600 photographs. Software There is now a lot of good software available which automatically generates HTML for you, as you set out your web pages in a word-processor or DTP environment. I use Microsoft Frontpage 2000. No web authoring tools are perfect, however, so some of the code was written by hand. The graphics and photos contained in the site are all photographs of club equipment and members, scanned for compter manipulation. I used CorelDRAW 8.0 and CorelPHOTOPAINT 8.0 to manipulate and enhance these images, as well as to draw my own graphics such as the street map of Hythe. Frame structure By default, a single web page is loaded into your browser when you click on a link. The web-site developer may, however, choose to display more than one page at once, by using 'frames'. When you loaded the HSSC home page, a 'frameset' was loaded rather than a single page. The frameset details of how to split the web browser window, and which pages to put where. I use three frames: the main window where all the site information is displayed, the navigation bar along the bottom, and a second category navigation bar down the left hand side of the screen. I have chosen to hide all window boarders, giving the impression that parts of the display stay still whilst others move. For those who really care, the HSSC club site utilises 'nested' framesets. This means that when you select a category from the main navigation bar, a second frameset is loaded into the area above the navigation icons. This frameset is then automatically loaded with the category navigation bar and one of the information display pages. I have chosen this more complex structure so that context-related navigation bars can be loaded simultaneously with requested information pages. My hope is that in this way the site is easy to use. Creating the hover-buttons Each button is created from two separate images. First an appropriate portion of a photograph is selected and resized; these are the "lit" images, i.e. the images you see as your pass your mouse pointer over the button. The "unlit" images (containing the section names) are drawn using graphics software, and saved in an appropriate format for the web, ensuring that they are exactly the same size as the "lit" images. The "unlit" images are positioned in the web page, with the Java code instructing your web browser to replace them with the "lit" images as your mouse pointer passes over them, then put them back as it moves away. The regions of the web page corresponding to these images are then associated with the addresses of each corresponding page to create the 'hyperlinks'. In the latest version of the site's navigation frame, additional Java code has been included to create a text box, with information about each main site section inserted when the mouse is positioned over the relevant image.
[Site map] [Reload frameset] [E-mail] OTHER:
Technical Information about hssc.net |
