General
Web editor
“Frames” or “Server Side Includes”?
”Tables” or ”Style sheets”?
Sliding menu
Colors and fonts
Image processing and positioning
Blurring a face in an image
Image scanning
Text scanning
BackupDuring the past decade I have spent part of my time as an editor of Internet and Intranet web pages at Swedish Space Corporation. After retirement in 2005, I have continued to generate web pages for my private site. Throughout this period I have collected some experiences and tools that may be useful to other people, or at least of some historic interest.
Right off, I should say that I have not gone deeply into this or conducted any market surveys. What I have collected has more or less been a random process. I am afraid that some of my tools and methods may be quite antiquated by modern standards. Once something seems to work for me, I am usually reluctant to go around looking for minor improvements. I prefer cheap and simple methods. The risk, of course, is that I may be neglecting more modern tools that could speed up the work and eliminate some of the drudgery of generating web pages.
I would welcome tips on improvements, preferably cheap and simple. It is never too late to learn. As late as this week, I learned how to make sliding menus, but as usual somebody had to push me in that direction :-)
When I started to generate web pages back in 1997, I tried several different tools, including Frontpage, Homesite, Dreamweaver och several others.
I detested Frontpage, which - at least at that time - rewrote and re-arranged the HTML code at its own whim and rendered the code in a manner that made it very hard to read. I chose Dreamweaver 2, which I have used ever since.
Several later versions have been released: Dreamweaver 3 and 4, Dreamweaver Ultradev and Dreamweaver XM; but as Dreamweaver 2 works well for me, I have not bothered to upgrade. – But I have not used much of the advanced stuff.
“Frames” or “Server Side Includes”?
In many cases, it is desirable to have part of the content of a web page be common to several pages (e. g. a menu with links to other pages). Many beginners fall into the trap of achieving this by copying and pasting the common content. This may make it necessary to modify dozens or even hundreds of pages every time a small modification of, say, a menu bar is required.
Two better methods are to put common content in a separate "frame" or isolate it through the use of "server side includes" (where the server fetches the common file when the page is to be served).
I used to employ frames in my early professional work. However, there are some issues with frames concerning bookmarks and searchability. Nowadays I find SSI easier to manage.
There is no undisputed "best way" to arrange text, graphics and images on a web page. The creator of the page has his/her own ideas on how the content should be presented, but the user may have other requirements or preferences (a different browser, a different screen size, better or worse visual acuity, use of several "windows" on the screen etc.).
The oldest and simplest method to arrange content is the use of tables. In principle, "cascading style sheets" (CSS) is a better method, as here formatting is separated from content. This gives the creator better control of how the page is presented (which may not always be such a good thing, e. g. the "font size" button is often rendered inoperable). However, CSS is more complex - it takes time to learn, and it is not easier to understand and maintain than basic HTML, especially if it is not a daily activity.
Here are two samples of conflicting advice I found on the Web:
K.I.S.S. means keep it simple and that means tables because tables are simple. And they also work! The future of the web is FULL CSS so you should start learning it now. According to the experts, both tables and CSS are useful, and the best is a combination of both. I have chosen to restrict myself to tables (with the exception of the "sliding menu" trick). I have not even looked at more recent tools/languages such as PHP.
Not even the simple use of tables is really quite as simple as you might think. The results can be unexpected. You need to learn a few simple tricks, such as inserting "invisible" pixels to prevent table cells from collapsing.
An excellent introduction with examples is available at http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp. The use of "invisible" pixels is described very clearly at http://www.great-web-sights.com/tutorial/tables/tables.html.
As recently as this week (in January 2006), prompted by a friend I was helping to establish her own web site, I learnt how to make a "sliding menu" (or "floating menu"), where a menu in the left margin will persist while you scroll down a page (as on this page). My knowledge is superficial, to put it mildly, for I found a piece of code on the Web (at www.dynamicdrive.com) using "layers", and adapted it to my needs without really understanding how it works. There may be some snippets of "dead code" left that are irrelevant to my application. It took me a few hours of trial and error before I got it to work. One of the problems was that my old version of Dreamweaver did not seem to handle the modern code correctly, but I managed to isolate that part of the code in a "server side include" that I could edit with WordPad (can be found among the "Accessories" in MS Windows).
See the source code for the include file at the end of the source code for this page. It seems to work as intended, at least in Internet Explorer ver 6, but I cannot guarantee that it is free from bugs. - Philip Chalmers pointed out Dec. 11, 2007, that the menu is offset if the screen resolution is reduced to 800 * 600 pixels.
It is my considered opinion that only pale colors should be used to make the structure of a web page evident without compromising readability. Strong colors should be avoided. You should also avoid loading the pages with stuff that distracts the reader and impedes navigation. Animations and blinking text should be left out, particularly on the home pages.
In selecting fonts for text, the choice is generally between New Times Roman and Arial (and its variants). Newspapers usually use Times for normal text, so this can be considered a safe choice. It is interesting to note that readability studies have indicated that younger readers often prefer Arial, while older readers like Times..
Image processing and positioning
I use MS Paint (can be found among "Accessories" in MS Windows) for editing at pixel level and for touching-up, for rotation and trimming, and to edit background colors.
Example of retouch in MS Paint:
For conversion (compression) to the GIF and JPG formats, I use Irfan, which is a good shareware program on the Web. I also use it for more advanced editing: to change contrast, grey levels, color saturation, to decrease the number of grey levels and colors, and for edge enhancement (de-blurring).
For positioning of images on web pages, I use "Tables" in Dreamweaver, as noted, along with the "Alignment" attribute (Left, Center, Right).
When you want to manage the positioning of images, a useful trick (that took me a long time to discover) is to explicitly end the region where you use a certain alignment with <BR CLEAR="all"> in the HTML code.
Sometimes it is useful to catch images directly from the screen, a so-called screen dump. This is accomplished by pressing the <Alt> and
<PrtScr> keys and then pasting in MS Paint.
Occasionally, you may wish to blur a face or an object for reasons of personal integrity. I am sure that there are many tools and methods that enable you to do this, but I was delighted to find that I can do the job with just my regular free tools Irfan and Microsoft Paint. I have described a detailed procedure here. You may choose the degree of blurring as well as the method (e.g. pixelization).
In passing, it should be noted that blurring of sensitive text, such as a credit card number, is not safe. The reason is given in this article.
To scan images, I have acquired an Epson Perfection 1670. It works well with images on paper as well as transparencies, and to scan text.
To scan an image seems to take about 20 – 30 sec. This can seem long when you are scanning a book, but when it comes to images it should be remembered that they usually require much more time than that for touch-up, editing, format conversion, import to a web editor and so forth.
Transparencies are placed in a special holder. Ideally, you should extract the film from slides, but this in practice would go too far. The result is adequate for presentation on the screen, but I do not think that the images are quite as sharp as the original film. On the other hand, the greyscale and color saturation can often be improved a lot from the original.
To interpret scanned text I use ABBYY Finereader Professional ver. 7.0. The basic ABBY OCR program was bundled with the Epson scanner, but I bought the professional version which also handles Swedish text. The program is very impressive. It is fast and makes very few errors. It seems to use a list of words online, which can be treacherous in some cases, as possible mistakes may be hard to spot.
On the other hand this helps it to distinguish between, say, "m" and "r" + "n". Sometimes the number "1", the letter "l" and the letter "I" are confused, depending on the quality of the original print, and when something unexpected occurs, such as "û", the program will guess wildly and incorrectly.
I use the server at my "web hotel" as the backup for my own disk, and vice versa. In addition, I plan to back up on a CD-ROM every 6 months or so.
Last edited or checked March 12, 2010.