• Für wen schreibe ich?
• Wie möchte ich meine Botschaft rüberbringen?
• Welche Mittel möchte ich dafür einsetzen?
• Wie navigieren meine Besucher?

Die erste Frage dürfte am leichtesten zu beantworten sein. Wenn Sie nicht nur von sich erzählen möchten, wie sie leben und was sie mögen, schreiben Sie für alle, die sich für das selbe Thema wie Sie oder für Ihr Produkt interessieren. Dementsprechend muss auche Ihre Homepage gestaltet sein. "Jung und wild", "dezent und einfach" oder irgendetwas dazwischen.

Hier schließt sich sofort die zweite Frage an: Wie möchten Sie Informationen vermitteln?
Werben Sie nach dem Motto "das ist super und basta" (subjektiv) oder eher "ich halte das für toll und das gefällt mir weniger" (objektiv)? Wollen Sie reine Informationen vermitteln, erwarten Sie Reaktion oder möchten Sie für etwas werben? Dementsprechend können Sie Textinformationen gestalten und formulieren.

Wenn Sie bereits Daten digital verwalten, das Logo bereits als Bild auf dem Computer, oder die Statistik in der Tabellenkalkulation vorliegt, ist es nur ein kleiner Schritt zur Integration in die Homepage.
Moderne Textverarbeitungen und Tabellenkalkulationen bieten oft die Möglichkeit direkt in HTML zu speichern. Die Qualität des HTML-Quelltextes ist dabei, wie bei HTML-Editoren, oft sehr schlecht. Dann müssen Sie manuell nachbessern.
Bilder können Sie, wenn nicht über die Speichern-Funktion möglich, in der Bildbearbeitung über "Exportieren" in GIF bzw. JPEG speichern. Sollte auch dies nicht möglich sein, bleibt nur die Möglichkeit, das Logo abzufotografieren (Tast [Druck]) und in ein geeignetes Programm einzufügen. Schneiden Sie dann das Logo vom restlichen Bild ab und speichern Sie es als GIF- bzw. JPEG-Bild.

Haben Sie dagegen noch Werbeprospekte, Zeitungs-Artikel, Dokumente o.ä. müssen Sie diese zunächst scannen. Damit liegt es Ihnen als Bild vor. Mit Texterkennungsprogrammen kann daraus auch der Text gewonnen werden.

Wollen Sie Ihre Homepage regelmäßig erweitern und ergänzen? Sehr gut!
Es gibt schon genug Internetseiten, auf denen sich seit Wochen/Monaten/Jahren nichts mehr tut.

Beobachten Sie die Nachbarschaft! Will heißen: Schauen Sie sich ähnliche Homepages an. Machen Sie nicht nach, aber lernen Sie von anderen.

Bieten Sie Ihren Besuchern keine reine Werbeseite! Bieten Sie stattdessen eine direkte kostenlose Dienstleistung, wie Ratgeber, Downloads oder aktuelle Artikel.

Webdesign

Einteilung von Internet-Seiten

	Vorteile	Nachteile
zwei-farbig	großer Informationsgehalt kurze Ladedauer	eine (meist langweilige) Hintergrundfarbe farblos, auf Dauer langweilig
Viele bunte Bilder	ansprechende Gestaltung hauptsächlich Bilder	lange Ladedauer kaum Text kaum Informationen

Was Sie verwenden sollten, ist der goldene Mittelweg. Dezenter Hintergrund, nur einige kleine Bilder.

Blinde Tabellen

Die Nützlichkeit der blinden Tabellen

Achtung: Der Inhalt einer Tabelle wird erst im Browser angezeigt, wenn der gesamte Inhalt der Tabelle geladen wurde! Wenn Sie die gesamte Seite in eine Tabelle setzen möchten, bedeutet das, dass ein Besucher der Seite länger warten muss, um überhaupt etwas zu sehen!

Einfügen einer blinden Tabelle

<div align=center>
 <table width=613><tr><td>

 ...Tabelleninhalt...

 </table>
</div>

Sie können auch eine Prozentangabe verwenden, dann wird immer der festgelegte Anteil der verfügbaren Breite als Spaltenbreite genutzt, das dient lediglich dem guten Layout. Wenn Sie jedoch, wie im Beispiel, eine exakte Pixelangabe verwenden, können Sie sichergehen, das der Text unter jeder Auflösung gleich formatiert wird.

