This page might give you some hints for creating your own web page.
I am totally aware that the information will not be complete nor unique.
If you wonder about my web design, stylish or technical,
it might give some background info on the steps that led to my web presence.
It is structured according creation process, maybe not the most straight forward way :)
Building a webpage requires a lot of creativity on the one hand and some
technical knowledge on the other.
Non combinable attributes you think?
Well, that's why we have 2 hands :)
For me that was for example "I want to make my photos accessible for my friends & others." "I want to share some information on my 'fight' with the electrons." You'll see more by browsing my page. ;)
Define the look & feel of your future web presence. You can get plenty of inspiration by surfing the web. But keep in mind the web is not a lawless space. Copyright has a meaning. ;)
I used a frame set to distinguish the two areas.
That works fine, but has some disadvantages.
Once deep in the menu levels, e.g. for viewing the photos,
you decide to let a friend enjoy this picture as well.
Thus, you send the link to this page with the picture.
Your friend might enjoy the photo and wants to see the other photos as well. To bad, the link you sent did only contain the content frame, not the frame with the menu necessary for navigation.
There must be another way ....
Another problem arises when you'd like to be a good hit (high ranked) in a search result by e.g. Google .
It is quite difficult to track your content if it is hidden well in a frame. Thus, you might have nice & helpful information on your page but it will not be seen/visited by many people as it might not be listed in the top search results.
Yes, there's ways to overcome this as well, e.g. shadowing your content into comments but I decided to choose a different approach.
1. The table & switchImage()
Java script is the key to switching the images. I cut the whole image into rectangular pieces and 2 different images for each table element. One showing menu level 1, the second showing menu level 2. As my image has not a very symmetrical content, all pieces of the 2-4-2 columns table (3 rows) in the end had a different width. I solved the resulting mis-placement by a separate table in the table for each row.
If you'd like to see the details, just check the pages source.
2. The powerful DIVs
For easier maintenance I decided to use DIVs instead of the table to place the elements on the page at the wanted position.
3. How-to get the links on top
A problem that bothered me quite a while was that images swapped as wanted but the link to reach the content did not appear.
At this point in time I decided to change the strategy a little bit. I now use one complete image of the complete synapse plus a separate image for each sub-menu extension. Still I place it via DIV as this is quite practical to center the image on the content area.
5. Background, colors and anti alias
In the first attempt I did not include a background layer in the images. Thus, the text not placed on a color filled area was showing alias effects.
Easy to change by filling the empty area with the background color you think?
Well, unfortunately it is not so easy. The original background color I had chosen was not a so called 'web save color'. When exporting the image to png format the color of the background of the image did not match with the color from the HTML page. So, I changed the colors used in the HTML part as well. Still, when you look closely, you'll be able to see a slight difference in color. This however only appears on Netscape Navigator. To my surprise it works perfectly on IE.
Now the content needs to be created ...