Homepage How-To

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 :)

Let's put first things first.

1. Define what you want to do!

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. ;)

2. Be creative!

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. ;)

2.1 My first design

was in all blackish colors and a menu tree on the right. The main space was reserved for the content. This was somehow structured like a file explores.

2.2 Tech Talk - Frames

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.

2.3 Tech Talk - DIVs

Yes, there is. CSS and DIV to thank. I still use CSS and DIV as these provide a lot of flexibility and also ease way to reuse structures or elements.

2.4 The way to my current design

As I wanted to add some variety to the net, I decided to be a little bit more creative. So I started using a mindmap tool to re-consider the structure of my web presence ...
... You can see where it lead to. :)
Still, you'll find the basic split into 2 sections with the name banner on the left. I simply like this stylish element and it is used for navigation in lower menu levels.

2.4.1 The extending mindmap

With the basic map image you'll see the 1st menu level. Now how to make the navigation the actual content? As this is found on earliest the 2nd menu level, it has to be easy to go there. Intuitively, you move your mouse over the 'bubbles'.
And this will bring the 2nd menu level to your access.

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.

4. Re-design
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.

Some recommendations

Reserve some time if you plan to develop your webpage. You'll need some. :)

Use GIMP for the graphics. It's tough to start with but once you're used to the user interface it is a extremely powerful tool.

Now the content needs to be created ...