Beachten Sie bitte, dass bei Tabellen in dieser Tabelle die Tags zum Beenden von Zellen und Zeilen </td> bzw. </tr> verwendet werden müssen!

<table cellpadding=5> <tr valign=top> <td width=33%> ...Text der 1. Spalte... </td> <td width=33%> ...Text der 2. Spalte... </td> <td width=34%> ...Text der 3. Spalte... </td> </tr> </table>

1. Spalte: Das ist ein Beispiel eines 3-spaltigen Textes. Damit zwischen den Spalten etwas Raum ist, ist der Tabelleninhalt überall 5 Pixel vom Rand entfernt. 2. Spalte: Alle Zellen sind gleich breit (Prozentangabe). Die Zellenbreite wird automatisch an zu große Bilder angepasst. Da nicht in allen Zellen gleich viel Text steht, wird dieser nach oben ausgerichtet. 3. Spalte: Wieviel Spalten Sie einsetzen, spielt keine Rolle. Machen Sie mehrspaltigen Text nicht zu lang, sonst müssen Ihre Besucher dauernd scrollen.

<table bgcolor=navy cellpadding=10> <tr> <td> <font color=#ffffff face="Arial" size=2> ...Inhalt... </font> </td> </tr> </table>

Beispiel Wie Sie sehen, können Sie damit Text ganz leicht hervorheben. Natürlich können Sie auch Bilder, Verweise usw. einfügen. Sie können auch die Größe der Tabelle begrenzen oder die gesamte Tabelle zentrieren. Es gibt zahlreiche Einsatzmöglichkeiten.

Tipp: Wenn Sie mehrere nebeneinanderliegende Tabellenzellen farbig hinterlegen, sehen Sie zwischen den Zellen noch den Hintergrund der Seite. Mit cellspacing=0 im Tabellen-Tag entfernen Sie diese Gitternetzlinien.

<table width=500 cellpadding=10> <tr align=center> <td><h3>Überschrift</h3> <img src="bild1.gif" width=70 height=76> <td><h3>Überschrift</h3> <img src="bild2.gif" width=70 height=76> </tr> <tr align=center valign=top> <td>Beschreibungstext</td> <td>Beschreibungstext</td> </tr> </table>

aqua navy Beschreibung: eine helles Blau. Beschreibung: ein dunkles Blau.

<table cellpadding=5> <tr> <td valign=top> <img src="bild1.gif"> </td> <td> Beschreibungstext </td> </tr> </table>

Beschreibungstext: dieser Text kann beliebig lang sein, er steht immer rechts vom Bild.

Webgrafik

PNG - Vorteile von GIF und JPEG

Für Webgrafik sind vektororientierte Programme meist unerlässlich. Gute Vektorprogramme bieten eine Fülle von Möglichkeiten an, Grafikobjekte zu manipulieren, z.B. mit 3D-Effekten, Farbverläufen oder "wehenden Schatten". Das ist in Pixelgrafik nur schwer realisierbar. Um diese Grafiken in die Internet-üblichen Formate GIF oder JPEG zu konvertieren, müssen Sie die Export-Funktionen des Vektor-Programms nutzen. Teilweise ist es aber einfacher und effizienter die erstellte Grafik aus dem Vektorprogramm abzufotografieren, in die Bildbearbeitung zu übernehmen und dort zu speichern.

Eigenschaft	Zweck
Deckfähigkeit	Normalerweise beträgt die Deckfähigkeit eines Objektes 100%. Wird Sie aber herabgesetzt, lassen sich dahinter liegende Objekte erkennen.
Füllung	Die Füllung ist entweder eine Farbe, ein Farbverlauf oder ein Muster. Farbverläufe eignen sich sehr für Schriften, Muster für geometrische Formen.
Schatten	Schatten suggerieren einen Abstand zwischen dem Hintergrund und dem Objekt. Schatten werden meist rechts unter dem Objekt angezeigt und müssen nicht unbedingt schwarz sein.
Plastischer Effekt	Auch plastische Effekte hinterlassen Eindruck. Besonders bei Schriftzügen sind sie sehr reizvoll.
Unschärfe	Mit unscharfen Bildteilen lässt sich eine Entfernung oder Bewegung im Bild vortäuschen. Bei animierten GIFs sehr empfehlenswert um Einzelbilder zu sparen.

