W-HTMLWEB Autor: Heiko Schröder Inhaltliches Lektorat: Dirk Frischalowski HTML Überarbeitete Ausgabe vom 04. Juni 2007 HERDT-Verlag für Bildungsmedien GmbH, Bodenheim Internet: www.herdt.com Themen-Special: Professionelle Webseiten gestalten Alle Rechte vorbehalten. Kein Teil des Werkes darf in irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem anderen Verfahren) ohne schriftliche Genehmigung des Herausgebers reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. W-HTMLWEB Diese Unterlage wurde mit großer Sorgfalt erstellt und geprüft. Trotzdem können Fehler nicht vollkommen ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Die Bildungsmedien des HERDT-Verlags enthalten Links bzw. Verweise auf Internetseiten anderer Anbieter. Auf Inhalt und Gestaltung dieser Angebote hat der HERDT- Verlag keinerlei Einfluss. Hierfür sind alleine die jeweiligen Anbieter verantwortlich. Diese Schulungsunterlage wurde auf 100 % chlorfrei gebleichtem Papier (TCF) gedruckt.
INHALTSVERZEICHNIS HTML - Themen-Special: Professionelle Webseiten gestalten 1 Arbeiten mit diesem Workshop...6 1.1 Was Sie wissen sollten... 6 1.2 Zweck des Workshops... 7 1.3 Inhalt des Workshops... 7 1.4 Voraussetzungen... 8 1.5 Hinweis... 8 2 Erstellen eines Konzepts...10 2.1 Inhalt der Webseite... 10 2.2 Suche nach einem Provider... 11 2.3 Internetadresse... 12 2.4 Informationen strukturieren... 14 2.5 Erscheinungsbild... 15 2.6 Navigation... 16 2.6.1 Vergleich von zwei Stadtseiten... 16 2.6.2 Studie... 18 2.6.3 Schlussfolgerung... 18 2.7 Startseite... 18 2.8 Farbauswahl... 19 3 Technische Aspekte einer Webseite...22 3.1 Der Nutzen... 22 3.2 Hauptseite eines Verzeichnisses... 22 3.3 Dateinamen... 23 3.4 Bildschirmauflösungen... 24 3.5 Mit verschiedenen Browsern testen... 26 4 Einsatz von Grafiken...28 4.1 Pixelgenaues Gestalten... 28 4.2 Teilgrafiken... 31 4.3 Von anderen lernen... 36 5 Navigation erstellen...40 5.1 Hintergrundbild... 40 5.2 Webseite im Frame... 42 5.2.1 Breitenangaben... 42 5.2.2 Frameset unsichtbar setzen... 43 5.3 Navigationselemente... 44 5.3.1 Textelemente... 44 5.3.2 Grafische Elemente... 48 5.3.3 Grafische Links ins HTML bringen... 50 5.3.4 Navigation mit Hovereffekt... 52 5.4 Weitere Navigationsleisten... 55 6.3 Tabellenlayout durch Stylesheets ersetzen... 60 6.4 Informationen darstellen... 65 6.4.1 Generelles Layout...65 6.4.2 Dreispaltiges Layout...66 6.4.3 Verschiedene Ebenen...69 7 Grafiken einbinden... 74 7.1 Übersicht behalten... 74 7.2 Fotos bearbeiten... 74 7.3 Themenübersicht... 75 7.4 Thumbnails... 77 7.4.1 Bilder bearbeiten...78 7.4.2 Bilder als Vorschau einbinden...79 7.5 Webseite in Navigation einbinden... 83 7.6 Wieder- und Weiterverwertung... 84 8 Drucken von Inhalten... 86 8.1 Das Druckproblem... 86 8.2 Stylesheets als Druckformat... 88 8.3 Text "verschlüsseln"... 91 9 Rechte und Pflichten... 92 9.1 Vorwort... 92 9.2 Impressumspflicht... 92 9.3 Grafiken anderer Webseiten... 93 9.4 Inhalte anderer Webseiten... 94 9.5 Haftungsausschluss... 95 9.6 Informationen im Internet... 95 10 Interaktiv werden... 96 10.1 Gästebuch... 96 10.2 Counter... 97 10.3 Formmailer... 98 10.4 Forum... 99 10.5 Umfragen... 100 10.6 Chat... 101 10.7 News... 102 Stichwortverzeichnis... 104 6 Inhalte gestalten...56 6.1 Vorüberlegungen... 56 6.2 Den Besucher leiten... 57 6.2.1 Layout der Navigation... 57 6.2.2 Einbinden von Stylesheets... 58 6.2.3 Hovereffekt... 60
3 HTML - Themen-Special: Professionelle Webseiten gestalten 3 Technische Aspekte einer Webseite In diesem Kapitel erfahren Sie worauf Sie beim Erstellen einer Webseite achten müssen welchen Einfluss die Bildschirmauflösungen haben mit welchen Browsern Sie Ihre Webseite testen sollten 3.1 Der Nutzen Eine professionelle Webseite sollte nicht nur gut aussehen, sondern auch den technischen Gegebenheiten der Besucher genügen. Dies bedeutet zum Beispiel, dass eine Webseite auch unter verschiedenen Bedingungen gleich aussieht. Das schließt ein, dass sie unter unterschiedlichen Betriebssystemen bei diversen Bildschirmauflösungen in verschiedenen Browsern angezeigt wird und dabei nur geringe Unterschiede im Design aufweist. Zudem sollten die Elemente auf Ihrer Webseite nicht allzu sehr blinken, flackern und blitzen. Es gibt eine Reihe von Anbietern, die ihre animierten Bilder kostenlos zur weiteren Verwendung anbieten. Wenn Sie solche Grafiken nutzen möchten, dann tun Sie dies mit Bedacht und verhindern Sie das Überladen Ihrer Webseite. Ein Beispiel für einen sehr übermäßigen Einsatz von animierten Grafiken finden Sie auf der privaten Homepage http:// www.karl-fritsch.de/, die jedoch durch ihren durchgängigen Stil wiederum bekannt geworden ist. Weitere wichtige Aspekte für eine professionelle Webseite sind das Vermeiden von fehlerhaften Hyperlinks und das Verhindern der Anzeige von Verzeichnisseiten. 3.2 Hauptseite eines Verzeichnisses Die erste Seite Ihres Webangebots, also Ihre Startseite, sollte einen speziellen Namen erhalten, damit die Seite automatisch aufgerufen wird, wenn der Besucher nur den Verzeichnisnamen angibt, z. B. http://www.mein.web/myadmin/. Es wirkt sehr unprofessionell, wenn die Besucher, wie in der nebenstehenden Abbildung, bei dem Aufruf eines Verzeichnisses eine Auflistung der darin befindlichen Dateien erhalten. In den meisten Fällen heißt die Hauptseite eines Verzeichnisses index.html oder index.htm. Auch die Bezeichnung default.htm ist möglich. Ruft ein Besucher über den URL ein Verzeichnis auf und der Webserver findet in dem Verzeichnis eine Hauptseite, wird dem Besucher im Browser automatisch diese Datei angezeigt. Wie die Datei speziell bei Ihnen heißen muss, um als Hauptseite angezeigt zu werden, können Sie einfach ermitteln. Beginnen Sie damit, als Erstes die Datei mit index.htm zu benennen. Übertragen Sie die Datei auf Ihren Webserver, und rufen Sie das entsprechende Verzeichnis ohne die direkte Angabe der Webseite auf, z. B. http://www.mein.web/images/ 22
Technische Aspekte einer Webseite 3 Wenn die Webseite angezeigt wird, haben Sie den notwendigen Dateinamen ermittelt. Wenn nicht, probieren Sie index.html, default.htm und default.html aus. Wird keine der Dateien angezeigt, wenden Sie sich an Ihren Provider, und fragen Sie ihn, welche Werte für die Option DIRECTORY- INDEX in der Konfiguration des Webservers eingetragen sind. Den Namen dieser Datei können Sie auch nutzen, um beispielsweise Verzeichnisse zu schützen, in denen sich ansonsten nur Grafiken befinden. Somit verhindern Sie, dass ein Besucher das Grafikverzeichnis aufrufen kann und alle Grafiken ersichtlich werden. Die einfachste Methode, dies zu unterbinden, ist das Ablegen einer Hauptseite, die den neugierigen Besucher auf die Startseite Ihres Angebots umleitet. Beispiel: kap3\redirect\index.htm Fügen Sie die Datei immer in die Verzeichnisse ein, in denen Sie Ihre Grafiken ablegen. Der Besucher erhält damit keinen direkten Zugriff auf die dort befindlichen Dateien. Wenn er die Grafiken anschauen möchte, müsste er den genauen Namen der Dateien wissen, um sie aufzurufen. Die von Ihnen freigegebenen Grafiken sind auf Ihren Webseiten zu finden. <html> <head> <title>zugriff nicht erlaubt</title> <meta http-equiv="refresh" content="3; url=/"> </head> <body> <p>der direkte Zugriff auf dieses Verzeichnis ist nicht erlaubt.</p> <p>beginnen Sie Ihren Besuch auf meiner <a href="/">startseite</a>.</p> </body> </html> Für die Weiterleitung fügen Sie im Kopfbereich der Webseite den Meta-Tag refresh ein. Dieser ist für den Besucher nicht sichtbar und besagt, dass der Browser nach drei Sekunden automatisch eine andere Webseite aufrufen soll. In diesem Fall wäre dies durch die Angabe des Slash / die Hauptseite in Ihrem obersten Ordner. Dies bedeutet, wenn ein Anwender http://www.mein.web/fotos/privat/ aufruft, wird er automatisch auf http://www.mein.web geführt, ohne dass er den Inhalt des Verzeichnisses sieht. Geben Sie als Wert 0 an, wird ohne Verzögerung auf die angegebene Webseite weitergeleitet. Dem Besucher zeigen Sie zusätzlich, warum er umgeleitet wird. Er kann auch direkt über den angegebenen Hyperlink zur Startseite gelangen. 3.3 Dateinamen Ein weiteres nicht zu unterschätzendes Merkmal für professionelle Webseiten ist das Vermeiden von fehlerhaften Links. Trifft ein Besucher auf eine Webseite, bei der die verlinkten Seiten fehlen, wird er schnell wieder die Webseite verlassen. Er geht dann davon aus, dass er seine gewünschte Information leider nicht erhalten wird. Ein erster Schritt, um fehlerhafte Links zu vermeiden, ist das ständige Kleinschreiben von Dateinamen. Die meisten Provider setzen aus Gründen der erhöhten Sicherheit das Betriebssystem UNIX ein. Im Gegensatz zum Betriebssystem Windows unterscheidet UNIX nach Groß- und Kleinschreibung bei Dateinamen. Dies bedeutet, eine verlinkte Webseite Bilder.htm wird unter Windows gefunden, wenn sie bilder.htm, BILDER.htm oder gar BiLdEr.HtM heißt. Unter UNIX muss die Datei jedoch Bilder.htm heißen, da hier die Groß- und Kleinschreibung beachtet wird. 23
3 HTML - Themen-Special: Professionelle Webseiten gestalten Schreiben Sie alle Dateinamen prinzipiell klein. Somit vermeiden Sie falsche Dateiaufrufe unter dem Betriebssystem UNIX. Achten Sie außerdem darauf, dass die Dateinamen keine Sonderzeichen beinhalten. Die einzigen Zeichen, die Sie in Dateinamen verwenden können, sind der Unterstrich _ und der Bindestrich -. Die Datei-Endung einer HTML-Seite kann *.htm wie auch *.html lauten, da es keinen Unterschied gibt. Entscheiden Sie sich jedoch bereits im Vorfeld für eine Variante. Damit umgehen Sie von vornherein Fehlerquellen beim Verlinken einer Webseite. Am sichersten gehen Sie vor, wenn Sie sämtliche Verknüpfungen Ihrer Webseite mithilfe einer Software überprüfen. Die Software überprüft ausgehend von Ihrer Startseite alle Webseiten und verfolgt automatisch die enthaltenen Hyperlinks. Ist ein Link fehlerhaft, protokolliert dies die Software. Somit haben Sie die Möglichkeit, den Fehler bereits vor der Veröffentlichung zu korrigieren. Solche Software finden Sie in verschiedenen Softwarearchiven oder bei http://www.google.de, wenn Sie nach den Begriffen LinkChecker und Download suchen. Auch diverse Online-Angebote bieten Ihnen diesen Service kostenlos an. Es werden jedoch nur die direkt von Ihnen angegebenen Webseiten überprüft. Eine automatische Kontrolle über alle verbundenen Webseiten erfolgt nicht. 3.4 Bildschirmauflösungen Ein großes Problem eines jeden Webdesigners stellen die verschiedenen Bildschirmauflösungen dar. Da Sie nicht wissen, welche Auflösungen Ihre zukünftigen Besucher nutzen, sind Sie immer dazu gezwungen, einen Kompromiss zu finden, damit Ihre Webseite bei jeder Auflösung gut aussieht. Durch die kontinuierliche Entwicklung der Computer-Monitore, bei denen die Größe des sichtbaren Bereichs von ehemals 14" auf 17" oder gar 21" gestiegen ist, haben sich auch die Grafikkarten dementsprechend wieterentwickelt. Somit sind Grafikkarten, die eine Bildschirmauflösung von 1600 x 1200 Pixeln darstellen können, keine Seltenheit mehr. Die nachfolgende Grafik zeigt Ihnen die Größenunterschiede der bekanntesten Bildschirmauflösungen. 640 800 1024 1152 1280 1600 480 600 768 864 1024 1200 Größendarstellungen der verschiedenen Bildschirmauflösungen Sie erkennen bereits, welches Problem sich bei der Gestaltung einer Webseite ergibt. Webseiten, die z. B. unter einer Bildschirmauflösung von 1024 x 768 den gesamten Bildschirm ausfüllen, können unter 640 x 480 Pixeln nur teilweise angezeigt werden. 24
Technische Aspekte einer Webseite 3 640 x 480 Pixel 800 x 600 Pixel 1024 x 768 Pixel 1152 x 864 Pixel Die Abbildungen zeigen, welche Auswirkungen die unterschiedlichen Bildschirmauflösungen auf die Darstellung einer Webseite haben können. Die Homepage http://www.bund.de ist z. B. für Bildschirmauflösungen ab 1024 x 768 Pixeln konzipiert ( und ). Dies können Sie daran erkennen, weil Benutzer mit kleineren Auflösungen den gesamten Inhalt der Webseite nur dann lesen können, wenn sie die vertikalen Bildlaufleisten zu Hilfe nehmen ( und ). Nutzer mit höheren Auflösungen haben dagegen das Problem, dass sie die Webseite gestreckt sehen. Welche Bildschirmauflösungen tatsächlich am häufigsten genutzt werden, erfahren Sie von den zahlreichen Zugriffszählern, die auf verschiedenen Webseiten im Einsatz sind. Diese Counter zählen nicht nur die Zugriffe auf eine Webseite, sondern speichern unter anderem auch Informationen über die Bildschirmauflösungen der Besucher. Rufen Sie z. B. den Zählservice zu http://www.nedstatbasic.net auf, und schauen Sie sich die Statistiken der zehn am meisten besuchten Homepages an (Top10). Notizen 25
3 HTML - Themen-Special: Professionelle Webseiten gestalten Die nebenstehende Abbildung zeigt die Bildschirmauflösungen, die von einer Webseite gesammelt worden sind, die täglich mehr als 300.000 Zugriffe aufweist. Diese gesammelten Daten können somit als repräsentativ angesehen werden. Die Übersicht macht es recht deutlich: Die überwiegende Mehrheit der Besucher arbeitet mit einer Bildschirmauflösung von 1024 x 768. Über 98 % der Besucher surfen mit einer Auflösung von mindestens 800 x 600 Pixeln. Zu vermuten ist, dass die Nutzer mit hoher Auflösung (>=1280 x 1024) wahrscheinlich die Browserfenster nicht maximiert anzeigen lassen, da sie gleichzeitig auf andere Programme zugreifen werden. Dagegen ist die Größe von 640 x 480 Pixeln, die schätzungsweise von Palmtops oder WebTVs herrührt, mit 1.0 % vernachlässigbar gering. Aufgrund dieser Tatsache können Sie Ihre Webseite für eine Auflösung ab 800 x 600 Pixeln gestalten. Sie sollten jedoch nicht vergessen, Ihre Webseite unter verschiedenen Auflösungen zu testen. 3.5 Mit verschiedenen Browsern testen Das oberste Gebot eines Webdesigners ist es, seine Webseite mit den gängigsten Browsern zu testen. Die drei am meisten eingesetzten Browser sind der Microsoft Internet Explorer, der Netscape Navigator sowie der Opera Browser von Opera Software. Dazu muss jedoch angemerkt werden, dass den Internet Explorer bereits über 90 % der Besucher nutzen. Die drei Browser können ohne Probleme gleichzeitig auf einem Computer installiert werden, ohne dass sie sich gegenseitig beeinflussen. Durch den Test der Webseite mit den verschiedenen Browsern ist es für Sie möglich, das Layout Ihrer Webseite so zu sehen, wie es fast 95 % Ihrer Besucher sehen werden. Auch die unterschiedlichen Betriebssysteme haben Einfluss auf das Aussehen einer Webseite. Vermutlich werden Sie kaum die Möglichkeit haben, Ihre Webseite in einem Browser unter UNIX oder Macintosh anschauen zu können. Wenn doch, dann sollten Sie die Chance nutzen. Sie werden verwundert sein, dass schon allein die Anzeige der Schriften sehr unterschiedlich ist. Im Internet finden Sie unter der Adresse http://www.delorie.com/ web/lynxview.html einen LynxViewer. Dieser wandelt eine von Ihnen eingegebene Internetadresse in das Textformat um und zeigt Ihnen das Ergebnis, als würden Sie den textbasierten Lynx unter UNIX benutzen. 26
Technische Aspekte einer Webseite 3 Notizen 27