Hallo Robert,
zunächst einmal möchte ich hervorheben, was mir an deinem bisherigen Design gefällt:
- Der langsam wechselnde Hintergrund lässt die Seite interessant wirken.
- Die Seite ist sehr übersichtlich aufgebaut.
Und das würde ich noch verbessern:
- Verwende eine andere Schriftart, zum Beispiel Arial oder Verdana -
Serifen lassen deine Seite zu unruhig wirken.
- Die Überschrift "Robert Kalb" sollte meiner Meinung nach etwas größer sein, etwas mehr Abstand von der Box haben und am besten weiß sein, damit man sie auf den Hintergründen besser lesen kann.
So, und jetzt noch ein paar allgemeine Dinge, die du beachten solltest:
Wenn ein Benutzer deine Seite ohne JavaScript besucht, bekommt er die wenig freundliche Meldung "Achtung! Sie müssen JavaScript für diese Seite aktivieren!" präsentiert. Außerdem ragen die Hintergrundbilder untereinander aus dem Fenster. Ich würde dir folgende Strategie empfehlen, um auch Besuchern ohne JavaScript deine Seite angenehm zugänglich zu machen (denn im Prinzip benötigt deine Inhalte kein JavaScript, nur dein Design):
1.) Entferne den Hinweis "Achtung! Sie müssen JavaScript für diese Seite aktivieren!". (HTML anpassen)
2.) Sorge dafür, dass standardmäßig nur ein Hintergrundbild angezeigt wird. (CSS anpassen)
4.) Per JavaScript wird dieses Hintergrundbild dann ausgetauscht. (JavaScript anpassen)
Auf diese Weise können auch Benutzer ohne JavaScript deine Seite ohne Probleme benutzen.
Abschließend möchte ich dir noch ein paar Hinweise zu deinem HTML-Code geben.
Dein Quellcode ist durchzogen von kleineren Fehlern, die sich zwar durchaus summieren, aber im Prinzip leicht zu beheben sind:
1.) Leere Elemente werden in XHTML mit einem Slash beendet ( />):
Falsch:
HTML:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Richtig:
HTML:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
2.) Die Elemente "font" und "center" werden in der Regel nicht mehr verwendet, da sie nur zu Darstellungszwecken dienen.
Falsch:
HTML:
<center><font class="zitat">Der frühe Vogel fängt den Wurm,<br />aber erst die zweite Maus bekommt den Käse.</font></center>
Richtig:
HTML:
<p><q>Der frühe Vogel fängt den Wurm,<br />aber erst die zweite Maus bekommt den Käse.</q></p>
Das Element "q" zeichnet einen Satz als Zitat aus.
Mit wenigen Zeilen CSS kannst du nun die gewünschte Darstellung erreichen:
HTML:
q
{
font-style: italic;
font-size: 18px;
text-align: center;
}
So kannst du Inhalt und Darstellung optimal von einander trennen.
3.) Du verwendest Zeilenumbrüche (<br />), um Absätze zu erzeugen. Dafür sollte man aber p-Elemente verwenden.
Falsch:
HTML:
<div id="content">
<h1>Willkommen</h1>
(...)
<p>Ihr seid vielleicht durch eine Visitenkarte, einen Link, eine Suchmaschine oder durch mich auf meiner Website gelandet.<br /><br />
Hier findet Ihr Informationen zu mir, meinen Jobs, meiner Freizeit, nützliche Software und vieles mehr. Schaut euch in aller Ruhe um - bei Fragen einfach mal über das Kontakformular eine Nachricht hinterlassen.<br /><br />
Viel Spaß</p>
<br />
(...)
</div>
Richtig:
HTML:
<div id="content">
<h1>Willkommen</h1>
(...)
<p>Ihr seid vielleicht durch eine Visitenkarte, einen Link, eine Suchmaschine oder durch mich auf meiner Website gelandet.</p>
<p>Hier findet Ihr Informationen zu mir, meinen Jobs, meiner Freizeit, nützliche Software und vieles mehr. Schaut euch in aller Ruhe um - bei Fragen einfach mal über das Kontakformular eine Nachricht hinterlassen.</p>
<p>Viel Spaß</p>
(...)
</div>
4.) Du verwendest HTML-Attribute, um die Darstellung zu beeinflussen. Diese sollte man besser in die Stylesheets auslagern:
Falsch:
HTML:
<p><img src="bilder/pics/portrait.jpg" align="left" hspace="10" vspace="10" width="200" height="208" alt="portrait" /></p>
Richtig:
HTML:
<p class="portrait"><img src="bilder/pics/portrait.jpg" width="200" height="208" alt="portrait" /></p>
Und die Darstellung kommt in den Stylesheet:
HTML:
.portrait { float: left; }
.portrait img { margin: 10px; }
Das gleiche gilt natürlich auch für die Fahnen, über die man die Sprache einstellen kann.
Das wären erst einmal die groben Fehler in deinem Quelltext, die mir aufgefallen sind.
Wenn du weitere Fragen hast bzw. einer meiner Verbesserungsvorschläge nicht genau das macht,
was du erreichen wolltest, stehe ich natürlich weiterhin gerne zur Verfügung ;)
Zusammenfassend kann ich also sagen, dass du auf dem richtigen Weg bist, eine gute Webseite zu erstellen.
Die kleineren Fehler hier und da lassen sich einfach beheben und auch das Design kann man mit wenigen Zeilen CSS gut verbessern.
Weiter so! :)
) und natürlich das design. ob es ansprechend ist.