Typische Grafikarten

Browserkrieg

Für Webdesigner hat das ganze den Nachteil der erforderlichen Browser-Kompatibilität. Nicht alle Browser und nicht alle ihre Versionen verstehen HTML exakt gleich. Ihr Wortschatz an HTML-Befehlen ist zwar ähnlich, aber die Interpretation und Ausführung der Befehle lässt immer noch zu wünschen übrig. Die beiden aktuellen Browser Netscape Navigator 4.x und Internet Explorer 5 haben noch dazu eigenen Befehle, wer diese auf Internetseiten einsetzt, sperrt damit unter Umständen viele Besucher aus.

Der Internet Explorer ist insgesamt toleranter als der Netscape Navigator. Er ignoriert sogar fehlende </table>-Tags. Wenn Ihnen dieser Fehler einmal unterlaufen sollte, und Sie die Datei nur im Internet Explorer testen, werden Sie eines Tages Ihr blaues Wunder erleben, wenn der Netscape Navigator gar nichts anzeigt.

Eingabefelder, denen mit <input size=*> eine bestimmte Breite gegeben wird, sind in Internet Explorer und Netscape Navigator völlig unterschiedlich lang:

Eine Abhilfe ist hier nur von Seiten der Browser-Hersteller zu erhoffen.

Tabellen, die komplett mit einer Hintergrundfarbe versehen wurden, weisen diese im Internet Explorer auch in den Gitternetzlinien auf, im Navigator dagegen nur in den Zellen:

Im Beispiel wurde eine Zelle zusätzlich weiß hinterlegt, um deutlich zu machen, dass der Internet Explorer die Gitternetzlinien färbt. Die Zelle rechts unten wurde leer gelassen, der Internet Explorer füllt sie, der Netscape Navigator nicht!
Eine Abhilfe ist auch hier nur von Seiten der Browser-Hersteller zu erhoffen.

In den 3.x-Versionen des Netscape Navigators, tritt folgendes Problem auf:
Wenn in einer Tabelle mit <td align=right> der Inhalt dieser Zelle nach rechts ausgerichtet ist, innerhalb der Zelle dann aber ein <div>-Tag auftaucht, steht der Text innerhalb des <div> ... </div>-Bereichs nicht rechts, sondern links. Dasselbe gilt für <td align=center>.
Zu umgehen ist dieses Problem nur, indem der Zelleninhalt insgesamt mit <div align=right> bzw. <div align=center> ausgerichtet wird, statt im Zellentag.

Bereits seit Version 1.1 im Netscape Navigator: <blink> ... </blink> für blinkenden Text.
Microsoft hat es nie für nötig gehalten, diesen manchmal nützlichen Befehl zu übernehmen.

Seit Version 3.0 im Navigator möglich: Mehrspaltiger Text ohne Tabellen.
Befehl: <multicol> ... </multicol>

Sehr nützlicher Netscape-Befehl (ab Version 3.0): Horizontale und Vertikale Abstände:
<spacer>

Ihr Name: Warum würden Sie einen HTML-Nobelpreis verleihen? Ihre Pizza-Bestellung: Pizza Napoli Pizza Mexicana Pizza Quatro Stagioni Geben Sie bitte die gewünschten Zutaten an: Salami Pilze Ananas Geben Sie Ihre Zahlungsweise an: Mastercard Visa American Express

Zunächst ist ein einzeiliges Eingabefeld mit einer Länge von 30 Zeichen. Dann kommt ein unbegrenztes mehrzeiliges Eingabefeld, mit einer festen Breite von 50 Zeichen und einer Länge von 3 Zeilen. Anschließend können Sie einen Eintrag aus einer mehrzeiligen Auswahlliste auswählen, und sogar noch die Zutaten selbst bestimmen. Natürlich müssen Sie die Zahlungsweise angeben, Mehrfachauswahlen sind hier nicht möglich. Zuletzt ist noch eine Schaltfläche, mit der Sie zur letzten Seite zurückkommen.
Eine besondere Form der Auswahlliste erreichen Sie, wenn Sie die Zeilenanzahl auf 1 setzen, das sieht dann so aus: