Kilty pages site specifications

Introduction

This summary was modern enough in its day, when I first wrote these pages, but recent developments have rapidly left it behind. Emphasis on accessibility and the increasing range of devices used to acccess web pages, increasing interaction with web sites have, the development of HTML5 and CSS3 together with technical aids such as Ruby and SASS have all added functionality to web pages and increased the complexity and potential of the new technologies. Nevertheless, anyone very new to web design might find some of the musings and pointers useful.

Beginnings

The dream of our own web pages came closer with a short course which recommended I use frames for the pages. All material ready was set up in this way. The second course recommended tables as the way to construct pages, and the different areas. Accordingly I changed all the pages and added a few more, though all this was in the home computer, not on a web server.

Resources

There had to be a better way and once I had heard about XHTML and style sheets I had to discover what they were and how to use them. The January 2006 issue of “Practical Web Design” (now incorporated into .Net) started the process off, with its tutorials and links, with selected web sites and resources. These resources are in my Bookmarks and were regular references. Though I started off using Windows and IE with Notepad, I graduated to Firefox and having changed over to Linux I now use Firefox and Konqueror in Kubuntu (previously using SuSE) as my standard browsers and Kate, a rather sophisticated text editor. For example, the grand-daddy of it all, The World Wide Web Consortium (W3C) is the first point of reference for everything connected to standards. It became clear quickly that there were well-defined standards, that they were easy to learn, so long as it was step by step. It did take a while to understand and write code to meet the specifications of the DOCTYPE! (document type declaration). For basic html there are many resources, and I started with W3 Schools, and Dave Raggett's tutorials, and went on to the XHTML reference and htmlgoodies, amongst others. For css there is Zen Garden which proves the point that css controls layout and is extraordinarily flexible. Once again, W3 Schools comes up trumps and there is effectively a precise tutorial at the noodle incident. Nowadays I tend to use Bluefish, a Linux (also other Unices and Windows) editor, which is a more comprehensive non-wysiwyg editor. I also use a brilliant little programme "txt2tags" for converting text to xhtml.

Firefox to validate code

Plenty of resources and links out there convinced me to do the whole thing myself, without the help of a resource like Dreamweaver. It works fine and is easy to use, accessible at my local Open Learning Centre at Helston Adult Education Centre, where I used it in one of my short courses. If I were to use a web page and site creator now, I might use Nvu or Kompozer, free open source software very similar to earlier versions of Dreamweaver, or the newer Amay (also available in Windows versions). As I learned more html and css, I tweaked the design. I tried to make the page design flexible, since I wanted to be able to have every page with the same specification, for uniformity, so if I want to change anything, I just change the css, rather than edit every page, though clearly there is the option to modify the standard css on any page which needed this or develop additional css files. It is satisfying to change one figure or expression in the css and test the resulting change in a browser. Using Firefox, and acquiring suitable extensions, especially Web Developer, gives tremendous ease in testing. Firstly by using the native editor with “Tidy” the code is tested and all errors are highlighted, as well as warnings about what is not ideal. Any errors and warnings can be corrected directly using the "Clean up the page" button, selecting the corrected page having checked it! Alternatively the task bar icon showing the warning can be used to access the corrected code and display. Secondly, belt and braces, submit the page to the validator. Again, this can be done from a tools menu in Firefox. Having used Firefox both in my own Linux setup and Sharon's Windows setup, I suspect it is only ignorance and fear of the unknown that prevents everyone at least trying it out. It is far superior on a PC than what was the most used browser (and its successors!) and with your own selection of extensions, a fantastic tool for the web page designer. (Chrome has these facilities built in and others are catching up.)

Structure

Given the several themes for the web site and also given that I might wish to spread the pages over several more focussed web sites, I decided that a simple tree structure would be best. Each Theme would be on the first level navigation bar on all pages and the second level would expand each theme into 8 or so pages covering different aspects of the theme in more detail. Any further detail would have to go to a third level, navigable from the specific page which needed expansion and further detailing. The initial design only allows a link from the text. When I get a round tuit for the task I will generate a 3rd level menu for these pages.

Navigation

The navigation was the most challenging to set up. There seemed to be so many ways to do it. Every web page seemed to be different. Examining the code and checking these pages with the validator soon shows up their weaknesses!! To add a “div” and use lists seems to be a good way, now widely adopted, since it is easy to change the layout to run down the left or right side, or along the top, which was my first choice. The colour scheme I have come up with is not ideal, but I wanted to have two navbars, with the colour of the links visible when not used, used or hovered over and accessible to people with some colour blindness. All can be tested. Meanwhile, it may seem a strange choice. I am still unclear how best to set up the colours in the “cascade” and as “Tidy” tells me I should always have both text colour and background colour set together, I did this. As for expanding the second level and third level options, my original ISP only supported SSI (Server Side Include) on business pages. With this facility, I could import (include) a navigation bar file into each page, to suit. This page could be amended every time an additional page was added, instead of changing all the navbars in all the second level pages and the associated first level page. (Note HTML5 now offers more precise options than the old-fashioned simple div.) I still balk at using javascript!

Printing

I have found so many web pages that are very difficult to print I had to do something about it. The “@media print” definition serves the purpose. Suspecting that no-one would want to print my navigation bars, links and W3C logos I only print the page area containing the obvious content, and selected Times New Roman as the printed font, which is in wide use on the printed page - now Times is the first option.

Images

I came across an article which told me that I could make any <img> tag into a class (indeed any tag can have an id or class), so I decided to make classes for left and right floated images. I could do this for the <br> tag to clear both (starting a new line below any image). This seems to be a powerful control method so I have also used this particular class with the <p> tag and hope to do it more as I improve the page design from its simplistic beginnings. I standardised on a 200x200px image in the page (usually) with a link to a 400x400px image which might be an enlarged, more detailed image or a close-up. In view of the need for people to recognise this, I have been advised to make the links more obvious and may well amend the code.

Style control in Browser

Not yet! It is interesting that the web is developing in favour of disabled people and any of us who wish to control how pages are presented from our browsers. Alas, doing this gets complicated by the severe limitations and proprietary definitions in MSIE6 and earlier - fortunately almost dead now. How to do this and to set a cookie in a returnee's browser is detailed in A List Apart, an article by a London teenager. For the web savvy, there are tools in modern browsers and even a javascript exension in Firefox that can be added to make pages look as you wish. At least a fluid design offers control over sizing - except images.

Copyright

Most material in this web site is covered by a Creative Commons licence by-nc-sa: you may reproduce any material so long as you acknowledge the author, you may develop it, but you must not sell any materials without an agreement to that effect with the author. Naturally you may quote any reasonable selection without permission, and it would be pleasing to hear if anyone does so. The original higher quality images will be made available on request in response to an outline of your proposed use. The Interpersonal Skills Training project is covered by a by-nc-nd licence with two exceptions: (1) if you use anything, let me have feedback on your experience and assessment; (2) I invite you to develop your own versions for you and your team to use locally with the proviso that you agree to contribute your amendments to the project (me). Your contribution will always be acknowledged as will that of all project members.

Feedback

Your feedback on any aspect of this site will be most welcome by email. The site is blatantly web 1.0!


home | back to top

Note all pages print in Times New Roman without navigation

Valid XHTML 1.0 Strict Valid CSS!

content last modified September 29 2016; hand-coded to xhtml strict standard