Editorial

Transcription

Editorial

Team Ideenreich
www.drweb.de
<title>www.drweb.de</title>
<meta name="publisher"
content="ideenreich.com - Ahrensburg">
<meta name="author"
content=" Sven Lennartz, Michael H. Ragwitz,
Ralph Segert, Michael Jaroszewski">
<meta name="contact" content=
"[email protected]">
<meta name=”print"
content="cw Obotritendruck GmbH Schwerin”>
© 2000 ideenreich.com
ISBN 3-928484-25-7
Editorial
Seit Oktober 97 hilft Dr. Web Seitengestaltern und Homepageautoren bei der täglichen Arbeit. Was als Dienstleistung angefangen hat, ist im Laufe der Zeit zu einem bekannten OnlineMagazin herangewachsen. Inzwischen gibt es mehr als 400 Artikel
in diversen Rubriken. Grund genug, die Site komplett zu überarbeiten und in neuer Form als Buch herauszubringen.
Wir haben es uns nicht leicht gemacht und keineswegs einfach
HTML- Seiten zwischen die Buchdeckel gepresst. Alle Artikel wurden aufbereitet, geordnet und mit Abbildungen versehen. An
genau dieser Stelle ist die gedruckte Form dem Online-Publishing
überlegen. Das Web ist ein flüchtiges und schnelles Medium,
während das Buch die Dinge zu bewahren sucht und in unwandelbarer Form griffbereit hält.
Die dahinterstehende Absicht erkennt man schon mit Blick auf
den Umschlag. Kein schönes Buch soll es sein, sondern ein praktisches Werk. Ein Buch, das man immer wieder zur Hand nehmen
muss und das ein ständiger Begleiter auf dem Schreibtisch ist.
Seine endgültige Form erreicht es aber erst mit Ihrer Hilfe. Dann
nämlich, wenn seine Seiten mit Notizen und Anmerkungen
beschrieben sind, hier und da Flecken auf manchen Seiten prangen und Eselsohren die wichtigsten Stellen markieren.
Wir mögen es, wenn Sie grob mit unsere Arbeit umgehen. Äußerlichkeiten sind hier Nebensache, so lange Sie nur größtmöglichen
Nutzen aus dem Werk ziehen.
Ahrensburg, im Februar 2000
Im Buch abgedruckte Quellcodes finden Sie in Form eines
ZIP-Archivs unter der Adresse:
http://www.ideenreich.com/buch/buch.zip
www.drweb.de
5
www.drweb.de
Aus dem Inhalt:
Kapitel 1: Erfolgreiches Web-Design ........................................8
Aller Anfang ist schwer ............................................................... 8
Zehn häufige Fehler....................................................................15
Zehn Todsünden im Web-Design...............................................23
Funktionalität hat Vorrang........................................................24
Der Besucher ist König...............................................................27
Effektiv und schnell ans Ziel..................................................... 28
Woran man Amateure erkennt.................................................. 30
Worüber sich Vielsurfer ärgern..................................................34
Links schaffen Kontakte............................................................ 35
Anfängerfehler sind vermeidbar............................................... 38
Texte müssen überschaubar sein.............................................. 39
Viel Lärm um nichts?................................................................. 41
Counter-Probleme.......................................................................42
Wie man Feedback verhindert...................................................43
Spaltensatz im Web-Design....................................................... 44
Das In und Out im Web............................................................. 46
Fragen an den Web-Designer.................................................... 48
Noch Fragen...? Wir haben die Antworten............................... 51
Links zum Thema.......................................................................53
Kapitel 2: Tuning-Tipps für Ihre Web-Site............................ 54
Ding mit Pfiff: Tabellen.............................................................. 59
Daten schnell erfasst: Formulare...............................................69
Geliebt und gehasst: Frames......................................................75
Schöner im neuen Format: CSS.................................................90
Internet Explorer-Spezialitäten...............................................102
Noch Fragen...? Wir haben die Antworten.............................. 110
Links zum Thema..................................................................... 116
Kapitel 3: Auf das Know-how kommt es an
Dr. Web Trickkiste.................................................................... 118
Kapitel 4: Die Kunst der Projektverwaltung.......................154
Datei-Endungen im Web...........................................................154
Dateien richtig benennen......................................................... 156
Verschenktes Potenzial.............................................................157
Geschäfte mit Tippfehlern........................................................158
Menüs Updaten leichtgemacht.................................................159
Kluge Navigation ist die halbe Miete......................................161
Abfangjäger für Fehler..............................................................163
Upload-Regeln für Webmaster................................................. 166
Die Lizenz zum Kopieren?........................................................168
6
www.drweb.de
www.drweb.de
Aus dem Inhalt:
Das Web ist kein Fort Knox......................................................171
Server Side Includes (SSI)........................................................173
Sonderzeichen richtig maskieren.............................................176
Links zum Thema......................................................................181
Kapitel 5: Mehr Besuch für Ihre Seiten................................184
Bannertausch............................................................................ 185
Link-Tausch.............................................................................. 191
Awards....................................................................................... 192
Pressearbeit...............................................................................193
Foren, Gästebücher, Newsgroups............................................ 194
Suchmaschinen (s.a. Kapitel 6)................................................195
Gewinnspiele............................................................................. 196
Umfragen im Web..................................................................... 198
Webringe....................................................................................200
Newsletter................................................................................. 201
Email-Etikette...........................................................................204
Aktionen.................................................................................... 206
Mehr Seitenaufrufe mit unfeinen Methoden...........................206
Autoresponder........................................................................... 210
Wer besucht Sie eigentlich?......................................................212
Web-Spionage............................................................................ 215
Links zum Thema..................................................................... 218
Kapitel 6: Suchmaschinen als nützliche Helfer..................222
Seiten optimieren......................................................................223
Was sind Spider?.......................................................................225
Meta-Tags richtig einsetzen..................................................... 228
Robotern die Fährte legen........................................................232
Frames und Suchmaschinen.................................................... 234
Suchmachinen austricksen.......................................................236
Optimierung mit Rankware® 99..............................................238
Seiten bei Suchmaschinen anmelden.......................................244
Noch Fragen...? Wir haben die Antworten...............................246
Links zum Thema......................................................................249
Suchmaschinen-Glossar........................................................... 250
www.drweb.de
7
Kapitel 1
Gelernt ist gelernt
Erfolgreiches Web-Design
1. Aller Anfang ist schwer - Erfolgreiche Seiten
2. Zehn häufige Fehler - Was Sie beachten sollten
3. Zehn Todsünden im Web-Design So werden Sie Ihre Besucher wieder los
4. Schönheit ist nicht alles - Funktionalität hat Vorrang
5. Der Besucher ist König Benutzerorientiertes Web-Design
6. Effektiv und schnell ans Ziel Eigenheiten der Web-Surfer
7. Kunst kommt von Können Woran man Amateure erkennt
8. Damit es im Netz Spaß macht Worüber sich Vielsurfer ärgern
9. Auf direktem Weg durch´s Netz Links schaffen Kontakte
10. Niveau-Verlusten vorbeugen Anfänger-Fehler sind vermeidbar
11. Auf die Ausrichtung kommt es an Texte müssen überschaubar sein
12. Wer am lautesten schreit ... Viel Lärm um nichts?
13. Zahlenspielerei - Counter-Probleme
14. Ins Gegenteil verkehrt Wie man Feedback verhindert
15. Wie in der Zeitung - Spaltensatz im Web-Design
16. Im Trend der Zeit - das In und Out im Web
17. Trau, schau, wem - Fragen an den Web-Designer
18. Noch Fragen...? Wir haben die Antworten!
19. Zum Nachschauen im Netz - Links zum Thema
1. Erfolgreiche Seiten
Paul Graham sagte eine Menge über erfolgreiche Seiten. Ein Satz
von ihm lautet: "Je wichtiger eine Site, desto einfacher das
Design". Aber aufgepasst: Einfaches ist nicht gleichzusetzen mit
"primitivem" Design. Es ist meist sehr viel schwieriger die Dinge
schlicht zu halten, als gewohnheitsmäßig in die Zauberkiste der
Möglichkeiten zu greifen. Ausnahmen bestätigen natürlich auch
hier die Regel.
8
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Aller Anfang ist schwer
Der Klassiker Yahoo benutzt weder Frames, noch Javascript. Wäre
das so, würden Sie Yahoo aller Wahrscheinlichkeit nicht einmal
kennen. Yahoo weiß: Wer etwas mitzuteilen hat, der muss es so
tun, dass die Gäste schnell an die wesentlichen Dinge herankommen. Soll auch heißen: Wer etwas verkaufen will, muss das ohne
Umwege und unter fast allen Voraussetzungen ermöglich.
Niemand kann es sich leisten, Kunden schon an der Tür abzuweisen.
Nicht schön, aber praktisch: Die Startseite von Yahoo in einem modernen Browser
(Opera 3.6)
Yahoo im Netscape Navigator 1 - Die Werbung wird nicht angezeigt, der Rest ist
verglichen mit der Darstellung in aktuellen Browsern fast identisch.
www.drweb.de
9
Kapitel 1
Gelernt ist gelernt
Natürlich kommt es auf den Inhalt der Site an - was und wie man
etwas darstellt. Wer Grafik-Design anbietet, der muss es auch zeigen. Eine Musik-Site muss uns etwas hören lassen und der
Javaexperte ist sozusagen per öffentlichen Auftrags verpflichtet,
uns seine spektakulären Tricks zu zeigen. Wenn Ihre Seiten Spaß
machen sollen, dann dürfen Sie sich getrost mehr erlauben und
wenn Sie im stillen Kämmerlein probieren und üben wollen, dann
ist auch das OK.
Das WWW aber ist öffentlich. Wenn Sie Menschen über
Linktausch, Bannerwerbung oder über Suchmaschineneinträge zu
sich einladen, müssen Sie sich Gedanken über Ihre Gäste machen.
Bei der Gestaltung der Inhalte wie Texte und Fotos, für die ausschließlich Sie selbst verantwortlich sind, gilt es eine Menge zu
beachten: Was wichtig ist, gehört an die zentrale Stelle und nicht
unter eine Ansammlung von Werbebannern, Begrüßungsbildchen
oder Copyrights. Das Wichtigste muss sofort erscheinen und nicht
nach minutenlangem Laden in einem Java-Applet oder erst auf
Seite drei.
Ladezeiten
So kann es gehen, die unlesbare gelbe Schrift sorgt für schnelles Weiterklicken. Der
Hintergrund wird erst später angezeigt.
Helfen Sie ihren Besuchern, Geld und Zeit zu sparen, indem Sie
die Ladezeiten so gering wie möglich halten. Sorgen Sie dafür, dass
der Text vor den Images angezeigt wird. Teilen Sie große Tabellen
10
www.drweb.de
Gelernt ist gelernt
Kapitel 1
in mehrere kleine; der Tabelleninhalt wird nämlich erst angezeigt,
nachdem auch der Tabelleninhalt geladen wurde. Entfernen Sie
überflüssige Elemente oder stellen Sie diese in weniger exponierte
Bereiche. Überlegen Sie, ob Sie Java-Applets und Riesen-Grafiken
wirklich brauchen. Wenn ja, weisen Sie auf deren Größe hin. Mehr
als 20kB für eine von vielen Grafiken ist zuviel. Probieren Sie wenn Sie mit GIF arbeiten - das JPG Format und testen Sie verschiedene Komprimierungsraten. Viele Grafikprogramme erlauben einen direkten Vergleich in Echtzeit.
Wer etwas verspricht ...
Was man verspricht, muss man auch halten. Daher bitte keine
Links auf Seiten die "noch" nichts enthalten, keine Links, die nicht
weiterführen oder gar in einer Fehlermeldung enden. So etwas
verunsichert den Gast, macht einen lustlosen Eindruck und widerspricht dem Prinzip des Webs. Ankündigungen können Sie im Text
oder am Ende der Seite machen.
Ihre Seiten sollten so aktuell wie möglich sein. Nichts ist ärgerlicher als veraltete oder fehlende Informationen. Peinlich wird es
vor allem auch dann, wenn jemand mittels Tricks (Javakalender/
Uhr/ generiertes Datum) Aktualität suggeriert, die nicht vorhanden ist. Auf solche Taschenspielertricks fällt niemand mehr herein.
Der Zusammenhang muss gewahrt sein
Alle Seiten einer Site sollten einen erkennbaren Zusammenhang
haben. Es muss klar sein, was wohin gehört und warum. Benutzen
Sie nur ausnahmsweise verschiedene Hintergründe und niemals
einmal diesen und einmal jenen Button. Geben Sie ihren Gästen
einen roten Faden in die Hand und vermeiden Sie dadurch
Irritationen. Achten Sie auf Farben, Hintergründe, Grafiken,
Tabellen, Schriften, Hyperlinks: Sie können aus dem Vollen schöpfen. Nur, um Himmels Willen, stimmen Sie alles aufeinander ab.
Typografie
www.drweb.de
11
Kapitel 1
Gelernt ist gelernt
Eine gute Seite hat immer einen ästhetischen Reiz, auch wenn sie
einfach gemacht ist. Bedenken Sie, dass Farben nicht auf allen
Monitoren gleich dargestellt werden - das Gegenteil trifft zu.
Fortlaufender Text in riesengroßen Lettern ist ebenso schlecht zu
lesen wie extrem kleiner. Vermeiden Sie Text in GROSSBUCHSTABEN oder Sätze in Regenbogenfarben. Achten Sie auf einen
guten Kontrast zum Hintergrund (wird häufig vergessen).
Links
Unübersichtliche Imagemaps, Links mal oben mal unten, sowie
Frames verwirren oft mehr als sie nützen. Links gehören in den
Text und an eine zentrale Stelle, wo sie leicht zu finden und zu
überschauen sind. Schein-Links sind unterstrichene Wörter oder
Sätze. Ihre Besucher werden draufklicken, um frustriert festzustellen, dass es so nicht funktioniert. Im schlimmsten Fall wissen
sie überhaupt nicht mehr wo es weitergeht.
Länge eines Dokuments
Ein HTML-Dokument ist grenzenlos, aber demonstrieren Sie das
nicht. Vermeiden Sie extrem lange Seiten, die unübersichtlich und
ermüdend sind. Fast leere Seiten dagegen führen Ihre Besucher an
der Nase herum.
Gedankenstützen für Anfänger
Jeder fängt mal klein an. Im Internet ist das ganz schön schwierig,
denn das Netz ist riesig. Wer zum ersten Mal "drin" ist, fühlt sich
wie in einer fremden Stadt, allein, orientierungslos und von fremder Sprache umgeben. Dazu kommen die allgegenwärtigen
Widrigkeiten der Technik, ob nun der Browser nicht so will, das
Betriebsystem nicht mitspielt oder der Designer nicht an die Nöte
des Gastes gedacht hat ... Die Zahl der Stolpersteine und Fallen ist
groß.
- Setzen Sie nichts voraus. Vor allem keine definierte Hard12
www.drweb.de
Gelernt ist gelernt
Kapitel 1
oder Software. Der Einsteiger weiß oft gar nicht welchen Browser
oder welche Monitor-Auflösung er hat, solche Dinge interessieren
ihn auch nicht.
- Verzichten Sie darauf, verschiedene Versionen einer Seite
anzubieten. Wer nicht weiß, was Flash oder Frames sind, hat
schon an der Pforte eine unangenehme Sorge mehr. Arbeiten Sie
statt dessen mit Browserabfragen im Hintergrund oder gestalten
Sie allgemeinverträglich.
- Es muss klar sein, wohin man klicken kann. Wer das nicht
erkennen kann, probiert; doch die Möglichkeiten des unerfahrenen
Surfers sind beschränkt. Durchaus wahrscheinlich, dass schon die
Bewegung des Rollbalkens Probleme bereitet. Unzureichend
beschriftete Image-Maps werden kaum als Navigationsinstrument
wahrgenommen.
- Richten Sie eine Hilfeseite für Erstbesucher ein. Der Link
dorthin muss weithin sichtbar sein. Diese Seite kann auch dazu
dienen, häufig gestellte Fragen (FAQ) im Vorwege abzufangen oder
etwas über Sinn und Zweck eines Projektes mitzuteilen.
- Denken Sie an Alternativen in Sachen Navigation. Wer
schon einmal eine Suchmaschine bedient hat, ist zumindest in der
Lage die site-interne Suchfunktion zu verwenden. Wer klassische,
blaue Link im Stile Yahoos bereits kennen gelernt hat, wird diese
einer Image-Map erleichtert vorziehen.
- Links und Formularbuttons müssen klar bezeichnet sein.
Über aussagekräftige Bezeichnungen freuen sich alle Surfer. Ein
Link sollte nicht nur als solcher erkennbar sein (keine
Selbstverständlichkeit), er sollte auch einen Hinweis darauf geben,
was sich hinter ihm verbirgt.
- Verzichten Sie auf netzinterne Fachsprache. Etwa: "Klicken
Sie auf das Icon unterhalb der Image-Map, um auf die Index-Seite
zu gelangen."
- Anfänger haben Probleme mit Frames. Sie müssen erst lerwww.drweb.de
13
Kapitel 1
Gelernt ist gelernt
nen, dass ein Fenster mit einem Mausklick aktiviert werden muss,
bevor man scrollen oder ein Formularfeld ausfüllen kann.
Probleme entstehen auch beim Drucken oder Speichern von
Seiten.
- Versuchen Sie an die Email-Adresse des Surfers heranzukommen. Bieten Sie einen Download mit Registrierung, Infos per
Autoresponder, eine gratis Mitgliedschaft oder einen Newsletter
an. Hintergrund: Gerade Einsteigern gelingt es oft nicht früher
besuchte Sites wiederzufinden. Sie sind ungeübt im Merken von
URL's, wissen weder den Browsercache noch Verlauf zu bedienen
und kennen die Möglichkeit des Bookmarks nicht. Wie angenehm,
wenn man die URL einer schon besuchten und lohnenden Web-Site
im Postkasten weiß.
- Auch Anfänger stellen Fragen. Nur weil diese vielleicht schon
ein Dutzend Mal gestellt worden sind, sind sie nicht unwichtiger.
Schließlich geht es nicht um Ihr Wohlbefinden sondern um das des
Gastes. Beantworten Sie sie mit dem gleichen Engagement. Es
lohnt sich.
2. Zehn häufige Fehler
14
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Was Sie beachten sollten
Neben Kreativität und Sachverstand begegnen Ihnen immer wieder die selben Probleme. Fehler werden Sie aber nicht mehr begehen, wenn Sie unser Buch gelesen haben.
Schriften
Viele Homepage-Autoren fallen darauf herein. Schriften (Fonts)
wie Zapf, Eurostile, Gothic usw. werden nur auf Rechnern angezeigt, auf denen sie auch installiert sind. Das Ergebnis ist mitunter mehr als scheußlich. Manche WYSIWYG-Editoren tragen noch
zu diesem Unsinn bei, indem sie alle rechnerseitig verfügbaren
Schriftarten zur Auswahl anbieten.
Schriften wie Verdana, Tahoma und Comic Sans stehen inzwischen den meisten Websurfern zur Verfügung, aber nicht allen. Sie
wurden von Microsoft zusammen mit dem Internet Explorer und
Windows eingeführt. Wenn Sie diese Schriften einsetzen möchten,
geben Sie die Bezeichnung VOR denen der anderen Fonts an:
1. Serifenschrift (mit "Füßchen")
Times New Roman, Georgia, Times, serif
2. Serifenlose Schrift (ohne "Füßchen")
Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif
3. Schreibmaschinenschrift
Courier New, Courier, Monaco, monospace
4. Verdana und andere
Verdana,Arial, Helvetica, Geneva, Swiss,
Bedenken Sie in diesem Zusammenhang auch, dass es keine
Einheitsgrößen gibt. Eine Windows 12-Punkt Schrift wird auf
einem Mac-Browser etwa 2 Punkt kleiner angezeigt. Dieser
Umstand kommt besonders bei fixen (Tabellen)Layouts zum
Tragen.
Dateipfade
www.drweb.de
15
Kapitel 1
Gelernt ist gelernt
Häufige Fehler sind auch fehlende oder falsch referenzierte
Images. Als Windows- oder Mac-Nuzter dürfen Sie nicht übersehen, dass Unix Server zwischen Groß- und Kleinschreibung unterscheiden. Machen Sie es sich zur Gewohnheit, Ihre Seiten nach
jedem größeren Upload im Online-Betrieb zu testen.
Piraterie via Frameset
Frames müssen richtig codiert sein. Externe Links sollten sich
nicht innerhalb eines Frame-Fensters öffnen. Unsinnig wird es
auch, wenn die gelinkte Site ebenfalls Frames einsetzt. Außerdem
sieht das ein wenig so aus, als wolle man sich mit fremden Federn
schmücken. Wer das mit Absicht macht, disqualifiziert sich in den
Augen erfahrener Netizens und demonstriert schnöden Egoismus.
Spätestens die Browseradresseleiste offenbart den Unterschied, hier hat sich
jemand einer fremden Homepage (rechts) bemächtigt.
Schlecht sehen kann man gut Bildschirmauflösungen optimal einsetzen
Einen Kinofilm kann auch mit einem Fernseher angeschaut werden. Niemand verlangt aber, dass Sie für einen großen Bildschirm
viel Geld ausgeben. Auch das WWW ist keine Plakatwand für
Grafikdesigner, sondern ein Informations- und Unterhaltungsmedium.
Schließen Sie nicht von sich auf andere: 15"-Monitore sind zwar
16
www.drweb.de
Gelernt ist gelernt
Kapitel 1
längst zum Standard geworden, kommen aber nicht durchgängig
zum Einsatz. Auch 17"-Monitore stehen nicht auf jedem Schreibtisch. Stat Market hat über Javascript-Counter eine große Anzahl
von Homepages ausgewertet. Will man der Statistik folgen, waren
im September 1999 noch knapp 14 Prozent aller Surfer mit einem
14-Zoll-Monitor im Netz. Klar ist auch, dass die größeren Monitore
vor allem bei neuen Rechnern zum Einsatz kommen und dann
über mehrere Jahre im Dienst bleiben, weil sie sich nicht wie beispielsweise Browser kostenlos auswechseln lassen.
Es allen recht machen zu wollen, ist immer ein diffiziles
Unterfangen. Überhaupt nicht an die Besucher zu denken, ist
jedoch pure Ignoranz. Wenn Ihre Seiten auch mit 640*480 gerade
noch anzusehen sind, befinden Sie sich auf der sicheren Seite.
Hier ist auch ein 19" Monitor nicht groß genug. Man achte auf den Rollbalken
Viele 14-Zoll-Monitore erreichen zwar auch 800*600 Pixel, aber
das Arbeiten wird damit zur Qual. Es gibt Palmtops mit Windows
CE, Web-TV und sogar Sega-Konsolen-Browser mit noch geringerer Auflösung. Werden aber Frames ohne Rollbalken eingesetzt,
müssen die Besitzer kleiner Monitore draußen bleiben. Surfer mit
neuen, großen und teuren Monitoren kommen mit der
Optimierung auf 640*480 Pixel durchaus zurecht. Auch neue 15Zoll-Monitore werden hier und da mit einer Auflösung von 640*480
Pixel betrieben, was durchaus sinnvoll sein kann.
Mancher hat zwar einen 17- oder 21-Zoll-Monitor mit entsprewww.drweb.de
17
Kapitel 1
Gelernt ist gelernt
chend hoher Auflösung, zieht aber das Browserfenster gar nicht so
weit auf, weil vielleicht noch andere Programme laufen. Diese
Praxis ist weit verbreitet. Mit einer Bildbreite von 1024 oder mehr
Bildpunkten ärgern Sie Ihre Besucher und großflächige Seiten
werden mitunter nicht korrekt ausgedruckt.
Grafik mit Auskunft
Alle wichtigen Grafiken sollten alternativ (ALT) mit einem Text
versehen werden. Wer mit abgeschalteter Grafikanzeige unterwegs ist (etwa 10-15% der User machen das), findet sich ansonsten
vielleicht nicht zurecht. Außerdem wird der Text in vielen Fällen
beim Drüberfahren mit der Maus angezeigt. Sie können das für
zusätzliche Informationen nutzen und wenn Sie einmal dabei sind,
dann sorgen Sie doch auch dafür, dass der Browser-Text VOR den
Grafiken laden kann. Dazu müssen alle Images mit Angaben zu
Width und Height ausgestattet werden. Außerdem "ruckelt's"
dann beim Seitenaufbau nicht mehr so.
Pflegen Sie Ihre Seiten regelmäßig. Eine Javauhr und darunter
der Hinweis auf die letzte Aktualisierung vor 6 Monaten garantiert
sofortiges Verlassen Ihrer Site oder ein höhnisches Grinsen.
Externe Hyperlinks müssen regelmäßig überprüft werden.
Der Seitentitel
Vergessen Sie den Titel (<title>) nicht. Seitentitel werden für das
Suchmaschinen-Ranking und für Bookmarks dringend benötigt.
"index.html" oder "frameset 01" verraten den Amateur. Altavista
allein findet an die 9000 Web-Seiten mit dem Titel "index1.html".
Übrigens der Dateiname ist hier nicht gemeint, obwohl findige
Designer auch ihn zu nutzen wissen, um ihr Ranking in den
Suchmaschinen zu erhöhen.
Trotzdem
lassen
sich
Bookmark mit dem Titel "index1",
wer würde hier eine Seite wiederfinden?
18
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Seitentitel auch kreativ einsetzen. Schmückende Seitentitel können Ihre Chancen in den Suchmaschinen vermindern. Wer es sich
leisten kann, darf etwas mehr riskieren. Unsere Beispiele mögen
auf den ersten Blick wenig spektakulär scheinen, doch versuchen
Sie es mal im Einsatz, Sie werden überrascht sein ...
(¯`·.¸¸.·´¯`·.¸¸.-> Titel
.*Der*´¯`·.¸¸.·´¯`·-· -- ·-·´¯`·.¸¸.·´¯`*Titel*
""" t i { t } e l """
···· | .. Titel .. | ····
-== TITEL ==|a|u|c|h|d|a|s|i|s|t|e|i|n|t|itel
||| : .. ·· {Titel} ·· .. : |||
\\ Seitentitel //
`` Seitentitel ´´
]] . TITEL . [[
>">>" -Titel- <"<<"
-#-_TITEL_ -#||| -- : SEITENTITEL : -- |||
(º>©º°¨... TITEL
~~~_titel_~~~
Kontaktscheu zahlt sich nicht aus
www.drweb.de
19
Kapitel 1
Gelernt ist gelernt
Verstecken Sie Kontaktadressen, Telefon- und Faxnummern nicht
in Grafiken. Die werden nicht immer angezeigt, manchmal nicht
mit ausgedruckt und mit abgespeichert. Wer später Verbindung zu
Ihnen aufnehmen will, muss zwangsläufig zur Konkurrenz wandern.
Plan Net versteckt sich hinter der Email-Adresse, mehr möchte man vorsorglich
nicht preisgeben. Wer nur eine Faxnummer sucht, hat es schwer, denn kein Link
scheint richtig.
Tippfehler stellen kein gutes Zeugnis aus
Wo viel Text ist und ständig etwas geändert wird, schleichen sich
auch schnell Tippfehler ein. Unfreundliche und bisweilen höhnische Kommentare sind die Folge. Benutzen Sie deshalb einen
Spell-Checker oder den Duden. Rechtschreibfehler machen wir
auch, das kann passieren. Aber bitte nicht schon im Titel oder in
der Seitenüberschrift. Wenn Sie Pech haben, geraten Sie so in eine
Suchmaschine und alle Welt sieht zu. Wie wichtig das ist, erleben
wir selbst gelegentlich. Natürlich gibt es auch freundliche Leser,
die auf Fehler aufmerksam machen. Besser aber, es kommt gar
nicht erst so weit.
Für welchen Browser soll ich optimieren?
Für Netscape oder Microsoft optimiert man nicht, sondern für die
Gäste. Was Web-Designer sich mitunter gar nicht vorstellen kön20
www.drweb.de
Gelernt ist gelernt
Kapitel 1
nen: Viele Surfer interessieren sich nicht für Browser und die
damit verbundenen Probleme. Netscape und Microsoft sind darüber hinaus nicht die einzigen Browser-Fabrikanten; es gibt an die
hundert andere Browser.
Javascript ist gut, aber nicht alles ...
Javascript als HTML-Erweiterung ist eine prima Sache. Man kann
damit Formulare prüfen und Umlaute ermöglichen. Javascript öffnet
maßgeschneiderte
Fenster,
wechselt
Bilder
bei
Mausberührung aus und einiges mehr. Die Sache hat nur einen
Haken: Javascript ist eine der häufigsten Fehlerquellen und eine
höchst wackelige Angelegenheit. Einige Browser verstehen es
nicht, andere interpretieren es auf eigene Weise. Das praktische
Ergebnis ist nicht selten eine Fehlermeldung.
Javascript funktioniert auch dann nicht zuverlässig, wenn Sie
Object Detection einsetzen und mit allen Browser testen, die Sie
erreichen können. Schuld haben natürlich die BrowserFabrikanten, die auch hier ihr eigenes Süppchen zu kochen versuchen.
Moderne Browser verstecken Javascript-Fehler. Probleme löst das nicht.
Wer Javascript als Navigationshilfe einsetzt, ist selber schuld,
wenn jeder zweite Gast eine Kehrtwendung macht und lieber da
surft, wo er die gesuchten Dinge ohne Umwege und Wartezeiten
bekommen kann. Wenn Fenster nicht so angezeigt werden, wie Sie
sich das als Webmaster gedacht haben, wenn in einem Frame
plötzlich gar kein Link funktioniert, dann ist Javascript im Spiel
und der Gast ist weg und kommt so schnell auch nicht wieder.
Zudem belastet Javascript den Arbeitsspeicher des Computers und
zwingt selbst Maschinen gut ausgestattete Maschinen in die Knie,
wenn man nur lange genug damit surft. Stürzt der Browser gar ab,
dürfen Sie in der Hölle schmoren.
Grafiken per "on mouse over" auswechseln ist ein smarter Effekt vorausgesetzt, nur Sie kennen die Methode. Und wenn das so
www.drweb.de
21
Kapitel 1
Gelernt ist gelernt
wäre? Der Code Ihrer HTML-Page würde sich verdoppeln und alle
Grafiken müssten gleich zweimal geladen werden. Schade, denn
ein Teil Ihrer Gäste kann es noch nicht einmal sehen. "on mouse
over" in der Statuszeile ist zumeist genauso nutzlos wie überflüssig. Bei Grafiken haben Sie den ALT-Tag zur Verfügung, der direkt
am Bild gezeigt wird und auch optisch attraktiver ist (ab Browser
Version 3.0) und Text-Links sagen selbst, wohin sie führen. Sie
brauchen nur sinnvolle Formulierungen zu erfinden.
Ohne Javascript kein Zutritt, Arroganz bei der Suchmaschine Kolibri
Unnötig, zu erwähnen, sind lästige Spielereien, Ticker und Uhren.
Ein Ticker verbietet sich schon deshalb, weil dieser Effekt verbraucht ist und auf den meisten Seiten für halbgare Botschaften
eingesetzt wird. Uhren sind schon der blanke Hohn, schließlich hat
der Durchschnitts-Westeuropäer selbst 4,4 Zeitanzeiger in seinem
Besitz. Verzichten Sie auf schale Zaubertricks und investieren Sie
Ihre Zeit in Nutzen und Inhalt. Ihre Besucher werden es Ihnen
danken.
Wenn Sie Javascript als Navigationshilfe einsetzen müssen,
benutzen Sie <noscript> </noscript> Alles, was innerhalb der
Klammern steht, wird von nichtjavascript-fähigen Browser oder
solchen mit abgeschalteter Funktion angezeigt. Hier können Sie
zum Beispiel Links unterbringen. Das ganze funktioniert analog
zum <noframe> Tag.
3. So werden Sie Ihre Besucher wieder los
22
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Zehn Todsünden im Web-Design
Wenn Sie nicht aufpassen, dringt das Publikum erst gar nicht zu
den Inhalten Ihrer Site vor und sie wird weggeklickt, bevor Sie
Leistungen, Produkte und Informationen zeigen können.
Zu den zehn Todsünden, die Besucher von Ihrer Site fernhalten, gehören:
1. Die Seite lädt und lädt...und es gibt weder etwas zu sehen noch
zu lesen.
2. Diverse Werbebanner tauchen vor dem eigentlichen Inhalt auf.
Sollten die etwa interessanter sein als Ihre Site...?
3. Man muss ein Formular ausfüllen, bevor man etwas zu sehen
bekommt.
4. Sie plaudern schon auf der Startseite. Prima, wenn Sie viel zu
erzählen haben, aber heben Sie sich das für die "private Ecke" auf.
5. Man findet den Eingang zu den eigentlichen Inhalten nicht. Es
ist erstaunlich, wie Autoren den Zugang zwischen unzähligen
Buttons und Grafiken oder in komplizierten Image-Maps verstecken.
6. Unvermittelt und ungefragt öffnen sich neue Browserfenster.
Wer sich im Fenster-Dschungel verliert, sucht schnell das Weite.
7. Automatische Weiterleitungen oder Links, die auf Javascript
basieren. Ohne <noscript> -Tags müssen ca. 10 Prozent Ihrer
Besucher draußen bleiben. Wer Pech hat, sieht gar nichts.
8. Frames ohne <noframes> Tag. Auch hier sperren Sie zumindest
einige Besucher aus - bieten Sie Ihnen doch wenigstens etwas an.
9. Ausschließlicher Einsatz von Image-Maps. Pech für Besucher in
Eile, die ihre Grafikanzeige ausgeschaltet haben.
10. "Pseudo-Videos" als Eingangstunnel. Mittels Meta-Refresh
werden diverse Seiten hintereinandergeschaltet, Links gibt es
www.drweb.de
23
Kapitel 1
Gelernt ist gelernt
Funktionalität hat Vorrang
nicht. Da verliert man schnell die Geduld.
...und zu guter Letzt noch ein Rat: Multimedia-Designer mögen
Shockwave. Besucher teilen diese Vorliebe nicht immer. Sie müssen schon sehr gut sein oder ausnehmend Wichtiges anzubieten
haben, wenn Sie ein Plug-in als Eintrittskarte verlangen dürfen.
4. Schönheit ist nicht alles
Würden Sie öfter bei uns vorbeikommen, wenn wir grafische
Menüs und Frames einsetzen? Reizt es Sie, fünfmal länger auf
Seiten zu warten, nur weil der Designer ein Photoshop-Künstler
ist? Finden Sie es spannend, von DHTML-Animationen umgarnt
zu werden, wenn Sie nach Informationen suchen? Sind JavascriptFehlermeldungen erotisch? Klicken Sie mit Leidenschaft und stöbern Sie gern, wenn Sie es eigentlich eilig haben? Wir meinen:
Eine Site ist nicht deshalb erfolgreich, weil sie großartig aussieht.
Erfolgreich ist, was funktioniert und viele Web-Sites funktionieren
überhaupt nicht.
Gegen den Strom. Simpel-Layout bei Identity
Die Erfolgsformel ist einfach: Web-Design ist nicht gleich GrafikDesign. Das heißt selbstverständlich nicht, dass erfolgreiche
Seiten nicht auch schön sein können. Wenn Sie Web-Designer sind,
müssen Sie außerdem auf die Wünsche Ihrer Kunden eingehen,
24
www.drweb.de
Gelernt ist gelernt
Kapitel 1
deren Phantasien vielleicht um Hochglanzbroschüren und
Multimedia CD-ROM's kreisen. Passen Sie auf, dass man Sie nicht
in eine der folgenden Schubladen steckt:
Pfadfinder-Sites
Sie bieten eine undurchschaubare Navigation, die nicht auf die
Gewohnheiten und Bedürfnisse der Benutzer eingeht und auch
nicht angepasst werden kann, weil entweder kein Feedback vorhanden ist oder Besuchermeinungen ignoriert werden.
Ballaststoffreiche und Übergewichtige
Schwerfälliges Web-Design kommt mit einem Übermaß an modischen Techniken, Grafiken, Features und Links daher. Das sind
Dinge, die niemanden wirklich interessieren, die es überall gibt,
die nichts zur Sache tun, ablenken und verwirren.
Allein 60 Grafiken, 4 HTML Seiten und 220 KB für den Einstieg: Buecher.de
Salami-Sites
Präsentieren ihre Informationen in winzige Häppchen zerteilt. Es
ist richtig - kein Mensch liest einen langen Beitrag online, er wird
überflogen. Wer einen solchen Beitrag lesen will, wird ihn ausdrucken oder abspeichern. Muss man am anderen Ende aber zu oft
klicken, verliert der Besucher die Lust und Sie haben Ihr Pulver
www.drweb.de
25
Kapitel 1
Gelernt ist gelernt
verschossen.
Die Vortäuscher
Sie versprechen viel und halten gar nichts. Frustrierte Besucher
kehren nie zurück.
Die Schwätzer
Wie würden Sie es nennen, wenn Ihnen jemand seitenlang ein
Produkt oder die Navigation erklärt ohne je auf den Punkt zu kommen? Ganz abgesehen davon, dass man ohnehin keine Zeit dafür
hat.
Las Vegas-Sites
Technik wird als Ersatz für fehlende Inhalte eingesetzt. Hier ersetzen Blendwerk und Zaubereien nützliche Inhalte und animieren
die Besucher zu Tode. Mit DHTML kann man großartige Dinge tun
- zum Beispiel Kunden verscheuchen.
Die Verspielten und Selbstverliebten
Man praktiziert Design um des Designs willen. Das ist zwar
manchmal schön anzusehen, aber oft ohne praktischen Wert.
Die Bastler und Heimwerker
Alle 14 Tage wird ein kompletter Relaunch gestartet. Die Seiten
gleichen ständigen Baustellen - überall wird gearbeitet, nichts
wird jemals wenigstens halb fertig.
Die Osterhasen
Man lässt Sie ausgiebig buddeln und schaufeln. Die wichtigsten
Informationen stecken in den Meta-Tags und die Firmenadresse
irgendwo auf der "Kontaktseite". Preise dürfen Sie per Email oder
am Telefon erfragen.
5. Der Besucher ist König
26
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Benutzerorientiertes Web-Design
Wer cooles mit benutzerorientiertem Design verwechselt oder die
Notwendigkeit des Letzteren leugnet, büßt mittelfristig wichtige
Chancen ein. Zugegeben, Presseleute oder die Führungsetagen von
Firmen lassen sich gern von Shockwave oder DHTML beeindrucken. Der Anwender aber zieht damit den Kürzeren. Stellen Sie
sich vor, eine Firma würde Highend-3D Visitenkarten drucken,
aber in den Genuss der neuen Technik kommen nur Kunden mit
3D-Brillen von Fielmann. Hinzu kommt, dass die zeitgeistigen
Kärtchen-Designer keinen Platz mehr für die Telefonnummer
gefunden haben.
Von einem scheinbaren Naturgesetz spricht Jacob Nielsen in einer
Kolumne, dass nämlich Firmen mit dem ersten Webauftritt
zwangsläufig typische Anfängerfehler wiederholen (und auf diese
Weise eine Menge Geld zum Fenster herauswerfen). Design als
Selbstzweck ist so ein Anfängerfehler. Wer Informationen sucht,
interessiert sich nicht für 3D-Effekte. Sie stehen ihm im Wege, und
wahrscheinlich kehrt man Ihren Seiten sogar den Rücken. WebDesign ist kein Grafikdesign. Ein Web zu gestalten, heißt zuerst
einmal Informationen aufzubereiten und in eine nachvollziehbare,
leicht zugängliche Ordnung zu bringen.
Benutzerorientiertes Design und die damit verbundene Ordnung
erfordert das Ausräumen von Hürden. Das heißt, die Voraussetzungen, um ihre Seiten genießen zu dürfen, müssen so gering
wie möglich sein. Ein Besucher hat vielleicht Geld, aber in der
Regel niemals Zeit. Lange Downloadzeiten ersticken sein Interesse; im Durchschnitt verbringt ein Gast etwa 2-5 Minuten auf
Ihren Seiten und ist nicht selten die meiste Zeit über damit
beschäftigt, die gewünschte Seite und die gesuchte Information zu
finden.
Sie können also gar nicht Besseres tun, als die Anregungen Ihrer
Besucher aufzugreifen und sich danach zu richten. Wenn Sie kein
Feedback bekommen, dann sorgen Sie für welches. Stellen Sie fest,
welche Informationen und welche Seiten am meisten verlangt
werden und setzen Sie diese an die zentrale Stelle. Bieten Sie
Hilfen an: Inhaltsverzeichnisse oder Suchformulare bringen Licht
ins Dunkel. Verzichten Sie auch auf überflüssige Elemente; jede
www.drweb.de
27
Kapitel 1
Gelernt ist gelernt
Eigenheiten der Web-Surfer
Grafik, jedes Icon, ja jedes Wort braucht seine Funktion und
Bedeutung. Finden Sie keine, dann testen Sie die Löschfunktionen
Ihrer Tastatur. Effekte beeindrucken nur einmal, Service und
Kundenfreundlichkeit jedoch ein Leben lang.
6. Effektiv und schnell ans Ziel
In einen lesenswerten Artikel der im September bei
webreview.com erschien, liess uns Jared Spool an seinen
Beobachtungen teilhaben. Dieser Mann hat nichts anderes getan,
als Menschen beim Surfen über die Schultern zu schauen. Die
Ergebnisse klingen logisch, so dass wohl jeder sie unterschreiben
könnte. So sieht der typische Surfer aus: Er hat es stets eilig, ist
schrecklich ungeduldig und verlangt immerfort nach Neuigkeiten.
Das ist aber auch kein Wunder, schließlich kostet jede Minute
Internet bares Geld. Diese Leute wollen sofort bedient und zufrieden gestellt werden. Aber sie tun nicht unbedingt das, was ihnen
nahegelegt wurde.
Sie betreten Sites durch Hintereingänge, wenden sich gelangweilt
ab oder klicken die schönsten Grafiken einfach weg, sobald die
ersten Links erscheinen. Wer nicht mehr zu bieten hat als Effekte,
wird schneller weggeklickt, als sich die Seiten aufbauen. Hätten
Sie gedacht, dass Animationen, die doch Aufmerksamkeit auf
bestimmte Dinge lenken sollen, mitunter mit den Händen abgedeckt werden, um einen Text besser lesen zu können? Ein in der
Tat handfester Protest.
Grafiken erhöhen weder die Attraktivität einer Site, noch den
Spaß am Surfen; der nämlich entsteht erst, wenn das Gesuchte
gefunden, das in Aussicht gestellte erreicht ist. Wenn das
geschieht, spielen selbst Download-Zeiten keine so große Rolle
mehr. Wer sicher ist, das Gewünschte zu finden, wartet gern. Wer
es nicht bekommt, reagiert so oder so unerfreut. Designer, die
dreißig oder sechzig Grafiken auf eine Seite bringen, dürfen sich
deshalb nicht wundern, wenn der Gast beim ersten Anzeichen
eines Links die Flucht nach vorn ergreift. Wozu also die Mühe?
Die grafische Ausstattung einer Website über alles zu stellen, ist
28
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Eigenheiten der Web-Surfer
im Wesentlichen ein Missverständnis. Anders verhält es sich nur,
wenn Grafiken selbst den Inhalt bilden. Am härtesten aber trifft es
diejenigen, die fehlenden Inhalt mit unprofessioneller Grafik
kaschieren wollen. Sie erreichen nichts, wecken bestenfalls
Unmut. Missglückte Präsentationen signalisieren vor allem eines:
"Die Konkurrenz ist besser, schneller, freundlicher, sorgfältiger." Kein Mitbewerber ist im Web weit entfernt. Effekte beeindrucken
bestenfalls einmal, Service und Kundenfreundlichkeit jedoch ein
Leben lang.
Macht es Spaß, wenn nach ein paar Minuten (und so viel Zeit muss
man schon mitbringen) ein halbes Dutzend Browserfenster den
Bildschirm verkleben? Ist es ökonomisch, mehrere HTMLVersionen herzustellen und wer zahlt das, wenn man nicht für sich
selbst arbeitet?
7. Kunst kommt von Können
www.drweb.de
29
Kapitel 1
Gelernt ist gelernt
Woran man Amateure erkennt
Engagierte Mittelständler werden gern selbst aktiv. Zahlreiche
Web-Sites belegen deren Sachverstand und Liebe zum Detail. Aber
gute Absichten und die Notwendigkeit, Geld zu sparen, verkehren
sich ins Gegenteil, wenn ein Web-Auftritt als amateurhaft wahrgenommen wird. Das ist eine sichere Methode, um Kunden zu verlieren, statt neue zu gewinnen. Achten Sie auf diese Indikatoren:
Mittelachse
Ein übermäßiger Gebrauch des <center> Tags ist unvorteilhaft.
Wer den kompletten Seiteninhalt auf die Mittelachse schraubt,
pfeift auf Layout und Typografie ebenso, wie auf eine sorgfältige
Präsentation seiner Leistungen..
Billig-Typographie mit dem <center> Tag
Seitentitel
Unbeholfene Seitentitel, etwa "index.html" oder"frameset1", provozieren Ärger oder Gelächter. Schließlich gelangt man so auch in
Suchmaschinen und Bookmarklisten. Wichtiger Unterschied: Der
Dateiname ist hier nicht gemeint sondern das, was der Browser in
der Titelleiste anzeigt.
30
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Grafiken
Mit Frontpage automatisch generierte Alt-Tags wie "logo54.gif
(4635kb)" oder "gr_ballrot.jpg (23243kb)" sind ebenso peinlich wie
nutzlos. Alternativ-Text kann wichtige Informationen vermitteln;
er ist notwendig für alle, die Ihre Grafikanzeige abgeschaltet
haben und erscheint bevor die Grafik geladen ist.
Textauszeichnungen
Farbige, fette und laute Sätze konterkarieren die Botschaft. Für
UNSERE KUNDEN tun wir alles! Wir sind immer FÜR SIE DA!
Wer schreit, dem hört man nicht zu.
Scans
Ausgefranste Grafiken, schlechte Scans, verwaschene Logos,
Überschriften, die ohne Anti-Aliasing erstellt wurden, lassen eine
Website ungepflegt erscheinen. Passendes Argument: "Unser
Personal wäscht sich ja auch nicht."
Online-Shop mit Schmuddel-Logo und lausigen Buttons
Überflüssiges
Überflüssige Elemente und Animationen an den falschen Plätzen
ersetzen notwendige Inhalte und lenken den Blick auf
Unwesentliches.
www.drweb.de
31
Kapitel 1
Gelernt ist gelernt
Umlaute
Wer ohne Umlaute auskommt, verzichtet vielleicht auch auf andere Dinge.
Details
Schlampige Details, ein falsches Datum, Tippfehler im Titel, verrutschte Zeilen usw. werden auch unbewusst wahrgenommen und
wecken Erinnerungen an fehlerhafte Produkte und mangelhafte
Dienstleistungen. Fehlerhafte Seiten geben zu verstehen: "Auch
wenn wir etwas anderes behaupten, unsere Produkte taugen
nichts."
Abstände
Übergroße Abstände zwischen den Zeilen und zum oberen und
unteren Seiten-Ende wirken sperrig und abweisend.
Tabellengitter
Sichtbare Tabellengitter, da, wo man sie nicht braucht, demonstrieren die Begrenztheit eines Unternehmens und vermitteln den
drögen Charme eines Behördenformulars. Sie vermitteln
Botschaften wie diese: "Unser Design ist genauso begrenzt, wie
unser Verstand."
Adressen
Fehlende Kontaktadressen rücken eine Website in die Nähe privater Homepages und erschweren es Interessenten, Kontakt aufzunehmen. Wer sich hinter seinem Angebot verschanzt, verbirgt
etwas und muss sich nicht wundern, wenn er allein bleibt.
Fehlende Kontaktadressen signalisieren. "Wir wollen unter uns
bleiben. Schauen darfst du, aber erteile uns bitte keinen Auftrag
und stelle um Himmelswillen keine Fragen."
32
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Wenn
Werbeagenturen
WebDesign
machen
...
Die
Firmenadresse
kann
weder
gespeichert noch kopiert oder
sinnvoll ausgedruckt werden.
Von
den
Ladezeiten
der
Startgrafik (76k) gar nicht zu
reden.
AGB
Ängstliche Lieferbedingungen sagen: "Wir wollen nur Geld Leistung und Risiko mögen wir nicht."
Hitec
Flash-Animationen und 17"-Monitore als Voraussetzung bedeuten:
"Wir sind ein Hitec-Unternehmen und verkaufen nur an HitecKunden. Alle anderen interessieren uns nicht."
Fehlendes
Fehlende Elemente signalisieren: "Unsere Produkte liefern wir
auch nicht komplett. Irgend etwas fehlt immer."
Keine Preise, keine Ware.
Wozu dann der Shop?
www.drweb.de
33
Kapitel 1
Gelernt ist gelernt
Worüber sich Vielsurfer ärgern
8. Damit es im Netz Spaß macht
Früher haben wir gern Homepages besucht, nach dem Rechten
geschaut und Verbesserungsvorschläge gemacht. Über 1000 solcher Besuche haben ihre Spuren hinterlassen. Natürlich betrachtet man auch heute hier und da Homepages, aber das schränkt
sich schon aus zeitlichen Gründen ein. Nachfolgend einige unserer
Erfahrungen in Kurzform. Dinge, die vor allem den Vielsurfer
ärgern:
Standard-Design
Öde Langeweile stellt sich schnell ein: Ein Standard-Design hat
sich in vielen Köpfen festgesetzt. Linker Frame mit Java-Applet,
oberer Frame mit Willkommens-Schriftzug oder Logo, Hauptframe
mit dem Inhalt. Vor allem mit Frontpage entworfene Seiten gleichen sich schablonenhaft. Man trifft immer wieder auf die gleichen
Menüs: Home, News, Inhalt, Email, Chat, Gästebuch. Warum fällt
so vielen so wenig ein?
Animiertes Durcheinander
Es ist immer wieder das gleiche: Wenn animiert wird, dann heftig.
Eine einzelne Animation, geschickt als Blickfang platziert, findet
man selten. Die Norm ist ein Haufen blinkender, sich drehender
Images ohne Sinn und Nutzen.
HTML
Sind HTML-Kentnisse nicht mehr gefragt? Oder wie anders kann
man erklären, dass immer weniger Autoren ALT-Attribute benutzen?
Grafiken
Trotz preiswerter und immer besserer Grafiksoftware werden die
Grafiken im Web nicht unbedingt professioneller. Auch Text wird
immer häufiger in Grafiken umgewandelt. Ohne Anti-Aliasing bei
der Herstellung ist das Ergebnis dieser Methode eher dürftig.
34
www.drweb.de
Gelerrnt ist gelernt
Kapitel 1
Links schaffen Kontakte
Werbung
Vielsurfer werden von Werbung regelrecht erschlagen. Viele private Homepages bedienen sich gleich mehrerer Banner und anderer
Schildchen. Auch gewerbliche Sites lenken gänzlich ungeschickt
ihre Besucher in ungewollte Richtungen. Wenig beachteter
Nachteil der Bannermania: Sie bringt immer weniger ein.
Fazit: Mut und Kreativität werden kaum ausgelebt. Gerade private Autoren könnten mehr riskieren und so versuchen sich aus
dem Einerlei abzuheben.
9. Auf direktem Weg durch´s Netz
Wer denkt, er wüsste sowieso schon alles über Links, hat seine
Hausaufgaben vielleicht noch nicht gemacht. Was auf den ersten
Blick verwunderlich scheint, dass nämlich Text-Links häufiger
angeklickt werden, kann man beim genauerem Hinsehen durchschauen. Text-Links erscheinen sofort, während man auf Grafiken
warten muss. Besonders lange dauert das, wenn man Image-Maps
einsetzt.
Manchmal offenbart sich der Link erst beim drüberfahren mit der
Maus. Text-Links sind vertraut und unmittelbar als solche zu
identifizieren, während das bei grafischen Links, die in ganz
unterschiedlichen Formen auftreten, nicht immer so ist. Eine
Möglichkeit wäre es, überhaupt keine Text-Links einzusetzen.
Allerdings riskieren Sie damit - und das ist sicher jedem schon einmal passiert - dass bei langsamen Verbindungen oder während
Stauzeiten gar kein erkennbarer Link erscheint. Lange werden
Ihre Besucher nicht warten ...
Ganz und gar exotische Ansätze stellen Anfänger und
Gelegenheitssurfer vor unlösbare Probleme. Hier ist nämlich gar
kein Link erkennbar, die Statuszeile zusätzlich mit einem Ticker
belegt. Um weiterzukommen, müssen Sie eine Checkbox in einem
Frame aktivieren. Wahrscheinlicher ist, dass jemand auf den einzigen externen (grafischen) Link klickt, nämlich das Werbebanner.
www.drweb.de
35
Kapitel 1
Gelernt ist gelernt
Die Reihenfolge der Links ist ganz entscheidend für die
Seitenabrufe. Inhaltsverzeichnis und Portal werden häufiger
angeklickt. Wir steuern dagegen, indem wir jeweils am SeitenEnde noch einmal ausgewählte Links präsentieren. Wenn Sie
Grafiken einsetzen, können Sie allerdings kaum vorherbestimmen, welche Links zuerst erscheinen.
Text-Links müssen nicht langweilig aussehen. Ein gelungenes Beispiel ist Frederic
Körbers Streitpunkt
Beispiele und Ideen
Mit Text-Links hat das Web einmal angefangen. Hypertext ist Text
mit Links. Hier geht es um Zusammenhänge. Wenn Sie es
geschickt anfangen, können Sie den Besucher quasi an die Hand
nehmen, ihn überall dorthin führen, wo Sie ihn gern haben möchten. Trotzdem bleibt die Freiheit der Entscheidung gewahrt. Die
beste Art, einen Link zu präsentieren, ist mitten im Text. Sofern es
nicht zu viele Links gibt und die Farbe entsprechend gewählt ist,
sichert das die höchste Aufmerksamkeit.
Glauben Sie nicht, ein Besucher würde alle Seiten Ihrer Website
nach und nach absurfen. Mehr als drei bis fünf Seiten schafft er im
Durchschnitt nicht. Wenn Sie also eine ganz besonders wichtige
oder unbedingt zu lesenden Seite haben, dann stellen Sie den Link
an den Anfang der Seite. Nicht wenige Surfer speichern die Seiten
ab. Andere lassen sofort ihren Drucker arbeiten. Damit diese
Besucher auch später zurückfinden, haben wir allen Seiten die
URL vorangestellt.
36
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Schlechter Stil sind:
.. Grafik-Links, die nicht als solche zu erkennen sind
d.h. lediglich unterstrichener Text
.. Schein-Links,
Image-Maps, wenn es auch anders geht.
Bälle oder Zeichen vor dem Text.
.. Anklickbare
Zu viele Links im Text
Gar keine Links
Scheinlinks: Wer hier klickt, tappt ins Nichts.
Images, gerade wenn sie Links enthalten, müssen mit ALT-Tags
ausgezeichnet werden.
<img src="logo.gif" alt="Willkommen auf meiner Homepage">
On-Mouse-Over Befehle für die Statuszeile werden zwar schneller
ausgeführt, sind in diesem Falle aber überflüssig.
Zusätze wie "klick", "klick mich" oder "hier klicken" wirken bei
Grafiken oft Wunder. Alternativ können Sie Text und Grafik
mischen; so kombinieren Sie die Vorteile.
Hyperlinks sind traditionell blau, gesichtete Links erscheinen purpur. Wenn Sie das anders machen, bewegen Sie sich auf dünnem
Eis. Sorgen Sie wenigstens dafür, dass gesichtete Hyperlinks deutlich anders erscheinen, sonst nehmen Sie Ihren Gästen eine wichtige Orientierungshilfe.
www.drweb.de
37
Kapitel 1
Gelernt ist gelernt
Anfängerfehler sind vermeidbar
10. Niveau-Verlusten vorbeugen
Wen interessiert ein Netscape Button? Den gibt es millionenfach
und die Information, die er vermittelt, ist komplett nutzlos.
Schildchen wie "Netscape Now" oder "Internet Explorer" prangen
auf vielen Homepages und belästigen Besucher. Webworker überschätzen völlig das Interesse Ihrer Besucher in Sachen Software.
Missionarischer Eifer für Browser ist also fehl am Platze und hindert die Leute, sich mit den eigentlichen Absichten Ihrer Arbeit zu
befassen.
Wer zum ersten Mal eine eigene Homepage zusammenbaut,
kommt an Icons, Buttons und Bannern nicht vorbei. Aber: Eine
lieblos zusammengewürfelte Garnitur bunter Icons signalisiert
abgedroschene Meinungen und gibt zu verstehen, dass sich hier
jemand auskennen möchte, der es eigentlich gar nicht tut.
Abgedroschene Schildchen werden von Homepagebastlern wie
Orden präsentiert, die sich jeder gern an die Brust heftet. Man ist
dem Gedanken verfallen, dass ein wenig vom Ruhm der
"Schildermacher" auch auf einen selbst abfärbt. Vergessen Sie das.
Die Orden, die hier zur Schau getragen werden, sind
Karnevalstrophäen, die jeder haben kann. Wer Ansprüche vertritt,
kann sich das nicht leisten.
Natürlich können Sie statt eines simplen Links ein Icon benutzen
- wenn es angebracht ist. Wenn das Ihr Thema ist oder Sie auf eine
wichtige Aktion hinweisen möchten. Wer aber gedankenlos all das
aufreiht, was er auf anderen Seiten hat zusammenklauben können, lenkt vom Wesentlichen ab.
Das gilt auch für Buttons von anderen Anbietern. Machen Sie gern
kostenlos Werbung für andere? Gefällt es Ihnen, wenn Ihre
Besucher zu Ihrem Provider oder zur nächstbesten Suchmaschine
weiterklicken, weil Sie Ihnen die Gelegenheit dazu geben?
38
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Auf die Ausrichtung kommt es an
Hier werden viele Anfängerfehler auf einmal gemacht. Wer hatte nicht Lust über
eines der Banner weiterzusurfen?
11.Texte müssen überschaubar sein
Lange Texte am Bildschirm lesen, ist anstrengend. Besser geht es,
wenn Sie Ihr Layout konsequent auf Lesbarkeit und Abwechslung
abstellen. Das beginnt damit, den Text nicht über die gesamte
Bildschirmbreite laufen zu lassen, sondern in eine (unsichtbare)
Tabelle zu setzen, mit der sie eine gute Kontrolle über das Layout
haben. 400 Pixel sollten genügen; extrabreite Texte sind übrigens
nahezu unlesbar.
Ganze drei Schriften haben Web-Designer zur Auswahl:
Arial/Helvetica, Times und Courier. Mit ein wenig Phantasie
machen Sie das wieder wett. Lockern Sie auf! Indem Sie zum
Beispiel einen Einzug (8 Mal  ) platzieren oder den
Zeilenanfang betonen (Courier und Fett)
Gar nicht so leicht zu realisieren, aber sehr wirkungsvoll, ist ein
erhöhter Zeilenabstand (Durchschuss). Sie können das mit Style
Sheet-Tags machen (<p style = "line-height : 18pt">). Der
Nachteil dabei ist, dass nur neue Browser damit umgehen können.
Eine andere Möglichkeit wäre, ein sogenanntes Blind-GIF am
Ende jeder Zeile zu platzieren oder das jeweils letzte (Leer)Zeichen
einer Zeile mit font-size zu vergrößern
www.drweb.de
39
Kapitel 1
Gelernt ist gelernt
Auf die Ausrichtung kommt es an
Auch hängende Einzüge sind mit Tabellen möglich. Dabei wird der
gesamte Textblock gegen die Überschrift versetzt.
Es muss nicht immer <h3> sein. Es gibt viele Möglichkeiten, eine
Absatzüberschrift ohne Einsatz von Grafiken zu gestalten.
Interessant wirken unterschiedlich schattierte Flächen. Ein
Absatz schwarz, der darauf folgende dunkelgrau. Besonders wirkungsvoll ist das bei dunklen Hintergründen. Sie können mit verschiedenen Farben experimentieren.
Blocksatz erzeugen Sie mit <p align="justify">. Das sorgt für
Aufsehen, denn bisher musste man im Web darauf verzichten. Der
Nachteil: Es gibt keine automatische Silbentrennung und nur
Browser der vierten Generation beherrschen ihn.
Auch Spaltensatz ist im Web
möglich. Lange Spalten sind
aber unpraktisch, weil Leser
häufig rollen müssen. Breite
Spalten können im Block
gesetzt werden, schmale Spalten mangels Silbentrennung
hingegen nicht.
Blocksatz mit Einzug im Browser
40
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Viel Lärm um nichts?
12. Wer am lautesten schreit ...
Das ist Ihnen vielleicht auch schon einmal so ergangen: Bei so
mancher Surftour macht sich ein ungutes Gefühl breit. Das liegt
nicht unbedingt an abstürzenden Browsern und nicht funktionierendem Javascripts. Vielmehr ist es der Lärm, den immer mehr
Webmaster auf Ihren Seiten veranstalten und der keineswegs
immer akustischer Natur ist.
Wo früher ein schlichtes und freundliches "Willkommen" ausreichte, fliegen uns heute die Superlative um die Ohren. "Diese Seiten
sind die besten, ultimativsten und nützlichsten...". Den Beweis
bleibt man in der Regel erst einmal schuldig, weil vor lauter
Werbung kein Platz mehr für die annoncierten nützlichen Dinge
bleibt. Wenn alle reden, muss man schreien, um gehört zu werden.
Dieser Logik folgend, schließt mindestens jeder zweite Satz mit
einen Ausrufezeichen. Aggressive Grafik hat ebenfalls Eingang in
das vernebelte Repertoire moderner Web-Designer gefunden. Man
fühlt man sich mit Unbehagen an TopWare-CD's mit dem
Konterfei eines ebenso bekannten wie unbeliebten Anwalts erinnert. Da diese Sites uns "nur Gutes" wollen, darf eines nicht sein:
Man darf sie nicht übersehen. Deshalb ist es eine "prima Idee",
sowohl beim Empfang als auch beim Verlassen einer Site ein niedliches Extrafenster aufplopppen zu lassen, in dem "Highlights",
oder was man dafür hält, dem Besucher noch einmal eindrücklich
nähergebracht werden.
Spätestens jetzt wird Ihnen klar sein: Auch die am lautesten
schreienden Seiten können übersehen werden. Das sieht man am
besten am Banner- und Buttontausch. Ein Banner ist nicht genug,
wenn man auch sechs davon haben kann ... Eine Fülle von
Anbietern haben Ihre Netze ausgeworfen, so entkommt niemand,
denkt man. So ist es auch folgerichtig, dass die Sites der
Schreihälse, auf denen alles übertrieben wird, Programme wie
WebWasher oder Intermute erzwungen haben. Wer am lautesten
schreit, wird hoffentlich absichtlich übersehen!
www.drweb.de
41
Kapitel 1
Gelernt ist gelernt
Zahlenspielerei
13. Counter-Probleme
Ambitionierte Webmaster wollen wissen, wie viele Besucher ihre
Seiten sehen. Da kommen Counter gerade recht. So einfach die
Zählmaschinen sind, so wenig attraktiv wirken Nummern auf
Gäste. Denn:
. Viele Counter sind laut, zu groß und zu aufdringlich gestaltet.
Sie beeinträchtigen das Layout.
. Wird
Ihre Site nur von wenigen Menschen besucht, ist es
geschickter, das nicht unbedingt jedem zu zeigen. Das ist besonders dann nicht sehr klug, wenn Sie etwas verkaufen wollen.
. Wann
immer Sie Ihren Zählerstand ansehen, manipulieren Sie
Ihren Counter, weil Sie dann selbst ein Besucher sind.
. Externe Counter sind nicht selten überlastet und werden nicht
.
.
oder erst spät angezeigt. Die Folge ist, dass beim Zurückblättern
auf die Startseite der Ladevorgang von Neuem beginnt oder
generell verzögert wird.
Eleganter und unaufdringlicher sind kleine, schlichte Counter,
z.B. am unteren Seitenrand, ohne peinliche Feststellungen wie:
"Sie sind schon der 1107te Besucher auf unseren Seiten".
Nummern zieht man beim Arbeitsamt.
Externe Dienste bieten nicht nur "unsichtbare" Counter, sie liefern auch mehr Informationen. Moderne Zähler basieren auf
Javascript und verraten Details über die Bildschirmauflösung,
Browser, Herkunft der Besucher, Farbtiefe und mehr. Einige
Dienste sind kostenlos, andere verlangen eine Gegenleistung,
etwa Bannereinblendungen oder Bezahlung.
Der peinliche Riesen Counter verrät es: Hier ist nichts los.
42
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Wie man Feedback verhindert
14. Ins Gegenteil verkehrt
Wer gern wissen möchte, wie man Anforderungen und
Bestellungen um 75% verringern kann - auch dem können wir helfen: Vor einer Weile liefen auf Grund einer Gratis-Aktion unsere
Postkästen voll. Einstellen mochten wir die Sache nicht, weil wir
ein Versprechen gegeben hatten. Stattdessen haben wir versucht
herauszufinden, was man tun muss, um möglichst wenig(!)
Feedback zu bekommen.
. Das Feedback-Formular wurde von der Aktionsseite verbannt
und auf eine zweite Seite gelegt. Der eine Klick mehr bedeutete
mit einem Schlag eine Reduzierung der Teilnehmer um die
Hälfte.
Mehr Felder in das Formular hineinzunehmen, wirkt besonders
abschreckend; vor allem solche, die unbedingt ausgefüllt werden
müssen (Hinweis in Rot!).
Auch mehr Text schreckt ab. Anstatt zu sagen: "Hallo, hier ist
unsere Aktion", haben wir diese erst einmal ausführlich erklärt.
Ausführliche Regeln, Bedingungen und Ausnahmen zwingen
zum Viel-Lesen. Das wollen die meisten Besucher vermeiden
und verschwinden.
Die Aktion war nicht mehr über Link von jeder Seite aus erreichbar.
.
.
.
.
Alles in allen haben unseren Maßnahmen zu einer Abnahme der
Teilnehmer um etwa 75% geführt. Umgekehrt wir auch ein Schuh
daraus: Wer mehr Feedback will, weiß was er zu tun hat.
www.drweb.de
43
Kapitel 1
Gelernt ist gelernt
Wie in der Zeitung
15. Spaltensatz im Web-Design
Spaltensatz ist in Zeitungen und Zeitschriften längst zu einer
Selbstverständlichkeit geworden. Im Web-Publishing findet diese
Methode so gut wie keine Anwendung. Zwei Tatsachen sind es, die
vor allem dem Gebrauch im Web entgegenstehen.
Zum einen ist es die Notwendigkeit zum Blocksatz, denn
Flattersatz ohne Randausgleich wirkt unruhig und die Lesbarkeit
leidet darunter. Mittels align="justify" lässt sich Blocksatz zwar
auch im Web-Design erzwingen, doch HTML beherrscht keine
automatische Silbentrennung und auch bei kurzen Texten ist bei
diesbezüglichen manuellen Eingriffen Vorsicht geboten. Variiert
der Besucher über den Browser Schriftgröße und Font, findet man
die Trennstriche unter Umständen vielleicht deplatziert mitten im
Text wieder. Außerdem zwingen längere Spalten zum Scrollen. Der
Leser kann nicht visuell von einer Spalte zur anderen springen,
wie er es gewohnt ist. Darunter leidet die Orientierung und das
komplexe Erfassen des Textes.
Geht nicht, gibt´s aber bei uns nicht: Wir zeigen Ihnen, wie man es
realisiert, denn Spaltensatz ist möglich und manchmal auch sinnvoll. Da ein automatischer Zeilenumbruch, wie man ihn aus DTPProgrammen oder Textverarbeitungen kennt, im Web-Design
(noch) nicht möglich ist, muss ein wenig probiert werden, bis die
Spalten (beispielsweise zwei) annähernd gleichmäßig mit Text versehen sind. Sinnvoll ist es auch, die abschließende Spalte etwas
kürzer zu halten und den Text mit einer kleinen Grafik, dem
Datum oder einem Hinweis auf den Verfasser abzuschließen.
Damit der Browser auch bei unterschiedlicher Textmenge sämtliche Spalten in derselben Breite darstellt, werden Streben eingezogen. Das sind platzsparende transparente GIFs (Blindgifs). Legen
Sie beispielsweise eine äußere Tabelle mit 540 Pixeln Breite an.
Der Rahmen (Border) wird auf 1 gesetzt. Anschließend wird die
innere Tabelle einfügt, deren Breite 100 Prozent beträgt und je
zwei Spalten und Zeilen enthält.
Blind-GIFs sind allerdings nicht die einzige Methode. Die Arbeit
44
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Wie in der Zeitung
mit farbige Tabellenzellen und dem Spacer Tag, der nur von
Netscape Browsern interpretiert wird, löst das Problem auf elegantere Weise, denn hier passen sich die beiden äußeren schwarzen Linien der Textmenge an.
Im Beispiel oben paßt noch alles, das Problem zeigt sich in der
unteren Variante: Die fehlende Silbentrennung macht sich hier
unangenehm bemerkbar. Je schmaler die einzelnen Spalten sind,
desto mehr fällt es ins Gewicht.
Der Quellcode für das Beispiel: Die Variante wurde durch
Verdopplung in einer weiteren, zweispaltigen Tabelle erzielt.
<table width="75%" cellpadding=0 align="CENTER"
cellspacing="5"> <tr> <td width=1 bgcolor="black"> <spacer
type="block" width=1></td> <td> <p align="justify">Hier
erscheint Ihr Text.</p></td> <td width=1 bgcolor="black">
<spacer type="block" width=1></td></tr></table>
Anmerkung
Der Internet Explorer ab Version 5 interpretiert die "weiche
Trennung". Mit  lassen sich Trennstriche setzen, die nur bei
Bedarf verwendet werden. Einen praktischen Nutzen bietet das
aber leider (noch) nicht, da andere Browser die Trennstriche allesamt anzeigen.
www.drweb.de
45
Kapitel 1
Gelernt ist gelernt
Das In und Out im Web
16. Im Trend der Zeit
Die nachfolgenden Dinge sind overused und langweilig und sollten
auf Ihrer Site oder Homepage nur ausnahmsweise vorkommen:
Ein unauffälligeres Schild hatte man wohl gerade nicht zur Hand?
. Homepages mit Pop-Up-Werbung sind genau so cool, wie
Turnschuhe von Aldi.
.. Sich
drehende Weltkugeln, @'s oder springende Hündchen
Schriftart MS Comic Sans (zu auffällig und zu oft benutzt, um
originell zu sein)
.. Grafiken
aus dem Microsoft Frontpage-Paketen
Counter - Es geht anders
.. DHTML-Effekthascherei
Midi-Dateien als Background-Sound. Das ist erstens häufig ein
Verstoß gegen das Urheberrecht und zweitens eine Belästigung
der Besucher.
.. Under
Construction-Hinweise und -Schilder
.
.
Buttons wie "Netscape now" oder "MS Internet Explorer here".
Es sei denn, Sie sind Mitarbeiter dieser Firmen, Aktionär, werden für diese Werbung bezahlt oder sind Teilnehmer der
Firmenaktionen.
Hinweise wie "best viewed with 800*600". Das merken die Leute
selbst und Sie könnten Ihre Seiten für alle Monitore verträglich
machen
Regenbogenteiler (=Divider =Trennlinien)
46
www.drweb.de
Gerlernt ist gelernt
Kapitel 1
Das In und Out im Web
. Javascript-Ticker in der Statuszeile. Die wird nämlich für etwas
anderes gebraucht. Böse Zungen behaupten, Microsofts IE 4.0
hatte nur der Ticker wegen eine extrem kurze Statuszeile.
.. Ticker,
egal welcher Art, sind meistens fehl am Platze.
Javascriptfenster, die sich beim Verlassen einer Site öffnen.
.. Externer Java-Chat schon auf der Startseite.
. Gästebücher und Foren, in denen nichts passiert.
Hover-Schaltflächen als Java-Applet, eingeführt von MS
Frontpage 3.
Zugegeben, es macht eine Menge Spaß, all die Dinge auch benutzen zu können. Aber denken Sie auch an Ihre Gäste, die das überall sehen müssen.
Eine "IN-Liste" aufzustellen, ist schon schwieriger.
Trotzdem wagen wir den Versuch:
Die aktuelle In-Liste:
.. Unsichtbare Counter oder Statistiken
(Sitemaps)
.. Inhaltsverzeichnisse
CGI als Navigationshilfe (redirect)
Seitenversion für alle(!) Browser
.. Eine(!)
Selbst gestaltete Grafiken und Zeichnungen
Linklisten
.. Themenorientierte
Kurze URL's
Sheets
.. Style
URL und Email-Adresse auf jeder Seite
"noscripts" Tags, für alle, die Probleme mit Javascript und/
Frames haben.
.. oder
Was Besucher besonders "in" finden:
Ladezeiten
.. Schnelle
Übersicht
& Aktualität
.. Nutzen
Wenn eine Site gleich zur Sache kommt
.. Insiderwissen
Kostenloses
Originelles, Persönliches, Eigenes
www.drweb.de
47
Kapitel 1
Gelernt ist gelernt
Fragen an den Web-Designer
17. Trau, schau, wem Web-Design ist in aller Munde und alle können es angeblich. Wer
einen Web-Designer sucht, ist einer großen Anzahl von Anbietern
konfrontiert. Bleibt die Frage, welchem Anbieter denn zu trauen
ist. Schauen Sie sich deshalb gründlich seine Arbeiten im Web an
und prüfen Sie ihn anhand seiner Antworten auf die folgenden
Fragen:
Ist HTML eine Programmiersprache?
Nein. Es werden im ASCII-Format dargestellte Befehle abgearbeitet, die wie eine Beschreibung angelegt sind. Diese interpretieren
die Browser so, wie Sie es kennen. HTML ist damit lediglich eine
Seitenbeschreibungssprache und hat nichts mit Programmierung
zu tun. Programmierer sind im Fachjargon die "Knechte" der
Softwareentwickler.
Wenn ich HTML-Coding kaufe, kaufe ich dann gleichzeitig
professionelle Layouts?
Nicht unbedingt. Es kommt darauf an, wie viel Sie bezahlen. Wer
eine HTML-Seite für 25 DM anbietet, wird Ihnen sicher keine tollen Layouts entwerfen, denn das Entwerfen und Umsetzen von
Layouts mit HTML kostet Zeit und verlangt Erfahrung. Ansprechende Layouts sind mit einer auch weitreichenden Kenntnis
von HTML nicht garantiert. Im Unterschied zum Grafik-Designer
konzipiert der Web-Designer keine Layout-Entwürfe für den PrintBereich. Er setzt diese auch nicht primär in einem Layoutprogramm um. Vielmehr muss er von der abstrakten Ebene des
HTML zur konkreten Seitengestaltung auf dem Monitor einen
Weg finden. Das ist eine Spielart des Screen-Designs, die noch jung
ist und den mauserprobten jedoch nicht HTML-erfahrenen
Layouter in arge Schwierigkeiten bringt.
Lohnt es sich, Geld für die Konzipierung und Umsetzung
einer Benutzerführung zu investieren?
Ja. Sie sehen es ja selbst an vielen Websites: Bei der Aufbereitung
48
www.drweb.de
Gelernt ist gelernt
Kapitel 1
einer großen Menge Informationen ist oftmals eine alles andere als
sichere Führung des Besuchers zu beobachten. Vor der praktischen
Umsetzung sind Konzepte, Struktur-Diagramme für die
Organisation des Inhalts und visuelle Entwürfe zu erarbeiten.
Hier fängt professionelles Web-Design und die Arbeit an einer entsprechenden Website erst an. Je komplexer ein Webprojekt im
Zusammenhang mit Kundenerwartungen und der anzusprechenden Zielgruppe ist, desto umfangreicher und kostenintensiver ist
die konzeptionelle Vorarbeit. Sparen sollten Sie woanders. Aber
auch auf ein Konzept für die Gesamtausrichtung der Website sollten Sie nicht verzichten. Wer ins Blaue hinein werkelt, kann Ihnen
am Ende eine dicke Rechnung präsentieren, hat aber noch keine
erfolgreiche Website geschaffen. Das wiederum macht deutlich:
Wer keine Konzepte, keine Ideen verkaufen kann, verkauft auch
kein Web-Design, sondern lediglich HTML-Coding.
Allgemein bleibt festzuhalten: Erfolg ergibt sich nicht allein durch
eine professionelle Web-Promotion, sondern auch gleichwertig
durch ein stimmiges Konzept. Der Erfolg ist dadurch aber nicht in
allen Fällen garantiert.
Wie ist das mit den Bildern? Manche Dienstleister nehmen
pro Bild hohe Summen.
Kein Wunder: Bildoptimierung ist nicht gleich Bildkomprimierung. Durch hochwertige Tools ist die Komprimierung von
GIF- und JPG-Grafiken zwar ein Leichtes geworden. Die
Reduzierung der Datenmenge von Webgrafiken ist aber lediglich
der letzte Schritt der Bildoptimierung. Zuvor sind eine Vielzahl
von Schritten notwendig, da die Unterschiedlichkeit des grafischen Materials Feinarbeit erforderlich macht. Die sollte den
Qualitätsverlust von Fotos, Illustrationen, Logos, Zeichnungen
und grafischen Texten so gering wie möglich halten. Hierzu gehört
die Wahl angemessener Maße (Skalierung), die Bearbeitung von
Schärfe/Unschärfe, Kontrast, Tonwert und Farben. Zudem lohnt
sich oftmals eine Aufwertung des Bildes durch die Wahl eines
Ausschnitts und den Einsatz von Schatten, Rahmen und anderen
optischen Effekten und Filtern. Das kostet Zeit und damit Geld.
www.drweb.de
49
Kapitel 1
Gelernt ist gelernt
Was macht den guten Web-Designer denn nun aus?
Seine Kreativität, denn die Dienstleistung Web-Design ist
Kreation (Idee und Umsetzung). Neben Layout und Konzeptarbeit
gehört dazu auch Grafikerstellung für Menüs, Überschriften, EyeCatchern und Navigationselementen. Der Hinweis, über
Geschmack lässt sich nicht streiten, hat für den Web-Designer
keine Relevanz. Seine Aufgabe ist, grafische Interfaces zu entwerfen, mit denen sich seine Kunden identifizieren und die gleichzeitig die Besucher überzeugen und begeistern. Das ist nicht selten
eine Gratwanderung. Aber leider sind die Zeiten vorbei, in denen
mit Clipart, Standard-Buttons und der Copy-and-Paste-Technik
Web-Sites realisiert wurden, die man für ein paar Mark online
bestellen konnte.
Was ist denn die wichtigstes Voraussetzung, damit der
Web-Designer mich auch aus der Ferne betreuen kann.
Unverzichtbar für den professionellen Web-Designer ist
Netzkompetenz. Das gilt vor allem dann, wenn er Freiberufler ist.
Web-Design ist Kommunikation über und mit Hilfe des Internets
und gleichzeitig ein Balanceakt zwischen Anforderungen, die das
Internet stellt, und den Kundenerwartungen. Kritik an den Mann
und die Frau zu bringen, netzfremde Sichtweisen zu korrigieren
und gleichzeitig Ansprüche und Wünsche des Kunden unter einem
Hut zu bringen, das geht ohne Netzkompetenz ganz sicher schief.
Und wie verschaffe ich mir einen Eindruck davon, was ich
als Kunde von ihm erwarten darf?
Gehen Sie ins Netz! Hier können Sie Ihr Wissen nahezu täglich
bereichern. Neben Dr. Web gibt es auch noch andere Web-Sites, die
viele praktische Tricks und Tipps zum konzeptionellen WebDesign bieten. Dazu gehört unter anderem 7-Design. Einen
Einblick in us-amerikanische Ansprüche ermöglicht knallhart killersites.com vom Stardesigner David Siegel. Ergänzend für einen
Überblick zu den Anforderungen professionellen Web-Designs sei
darüber hinaus der hervorragende Yale Web Style Guide empfohlen. Alle vorgestellten Websites helfen Ihnen übrigens dabei, es
selbst einmal zu versuchen.
50
www.drweb.de
Gelernt ist gelernt
Kapitel 1
Noch Fragen...?
18. Wir haben die Antworten!
Wie lange ist ein Besucher bereit auf eine Webseite zu warten?
Die Antwort lässt sich nicht darauf reduzieren, ob viele Grafiken
eingesetzt werden oder die Seite umfangreich ist. Wenn der Surfer
weiß, was er bekommt, wartet er länger. Man muss es ihm nur vorher sagen oder er kennt die Site bereits. Gerade Flash schreckt
viele Leute ab, vorausgesetzt das Plug-in ist überhaupt vorhanden.
Acht Sekunden hat W&V angeblich festgestellt, dann muss alles
da sein, sonst verschwinden die Leute wieder. Das soll für ein
Drittel aller US-Surfer gelten. Im Zweifelsfalle gilt: Je schneller
desto besser. Eine gute Quelle zu diesem Thema ist Jacob Nielsen.
(www.useit.com)
Gibt es eine Möglichkeit, die Anzeige der Adresse im
Browserfenster zu unterdrücken.
Ja, man lässt das ganze in einem Frameset laufen, welchers bloß
aus einem einzigen Frame besteht. So haben es auch einige
Provider mit ihren "Shadow-Domains" gemacht. Die konnte man
dann mit Gratis-Webspace betreiben und keiner hat's gemerkt.
Das Frame zeigt immer die selbe URL an, egal, was darin aufgerufen wird. Das betrifft natürlich auch externe Seiten, aber die
kann man mit dem <target> Attribut aus dem Frame entfernen.
Bedenken Sie auch, dass Ihre Besucher keinen Bookmark und keinen Link mehr auf einzelne Seiten setzen können. Da man es nicht
erkennen kann, kann es zu Irritationen führen.
PDF - Braucht man das?
Das PDF (Portable Document Format), erfunden von Adobe, ist ein
plattformunabhängiges Format zum Austausch von Dateien, es
eignet sich vornehmlich für Druckseiten, Bücher, Prospekte und
ähnliches. Auch im Web ist PDF immer häufiger zu finden.
Dokumente werden unter wesentlicher Beibehaltung des Layouts
auf Knopfdruck konvertiert, da HTML vielen zu mühsam zu sein
scheint.
www.drweb.de
51
Kapitel 1
So werden Sie Web-Profi
Noch Fragen...?
Benötigt wird PDF vor allem in Druckereien, Werbeagenturen,
Layoutstudios usw. Das sind jene Firmen, die Adobe schon reich
genug gemacht haben und die dem kostenlosen HTML bzw. wenig
oder gar keine Ahnung haben. Das WWW ist deshalb erfolgreich,
weil die ihm zu Grunde liegende Beschreibungssprache HTML einfach und kostenlos ist, da braucht man kein Extra-Format, das von
einer Firma ausschließlich aus kommerziellen Erwägungen heraus kontrolliert wird.
Konvertieren hat in diesem Zusammenhang zwar durchaus seinen
Sinn und ist mitunter eine segensreiche Erfindung. Auf das Web
bezogen ist es aber etwas ganz anderes: Nämlich Web-Publishing
für Faule. Leidtragende sind die Websurfer, die sich mit 10 mal
längeren Ladezeiten herumschlagen müssen, Extrasoftware brauchen und mit einer ungewohnten Bedienung auseinandersetzen
müssen.
PDF funktioniert trotz des modernen Browsers (Navigator 4.7) und eines installiertem Plug-ins nicht immer.
52
www.drweb.de
So werden Sie Web-Profi
Kapitel 1
Zum Nachschauen im Netz
19. Links zum Thema
Cool Stats
http://www.cool-server.de/coolstats
Countermania
http://www.countermania.de
Webcounter
http://www.webcounter.goweb.de/
Fxweb
http://www.fxweb.com
Superstats
http://www.superstats.com/examples.html
Fastcounter
http://www.fastcounter.com
Statmarket
http://www.statmarket.com
7 Design
http://rare.de/seven/
David Siegel
http://killersites.com/
Yale Style Guide
http://info.med.yale.edu/caim/manual/contents.html
www.drweb.de
53
Kapitel 2
Tuning-Tipps für Ihre Web-Site
Kein Manta-Witz: HTML tiefer gelegt
1. Ding mit Pfiff: Tabellen
. Tabelle mit haarfeinen Rahmen und Schattenlinien
. Tabelle mit Schattenwurf
. Tabelle mit Hintergrundverlauf
. Wie man eine Tabelle benutzt, um eine HTML-Seite
einzurahmen.
. Hintergrundbilder in Netscape-Tabellen
. Geschickt gestrickt
2. Daten schnell erfasst: Formulare
. Formular-Buttons und Felder gestalten
. Submit-Buttons frei definieren
. Formularfelder und Buttons mit CSS Befehlen
verändern
. Formulare im neuen Gewand
. Perfekte Radiobutton im Navigator
3. Geliebt und gehasst: Frames
. Probleme mit Frames
. Feintuning für Frames
. Web-Sites einrahmen mit Frames
. Experimente mit Frames
54
www.drweb.de
Kapitel 2
4. Schöner mit Format:
Cascading Style Sheets (CSS)
. So setzen Sie CSS-Befehle richtig ein
. CSS Befehle in der Übersicht
. Tricks mit Style Sheets
. Font-Tags ausradieren
5. Delikatessen im Internet? Internet-Explorer-Spezialitäten
. Inline-Frames
. Laufschrift (Marquee)
. Transitions (Seitenübergänge)
. Auto-Complete
www.drweb.de
55
Kapitel 2
Ganz besonders WYSIWYG-Editoren wie Frontpage oder GoLive
gehen verschwenderisch mit Tags und Attributen um. Hier manuell einzugreifen, kann sich durchaus lohnen. Zu beachten ist allerdings, dass die genannten Editoren Ihre Änderungen zumindest
teilweise wieder rückgängig machen, wenn eine Seite erneut in das
Programm geladen und bearbeitet wird.
Die folgenden Elemente sind überflüssig und können in der Regel
entfernt werden:
target=""
Wo kein Sprungziel angegeben werden muss, braucht auch kein
"target" aufzutauchen.
align="left"
Die Ausrichtung nach links (linksbündig) ist ohnehin der Standard
für alle Elemente
color="#000000"
Schwarze Farbe für die Schrift. Dieses Attribut ist unnötig, wenn
derselbe Befehl bereits im Body Tag definiert wurde.
font size="3"
Die Standardgröße der Schrift braucht nicht extra definiert zu
werden. Nur wenn man davon abweichen möchte, ist das Attribut
sinnvoll.
font face="Times New Roman"
Diese oder eine vergleichbare Schrift wählt der Browser ohnehin,
wenn nichts definiert ist
align="top"
...und ähnliche Anweisungen in leeren oder wiederholten
Tabellenzellen sind ebenfalls unnötig. Wo sich kein Inhalt befindet, braucht er auch nicht ausgerichtet zu werden.
Tabellen
"Zerschneiden" Sie lange Tabellen, denn deren Inhalt wird erst
angezeigt, wenn die Tabelle komplett geladen wurde. Verzichten
Sie aus dem gleichen Grund auf mehrfach ineinander verschach56
www.drweb.de
Kapitel 2
telte Tabellen, sofern dies nicht vom Design verlangt wird.
Anweisungen für die Spaltenbreite (25% usw.) brauchen nur in der
ersten Zeile einer Tabelle aufzutauchen.
Ungenutzter Platz
Leerstellen, Einzüge und Zeilen-Zwischenräume verbrauchen
Platz. Leerzeichen können auch zu Problemen bei der Darstellung
führen, zum Beispiel wenn Bilder oder Tabellen nahtlos nebeneinander gestellt werden sollen.
oLive 4.0 geht verschwenderisch mit dem Platz um
Schriftart
Standard-Schriftart (default) und Standardgröße helfen beim
Platzsparen. Alles andere muss zusätzlich im Code untergebracht
werden. Solche Tags tauchen oft mehrere Dutzend Male auf.
Meta-Tags
Meta-Keywords und Meta-Description vertragen jeweils nicht
mehr als 250 Zeichen. Exotische Meta Tags sind nicht selten
unnötig.
www.drweb.de
57
Kapitel 2
Kommentare
Manche Web-Seiten bestehen zu einem Drittel aus Kommentaren.
Sie sind nützlich, wenn Teams gemeinsam an einem Template oder
Design arbeiten. Nicht wirklich benötigte Kommentare sollten Sie
ersatzlos streichen, das gilt insbesondere dann, wenn die Arbeit
abgeschlossen ist. Wozu müssen 500 mit einem Template erzeugte
Seiten die selben Kommentare enthalten? Die braucht man nur im
Original, respektive in der Sicherheitskopie.
Textauszeichnungen
Setzen Sie statt: <strong> für Fettschrift ein <b>
Setzen Sie statt <em> für Kursiv ein <i>
Base-Tags
Verwenden Sie Basis-Tags, wenn alle Hyperlinks auf dieselbe
externe Domain führen.
Adressierung
Nutzen Sie anstatt absoluter soweit wie möglich relative
Adressierungen (URL's). Das heißt, schreiben Sie:
<a href="link.htm">
anstelle von:
<a href="http://www.meinedomaine.de/link.htm”>
Farbige Hyperlinks
Farbdefinitionen für Hyperlinks sind unnötig. Diese werden im
Body-Tag oder via CSS einheitlich definiert. Es seid denn, verschiedenfarbige Verweise gehören zur Strategie. Damit allerdings
sollte man vorsichtig umgehen, denn man nimmt dem Surfer einen
Teil seiner Orientierung.
CSS und Javascript
Sich wiederholende Style-Anweisungen (CSS) und selbst
Javaskripte können in eigene Dateien ausgelagert werden. Das ist
auch für Suchmaschinen gut, die von dem Code-Wirrwarr gelegentlich irritiert werden.
58
www.drweb.de
Kapitel 2
Ding mit Pfiff: Tabellen
Erzwungene Leerzeichen
Verwenden Sie keine Anhäufungen von Leerzeichen (nbsp;), wenn
Sie diese nicht explizit benötigen. Als besonders gefährlich gilt in
diesem Zusammenhang der Editor Netscape Composer. Nutzen Sie
andere Möglichkeiten wie Tabellen, Blind-GIFs, Größenangaben in
Tabellenzellen oder Einzüge (Blockquote).
1. Ding mit Pfiff: Tabellen
Tabellen mit haarfeinen Rahmen
und Schattenlinien
Standard-Tabellen sehen langweilig und grob aus. Viel schicker ist
ein modernes Design mit Haarlinien. Das umzusetzen ist nicht
schwierig, aber doch mit Aufwand verbunden, weil es dazu einer
verschachtelten Tabellenkonstruktion bedarf. Auch ein Blind-GIF
ist ebenfalls mit von der Partie.
Standard Haarrahmen Schattenlinie
Wie wird das gemacht?
1. Schritt
Legen Sie eine 3*3 Tabelle an.
2. Schritt
Führen Sie die 3 Zellen oben und die 3 Zellen unten jeweils mit
Colspan="3" zusammen.
3. Schritt
Legen Sie die Farben für den Tabellenrahmen und eventuell den
später sichtbaren Tabellenteil (hier hellgrau) fest.
4. Schritt
Damit der Trick funktionieren kann, muss die innere Zelle, die den
Inhalt aufnimmt, die äußeren Zellen soweit auseinander drücken,
dass nur eine dünne Linie übrigbleibt. Leere Tabellenzellen werwww.drweb.de
59
Kapitel 2
Tuning Tipps für Ihre Web-Site
den dabei nicht angezeigt, solche, die einen Platzhalter enthalten,
sind zu breit. Hilfe kommt von dem bereits genannten Blind-GIF eine transparente Grafik in den Maßen 1*1 Pixel. Platzieren Sie
diese an den mit einem Kreuz markierten Stellen.
Um eine Schattenlinie zu erzeugen, genügt es, die obere und die
linke Spalte komplett zu löschen. Im Zusammenspiel mit
Tabellenhintergründen und Rahmenfarben ergeben sich viele
Möglichkeiten. Diese Rahmenfarben werden übrigens auch vom
Netscape Browser angezeigt.
Tipp:
Damit der Text nicht zu dicht an den Rand gedrückt wird, empfiehlt es sich, eine weitere Tabelle einzufügen. Setzen Sie "width"
auf 100% und "cellpadding" auf einen Wert nach Ihrem
Geschmack.
Der Quellcode:
<tr><td bgcolor=#868686 colspan=3>
<img width="1" height="1" src="images/2.gif">
</td></tr><tr><td bgcolor=#868686>
</td><td width=100% bgcolor="#E6E6E6" valign=TOP>
<table border="0" width="100%" cellspacing="0" cellpadding="4">
<tr><td> </td></tr></table></td><td bgcolor=#868686>
</td></tr><tr> <td bgcolor=#868686 colspan=3>
</td></tr> <tr><td bgcolor=#ffffff colspan=3>
</td></tr></table>
Sofern nicht mehrere Zeilen oder Spalten definiert werden müssen, geht es noch einfacher:
60
www.drweb.de
Kapitel 2
Hierzu werden einfach zwei Tabellen mit verschiedenen Hintergrundfarben ineinander verschachtelt. Schwierig wird das, wenn
der Editor nicht mitspielt, weil er leere Tabellen-Zellen nicht
akzeptiert. Ausprobieren!
<table cellpadding=0 cellspacing=0 border=0
bgcolor=#868686><tr><td>
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tr bgcolor="#E6E6E6"><td>Hallo</td></tr></table>
</td></tr></table>
3D-Tabellen mit Schattenwurf
Tabellen bieten viele Variationsmöglichkeiten. In Kombination mit
einer kleinen Grafik lassen sich sogar Schatteneffekte erzielen.
Auch interessante Überschriften lassen sich auf diese Weise
erzeugen:
Wie wird das gemacht?
1. Schritt
Legen Sie eine 1*2 Tabelle an. Setzen Sie "width" auf einen beliebigen Wert. Im obigen Beispiel sind es 440 Pixel, Sie können aber
auch einen Prozentwert vergeben. Setzen Sie "border", "cellpadding" und "cellspacing" jeweils auf Null.
2. Schritt
Definieren Sie für die obere Zelle eine Hintergrundfarbe, da ansonsten der Effekt nicht wirkt.
<td bgcolor="#D6D6D6">
www.drweb.de
61
Kapitel 2
3. Schritt
Kopieren Sie die Schattengrafik aus dem Beispiel und fügen Sie
diese in die untere Tabellenzelle ein. Teilen Sie ihr den gleichen
Wert zu, wie der Tabelle selbst, also width="440" oder ähnlich.
4. Schritt
Da "cellpadding" und "cellspacing" hier nicht verwendet werden
dürfen, liegt der Text zu dicht am Tabellenrand. Sie können das
durch Einfügen einer weiteren Tabelle (ca. 94% und zentriert)
kompensieren.
Das war's: Die Schattengrafik passt sich flexibel der jeweiligen
Tabellenbreite an.
Tipp:
Auf die gleiche Weise können Sie auch nachträglich Grafiken mit
Rahmen versehen. Das ist zum Beispiel dann nützlich, wenn
Ihnen ein Kunde ein JPG-Bild in die Hand gibt, das nachträglich
nicht bearbeitet werden kann.
Der Quellcode:
<table border="0" width="440" cellspacing="0" cellpad
ding="0"><tr><td bgcolor="#D6D6D6"><table border="0"
width="94%" align="CENTER" cellspacing="0"
cellpadding="0"><tr><td>Tabellen bieten viele
Variationsmöglichkeiten, in Kombination mit einer kleinen
Grafik lassen sich sogar Schatteneffekte erzielen.</td></tr>
</table></td></tr><tr><td><img src="images/schatten.gif"
width=440 height=6></td></tr></table>
Tabelle mit Hintergrundverlauf
Auch das ist mit der passenden Grafik kein Problem. Unser
Beispiel ist auch für sehr breite Tabellen noch groß genug. Ein
Tabellenrahmen ist in diesem Fall aus optischen Gründen notwendig. In Kombination mit weiteren Grafiken oder farbigen
Tabellenzellen ergeben sich interessante Variationen. Schließlich
muss nicht immer alles grau sein.
62
www.drweb.de
Kapitel 2
Da nicht alle Browser einen Tabellen Background anzeigen können, setzen Sie zusätzlich <bgcolor="#F4F4F4"> für ein leichtes
Grau, wie in diesem Fall, oder eine andere passende Farbe.
Quellcode:
<table border="1" background="images/tabhin.gif" align="CENTER"
cellspacing="0" cellpadding="4" bgcolor="#F4F4F4"
width="400">
<tr><td>Tabelleninhalt</td></tr>
</table>
Wie man eine Tabelle benutzt, um eine HTMLSeite einzurahmen.
Der Tabellenrahmen besteht aus drei ineinander verschachtelten
Tabellen. Die äußere enthält nichts, der Hintergrund wurde auf
schwarz gesetzt; die mittlere enthält ebenfalls nichts, ihr
Hintergrund ist rot. Erst die innere Tabelle trägt den eigentlichen
Seiteninhalt. Hier könnte eine weitere Tabelle Platz finden oder
Spalten bzw. Zeilen, die ein perfektes Layout ermöglichen. Die
Farben sowie die Breite der Rahmen sind frei wählbar. Die
Konstruktion eignet sich besonders gut für PopUp-Fenster. Der
Rahmen passt sich zwar an das jeweilige Browserfenster an, der
Effekt verliert jedoch seine Wirkung, wenn das Fenster zu groß
wird.
www.drweb.de
63
Kapitel 2
Quellcode (bitte achten Sie auf die "Margin" Befehle):
<HTML><HEAD><TITLE>Rahmen mit Tabellen</TITLE></HEAD>
<BODY BGCOLOR="#000000" MARGINHEIGHT=0 MARGINWIDTH=0
TOPMARGIN=0 LEFTMARGIN=0>
<table border=0 cellpadding=5 cellspacing=0 height="100%"
width="100%" bgcolor="#000000" align="CENTER"><tr><td>
width="100%" bgcolor="red"><tr><td>
width="100%" bgcolor="#FFFFFF"><tr><td width=8>
<h2>Inhalt</h2>
</td></tr></table></td></tr></table></td></tr></table>
</BODY></HTML>
64
www.drweb.de
Kapitel 2
Hintergrundbilder in Netscape-Tabellen
Der gute alte Netscape Browser ist in die Jahre gekommen und
wirft ein um das andere Mal die Bemühungen der Designer durcheinander. Zwar ist das Programm in der Lage, ein Hintergrundbild
in einer Tabelle anzuzeigen, doch wenn sich die Tabelle über mehrere Spalten oder Zeilen erstreckt, gibt es eine böse Überraschung.
Netscape zeigt sich eigenwillig und stellt den Hintergrund in jeder
Zelle gesondert dar.
Das Ergebnis ist eine Katastrophe:
Quellcode des Beispiels:
<table border="1" height="200" background="grafik.jpg"
width="200"><tr>
<td> </td>
<td> </td>
</tr> <tr>
<td> </td>
<td> </td>
</tr></table>
Wer nun glaubt, er könne das Problem mit einer verschachtelten
Tabellenkonstruktion umgehen, der irrt. Die Verschachtelung ist
zwar notwendig, reicht aber noch nicht aus. Es bedarf eines BlindGIFs, um die Sache aufzulösen. Ungewöhnlich zwar, aber es funktioniert.
So gehen Sie vor:
Definieren Sie eine fixe Tabelle. In unserem Beispiel 200*200
Pixel, die den Maßen des Hintergrundbildes entsprechen sollte.
Definieren Sie dort das Hintergrundbild mit
background="images/grafik1.jpg"
www.drweb.de
65
Kapitel 2
Setzen Sie in diese Tabelle die eigentliche Inhaltstabelle mit denselben Maßen. Nun setzen Sie zu jeden <td> den Zusatz
background="images/blind.gif"
Das Blind-GIF muss ein transparentes GIF-Image sein, seine
Maße spielen keine Rolle. Pfade und Namen müssen natürlich
angepasst werden.
Der Quellcode für das Beispiel:
<table width="200" border="1" cellspacing="0" cellpadding="0"
height="200" background="images/grafik1.jpg">
<tr><td>
<table border="1" height="200" width="200" cellpadding="0"
cellspacing="0">
<tr><td background="images/blind.gif"> </td> <td
background="images/blind.gif"> </td></tr><tr><td
background="images/blind.gif"> </td><td background="
images/blind.gif"> </td></tr>
</table></td></tr> </table>
Ein alternativer Lösungsansatz besteht darin, den Background via
CSS zu definieren. Das funktioniert so auch mit Opera.
Geschickt gestrickt
Mit Tabellen lässt sich so manches Kunststück zaubern. Wenn es
darum geht, Inhalte übersichtlich und optisch ansprechend darzustellen, finden Sie in dem HTML 4.0-Attribut "Rules" den richtigen
Partner. Es erlaubt ihnen das Anzeigen von Linien zwischen
Reihen, Spalten und Gruppen, und zwar innerhalb einer Tabelle.
Im folgenden Beispiel wird eine Tabelle mit dem Attribut Rules
=groups definiert, deren Code sich wie folgt darstellt:
66
www.drweb.de
Kapitel 2
Table width=100% Rules=groups
border=2 bgcolor="#FFFF00"
bordercolor="#FF0000" align=Left valign=Top
cellpadding=6 cellspacing=6
Die Tabelle wurde in drei Gruppen aufgeteilt: Einem Kopf=
THEAD, dem Tabellenkörper= TBODY und dem Fuß= TFOOT.
Damit wird erreicht, dass zwischen den einzelnen Gruppen Linien
platzieren werden können. Beachten Sie, dass jede Tabellengruppe
mindestens eine Tabellenzeile (TR) enthalten muss. Nun können
Sie jede einzelne Datenzelle nach Ihren Vorstellungen definieren.
So können Sie - wie in unserem Beispiel - den TBODY mit CENTER zentrieren, den TFOOT rechtsbündig ausrichten oder die
Hintergrundfarbe Ihren Wünschen anpassen. Leider entwickeln
sowohl der Navigator als auch der IE 5.0 hier eine gewisse
Eigendynamik.
www.drweb.de
67
Kapitel 2
Für Ihre Notizen
68
www.drweb.de
Kapitel 2
Daten schnell erfasst: Formulare
2. Daten schnell erfasst: Formulare
Feedback- oder Bestellformulare gehören zum täglich Brot im
Web. Was an sich langweilig erscheint, bietet zahlreiche
Gestaltungsmöglichkeiten. Damit ein Formular nicht unübersichtlich wirkt, gruppieren Sie seine Elemente in logischen
Zusammenhängen. Auch Farben verbessern die Übersicht, wenngleich farbige Tabellenfelder nicht von jedem, aber von den meisten Browsern dargestellt werden können. Sogar Images und
Buttons können in Formulare eingebaut werden - zusätzlich stehen fast alle Möglichkeiten der Textformatierung zur Verfügung.
Allgemeine Tipps:
Mailto-Formulare sollte man nicht mehr einsetzen. Sie können
nicht von allen Browsern verarbeitet werden (z.B. Internet
Explorer 3.0). Das gilt auch für externe Mail-Clients und Sie erhalten eine schwer lesbare Ausgabe und haben Problem mit eingegebenen Umlauten. Wenn Sie kein eigenes CGI-Verzeichnis zur
Verfügung haben, können Sie auf externe Anbieter zurückgreifen.
Achten Sie auf eine ausreichende Länge der Eingabefelder. EmailAdressen können erstaunlich lang sein.
SIZE="20" MAXLENGTH="40".
Damit können in das nur 20 Zeichen breite Feld bis zu 40 Zeichen
eingegeben werden.
Der Formularcode:
<form action="mailto:[email protected]" method=post
enctype="text/plain">
Eingabefelder etc.
</form>
<form action="/cgi-local/formmail.pl" method=post>
Eingabefelder etc.
</form>
www.drweb.de
69
Kapitel 2
Formular-Buttons und Felder gestalten
Beschriftung ändern
Die Aufschrift des Submit-Buttons ändern Sie so:
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Ihr Text">
Alternativ-Text für Eingabefelder - auch das ist mit TITLE="Ihr
kein Problem, funktioniert aber nur mit Internet
Explorer ab 4.0 und Opera ab 3.0
Hinweis"
Submit-Button in Formularen auswechseln
Niemand ist auf gestalterisches Einheitsgrau angewiesen. Mit ein
wenig Phantasie und den richtigen Codes passen auch Formulare
in ein schickes Seitenlayout. Formular-Buttons müssen keine
grauen Kästen (Windows) oder oval (Mac) sein. Es lassen sich auch
ganz gewöhnliche Grafiken einsetzen. Allerdings sollte man darauf
achten, den Button so zu gestalten, dass seine Funktion auf
Anhieb erkannt werden kann.
Üblicherweise sieht er so aus:
und so wechseln Sie ihn durch Ihre eigene Grafik aus:
<input type="image"
name="click" src="images/submit.gif" alt="abschicken"
align="bottom" border="0" width="79" height="19">
Mit Javascript haben Sie zumindest theoretisch die Möglichkeit
auch den Reset-Button auszuwechseln. Ebenso können Sie eine
Laufschrift direkt in den Button einfügen. Da diese Methoden aber
nicht mit allen Browsern und nicht stabil funktionieren, raten wir
davon ab.
Einheitliche Breite der Buttons:
Mehrere Buttons untereinander können recht hässlich wirken, da
70
www.drweb.de
Kapitel 2
sich die Breite der Buttons der Beschriftung anpasst. Doch auch
hier lässt sich geschickt gegensteuern.
<INPUT TYPE="Submit" style="WIDTH:140" width="140" NAME="submit" VALUE="abschicken">
wird vom Internet Explorer interpretiert, "width" vom NS
Communicator.
"style"
Alternativ lassen sich folgende Methoden verwenden:
.. Buttons nebeneinander setzen - dann fällt es nicht auf
Buttons
. Grafische
Maskierte Leerzeichen (nbsp;)
Tipp:
Auf den Reset-Button kann man nicht nur verzichten, man tut
auch gut daran. Eilige Surfer (und wer hat es nicht eilig) verwechseln die gleich aussehenden Schaltknöpfe leicht. Wer umfangreiche Eingaben wiederholen muss, ist wenig darüber erfreut.
So können Sie Formularfelder und Buttons mit
CSS-Befehlen verändern
Mit CSS haben Sie weitreichende Möglichkeiten, um
Formularfelder und Buttons zu verändern, sofern der Browser die
Tags interpretieren kann. Breite, Höhe und Rahmenfarbe lassen
sich manipulieren, sogar der vom Besucher eingegebene Text kann
verändert werden und auch farbig erscheinen.
Dieses Mini-Formular erlaubt mittels Style Sheets farbige
Texteingaben. Die CSS-Befehlskette bezieht sich auf ein externes
Style Sheet.
{border-color : #0099CC ; font-weight : bold; color : red;
background: #F5F5F5; }
www.drweb.de
71
Kapitel 2
Tabelle ohne sichtbare Input-Felder
Besonders schicke Tabellen erhalten Sie, wenn Sie die Ränder
(Borders) der Input-Felder bis auf die Grundlinie abschalten. Das
geschieht, indem man die Maße der Borders auf Null setzt.
Zusätzlich wird die Farbe des Hintergrundes auf die der umgebenden Tabelle gesetzt. Der Besucher kann dieses Formular in
gewohnter Weise ausfüllen. Aktiv sind die Tags aber nur im IE5.0
<input name=ort style="BACKGROUND-color: #CCE3DE; BORDERBOTTOM: #666666 1px solid; BORDER-LEFT: #666666 0px; BORDERRIGHT: #666666 0px solid; BORDER-TOP: #666666 0px solid;
COLOR: #333333">
Formulare im neuen Gewand
Der HTML 4.0-Standard hat eine Reihe von neuen Tags und
Attributen gebracht. Dazu zählen unter anderem die Elemente
<Fieldset> und <Legend>, die sich gut dazu eignen, Formulare aufzuwerten. Ein entsprechender Browser, derzeit nur der IE 5.0 oder
höher, ist zur Anzeige allerdings nötig.
Mit <Fieldset style width=430> lässt sich ein Rahmen um ein
Formular definieren. Das ist zwar mit gewöhnlichen
Tabellenrahmen auch möglich, doch der Zusatz "style" gibt uns
weitere Gestaltungsmöglichkeiten an die Hand. So lassen sich zum
Beispiel Rahmen und Abstände exakt definieren.
<FIELDSET style="BORDER-BOTTOM-COLOR: #ff0000; BORDER-LEFTCOLOR: #ff0000; BORDER-RIGHT-COLOR: #ff0000; BORDER-TOP-COLOR:
#ff0000; PADDING-BOTTOM: 15px; PADDING-LEFT: 15px; PADDINGRIGHT: 15px; PADDING-TOP: 15px; WIDTH: 300px">
72
www.drweb.de
Kapitel 2
Geliebt und gehasst: Frames
So richtig schön werden Formulare erst mit dem <Legend> Tag, der
hier die Überschrift ausspart.
<legend align=left style="COLOR: #000080"><b>Dies ist ein
Beispiel Formular</b></legend>
Mit dem Attribut "align" wird ausgerichtet. Font, Farbe, Rahmen
usw. können wie üblich frei bestimmt werden. Nach jeder
<Fieldset> Definition muss ein End-Tag folgen. Beim <Legend> Tag
ist dies nicht zwingend erforderlich.
Diese beiden Tag dienen in erster Linie nicht der Verschönerung,
sondern bieten auch einen handfesten Nutzen. Es wird die Absicht
verfolgt, zum Beispiel blinde Besucher, die sich durch gesprochene
Befehle von "Feld" zu "Feld" zu bewegen, zu unterstützen. Dies
allerdings setzt einen sprechenden Browser voraus.
Perfekte Radiobuttons im Navigator
Ein typisches Problem stellt sich mit Radiobuttons innerhalb von
Formularen, auch hier spielt der Navigator nicht mit. Ein Blick
auf den Screenshots eines bekannten Buchhändlers offenbart die
ganze Hässlichkeit. Als Hintergrund für den Button dient immer
die Hintergrundfarbe der Seite, leider nicht die der Tabelle.
Unsaubere Radiobuttons bei amazon.de (Netscape Ansicht)
Umgehen lässt sich der Effekt mit einem Style Sheet-Tag. Der
allerdings wird nicht von den Browsern der 3. Generation interpretiert, während noch ältere Browser keine Probleme haben. Sie
stellen nämlich auch keine farbigen Tabellenzellen dar.
<input type="radio" style="background-color:black" name="x"
value="radiobutton">
www.drweb.de
73
Kapitel 2
Alternativ lässt sich der Code auch für eine ganze HTML-Seite
definieren:
<style type="text/css">
input { background-color:farbe der Tabelle }
</style>
Und so sähe das Ergebnis dann im Netscape Navigator 4 aus, hätten AmazonsDesigner den Trick gekannt:
74
www.drweb.de
Kapitel 2
3. Geliebt und gehasst: Frames
Ein Browser ist in der Lage, mehrere HTML-Seiten gleichzeitig
anzuzeigen. Dazu wird das Browserfenster in mehrere Teile
geteilt. Diese Teile werden als Frames (=Rahmen) bezeichnet. Die
einzelnen Seite sind ganz normale HTML-Seiten und völlig unabhängig voneinander, sie können beliebige Inhalte enthalten.
Beinahe die Hälfte aller Web-Sites wird mit Frames gestaltet.
Doch was dem einen als Selbstverständlichkeit erscheint, stößt
andere nur ab. Deshalb gibt ebenso einen Club der "Framehasser"
und Antiframe-Logos, wie es vehemente Verfechter der Frames
gibt. Es kommt eben auf den Standpunkt an: Standard-Frames
sind langweilig, während man auf der anderen Seite mit Frames
faszinierende Experimente machen kann.
Frames um ihrer selbst willen, sind purer Unsinn. Sie müssen niemandem beweisen, dass Sie ein Frameset codieren können. Das
kann mit der richtigen Anleitung jeder. Sie können Frames als
Gestaltungsmittel einsetzen, sofern die Bedienbarkeit nicht darunter leidet. Frames können die Übersicht verbessern - Buttons
und Links brauchen nicht auf jeder einzelnen Seite erscheinen und
man hat sie immer im Blick. Riesige Linksammlungen oder
Demonstrationen können auf diese Weise geschickt aufbereitet
werden. Wer denkt, Frames würden eine Menge Arbeit sparen,
weil bei Veränderungen nur einmal aktualisiert werden muss,
liegt falsch. Es gibt bessere Methoden. Beispielsweise die Arbeit
mit Templates, SSI oder Datenbanken.
Seine volle Pracht entfaltet ein Frameset erst dadurch, dass jedes
Fenster von jedem anderen aus angesprungen werden kann Dazu
werden innerhalb eines Hyperlinks sogenannte targets (= Ziele)
angegeben. Die beliebteste Form ist eine Menüleiste an der linken
Seite. Klickt man einen der Links an, wird die neue Seite nicht
etwas in dem schmalen Menüfenster geöffnet, sondern im viel
größeren Hauptfenster. Die Sache mit dem Menü hat ein handfesten praktischen Vorteil. Ändert man etwas am Menü, muss man
nur hier Hand anlegen, alle anderen - egal wie viele es sind - brauchen nicht verändert zu werden.
www.drweb.de
75
Kapitel 2
Eine grundsätzliche Anwendung dieser Technik ist jedoch nicht
unbedingt zu empfehlen. Das Web ist ohnehin angefüllt mit teils
sehr hässlichen Frame-Konstruktionen, die man sich und den
Surfern besser erspart hätte.
Dieses Frame ist misslungen. Der obere Rahmen ist viel zu groß.
Probleme mit Frames
Zuerst einmal sollte man sich als Web-Designer darüber im Klaren
sein, dass nicht alle Internetsurfer so virtuos und versiert mit dem
Browser umgehen können wie man selbst. So mancher steht vor
Rätseln und weiß möglicherweise nicht einmal die rechte
Maustaste zu gebrauchen (sofern vorhanden). Erschwerend
kommt hinzu, dass nicht wenige Framesets unzureichend oder
falsch aufgebaut sind.
Zum Beispiel:
.. Frame-Design für einen 17" Monitor - Rollbalken abgeschaltet.
Externe Links (mit möglicherweise weiteren Frames) öffnen sich
eines Frames.
. Zuinnerhalb
viele Frames mit verschiedenen Inhalten - drei sollten in den
meisten Fällen genügen
. Beim
Start leere Frames (Der Besucher soll erst wählen, aber er
wird eher an einen Fehler glauben)
76
www.drweb.de
Kapitel 2
Platz verschenkt - Besucher irritiert: Der nicht funktionierende Counter (mit
Frontpage realisiert) spricht die gleiche Sprache.
. Interne Links, die sich in einem neuen Browserfenster öffnen.
Dann ist nämlich das ganze Frameset überflüssig.
. Links
im (meist) linken Frame und zusätzlich im Hauptframe das ist verwirrend.
.. Winzige Frames, in denen man nichts mehr erkennen kann.
. Verschiedene Framesets auf einer Site.
Frames werden zum Seitenklau eingesetzt, indem man ein einzelnes Frame einer fremden Site in einem Rahmen der eigenen
Site laufen lässt. Das Fremdlogo taucht dann gar nicht mehr
auf. Und die Links der Fremdsite bleiben ebenfalls draußen.
So kann eine schöne Site durch Frames zerstört werden: Die Rahmen passen von
Design her nicht zueinander, der eingeschränkte Platz im linken Frame zwingt
viele Besucher zum scrollen.
www.drweb.de
77
Kapitel 2
.
. Tastaturbefehle wie etwa das Scrollen funktionieren nicht wie
Frames schränken den ohnehin knappen Platz auf dem Monitor noch
weiter ein.
gewohnt, denn das jeweilige Frame muss erst durch einen
Mausklick aktiviert werden.
. Bookmarks können nicht auf einzelne Seiten gesetzt werden.
. Suchmaschinen haben mehr oder weniger große Probleme mit
Frames. Man bringt sich selbst um seine Vorteile, denn Frames
kosten Besucher.
. Es wird nur der Titel des Framesets angezeigt, nicht die Titel der
einzelnen Seiten.
. Links auf Frame-Seiten sind ein Problem: Möchte zum Beispiel
jemand auf unsere Trickkiste verweisen, gibt er einfach die ent
sprechende URL an. Würde Dr. Web ein Frameset verwenden,
müsste man auf die Indexseite linken. Die empfohlene Seite
muss der Besucher dann selbst suchen.
. Nicht alle Browser können Frames anzeigen, wohl aber die aller
meisten. Aber je nach Browser gibt es Probleme beim
Ausdrucken oder Abspeichern einzelner Seiten.
Von Vorteil können Frames sein, wenn Sie Werbung treiben wollen. Schließlich muss jeder auf das Frameset zugreifen, während
sich auf anderen Sites die Besucher auf eine große Zahl von Seiten
verteilen. Auch den Auftraggeber freut es, denn so prangt seine
Anzeige selbst beim Scrollen ständig im Blickfeld potentieller
Kunden.
Feintuning für Frames
Wenn ungewollte Linien die Frame-Konstruktion verunstalten,
lässt sich leicht Abhilfe schaffen. Da sowohl Netscape als auch der
Internet Explorer die Dinge "etwas anderes" sehen, sind sowohl die
Attribute "BORDER" als auch "FRAMEBORDER" notwendig..
78
www.drweb.de
Kapitel 2
<FRAMESET ROWS = "10%,90%" BORDER="0" FRAMESPACING="0"
FRAMEBORDER="NO">
<FRAME SRC="seite1.htm" NAME="leiste" resize>
<FRAME SRC="seite2.htm" NAME="haupt" scrolling="no">
</FRAMESET>
Damit sich externe Links nicht im Framefenster öffnen und sich so
immer weiter verschachteln, sollte die Syntax wie folgt aussehen:
<a href="http://www.neuesite.com/index.html" target="_top">
Die Attribute "resize" beziehungsweise "noresize" verhindern,
dass ein Besucher einzelne Frames mit der Maus verschieben
kann.
lässt den Scrollbalken in jedem Fall verschwinden.
Dieser Befehle sollte mit Bedacht eingesetzt werden, da eine Site
möglicherweise für Besitzer kleinerer Monitore unnavigierbar
wird.
scrolling="no"
Probleme im Navigator?
Böse Überraschungen kann erleben, wer mit zerschnittenen
Grafiken über Frame-Grenzen hinweg arbeitet oder Grafiken
direkt an die Ränder eines Frames legen muss. Hier spielt der
Navigator wieder einmal nicht mit und verdirbt die Sache, indem
unansehnliche Abstände angezeigt werden. Diese können Sie in
vielen Fällen umgehen, indem Sie die einzelnen HTML-Seiten
(nicht die Frames) mit einem Attribut für den Randabstand nach
oben ausrüsten. Der Tag wird im <body> Tag platziert.
marginheight=0
Wie man Frames dazu benutzt, eine komplette
Web-Site einzurahmen.
Ein geframter Rahmen kann sich jedem Browserfenster anpassen,
egal unter welcher Bildschirmauflösung. Farbe und Breite des
Rahmens (in der Abbildung 20 Pixel) lassen sich beliebig anpassen.
Der Rahmen muss auch nicht leer sein. Er könnte Icons oder auch
Links enthalten.
www.drweb.de
79
Kapitel 2
Finden und gefunden werden
Hierzu sind sechs Dateien notwendig:
.. rahmen.htm - enthält das Frameset
- für den linken Rahmen
.. links.htm
rechts.htm - für den rechten Rahmen
- für den oberen Rahmen
.. oben.htm
unten.htm - für den unteren Rahmen
mitte.htm - für den Inhalt
Die vom Frameset aufgerufenen Dateien sind leer, bis auf ein
Attribut für die Hintergrundfarbe, die eben so gut eine Grafik sein
könnte.
Quellcode des Framesets:
<html><head><title>Web-Site mit Rahmen</title></head>
<frameset framespacing="0" border="no" frameborder="0"
cols="20,*,20"> <frame name="links" src="links.htm"
scrolling="no">
<frameset rows="20,50%,20">
<frame name="oben" src="oben.htm" scrolling="no">
<frame name="mitte" src="mitte.htm">
<frame name="unten" src="unten.htm" scrolling="no">
</frameset>
<frame name="rechts" src="rechts.htm" scrolling="no">
<noframes><body>
<p>Hinweise, Links</p></body>
</noframes>
</frameset></html>
80
www.drweb.de
Kapitel 2
Das ist noch nicht alles:
Eine überraschende Variante erzielen Sie mit speziell aufbereiteten Grafiken. Hier haben Sie freie Hand.
In diesem Fall enthalten die beiden Rahmendateien "oben.htm"
und "unten.htm" jeweils eine Grafik in der Farbe des Hintergrund
der Inhaltsdatei "mitte.htm". Hier sind viele Varianten denkbar.
Berücksichtigen Sie dabei bitte, dass diese Dateien "margin"
Befehle enthalten müssen, damit die Grafiken auch wirklich nahtlos anschließen.
<body bgcolor="#0000CC" MARGINHEIGHT=0 MARGINWIDTH=0
TOPMARGIN=0 LEFTMARGIN=0>
..
..
..
Es sind sechs Dateien notwendig:
rahmen1a.htm- enthält das Frameset
links.htm - für den linken Rahmen
rechts.htm - für den rechten Rahmen
oben2.htm - für den oberen Rahmen
unten2.htm - für den unteren Rahmen
mitte.htm - für den Inhalt
Quellcode des Framesets
<html><head><title>Web-Site mit Rahmen</title></head>
<frameset framespacing="0" border="no" frameborder="0"
cols="20,*,20"> <frame name="links" src="links.htm"
scrolling="no"> <frameset rows="20,50%,20"> <frame name="oben"
src="oben2.htm" scrolling="no"> <frame name="mitte"
src="mitte.htm"> <frame name="unten" src="unten2.htm"
scrolling="no"> </frameset>
<noframes><body> <p>Hinweise, Links</p> </body></noframes>
</frameset></html>
www.drweb.de
81
Kapitel 2
Experimente mit Frames
Frames gehören - sicherlich zu Recht - zu den Lieblingsspielzeugen
der Web-Designer. Kein Wunder, kann man doch mit Ihnen ganz
ungewöhnliche Dinge tun, die weit über lieblose Standard-Designs
hinausgehen. Die Arbeit daran ist allerdings manchmal nervenaufreibend, wie jeder weiß, der sich schon einmal daran versucht
hat. Die hier vorgestellten Beispiele machen im praktischen
Einsatze wenig Sinn, doch dafür sind sie auch nicht gedacht. Wir
möchten Ihnen zeigen, wohin man gehen kann und wie weit sich
die Sache auf die Spitze treiben lässt, denn Frames sind mehr als
ein bloße Navigationshilfe.
Schachtel-Frames
Frames lassen sich prima verschachteln, indem eine durch ein
Frameset aufgerufene Seite ein weitere Frameset aufruft und so
weiter. Allzu bunt treiben sollte man es aber nicht, schließlich
muss der Surfer eine Menge Dateien herunterladen, bevor das
Werk in seiner Pracht zu erkennen ist. Zudem kommt man leicht
durcheinander. Unser Beispiel bringt es auf 12 HTML- plus eine
Frame-Steuerdatei.
Verzwickte Verschachtelung mit 12 HTML-Seiten
Ein solches Layout lässt sich natürlich auch mit Tabellen
annähernd realisieren. Die Unterschiede dabei liegen vor allem
darin, das Frames auch wirklich alle Bildschirmränder ausfüllen.
82
www.drweb.de
Kapitel 2
Bei Tabellen ist das nicht ganz so. Zudem lässt sich jedes Fenster
einzeln ansprechen und die dort enthaltene Information gezielt
auswechseln. Dazu kommt, dass ein Frameset so aufgebaut werden kann, dass es bei verschiedenen Monitorauslösungen stabil
bleibt, je nachdem, was man erreichen möchte.
Betrachten wir den technischen Aufbau:
Frameset Nr. 1 sorgt für den äußeren farbigen Rand. Die Zahl 20
im Quellcode steht für den jeweils 20 Pixel bereiten Rand der
äußeren Konstruktion. Diese bleibt unter allen Bildschirmauflösungen erhalten, während sich der Innenbereich entsprechend anpasst. Wie üblich wurden einiges Attribute untergebracht, die sich um die Rahmen (Borders) und Scrollbalken kümmern.
<html><head><title>Schachtel Frames </title></head>
<frameset framespacing="0" border="false" frameborder="0"
cols="20,*,20">
<frame name="links" src="links.htm" scrolling="no">
<frame name="oben" src="oben.htm" scrolling="no">
<frame name="mitte" src="mitte.htm">
<frame name="unten" src="unten.htm" scrolling="no">
</frameset>
</frameset></html>
Dem ersten Streich folgt der zweite. Die Datei "mitte.htm" ruft
wiederum ein Frameset auf. Es ist identisch mit dem ersten, nur
die Namen und die aufgerufenen Dateien verändern sich.
<html><head><title>mitte</title></head>
<frameset framespacing="0" border="false" frameborder="0"
cols="20,*,20">
<frame name="links" src="links2.htm" scrolling="no">
<frame name="oben" src="oben2.htm" scrolling="no">
<frame name="mitte" src="mitte2.htm">
<frame name="unten" src="unten2.htm" scrolling="no">
</frameset>
<frame name="rechts" src="rechts2.htm" scrolling="no">
</frameset></html>
www.drweb.de
83
Kapitel 2
Auf diese Weise ließe sich weiter verschachteln. Nun soll allerdings noch etwas Inhalt untergebracht werden. Dazu lassen wir
die Datei "mitte2" wiederum ein Frameset aufrufen. Diesmal handelt es sich um ein zweigeteiltes, welches auf der linken Seite die
Überschrift und auf der rechten Seiten den Text aufnimmt.
<html><head><title>mitte 2</title></head>
<frameset cols="387,387" border="false" frameborder="0"
framespacing="0">
<frame src="mitte5.htm" frameborder="no">
<frame src="mitte3.htm" frameborder="no">
</frameset></html>
Damit sind wir am Ziel: 12 HTML-Seiten teilen sich einen
Bildschirm. Die interessante Frage ist, was macht man nun damit?
Zugegeben, das Ganze ist ein wenig unpraktisch, aber ungewöhnlich und durchaus schick. Farben und Breite der Fenster sind
selbstverständlich frei veränderbar. Es lohnt sich, damit ein wenig
zu experimentieren und zu eigenen Lösungen zu kommen. Das
obige Beispiel lebt vor allem vom Kontrast und das nicht nur durch
die Farben. Auch das Verhältnis von Überschrift zum blockgesetzten Text sorgt für Spannung. Durch den Einsatz von Grafiken lässt
sich die Sache noch verfeinern.
Auf die Spitze getrieben
Was man mit 12 Frames tun kann, kann man auch mit 49 machen.
Sonderlich praktisch ist das zwar nicht. Auch die Ladezeiten sind
der vielen Dateien wegen nicht eben freundlich, aber auf diese
Weise kommt man zu Lösungen, die nie ein Mensch vorgesehen
hat. Varianten sind viele denkbar. Das Frame-Kaleidoskop zum
Beispiel besteht aus 49 HTML-Seiten plus Frameset. Der Clou an
der Sache: Alle Frames refreshen sich gegenseitig, so dass ständig
neue Muster und Variationen entstehen. Zu lange sollte man allerdings nicht darauf schauen. Auch ein Web-Server bekommt
Probleme, denn durch die vielen Weiterleitungen werden in hoher
Geschwindigkeit viele Abfragen an den Server gerichtet. Wenn nur
10 Gäste pro Stunde dem Farbenspiel zuschauen, macht das im
Monat bereits eine gute Million Pageviews aus.
84
www.drweb.de
Kapitel 2
Frame-Kaleidoskop - Leider nichts für Opera-Nutzer
Raster-Frames
Die 3 mal 3 Matrix erinnert an das Spiel Tic-Tac-Toe. Die einzelnen Frames werden jeweils gedrittelt und über eine einzige
Frame-Datei gesteuert. Da sich hundert Prozent nicht exakt in
drei Teile spalten lassen, kommt auch hier das Jokerzeichen zum
Einsatz. Verzichtet man darauf und versucht es stattdessen mit 3
mal 33% wird man enttäuscht, die Frames verschieben sich auf
dem Bildschirm.
Jeder Klick ändert das Bild.
www.drweb.de
85
Kapitel 2
<html><head><title>Experimente mit Frames - 1</title></head>
<frameset rows="33%,33%,*">
<frameset cols="*,33%,33%">
<frame name="Oben" src="weiss.html" scrolling="no">
<frame name="Oben3" src="weiss.html" scrolling="no">
</frameset>
</frameset>
<frame name="Unten" src="weiss.html" scrolling="no">
<frame name="Unten2" src="weiss.html" scrolling="no">
<frame name="Unten1" src="weiss.html" scrolling="no">
</frameset></frameset></html>
Wer in eines der anfänglich weißen Fenster klickt, wird über einen
ALT-Text aufgefordert, die Farbe zu wechseln. Ein Klick genügt
und das jeweils angeklickte Frame wird schwarz. Das Ganze funktioniert auch umgekehrt von schwarz zu weiß. Javascript ist nicht
im Spiel, die Lösung ist viel einfacher. Jedes Frameset ruft die
Datei "weiss.html" auf. Darin verbirgt sich ein 600*600 Pixel
großes GIF, das aus einem Pixel bestehen kann. Diese Grafik verweist auf die Datei "schwarz.html", die nach dem selben Prinzip
aufgebaut ist und eine schwarze Grafik und einen Link zu
"weiss.html" enthält. Da sämtliche Grafiken und Dateien sehr
klein sind und mehrfach verwendet werden, entstehen verblüffend
kurze Ladezeiten.
<html><head><title>Weisse Seite</title></head>
<body topmargin="0" leftmargin="0" marginheight="0"
marginwidth="0">
<a href="schwarz.html"><img src="weiss.gif" width="600"
height="600" border="0" alt="nach schwarz klicken"></a>
</body></html>
Varianten
Als Varianten könnten die einzelnen Fenster verschiedene Dateien
mit verschiedenen Farben, Grafiken oder Textfragmenten aufrufen. Auch der zusätzliche Einsatz kleiner Javascript-Fenster in der
Größe des Frames verspricht einen guten Effekt. Das 8*8 Raster
(siehe Abbildung) bietet keinen praktischen Nutzen mehr; hier
86
www.drweb.de
Kapitel 2
kommen wir an Gestaltungsgrenzen. Denn während der Navigator
und Opera keine Probleme haben, schafft der Microsoft Internet
Explorer unter Umständen (je nach Rechner) die Darstellung der
ständig wechselnden Rahmen nicht mehr.
Frames total im 8 mal 8 Raster. Jeder Farbfleck dieses Patchworks ist eine HTMLSeite und könnte statt mit farbigen Hintergründen mit Inhalten gefüllt sein.
HTML
Der Aufbau eines solchen Framesets ist nicht einfach. Frames lassen sich leider nicht wie Tabellen zeichnen oder als Spalten oder
Zeilen definieren, geschweige denn zusammenfassen. Die ganze
Kunst beruht auf allerlei Verschachtelungen. Der Quellcode ist
viel zu umfangreich, als das es Sinn machen würde, ihn hier abzubilden. Manuell lässt sich das kaum bewerkstelligen, man ist auf
die Hilfe eines Editors angewiesen. Dort lassen sich die Frames
mehr oder weniger gut auf dem Bildschirm zurechtschneiden,
abhängig von der Art des Programms. Der Aufwand ist in jedem
Falle relativ groß, aber eine gute Fingerübung. Denn wer dieses
Problem lösen kann, kommt mit alltäglichen Aufgaben spielend
zurecht.
Schmale Frames
Auch wenn manchem Designer die Bildschirme nicht groß genug
sein können, es geht auch anders herum. Das folgende Beispiel
kommt mit geringem Platz aus. Im Prinzip ist hier wiederum horiwww.drweb.de
87
Kapitel 2
zontales Scrollen im Einsatz. Die beiden ungenutzten schwarzen
Bereiche könnten beispielsweise Grafiken enthalten, die Musik
spielt aber eindeutig im schmalen roten Mittelstreifen.
Die eingesetzte Frame-Technik ist einfach und sollte Sie vor keine Rätsel stellen.
Das mittlere Frame ist mit einer fixen Breite von 65 Pixel definiert worden. Die
anderen beiden bestimmen ihre Größe durch das Jokerzeichen je nach
Bildschirmauflösung selbst.
<html><head><title>Experimente mit Frames II</title></head>
<frameset rows="*,65,*" BORDER="0" FRAMESPACING="0"
FRAMEBORDER="NO">
<frame name="Oben" src="oben.htm">
<frame name="Mitte" src="mitte.htm">
<frame name="Unten" src="unten.htm">
</frameset></html>
Wie wird der Text zentriert?
Beim Zentrieren von Text helfen Tabellen. Die nämlich lassen sich
weitgehender beeinflussen als bloßer Text, den wir zwar nach
rechts ausrichten können, nicht aber nach unten. Wichtig ist, dass
die Tabellen auch eine Definition für die Höhe bekommen
(height="100%"). Die unten eingesetzte Tabelle sieht dann folgendermaßen aus:
<table width="100%" border="0" cellspacing="0" cellpadding="0"
height="100%">
<tr valign="bottom" align="right"><td>
<font color="#FFFFFF" face="Verdana, Arial, Helvetica,
sans-serif" size="6">Schmaler
Mittelframe</font></td></tr></table>
88
www.drweb.de
Kapitel 2
Eine Variante mit vertikalem Scrollen oder mehreren ScrollBereichen ist selbstverständlich auch denkbar. Wie immer kommt
es auf die Fantasie des Gestalters an. Versuchen Sie es ...
Schiefe und unregelmäßige Frames
Was eigentlich nicht geht, geht eben manchmal doch. Frames sind
immer rechtwinklig, eckig und gerade, daran kann kein HTMLKünstler etwas ändern. Doch mit Glück und Geschick und vor
allem dem richtigen Hintergrundbild, erwecken Sie den Eindruck
eines unregelmäßigen, ausgefransten oder schiefen Framesets.
Seltsames Frame: Es wird über eine Grafik erzeugt, die den Hintergrund des linken Frames bildet. Auch die Trennlinie (Border) des Frames wird auf diese Weise
simuliert.
www.drweb.de
89
Kapitel 2
Schöner im neuen Format: CSS
4. Schöner im neuen Format: CSS
Cascading Style Sheets (CSS) sind längst keine neue Erfindung
mehr, sie haben sich inzwischen einen festen Platz in immer mehr
Web-Seiten erobert und die Entwicklung geht weiter. Im Prinzip
haben Style Sheets die gleiche Funktion wie eine Formatvorlage in
einer Textverarbeitung. Sie verleihen einer gekennzeichneten
Passage oder einem Element ein zuvor festgelegtes Format. Man
erspart sich damit eine Menge Arbeit, da eine Formatierung aus
vielen Befehlen und damit Arbeitschritten bestehen kann, die nun
mit einen einzigen Handgriff angebracht werden können. Dabei
geht der Befehlssatz von CSS weit über die Leistungsfähigkeit
üblicher HTML-Tags hinaus. Eben deshalb werden CSS-Tags als
Ergänzung von HTML verwendet, ohne das man sich die
Eigenschaften der Formatvorlagen direkt zu Nutze machen müsste. Beispielsweise lässt sich der Zeilenabstand (Durchschuss)
eines Textblockes verändern, was mit traditionellem HTML nicht
möglich ist. Dazu ist keine Formatvorlage notwendig, sondern
lediglich eine Style-Definition dort, wo sie benötigt wird. Ältere
oder ganz alte Browser sind hier übrigens keine Gefahr, sie kümmern sich nicht um Style Sheets.
Welche Formatierungen kann ein Style Sheet übernehmen?
.. Schrift, Schriftgröße und -farbe
Textauszeichnungen (kursiv/ fett/ unterstrichen/durchgestrichen usw.)
. Textausrichtung
(linksbündig/ rechtsbündig/ zentriert/
Blocksatz)
.. Zeilenabstand
. Wortabstand
Formatierung der Hyperlinks
(Farben/ Unterstreichung/ Überstreichung/ Hover)
.. Eingabefelder der Formulare verändern
(neue Formen)
.. Mauszeiger
Rahmen
oder Hintergrundbild (auch für Textteile)
.. Hintergrundfarbe
Randabstände
Positionierungen (relative und absolut für beliebige Objekte)
90
www.drweb.de
Kapitel 2
Style Sheets können zum exakten Positionieren von Elementen
eingesetzt werden, denn nun lassen sich auch absolute Werte definieren, so zum Beispiel Schriften in der typografischen Maßeinheit
Punkt (pt) oder Randabstände, Wortabstände etc in Millimetern.
Der Microsoft Browser (IE) verfügt bereits über eine Option, um
ein selbstdefiniertes Style Sheet auch auf fremde HTML-Seiten
anzuwenden. Im Prinzip würde es, wie in den Anfangstagen des
Webs, genügen, ein Dokument lediglich hierarchisch zu gliedern.
Die Ausstattung und Verschönerung der Seite übernimmt dann
der Browser via Style Sheet nach den Vorgaben des Anwenders.
So setzen Sie CSS-Befehle richtig ein
Style Sheets sind vielseitig in der Anwendungen. Gleich fünf
Möglichkeiten bieten sich an.
1) Direkt im Quellcode. Diese Befehle wirken nur an
bestimmten Stellen einer Seite, beispielsweise innerhalb
einer Überschrift oder eines Absatzes.
<h1 style="line-height : 150%;">Überschrift</h1>
<p style="line-height : 150%;">Text</p>
2) Größere Bereiche können mit dem Befehle <span> definiert werden. Alles, was sich innerhalb der "Spanne" befindet, wird beeinflusst.
<span style="line-height : 150%;">Text</span>
<span style="line-height : 150%;"><b>Dies ist ein
Mustertext</b>, um das <i>Prinzip</i> aufzuzeigen.</span>
3) Eine komplette HTML-Seite kann formatiert werden,
indem man die Style-Anweisungen im Dateikopf unterbringt. Hier sieht die Syntax etwas anders aus.
<html>
<head>
<title>Seitenname</title>

</style>
</head>
<body>
</body>
</html>
4) Doch damit nicht genug. Ihre wahre Stärke entfalten
Style Sheets, wenn man sie als Formatvorlagen in eine
externe Datei auslagert (hier style.css). Jetzt kann die Vorlage
auf alle Seiten einer Web-Site wirken. Das spart Code, die Dateien
dampfen ein, Änderungen lassen sich blitzschnell für die gesamte
Site realisieren. Die externe Datei wird im einfachen ACSII
Textformat gespeichert und enthält die Style-Anweisungen im
Klartext. Damit die darin enthaltenen Befehle wirken können,
muss jede HTML-Seite das Style Sheet auch laden können. Dies
erreichen Sie mit folgender Befehlszeile im Dateikopf (head).
<link rel="STYLE SHEET" href="style.css" type="text/css">
Ein externes Style Sheet könnte so aussehen:
5) Mit dem Befehl "class" lassen sich eigene Formate fest
vergeben. Dazu ist zweierlei notwendig. Eine Markierung
innerhalb der HTML-Datei, und zwar dort, wo die Formatierung
wirken soll. Diese Bezeichnung können Sie frei wählen, es wird ihr
lediglich ein Punkt vorangestellt. Also beispielsweise .klein
92
www.drweb.de
Kapitel 2
Diese Markierung findet zusammen mit der zuzuweisenden
Formatierung ihre Entsprechung in der CSS-Datei. Also beispielsweise:
.klein { font-size : 9pt; text-align : left; line-height :
150%;}
Überall, wo nun in der HTML-Datei die Markierung .klein auftaucht, wird der Text in einer Größe von 9pt dargestellt, nach links
ausgerichtet und mit einem doppelt so großen Abstand zu den
anderen Zeilen versehen. Diese Vorgehensweise macht auch dort
Sinn, wo durch ein externes Style Sheet bereits Formatierungen
vorgesehen sind. Diese werden sozusagen "überstimmt". Natürlich
ließen sich die Formatierungen auch direkt in der Datei unterbringen. Damit jedoch verschenken Sie einen entscheidenden
Vorteil, denn die externe Datei ermöglicht die Änderung von mehreren Tausend HTML-Seiten in ein paar Sekunden.
www.drweb.de
93
Kapitel 2
Übersicht CSS-Befehle
A:link
A:visited
A:active
A:hover
fast
fast
fast
fast
margin-left :
margin-right :
margin-bottom:
margin-top :
Link
Besuchter Link
Angeklickter Link
Link beim Darüberfahren
(mit der Maus)
absol. Abst. z. S.-Rand
font-family :
font-size :
color :
background :
background-image
background-repeat
text-align :
line-height :
text-decoration :
word-spacing:
letter-spacing:
text-indent:
text-transform:
font-variant:
font-weight:
font-style:
Schriftart
Schriftgröße
Schriftfarbe
Hintergrundfarbe
Hintergrundbild
Kachel
Textausrichtung
Zeilenabstand (D.-Schuss)
Textgestaltung
Wortabstand
Zeichenabstand
Texteinrückung
Textart
Schriftvariante
Schriftgewicht
Schriftstil
Arial, Times New Roman, etc.
numm. Wert in pt, mm oder cm
yellow, white pp. o. HTML- Farbang.
yellow, white pp. o. HTML- Farbang.
none, URL
repeat, repeat-x, repeat-y, no-repeat
left, right, center, justify (Blocksatz)
under- o. overline, line-through, blink
capitalize, upppercase, lowercase, none
normal, small-caps
normal,bold,bolder,lighter
normal,oblique, italic
Border-top-width:
Border-bottom-width:
Border-left-width:
Border-right-width:
Border-style
Dicke der Rahmenlinie
Rahmentyp
thin,medium,thick, oder numm. Wert
none, dotted, dashed, solid, double,
groove, ridge, inset, outset
Border-color
padding-top
padding-bottom
padding-right
padding-left
width
Height
Cursor:
Rahmenfarbe
Tabellenabstand
Tabellenabstand
Tabellenabstand
Tabellenabstand
Rahmenbreite
Rahmenhöhe
Cursorform
Farbname oder Hex.
Prozent oder num. Wert.
Auto, Prozent, num. Wert
Auto, Prozent, num. Wert
s-resize, e-resize,n-resize,crosshair, usw.
94
oben
unten
rechts
links
alle
alle
alle
alle
numm.
numm.
numm.
numm.
CSS-Befehle
CSS-Befehle
CSS-Befehle
CSS-Befehle
Wert
Wert
Wert
Wert
in
in
in
in
pt,
pt,
pt,
pt,
mm
mm
mm
mm
oder
oder
oder
oder
cm
cm
cm
cm
www.drweb.de
Kapitel 2
Tricks mit Style Sheets
Style Sheets lassen sich nicht nur als bequeme Formatvorlagen
und Grundlage für DHTML verwenden, sie können auch eine
Reihe interessanter Effekte und Layout-Änderungen erzielen.
Bitte beachten Sie dabei aber, dass Style Sheets nur von den MS
Browsern IE (ab 3.0) und vom Netscape Communicator (ab 4.0)
sowie Opera (ab 3.0) interpretiert werden können. Dabei gibt es
erhebliche Unterschiede zwischen den einzelnen Browsern und
deren Versionen.
Fett und andersfarbig, das kann jeder. In folgendem Beispiel wird
die Schrift um 10% vergrößert, zudem wurde der Zeilenabstand
um 50% erhöht und Blocksatz festgelegt.
{ line-height : 150%; text-align : justify ; color : #8484C2;
Der Einzug wurde mit {text-indent : 2cm;} realisiert.
Neue Tabellenrahmen erzielen Sie mit Border-Attributen:
{ border-width: 2px; border-color: red; border-style: inset;}
Textmarker Effekte erhalten Sie ganz einfach auf diese Weise:
<span style="color : black; background: yellow">Textmarker
Effekte erzielen Sie mit:</span>
Farbige Trennlinien sind ebenfalls kein Problem. Den Einsatz von
Grafiken können Sie sich in diesem Fall sparen:
HR { color : blue ; }
www.drweb.de
95
Kapitel 2
Farbveränderliche Links
Sogenannte Hover-Links sind Links, die beim Drüberfahren mit
der Maus ihre Farbe verändern. Mehr noch: Bei Mausberührung
könnte ein Bildhintergrund erscheinen, die Unterstreichungen anoder ausgeschaltet werden oder der Link mit Kursiv- oder
Fettschrift hervorgehoben werden.
A:link { color : #0033CC; text-decoration: none}
A:visited {color : #0033CC; text-decoration: none}
A:bb:hover {color: #808080; text-decoration: underline}
A:active {color: #FF0000; text-decoration: none; }
Setzen Sie {text-decoration
:
none}, um Links ohne
Unterstreichung zu erhalten. Jetzt lassen sich sogar Links mit
Überstreichung {text-decoration : overline}, erzielen. Ein prima
Effekt, den noch nicht jede Web-Site kennt, und der Dank HoverEffekt und IE, sehr einfach zu realisieren ist.
Der Quellcode sieht dann folgendermaßen aus:
A:link { color : #0033CC; text-decoration: none}
A:visited {color : #0033CC; text-decoration: none}
A:bb:hover {color: #808080; text-decoration: underline}
A:bb:hover {color: #808080; text-decoration: overline; }
A:active {color: #FF0000; text-decoration: none; }
Seitenrahmen
Um eine Seite einzurahmen sind nicht unbedingt Tabellen oder
Frames notwendig. Auch über einen CSS-Tag lässt sich das erreichen. Allerdings gilt das wiederum nur für den Internet Explorer.
Je nach Definition können Sie einen kompletten Rahmen oder nur
Teile davon definieren.
96
www.drweb.de
Kapitel 2
Kompletter Rahmen in einer Breite von 7 Pixeln + Farbdefinition
border : 7px solid #CFDFEB (innerhalb des Bodytags)
Rahmen für die linke Seite in einer Stärke von 1 Pixel und in gelb
(innerhalb des Bodytags)
border-left : 1px solid yellow
Doppelrahmen für die rechte Seite in einer Stärke von 3 Pixeln
border-right : 3px solid ridge (innerhalb des Bodytags)
Mit left, right, bottom oder top definieren Sie Linien außerhalb der
Seite. Wenn Sie solid gegen ridge austauschen, erhalten Sie einen
Schatteneffekt. Da dieser Befehl einige Versionen des Netscape
Communicators zum Absturz bringen kann, beschränkt man sich
besser auf einen teilweisen Rahmen.
Hyperlinks in verschiedenen Farben auf einer
Seite
Style Sheet Befehle
Style Sheets Einführung
Style Sheet Befehle
Wie funktioniert es?
<a href="seite.htm" ><div style="a: link; color :
orange">Link</div ></a>
www.drweb.de
97
Kapitel 2
Cursor
Neue Mauszeiger können Sie auf alle Elemente, gleich ob Tabellen,
Grafiken oder Textblöcke anwenden. Angezeigt werden die Cursor
nur von Microsoft Browsern ab 4.0. Andere Browser ignorieren den
Befehl.
Beispielcode:
<div
<div
<div
<div
<div
<div
<div
<div
<div
<div
<div
<div
<div
<div
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
style="cursor
:
:
:
:
:
:
:
:
:
:
:
:
:
:
s-resize">Text</div>
e-resize">Text</div>
w-resize">Text</div>
n-resize">Text</div>
n-resize">Text</div>
crosshair">Text</div>
help">Text</div>
wait">Text</div>
nw-resize">Text</div>
text">Text</div>
ne-resize">Text</div>
move">Text</div>
pointer">Text</div>
default">Text</div>
Grafische Effekte für den Text
Texteffekte lassen sich mit den Microsoft-Spezialfiltern erzeugen.
Sie sind allerdings Besuchern mit IE 4 oder 5 vorbehalten und lassen optisch manches zu wünschen übrig. Einige Beispiele:
<div style="width:100%; font-size:30pt; color:blue;
filter:DropShadow(color=#C0C0C0, offx=3,
offy=3)">Schatteneffekt </div >
<div style="width:100%; font-size:30pt; color:black;
filter:Wave(freq=2, light=20, phase=50,
strength=2);">Wellentext</div>
98
www.drweb.de
Kapitel 2
<div style="width:100%; font-size:30pt; color:black;
filter:Glow(color=yellow, strength=2)">Glühender Text</div>
Font-Tags ausradieren
Wer seine Webseiten in Helvetica oder Verdana formatieren will
oder muss, kommt um unzählige Font-Tags nicht herum. Die aber
machen den Quellcode unübersichtlich und verdoppeln unter
Umständen die Ladezeit eines Dokuments. Externe Style Sheets
sind eine Alternative, doch auch hier gilt es, einige Hürden zu
überwinden.
Vor allem der inzwischen recht veraltete Netscape 4.x macht die
Reinigungsaktion zu einem wackeligen Unterfangen. Es geht aber
doch. Definieren Sie für Absätze <P> sowie Tabellenspalten und Zeilen jeweils die selbe Formatierung.
P { font-family : Arial,Helvetia,sans-serif; font-size :
10pt;}
TD { font-family : Arial,Helvetia,sans-serif; font-size :
10pt;}
TR { font-family : Arial,Helvetia,sans-serif; font-size :
10pt;}
Das veranlasst sowohl Internet Explorer als auch Netscape, sämtlichen Text in der hier definierten Größe von 10 Punkt in einer
serifenlosen Schriftart anzuzeigen.
Zu Problemen kommt es, wenn Sie verschiedene Schriftgrößen einsetzen möchten. Denn die Formatierung size="1" funktioniert
jetzt nur noch im Microsoft Browser. Netscape erzwingt überall 10
Punkt, egal was sonst noch im Quellcode steht. Dies lässt sich
umgehen, indem Sie jedem anders zu formatieren Bereich eine
eigene Style-Anweisung (class) definieren.
.klein { font-size : 8pt; }
www.drweb.de
99
Kapitel 2
Im HTML-Code sieht das dann so aus:
<p class="klein">Kleiner Text</p>
Das gilt auch, wenn Sie zum Beispiel Blocksatz erzwingen wollen,
denn was für Fließtext sinnvoll ist, ist es bei Überschriften nicht
unbedingt. Auch hier muss mit einer zusätzlichen Definition gearbeitet werden, um einen Textbereich linksbündig oder mittig auszurichten.
Das Gute daran ist, das alles, was in ein externes Style Sheet ausgelagert wurde, sich flink ändern lässt. Sie können mit einem
Handgriff den Blocksatz für die gesamte Web-Site aufheben, die
Schriftfarbe, den Zeilenabstand oder die Größe ganzer Passagen
oder Teile davon ändern.
Ganz auszuschließen sind Probleme allerdings nicht. Der IE3 ist in
Sachen CSS recht unterbelichtet, glücklicherweise ist er nur noch
selten anzutreffen. Vom Communicator gibt es inzwischen so viele
Versionen, dass Testen kaum Sinn macht. Manchmal will es nicht
klappen, wenn mehrere Style-Anweisungen hintereinander stehen, dann hilft nur noch probieren. Eine praktikable Lösung lässt
sich aber meist finden. Auf der sicheren Seite ist nur der, der die
Sache einfach angeht. Mit komplexen, arg verschachtelten
Befehlsketten sollte man deshalb vorsichtig sein.
100
www.drweb.de
Kapitel 2
Für Ihre Notizen
www.drweb.de
101
Kapitel 2
Delikatessen im Netz?
5. Internet Explorer-Spezialitäten
HTML-Tags, die nur mit einer bestimmten Browserfamilie funktionieren, werden "proprietär" genannt. Davon gibt es eine ganze
Reihe. Manch ein Tag hat sich inzwischen durchgesetzt und wurde
als gültiger Standard anerkannt. Dazu gehören zum Beispiel
Frames, ursprünglich eine Erfindung von Netscape. Nun lassen
sich einige dieser Eigenentwicklungen durchaus nutzbringend
anwenden. Man sollte aber genau abwägen, ob sich der Einsatz
wirklich lohnt. Neben den proprietären Befehlen gibt es noch solche, die zwar als Standard definiert wurden, jedoch (noch) nicht
den Eingang in die Stuben sämtlicher Programmierer gefunden
haben. Was insbesondere für Style Sheets zutrifft, insofern, das
Netscape Browser hier nicht mithalten können. Die Aussage gilt
auch für inline Frames.
Inline-Frames (iFrames)
Microsoft demonstriert Pioniergeist und verwendet Inline-Frames.
Dumm nur, das HTML 4.0-Befehle wie diese in der Praxis kaum
Sinn machen, solange nur die Internet Explorer damit umgehen
können. So bleiben sie Intranets oder speziellen Zwecken vorbehalten.
iFrames erscheinen innerhalb einer HTML-Seite, ähnlich einer Tabelle. Der
Unterschied besteht darin, dass die iFrames eine beliebige, komplette HTML-Seite
aufrufen.
102
www.drweb.de
Kapitel 2
Delikatessen im Internet?
Was kann man mit Iframes machen?
Werden die Maße auf Null gesetzt, bleibt der eingebettete Rahmen
unsichtbar. Dieser Effekt lässt sich zum "Vorausladen" ganzer
Seiten nutzen. Auf die selbe Weise können Sie BannertauschDienste austricksen. Das ist eine unfaire Methode, die wir ausdrücklich nicht empfehlen. Wer seine Besucher über Javascript auf
browserspezifische Seiten weiterleitet, kann iFrames zu
Gestaltungszwecken einsetzen.
TAG-Übersicht Inline-Frames
<IFRAME SRC="seite.htm></IFRAME>
iFrame erstellen
FRAMEBORDER="xx"
Rahmen um das Frame
HEIGHT="xx-"
Analog zum Height-Befehl für Images
WIDTH="xx"
Analog zum WIDTH-Befehl für Images
MARGINWIDTH="xx"
Abstand zum linken Rand
MARGINHEIGHT="xx"
Abstand zum rechten Rand
SCROLLING="yes,no"
Rollbalken an oder abschalten
NORESIZE
Verschieben des Frames mit der Maus nicht möglich
ALIGN="left, right, center"
Ausrichtung
www.drweb.de
--
103
Kapitel 2
Laufschrift (Marquee) für den Internet Explorer
Laufschriften (=Ticker) sind ein wenig aus der Mode gekommen.
Glücklicherweise, möchte man meinen, denn vor nicht allzu langer
Zeit präsentierte sich bei mancher Reise durchs Web jede zweite
Seite mit einer solchen animierten Botschaft. Viele davon wurden
mit dem Marquee-Tag erzeugt. Andere Möglichkeiten bieten Java,
Javascript und das animierte gif. Natürlich gibt es auch sinnvolle
Anwendungen für ein Laufband und manchmal sogar für den
Marquee-Tag. Besucher mit Browsern aus dem Hause Netscape
vermögen zwar von der Laufschrift nichts erahnen, sehen aber die
definierte Überschrift oder einen Teil des Schriftzuges.
Einen einfachen Lauftext erzeugen Sie so:
<marquee>Laufschrift von rechts nach links</marquee>
So wechseln Sie die Laufrichtung:
<marquee direction=right>Laufschrift von links nach
rechts</marquee>
Zwei zusätzliche Attribute passen die Geschwindigkeit an:
scrollamount=50
Geschwindigkeit in Pixelabständen
scrolldelay=5
Verzögerung bei der Anzeige
Einen abwechselnd von links nach rechts laufenden Text
erreichen Sie mit dem Attribut "alternate"
<marquee behaviour=alternate>Laufschrift mit wechselnder
Richtung</marquee>
Auch die Farbe des Hintergrundes kann definiert werden:
<marquee bgcolor=gray>Lauftext auf grauem Hintergrund
</marquee>
104
www.drweb.de
Kapitel 2
Selbstverständlich lässt sich auch die Schrift formatieren:
<font size=5 color=yellow><marquee bgcolor=gray>Lauftext in
großer, gelber Schrift auf grauem Hintergrund</marquee></font>
Zusätzlich könnte auch die Größe des Bereichs festlegt
werden, in dem die Laufschrift erscheint. So erzeugen Sie
einen Nachrichtenticker. Werte sind erlaubt in Pixeln
(Standard) oder in Prozent:
<font size=5><marquee width=200 height=20>Newsticker mit festgelegtem Bereich</marquee></font>
Mit hspace=xx geben Sie den Abstand zum eventuell umgebenden Text an. Einige der von Tabellen her bekannten
Attribute sorgen für eine entsprechende Ausrichtung nach
oben oder unten:
align=top align=bottom align=middle
Schließlich kann ein Marquee-Tag auch einen anklickbaren Hyperlink enthalten.
<font face="Courier New, Courier, mono"><marquee width=200>
<a
href="link.htm">Newsticker
yperlink</a></marquee></font
mit
Seitenübergänge
Microsofts Transitions bieten Ihren Besuchern staunenswerte
Seitenübergänge. Von Seite zu Seite oder von Site zu Site. Auf
diese Weise lassen sich zwei Web-Seiten miteinander mischen, ein
Effekt, der glücklicherweise nicht allzu häufig zu beobachten ist.
Richtig eingesetzt, kann er vielfältige Überraschungen auslösen.
Die erforderlichen Meta-Befehle werden nur vom IE 4 oder 5 interpretiert. Alle andere Browser ignorieren die Anweisungen ohne
Fehlermeldungen.
www.drweb.de
105
Kapitel 2
Platzieren Sie Befehle nach dem folgenden Muster zwischen
<head> und </head>
<META http-equiv="Page-Enter"
CONTENT="RevealTrans(Duration=4,Transition=1)">
<META http-equiv="Page-Exit"
CONTENT="RevealTrans(Duration=3,Transition=13)">
Der erste Meta-Tag wird beim Seitenaufruf mit einer Dauer von 4
Sekunden ausgeführt. Angewendet wird der Effekt Nr. 1 (siehe
Tabelle) Der zweite Meta-Befehl wird beim Verlassen der Seite
wirksam. Er erstreckt sich über einen Zeitraum von 3 Sekunden
und zeigt den Effekt Nr. 13.
Folgende Ereignisse können Sie definieren:
Page-Enter
--> Beim Aufruf einer Seite
Page-Exit
--> Beim Verlassen einer Seite
Site-Enter
--> Beim Aufruf einer Web-Site
106
www.drweb.de
Kapitel 2
--> Beim Verlassen einer Web-Site
Die maximale Zeitspanne beträgt 30 Sekunden.
Site-Exit
23 Seitenübergänge beherrscht der Internet Explorer seit der
Version 4.0 Bitte übertreiben Sie es mit diesen Effekten nicht.
Wählen Sie eine kurze Reaktionsgeschwindigkeit. Wenn eine Seite
mehrmals aufgerufen werden muss (beispielsweise beim
Zurückblättern), ist "Site-Enter" die bessere Wahl.
Transition Name
Box in
Box out
Circle in
Circle out
Wipe up
Wipe down
Wipe right
Wipe left
Vertical blinds
Horizontal blinds
Checkerboard across
Checkerboard down
Random dissolve
Split vertical in
Split vertical out
Split horizontal in
Split horizontal out
Strips left down
Strips left up
Strips right down
Strips right up
Random bars horizontal
Random bars vertical
Random
www.drweb.de
Wert
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
107
Kapitel 2
Wie Sie als Web-Designer die Auto CompleteFunktionen des IE5 nutzen
Microsofts neues Flaggschiff mag für den Designer nicht viel
Neues bringen. Die eine oder andere Perle gibt es aber doch zu entdecken. Auto
Complete,
das
ist
die
automatische
Vervollständigung von Online-Formularen. Um die Sache zu optimieren, hat sich Microsoft ein neues Attribut für den <input> Tag
einfallen lassen.
Sogenannte VCards (auch als Email-Anhängsel
bekannt) speichern definierte Formularangaben und
stellen Sie später in Form eines DropDown-Menüs
erneut zur Verfügung. Das soll auf die Dauer eine
Menge lästiger Tipparbeit sparen, denn ein
Doppelklick genügt.
Der HTML-Code für ein Email-Formularfeld
<input type=text name=email size=20 maxlength=150
VCARD_NAME="vCard.email">
Damit die Angaben für alle Web-Sites gleichermaßen gültig sind
und tatsächlich wiederverwendet werden können, gibt es exakte
Vorschriften für die Namensgebung der Attribute.
vCard.Cellular
vCard.Company
vCard.Department
vCard.DisplayName
vCard.Email
vCard.FirstName
vCard.Gender
vCard.Home.City
vCard.Home.Country
vCard.Home.Fax
vCard.Home.Phone
vCard.Home.State
vCard.Home.StreetAddress
vCard.Home.Zipcode
vCard.Homepage
108
vCard.MiddleName
vCard.Notes
vCard.Office
vCard.Pager
vCard.Business.City
vCard.Business.Country
vCard.Business.Fax
vCard.Business.Phone
vCard.Business.State
vCard.Business.StreetAddress
vCard.Business.URL
vCard.Business.Zipcode
vCard.JobTitle
vCard.LastName
www.drweb.de
Kapitel 2
Wem das alles zu viel wird, der kann die Funktion auch abstellen.
<input type="text" name="creditcard" AUTOCOMPLETE="OFF">
Der Internet Explorer beherrscht die Vervollständigung auch so,
und zwar immer dann, wenn er beim Ausfüllen eines
Formularfeldes auf bekannte Bezeichnungen trifft. Wer irgendwo
schon einmal ein Feld namens "Email" ausgefüllt hat, bekommt
den Eintrag beim zweitenmal automatisch serviert. Das funktioniert aber nur, wenn man sich an die Konventionen hält. Wer das
Input-Feld für die Email-Adresse mit "em3454" bezeichnet, tut seinen Gästen keine Gefallen.
www.drweb.de
109
Kapitel 2
Noch Fragen...?
Rätselhafter doppelter Bildaufbau, wie geht das?
Er ist kein großes Geheimnis. Es wird mit dem Tag
lowsrc="bild.gif" gemacht, der innerhalb des <img> Tags platziert
wird. Dieses Bild wird zuerst geladen. Man muss also eine zweite
Grafik mit geringerer Auflösung und Farbzahl erstellen, so dass
sie schneller geladen werden kann. Diese Grafik wird zuerst vom
Browser angezeigt, die zweite (und eigentliche) wird im
Hintergrund vorbereitet. Kleiner Haken: Das funktioniert nur mit
Netscape Browsern. Deshalb ist es zumeist sinnvoller sogenannte
Interlaced-Grafiken zu verwenden, die einen Bildaufbau nach Art
einer Jalousie ermöglichen.
Weniger häufig trifft man auf die Animation als Problemlöser.
Dabei ist die Sache ganz einfach: Man erzeuge zur gewünschten
Grafik eine passende niedrigauflösende Schwarzweiß Grafik und
schraube beide zu einer einfachen Animation zusammen. Auch
wenn der Gesamtplatzbedarf dadurch ansteigt, die Vorschau
kommt mit einem Zehntel des Speicherbedarfs aus. Erfreulicherweise wird die S/W Grafik beim Download zuerst und
zwar recht flott angezeigt, während im Hintergrund die prächtige
Farbgrafik noch durch die Leitung rauscht. Ideal für aufwendige
Illustrationen und Logos auf der Startseite. Selbstverständlich
lässt sich das Ganze auch einsetzen, um interessante optische
Effekt zu erzielen, mehrere Zwischenstufen können ebenfalls eingebaut werden, ohne die Geduld der Besucher auf die Probe zu
stellen.
Ich suche einen Befehl mit dem ich einen Surfer wieder auf
die zuvor besuchte Web-Seite zurück bringen kann.
Das geht mit Javascript und sieht folgendermaßen aus:
<a href="javascript:history.back()">Zurück</a>
110
www.drweb.de
Kapitel 2
Noch Fragen...?
Eine zweite Möglichkeit wäre:
<a onmouseover="window.status='zurück';return true;"
href="link.htm" onmouseout="window.status=' ';return true;"
onclick="history.back();return true;">Zurück</a>
Natürlich lässt sich an Stelle des Textes auch eine Grafik verwenden, die man einfach an die selbe Stelle positioniert. Wenn man
den Besucher auf die zuvor besuchte Web-Site zurückschicken will,
kann man das auch mit SSI machen, sofern der Server dazu in der
Lage ist.
Ich bin gerade beim Aufbau meiner Homepage und würde
gerne Wissen, ob es einen HTML-Code gibt mit dem ich den
Rahmen um eine Grafik abschalten kann, wenn ich diese
verlinke.
Traditionell sind verlinkte Grafiken mit einem blauen Rand umgeben. Das schien den ersten Webdesignern nötig, um kenntlich zu
machen, dass sich hinter der Grafik etwas Anklickbares befand.
Heutzutage wird das allerdings kaum noch gemacht. Anklickbare
Grafiken sind gang und gäbe. Der Rahmen wird vom Browser
automatisch erzeugt. Wenn das nicht erwünscht ist, fügen Sie einfach border="0" in den <img> Tag ein.
<img src="grafik.jpg" width="50" height="50" alt="text"
border="0">
Gibt es eine Lösung, um die Browser zu zwingen, kleine
Schriftarten anzuzeigen, obwohl in der Systemsteuerung
große Schriftarten voreingestellt sind? Die großen
Schriftarten verzerren nämlich das ganze Layout einer
Seite.
Wenn jemand große Schriftzeichen haben will oder das sogar
muss, ist es keine gute Idee, ihn zu etwas anderem zwingen zu wollen. Dann nämlich verschwindet der Surfer schnell wo anders hin.
Grundsätzlich gibt es viele Möglichkeiten, die Darstellung von
Webseiten zu beeinflussen.
www.drweb.de
111
Kapitel 2
Noch Fragen...?
.. Man kann die Systemsteuerung benutzen
kann die Schrift im Browser vergrößern
. Man
Man kann die Bildschirmauflösung verändern und z.B. auf
einem 17" Monitor eine Auflösung von 800*600 fahren, dann
wird das Layout auch verändert.
. Man
kann ein persönliches Style Sheet beim Surfen
verwenden (IE).
Weitreichende Kontrollmöglichkeiten hat man als Designer mit
Style Sheet-Befehlen, damit lässt sich auch die Schriftgröße in
Punkten (pt) erzwingen. Aus den bereits erwähnten Gründen ist
das aber ist oft nicht sinnvoll.
Ich möchte 6 Bilder hintereinander reihen, aber ohne einen
Abstand zueinander. Genau diesen Abstand will ich übergehen.
Setzen Sie die Bilder in eine (unsichtbare) Tabelle und definieren
Sie für jedes Bild eine Zelle. Anschließend werden die Maße für
PADDING, SPACING und BORDER auf null gesetzt. Dann verschwinden
die Abstände.
Mit und ohne Tabelle, der besseren Sichtbarkeit wegen wurde der
Tabellenrahmen auf "1" gesetzt.
Die Tabelle sorgt in jedem Fall für Stabilität, egal, ob die
Einzelgrafiken in horizontaler oder in vertikaler Richtung angeordnet sind. Durch das Zerschneiden großer Grafiken und das
nachfolgende Einsetzen in eine Tabelle lassen sich interessante
Effekte erzielen. Dem Gast wird überdies die Wartezeit verkürzt.
Den gleichen Effekt erreichen Sie, wenn Sie die Codezeilen für den
IMG-Tag einfach hintereinander setzen, denn die Abstände resultieren aus der Trennung. Das funktioniert jedoch mit WYSIWYGEditoren kaum, da diese Programme zumeist den Quellcode
umformatieren.
112
www.drweb.de
Kapitel 2
Noch Fragen...?
<img src="images/4.gif"><img src="images/4.gif">
statt
<img src="images/4.gif">
<img src="images/4.gif">
Wie werden Images richtig eingebunden?
Damit man sich auch bei abgeschalteter Grafikanzeige zurechtfindet, gibt es das ALT-Attribut. Außerdem wird der Text beim
Drüberfahren mit der Maus angezeigt. Damit ein Browser Text vor
den Grafiken laden kann, müssen alle Images mit Angaben zu
Width und Height ausgestattet werden. Diese Angaben erfolgend
in Pixel, nicht etwas in Zentimetern. Nun wissen Text und Grafik,
wo sie hin gehören und beim Seitenaufbau "zuckt" es nicht mehr
so.
<img src="logo.gif" alt="Willkommen auf meiner Homepage" border="0" width="98" height="65">
Braucht man ALT-Attribute?
Es genügt nicht, einfach die automatischen Voreinstellungen der
Editor-Software zu übernehmen. Frontpage 3.0 z.B. setzt ALTAttribute nach folgendem Muster ein: logogross.gif (5654kb). Was
soll ein Gast damit anfangen? Nutzen Sie diese Möglichkeiten für
zusätzliche Erklärungen. Auch einige Suchmaschinen werten ALTAttribute, insbesondere wenn Sie Seiten ohne Text produzieren.
Und noch etwas: Für Sehbehinderte mit Screenreadern sind die
ALT-Attribute logischerweise eine wichtige Informationsquelle.
Denn die sehen von all den schönen Grafiken gar nichts.
Klappt das auch mit Image-Maps?
Innerhalb einer Image-Map könnte der Code wie folgt aussehen:
<AREA SHAPE="RECT" ALT="Link" COORDS="311, 2, 427, 20"
HREF="link.htm">
www.drweb.de
113
Kapitel 2
Noch Fragen...?
Es ist ebenfalls möglich, "on mouse over" Befehle in eine ImageMap einzubinden.
Wie stelle ich den Text höher oder tiefer?
Dies besorgt ein betagter, aber recht selten eingesetzter Befehl:
<sup>stellt den Text höher</sup>
<sub>stellt den Text tiefer</sub>
Kann ich eine spezielle Schriftart auf meinen Seiten verwenden?
Eigentlich nicht, denn definieren kann man mit HTML zwar alle
Fonts (Schriftarten), angezeigt aber werden sie nur dort, wo sie
auch installiert sind. Trotzdem gibt es eine, wenn auch sehr eingeschränkte Möglichkeit. Die Lösung heißt WebFont-Manager und
kommt von der Firma Bitstream. Es funktioniert über ein Plug-in,
das der Besucher zuerst einmal herunterladen muss. Das geht
recht schnell und ist kostenlos. Der WebFont-Manager selbst
kostet um die 200,- Dollar. Das Plug-in funktioniert nur mit dem
Netscape Communicator ab Version 4.03 und dem IE ab Version 4
(Mac zur Zeit noch gar nicht). Mit CSS, falls jemand das vermuten
sollte, geht es nicht.
Bei Texteingabefeldern setzt der Netscape Communicator
immer eine bestimmte Länge fest, auch wenn ich mit "size"
die Zahl der Zeichen begrenze. Wie kann ich den
Communicator dazu bringen, eine definierte Breite des
Textfeldes anzuzeigen?
ist bereits die Länge des Input-Feldes, angegeben als
Anzahl der Zeichen, die eingegeben werden dürfen. Allerdings
sehen die Felder mit den beiden großen Browserfamilien recht
unterschiedlich aus, je nachdem welche Version man verwendet.
Diesem Umstand kann man mit dem Attribut width="xx" gegensteuern. Es verändert die Breite der Felder und auch des SubmitButtons bei neueren Netscape Browsern.
"size"
114
www.drweb.de
Kapitel 2
Noch Fragen...?
<input type="text" name="textfield" size="40" width="40">
Achten Sie darauf, mit dem Attribut maxlenght="xx" genügend
Platz für die Eingaben des Gastes zu schaffen
Mit welcher Zeichenkombination stelle ich ein EuroZeichen dar?
Ein Euro-Zeichen lässt sich ebenso wie deutsche Umlaute maskieren. Die Zeichenfolge € entspricht dann dem €. Das aber
kann nur funktionieren, wenn der Besucher über relativ neue
Fonts auf seinem Rechner verfügt. Ganz selbstverständlich ist das
nicht. Alternativ ließe sich eine Grafik einsetzen.
Wie kann ich die Reihenfolge des Bilderladens bestimmen
und die Bildausgabe unterdrücken, bis alle Bilder geladen
sind?
Die Reihenfolge lässt sich unseres Wissens nach nicht festlegen,
der Browser lädt sogar mehrere Bilder gleichzeitig
(Multithreading). Gerüchteweise soll die Reihenfolge etwas mit
dem Alphabet zu tun haben, aber wann und unter welchen
Umständen das genau passiert, ist uns nicht bekannt. Zur zweiten
Frage. Diese müssen nur alle in einer einzigen Tabelle liegen. Das
sollte eigentlich reichen. Der Tabelleninhalt wird erst angezeigt,
wenn alles geladen ist. Im Normalfall ist allerdings immer das
Gegenteil erwünscht.
www.drweb.de
115
Kapitel 2
7. Links zum Thema
HTMLhelp prüft Ihre Style Sheets auf Syntaxfehler und gibt
Tipps
http://www.htmlhelp.com/tools/csscheck/
Ein Online-Tool von ID Labs erzeugt einen fertigen CSS-Code, der
über Cut and Paste in eine beliebige HTML-Seite eingefügt werden
kann. Alle derzeit verfügbaren Tags stehen zur Auswahl.
Veränderungen können an Hand eines Beispiels live mitverfolgt
werden. Wer sich noch nicht damit beschäftigt hat, kann hier tiefere Einblicke genießen. Ein CSS-fähiger Browser und Javascript
sind erforderlich.
http://idlabs.org/css/mill/
CSS Frequently Asked Questions
http://www.hwg.org/resources/faqs/cssFAQ.html
Freeform
http://www.note.com/success/public/freeform/
Bitstream WebFont Manager
http://www.bitstream.com/webfont/index.html
116
www.drweb.de
Kapitel 2
Für Ihre Notizen
www.drweb.de
117
Kapitel 3
Auf das Know-how kommt es an
Dr. Web-Trickkiste
HTML ist trotz seines eingeschränkten Befehlssatzes recht vielfältig. Unzählige Webdesigner haben sich über Jahre Gedanken darüber gemacht, wie man mehr herausholen kann. Gerade die kleinen Tricks und Kniffe sind es, die ein Web-Projekt interessanter
machen, eine Prob-lem lösen helfen oder einfach nur für Spaß und
neue Funktionen sorgen.
Bilder blitzschnell laden
Wenn Sie Grafiken bereits vorher laden, geht das eigentliche
Laden ganz schnell. Dazu brauchen Sie kein Javascript. Geben Sie
einfach die Bildgröße mit width="1" height="1" an. Den dabei
eventuell entstehenden kleinen Punkt können Sie am Seiten-Ende
geschickt unterbringen. Das Ganze funktioniert aber nur, wenn
Sie die Seite, die der Besucher anklicken wird, "voraussagen" können. Das trifft zum Beispiel auf Seiten zu, die nach dem Ausfüllen
eines Formulars erscheinen. Diese Grafik erscheint sofort, ohne
lästige Ladezeiten, denn sie wurde bereits über die vorhergehende
Seite geladen. Möglich wird das, weil Browser einmal gelade-ne
Dateien, gleich ob Grafik, Bild oder Applet, im Festplatten-Cache
verwahren.
Tool-Tipps
Die hilfreichen gelben Fensterchen kennen Sie aus vielen modernen Anwendungen. Auch Microsofts Browser 4.0 und 5.0 sind in
der Lage, solche Tool-Tipps anzuzeigen. Dazu können Sie das
TITLE-Attribut innerhalb eines HTML-Elements benutzen. Dieser
Effekt kann auf Trennlinien, Überschriften, Textblöcken,
Formelementen, Tabellen oder Tabellenzellen angewendet werden.
Nur bei Grafiken braucht man sie nicht, denn dort gibt es das ALTAttribut, das auch Netscape Browser kennen und das zum guten
Stil einer HTML-Seite gehört.
118
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Trennlinie mit Tool-Tipp
<HR ALIGN="CENTER" WIDTH="200" SIZE="12" NOSHADE TITLE="Ein
hilfreicher Zusatztext">
Ein solches Hilfe-Fenster darf bis zu drei Inches lang sein und
kann insgesamt 1024 Zeichen enthalten. Damit nicht genug, Sie
können sowohl einen Zeilenumbruch erzwingen als auch
Tabulaturen setzen; dazu dienen geschützte Zeichen:
	 Tabulatur

 Zeilenumbruch
Kunstvolle Bilderrahmen mit verschachtelten Tabellen
Für diesem Effekt werden vier ineinander verschachtelte Tabellen
mit jeweils andersfarbigem Background benötigt. Damit der Effekt
funktioniert, wird jede Tabelle jeweils ein wenig ver-kleinert;
Variationen sind möglich.
<table border=1 cellpadding=2 cellspacing=0 width=140
bgcolor=#000000>
<tr><td>
bgcolor=#999999>
<tr><td>
bgcolor=#C0C0C0>
<tr><td>
bgcolor=#C0C0C0>
<tr><td>
<img src=images/bild.jpg width=115 height=149 border=0>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
www.drweb.de
119
Kapitel 3
Dr. Web-Trickkiste
Typozeichen
Kleine Typozeichen erzeugen Sie mit dem <hr> tag. Zum Beispiel:
<hr width="10"> <hr widht="25">
Angaben in Prozent und Farbangaben sind ebenfalls möglich, werden jedoch nicht von Netscape Browsern interpretiert.
Mehr Möglichkeiten bietet eine winzige Grafik, die aus nur einem
Pixel bestehen kann, was gut für die Ladezeiten ist. Die tatsächlich anzuzeigende Größe geben Sie mit width und height an. Die
Skalierung übernimmt dann der Browser.
Hyperlinks ohne Unterstreichungen
Damit ersparen Sie sich aufwändige grafische Menüleisten und es
sieht schick aus. Innerhalb eines Textes können solche Links aber
für Verwirrung bei Ihren Besuchern sorgen, denn die übliche
Unterstreichung signalisiert schon von Weitem den Link.
Realisiert wird das mit Stylesheets; angezeigt werden solche Links
von Browsern der 4. Generation. Wie solche Tags eingebaut werden, lesen Sie im Tipp "Hoverlinks"
Benutzen Sie dunkle Hintergrundgrafiken?
In diesem Falle sollten Sie auch eine entsprechende
Hintergrundfarbe (BGCOLOR) einstellen, die vor dem Laden der
Grafik angezeigt wird. Jetzt kann man den Text sofort lesen und
sich schneller zurecht finden. Für Gäste, die mit abgeschalteter
Grafikanzeige unterwegs sind, ist BGCOLOR im <BODY> sogar notwendig.
120
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Links zu Newsgroups
<A href="news:comp.unix.bsd.netbsd.misc">NetBSD News</a>
Das "news"-Protokoll teilt dem Browser mit, dass er den NewsReader starten soll. Der Rest ist der Name der Newsgroup. Für
den Fall, dass die Newsgroup nur auf einem bestimmten Server zu
finden ist, geben sie die URL des Servers mit an:
<A href="news://news.beispiel.com/mjhb.public.test">Test
Group</A>
Text genau platzieren
Anstelle der wirkungslosen Leerzeichen setzen Sie den <PRE>
</PRE> Tag, er umschließt formatierten Text, jetzt können Sie
beliebig viele Leerzeichen einbauen.
Nun greifen auch die
Leerzeichen wieder
und Sie können den
Text beliebig positionieren.
Browser interpretieren
formatierten Text automatisch
als Courier. Sie können aber
eine beliebige Schriftart definieren.
Tabellen stabilisieren
Wenn trotz Angaben zur Breite der Tabellenzellen das Layout auseinander fällt, können Streben eingezogen werden. Dazu benutzt
man unsichtbare Platzhaltergrafiken, sogenannte SinglePixelgrafiken oder Blind-GIFs. Es genügt, in einer einzigen Zeile
jeweils alle Zellen mit einer entsprechenden Grafik auszustatten.
Alle anderen Tabellenzellen passen sich an. Der benutzte Browser
spielt dann keine Rolle mehr. Auch die abgebildete Seite benutzt
Streben. Die linke gegraute Spalte behält so immer ihre Breite von
142 Bildpunkten (Pixel).
www.drweb.de
121
Kapitel 3
Dr. Web-Trickkiste
Mit "Border"
Dreamweaver
Attributen
sichtbar
gemachte
Blind-GIFs
hier
im
Editor
Dirty Tricks
I) Inline-Frames sind kaum zu erkennen und lassen sich ideal zum
"Vorladen" von ganzen HTML-Seiten benutzen, indem man alle
Parameter auf Null setzt. Wer eine entsprechend präparierte Seite
aufruft, lädt eine oder mehrere Seiten im Hintergrund. Damit
lässt sich aber auch Missbrauch betreiben und unlautere
Webdesigner können Ihren Kunden höhere Seitenabrufzahlen vorgaukeln oder auf ideale Weise Bannerexchange-Dienste oder
Werbekunden betrügen. Die manipulierten Seitenaufrufe stammen von den Servern selbst und rufen tatsächlich vorhandene
Angebotsseiten auf. Solche Möglichkeiten auszutesten, ist in
Ordnung, der Einsatz in der Öffentlichkeit allerdings nicht. Dass
die Sache nur mit dem IE ab Version 4.0 funktioniert, tut der
Wirksamkeit keinen Abbruch. Iframe-Seiten, die sich selbst aufrufen, entziehen dem Rechner aber seinen gesamten Arbeitsspeicher
und können ihn zum Absturz bringen.
II) Brückenseiten werden benötigt, um die Präsenz in den
Suchmaschinen zu erhöhen. Brückenseiten sind schnell erkannt,
weil es nirgendwo einen Link gibt, der auf eine solche Seite verweist. Abhilfe schafft ein unsichtbarer Verweis.
<a href="/eingang/seite34.htm"></a>
Dieser Link wird nicht im Browser angezeigt, doch Suchmaschinen
folgen ihm.
122
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Besucher automatisch auf die nächste Seite leiten:
Fügen Sie den folgenden Tag direkt unter <HEAD> ein
<meta http-equiv="refresh" content="10; URL=next.htm">
Der Browser wird sich 10 Sekunden Zeit nehmen und Ihre
Besucher dann automatisch zur nächsten Seite leiten. Wählen Sie
0 für eine sofortige Weiterleitung. Mit demselben Befehl lässt sich
auch zu einem ausführbaren CGI-Script weiterleiten. Eine sinnvolle Anwendung für Letzteres ist uns allerdings nicht bekannt.
Überschriften mit Verlauffarben
Solche Lösungen sehen komplizierter aus, als sie sind. Das
Beispiel wirkt am besten auf einem schwarzen Hintergrund.
Allerdings sind unendlich viele Variationen denkbar.
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
color="#0000FF">V</font><font
color="#1414F5">r</font><font
color="#2727EC">a</font><font
color="#3B3BE2">f</font><font
color="#4F4FD8">i</font><font
color="#6262CF"> </font><font
color="#7676C5">b</font><font
color="#8686C3">r</font><font
color="#9191C8">c</font><font
color="#9D9DCE">r</font><font
color="#A8A8D3">f</font><font
color="#B4B4D9">e</font><font
color="#0A0AFA">e</font>
color="#1E1EF0">l</font>
color="#3131E7">u</font>
color="#4545DD"> </font>
color="#5959D3">n</font>
color="#6C6CCA">Ü</font>
color="#8080C0">e</font>
color="#8C8CC6">s</font>
color="#9797CB">h</font>
color="#A3A3D1">i</font>
color="#AEAED6">t</font>
color="#BABADC">n</font>
Hoverlinks
Diese Links verändern ihre Farbe, wenn man mit der Maus darüber fährt Das funktioniert ganz ohne Javascript und wird durch
ein Stylesheet ermöglicht. Es klappt aber nur mit dem IE ab
Version 4. Probleme mit anderen Browsern gibt es nicht.
www.drweb.de
123
Kapitel 3
Dr. Web-Trickkiste
Bei Mausberührung wechselt die Farbe zu Grau: Der Hovereffekt macht's möglich
Beispielcode:
A:link { color: #0099CC; text-decoration: underline; }
A:hover {color:red;text-decoration: underline;}
A:visited { color : purple; text-decoration: underline; }
A:active {color: #FF0000; background: #CFDFEB; textdecoration: none; }
A:bb:hover {color:red;text-decoration: underline;}
So geht's: CSS-Befehle einsetzen:
<html> <head>
<title>Seitenname</title>
<!-{ line-height : 150%; text-align : justify ; color : #8484C2;
//-->
</style></head><body></body></html>
Style Sheet-Befehle können in eine separate (Text-) Datei ausgelagert werden.
<link rel="STYLESHEET" href="style.css" type="text/css">
Netscape kennt die Hover Befehle nicht. Hier könnte man aber
etwas mit Javascript nachhelfen. Sinnvoll ist das jedoch nicht, da
Javascript bei bestimmten Browser-Unterversionen und
Betriebsystemen Fehlermeldungen produziert.
Bild nahtlos links oben platzieren
Erste Methode: Netscape und Microsoft ermöglichen keine einheitliche Umsetzung des Vorhabens. Damit es trotzdem funktioniert, werden die nötigen Attribute doppelt gesetzt. Platziert wer124
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
den sie innerhalb des <BODY> Tags.
leftmargin="0" topmargin="0" (für IE)
marginheight="0" marginwidth="0" (für NC)
Zweite Methode: Auch mit Style Sheets kommen Sie ans Ziel.
Das funktioniert aber nur mit Browsern ab der 4. Generation.
<STYLE>
.tabs {position: absolute; top: 0pt; left: 0pt}
</STYLE>
<BODY...
<div class="tabs" id="tabs">
Dritte Methode: Das zu platzierende Bild wird als Hintergrund
eingesetzt. Es werden entsprechend weite Ränder gelassen. Die
Breite der Grafik sollte dabei für alle Fälle mindestens 1680 Pixel
betragen, damit die Sache auch auf sehr großen Monitoren klappt.
Vierte Methode: Wenn man eine Site mit Frames gestaltet, kann
man im schon im FRAME SRC-TAG die Befehle MARGINHEIGHT="0"
MARGINWIDTH="0" eingeben; sie funktionieren beim IE und sogar
beim Navigator.
Per Mausklick in die Favoritenliste des IE
Eine hübsche und auch durchaus sinnvolle Sache, bei der
Javascript im Spiel ist. Unnötig zu erwähnen ist, dass Netscape
www.drweb.de
125
Kapitel 3
Dr. Web-Trickkiste
dabei manchmal eine Fehlermeldung produziert. Die Alternative:
Für Benutzer des Navigators genügt es STRG + D bzw. Apfeltase
+ D zu drücken.
Bookmark Dr. Web (IE)
<a href="javascript:window.external.AddFavorite('http://www.
ideenreich.com/drweb.htm', 'Dr. Web - Know-how für
Webworker')">Bookmark Dr. Web (IE)</a>
Jeder Klick auf den Link wird von den Server-Logs protokolliert.
Auf diese Weise ist sogar eine Erfolgskontrolle möglich.
Wischeffekte für Netscape Browser
Interessante Effekte erzielen Sie durch die Verwendung von
Singlepixel-Grafiken als Seiten-Hintergrund. So baut sich die
Grafik von links oben nach rechts unten auf. Das funktioniert auch
als Tabellenhintergrund. Mit einer 1*1000 Pixel oder 1680*1 Pixel
großen Grafik erzeugen Sie einen Übergang von links nach rechts,
bzw. oben nach unten. Microsoftbrowser müssen hier passen.
Dafür gibt es die Transitions (siehe Kapitel HTML) .
Eckige Aufzählungszeichen
Die sogenannten Bullets (Listenzeichen) lassen sich variieren,
ohne das Grafiken eingesetzt werden müssen. Drei zusätzliche
Möglichkeiten stehen Ihnen auf diese Weise zur Verfügung:
rund und hohl
eckig
rund
126
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Der HTML-Code lautet:
<ul type=circle>
<li>rund und hohl</li>
</ul>
<ul type=square>
<li>eckig</li>
</ul>
<ul type=disc>
<li>rund</li>
</ul>
Um Formatierungen zu sparen, lassen sich auch Style-Sheets einsetzen.
Farbige Bullets
Bullets lassen sich vielfältig und flexibel durch Sonderzeichen
() darstellen. Unterschiedliche Größen erzielen Sie mit dem
Font-Tag (im Beispiel oben Verdana unten Arial). Auch font-size
kann zum Einsatz kommen.
<p><font face="Verdana, Arial, Helvetica, sans-serif font
size="2">
<font color="#009933"></font>
<font size="2">Früchte</font><br>
<font color="#993399"></font>
<font size="2">Salat</font></font></p>
<p><font color="#6633CC" face="Arial, Helvetica"></font>
<font face="Arial, Helvetica">Fische<br>
<font color="#6633CC"></font>Früchte<br>
<font color="#6633CC"></font>Salat</font></p>
Vertikal Zentrieren
Gar nicht so einfach ist es zum Beispiel, auf einer Startseite ein
Logo unabhängig von der Bildschirmauflösung exakt in den
www.drweb.de
127
Kapitel 3
Dr. Web-Trickkiste
Mittelpunkt des Bildschirmes zu bringen. Das lässt sich erreichen,
indem man eine Tabelle mit Angaben zu Breite und Höhe über das
ganze Dokument legt.
Der Quellcode
<table border="0" align="center" width="100%" height="100%"
cellspacing="0" cellpadding="0"><tr><td>
<center>Logo</center>
</td></tr></table>
Javascript einbauen
Dass man bei Ideenreich Javascript nicht sonderlich mag, ist kein
Geheimnis. Man kann so viele schöne Sachen damit machen, aber
leider funktionieren sie nicht immer. Das ist insbesondere dann
ein Problem, wenn die Navigation ganz oder teilweise an Scripten
hängt. Zum Glück gibt es - ebenso wie bei den Frames - auch hier
einen hilfreichen Tag.
<noscript></noscript>
Alles, was innerhalb der Klammern steht, wird von nicht
javascriptfähigen Browsern angezeigt. So weit das feststellbar ist,
wird diese Möglichkeit kaum genutzt. Gegen die üblichen
Fehlermeldungen schützt die Methode allerdings nicht.
Umfangreiche Codes müssen nicht sämtliche Seiten unnötig auf128
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
schwemmen. Lagern Sie Ihr Javascript ganz einfach in eine Datei
aus. Eventuelle Änderungen wirken sich sofort auf alle Seiten aus.
<script language="JavaScript" src="java.js"
type="text/javascript"> </script>
Der Code steht dann in der Datei java.js - Auch Suchmaschinen
mögen das.
Netscape und die Farbe der Tabellenrahmen
Leider kann der Navigator/Communicator keinerlei Rahmenfarben in Tabellen darstellen. Mit einem kleinen Trick geht es aber
doch; zumindest ergibt sich ein interessanter Effekt. Der "schattige" Teil der Rahmenlinien nimmt nämlich die Hintergrundfarbe
an. Die eigentliche Hintergrundfarbe stellt man ersatzweise über
eine einfarbige Grafikdatei ein.
Wasserzeichen als Hintergrund
Wasserzeichen sind eine microsoftspezifische Variante des
Background-Befehls, die sich jedoch gefahrlos einsetzen lässt.
Microsofts Erweiterung sorgt dafür, dass ein Hintergrund feststeht, das heißt, nicht mitscrollen kann. Der so entstehende Effekt,
bei dem sich die Seiten-Inhalte über den Hintergrund bewegen,
wird Wasserzeichen genannt. So aufregend das klingt, die Praxis
ist nüchtern, denn sowohl Text als auch Bilder, die sich über den
feststehende Hintergrund bewegen, erzeugen je nach gewähltem
www.drweb.de
129
Kapitel 3
Dr. Web-Trickkiste
Hintergrund unschöne, holprige Effekte, der optische Gesamteindruck wird gestört und das Lesen erschwert.
<background="bild.gif" bgproperties="fixed">
Noch einmal Borders und Frames
Selten zu sehen, aber ganz einfach, sind farbige Trennlinien zwischen den Frames:
bordercolor="#0099CC"
Seitenhintergrund ohne Kacheleffekt
Konkrete Bildinhalte eignen sich weniger gut als BildschirmHintergrund, denn durch die veränderbare Fenstergröße kommt
es zu ungewollten Vervielfältigungs-Effekten, das sogenannte
Kacheln. Ein Problem, das sich umgehen lässt. Fügen Sie dem
Hintergrundbild breite Ränder in der Farbe des Hintergrundes
hinzu. Die Ränder müssen groß sein. Nach links braucht die
Grafik etwa 1600 Pixel, nach unten reichen 1000. Wenn man das
als GIF speichert, ist die Dateigröße kein Problem. JPG-Formate
eignen sich für große Flächen weniger gut. Alternativ lassen sich
Frames auch so einstellen, dass sie bei jeder Bildschirmauflösung
in der gleichen Größe erscheinen. Die Scrollbalken können dabei
abgeschaltet werden; das Frame lässt sich perfekt anpassen und
der Kacheleffekt hat keine Chance mehr.
130
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Tabellenaufbau beschleunigen
Eine Tabelle wird erst angezeigt, wenn der komplette Inhalt geladen ist. Das kann bei umfangreichen Gestaltungen recht lange
dauern. Etwas besser geht es, wenn man die Maße der Tabelle
angibt. Also height und width in absoluten Zahlen, dann muss der
Browser weniger rechnen.
Die beste Möglichkeit ist, eine Tabelle in mehrere kleine Tabellen
zu teilen. Allerdings kommt es dabei immer wieder zu Problem bei
der Darstellung. Die Einzeltabellen weichen, mit verschiedenen
Browsern betrachtet, voneinander ab. Maße für einzelne
Tabellenzellen nützen meist nichts und treiben HTML-Autoren
zur Weißglut. Man tut besser daran, ganz darauf verzichten und
Streben (Blind-GIFs) einzuziehen.
Wunschbesucher anziehen
Neugierige Webmaster studieren regelmäßig Ihre Log-Dateien und
Site-Statistiken. Die machen Sie am besten auf Ihre Seiten aufmerksam, indem Sie einen Link setzen und dafür sorgen, dass er
auch angeklickt wird. Damit tun Sie nicht nur Ihrem Kollegen
einen Gefallen - Sie nützen auch sich selbst. Wer Log-Dateien studiert, ist grundsätzlich neugierig und wird wissen wollen, wer da
was über ihn schreibt. Ein Gegenbesuch ist wahrscheinlich. Dieses
Verfahren ist oft viel wirksamer und für beide Seiten nützlicher,
als eine Email zu schreiben und darin um einen Besuch zu bitten.
Außerdem macht es Spaß, großzügig zu sein.
Liste mit "Referrern" ermittelt mit WebSuccess
www.drweb.de
131
Kapitel 3
Dr. Web-Trickkiste
Schnellerer Download trotz Proxy
Wenn Sie größere Dateien downloaden wollen und feststellen, dass
die Ladezeit einen halben Arbeitstag zu verbrauchen droht, dann
brechen Sie den Download kurzerhand ab und beenden die
Verbindung. Der Proxy wird die Datei trotzdem laden. Nach einer
gewissen Wartezeit wiederholen Sie den Vorgang. Diesmal kommt
die Datei direkt vom Proxy, mit entsprechend verbesserter
Geschwindigkeit. Das funktioniert allerdings nicht immer, da es
ist konfigurationsabhängig ist. So ist es möglich, dass Dateien ab
einer gewissen Größe nicht weitergeladen werden oder nur solche,
bei denen der Download bei mehr als 50% abgebrochen wurde.
Der schönste Browser der Welt
Jetzt dürfen Webdesigner auch auf das Design des Browsers Wert
legen. Mit Neoplanet hinterlassen Sie bei Präsentationen bleibenden Eindruck. Das neue Design setzt auf eine bestehende Internet
Explorer-Installation mit frei konfigurierbarer Bookmarkleiste
und eigenen Mailclient auf. Der kostenlose Download umfasst 2,6
MB. Neoplanet erfordert einen Internet Explorer ab Version 4.0
Inzwischen gibt es mehrere Hundert sogenannte Skins, die
bequem online installiert werden können. Das ergibt Hunderte
optisch verschiedene Browser. So ist für jeden Geschmack etwas
dabei. Kunden, Bekannten und Kollegen können gebührend beeindruckt werden.
http://www.neoplanet.com
132
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Browserfenster per Knopfdruck anpassen
Gedacht für den Heimgebrauch, lässt sich mit ein bisschen
Javascript das Browserfenster schnell in die gewünschte Größe
bringen. Das ist insofern nützlich, als das der Internet Explorer
eine einmal gewählte Größe nicht lange beibehält. Außerdem lässt
sich eine Webseite schnell unter mehreren typischen Auflösungen
anschauen, was allerdings nicht immer mit jedem Browser klappt.
<form>
<input type=button value="640*480 Pixel"
onclick="window.resizeTo(640,480)" name="button">
</form>
Fenster mit 640*480 Pixeln, entspricht einem 14 Zoll Monitor
<form>
<input type=button value="800*600 Pixel"
</form>
Fenster mit 800*600 Pixeln, entspricht einem 15 Zoll Monitor
<form>
<input type=button value="Unsichtbares Fenster"
</form>
Mit (0,0) bringen Sie das Fenster zum Verschwinden, ohne dass
das Programm beendet wird. Bitte mit Bedacht anwenden, denn es
kann sein, dass Ihr Internet Explorer sich auch diese Stellung
merkt. Es kann dann ein Weilchen dauern, bis der Browser wieder
sichtbar wird.
HTML-Code ohne Einzüge spart Platz
Eigentlich sollen Einzüge die Übersicht erhöhen, doch die meisten
Editoren gehen verschwenderisch damit um. Was also tun, wenn
man Einzüge nicht konfigurieren kann oder sie wieder los werden
will?
www.drweb.de
133
Kapitel 3
Dr. Web-Trickkiste
Einen solchen HTML-Code mit vielen Einzügen kennen Sie
bestimmt:
<tr>
<td>
<table border="0">
<tr>
<td colspan="2">
<table border="0">
<tr>
<td></td>
</tr>
</table>
Versuchen Sie es mit dateiweitem Suchen & Ersetzen. Eine entsprechende Funktion bietet zum Beispiel Homesite. Wer darüber
nicht verfügt, kann sich mit Multireplace behelfen. Ersetzen Sie in
zwei Arbeitsschritten zuerst vier Leerzeichen durch keines und
dann zwei Leerzeichen ebenfalls durch keines. Das Ergebnis: Fast
alle Einzüge sind verschwunden, die Dateien sind übersichtlicher,
die Dateigröße geringer.
Inhalte einer Seite unten rechts ausrichten.
Zuerst wird eine unsichtbare Rahmen-Tabelle in den Maßen
width="100%" und height="100%" angelegt. Setzen Sie anschließend "valign" auf "bottom" und fügen Sie eine zweite Tabelle ein,
die nach rechts ausgerichtet wird; bloßer Text genügt dabei auch.
Diese Konstruktion zeigt unter allen Bildschirmauflösungen dieselbe Ansicht.
134
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Der Quellcode:
<html><head><title>Dr. Web Trickkiste</title></head>
<body bgcolor="#FFFFFF"><table border="0" width="100%"
height="100%"
cellspacing="0" cellpadding="0"><tr><td valign="BOTTOM">
<table border="0" width="250" cellspacing="0" cellpadding="2"
align="RIGHT"> <tr><td><font face="Verdana, Arial, Helvetica,
sans-serif">Text unten rechts - <br>
realisiert mit zwei Tabellen</font></td></tr>
</table></td></tr></table> </body></html>
Symbole für die Bookmarkliste
Aufmerksame Webmaster haben längst bemerkt, dass der Internet
Explorer 5 bei jedem Besuch nach einer ganz bestimmten Datei
verlangt. Sie heißt favicon.ico und sollte sich in jedem Verzeichnis
befinden, das Inhaltsseiten bereitstellt. Findet der IE nichts,
erzeugt er eine Fehlermeldung in den Logs. Was will der Browser
damit?
Das Bildchen wird wie bei einem Bookmark in die Favoritenliste
aufgenommen. Dort erscheint zukünftig die genannte Web-Site
mit einem eigenen Symbol, das gilt auch für die Adress-Leiste und
stellt einen nicht zu unterschätzenden Vorteil dar.
Das Favoriten Icon in der Adresszeile
Solche Ikonen lassen sich mit Freeware-Tools durch Umwandeln
einer Grafik-Datei erzeugen. Sie kann 32*32 Pixel groß sein, wobei
auch 16*16 funktionieren soll. Spezielle Icon-Malprogramme, zum
Beispiel Microangelo, bieten weitere Möglichkeiten, etwa transparente Hintergründe. Inwieweit Icons, die auf nicht Windows
Das Favoriten Icon in der Bookmarkliste
Systemen erstellt wurden, verwendbar sind, entzieht sich unserer
Kenntnis. Wissen sollten Sie allerdings, dass auf die Ikonen diejewww.drweb.de
135
Kapitel 3
Dr. Web-Trickkiste
nigen Surfer verzichten müssen, die das Verzeichnis der temporären Internetdateien verschoben haben. Fehlversuche mit
unzureichenden Ikonen können ebenfalls dazu führen, dass die
Sache zumindest zeitweilig nicht mehr funktioniert.
HTML-Code verstecken
Die schönsten Tricks sind die ganz einfachen. Füllen Sie Ihren
HTML-Code einfach mit sehr vielen Zeilenumbrüchen auf. Einige
Hundert sollten es schon sein. Wer dann den Quellcode aufruft,
sieht erst einmal nichts. Und nicht jeder ist helle genug, um ein
Weilchen nach unten zu scrollen. In Wirklichkeit ist das alles gelogen, aber selbst erfahrene Webworker sind schon auf diesen Trick
hereingefallen.
Der hier sichtbare Text (er ist ohne Funktion) verstärkt den Effekt
noch.

Tricks mit Transitions (IE 4.0/5.0)
Mit Microsoft Transitions lassen sich prima Seitenübergänge
gestalten. Diese Effekte können aber auch auf einzelne Objekte
(Text, Grafik oder Tabellen) innerhalb einer Seite angewendet werden. Das könnte hier und da aufwendige GIF-Animationen oder
136
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Java-Applets und demzufolge Ladezeit sparen. Leider funktioniert
dieser Trick nur mit dem Internet Explorer.
Der Quellcode
<html><head>
<style> .schrift { position: absolute; top: 110px; color:
#000000; visibil-ity: hidden;} </style>
<script language="JavaScript"> function main() {
if(schrift.filters.item(0).status != 2){
schrift.filters.item(0).Apply();
schrift.style.visibility="visible";
schrift.filters.item(0).Play(); }} </script> </head> <body
bgcolor="#FFFFFF" onload="main()"> <div id="schrift"
class="schrift" style="filter:revealTrans(Duration=6,
Transition=12)">
Text || Grafik || Tabelle
</div> </body> </html>
Vertikale Linien
Vertikale Linien sind mit einigen Blind-GIFs schnell zusammengebaut. Die aber sind wenig flexibel und nicht in der Lage, sich
wechselnden Inhalten anzupassen. Farbige Tabellenzellen und der
Spacer-Tag, der nur von Netscape Browsern interpretiert wird,
lösen das Problem. Jetzt spielt die Länge des eingefügten Textes
keine Rolle mehr, die vertikalen Linien passen sich an.
Der Quellcode
<table width="75%" cellpadding=0 align="CENTER"
cellspacing="5"> <tr> <td width=1 bgcolor="black"> <spacer
type="block" width=1></td><td>
<p align="justify">Vertikale Linien sind mit Blindgifs schnell
zusammengebaut, die aber sind wenig flexibel und nicht in der
www.drweb.de
137
Kapitel 3
Dr. Web-Trickkiste
Lage sich wechselnden Inhalten anzupassen. Farbige
Tabellenzelle und der Spacer Tag, der nur von Netscape
Browsern interpretiert wird, lösen das
Problem.<b></b></p>
</td><td width=1 bgcolor="black"><spacer type="block"
width=1></td></tr> </table>
Der schnelle Blick auf den Quellcode
Nicht jeder weiß, wie der Quellcode auf den Bildschirm gezaubert
werden kann. Ein Button und etwas Javascript können hier
Abhilfe schaffen. Das klappt zwar nicht mit jeden Browser, doch
wenn es klappt, entfällt umständliches Hantieren mit der rechten
Maustaste oder Menübefehlen.
Der HTML-Code:
<FORM> <INPUT TYPE="BUTTON" VALUE="Quelltext ansehen" onClick=
'window.location = "view-source:" + window.location' > </FORM>
Codezeilen einsparen mit <br> Tags
Font-Tags lassen sich sparsamer einsetzen, wenn man auf den <p>
Tag verzichtet. Der nämlich erfordert für jeden Absatz eine neue
Font-Anweisung. Absätze lassen sich auch mit (mehreren) <br>
Tags erzielen. Der Vorteil dabei ist, dass nur ein Font-Tag jeweils
am Anfang und am Ende des Textes notwendig ist. Insbesondere
bei längeren Texten lässt sich so einiges sparen. Das erhöht auch
die Übersicht. Die Methode ist für manchen eigenmächtigen
Wysiwyg-Editor allerdings nur bedingt geeignet, da diese
Programme zum Umformatieren neigen.
So wird´s gemacht:
<font size="2" face="Arial, Helvetica">
Beliebiger Text
<br><br>
Beliebiger Text
<br><br>
Beliebiger Text
<br><br>
</font>
138
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
An Stelle von:
<p>Beliebiger Text</p>
</font>
</font>
</font>
Anmerkung: Ein Leser machte uns darauf aufmerksam, dass diese
Methode beim IE 3.0 nicht funktioniert. In diesem Fall müsste ein
geschütztes Leerzeichen ( ) zwischen die beiden <br> Tags
gesetzt werden.
Komplette Seiten vorladen
Seiten vorladen mit JavaScript ist eine einigermaßen instabile und
komplizierte Methode. Besser geht das mit Inline-Frames, die
zwar einfach zu handeln sind, jedoch nur mit Microsoft Browsern
funktionieren. Setzen Sie die Maße für das Frame einfach auf "0".
Ähnlich funktioniert das mit echten Frames. Setzen Sie in die
index.html-Datei zwei Frames, wobei der eine sehr klein ist "1%"
und der andere entsprechend groß "99%". Das kleine, praktisch
unsichtbare Frameset, lädt dann die Seiten in den Browsercache.
Einen anderen, recht intelligenten Ansatz verfolgt das Java-Applet
QuickServ, das nicht nur HTML-Seiten vorladen, sondern auch
URL-Listen als Text-File nach Art der Style Sheets einziehen
kann. Es lädt Web-Seiten im Hintergrund in den Cache. In der
Statuszeile des Browsers ist davon nichts zu sehen. Das Applet
selbst kann unsichtbar eingebaut werden. Abgesehen davon, dass
wohl so mancher Webworker sich ein solches Tools irgendwann
einmal gewünscht hat und Besucher nun wesentlicher schneller
durch die Sites klicken können, hat das ganze einen nicht unwesentlichen Haken. Es werden nämlich weit mehr Pageviews produziert, als tatsächlich stattfinden. Immerhin, mit der Vollversion
(30 Dollar) lassen sich beliebig viele HTML-Seiten unbemerkt in
den Speicher des Besuchers schaufeln. Geschickt genutzt, verhelwww.drweb.de
139
Kapitel 3
Dr. Web-Trickkiste
fen Sie Ihren Gästen damit zu einer Quasi-ADSL-Geschwindigkeit. Eine Testversion des nur 7KB großen Applets steht zum
Download bereit. Mit ihr können fünf Seiten vorgeladen werden,
genug für einen ausführlichen Funktionstest.
http://www.heathcosoft.com
Zurück (Back) -Link mit SSI
Dieser Link schickt Ihre Besucher dorthin zurück, woher sie
kamen. Dabei müssen Server Side Includes (SSI) vorhanden und
der Besucher über einen Link gekommen sein. Bei manuell eingetippten Adressen oder Lesezeichen funktioniert es nicht.
Quellcode:
<a href="">BACK LINK</a>
Teilrahmen mit CSS
Style Sheet-Rahmen (Borders) ermöglichen die Verzierung von
Tabellen, Inputfeldern und Submit-Buttons mit Einzellinien.
Damit lassen sich zum Beispiel die Eingabefelder von For-mularen
farblich kennzeichnen.
Der Quellcode:
<form>
<input type="TEXT" name="name" size="30" style="BORDER-RIGHT:
red thin solid"> <input type="TEXT" name="test" size="30"
style="BORDER-RIGHT: yel-low thin solid">
</form>
Das funktioniert auch mit Grafiken und Textpassagen, bietet also
allerlei Gestaltungsmöglichkeiten. Erlaubt sind:
border-right
border-top
140
border-left
border-bottom
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Rahmen in beliebiger Breite erhalten Sie mit einer Angabe in
Pixeln
style="BORDER-TOP: blue 10 solid"
Diese Effekte werden nur vom IE5 angezeigt.
Randalierer aussperren
Netz-Hooligangs tummeln sich in Bereichen, die sie nichts angehen oder kritzeln in Gästebücher. Da hilft nur noch eines:
Hausverbot. Doch das ist in der Regel schwierig, denn das Web ist
öffentlich. Eine Möglichkeit bietet die Datei .htaccess, die auf
Apache Webservern zu finden ist. Laden Sie die Datei vom Server
und tragen Sie die IP-Adresse oder den Domainnamen des
Störenfrieds nach diesem Muster ein:
"deny from .b-misc.net" "
deny from .b-124.52.321.22."
Statt eines reichen Betätigungsfeldes blicken die bösen Jungs
dann auf einen Servererror (500). Einen Haken hat das allerdings:
Es werden je nach Provider auch mehr oder weniger viele harmlose Zeitgenossen ausgesperrt. Die Methode ist dennoch als
Notbremse recht wirkungsvoll.
Fenster schließen
Eine prima Sache, dass man einen Browser mehrmals starten
kann und auf diese Weise den Besucher mit vielen schicken
Fenstern beglücken kann. Leider kann das schnell unübersichtlich
werden. Deshalb bietet es sich gelegentlich an, einen Button oder
Link zum Schließen des Fensters anzubieten. Das geht zwar auch
ohne, doch wird ein freundlicher Service immer gern gesehen.
<a href="JavaScript:self.close()">Fenster schließen</a>
Mit Formular-Button
<form>
<input type=button value="Frameset schließen?"
onClick="self.close()">
</form>
www.drweb.de
141
Kapitel 3
Dr. Web-Trickkiste
Javascript-Abfrage als Brückenseite
Ein kleines Script stellt fest, ob der Browser des Besuchers
Javascript beherrscht. Das funktioniert über eine simple
Weiterleitung auf die eigentliche Seite (seite.html), was natürlich
nur dann klappt, wenn Javascript vorhanden ist.
<html><head><title>Seitentitel</title>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT></head>
Genau deshalb kann es auch als Brückenseite fungieren, denn
Suchmaschinen können mit Javascript nichts anfangen. Sie müssen also nicht mehr tun, als eine Seite mit den obigen Quellcode
und etwas Text ausrüsten. Verwenden Sie eine <h1> Überschrift
und das Suchwort sowohl im Text als auch im Titel. Wer diese
Seite über eine Suchmaschine aufruft, gelangt über die eingebaute Weiterleitung auf die richtige Seite.
Einen Haken hat die Sache trotzdem: Besucher mit alten
Browsern kommen nicht weiter. Bedienen Sie sie mit einem
zusätzlichen Link. Wer Javascript aus Sicherheitsgründen abgeschaltet hat, kann sich ebenfalls auf die nächste Seite retten.
Nervig wird die Sache nur, wenn diese Seite tatsächlich Javascript
erfordert. Nicht vergessen: Weiterleitungen dieser Art setzen den
Back-Button außer Kraft. Da hilft nur ein geschickter Doppelklick
oder die Liste der zuletzt besuchten Seiten.
...und es geht doch - Passwortschutz mit Javascript
Auch mit Javascript kann man einen Passwort-Schutz realisieren.
Der Trick dabei ist, dass das Passwort nicht irgendwo im Quellcode
verborgen, sondern Teil des Dateinamens ist. Lautet dieser
"seite.htm", so ist das Passwort "seite". Wer das Passwort nicht
kennt, hat also kaum eine Chance. Schließlich lassen sich hier
auch komplizierte Bezeichnungen wählen. Der simple JavascriptSchutz besteht aus zwei Teilen. Den größeren Block setzen Sie in
den Dateikopf, der kleinere ist der direkte Link.
142
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
<script language="JavaScript">
<!-function Passw()
{
var password = 'Bitte geben Sie hier Ihr Passwort ein!'
password=prompt('Passwortgeschützer Bereich. Ihr
Passwort:','');
location.href=password + ".htm";
}
//-->
</script>
Der Link sieht dann so aus:
<a href="javascript:Passw()">Seite</a>
Anmerkung: Im Verzeichnis muss sich eine index.htm Datei
befinden, sonst erhält man (je nach Web-Server-Konfiguration) ein
Directory-Listing und kann die Datei selbst anklicken.
Vollbildmodus unter Navigator und Internet Explorer
Wer hätte das gedacht: Der Netscape Navigator hat doch noch ein
paar gute Tricks auf Lager. Viele Anwender wissen gar nicht, dass
Ihr Browser sich in einem Präsentationsmodus starten lässt. Der
Nachteil bei dieser Verwandlung ist, dass man diese Option vor
dem Aufrufen des Browser aktivieren muss und während des
Betriebs nicht zurücksetzten kann. Schauen wir, wie das unter
Windows funktioniert:
Mit den Parametern -k für Kiosk und -sk für Superkiosk können
Sie den Navigator im Präsentationsmodus aufrufen. Während im
Kioskmodus noch die Titelleiste zu sehen ist, füllt die Anzeige des
Superkiosks den ganzen Bildschirm aus (bis auf die Taskleiste, die
sich aber "verstecken" lässt). Geben Sie dazu einfach im entsprewww.drweb.de
143
Kapitel 3
Auf das Knowhow kommt es an
Dr. Web-Trickkiste
chenden Feld der Dialogbox "Ausführen" folgende Zeile ein:
C:\Programme\Netscape\Communicator\Program\netscape.exe -sk
C:\Programme\Netscape\Communicator\Program\netscape.exe -k
Navigator bar aller Kontrollen
Der Internet Explorer hat eine ähnliche Funktion. Diese ist leichter zu aktivieren und kann jederzeit während des Betriebs beeinflusst werden. Mit der Taste [F11] öffnen Sie den Internet Explorer
im Vollbildmodus, welcher sich nach nochmaligen Betätigen der
[F11] Taste schließt. Zusätzlich kann die Steuerungsleiste über
einen Klick mit der rechten Maustaste deaktiviert werden.
Per Mausklick die Startseite festlegen
Wie man per Klick in die Favoritenliste kommen kann, haben wir
Ihnen schon gezeigt. Noch raffinierter ist der folgende Link, der
dem Besucher anbietet, die gerade aufgerufene Seite (es könnte
auch eine andere sein) als Startseite des Browsers festzulegen.
Das funktioniert aber nur einem Microsoft Internet Explorer und
auch nicht immer.
<a href="drweb.shtml"
onClick="this.style.behavior='url(#default
#homepage)';this.setHomePage('http://www.ideenreich.com/
drweb.shtml');">Diese Seite als Startseite festlegen</a>
Achtung: Bitte entfernen Sie vor Anwendung alle Zeilenumbrüche, da das Script ansonst nicht korrekt funktionieren kann.
144
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Gesperrte Links
Hyperlinks, die bereits angeklickt wurden, erscheinen für gewöhnlich in einer anderen Farbe. Das ist nicht zwingend vorgeschrieben, stellt jedoch eine wichtige Orientierung für den Besucher dar.
Wer mag, kann ein wenig mehr riskieren und die bereits
angeklickten Links regelrecht sperren. Mit einen CSS Tag lässt
sich das problemlos realisieren.
Das Ganze sieht dann nach dem Klick so aus: (Der Link bleibt
selbstverständlich weiterhin anklickbar)
Dieser Link wird nach dem Klicken gesperrt
Quellcode:
<a href="link.html" style="A:visited color : black; textdecoration: line-through">Link wird nach dem Klicken gesperrt
</a>
In ähnlicher Weise lassen sich Links auch zum Verschwinden bringen (color : white) vergrößern oder verkleinern und so weiter. CSS
bietet viele Möglichkeiten, sofern sie der Browser interpretieren
kann. Mit dem Navigator klappt es leider nicht.
Grafische Formular Buttons
Der Befehl <button> gehört zur offiziellen HTML 4.01
Spezifikation. Mit ihm läßt sich ein grauer Standard Button in
eine Grafik verwandeln. Die Sache ist nicht ganz so trivial, wie sie
sich im ersten Augenblick vielleicht anhört. Schließlich wissen
fortgeschrittene Webdesigner, wie sie den Button durch eine
Grafik austauschen. Der Unterschied liegt im Detail, dieser neue
Button verhält sich auch wie einer! Das lässt sich leicht durch
Anklicken mit der Maus überprüfen.
www.drweb.de
145
Kapitel 3
Dr. Web-Trickkiste
Wichtig dabei: Die verwendete Grafik muss ein transparentes
GIF sein, da der graue Button Hintergrund durchschimmert.
Alternativ genügt eine Grafik mit der selben, grauen Hintergrundfarbe.
Da der Netscape Navigator diesen Befehl nicht interpretiert, sollte zunächst auf seinen Einsatz verzichtet werden.
Der Quellcode:
<form>
<button type="submit" name="button"><img src="images/ie.gif"
width=36 height=36 border="0"></button>
</form>
Geister-Rollbalken im Internet Explorer abschalten
Wer schon einmal darauf geachtet hat, kennt den "GeisterRollbalken", ein Rollbalken, der auch dann erscheint, wenn es gar
nichts zu rollen gibt. Das macht so manche Seite hässlicher als
nötig, kann aber leicht abgestellt werden. Fügen Sie einfach dem
<body> Tag ein weiteres Attribut hinzu:
scroll="auto"
... und der "Geister-Rollbalken" ist Geschichte. Wenn trotzdem
gerollt werden muss, macht das gar nichts, der Rollbalken taucht
dann wieder auf.
Link-Umrandungen im Internet Explorer abschalten
Wird im Internet Explorer ein Link angeklickt, erscheint eine
gestrichelte Umrandung (Bouncing Border oder auch Link Line
genannt). Die abzustellen ist schon etwas schwieriger, da es kein
eingebautes Kommando dafür gibt. Es gibt aber mehrere Ansätze
via Javascript. Vielleicht probieren Sie es einmal mit dem
Folgenden. Nachteil: Jeder Link muss für sich damit behandelt
werden.
<a href="link.html"
onClick="javascript:if(document.all)this.blur();">link</a>
146
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Hintergrundgrafiken via CSS
Auch CSS liefert einige Möglichkeiten, Hintergrundbilder flexibel
einzubauen. Eine schmale Grafik (ca. 8 mal 8 Pixel) lässt sich so
auf verschiedene Weise einsetzen. Pfade bzw. Grafikdatei müssen
entsprechend angepasst werden.
Diese Befehlskette (in einem externen StyleSheet) erzeugt eine
fixe, durchgehende Linie am oberen Bildschirmrand, die nicht mitrollt.
BODY {background-image: url(images/back.gif);
background-repeat: repeat-x; background-attachment: fixed;}
fixe, durchgehende Linie am linken Bildschirmrand.
background-repeat: repeat-y;}
fixe, durchgehende Linie am oberen Bildschirmrand, die herausrollt.
background-repeat: repeat-x; background-attachment: fixed;}
www.drweb.de
147
Kapitel 3
Dr. Web-Trickkiste
Suchfeld im Internet Explorer selbst anlegen
Microsofts Browser verfügt über eine praktische "Suchen"
Schaltfläche. Damit hat man schnellen Zugriff auf die voreingestellten Suchmaschinen. Nun lässt sich diese Funktion nicht nur
konfigurieren, Sie können diese sogar komplett Ihren Wünschen
anpassen und die Suchfunktion der eigenen Web-Site als
Browserstandard benutzen.
Dazu allerdings braucht es einige Einträge in der Windows
Registry, was uns aber nicht schrecken soll. Es genügt eine ASCII
Textdatei mit der Endung .reg - Sie enthält untenstehende Zeilen,
die Sie Ihren Wünschen entsprechend anpassen können. Sie können jede beliebige Suchmaschine verwenden, da allerdings die entsprechenden Web-Seiten in einem schmalen Rahmen des Browsers
aufgerufen werden, ist eine angepasste Seite notwendig, sonst
wird die Sache zu unpraktisch und man muss ständig rollen.
Und hier der Inhalt der .reg Datei:
Wer Zugriff auf einen Server hat, kann eine solche Seite selbst
anlegen und beliebige Suchmöglichkeiten dort unterbringen.
Achten Sie darauf, ein Target für alle Links nach folgendem
Muster zu definieren target="_main" - Dies sorgt dafür, dass die
Suchausgabe und alle Links sich im Hauptfenster des Browsers
außerhalb der Suchleiste öffnen.
148
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Wer mag, kann sich die Dr.Web Suche herunterladen. Ein
Doppelklick nach dem Download (8k) auf die Datei drweb.reg
genügt. Wenn Sie beim nächsten Gang ins Netz auf "Suchen"
klicken, öffnet sich unsere Site-Suche. Wer das später wieder rückgängig machen will, braucht die Originaleinstellungen; die befinden sich in der Datei default.reg, mit der auf gleiche Weise zu verfahren ist.
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Search Page"="http://www.ideenreich.com/such.shtml"
"Search Bar"="http://www.ideenreich.com/such.shtml"
[HKEY_CURRENT_USER\Software\Microsoft\Internet
Explorer\SearchURL]
""="http://www.ideenreich.com/such.shtml"
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet
Explorer\Search]
"CustomizeSearch"="http://www.ideenreich.com/suchen.shtml"
"SearchAssistant"="http://www.ideenreich.com/such.shtml"
Navigator Feintuning
Auch der Netscape Communicator bietet über die Konfigurationsdatei PREFS.JS einige Möglichkeiten. So lässt sich noch ein
wenig mehr Leistung herauskitzeln oder der Browser eigenen
Bedürfnisse anpassen.
Die Datei liegt ein wenig versteckt, sie ist aber mit der
Suchfunktion leicht aufzuspüren. Sie können Sie mit einem beliebigen Texteditor öffnen und die entsprechenden Zeilen bearbeiten,
bzw. einfügen. Ein wenig Vorsicht ist angebracht. Am besten zuvor
eine Sicherheitskopie der Datei erstellen. Garantien übernehmen
wir nicht.
Versteckt den "Shopping" Button
user_pref("browser.chrome.disableMyShopping", true);
Diese Zeile beseitigt das "Radio Menü"
user_pref("browser.chrome.disableNetscapeRadio", true);
www.drweb.de
149
Kapitel 3
Dr. Web-Trickkiste
Bilder werden erst nach dem Text geladen
user_pref("images.incremental_display", false);
Dieser Eintrag schafft die automatische online Fehlermeldung bei
Programmabstürzen ab user_pref("general.fullcircle_enable",
false);
Mit diesem Eintrag können Sie die Anzahl der Verbindungen
erhöhen, die gleichzeitig vom Browser bearbeitet werden. Die
Standard-Einstellung ist 4. Bei guter Anbindung, können Sie die
Zahl der "Connections" erhöhen.
user_pref("network.max_connections", 4);
So erhöhen Sie den Wert der TCP Buffer. Die Standardeinstellung
liegt bei 32k, Sie können gefahrlos bis 128 erhöhen, der Browser
lädt dann gewissermaßen größere Brocken, was die
Geschwindigkeit erhöhen sollte.
user_pref("network.tcpbufsize", 32);
Timeout erhöhen oder erniedrigen. Mit der Voreinstellung wartet
der Browser 30 Sekunden, bis zur Fehlermeldung, wenn eine URL
nicht erreichbar ist.
user_pref("network.tcptimeout", 30);
Startbildschirm des Messengers beseitigen:
user_pref("mailnews.start_page.enabled", false);
Animiertes Netscape Icon (rechts oben) austauschen.
Anzahl der Animationen
(Frames) user_pref("toolbar.logo.frames", 30);
Pfad zum großen Icon (32 * 32 Pixel)
user_pref("toolbar.logo.win_large_file",
"c:\\meinbild\\gross.bmp");
Pfad zum kleinen Icon (16 * 16 Pixel)
user_pref("toolbar.logo.win_small_file",
"c:\\meinbild\\kleinl.bmp");
150
www.drweb.de
Kapitel 3
Dr. Web-Trickkiste
Linkleisten mit Überbiß
Sogenannte Hover-Links sind Links, die beim Darüberfahren mit
der Maus ihre Farbe verändern. Das kennen Sie. Bei Mausberührung könnte ein Bildhintergrund erscheinen, die Unterstreichungen anoder ausgeschaltet werden oder der Link mit
Kursiv- oder Fettschrift hervorgehoben werden.
Aber es lassen sich auch Links mit Über- und Unterstreichung
(overline/ underline) versehen. Ein prima Effekt, der besonders bei
nicht unterstrichenen Links gut zur Geltung kommt; und den darüber hinaus noch nicht jede Web-Site kennt. Dieser Effekt ist
Dank Hover-Effekt und Internet Explorer, sehr einfach zu realisieren. Opera und Netscape müssen an dieser Stelle passen, zu
Problemen kommt es jedoch nicht.
Der Quellcode für ein externes Style Sheet könnte dann folgendermaßen aussehen:
A:link { color : #0033CC; text-decoration: none }
A:visited {color : #0033CC; text-decoration: none }
A:bb:hover {color: #808080; text-decoration: underline }
A:bb:hover {color: #808080; text-decoration: overline }
A:active {color: #FF0000; text-decoration: none }
Im einzelnen:
A:link { color : #0033CC; text-decoration: none }
Normaler Link ohne Unterstreichung
A:visited {color : #0033CC; text-decoration: none }
Bereits angeklickter Link ohne Unterstreichung
A:bb:hover {color: #808080; text-decoration: underline }
Link bei Mausberührung mit Unterstreichung
A:bb:hover {color: #808080; text-decoration: overline }
Link bei Mausberührung mit Überstreichung
A:active {color: #FF0000; text-decoration: none }
Aktiver Link ohne Unterstreichung
www.drweb.de
151
Kapitel 3
Für Ihre Notizen
152
www.drweb.de
Kapitel 3
Für Ihre Notizen
www.drweb.de
153
Kapitel 4
Köpfchen ist gefragt
Die Kunst der Projektverwaltung
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Rätselhafte Namen - Datei-Endungen im Web
Dateien benennen - (k)eine Kunst?
Verschenktes Potenzial - Blind gesurft wird oft
Merkwürdigkeiten im Netz - Geschäfte mit Tippfehlern
Gewusst, wie - Menüs Updaten leichtgemacht
Richtungweisende Entscheidung Kluge Navigation ist die halbe Miete
Geschickt eingesetzt - Abfangjäger für Fehler
Auch der Meister lernt nie aus Upload-Regeln für Webmaster
Nicht ohne weiteres zu haben:
Die Lizenz zum Kopieren?
Sicher ist sicher - Das Web ist kein Fort Knox
Praktisch und elegant - Server Side Includes (SSI)
Zorro mit der Maske - Sonderzeichen richtig maskieren
Noch Fragen...? Wir haben die Antworten!
Zum Nachschauen im Netz - Links zum Thema
Web-Design ist mehr als Gestaltung und HTML, denn schon im
Vorfeld sind wichtige Fragen zu klären, damit nicht schon die
Pflege kleinere Projekte den Webmaster vor unlösbare Probleme
stellt. Vorhandene Sites umzurüsten, ist arbeitsintensiv und
bringt so manches organisatorische Problem mit sich.
1. Datei-Endungen im Web
Warum haben Dateien im Web unterschiedliche Endungen
und was bedeuten sie eigentlich?
.htm oder .html? Wo ist der Unterschied?
Der Unterschied besteht im "l". Aber im Ernst. Die Endung .htm
kommt vor, weil es vor Jahren viele Rechner gab, und auch noch
heute gibt, die keine Endungen mit vier oder mehr Buchstaben
anzeigen können. DOS und Windows 3.1 gehören dazu. Wer
Dateien benennen will, kann das tun wie er möchte. Ob .htm oder
.html, das macht keinen Unterschied. Auch alte Browser und solche auf 16 Bit Betriebssystemen können .html-Dateien korrekt
anzeigen.
154
www.drweb.de
Kapitel 4
Rätselhafte Namen
.shtml
Dabei handelt es sich weder um Super-HTML noch um eine neue
Sprache. Die Endung .shtml signalisiert dem Server, dass eine solche Datei Server Side Includes (SSI) enthält, die entsprechend
verarbeitet (geparsed) werden muss.
.jhtml
Auch das gibt es. Hier wirken HTML und Java über ein Servlet auf
einem WebLogic-Server. Infos gibt es bei weblogic.com.
.phtml
Hier ist es ganz ähnlich, nur das es um die Sprache PHP geht. Und
zwar in diesem Fall PHP/FI-Programme.
.php3
PHP3-Programme (.php4 bezeichnet PHP4/Zend-Programme)
.asp
Diese Dateien verwenden Microsoft ASP, wiederum eine Art
Scriptsprache, um dynamische Webseiten zu erzeugen.
Und wofür steht das Fragezeichen in mancher URL?
Das Anhängsel mit dem Fragezeichen wird vom Browser ignoriert,
es erscheint aber in den Server-Logs und kann statistisch ausgewertet werden. Es ist also kein wirklicher Bestandteil der Adresse
sondern dient lediglich der Identifizierung.
Wie verhalten sich Suchmaschinen?
Suchmaschinen ist es völlig egal, ob eine Datei auf .htm oder .html
endet. Auch .shtml und .phtml sind in der Regel kein Problem. Bei
.php3 sieht es schon anders aus, hier haben Suchmaschinen
Probleme.
Über das Web hinaus gibt aber unendlich viel mehr DateiEndungen. Wer wissen möchte oder wissen muss, welche Endung
für welche Datei steht, schaut bei "Wotsit" vorbei.
www.wotsit.org
www.drweb.de
155
Kapitel 4
Keine große Kunst?
2. Dateien richtig benennen
Die Möglichkeiten, Datei-Namen zu vergeben, sind vielfältig, aber
nicht uneingeschränkt. Welche Namen dürfen für Dateien im
Internet verwendet werden? Worauf muss geachtet und was vermieden werden? Die Praxis zeigt immer wieder, das durchaus noch
(Wissens-) Lücken bestehen und es dadurch zu Fehlern in der
Bezeichnung der Datei-Namen kommt, die sich negativ auf die
Arbeit auswirken.
So darf die Länge eines Datei-Namens 256 Zeichen nicht überschreiten. Zahlen bedeuten für einen Datei-Namen kein Problem.
Die Tilde "~" ist ebenso erlaubt wie Punkte möglich sind (Beispiel:
seite.diesunddas.html). Dafür allerdings sind Umlaute (ä, ü, ö)
und das "ß" tabu und sollten ebenso wie Sonderzeichen, z.B. ( ) = /
* , vermieden werden. Das ? (Fragezeichen) ist für einen angehängten Kommentar reserviert. Auf Leerzeichen sollte unbedingt verzichtet werden. Benutzen Sie dafür den Unterstrich "_".
Unterschiede zwischen Groß- und Kleinschreibung machen weder
Windows- noch Macintosh-Systeme. Es scheint zwar so, wird aber
nicht wirklich praktiziert. Server, die auf Unix-Systemen laufen,
kennen aber sehr wohl Unterschiede. Hier muss die Groß- und
Kleinschreibung streng beachtet werden. Man sollte vorbeugend
und ausschließlich die Kleinschreibung für alle Dateien und
Verzeichnisse verwenden.
Auf der sicheren Seite befindet sich, wer die sogenannte "8+3
Regel" für DOS-Dateien anwendet. Das trifft vor allem dann zu,
wenn Sie downloadbare Versionen anbieten oder Dateien auf CDROM oder Diskette veröffentlichen wollen. Erlaubt sind dabei die
Buchstaben a bis z und die Zahlen 0 bis 9.
Beispiel: vorlage1.txt
Auch die Sprache eines Dokumentes kann am Dateinamen ersichtlich sein: "Einfache" Dateinamen kennzeichnen die Dokumente in
deutscher Sprache. z.b. index.htm, Anhängsel dagegen bleiben
weiteren Sprachversionen vorbehalten.
Beispiele: _e englisch: index_e.htm, _i italienisch: index_i.htm, _f
französisch: index_f.htm
156
www.drweb.de
Kapitel 4
Verschenktes Potenzial
3. Blind gesurft wird oft
Bevor Surfer eine Suchmaschine konsultieren, wird gern der
"Blindflug" probiert. Das heißt, ein sinnvoll erscheinender
Domain-Name wird schnell in die Adressleiste des Browsers
getippt. In Eile oder in Unkenntnis wird gern der Zusatz www.
unterschlagen. Der wäre auch gar nicht nötig, wären alle Domains
entsprechend präpariert. Auch http:// ist bei modernen Browsern
nicht notwendig. Das den meisten Web-Adressen vorangestellte
"www." ist nicht etwa ein Hinweis auf das eingesetzte Protokoll,
sondern ein Maschinen-Name oder ein Alias für einen solchen; der
eben naheliegenderweise www lautet.
Es könnte aber auch ein anderer sein, denn keine Regel schreibt
vor, das die drei Buchstaben Bestandteil einer Webadresse sein
müssen. Das sind sie ja auch nicht - der Domainname existiert
unabhängig davon. Aus diesem Grund ist es sinnvoll, dass eine
WWW- Präsenz auch ohne www. erreichbar ist. Das geht ganz und
gar ohne Mehrkosten, der Provider oder Systemadministrator
muss es nur einrichten.
Erstaunlicherweise gibt es aber eine Fülle von Präsenzen, die ohne
vorangestelltes www. eben nicht erreichbar sind. Verschenktes
Potenzial und ein zusätzlicher Hemmschuh oft gerade für die
Menschen, die zwar den Firmennamen kennen, aber die URL nicht
zur Hand haben. Wenn es einen Beweis braucht, probieren Sie die
.de Domains der folgenden Firmen:
www.drweb.de
157
Kapitel 4
Merkwürdigkeiten im Netz
Kabel (New Media)
Siemens (Elektronik)
Microsoft (Software)
Fielmann (Brillen)
BMW (Automobile)
Dr-Oetker (Lebensmittel)
Quelle (Versandhaus)
Veba (Versorger)
Was die Großen nicht können, schaffen die Kleinen schon lange.
Machen Sie die Probe aufs Exempel und versuchen Sie es mit
Ihren Domainnamen. Eine Email an den Provider sollte im Falle
eines Falles genügen ...
4. Geschäfte mit Tippfehlern
Die einen mögen den Kopf schütteln, die anderen eine kluge
Geschäftsidee rühmen. Warum nicht vom Tisch der ganz Großen
die Krumen aufsammeln? Ein paar Mark für eine neue Domain
sind schließlich schnell aufgebracht. Kriminell ist das nicht, doch
hat diese Art von "Teilhabe" etwas Armseliges an sich.
Wer selbst nachschauen möchte, wird schnell zum Zuge kommen.
So leitete ein Buchstabendreher bei http://www.donwload.com an
die Firma http://www.paritate.com/ weiter. Bei Eingabe von
http://www.altavist.com/ treffen Sie auf einen Webspace-Provider.
Sie sehen ihn wieder, wenn Sie http://www.hottbot.com probieren.
Unfreundlicherweise öffnet sich sogleich ein zweites Fenster mit
Werbung. Damit nicht genug, wer lange genug aushält, kommt in
den Genuss einer Weiterleitung auf eine Pornoseite.
158
www.drweb.de
Kapitel 4
Gewusst, wie...
Es geht aber noch ärger: http://www.firebal.de schickt Sie über
mehrere Weiterleitungen auf die Seiten von zup.org, die der Firma
Nutzwerk gehören.
Eine schon etwas größere Portion Dummheit unterstellen die
Betreiber der Domain http://www.feierball.de den Surfern. Sie
landen bei http://www.kennzeichen.de
So war's vor Anfang des Jahres, inzwischen klappt das nicht mehr,
die Tippfehlerseite leitet korrekt zu Fireball weiter und gehört
auch zu Gruner + Jahr. Was hier wohl im Hintergrund passiert ist?
Und schließlich ist auch die Pornobranche wieder im Rennen.
http://www.hotbott.com und http//www.licos.com bringen Sie auf
einschlägig bekannte, unappetitliche Angebote.
5. Menüs Updaten leichtgemacht
Sie kennen das Problem: Auch Menüleisten müssen gelegentlich
verändert werden. Wer das nicht jedes Mal von Hand erledigen
will, nutzt intelligente Features, die es mitunter ganz umsonst
gibt.
a. Editor
Kein Problem mit Frontpage und Dreamweaver. Letzterer nutzt
eine sogenannte Library-Funktion. Die Menüleiste wird in eine
eigene Datei ausgelagert und bei Veränderungen automatisch in
jede Seite neu eingefügt. Nachteil: Alle veränderten Seiten müssen
anschließend auf den Server geladen werden.
b. Frames
Frames machen die Pflege einer Menüleiste einfach. Allerdings
müssen zahlreiche Nachteile in Kauf genommen werden.
Komplizierte Strukturen erhöhen den Arbeitsaufwand und
Einsteiger und Gelegenheitssurfer haben Probleme im Umgang
mit Frames.
www.drweb.de
159
Kapitel 4
Gewusst, wie...
c. Software
Hashinclude ist ein kleines Offline-Tool. Nach dem Update der
Menüdatei genügt ein Doppelklick auf die Steuerdatei, der Rest
geschieht automatisch. Auch hier gilt: Alle veränderten Dateien
müssen erneut hochgeladen werden. Benutzer von WYSISYGEditoren müssen die eine oder andere Klippe umschiffen, aber erst
einmal eingerichtet, funktioniert es prächtig.
Multireplace ermöglicht bequemes dateiübergreifendes Suchen
und Ersetzen. Files können aus dem Explorer einfach herübergezogen werden. Mit Cut and Paste lassen sich auch größere Blöcke,
etwa Menüs, auswechseln. Außerdem lassen sich auf diese Weise
schnell Datum oder Adressen aktualisieren; Dateien können
nachträglich mit CSS-Befehlen oder Meta-Tags versehen werden.
d. Server Side Includes (SSI)
SSI sind an den Dateiendungen wie .shtml oder .shtm erkennbar.
Die Seiten werden quasi online zusammengesetzt. Der Vorteil
besteht darin, dass nur die separaten Menüdateien hochgeladen
werden müssen. Der Nachteil ist, dass vorhandene Dateien umbenannt und Links und Suchmaschineneinträge umgeleitet werden
müssen.
So stellen Sie fest, ob Ihr Server SSI fähig ist: Erstellen Sie eine
Demodatei mit dem Namen test.shtml. Fügen Sie folgenden Code
ein:

Rufen Sie die Datei auf; wird das Datum angezeigt, können Sie die
volle Funktionalität nutzen.
e. Datenbanken und Redaktionssysteme
Ein beispielsweise CGI-gesteuertes Datenbanksystem kann Seiten
komplett online zusammensetzen, was eine Profilösung für Sites
mit umfangreichen redaktionellen Inhalt darstellt. Aufwendige
Redaktionssysteme wie inSite oder Software á la Flash Page
ermöglichen Content-Management und die Zusammenarbeit mehrerer Personen im Team.
160
www.drweb.de
Kapitel 4
Richtungweisende Entscheidung
6. Kluge Navigation ist die halbe Miete
Das Web ist weder eine Litfass-Säule noch ein Irrgarten.
Hintereinandergeschaltete Anzeigenflächen bringen Ihren
Besuchern gar nichts. Niemand mag zwischen endlosen
Seitenfragmenten vor und zurück klicken. Je mehr Informationen
Sie anbieten, desto wichtiger wird eine übersichtliche und ausgeklügelte Navigation. Die perfekte Navigation wurde aber noch
nicht erfunden. Weil wir viel zu wenig darüber wissen, gilt es
Neues auszuprobieren und auf möglichst viele Eventualitäten vorbereitet zu sein.
Wichtig: Die wichtigsten Dinge sollten direkt von der Startseite
aus erreichbar sein. Aber: Da Sie als Webdesigner nicht wissen, an
welcher Stelle ein Gast eine Site betritt, braucht jede(!) Seite
zumindest eine rudimentäre Navigation. Seiten, die nichts weiter
als einen "Zurück"-Button enthalten, frustrieren und lassen im
Ungewissen.
Wo soll man klicken? Die Gefahr für den Seitenbetreiber ist groß, das der Besucher
auf den Fremdlink oder die Werbung klickt. Um zur Web-Site zu gelangen, müsste
man auf den Schriftzug oben klicken.
Wenn Sie Navigations-Elemente mit Javascript oder Applets aufwerten oder als Image-Map anlegen, brauchen Sie zusätzliche
Text-Links, damit niemand ausgesperrt wird. Wohin aber mit den
Navigations-Elementen? Am oberen Seiten-Ende oder am linken
www.drweb.de
161
Kapitel 4
Seitenrand sind die typischen Varianten. Eher ungewöhnlich ist
der rechte Seitenrand. Links gehören in den Text - zusätzliche
Text-Links, etwa beim ausschließlichen Gebrauch von ImageMaps, können Sie am Seiten-Ende platzieren. Entwerfen Sie doch
einmal einen Linkkasten und staffieren diesen mit einem
Pulldown-Menü (Java oder ein CGI-Redirect-Script) und einigen
Buttons aus - das spart Platz.
Eine oder mehrere Ihrer eigentlichen Start-/Hauptseite vorgeschaltete Seiten, ein sogenannter "Eingangstunnel", kann Ihre
Gäste richtig heiß machen. Wenn das aber auf unoriginelle Weise
geschieht oder jemand gar ein Firmenlogo für interessant hält,
verkehrt sich die gute Absicht schnell ins Gegenteil.
Sie können auch einen Link als Ausgang reservieren. Auch hier
gilt, wesentlich Attraktiveres als ein schnödes "Auf Wiedersehen",
auch wenn es nett gemeint ist, sollte Ihnen schon einfallen.
Inhaltsverzeichnisse - Sitemaps
Verschiedene Besucher haben auch verschiedene Erwartungen
und Vorlieben. Die einen bevorzugen ein Suchformular, die anderen klicken am liebsten aufs Geratewohl durch das Angebot .
Wieder andere freuen sich über ein Inhaltsverzeichnis, das auch
als Sitemap bezeichnet wird und sich als ausgesprochen nützlich
erwiesen hat. Gerade umfangreiche Angebote profitieren von einer
solchen Sitemap, über die man schnell einen guten Überblick
Sitemap bei KIA
162
www.drweb.de
Kapitel 4
erhält. Da bekanntlich viele Wege nach Rom führen, sollte jede
Seite einen Link auf die Sitemap enthalten, sonst kann die Sache
nicht funktionieren. Umgekehrt soll die Sitemap auf alle Seiten
eines Angebots verweisen.
Klare Strukturen auf Sitemaps sind zwingend erforderlich. Dazu
werden Seiten zu Gruppen zusammengefasst, die nach den
Erwartungen der Besucher gestaltet und nicht nach Kompetenzen,
Zuständigkeiten oder Abteilungen des Anbieters werden sollen.
Auch eine Ordnung nach Datum kann sinnvoll sein. Bei umfangreichen Inhalten geht das nicht. Dann gehört das wichtigste an
den Anfang. Vielleicht diejenigen Seiten, die am häufigsten
angeklickt werden, so kommen Sie den Erwartungen Ihrer Besucher entgegen.
Eine Sitemap sollte einfach gehalten sein. Sie soll schnell geladen
werden können und vor allem die Suche nach bestimmten Themen
oder einmal gelesenen Artikeln erleichtern. Wer will, kann die
Seite auch durchscrollen oder die Suchfunktion des Browsers darauf anwenden. Die einfache Gestaltung ist aber nicht unbedingt
ein Muss. Sitemaps lassen sich auch mit Phantasie gestalten. Die
Ladezeiten sollten dabei allerdings nie außer Acht gelassen werden. Sonst kann die Sache Ihre Funktion nicht erfüllen. Übrigens:
Auch Suchmaschinen mögen Sitemaps. Schneller kann ein Spider
Ihre Seiten gar nicht finden.
Die klassische Alternative ist eine eigene Suchmaschine, die platzsparend und fast jeder damit vertraut ist. Die Möglichkeiten reichen von einem simplen Freeware-Script über mehr oder weniger
kostenpflichtige Dienste bis hin zur individuellen Suchmaschine,
die garantiert alles findet. Abschließend ein gutgemeinter Rat:
Zwingen können Sie Ihre Besucher zu nichts - wer lange suchen
muss, geht woanders hin.
7. Abfangjäger für Fehler
Wer eine nicht vorhandene Seite aufruft oder beim Eintippen der
Adresse einen Fehler macht, erhält üblicherweise eine wenig hilfreiche Fehlermeldung vom Server. Das muss, jedenfalls auf den
www.drweb.de
163
Kapitel 4
Geschickt eingesetzt
meisten Servern, nicht sein. Wer will, kann die Fehlermeldung
dem eigenen Seiten-Design anpassen. Das ist nicht nur schöner,
sondern auch nützlich. Vor allem auch dann, wenn Sie Seiten entfernen wollen, die noch in Suchmaschinen gelistet sind. Diese
Besucher gehen Ihnen ansonsten verloren, weil die typische
Fehlermeldung weder einen Link, noch eine sonstige freundliche
Geste bereithält.
So gehen Sie dabei vor: Kopieren Sie die Datei .htaccess vom
Server. Unter Umständen ist diese Datei zwar vorhanden, aber
unsichtbar. Sie können sie auch als einfache Textdatei neu anlegen
und die folgenden Zeilen hineinkopieren.
ErrorDocument
ErrorDocument
ErrorDocument
ErrorDocument
401
402
403
404
/fehler/fehler.htm
/fehler/fehler.htm
/fehler/fehler.htm
/fehler/fehler.htm
Anschließend wird ein neues Verzeichnis "Fehler" eingerichtet.
Dort platzieren Sie die Datei fehler.htm, deren Inhalt beliebig ist,
jedoch absolute Adressierungen enthalten sollten. Am besten weisen Sie darauf hin, dass die gewünschte Seite nicht vorhanden ist
und platzieren einige Links. Die Seite kann auch ein
Suchformular, eine Sitemap oder Grafiken enthalten.
Nicht schön, aber hilfreich: Die Fehlerabfangseite bei Altavista
164
www.drweb.de
Kapitel 4
Geschickt eingesetzt
Wichtig dabei ist, dass die Datei .htaccess an den Ort gehört, an
dem auch die index.html-Datei (oder eine andere festgelegte
Startseite) residiert. Wenn Sie die Datei über FTP nicht erreichen,
versuchen Sie es mit Telnet. Diese Methode funktioniert nicht mit
Windows NT-Servern. Wenn die Datei nicht zur Verfügung steht,
können Sie alternativ ein CGI-Script probieren, zum Beispiel "Bird
Trap".
Auf Grund unseres Berichtes wies uns Dr. Kalb, Projektleiter bei
Fireball, darauf hin, dass die serverseitige Ausschaltung des "404
Errors" Suchmaschinen vor Probleme stellen kann. Einige davon
sind nämlich auf den Returncode angewiesen und können einmal
indizierte Seiten nicht mehr aus dem Index löschen. Nicht länger
vorhandene Seiten würden dann auf ewig in den Datenbänken verbleiben. Die gute dabei Nachricht ist, dass man bei Fireball mitdenkt und sich den Gegebenheiten angepasst hat. Nicht vorhandene Seiten werden inzwischen trotz Abfangjäger aus dem Index
gelöscht. Wie weit das allerdings auch für Suchmaschinen wie zum
Beispiel spider.de oder so traurige Projekte wie nathan.de gilt, sei
dahingestellt.
Weder hilfreich, weder schön: Die 404 Seite bei Fireball
www.drweb.de
165
Kapitel 4
Auch der Meister lernt nie aus
8. Upload-Regeln für Webmaster
Eine neue Version ins Netz zu hieven, kann bei größeren Projekten
Kopfschmerzen verursachen. Auch kleinere Updates von nur einigen Seiten können unversehens zur Fehlerquelle mutieren. Damit
das nicht passiert, haben wir einige Hinweise für Webmaster
zusammengestellt. Sie wissen schon: Aus Erfahrung wird man
klug. Dabei liegt es in der Natur der Sache, dass Regeln gebrochen
oder missachtet werden. Das tun wir selbstverständlich auch.
Dennoch kann es nützlich sein, sich an den einen oder anderen
Hinweis zu halten.
Regel Nr. 1
Teste nach jedem Upload Deine Seiten online. Anderenfalls wirst
Du ein Opfer des Groß-/Kleinschreib-Problems. Windowsrechner
und Macs machen keinen Unterschied, ein Unix-Server aber sehr
wohl. Wer so etwas häufiger macht, sollte zudem darauf achten, den
Browser-Cache vorher zu leeren. Sonst kommen die Daten von der
Festplatte, nicht vom Server.
Regel Nr. 2
Checke nach größeren Uploads Deine Links. Gerade WYSIWYGEditoren neigen dazu, Zeichen zu konvertieren und zu verstümmeln. Was auf dem heimischen Rechner korrekt erscheint, funktioniert im Web plötzlich nicht mehr. Hier gilt es, genau hinzuschauen.
Regel Nr. 3
Teste veränderte Versionen mit den wichtigsten Browsern. Bereits
eine Kleinigkeit, wie ein fehlendes erzwungenes Leerzeichen, kann
ein komplettes Layout zunichte machen.
Regel Nr. 4
Führe größere Uploads niemals zu Stoßzeiten durch. Günstig ist es,
den Wecker auf 4 Uhr zu stellen, wenn auf deutschsprachigen
Seiten kaum jemand unterwegs ist.
Regel Nr. 5
Teste Deine Formulare nach jedem Upload, denn sicher funktioniert erst, was man selber ausprobiert hat.
166
www.drweb.de
Kapitel 4
Auch der Meister lernt nie aus
Regel Nr. 6
Schütze Deine Unterverzeichnisse. Damit sich niemand unversehens in einem FTP-Verzeichnisbaum wiederfindet, sollte jedes
Unterverzeichnis eine "Default Seite" (= index.html o.ä.) enthalten.
Diese kann einen Link oder eine Meta-Weiterleitung enthalten.
Hier hat niemand etwas zu suchen. Unterverzeichnis auf dem Server der Viag AG
Regel Nr. 7
Lösche keine alten Seiten. Einmal veröffentlichte Seiten bleiben
oft für halbe Ewigkeiten in den Suchmaschinen präsent, auch
Links verweisen manchmal jahrelang auf nicht vorhandene
Seiten. Verwende alternativ eine Meta-Weiterleitung oder eine
Fehlerabfang-Seite.
Regel Nr. 8
Nimm dir Zeit. Größere Uploads müssen sorgfältig geplant und
noch sorgfältiger durchgeführt werden. Es ist nützlich, Bekannte,
Kollegen oder Freunde zu einer Vorbesichtigung einzuladen.
Regel Nr. 9
Weise auf Arbeiten im Hintergrund hin, wenn sich die Aktion über
einen längeren Zeitraum erstreckt.
www.drweb.de
167
Kapitel 4
Freibeuter der Netze
9. Die Lizenz zum Kopieren?
Das ist vielleicht jedem schon einmal passiert. Ideenreich gestaltete Texte und mühsam erstellte Grafiken finden sich plötzlich auf
ganz anderen Seiten wieder. Daraus ergibt sich zwangsläufig die
Frage: Was darf man im Web kopieren, nachmachen oder mitnehmen?
Wenn eine Site kostenlos Informationen anbietet, bedeutet das
nicht, dass man sich gratis zu eigenen Zwecken bedienen darf.
Bekannte Werke wie die SelfHTML sind von zahlreichen
Dumpfhirnen als eigenes Opus ausgegeben worden. Sich mit fremden Federn und auf Kosten anderer schmücken zu wollen, zeugt
von peinlicher Dummheit, blauäugiger Unbedarftheit oder in
schlimmen Fällen von aufkeimender krimineller Energie. So mancher Webworker und Homepageautor ist sich der Problematik gar
nicht bewusst, wie die Erfahrungen zeigen.
Textklau springt weniger ins Auge, kommt aber ebenso häufig vor.
Da passiert es, dass sich ein Kollege unserem Vorstellungstext einverleibt und dann auf seiner Startseite präsentiert. Auch der
Ideenreich-Slogan wird bedenkenlos kopiert. Wie muss es um die
Kreativität und Formulierungskünste von Agenturen bestellt sein,
die sich solcher Methoden bedienen? Gar nicht zu reden von damit
einhergehender Unfairness. Versuchen Sie das mal im richtigen
Leben. Heerscharen gieriger Anwälte sorgen schnell für blutige
Nasen.
Original und Fälschung - leider kein Einzelfall.
168
www.drweb.de
Kapitel 4
Auch die Ressourcenseite ist ein beliebtes Objekt der Begierde.
Eine Linkliste zu kopieren mag ja noch hingehen, so sie eh allgemein bekannte Verweise anbietet. Eine spezielle Zusammenstellung oder Kommentare zählen nicht in unter die Rubrik
Freiwild.
Javascripts aus Fremdseiten zu klauben, ist längst zu einer Selbstverständlichkeit geworden. Das Auslagern in separate Dateien
hilft, schützt aber nicht. Auf der sicheren Seiten fahren Sie, wenn
Sie Ihre Scripts via ASP auf dem Server laufen lassen, was leider
nur auf Microsoft-Servern funktioniert. Das gilt natürlich nur für
ganz spezielle, selbst erstellte Skripte, nicht für Allgemeingut.
Wer sich anregen lässt, wer lernt oder die Ideen anderer aufgreift
und weiterentwickelt, muss sich dafür nicht schämen. Das tun wir
alle. Wer sich am Eigentum anderer vergreift, muss mit Konsequenzen rechnen.
Wenn Sie sich als Opfer eines Freibeuters wiederfinden, genügt oft
eine freundliche aber bestimmte Email. Mancher bekommt einen
Schrecken und das war's dann. Wenn das nicht reicht, bleibt noch
die Möglichkeit, die Sache öffentlich anzuprangern.
Unsere Empfehlungen sollen Ihnen zeigen, dass es die
Lizenz zum Kopieren nicht ohne weiteres gibt.
Es spielt keine Rolle ob ein Artikel, eine Seite, eine Grafik oder
sonst etwas mit einem Copyright-Hinweis gekennzeichnet ist. Gerade kleinere Elemente wie Buttons, Linien, Symbole, Typozeichen
gelten als beliebte Sammelobjekte - sie sind aber eigenständige
Leistungen, die dem Urheberrecht unterliegen und nicht übernommen werden dürfen. Es sei denn, sie sind ausdrücklich als "frei verfügbar" gekennzeichnet. In diesem Fall, und nur in diesem, darf
man sich gern bedienen.
HTML-Tags unterliegen keinem Urheberrecht. Anders jedoch verhält es sich mit den Sätzen, die darüber geschrieben werden. Wäre
das nicht so, würden wir alle nur aus Büchern abschreiben und
niemand hätte Grund, etwas Eigenes zu produzieren.
www.drweb.de
169
Kapitel 4
Zitate aus Artikeln, Interviews und Büchern sind immer gestattet.
Dazu bedarf es keiner Erlaubnis. Sie müssen mit Anführungszeichen und mit einer Quellenangabe versehen sein. Über die erlaubte Länge streiten sich die Geister. Klar ist: Ein Zitat ist im Vergleich zum Original erheblich kürzer. Angenommen jemand verfasst einen Artikel über Javascript, dann kann ein Zitat zum
Beispiel so aussehen: Paul Schneider ist darüber hinaus der
Ansicht: "Javascript macht dumm."...während man bei Ideenreich
liest: "Wer Javascript einsetzt, will seine Besucher ärgern."... Im
Web gehört es zum guten Ton (aber nicht notwendigerweise) bei
Zitaten, Verweisen usw. einen Hyperlink zu setzen, während ein
Buch oder eine Dissertation Quellen in der Fußzeile oder in einem
Quellenverzeichnis aufführt. Gar nicht schön ist es, wenn jemand
aus lauter Bruchstücken einen neuen Text zusammensetzt oder
das Zitat unverhältnismäßig lang ist im Vergleich zum eigenen
Beitrag. Ein Zitat aus einen oder mehreren Sätzen kann natürlich
auch eigenständig stehen, wenn danach ein Beitrag oder etwas
anderes folgt.
Wer sich von fremden Designs oder Layouts anregen lässt, tut
Nichts Verwerfliches. Was gut ist und funktioniert, nimmt unweigerlich seinen Lauf. Anderenfalls befänden wir uns noch in der
WWW-Steinzeit mit Regenbogenteilern und grauen Hintergründen. Wer allerdings komplette Seiten speichert und locker den
eigenen Erfordernissen anpasst, bewegt sich auf dünnem Eis.
Bleiben Sie fair. Dr. Web vermittelt Ideen und Anregungen. Diese
dürfen Sie selbstverständlich für sich nutzen, dafür sind die Sachen ja da. Wer selbst Inhalte anbieten möchte, muss sie entweder
selbst verfassen oder käuflich erwerben.
170
www.drweb.de
Kapitel 4
Sicher ist sicher
10. Das Web ist kein Fort Knox
Wie stellt man es an, seine HTML-Seiten, Grafiken und Codes zu
schützen? Offen gesagt, wirklich hundertprozentige Methoden für
solchen Schutz gibt es ebenso wenig wie das berühmt-berüchtigte
Fort Knox nicht zu knacken ist. Irgendwie lässt sich jeder Trick
mit den richtigen Kenntnissen aushebeln. Und wer es damit übertreibt, schreckt Besucher ab, von denen sich mancher sogar belästigt fühlen dürfte. Wir mögen keine Geheimnisse, denn HTML ist
ein offenes Prinzip. Wer also glaubt, einmal erworbene Kenntnisse
für sich behalten zu müssen und nicht an die folgende Generation
von Seitenbastlern weitergeben zu müssen, ist nicht willkommen.
Werfen wir einen Blick auf die Möglichkeiten:
. Den Quellcode durch einen Cruncher zum Beispiel
WebOverdrive schicken. Der löscht alle Zeilenumbrüche und
Leerzeilen. Das Ergebnis sind einige enorm lange Codezeilen,
die natürlich sehr unübersichtlich ist. Ein ergiebiger Schutz ist
das aber nicht, weil es Programme wie Pretty-HTML gibt, die
das wieder rückgängig machen können. Auch WYSIWYGEditoren formatieren den Code mehr oder weniger um.
. Auch die Verschlüsselung mit Javascript stellt keinen echten
Schutz dar, weil der Schlüssel mitgeliefert werden muss, sonst
kann es der Browser nicht darstellen. Man muss das nicht
selbst programmieren, eine kleine Software wie Webcrypt erledigt das spielend. Die Demo Version darf 15 Tage lang kostenlos
getestet werden, anschließend werden 19,95 Dollar für die
Registrierung fällig.
Funktion der rechten Maustaste abschalten
Unbeliebter Warnhinweis des Browsers
Man kann die rechte Maustaste abschalten und sogar die Funktion
im Menü mit der man die Quellcode-Ansicht einschaltet. Das nützt
www.drweb.de
171
Kapitel 4
Sicher ist sicher
aber alles nichts, denn das Ganze ist nicht viel mehr als ein schaler Trick, mit dem sich nur Anfänger erschrecken lassen. Der
Quellcode steht trotzdem über das Menü oder nach dem
Abspeichern der Seite zur Verfügung. Man kann die Seite speichern oder aus dem Cache nehmen und in einen Editor laden.
<html>
<head>
<title>Quellcode verstecken</title>
<!-function click(evt) {
if (navigator.appName.indexOf("Microsoft") != -1){
if (event.button==2) {
alert('Error - Der Quellcode kann nicht angezeigt werden');
return false
};
};
if (navigator.appName.indexOf("Netscape") != -1) {
if ( evt.which == 3 ) {
alert('Error - Der Quellcode kann nicht angezeigt werden');
return false
};
};
};
if (navigator.appName.indexOf("Netscape") != -1) {
document.captureEvents( Event.MOUSEDOWN )
};
document.onmousedown = click;
// -->
</script>
</head>
<body bgcolor="#FFFFFF">
Seiteninhalt
</body>
</html>
Immerhin haben es die Grafiker etwas besser. So bietet die Firma
Gamacles eine Technik an, mit der sämtliche Webgrafiken als
Java-Applet ausgegeben werden können. Auch das ist eine Idee,
die sich hoffentlich nicht durchsetzen wird. Denn abgesehen
davon, dass dieses Verfahren noch nicht perfekt funktioniert, entstehen höhere Kosten und längere Ladezeiten. Wertvolle Grafiken
172
www.drweb.de
Kapitel 4
Praktisch und elegant
lassen sich mit einem digitalen Wasserzeichen (etwa von
Digimarc) versehen, das schützt zwar nicht vor dem Klau, kann
aber im Falle eines Falles den entscheidenden Beweis liefern.
Jammern hilft nicht, das Web ist öffentlich; vielleicht ist es sogar
sinnvoll darüber nachzudenken, ob man nicht gleich einen allgemeinen "Persil Schein" ausstellt, das bringt dann wenigstens ein
paar zusätzliche Links.
11. Server Side Includes (SSI)
Auch ein Web-Server kann bei der Gestaltung von Web-Seiten helfen, dazu stehen auf vielen Servern die sogenannten Server Side
Includes bereit. Ein Satz relativ einfacher Befehle, die in eine
HTML-Seite eingebettet, direkt auf dem Server ausgeführt werden.
Damit ist es zum Beispiel möglich, das aktuelle Tagedatum, die
Uhrzeit, die Dateigröße oder die URL in eine HTML Seite zu übernehmen. Der Besucher merkt davon nichts, nicht einmal der
Quellcode gibt einen Hinweis auf den Einsatz von SSI: Denn mit
dem Aufruf im Browser werden die SSI Befehle sofort ausgeführt
und dann erst mit dem Seitencode ausgegeben.
Seine wahre Pracht entfaltet SSI aber erst mit dem Einsatz von
"Includes". Das bedeutet: Sie werden mit einem einfachen Befehl
in die Lage versetzt, den Inhalt einer HTML- oder Textseite in eine
andere einzufügen und zwar vollautomatisch. Auf diese Weise lassen sich wiederkehrende Elemente wie Menüleisten, Fußzeilen
oder Adressen ganz einfach in eine beliebig große Zahl von Seiten
einbetten. Muss später etwas verändert werden, brauchen nur die
ausgelagerte Elemente angepasst zu werden, nicht jedoch die
Seiten selbst. SSI ist nicht Browserabhängig, da es vom Server
verarbeitet wird.
So gehen Sie vor:
Legen Sie eine Datei "menu.html" im Unterverzeichnis "daten" an.
www.drweb.de
173
Kapitel 4
Diese Datei enthält eine Menüleiste, ein HTML-Kopfbereich
braucht nicht definiert zu werden. Kopieren Sie den folgenden
Code in eine beliebige HTML-Seite und setzten Sie in dorthin, wo
später das Menü erscheinen soll:

Geben Sie Ihrer Datei eine neue Endung - sie muss auf .shtml lauten. Das ist wichtig, damit der Server weiß, dass sich in dieser
Datei SSI-Befehle befinden, die er auszuführen hat. Den Vorgang
der Ausführung nennt man "parsen".
Rufen Sie anschließend die Datei mit dem Browser auf. Die Menüleiste wird an dem für sie vorgesehenen Platz erscheinen. Ein
Blick in den Quellcode der Seite verrät nichts Auffälliges, die SSI
Befehle sind verschwunden und durch das Menü ersetzt. Alles
wirkt so, als sei die Seite bereits so geschrieben worden. Achtung:
Das Verfahren funktioniert nur online, schließlich werden die
Includes auf dem Server ausgeführt.
Via SSI eingefügte Menüleiste im Dreamweaver
Via SSI lassen sich auch CGI-Skripte ausführen und deren Ergebnisse direkt in die Seite übernehmen. Angewendet wird das zum
Beispiel bei Umfragen oder Countern.
174
www.drweb.de
Kapitel 4
Die Befehle
Einfügen (Include)

Dateigröße anzeigen

Letzte Änderung anzeigen

CGI Skript ausführen

Variable ausgeben

DOCUMENT_NAME (Name der HTML-Datei)
LAST_MODIFIED (Letzte Änderung der HTML-Datei)
DOCUMENT_URI (Pfad der HTML-Datei)
DATE_GMT (Datum/Uhrzeit, nach Greenwich Mean Time)
DATE_LOCAL (Datum/Uhrzeit des Servers (lokal)
Datumsformat (wird zusammen mit DATE_LOCAL benötigt)

%a = Wochentag kurz, z.B. fri
%A = Wochentag lang, z.B. Friday
%b = Monat kurz, z.B. Feb
%B = Monat lang, z.B. February
%Z = Zeitzone, z.B. MEZ
%d = Tag im Monat 2stellig, z.B. 18
%e = Tag im Monat, z.B. 8
%m = Monat als Zahl, z.B. 02
%M = Minuten nach Stunde, z.B. 06
%S = Sekunden, z.B. 20
%H = Uhrzeit 24stündig, z.B. 18
%I = Uhrzeit 12stündig, z.B. 02
%U = Kalenderwoche, z.B. 10
%y = Jahr 2stellig, z.B. 00
%Y = Jahr 4stellig, z.B. 2000
www.drweb.de
175
Kapitel 4
Sonderzeichen richtig maskieren
Anmerkungen
Ob Ihr Server in der Lage ist SSI auszuführen, erfahren Sie entweder vom Provider, oder Sie probieren es einfach aus. Fügen Sie
zum Beispiel die Befehlszeile für das Datum in eine HTML Seite,
geben Sie ihr einen Namen, der auf .shtml (oder .sht oder .shtm)
endet, nach dem anschließenden Upload, rufen Sie die Datei mit
dem Browser auf. Erscheint das Datum, ist alles OK.
Ein Server wird durch viele SSI Aufrufe stärker belastet; ob das
zum Tragen kommt, hängt von der Performance des Rechners ab
und der Zahl der Seitenaufrufe. Suchmaschinen haben keine
Problem mit Dateien, die auf .shtml enden.
12. Zorro mit der Maske
Auch wenn HTML nichts anderes als purer ASCII Text ist, mit
Umlauten und Sonderzeichen kann es Probleme geben. Damit im
Browser des Besuchers keine kryptischen Zeichen auftauchen,
wird umgewandelt, die sogenannte Maskierung.
Jedes Sonderzeichen verlangt seinen Extracode. So wird aus einem
ä ein ä und jeder Browser weiß, was er darzustellen hat. Wer
mit einem WYSIWYG-Editor arbeitet, muss sich nur selten
Gedanken machen, Sonderzeichen werden in der Regel automatisch maskiert.
ä wird zu ä
ö wird zu ö
ü wird zu ü
Ä wird zu Ä
Ö wird zu Ö
Ü wird zu Ü
ß wird zu ß
& wird zu &
" wird zu "
§ wird zu §
176
www.drweb.de
Kapitel 4
Sonderzeichen richtig maskieren
Maskierungen werden auch in anderen Fällen benötigt: Wer
HTML-Code im Text darstellen will, muss die Klammern maskieren. Anderenfalls würden die HTML-Befehle sofort ausgeführt.
< wird zu <
> wird zu >
Browser können auch Sonderzeichen und Symbole darstellen, die
nicht auf der Tastatur vorhanden sind. Zum Beispiel das
Copyright-Zeichen ©, das Warenzeichen ® oder den Hochpunkt.
© wird zu ©
® wird zu ®
" wird zu »
· wird zu ·
Platzhalter ( ) sind eine ebenso einfache wie nützliche
Layouthilfe. Sie dienen beispielsweise zum genauen Positionieren
von Elementen oder als Abstandhalter, denn mehrere Leerzeichen
hintereinander sind in HTML nur mit formatiertem Text <PRE>
möglich. Sie sollten auch Umlaute innerhalb der Alternativ-Texte
(ALT) Ihrer Grafiken maskieren.
Auch das Euro Zeichen kann dargestellt werden. Hier allerdings
muss der Rechner des Gastes über einen entsprechend modernen
Zeichensatz verfügen, und das ist nicht selbstverständlich.
€ wird zu €
www.drweb.de
177
Kapitel 4
Noch Fragen...?
Ich suche einen Tag mit dem ich einen Surfer wieder auf
die zuvor besuchte Web-Seite zurück bringen kann.
Das lässt sich machen: Es funktioniert mit Javascript und sieht
folgendermaßen aus:
<a href="javascript:history.back()">Zurück</a>
Eine zweite Möglichkeit wäre:
<a onmouseover="window.status='zurück';return true;"
href="link.htm" onmouseout="window.status=' ';return true;"
onclick="history.back();return true;">Zurück</a>
Natürlich lässt sich an Stelle des Textes auch eine Grafik verwenden, die man einfach an die selbe Stelle positioniert. Wenn man
den Besucher auf die zuvor besuchte Web-Site zurückschicken will,
kann man das auch mit SSI machen, sofern der Server dazu in der
Lage ist.
Wenn ich im Netz surfe und die URL statt www.irgendwas.com mit www2.irgendwas.com beginnt... Was ist das?
Woher kommt die 2?
Das ist an sich nichts Besonderes, und es gibt diesbezüglich keine
Vorschriften. Die Server haben auch Namen, und die können frei
gewählt werden. Meist heißen sie jedoch www, um deutlich zu
machen, dass es sich um einen Webserver handelt - denn es gäbe
ja auch noch andere - zum Beispiel Gopher-Server, FTP-Server
oder Intranet-Server.
Wenn ein Angebot groß ist, braucht es mehrere Server. Die werden
entweder zusammengeschaltet, so dass man von außen davon gar
nichts merkt oder sie bekommen andere Namen, wenn man sie
unterscheiden will. Manche Web-Dienstleister machen das, um
dem Surfer die Auswahl des physikalischen Servers z.B. bei
Downloads zu lassen.
178
www.drweb.de
Kapitel 4
Noch Fragen...?
Was bedeutet es, wenn eine URL mit https:// beginnt?
Daran erkenn Sie, dass die Kommunikation über eine sichere
Verbindung aufgebaut wird. Das geschieht über das SSL-Protokoll
(Secure Soket Layer), eine Entwicklung von Netscape. Erkennbar
ist die sichere Verbindung durch ein Symbol (Schloss) in der
Statusleiste. Jetzt können vertrauliche Informationen ohne Risiko
übertragen werden.
Wie kann man den Mauszeiger (Cursor) in eine beliebiges
GIF-Bild ändern?
Das ist leider nicht möglich, jedenfalls noch nicht. Zwar ist diese
Möglichkeit als Bestandteil von CSS2 schon vorgesehen, aber noch
kein Browser weiß damit etwas anzufangen. Behelfen kann man
sich mit einem Plug-in. Das ist, vorausgesetzt der Besucher ist
bereit, die dazu nötigen Software herunterzuladen, eine tolle
Sache. Bunte, animierte Mauszeiger lassen sich Dank Comet Zone
sogar kostenlos realisieren.
Schützen Hinweise vor Strafe?
Ich treffe immer wieder auf private Homepages, auf denen Texte wie
folgender zu lesen sind: "Für den Inhalt der auf meiner HP aufgeführten Links und deren Meinung übernehme ich keine
Verantwortung." oder: "Sollten Sie beim Surfen auf meiner
www.drweb.de
179
Kapitel 4
Noch Fragen...?
Homepage Gif's usw. finden, die dem Copyright unterliegen, mailen
Sie mir kurz, ich werde diese Bild sofort von meiner Homepage nehmen". Können Sie mir sagen, ob es ratsam oder notwendig ist, sich
so abzusichern?
Sicher haben Sie auch schon einmal den Spruch gehört, "Unwissenheit schützt vor Strafe nicht". Anders gesagt, die Hinweise nutzen natürlich gar nichts. Wer widerrechtlich eine Grafik verwendet, macht sich trotzdem schuldig. Grafiken und anderes sollte
man nur von solchen Seiten nehmen, die das ausdrücklich erlauben. Das ist sehr wichtig. Sonst kann es Ärger geben. Bei den
Links ist es etwas anders. Man sollte vor allem darauf achten,
nicht auf rechts- oder sittenwidrige Inhalte zu linken. Ansonsten
ist es kein Problem, von den Links lebt schließlich das Web.
180
www.drweb.de
Kapitel 4
14. Links zum Thema
CGI Script 404 Error
http://internetpartner.de/webmaster/cgi_service/IPSFehler404.html
BirdTrap
http://bignosebird.com/carchive/birdtrap.shtml
Webcrypt Demo
http://www.ideenreich.com/download16.shtml
Gamacles
http://www.gamacles.com/
Digimarc
http://www.digimarc.com
Welche Dateiname ist was?
http://www.wotsit.org/
Hash Include
http://www.ideenreich.com/download/hashinc.zip
Multireplace
http://www.ideenreich.com/download/multireplace.zip
Insite
http://insite.sicom.de
FlashPage
http://www.flashpage.net/2.html
Comet Cursor
http://cometzone.cometsystems.com/
www.drweb.de
181
Kapitel 4
Für Ihre Notizen
182
www.drweb.de
Kapitel 4
Für Ihre Notizen
www.drweb.de
183
Kapitel 5
Laden Sie sich Gäste ein
Mehr Besuch für Ihre Seiten
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
Einfältig und wirkungslos? - Bannertausch
Einfach und effektiv - Link-Tausch
Wertlose Trophäen - Awards
Öffentlichkeitswirksam - Pressearbeit
Klappern gehört zum Handwerk Foren, Gästebücher, Newsgroups
Suchen und gefunden werden - Suchmaschinen
Wer nicht wagt, der nicht gewinnt - Gewinnspiele
Neugier der Besucher wecken - Umfragen im Web
Die Erfahrungen anderer nutzen - Webringe
Schreib mal wieder - Newsletter
Ideen muss man haben - Aktionen
Mogelpackungen Mehr Seitenaufrufe mit unfeinen Methoden
Das ganze Web per Email - Autoresponder
Hinter die Kulissen geschaut Wer besucht Sie eigentlich?
Auf Mata Haris Spuren - Web-Spionage
Noch Fragen...? Wir haben die Antworten!
Zum Nachschauen im Netz - Links zum Thema
Die Möglichkeiten, mehr Besucher auf die eigenen Seiten zu
locken, sind vielseitig. Vor allem ständig aktuelle und wechselnde
Inhalte sorgen für immer wiederkehrende Besucher und damit
auch Leben auf Ihrer Web-Site. Durch regelmäßige "echte"
Neuigkeiten und aktuelles Material werden aus GelegenheitsSurfern Stammkunden und Sie erhalten eine Reihe neuer, interessanter Kontakte. Natürlich zählen auch kostenlose Angebote oder
ausgefallene Dinge, die man sonst nicht oder selten findet, zu den
probaten Mitteln, die eigene Web-Site zu einem Anziehungspunkt
für Besucher zu machen.
Sie können sicher sein: Qualität und beständige Arbeit an den
Seiten spricht sich schnell herum und zahlt sich letztlich aus. Es
lohnt sich also, ständig an den Inhalten und der Benutzerführung
zu "feilen". Dazu gehört, alle Links regelmäßig einem Check zu
unterziehen. Nichts ist peinlicher, als einen Besucher auf einen
toten Link zu führen. Auch Suchmaschinen führen längst erlosche184
www.drweb.de
Kapitel 5
Einfältig und wirkungslos?
ne Seiten noch Monate oder gar Jahre in ihrem Bestand. Das sind
Potenziale, die Sie zurückgewinnen können. Doch außer guten
Inhalten bedarf es mehr, viel mehr, um Seiten bekannt und anziehend zu machen. Wir verraten Ihnen, was sich in dieser Beziehung
lohnt, was man tunlichst vermeiden sollte und was nicht funktioniert.
1. Bannertausch
Bannertausch ist die auffälligste Methode, auf sich aufmerksam zu
machen. Doch halt: Eine Garnitur zuckender und flackernder
Werbeschildchen macht eine Site unattraktiv und wird schnell als
Belästigung empfunden. Dr. Web empfiehlt auch deshalb Zurückhaltung, weil das Netz von Bannern nahezu überschwemmt
wird. Seiten ohne Werbung wirken dagegen wie freundliche Oasen.
Trotzdem müssen die kleinen Sites kein kärgliches Dasein fristen,
während die Großen in der Branche mit Werbung Millionen verdienen. Reich kann man zwar nicht werden, doch die Werbeflächen
lassen sich ja schließlich nicht nur verkaufen, sondern auch tauschen. Allein in Deutschland offerieren mehrere Dutzend Betreiber
sogenannte Bannertausch-Dienste.
Das Prinzip beim Banner-Tausch ist einfach: Wer das Banner
eines Kollegen auf seinen Seiten ausstellt, bekommt dafür auch bei
diesem eine Banner-Fläche zur Verfügung gestellt. Umsonst ist die
Sache natürlich trotzdem nicht: Weil auch der Anbieter etwas verdienen will und seine Technik bezahlen muss, wird nicht im
Verhältnis 1:1 getauscht, sondern ein Teil der Banner-Einblendungen vom Anbieter verkauft oder für dessen eigene Werbung
verwendet. Das Verhältnis von Leistung zu Gegenleistung wird in
diesem Falle Ratio genannt. Das heißt, für 10 Banner die man
selbst einblendet, bekommt man bei einer 7:10 Ratio 10 Flächen
auf anderen Sites zur Verfügung gestellt. Das funktioniert vollautomatisch und in der Regel erhält man eine ausführliche Statistik
über Anzahl und Erfolg der Banner. Trotzdem gibt es hier auch
Fallstricke, in denen man sich verfangen und Gruben, in die man
unversehens fallen kann.
www.drweb.de
185
Kapitel 5
Nicht jeder Anbieter ist seriös
Unter der kommerziellen Anbietern finden sich natürlich auch
schwarze Schafe und Anbieter, die so klein sind, das kein echter
Tausch in Gang kommen kann. Auch eine Ratio von 1:1 mit
großzügigem Startguthaben kann in der Praxis nicht funktionieren, weil sonst der Anbieter nicht an dem Geschäft verdient. Hier
heißt es aufpassen.
Trickbanner gaukeln nur vor
Niemand kann bestimmen, welche Banner auf den eigenen Seiten
gezeigt werden. Viele setzen deshalb Trickbanner ein. Das sind
geschickt aufbereitete Grafiken, die dem Surfer etwas vorgaukeln
und zum Klick verleiten - einen Klick, den er beim Ansehen des
tatsächlichen Angebots nie getan hätte. Trickbanner erzielen hohe
Klickraten und ziehen viele Besucher von Ihren Seiten, die Sie
wahrscheinlich auch durch eigene Banner nicht zurück bekommen. Der Besucher wird jedoch fast immer enttäuscht sein, da
viele dieser Banner gar nicht erkennen lassen, wohin man klickt
oder die in Aussicht gestellten Versprechen nicht eingehalten werden.
Auf diesen Trick fallen viele Besucher herein, weil ihnen mit diesem Trickbanner
suggeriert wird, dass sie auf der Site fortfahren könnten.
Banner-Inflation vermeiden
Mancher Teilnehmer eines Bannertausches glaubt, durch eine
Vielzahl von Bannern auf einer Seite den Dienst für eigene Zwecke
missbrauchen zu können. Oft werden diese Bannerkollektionen
über verschiedene Tauschdienste zusammengestellt und finden
sich am Seitenende wieder. Wenn Ihr Banner dort auftaucht,
haben sie nur wenig Chancen auf einen Klick. Prüfen Sie deshalb
den in Frage kommenden Dienst vor der Anmeldung genau. Surfen
Sie die dort angebotenen Hitlisten ab und stellen Sie fest, was die
Konkurrenz so treibt. Wo überdurchschnittlich viele Trickbanner
und Banner-Massenansammlungen auftauchen, sollten Sie
Abstand nehmen.
186
www.drweb.de
Kapitel 5
Hits steigern - aber wie?
. Es ist keine gute Idee, mehrere Banner auf einer Seite einzu.
.
.
blenden, zumal man auch dem Besucher keinen Gefallen damit
tut. Probieren Sie doch einmal den umgekehrten Weg: Machen
Sie aus einer langen Seite zwei kürzere Seiten.
Testen Sie Ihre Banner auf ihre Wirksamkeit und vergleichen
Sie die Zugriffs-Zahlen. Einige Tausend Einblendungen sollten
es aber schon sein, um verlässliche Zahlen zu bekommen.
Rüsten Sie alle Seiten mit Bannern aus. Die meisten Anbieter
stellen dafür sogenannte Subcodes zur Verfügung.
Ein geringer Strom von Klicks wird auch durch die Hitlisten der
Anbieter generiert. Es lohnt sich also, hier vertreten zu sein,
wenn auch die ohnehin schon erfolgreichen mehr davon profitieren.
Bannerdienste im Überblick
Der Klassiker: Link4Link.de
Link4link war der erste Anbieter für Bannertausch in Deutschland
überhaupt, der sich vor allem deshalb so lange gehalten, weil hier
seriös abgerechnet wird, die Technik funktioniert und den
Teilnehmern etwas geboten wird. Der Dienst bietet auch eine Liste
mit den erfolg-reichsten Bannern, Tipps zur Gestaltung und vieles
andere mehr. Link4Link setzt auf niveau-volle Inhalte und
Bannerplatzierung im sofort sichtbaren Bereich. Homepages bei
Diensten wie AOL, T-Online oder Geocities werden nicht als Teilnehmer akzeptiert. Link4Link-Banner werden im Profi-Format
468x60 Pixel eingeblendet. Die Ratio beträgt 7: 10; ein interessantes Feature ist der Kosten-Kalkulator, mit ihm können Sie ausrechnen lassen, welchem Gegenwert eine Teilnahme am Tauschdienst entspricht.
Der Kleine: Page2Page
Kleiner, aber mit vielen nützlichen Features ausgestatteter
Bannertausch-Dienst. Unter anderem wird verhindert, dass das
eigene Banner auf eigenen Seiten auftaucht. Man kann beliebig
viele Seiten mit Bannern ausrüsten und sogar zwei verschiedene
www.drweb.de
187
Kapitel 5
Motive in der Rotation halten. Die Ratio beträgt 3:5; eingeblendet
wird im Format 400x40 Pixel.
Der Vielseitige: Link4u
Link4u ist ein kleinerer Dienst, der sich durch einige besondere
Möglichkeiten auszeichnet. Dazu gehört, dass Sie Ihre Banner
einem internationalen Publikum zeigen können. Es gibt eine Reload- und Reclick-Sperre, die Manipulationen verhindert. Gelungen ist die Sparbuch-Funktion, mit der Sie sich Bannereinblendungen sozusagen zusammensparen und diese nach Ihren Wünschen freigeben können. Das ist beispielsweise dann von Vorteil,
wenn man eine Werbeaktion starten will. Die Ration beträgt hier
3:4.
Der Flexible: Adview
Bei Adview ist vom Vollbanner bis zum Button fast alles möglich.
Auch von der grafischen Seite her zeigt sich der Dienst flexibel.
Außerdem kann man hier auswählen bzw. bestimmen, auf welcher
Art von Seiten das eigene Banner nicht gezeigt werden soll.
Unendliche Werbeflut im Netz
Banner in einem nervigen Pop-Up Fenster.
Kommerzielle Sites brauchen Bannerwerbung, deren Einsatz sinnvoll und oft auch notwendig ist. Trotzdem sollte man auch hier
188
www.drweb.de
Kapitel 5
nicht übertreiben, denn der einzige Zweck eines Werbe-Banners
besteht darin, die Besucher von Ihren Seiten wegzulocken - mit
allen Mitteln.
Wenn man private oder semiprofessionelle Homepages unter die
Lupe nimmt, dann begegnen einem Klick für Klick Werbebanner kaum eine private Homepage, kaum ein Anbieter, der auf diesen
"Service" verzichten mag. Um Besucher anzulocken, werden nicht
selten drei oder vier Reklame-Bildchen untereinander "geklebt".
Alles soll schön bunt und ein willkommener Ersatz für nicht vorhandene Inhalte sein. Oft weiß man noch nicht einmal, welche
Botschaften via Werbebanner auf den Seiten verbreitet werden.
Vorbilder waren vor allem die Suchmaschinen, die mit solchen
Spielchen angefangen haben. Erst die Realität holt einen wieder
auf den Boden der Tatsachen zurück, denn der überwiegende Teil
der angezeigten Grafiken ist kommerziell. Davon leben die organisierenden Werbedienste - eine Kontrolle ist nicht möglich.
Die Dummen sind in erster Linie die Betreiber kleiner Homepages,
die man mit dem Versprechen auf ein paar Hits mehr veralbert.
Angeschmiert ist auch der Gast, dem kaum noch etwas ohne
Werbung angeboten wird. Die allgemeine Überlastung des Netzes
und die nur bedingte Professionalität mancher Anbieter (Software
und Server genügen) tun ein übriges. Ein Teil der schönen
Werbewelt wird gar nicht erst angezeigt, hält durch lange
Ladezeiten auf und verschandelt die sorgsam gestalteten Seiten.
Mit einem Übermaß an Bannern werden schließlich auch die letzten gutwilligen Besucher von der Site vertrieben.
Grundsätzlich gilt: Banner finden immer weniger Beachtung. Je
mehr Banner auf einer Web-Site platziert sind, desto geringer die
sogenannte "click through ratio". Die oft animierten und tönenden
großformatigen Bilder mit CGI-Unterstützung lassen die Inhalte
der Sites verkümmern und zur bloßen Dekoration werden.
Dagegen ist Fernsehwerbung harmlos, denn Fernsehen kennt
keine Frames. All die bunten Bildchen bewirken oftmals sogar das
Gegenteil von dem, was man erreichen möchte. Sie zerstören Ihr
Design halten den Besucher vom Verweilen auf der Site ab.
www.drweb.de
189
Kapitel 5
Die Kehrseite der Medaille: Geschickte Bannerdesigner wissen
das zu nutzen. Moderne Rich-Media-Banner beinhalten echte
Dropdown-Menüs, kommen in raffinierter Verkleidung oder als
Image-Map daher. Der ahnungslose Besucher wendet seinen Blick
auf das Banner, klickt ... und landet schon beim nächsten Angebot,
wo nach der gleichen Masche verfahren wird. Es beginnt eine Art
Roulette: Alle klicken immer schneller, die Counter rotieren, die
Bannerdienste verdienen, aber Ihre Botschaften und Leistungen,
das wofür Sie sich letztlich viel Mühe gegeben haben, die registriert keiner mehr.
Auch die Provider bedienen sich mancher Tricks: Geocities als einer der großen Anbieter von kostenlosem Webspace, nutzt beispielsweise die unzähligen Seitenabrufe von privaten Homepages
zu Experimenten. Mal wurden Werbefenster zwischen die
Seitenabrufe eingeblendet, ein andermal Wasserzeichen oder PopWerbefenster und dann Java-Applets. So verkommt Geocities als
Vorreiter der Online-Communities immer mehr zu einem heruntergekommen Bahnhofsviertel, in dem Gummipuppen und SexMagazine ebenso angeboten werden wie Warez (Raubkopien) und
MP3-Downloads.
Neue Bannerdienste versprechen "Geld verdienen mit der eigenen
Homepage" und locken mit echter Kohle. Aber mal im Ernst, wer
würde dafür bezahlen, auf einer bestenfalls durchschnittlichen
Homepage mit privaten Inhalten und ein paar Links Werbung zu
treiben? Selbst ein paar Tausend Hits im Monat sind werbewirtschaftlich gesehen gar nichts. Das ergibt Prämien, die sich im
Laufe eines Jahres bestenfalls zu größeren Pfennigbeträgen addieren und wegen Geringfügigkeit möglicherweise niemals ausgeschüttet werden. Neueste Errungenschaft auf dem Gebiet der
Online-Werbung sind sogenannte Push-Banner, die auf User-Eingaben reagieren. Hier wird Javascript benutzt, um Banner mit
tatsächlichen und veränderbaren Inhalten auszustatten. So werden Laufbänder mit Real-Time-Preislisten oder Kursen möglich.
190
www.drweb.de
Kapitel 5
Einfach und effektiv
2. Link-Tausch
Die einfachste ist auch die älteste und erfolgreichste Methode.
Tauschen Sie Links mit thematisch verwandten Sites. Auch Dr.
Web profitiert überdurchschnittlich von den Empfehlungen anderer. Homepages ohne bestimmtes Thema können Links mit
Gleichgesinnten tauschen. Bauen Sie eine Linkseite auf der Sie
andere Homepages vorstellen. Schreiben Sie, worum es geht, wie
die Seiten heißen und was Ihnen daran besonders gefällt.
Webmaster sehen es gern, wenn ihre Seiten erwähnt und gelobt
werden. Sparen Sie sich aber Links auf Seiten wie Stern, Pro7 oder
Yahoo. Damit langweilen Sie nur, schließlich kennt diese Seiten
fast jeder.
Wenn Sie wissen wollen, wer jetzt schon auf Ihre Seiten linkt,
benutzen Sie z.B. Fireball oder Altavista und geben Sie einen
Suchbefehl nach folgendem Muster ein:
link:http://www.meineseite.de/
Einige Suchmaschinen wie AOL, Lycos (WOW) oder Fireball unterhalten thematisch sortierte und redaktionell betreute Link-Listen.
Es lohnt sich, dort aufgenommen zu werden. Allerdings ist das
schwierig zu erreichen. Schließlich möchte jeder gern auf diese
Listen kommen; ein Versuch schadet jedoch nichts. Ein freundliche
Email ist schnell geschrieben. Mit der Antwort und gegebenenfalls
der Aufnahme in eine Linkliste lässt man sich jedoch lange Zeit. Es
gilt, nicht ungeduldig werden und die Zeit zu nutzen.
www.drweb.de
191
Kapitel 5
Wertlose Trophäen
3. Awards
Einen Award zu vergeben ist zumindest theoretisch eine lohnende
Sache. Nicht wenige Firmen glauben, in der "Award"-Vergabe eine
Art Hitmaschine entdeckt zu haben. Aber einen anerkannten
Award (es gibt sehr wenige hierzulande) aufzubauen, ist ebenso
schwierig wie langwierig und nur erfolgversprechend, wenn man
ohnehin viele Besucher hat. Von der Award-Verleihung profitieren
meist nur die Verleiher dieser meist wertlosen Trophäen, die oft
die Bytes nicht wert sind, aus denen sie gemacht wurden.
Entsprechend stiefmütterlich werden sie behandelt.
Nur Anfänger sind stolz auf zweifelhafte Auszeichnungen, die von
Amateuren vergeben werden. Besucher aber bringt das nicht.
Zumal: Prämiert wird jeder, eine Anmeldung genügt. Dagegen ist
es schon interessanter, einen prominenten Award zu bekommen.
Web.de beispielsweise verschickt zusammen mit dem "Cool-Spot"
sogar eine gedruckte Urkunde und die Auszeichnung bringt viele
Hits, solange Sie auf der Liste der Neuheiten stehen. Danach tut
sich allerdings nicht mehr viel. Dementsprechend schwierig ist es,
einen "Web-Tipp" oder "Cool Spot" zu erhaschen. Das muss auch so
sein, denn nur so bieten Awards dem Surfer Orientierung, und der
Webmaster darf sich glücklich schätzen.
Ein Kessel Buntes
192
www.drweb.de
Kapitel 5
Öffentlichkeitswirksam
4. Pressearbeit
Zeitungen und Zeitschriften finden tagtäglich große Beachtung in
allen gesellschaftlichen Bereichen. Der Presse- und Öffentlichkeitsarbeit kommt in diesem Zusammenhang besondere Bedeutung zu. Man kann Sie einerseits ohne großen Aufwand betreiben,
muss hier aber trotzdem mit viel Sorgfalt und fachlicher
Kompetenz zu Werke gehen muss.
Nichts ist schlimmer als eine nichts sagende, langweilige Pressemitteilung. Gleiches gilt für einen aufdringlichen und sprachlich
unausgereiften PR-Artikel. Ein Mittel dazu sind die sogenannten
"intelligenten PR-Artikel", bei denen dem Leser die Inhalte ebenso
spannend wie wissensvermittelnd näher gebracht werden. Wichtig
ist natürlich, das man auch wirklich besondere und vor allem
aktuelle Themen anzubieten hat und nicht nur bereits geschriebene Texte "umstrickt". Das nämlich merken die Leser sehr schnell.
Haben Sie also eine solche Story aus Ihrer Branche anzubieten,
dann wenden Sie sich kurz und knapp, aber präzise an die
Redaktionen im fachlichen oder territorialem Umfeld. In solchen
Texten muss der wesentliche Inhalt sprachlich eindeutig formuliert und das Wichtige an der Meldung sofort erkennbar sein. Eine
zündende Headline erhöht dabei die Anziehungskraft für den
Leser.
Merken Sie sich auch: Redaktionen kürzen Texte von hinten.
Was also vorn nicht beschrieben steht, wird auch in eventuellen
Veröffentlichungen nicht auftauchen Ausführliche Versionen solcher Meldungen können Sie dann auf einer speziellen InternetSeite anbieten. Wenn Sie sich Meldungen in diesem Stil aber nicht
zutrauen, dann sollten Sie sich professioneller Hilfe bedienen.
Pressemitteilungen müssen gleichsam umfassend informativ wie
kurz und prägnant sein. Der Leser soll sofort erkennen, "was
Sache" ist und über die berühmten "W" (wer, wo wann, was...)
muss alles Wichtige gesagt werden. Fotos, Grafiken usw. sind sehr
sparsam und nur dann einzusetzen, wenn sie die inhaltliche
Aussagefähigkeit noch erhöhen. Auf Extravaganzen wie HTMLCode oder V-Cards sollte man beim Versand per Email verzichten.
www.drweb.de
193
Kapitel 5
Klappern gehört zum Handwerk
Das bläht die Informationen nur unnötig auf.
Vergessen Sie nie die erläuternden Angaben zur Firma (Adresse
usw.) sowie Ansprechpartner mit Telefondurchwahl anzugeben.
Ein ständig aktualisierter Presseverteiler dient außerdem dazu,
alle Ansprechpartner nach sachlichen (Medien, Unternehmen,
Branchen) oder räumlichen (Land, Kreis usw.) Gesichtspunkten zu
erfassen und regelmäßig mit Informationen zu "bedienen". Bei
größeren Unternehmen empfiehlt sich die Einrichtung eines eigenen Pressebereichs, der auch für die Beantwortung eingehender
Fragen verantwortlich ist, spezielle Pressemappen konzipiert und
pflegt.
Vorbildlicher Pressebereich auf den Seiten der Freenet AG.
5. Foren, Gästebücher, Newsgroups
Wer gern im Mittelpunkt steht und am liebsten von sich selbst
erzählt, ist in Foren und fremden Gästebüchern gut aufgehoben.
Weisen Sie dabei zu jeder sich bietenden Gelegenheit auf interessante Web-Sites hin - natürlich auf Ihre. Das sollte man aber nur
mit einiger Sachkenntnis und Einfühlsamkeit betreiben, denn
viele Besucher fühlen sich belästigt, wenn ständig unverhohlen
Marketing betrieben wird. Das kann sogar dazu führen, dass man
aus einem Forum oder einer Newsgroup hinausgeworfen wird.
194
www.drweb.de
Kapitel 5
Suchen und gefunden werden
Hier haben es besonders Neulinge schwer, sich gegenüber einer
eingeschworenen Gemeinschaft durchzusetzen. Gästebücher dagegen haben an Bedeutung verloren - aus ihnen ist sozusagen "die
Luft" raus, weil sie relativ selten gelesen werden. Ein Eintrag in
das Gästebuch einer Firma kann allerdings auch positive
Nebeneffekte, wie zum Beispiel die Anbahnung von geschäftlichen
Kontakten, haben.
6. Suchmaschinen
Suchmaschinen bringen weniger als mancher vermutet und zudem
viel Arbeit mit sich, wenn man hier Erfolg haben will. Sie müssen
sich nicht nur überall anmelden und alles im Auge behalten. Ihre
gesamte Site muss auch für die Suchmaschinen optimiert werden.
Langfristig gesehen ist damit Ihre Zeit sinnvoll investiert, denn
Suchmaschinen bringen einen stetigen Strom von Besuchern. Weil
dieses Thema umfangreich und komplex ist, haben wir ihm ein
eigenes Kapitel gewidmet.
www.drweb.de
195
Kapitel 5
Wer nicht wagt, der nicht gewinnt
7. Gewinnspiele
Gewinnspiele gehören zu den beliebtesten Angeboten im Web.
Sofern Sie sich das finanziell leisten wollen, können Sie auf die
Weise kurzfristig eine große Menge Besucher anziehen. Das ist
besonders dann der Fall, wenn Sie Ihre Aktionen bei entsprechenden Diensten annoncieren. Der Nachteil dabei ist: Sites mit
Gewinnspielen ziehen "Schnorrer" an, die an Ihren Inhalten oder
Angeboten überhaupt nicht interessiert sind.
Gewinnspiele eignen sich deshalb vor allem, um neue Sites
bekannt zu machen oder für solche, auf denen Werbung verkauft
wird. Davon abgesehen ist ein attraktives und ehrliches Gewinnspiel eine Bereicherung für jede Site. Auch die Veranstalter können von Gewinnspielen profitieren, steigern sie doch durch
geschickte Werbung den Umsatz und bringen das erwünschte
Feedback.
Attraktive Preise vorausgesetzt brauchen Sie nicht viel Aufwand
zu betreiben. Ein Stapel Mouse-Pads genügt dazu allerdings nicht,
hier muss mehr in Aussicht gestellt werden.
. Kommen Sie gleich zur Sache und bieten Sie einen direkten
Link zum Gewinnspiel.
. Machen
Sie aus dem Quiz kein Schachspiel: Wenn man zu
umständlich nach einen Lösungswort suchen muss, wird man
weiterklicken.
. wahrscheinlich
Nutzen Sie CGI-Formulare und geben Sie den Teilnehmern ein
Dankeschön zurück. Anschließend können Sie Ihre Besucher auf
eine andere interessante Seite weiterleiten.
. Packen Sie auch die Gelegenheit beim Schopfe und fragen Sie
Ihre Besucher aus. So erhält man Feedback. Wenn Sie verkaufen, dann stellen Sie ein Produkt oder Ihre Leistungen kurz vor.
. Weisen
Sie auf Sonderangebote hin. Mutige Anbieter riskieren
mehr: "Falls Sie nicht gewinnen, können Sie gleich hier bestellen!"
Natürlich gibt es hier wie überall auch schwarze Schafe, die
Gewinnspiele veranstalten, um an Adressen für Spam oder
Telefonaktionen heranzukommen und die vielleicht Preise niemals
196
www.drweb.de
Kapitel 5
Wer nicht wagt, der nicht gewinnt
ausschütten. Deshalb ist ganz besonders wichtig, dass Sie die
Zustimmung der Gäste erbitten, wenn Sie Werbemails oder Angebote verschicken wollen.
Eine simple Checkbox (sie sollte bereits aktiviert sein) reicht dabei
vollkommen aus. Falls Sie regelmäßig Gewinnspiele veranstalten,
veröffentlichen Sie im gleichen Abstand die Namen vorheriger
Gewinner. So wächst Vertrauen und der Kunde kann sicher sein,
dass bei Ihnen alles mit rechten Dingen zugeht. Publizieren Sie
aber auf keinen Fall die Email-Adressen der glücklichen
Gewinner.
Zu guter Letzt: Melden Sie Ihre Aktionen auch den wichtigsten
Gewinnspiel-Sites. Kostenlos.de als eine Art Markführer erreicht
etliche Hunderttausend Page-Views im Monat, pro Tag werden
etwa zehn neue Gewinnspiele aufgenommen. Einige Sites bieten
sogar Top-Ten-Listen mit den beliebtesten Gewinnspielen an.
Wenn Sie es bis dorthin schaffen, steht einer erfolgreichen Aktion
nichts mehr im Wege. Nicht vergessen: Weisen Sie die Presse
rechtzeitig auf Ihre Bemühungen hin.
www.drweb.de
197
Kapitel 5
Neugier der Besucher wecken
8. Umfragen im Web
Umfragen können Ihre Seiten aufwerten - sofern die Besucher Interesse am Ergebnis haben. Es versteht sich von selbst, dass diese
Aktionen mit dem Thema der Homepage oder Web-Site eng zu tun
haben müssen, ansonsten wirken Sie wie ein Fremdkörper. Aktionismus bringt nichts, wenn er am Interesse der Besucher vorbei
geht.
Die einfachste Art wäre die Sammlung von Umfrage-Informationen via Email. Man stellt einige Fragen und gibt jeweils eine
anderslautende Email-Adresse oder einen anderen Betreff vor. Das
ist problemlos umzusetzen, wenn man nur eine überschaubare
Menge an Leuten befragen will. Die Erfahrung zeigt aber, dass
Umfragen wirksamer sind, wenn man dem Besucher das Ergebnis
gleich präsentieren kann. Neugier ist in diesem Zusammenhang
ein Motor mit hohem Wirkungsgrad. Der Befragte erfährt nach
Abgabe seiner Stimme nicht nur, dass seine Meinung angekommen ist sondern auch, was andere Surfer denken. Eine solche LiveUmfrage braucht aber Skripte, die emsig im Hintergrund tätig
sind, Stimmen auszählen und in Form einer aufbereiteten Tabelle
oder Grafik darstellen.
Möglichkeiten dafür sind:
Poll-it
Ein kostenloses CGI-Script, das auf dem SSI-fähigen Server installiert wird. Wer die Möglichkeit dazu hat, bekommt alles, was er
braucht. Sobald die Stimme abgegeben wurde, erscheint das
Ergebnis, via SSI eingefügt, innerhalb der selben Seite. Da ein IPBlocking vorgesehen ist, ist es für gewöhnlich nicht möglich, noch
einmal zurückzuspringen und die Umfrage ein weiteres Mal auszuführen. Die Ergebnisse können nach Prozent-Anteilen ausgewertet werden.
Rogator
Den Internet-Rogator Q-Vote gibt es in verschiedenen Paketgrößen
- je nachdem ob eine einfache Umfrage über die Homepage oder
198
www.drweb.de
Kapitel 5
Neugier der Besucher wecken
ein ganzer Feldzug mit großen Besuchermengen geführt
werden soll. Entsprechend unterschiedlich fallen die Kosten aus.
Das reicht von gratis bis... Hier muss nichts auf dem Server instal-
liert werden, das Layout der Umfrage kann angepasst werden. Als
Zusatzleistung ist es möglich, sich eine Umfrage von Profis marketinggerecht konzipieren zu lassen.
Ergebnisfenster des Rogators
Elona
Der Online-Ted "Elona" wird mit eigener Software ausgeliefert. So
kann die Umfrage individuell eingestellt und gesteuert werden.
Integriert sind diverse Statistiken zur Auswertung der Umfrage.
Software-Updates werden innerhalb der Lizenzdauer kostenlos
zur Verfügung gestellt. Es fallen variable Kosten je 1000 abgegebene Stimmen an. Eine Live-Umfrage ist auf diese Weise allerdings nicht möglich. Dafür braucht aber auch nichts auf dem
Server installiert zu werden und die Ergebnisse können besonders
komfortabel ausgewertet werden.
www.drweb.de
199
Kapitel 5
Die Erfahrungen anderer nutzen
9. Webringe
Webringe haben sich hierzulande nur bedingt durchgesetzt,
während sie in Übersee seit Jahren fester Bestandteil der Homepage Szene sind. Das Prinzip ist einfach: Dutzende oder Hunderte
von thematisch verwandten Web-Sites werden über Linkboxen wie
Glieder einer Kette aneinander gehängt. Mitmachen ist kostenlos
und der Service auch für die Besucher interessant. Webringe gibt
es für fast alle Themen. Allerdings ist es nicht möglich, sich seine
Platzierung innerhalb des Ringes auszusuchen. Auch die eingesetzten Linkboxen sind in der Regel keine Kunstwerke. Sie sind
meist groß, bieten schlechte Grafiken oder laute Animationen und
verschandeln manche gelungene Homepages. Der hier erzeugte
Traffic ist zwar nicht groß, dafür aber regelmäßig und von guter
Qualität.
Verschandelt Webseiten: Hässliches Logo eines Webrings
200
www.drweb.de
Kapitel 5
Schreib mal wieder
10. Newsletter
Wenn Sie regelmäßig mehr als nur ein Design-Update zu vermelden haben, können Sie einen Newsletter herausgeben. So rufen Sie
sich laufend in Erinnerung und können neue Rubriken oder
Leistungen einer erklecklichen Anzahl von Interessenten mitteilen. Newsletter eignen sich hervorragend, um langfristig mit
Kunden, Besuchern und Interessenten in Verbindung zu bleiben,
während die Empfänger von Ihren kostenlosen Tipps und
Hinweisen profitieren. Ein erfolgreicher Newsletter ist schließlich
auch als Werbemedium interessant. Beachten Sie aber, dass
Newsletter ein dauerhaftes wie regelmäßiges Engagement erfordern.
Der Computer- und Online-Markt ist schnelllebig, deshalb kommen die Newsletter der großen PC-Fachzeitschriften täglich bzw.
wöchentlich. Sie werden mit einem speziellen Email-Programm
oder entsprechenden Skripten ausschließlich an eingetragene
Empfänger verschickt. Ego-News über den Betreiber oder DesignUpdates kann man sich getrost schenken. Nutzen Sie für solche
Zwecke Services wie den von Netmind. Wer sich in Ihr Formular
einträgt, wird dann automatisch im Falle von Neuerungen benachrichtigt.
Auf folgende Punkte sollten Sie achten:
.. Aktualität,
keine veralteten Nachrichten
Regelmäßiges und pünktliches Erscheinen
.. Bringen
Sie "Insider-Infos", die nicht jeder hat.
Garantieren Sie, dass Email-Adressen nicht für andere Zwecke
benutzt oder weitergegeben werden.
.. Newsletter
sollten kostenlos sein. Weisen Sie darauf hin.
Jede Ausgabe muss die URL Ihrer Website und einen Hinweis
Abmeldemöglichkeiten enthalten.
. auf
Weniger moderne Email-Clients können keine Umlaute darstellen. Um den Newsletter nicht unlesbar zu machen, sollten Sie
auf Umlaute verzichten
. Nicht
jedes Mail-Programm beherrscht den automatischen
Zeilenumbruch. Beschränken Sie sich daher auf etwa 65
Zeichen.
www.drweb.de
201
Kapitel 5
Schreib mal wieder
. Liefern Sie ein Inhaltsverzeichnis oder einen Schnellüberblick
zur besseren Orientierung .
. Sorgfalt
ist Trumpf: Fehlende Links, verlorengegangene
Textpassagen oder eine Garnitur von Rechtschreibfehlern können Unmut erzeugen. Falschmeldungen kratzen an Ihrem Ruf
oder geben Sie gar der Lächerlichkeit preis.
Technische Möglichkeiten:
Private Newsletter, nicht mehr als 10 Anmeldungen täglich:
Pegasus Mail (deutsche Version verfügbar) Freeware, auch so als
E-Mail Client nutzbar. An- und Abmeldungen können über Filter
bequem gesteuert werden.
Größere Newsletter, eigener Server vorhanden: Das MajodomoPerl-Script bearbeitet alles automatisch und wird per E-Mail
administriert. Außerdem stehen diverse weitere Freeware CGI
Scripte zur Verfügung.
Die bequemste Lösung: Mieten Sie einen externen Dienst. Bei
KBX.de können Sie schon für ca. 30,- DM im Monat einsteigen.
Ecircle erledigt die gleiche Aufgabe sogar kostenlos, hier aber muss
mit Werbung des Anbieters gerechnet werden.
Newsletter eignen sich auch gut als Werbeträger und sind weniger
unaufdringlich, preiswert und zielgruppengenau. Da der Leser
seine E-Mail offline liest, also nicht unter Zeitdruck steht, kann er
Werbung intensiver lesen; Adressen sind weniger flüchtig als bei
Online-Bannerwerbung. Werbung in Newslettern ist
10 Tipps, wie Sie Ihren Newsletter bekannt machen:
Nicht jeder Besucher Ihrer Web-Site wird automatisch zum
Abonnenten eines Newsletters. Unser Newsletter, der DWN, ist
erfolgreich. Auch Sie können das schaffen und die Auflage Ihrer
Publikation steigern. Aber Sie müssen die Sache schon ein wenig
schmackhaft präsentieren.
202
www.drweb.de
Kapitel 5
Schreib mal wieder
1. Sorgen Sie dafür, dass man Ihren Newsletter auch wahrnimmt. Bieten Sie eine Abo-Möglichkeit auf jeder Seite Ihres
Projekts. Wenn das nicht möglich ist, sollte Ihr Newsletter wenigsten auf der Startseite deutlich sichtbar auftreten. Eine Unterseite
ist nicht genug und verschenkt Potenzial.
2. Beschreiben Sie ihren Newsletter, machen Sie Appetit
und zeigen Sie, was Sie zu bieten haben. Sofern genug Platz
ist, helfen auch "Testimonials" das Vertrauen in Sie und Ihre
Publikation zu stärken. Dabei handelt es sich um positive
Meinungsäußerungen Ihrer Leser. Bitten Sie auf jeden Fall vorher
um die Erlaubnis zur Veröffentlichung..
3. Stellen Sie eine Belohnung für den Eintrag in die
Abonnentenliste in Aussicht. Das kann ein extra Artikel sein,
den nur neue Abonnenten erhalten oder einige besonders wertvolle Tipps.
4. Nutzen Sie die Möglichkeiten, die Ihnen das Web kostenlos bietet. Viele Web-Sites listen oder berichten gern über Ihr
Projekt.
5. Sofern ein Abonnement über ein CGI-Formular bestellt
wird, können Sie sich eine Funktion des Skripts zu Nutze
machen. Nach dem Abschicken wird der Besucher für gewöhnlich
auf eine "Dankeschön"-Seite weitergeleitet. An dieser Stelle können Sie einen weiteren Letter zum Abo anbieten. Sofern Sie selbst
nur einen herausgeben, arrangieren Sie sich mit einem anderen
Herausgeber und erhöhen damit die Auflagen, zum beiderseitigen
Wohle.
6. Veranstalten Sie eine Verlosung unter allen Neuanmeldungen. Auch das wird die Bereitschaft zu einem Abo
erhöhen. Denken Sie sich dafür einen attraktiven Preis aus.
7. Schalten Sie Anzeigen in anderen Newslettern oder tauschen Sie Anzeigen. Das funktioniert besonders gut bei thematisch verwandten, aber nicht konkurrierenden Angeboten.
www.drweb.de
203
Kapitel 5
Schreib mal wieder
8. Niemand kauft gern die Katze im Sack. Das gilt auch für
Newsletter und auch dann, wenn diese in der Regel kostenlos sind.
Wer vorher weiß, was er bestellt, wird so schnell nicht wieder
abbestellen. Legen Sie deshalb ein Archiv mit alten Ausgaben an
und halten Sie zumindest die jeweils aktuelle Ausgabe zum
Online-Lesen bereit. Alte Ausgaben werden auch von Suchmaschinen indiziert und können so für mehr Besucher sorgen.
9. Fordern Sie Ihre Leser auf, Ihren Newsletter weiterzuempfehlen. Eventuell können Sie auch das mit einer Prämie oder
einem Gewinnspiel koppeln.
10. Methoden, die Sie auf keinen Fall verwenden sollten,
sind das unaufgeforderte Verschicken von Probeexemplaren oder
das absichtliche Vergessen von "unsubscribe"- (Abmelde-) Hinweisen. Diese dürfen in einem Newsletter nicht fehlen.
ISSN
Jede Zeitschrift, die etwas auf sich hält, hat eine ISSN
(Internationale Zeitschriften Nummer). Diese kann und sollte
auch ein Newsletter erhalten. Man erhöht damit den guten
Eindruck, den ein Newsletter nach außen abgibt. Diese Kennzeichnung kann form- und kostenlos bei der Deutschen Bibliothek
beantragt werden. Verlangt werden ein ausgedrucktes Probeexemplar mit Titel und Herausgeber. Die Adresse lautet: Deutsche
Bibliothek, Adickesallee 1, 60322 Frankfurt.
Email-Etikette
Diejenigen, die mit dem Medium Internet noch wenig Erfahrungen
haben, wissen mitunter gar nicht, wie ihre Botschaften auf der
anderen Seite ankommen. Um Ihre Briefpartner nicht zu verärgern, sollten Sie zumindest einige Dinge beachten, die man unter
dem Begriff Email-Etikette zusammenfasst.
1) Nicht jeder benutzt neueste Email-Software. Sie sollten
deshalb bei Kommunikation mit Unbekannten auf Umlaute im
Subject (Betreff) verzichten; das gilt auch für den eigentlichen
Text.
204
www.drweb.de
Kapitel 5
Schreib mal wieder
2) Messages im MIME (HTML)-Format sind kein WebStandard. Ihr Gegenüber erhält eine mitunter unleserliche Mail.
Solche Formate verbieten sich insbesondere bei Mailinglisten.
Emails im HTML-Format bergen zusätzlich auch Sicherheitsprobleme. So lassen sich zum Beispiel selbstgestrickte Javascript oder Active X-Anwendungen in einer HTML-Mail verstekken, die beim Öffnen dem Empfänger schaden können.
3) "Doppelt hält besser" ist in diesem Falle die schlechtere
Alternative, das bläht die Mail-Dateien nur unnötig auf.
4) Verschicken Sie niemals ungefragt Newsletter, Infos,
Virenwarnungen oder Kettenbriefe.
5) Wer eine komplette Email zurückschickt, um dann
"Danke" darunter zu setzen, outet sich als gedankenloser Kommunikations-Neandertaler. Das ist unhöflich und unnötig.
6) Zitate sind nur dort angebracht, wo sie nützlich sind.
Viele Zitate sorgen für schlecht lesbare Mails. Darauf zu antworten, ist eine Kunst für sich.
7) Attachments (angehängte Dateien) mit Grafiken,
Postcards, etc. sind generell verpönt und dürfen nur mit Einverständnis des Empfängers verschickt werden
8) V-Cards und PGP-Schlüssel gehören ebenfalls nicht in
die Email.
9) Jede Email darf nach Tippfehlern durchsucht werden.
Auch wenn schnelle Antworten gefragt sind, dafür muss immer
Zeit sein.
10) Vergreifen Sie sich nicht im Ton und beachten Sie, das ein
Fremder auch einen Scherz falsch verstehen könnte. Eine "Lippe"
riskieren können Sie dann, wenn Sie den Adressaten gut kennen.
www.drweb.de
205
Kapitel 5
Ideen muss man haben
11. Aktionen
Stellen Sie sich vor, Sie hätten die Blue Ribbon Campain erfunden.
Zeigen auch Sie, dass Sie Ideen haben und kreativ sind. Rufen Sie
Aktionen ins Leben, die überall Gehör finden. Auch die Presse ist
ganz vernarrt in solche Geschichten. Vielleicht gelingt Ihnen der
große Wurf ...
12. Mehr Seitenaufrufe mit unfeinen Methoden
Kommen nicht genügend Besucher auf Ihre Seiten, ist die sicherste Methode, mit neuen Inhalten für die Web-Site zu werben. Wo
mehr zu sehen und zu erfahren ist, werden auch mehr Seiten aufgerufen. Doch es gibt Webmaster, die ihre Energie auf mehr oder
weniger sinnvolle Tricks verwenden und dabei nicht immer an das
Wohl derer denken, die ihre Seiten besuchen. Mit solchen
Mogelpackungen lassen sich die Page-Impressions (Seitenaufrufe)
rasch verdoppeln und verdreifachen. Aber Besucher lassen sich
nicht dauerhaft täuschen. Große Zahlen sind auch nicht automatisch mit größerem Erfolg verbunden.
1. Proxy Server umgehen
<meta http-EQUIV="pragma" content="no-cache">
Dieser im Dateikopf zu platzierende Meta Befehl hat seine
Berechtigung. Wenn sich laufend etwas auf einer Seite ändert,
müssen die Besucher schließlich davor bewahrt werden, alte
Inhalte serviert zu bekommen.
2. Browser beim erneuten Aufruf einer Seite zum Reload
zwingen
<meta http-equiv="expires" content="0">
Auch dagegen ist noch nichts einzuwenden - legal.
206
www.drweb.de
Kapitel 5
Mogelpackungen
3. Weiterleitung
Der Befehl bewirkt in Verbindung mit den Meta-Befehlen die
Weiterleitung auf die schon aufgerufene Seite, welche sich daraufhin erneut aufbaut. Effekt: Der Counter rotiert.
<meta http-equiv="refresh" content="10; URL=selbeseite.html">
4. Versteckter Aufruf
Verwendet wird ein Inline-Frame mit den Maßen "0". Gäste mit
dem Internet Explorer rufen dann mit jeder Seite - ohne es zu wissen - eine zweite auf.
<iframe src=zweite.html width=0 height=0
framebor-der=0></iframe>
5. Artikel oder Linklisten aufteilen
Eigentlich kurze Artikel oder Linklisten werden auf mehrere
Seiten aufgeteilt. Das bringt unter günstigen Umständen eine
glatte Verdoppelung der Seitenaufrufe.
6. Undurchsichtige und verschlungene Navigation
In diesen Bereich fallen auch die eher unbeabsichtigten Gestaltungen, wie schlecht getextete Links, rätselhafte Buttons und
unnötigerweise eingezogene Ebenen.
7. Seiten-Vorschaltungen
Dem eigentlichen Inhalt wird eine extra Seite oder ein Tunnel vorgeschaltet. Das kann durchaus Sinn machen kann, wird aber (leider) auch aus den hier beschriebenen Gründen eingesetzt.
8. Selbsttätig aufklappende Javafenster
9. Abschiedsfenster
Beim Verlassen einer Site erscheinen Sätze wie: "Was, Sie wollen
schon gehen?"
10. Umleitung
Reißerische Headlines auf der Startseite weckt zwar das Interesse,
führen aber nicht auf die entsprechende Nachricht, sondern auf
eine Rubriken-Seite mit weiteren Nachrichten. So ließe sich außer
www.drweb.de
207
Kapitel 5
Mogelpackungen
auf Web-Seiten auch in Newslettern arbeiten. Das sind typische
Methoden, wie sie etwa beim TV-Videotext üblich sind.
Miese Methoden mit Javascript
Mehr Seitenaufrufe zu bekommen, ist nicht nur für das Ego wichtig, sondern erhöht die Zahl der eingeblendeten Werbebanner und
lässt die Kassen klingeln. Zu den beliebtesten Spielzeugen der virtuellen Drücker gehört seit längerem Javascript.
Seiten aus dem Rotlicht- und Raubkopierer-Milieu werden nicht
nur vielfältig miteinander verwoben, öffnen unaufgefordert Fenster auf dem Bildschirm mit ständig neuen Angeboten, selbst mit
dem Verlassen einer Site wird nicht aufgegeben. Hauptsache der
Surfer klickt noch eine Runde weiter.
Diese Scripte veröffentlichen wir, damit Sie diese kennen lernen
und studieren können. Benutzen muss/sollte man das nicht immer ganz dem Besucher verpflichtet ...
1. Popup Fenster
Hier von einem miesen Trick zu sprechen, ist eigentlich unfair,
denn das Pop-Fenster ist salonfähig geworden. Im übertragenen
Sinne "link" ist aber daran, dass damit die Page-Views verdoppelt
werden, ohne das der Surfer gefragt würde. Wenn dann das
Fenster zudem nichts als Werbung enthält, ist das sicher nicht die
"feine Art".
2. Popup Fenster mit Aufforderung zum Eintrag in die
Favoriten
Hier geht es schon dreister zu. Auch wenn die Sache nur mit dem
IE funktioniert, wer verklickt sich nicht einmal in der Eile - und
ist schon um einen Eintrag in die Bookmarkliste reicher.
208
www.drweb.de
Kapitel 5
Mogelpackungen
if (navigator.appName == 'Microsoft Internet
Explorer' && parseInt(navigator.appVersion) >= 4)
{
window.external.AddFavorite('http://www.ideen
reich.com/drweb.shtml', 'Dr. Web Magazin');
}
germanconsoleWin = open('', 'Consolewin','toolbar=0,
menubar=0,scrollbars=0,
status=0,resizable=0,width=200,height=400');
germanconsoleWin.blur();
germanconsoleWin.location = 'werbefenster.shtml';
</script>
3. Neues Fenster beim Verlassen einer Seite
Spätestens jetzt wird es unseriös und man kann nicht mehr darüber lachen. Nicht einmal das Wegklicken eines unerwünschten
Angebotes hilft, denn der Browser öffnet im Sterben ein neues
Fenster. Und das könnte sich fortsetzen ...
<SCRIPT language="Javascript">
<!-var exit=true;
function maxcashg2() { if (exit)
open("ausweg.html","new_window","
width=250,height=150");}
//-->
</SCRIPT>
Diese Zeilen gehört in den Body Tag:
body onunload=maxcashg2()
4. Startseite erzwingen
Auch das kommt inzwischen immer öfter vor: Beim Betreten einer
Web-Site öffnet sich ein Fenster, das zur Bestätigung auffordert,
ob die Seite als Startseite im Browser festgelegt werden soll. Ein
ähnliches Script haben wir auch als Trick veröffentlicht, allerdings
mit dem feinen Unterschied, dass der Besucher selbst auf den Link
klicken muss. Wer keinen Microsoft-Browser benutzt, bleibt von
diesen Techniken verschont.
www.drweb.de
209
Kapitel 5
Das ganze Web per Email
13. Autoresponder
Manche Artikel und Beiträge aus dem Web können Sie sich per
Email schicken lassen. Das ist eine feine Sache, spart Zeit und
erleichtert die Archivierung. Wir verraten Ihnen, wie Sie das mit
einfachen Mitteln für Ihre Web-Site realisieren. Um nun nicht
Texte manuell und einzeln senden zu müssen, benötigt man eine
Automation, einen sogenannten Autoresponder. Das sind automatisch verschickte Antworten, die man auf eine Anfrage hin erhält.
Autoresponder werden von vielen Providern bereits angeboten,
lassen sich aber auch nachrüsten. Der große Vorteil des Verfahrens
besteht auch darin, dass man ohne personellen Einsatz beliebige
Mengen an Informationen versenden kann.
Das Ganze funktioniert so: Sobald jemand über einen Link eine
Email Botschaft sendet, tritt der Autoresponder in Aktion und sendet eine vorbereitete Datei an den Absender. Gleichzeitig wird eine
Benachrichtigung an den Eigentümer der Web-Site geschickt.
Probieren sie es aus und schicken eine leere Email an die Adresse
[email protected]
Dazu ist folgendes einzurichten:
. Eine Textdatei mit den gewünschten Informationen. HTML ist
hier nicht erlaubt. Links und Hinweise können an das Ende
gesetzt werden.
. Einen Autoresponder mit dem selben Dateinamen
. Einen Link, der das Email-Programm des Besuchers öffnet. Zum
Beispiels
<a
href="mailto:[email protected]?subject=Artikel_ddrsen">Diesen Artikel per Email verschicken</a>
Das Subject ist nur nötig, damit Sie wissen, welche Artikel abgerufen wur-den. Sie können darauf auch verzichten.
210
www.drweb.de
Kapitel 5
Das ganze Web per Email
Im Klartext heißt das: Sie reservieren eine Email-Adresse und
teilen diese über ein Online-Formular dem Server mit. In eine
Textdatei schreiben Sie die Informationen für Ihre Gäste und
laden sie in das Stammverzeichnis des Servers im ASCII-Modus
oder das vom Provider angegebene Verzeichnis.
Wem das alles zu kompliziert ist, oder wer keine Autoresponder
bekommen kann, der kann sich auch eines kostenlosen Services
bedienen. Der Netinformer verschickt Webseiten an den Absender
oder an Freunde und Bekannte. Nach der Anmeldung und dem
ersten Login erhält man einen Quellcode, der lediglich kopiert und
an die entsprechenden Stellen eingefügt werden muss. Daraufhin
prangt auf den so ausgestatteten Seiten ein Button. Wer darauf
klickt, sieht sich einem Popup-Fenster gegenüber, in das er den
Namen und die Emailadresse des Empfängers sowie seine eigenen
Daten eintragen kann. Anschließend gibt es eine Bestätigung, die
vergleichsweise unauffällige Werbung enthält.
Dank des Netinformers können Sie Ihre Seiten mit einer Funktion
versehen, die sonst nur mit dem bereits beschriebenem Aufwand
oder mit datenbankgestützten Systemen realisiert wer-den kann.
Emails werden aber mit Netinformer nicht als HTML verschickt.
Das ist an sich "kein Beinbruch", nur sehen Menüleisten, Umlaute
nicht wie üblich entsprechend aus. Im Vorteil sind hier Besitzer
von geframten Sites, denn reiner Text macht die wenigsten
Probleme.
www.drweb.de
211
Kapitel 5
Hinter die Kulissen geschaut
14. Wer besucht Sie eigentlich?
Weiterentwickelt werden können Web-Sites nur, wenn möglichst
detaillierte Daten über die Besucher und ihr Verhalten vorliegen.
Die besten Werbe- und Marketingstrategien nützen gar nichts,
wenn man keine Kontrolle darüber hat. Entwicklungen, in welche
Richtung auch immer, kann nur erfassen und analysieren, wer
über entsprechendes Zahlenmaterial verfügt.
Counter sind genaugenommen nur Spielzeuge auf einer Web-Site,
die zudem noch trefflich manipuliert werden können. Um eine
brauchbare Site-Statistik zu erhalten, sollte man sich der LogDateien des Servers als Königsweg zum Wissen über Gäste und
Besucher bedienen. Ursprünglich waren Log-Dateien dazu
gedacht, fehlende Seiten oder Grafiken aufspüren. Dazu kann man
sie freilich auch heute noch benutzen.
Ein Log ist nichts anderes als eine Textdatei, die sämtliche
Zugriffe auf einen bestimmten Server aufzeichnet. Dabei wird
jeder einzelne Abruf protokolliert, gleich ob sich dabei um eine
HTML-Seite, eine Grafik, einen Hintergrundklang, ein StyleSheet
oder sonstiges handelt.
Beispiel für einen Eintrag in die Log-Datei:
pc19f0042.dip.t-online.de - - [19/okt/1999:20:50:37 +0100]
"GET /index.html HTTP/1.0" 200 9014 "http://home.t-online.
de/home/homepage/seite.htm" "Mozilla/4.5 [de] (Win95; I)"
Logdatei in einem Text-Editor
212
www.drweb.de
Kapitel 5
Hier wird ein einzelner Seitenaufruf festgehalten. Aus ihm lässt
sich eine Vielzahl von Informationen herauslesen:
.. Der Server von dem die Anfrage kam
und Uhrzeit des Zugriffs
.. Datum
Die aufgerufene Datei
Serverstatus (200 = alles OK | 404 Datei nicht vorhanden | und
andere)
.. URL von welcher der Aufruf kam (Referer)
. Browser, Browser-Version und Sprache
Betriebssystem
Jetzt haben Sie Klarheit darüber, welche Browser die Gäste benutzen, wann die meisten Zugriffe erfolgen und auf welche Seiten das
geschieht. Besonders interessant ist auch die Herkunft der
Besucher. So lässt sich leicht feststellen, welche Links, welche
Suchmaschinen-Strategie und welche Bannerwerbung zum Erfolg
führt. Ambitionierte Webworker kommen ohne diese Daten nicht
aus. Auch Fehler und Probleme mit der Navigation lassen sich
schnell aufspüren. Auch Browseranalysen gehört zum SiteManagement.
Log-Dateien erhält man direkt vom Provider, eine Bitte sollte
genügen. Aber Vorsicht, je nach Traffic können diese Dateien sehr
groß werden. Idealerweise werden sie daher schon auf dem Server
komprimiert. Wer kostenlosen Webspace benutzt, hat allerdings
keine Chance in den Genuss der Dateien zu kommen.
Wegen der Größe der Log-Dateien verbietet sich Auswertung "zu
Fuß". Man braucht ein Programm, um die vom Server geladenen
Dateien offline nach allen Regeln der Kunst analysieren zu können. Markführer Webtrends ist allerdings nicht billig und die TestVersion steht gerade einmal 14 Tage zur Verfügung. Eine preiswertere Alternative findet sich in Fast Stats. Aus deutschen
Landen stammt WebSuccess, welches auch in einer preiswerteren
Light-Version zu haben ist. Macianer setzen auf Funnel Web.
Die gründliche Analyse hilft auch, Zugriffe auf längst nicht mehr
vorhandene Seiten zu erkennen. Diese Besucher können Sie
zurückgewinnen, indem Sie die nicht mehr vorhandenen Seiten
www.drweb.de
213
Kapitel 5
leer erstellen und die Besucher mittels Meta-Refresh auf eine
andere Seite umleiten.
Diese Suchmaschinen schicken Besucher - Auswertung mit WebSuccess 3.0
Fazit: Wenn Sie Besucherströme verfolgen können, haben Sie
auch die Möglichkeit, korrigierend einzugreifen: Was nicht funktioniert, fliegt raus. Was nicht gefunden wird, wird exponiert. Was
erfolgreich ist, wird erweitert. Nutzen Sie Ihre Chancen, die
Möglichkeiten haben Sie längst.
Online-Statistik mit Wusage 5.0
214
www.drweb.de
Kapitel 5
Auf Mata Haris Spuren
15. Web-Spionage
Online-Statistiken, Counter und Logs sind oft nicht gegen Zugriffe
von außen geschützt. Also liest die Konkurrenz mit und ist
(manchmal) gut informiert. Nun ist es nicht unbedingt ein Problem, wenn neugierige Zeitgenossen zufällig in den Zahlendschungel geraten. Wenn Sie aber im Wettbewerb stehen, zum
Beispiel als Anbieter von Webspace, Software, Countern oder
anderen Online-Dienstleistungen, sieht das anders aus. Ihre
Mitbewerber wissen dann nicht nur, wie erfolgreich Ihr Angebot
ist, sondern auch, wer auf Sie linkt, wie Sie Ihre Werbung organisieren, wie oft Download- oder kostenpflichtige Bereiche genutzt
werden.
Solche Statistiken finden sich beim Studium der Logs Files oder
über Suchmaschinen, man kann aber auch aktiv nach ihnen
suchen, indem man gängige Verzeichnisnamen mit dem Browser
aufruft. Sie können das mit den folgenden oder ähnlichen URL's
ausprobieren. Das gelingt natürlich nicht auf Anhieb. Spionage
braucht Geduld. Der Fairness halber nennen wir keine Beispiele.
Verlangen Sie von Ihrem Provider, die betreffenden Verzeichnisse
mit Passwörtern zu schützen oder richten Sie selbst eine entsprechende Möglichkeit ein.
http://www.domain.de/analog/
http://www.domain.de/alog/
http://www.domain.de/wusage5.0/index.html
http://www.domain.com/stats/statistics/
http://www.domain.de/logs/
http://www.domain.de/stats/log/
Gegen Suchmaschinen hilft zwar ein Eintrag im "robots.txt". Der
jedoch kann Neugierige erst auf die richtige Spur bringen, schließlich kann auch diese Datei mit jedem Browser aufgerufen werden.
Das gleiche Prinzip gilt übrigens auch für diverse externe Counter,
die von außen zwar nicht verändert, jedoch komplett eingesehen
werden können.
www.drweb.de
215
Kapitel 5
Noch Fragen...?
Kann man die Klickraten eines Newsletters auswerten?
Das ist unter bestimmten Voraussetzungen machbar. Man müsste
eine URL auf dem eigenen Server angeben, die Aufrufe dieser Seite
zählen oder loggen und den Surfer automatisch mit einem MetaRefresh weiterleiten. Denkbar wäre auch, ein CGI-Script einzusetzen, was aber von Newsletter-Lesern nicht geschätzt wird. Sie wollen die Original-URL, damit sie wissen, wo sie landen. Der Klick
auf diese URL lässt sich von außen nicht verfolgen. Der Vorgang
spielt sich allein zwischen dem Leser und der Ziel-Web-site ab. Da
kommt niemand zwischen.
Wie kann man mit einer Seite über kostenlose Dienstleistungen am besten Geld verdienen?
Vergessen Sie den Gedanken. Geld verdienen möchte jeder gern, es
gibt aber nur ganz wenige, die das auch schaffen. Ohne Investition
und ebenso beharrliche wie kontinuierliche Arbeit klappt es nicht.
1000 Besucher sind eine feine Sache, aber bei altbackenen Inhalten, die es an jeder Ecke gibt, findet man keine, bestenfalls
unseriöse, Werbekunden. Was die anderen anbieten, sind überwiegend getauschte Links und Banner. Um Geld zu verdienen, muss
man zum Hörer greifen, Leute anrufen, Kontakte herstellen und
pflegen. Das kostet dann schon wieder viel Zeit und auch Geld.
Auch die Firmen, die ein paar Pfennige pro Bannerklick ausschütten, helfen nicht weiter. Da kommt nicht einmal ein Taschengeld
zusammen. Viel schöner ist es, wenn Sie etwas für die Menschen
tun, die Sie besuchen und das Netz damit bereichern. Das macht
zudem mehr Spaß und bringt Anerkennung. Wer weiß, später wird
vielleicht mal was ein tolles Projekt daraus und man verdient auch
damit. Nur Geduld, die muss man schon vorher haben.
Mein Server ist gelegentlich offline. Gibt es Services, die
unabhängig kontrollieren und mir eventuell Bescheid
geben?
Ja, die gibt es. Drei davon sind uns bekannt. Sie können kostenlos
216
www.drweb.de
Kapitel 5
Noch Fragen...?
in Anspruch genommen werden. Sollte der Server nicht erreichbar
sein, gibt es sofort eine Email, Netwhistle schickt auch Benachrichtigungen an Pager.
http://www.webpartner.com/
http://www.netwhistle.com/
http://uptime.arsdigita.com/uptime/about.tcl
Wie kann ich die Email-Adressen meiner Besucher ermitteln?
Es gibt Programme, zum Beispiel Leadspinner, mit dem man das
tun kann. Aber das funktioniert auch nur teilweise, je nachdem
welche Software die Gäste benutzen. Der Leadspinner ist eine serverseitige Installation und nicht ganz billig.
Eine Javascript-Lösung ist uns nicht bekannt. Auf jedem Fall sollte man sich vor solchen Praktiken hüten, denn wenn es ruchbar
wird, gibt es Ärger. Die Leute mögen es einfach nicht. Egal aus
welchen Gründen, man bewertet es wie Spionage.
http://www.leadspinner.com
www.drweb.de
217
Kapitel 5
17. Links zum Thema
Awards
http://www.metatron-index.de/
http://www.awards.de
http://www.awardmuseum.de (im Aufbau)
Bannertausch
http://www.link4link.com
http://www.link4link.de/newcomer-site/bannerkalkulator.html
http://www.page2page.de
http://www.adview.de
http://www.link4u.de/
Gewinnspiele
http://www.kostenlos.de
http://www.gewinnspiele.com
http://www.kostnixx.de
http://www.superwin.de
http://www.gratisworld.de
http://www.gratisweb.de
http://www.geizhals.de
Log-Analyzer
Logscribe
http://www.texas.net/~cedras/logscribe/
Webtrends
http://www.webtrends.com
WebSuxess
http://www.websuxess.de
Funnel Web
http://www.activeconcepts.com/
218
www.drweb.de
Kapitel 5
Newsletter
Netmind
http://www.netmind.com
Pegasus Mail
http://www.pegasus.usa.com
Majodomo Perl Script
http://www.greatcircle.com/majordomo
KBX
http://www.kbx.de
E-Circle
http://www.ecircle.de
Autoresponder
Netinformer
http://www.netinformer.com
Umfragen
Poll-it
http://www.cgi-world.com/pollit.html
Rogator
http://www.rogator.de
Elona
http://www.elona.de
www.drweb.de
219
Kapitel 5
Für Ihre Notizen
220
www.drweb.de
Kapitel 5
Für Ihre Notizen
www.drweb.de
221
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Suchmaschinen als nützliche Helfer
1. Für den Einsatz fit machen - Seiten optimieren
2. Agenten im Netz - Was sind Spider?
3. Nicht immer die fairsten Mittel Suchmaschinen austricksen
4. Gewusst wie - Meta-Tags richtig einsetzen
5. Taktisch klug eingesetzt - Robotern die Fährte legen
6. So knacken Sie das Problem Frames und Suchmaschinen
7. Der Kampf um die besten Plätze Optimierung mit Rankware ® 99
8. Seiten bei Suchmaschinen anmelden Auf die Wesentlichen kommt es an
Suchmaschinen schicken Besucher vorbei, ohne das dafür ein
finanzieller Einsatz erbracht werden muss. Nicht zuletzt deshalb
sind sie bei Homepage-Bastlern ebenso beliebt wie bei den Profis
in der Branche. Doch von ganz allein "spuren" auch die
Suchmaschinen nicht. Web-Seiten müssen sowohl entsprechend
gestaltet als auch bei den Suchmaschinen angemeldet werden,
damit entsprechende Anfragen auch zu den gewünschten
Ergebnissen führen. Die Datenbestände der Suchmaschinen sind
inzwischen derart angewachsen und die Zahl der Mitbewerber ist
so groß, dass nur solche Seiten eine Chance haben, die speziell auf
die Erfordernisse und Taktiken der Suchmaschinen zugeschnitten
wurden. Verbindliche Regeln gibt es dafür aber nicht, da alle
Suchmaschinen nach einem anderen, ausgeklügelten Prinzip
funktionieren und die Suchalgorithmen laufend verändern und
erweitern.
Unglücklicherweise sieht eine Suchmaschine eine Web-Seite in
etwa so wie ein uralter Browser. Das heißt, weder Grafiken noch
Tabellen werden berücksichtigt und moderne Gestaltungselemente wie Layer, Javascript, Applets und so weiter mindern sogar
die Chancen, erfolgreich zu sein. Deshalb lassen sich nicht alle
Tipps gleichermaßen einsetzen. Hier gilt es, ein gesundes
Verhältnis abzuwägen, denn hässliche Seiten sind weder für den
Web-Designer noch für den Besucher akzeptabel.
222
www.drweb.de
Damit man Sie im Web findet
Kapitel 6
Für den Einsatz fit machen
1. Seiten optimieren
Um Seiten für die Aufnahme in Suchmaschinen fit zu machen,
bedarf es einiger Regeln:
Text
Ein Suchwort (Keyword) muss innerhalb des Textes auftauchen.
Das sollte in einem bestimmten Verhältnis zur Textlänge und so
weit oben (vorn) wie möglich erfolgen. Genaue Aussagen über diese
sogenannte Relevanz lassen sich nicht treffen, da jede Suchmaschine anders vorgeht. Einfach gesagt: Das Suchwort darf weder
zu häufig noch zu selten auftauchen. Übertreiben lohnt also nicht.
Meta-Tags
Meta-Tags beinhalten Informationen, die nicht auf dem
Bildschirm dargestellt werden, aber von Spidern und Robots und
damit von bestimmten Suchmaschinen abgefragt werden können.
Zu diesem Zweck gibt es bestimmte HTML-Befehle, die sogenannten Meta-Tags.
Seitentitel
Der Seitentitel ist eines der wichtigsten Elemente. Er sollte wichtige Suchbegriffe enthalten und gleichzeitig für den Surfer aussagekräftig sein. Eine Seite lediglich als "Homepage" zu bezeichnen
ist deshalb höchst unglücklich. Mehr als acht Worte sind im
Allgemeinen nicht sinnvoll. Auch Trennungen, Worte oder einzelne
Zeichen nach Leerzeichen gelten dabei als Wort.
Gar nicht gut. Seitentitel=Dateiname. Aus der Sicht der SuchmaschinenOptimierung wurden hier alle Fehler auf einmal gemacht, wie ein Blick in den
Quellcode zeigt.
www.drweb.de
223
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Für den Einsatz fit machen
Überschriften
Klassische Überschriften werden mit dem <H1-6> Tag erzeugt.
Obwohl Überschriften recht groß und prägnant sein sollten, sind
sie leider meistens viel zu groß und nicht eben ästhetisch. Wenn
das nicht in Ihr Design-Konzept passt, steuern Sie mit den fontsize-Tag dagegen: <h1><font size="2">ideenreich</font></h1> .
Alternativ lassen sich auch Style Sheets einsetzen.
Links
Auch weiterführende Links können das Suchwort enthalten. Sie
werden in jedem Falle von den Spidern durchsucht. Manche
Suchmaschinen behaupten sogar, zu kontrollieren, wie viele Links
auf eine bestimmte Seite weisen. Je mehr Seiten das sind, desto
höher ist das Ranking und je wichtiger und prominenter eine Site
ist, desto nützlicher ist es für die Surfer, so die dahinter stehende
Logik. Natürlich können Sie da ein wenig nachhelfen.
Grafiken
Auch Grafiken werden indiziert, denn in großen Suchmaschinen
lässt sich auch nach Bildern suchen, obwohl das nur über die
Dateibezeichnung funktionieren kann. Zusätzlich sollte jede
Grafik ein sogenanntes ALT-Attribut enthalten, in dem das
Suchwort auftauchen kann. Mancher übertreibt und stattet auch
unsichtbare Grafiken (Blindgifs) mit entsprechenden Attributen
aus.
Dateinamen und Verzeichnisse
Ganz speziell die Suchmaschine Fireball hat es auf
Dateibezeichnungen und Verzeichnisnamen abgesehen. Wer hier
erfolgreich sein will, braucht entsprechend sinnvolle Namen. Es ist
daher eine gute Idee, einige Dateien in extra angelegte
Unterverzeichnisse auszulagern.
Textauszeichnungen
Ein Text in Fettschrift sollte höher bewertet werden als derselbe
Text ohne die Auszeichnung. Machen Sie deshalb gelegentlichen
Gebrauch von den Tags <strong> oder <b>. Ein Übermaß davon
negiert die Angelegenheit und macht die Seiten hässlich.
Kursivschrift bringt nicht denselben Effekt.
224
www.drweb.de
Kapitel 6
Agenten im Netz
Seitenstruktur
Erleichtern Sie den Spidern die Arbeit. Wenn Sie das nächste Mal
eine Web-Site anmelden müssen, versuchen Sie es mit einer eigens
für die Spider gemacht Inhaltsangabe. Diese Seite enthält außer
vielen Hyperlinks rein gar nichts. So kommt der Spider am
schnellsten von einer Seite zur nächsten. Mit dem NOINDEX
Meta-Tag verhindern Sie, dass diese Seite später in den Indices
auftaucht.
Brückenseiten
Verschiedene Seiten für verschiedene Suchmaschinen, die sogenannten Brückenseiten (auch bekannt als Bridge- oder TriggerPages, Trichter-Seiten, Funnel Pages oder Doorway Pages) sind
arbeitsintensiv. Probieren Sie es mit der einfacheren Methode und
schalten Sie Ihrer Startseite eine spezielle Suchmaschinenseite
voran. Diese Seite enthält keine Tabellen, keine Frames, keine
Grafiken, keine Imagemaps usw. Nur Text, Kommentare, Links
und Meta-Befehle sind erlaubt. Die Seitenüberschrift sollte in H1
erscheinen und dem Seitentitel entsprechen. Alle Meta-Keywords
müssen innerhalb des Textes wiederholt werden. Suchroboter fallen darauf herein und indizieren diese extra für sie erstellte Seite.
Wer die Seite abruft, klickt sich dann über einen gewöhnlichen
Hyperlink weiter. Auf einen Meta-Refresh für die automatische
Weiterleitung sollte man dabei verzichten, da einige Suchmaschinen diese Technik negativ bewerten. Selbstverständlich sind
auch mehrere Brückenseiten als Eingänge für verschiedene
Bereiche einer Web-Site möglich. Auch hier sollte man sich vor
Übertreibungen hüten, denn unzählige für den Surfer eigentlich
nutzlose Seiten blähen die Indices der Suchmaschinen auf und
machen das gezielte Finden noch schwerer, als es ohnehin schon
ist.
2. Was sind Spider?
Damit Informationen überhaupt in die Suchmaschinen gelangen
können, wird eine spezielle Software, die sogenannten Spider oder
Crawler (auch Robots genannt), ausgeschickt. Diese SoftwareAgenten durchstreifen in eigener Regie das Web und fahnden nach
neuen oder veränderten Web-Seiten. Jeder entdeckte Link wird
festgehalten und später verfolgt. Alle Seiten werden auf ihren
www.drweb.de
225
Kapitel 6
Agenten im Netz
Text-Inhalt hin untersucht und, wenn sinnvoll, dem Datenbestand
der Suchmaschine hinzugefügt. Dabei werden nicht nur HTMLSeiten erfasst, sondern auch Bilder, Klänge und andere Daten. Auf
diese Weise gelangen auch Seiten in die Suchmaschinen, die nicht
explizit angemeldet wurden.
Der Name des Spiders
Mozilla, den Maschinen-Namen des Netscape Browsers, kennt
jeder. Doch wenn Sie sich beim Blick in die Log-Dateien über gar
seltsame, putzige Namen wundern, können Sie hier die elektronischen Agenten von Suchmaschinen und Software identifizieren.
Spider können über Meta-Tags direkt beeinflusst werden. Auch
der sogenannte robots.txt wendet sich ausschließlich an die
Robots. Mit ihm können Sie bestimmte Spider ausschließen oder
verhindern, dass unwichtige Daten, zum Beispiel Demo-Seiten
oder Statistiken, erfasst werden. Dazu später mehr.
So erscheinen Spider in den Log-Dateien des Servers:
Architext ArchitextSpider
Kolibri gncwebbot
Scooter
Giordano
WiseWire
T-Rex
KIT
Winona
Tarantula
Eule-Robot
libwww-perl/5.07
libwww-perl/5.08
Aladin/3.324
Arachnoidea
Robot SuperSnooper
WebCrawler/3.0_Robot libwww/5.0a
Slurp
Sidewinder
ramBot
Gulliver
BackRub
226
--> Excite
--> Kolibri
--> Altavista
--> Goto
--> Lycos
--> Lycos
--> Fireball
--> WhatUSeek
--> Nathan.de
--> Eule
--> Crawler.de
--> Spider.de
--> Aladin
--> Euroseek
--> SuperSnooper
--> Webcrawler
--> Hotbot
--> InfoSeek
--> Intersearch
--> Northernlight
--> Google
www.drweb.de
Kapitel 6
Agenten im Netz
Öfter mal was Neues
Wichtig ist auch der Update-Zyklus Ihrer Seiten. Wo sich nichts
tut, schauen auch die Spider nur selten vorbei. Um nicht zum
Hinterbänkler zu werden, trainieren Sie die Robots durch häufige
und regelmäßige Updates Ihrer Seiten, ein Umstand, den übrigens
nicht nur Spider zu schätzen wissen.
Melden Sie sich öfter mal neu an, auch wenn Sie schon drinstehen.
Wenn Sie einen Missbrauch (Spamdexing) auf den vorderen
Plätzen erkennen, melden Sie die Seiten ebenfalls neu an. Mit ein
wenig Glück wird der unfreundliche Kollege diesmal erkannt und
Sie steigen in der Rangliste höher.
www.drweb.de
227
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Gewusst, wie...
3. Meta-Tags richtig einsetzen
Wer einmal einen Blick in den Quellcode einer Web-Seite geworfen
hat, kennt sie: Meta-Tags. Diese Befehle beinhalten Informationen, die nicht auf dem Bildschirm dargestellt werden, aber von
Spidern und Robots und damit von bestimmten Suchmaschinen
abgefragt werden können, andere Meta-Tags richten sich an den
Browser.
Da schätzungsweise nur etwa jede dritte kommerzielle Site von
dieser Möglichkeit Gebrauch macht, erhöhen Sie Ihre Chancen,
wenn Sie Meta-Tags einsetzen. Die hier beschriebenen Verfahren
funktionieren jedoch nicht bei manuell erstellten Verzeichnissen
wie Yahoo oder web.de. Im übrigen werden verschiedene Spider
eingesetzt und Ihre Seiten je nach Suchmaschine unterschiedlich
bewertet.
Angenommen, Sie wollen Ihre Site bei Fireball anmelden:
Dazu müssen Sie nicht mehr tun, als Ihre Webadresse in ein dazu
vorbereitetes Fireball-Formular zu tippen. Daraufhin erhalten Sie
Besuch vom Fireball-Spider. Da dieser Robot weder mit Grafiken
noch mit Javascript etwas anfangen kann und bei Frames ohnehin
völlig aufgeschmissen ist, helfen die Meta-Tags. Platziert zwischen
<head> und</head> einer jeden Seite könnte das so aussehen:
<meta name="description" content="Beschreibung Ihrer Site">
Die von Ihnen verfasste Beschreibung wird bei eventuellen
Treffern auf Grund von Suchabfragen als Information ausgegeben.
Ohne Meta-Tags würden eventuelle Interessenten vielleicht
Kostproben eines Javascript-Codes bewundern dürfen. Die
Beschreibung sollte den tatsächlichen Inhalt der Seite in normaler
Sprache wiedergeben.
Zusätzlich haben Sie die Möglichkeit, Stichwörter anzugeben, die
sich aus mehreren Begriffen zusammensetzen können und durch
Kommata oder Semikola abgetrennt werden. Auch diese merkt
sich der Spider. Wenn Sie "Telefonkabel" als Keyword festlegen
und ein User als Stichwort in eine Suchmaschine ebenfalls
Telefonkabel eintippt, könnte Ihre Seite in der Liste der
228
www.drweb.de
Kapitel 6
Gewusst, wie...
Fundstellen erscheinen.
<meta name="keywords" content="Telefonkabel,Telefon">
Wenn sich Ihre Stichworte im Text wiederholen, haben Sie gute
Chancen bei einer entsprechenden Abfrage gefunden zu werden.
Dabei können Sie auch versuchen, Tippfehler zu berücksichtigen.
Es kommt durchaus vor, dass weniger gewandte Zeitgenossen nach
einem "Telefoncabel" suchen.
Weisen Sie den Robot an, sämtlichen Links zu folgen. So werden
nach und nach alle Ihre Seiten in den Suchindex aufgenommen,
ohne das Sie etwas dafür tun müssen.
<meta name="robots" content="index, follow">
Der folgende Tag sorgt dafür, dass nur die angemeldete Seite indiziert wird. Der Robot folgt nicht den Links, um weitere Seiten zu
untersuchen.
<meta name="robots" content="nofollow">
Mit Hilfe einer weiteren Variante können Sie dem Spider mitteilen, dass er bestimmte Seiten NICHT untersuchen soll. Zum
Beispiel Muster-, Test- oder Navigationsseiten, die Bestandteil
eines Framesets sind.
<meta name="robots" content="noindex">
Ein weiterer Tag verhindert, dass Seiten über den Proxy-Server
zwischengespeichert werden. Mit "no-cache" anstelle von "private"
verhindern Sie auch das Speichern im Browser-Cache, vorausgesetzt, der Browser spielt mit.
<meta http-EQUIV="pragma" content="private">
"Revisit" sorgt dafür, dass der untersuchende Robot nach zehn
Tagen zurückkehrt. Das funktioniert in der Praxis aber selten. Die
Spider folgen ihren eigenen Regeln und sind nicht selten überlastet.
www.drweb.de
229
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Gewusst, wie ...
<meta name="revisit-after" content="10 days">
Beliebt ist der folgende Meta-Tag, mit dem Ihre Besucher automatisch nach 10 Sekunden auf die "Seite2" weitergeleitet werden.
Setzen Sie den Wert auf "0", erfolgt die Weiterleitung sofort.
<meta http-equiv="refresh" content="10; URL=seite2.html">
Ihren Namen und Ihr Copyright verewigen Sie so:
Herausgeber:
<meta name="publisher" Content="Merle Baumann">
Urheberrecht:
<meta name="copyright" Content="B. Schmidt">
Teilen Sie den Suchmaschinen mit, in welcher Sprache Ihre
Seiten gelesen werden können. Moderne Suchmaschinen
führen eine Sprachprüfung durch und ignorieren diesen Tag.
<meta name="Content-Language" Content="de">
Fireball als eine der beliebtesten deutschen Suchmaschinen kennt
noch eine Reihe spezieller Meta-Tags. Ihr Einsatz kann sich durchaus lohnen. Mit diesen Tags verleihen Sie Ihren Seiten mehr
Gewicht.
Definieren Sie ein Thema: z.B. Bauen Wohnen, Bildung,
Branche, Produkt, Dienstleistung, Forschung Technik, Gesellschaft, Kultur, Medien:
<meta name="page-topic" Content="thema">
Definieren Sie die Art des Inhalts Ihrer Seite: z.B. Anleitung,
Anzeige, Kleinanzeige, Bericht Reportage, Bild Foto, Buch, EmailArchiv, FAQ, Forschungsbericht, HTML-Formular, Karte Plan,
230
www.drweb.de
Kapitel 6
Gewusst, wie ...
Katalog, Verzeichnis, Link-Liste, Private, Homepage, Produktinfo,
Software, Download, Sound, Statistik:
<meta name="page-type" Content="art">
Definieren Sie, an wen sich die Seite richtet: z.B. an Alle,
Anfänger, Azubis, Erwachsene, Experten, Fans, Fortgeschrittene,
Frauen, Jugendliche, Kinder, Männer, Profis, Schüler, Studenten
<meta name="audience" Content="publikum">
Es gibt weitere Meta Befehle. Die meisten davon dienen der
Archivierung und sind für normale Web-Sites ohne Belang.
Außerdem: Erwarten Sie nicht zu viel, manche Suchmaschinen
scheren sich nicht um all die Mühe, die Sie sich gemacht haben.
Die (wenn auch für uns unbedeutende) Suchmaschine "Open Text"
beispielsweise interessiert sich nur für sichtbaren Text.
www.drweb.de
231
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Taktisch klug eingesetzt
4. Robotern die Fährte legen
Roboter oder Spider nennt sich die Software, die Suchmaschinen
benutzen, um Seiten zu indizieren. Doch bevor etwas untersucht
wird, schauen die Spider in eine extra für sie geschriebene Datei,
die mit robots.txt bezeichnet wird. Enttäuschen Sie die Spider
nicht und bieten Sie ihnen etwas an.
Ein robots.txt ist kein Zugriffschutz. Im Gegenteil, jeder interessierte Websurfer kann diese Datei mit dem Browser aufrufen. Die
Datei verhindert lediglich, dass Informationen in die Indices der
Suchmaschinen gelangen, die dort nichts zu suchen haben. Zum
Beispiel Demo-Pages und Seiten, die nicht verlinkt sind, brauchen
nicht gesperrt zu werden, da ein Spider sie eh nicht finden kann.
Blick in eine fremde robots.txt auf dem Server von BOL.
Die Vorgehensweise können Sie sich so vorstellen: Besucht ein
Robot Ihre Website, geht sein erster Blick zur Datei robots.txt, die
im Stammverzeichnis liegen muss, sowie den darin enthaltenen
Informationen. Es darf nur eine solche Datei pro Domain geben.
Wichtig ist hier die Kleinschreibung, also nur "robots.txt" und niemals "Robots.txt" oder "robots.TXT".
Was steht Drin?
User-Agent bezeichnet den Spider. Das Sternchen * gilt als Jokerzeichen und bedeutet, dass die folgenden Zeilen für alle Spider gel232
www.drweb.de
Kapitel 6
Taktisch klug eingesetzt
ten. Mit "Disallow" werden bestimmte Verzeichnisse (Ordner) für
die Robots gesperrt. Pro Verzeichnis ist eine Zeile notwendig.
Alle Roboter ausschließen
User-agent: *
Disallow: /
Alle Roboter einladen
Eine leere Datei erfüllt den gleichen Zweck
User-agent: *
Disallow:
Alle Roboter von bestimmten Verzeichnissen fernhalten
User-agent: *
Disallow: /unwichtig/
Disallow: /cgi-local/
Einen bestimmten Robot ausschließen
User-agent: Sidewinder
Disallow: /
Einen bestimmten Robot einladen
User-agent: WebCrawler
Disallow:
Mehrere Dateien ausschließen
# Meine Roboter Info
User-agent: *
Disallow: /diesunddas.html
Disallow: /unddiesehier.html
Disallow: /verbotenr.html
Kommentare fügen Sie so ein:
# Mein Kommentar
www.drweb.de
233
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
So knacken Sie das Problem
5. Frames und Suchmaschinen
Kaum etwas sorgt für so viel Verwirrung und Sorgen, wie die
Gestaltung eines perfekten Framesets. Doch damit nicht genug:
Frames vertragen sich nur selten mit Suchmaschinen. Damit wird
von Anfang an Potenzial verschenkt.
Im Gegensatz zu manuell bearbeitete Katalogen nehmen Suchmaschinen Seiten automatisch in ihre Indices auf. Das geschieht
über die Spider, die auf der Suche nach Text-Informationen das
Web durchforschen und jedem Link folgen. Genau an dieser Stelle
begegnet uns das erste Problem. Ein Frameset enthält in der Regel
weder einen brauchbaren Text noch irgendwelche Links. FrameBefehle nach der Art <frame src="seite.htm"> sind keine Links im
eigentlichen Sinne, die nämlich sehen ganz anders aus <a
href="seite.htm>.
Was tut der Spider? Er verleibt sich den Seitentitel ein und macht
sich anschließend über den <noframes> Bereich her, denn der enthält, sofern er überhaupt vorhanden ist, einen Text. Sie ahnen es
schon, dieser Bereich wird in der Regel grob vernachlässig. Die
meisten HTML-Editoren geben recht läppische Botschaften vor:
"Diese Seite verwendet Frames". Ein sinnloser Text, der später
auch über die Suchmaschinen gefunden werden kann. Was allerdings nicht gefunden wird, das ist der Inhalt Ihrer Seiten.
Fundstellen mit wenig aussagekräftigen <Noframes> Bereichen als Suchausgabe
bei Fireball.
234
www.drweb.de
Kapitel 6
So knacken Sie das Problem
So schaffen Sie Abhilfe:
Eine vollständige Garnitur Meta-Tags gehört in die Datei, die das
Frameset enthält. Das gleiche gilt selbstverständlich auch für jede
Einzel-Seite.
Schreiben Sie einen ordentlichen <noframes> Bereich. Beschreiben
Sie dort Ihre Site und platzieren Sie einen Link, der auf ein
Inhaltsverzeichnis führt. Diese Informationen werden auch von
Surfern mit Steinzeit-Browsern gesehen und die Site bleibt trotzdem benutzbar.
Schalten Sie eine Empfangs-Seite (Splash Screen) vor. Diese sollte
neben den Meta-Tags und Links auch eine Beschreibung (als purer
Text) enthalten. Gegebenenfalls lassen sich auf diese Weise auch
mehrere Eingänge für verschiedene Themen gestalten.
Wenn überhaupt gelangen Ihre Frame-Seiten nur einzeln in die
Suchmaschinen. Versehen Sie die Navigationsseiten mit einem
NOINDEX Tag, um sie aus den Indices fernzuhalten. Platzieren
Sie echte Links (auf der Startseite) an das Ende oder den Anfang
der Seite oder verwenden Sie Javascript, um das Frameset bei
Aufruf einer Einzelseite nachzuladen.
www.drweb.de
235
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Nicht immer die fairsten Mittel
6. Suchmachinen austricksen
Spamdexing, also das absichtliche Verunreinigen von Suchmaschinen, ist eine alt bekannte Unsitte. Wer glaubt, einen Vorteil
für sich herausholen zu können, greift gern zu unfairen Mitteln.
Die meisten dieser Tricks werden von den Suchmaschinen erkannt
und führen zu entsprechenden Konsequenzen. Je mieser das
Gewerbe, desto eindringlicher die Bemühungen. Während blauäugige Gesellen es mit "Viagra" in den Keywords versuchen, melden
gewerbliche Services Abertausende von maßgeschneiderten Seiten
überall dort an, wo man sie lässt. Der eine verkauft Methoden
(Geheimreporte) als ultimative Waffe für mehr Hits, der andere
pusht mit Ellenbogenmethoden MLM- oder Rotlichtdienste.
Mehrere Title-Tags
Der Seitentitel wird von vielen Suchmaschinen überproportional
gewichtet, doch die Anzahl der dort unterzubringenden Keywords
ist gering. Inflationärer Umgang mit Titel-Tags führt selten ans
Ziel.
Mehrere Keyword-Tags
Funktioniert nach dem gleichen Prinzip wie oben. Spammer wissen, dass ein Meta-Tag nicht beliebig anschwellen darf, deshalb
versucht man es nach der Devise: "Doppelt hält besser".
Gleiche Seiten unter mehreren URL's
Wer sich das leisten kann, kauft mehrere Domains, was bei
Billigprovidern kein Problem ist. Die Chancen, ein Stückchen vom
Kuchen abzubekommen, steigen. Selbst ein so billiger Trick wie
das Anmelden eines Domainnamens mit und ohne www kann
funktionieren; vorausgesetzt, die Seiten sind ohne vorangestelltes
www erreichbar.
Brückenseiten
Brückenseiten haben sich nahezu inflationär ausgebreitet.
Tausende von variierten Indexseiten überschwemmen die Indices.
Sie erkennen sie an Dateinamen nach dem Muster "index12.html",
"index13.html" usw. Diese Seiten sind im allgemeinen gut mit
Meta-Tags und Seitentiteln ausgerüstet und enthalten auch Text.
236
www.drweb.de
Kapitel 6
Nicht immer die fairsten Mittel
Scriptgesteuerte Anmeldung von
Brückenseiten hier live zu beobachten bei Fireball.
Agent Name Delivery
Ein Script erkennt, ob der Besucher ein Mensch oder ein Robot ist.
Je nachdem werden entsprechende Seiten geliefert. Die ausgegebenen Seiten werden manchmal sogar für bestimmte Spider maßgeschneidert.
Kommentare
Blähen den HTML-Code ohne Nutzen auf, doch Suchmaschinen
fallen inzwischen nicht mehr darauf herein.
Hidden-Text
Text in der Farbe des Bildschirmhintergrundes gilt als
Steinzeitmethode im Web-Design. Besucher sehen ihn nicht,
Spider aber sind farbenblind und können ihn erkennen.
Wie die Markierung mit der Maus zeigt, wurde hier mit versteckten Text "gemogelt".
Immerhin war diese Seite bei einem bekannten Suchbegriff auf Platz 2 der
Altavista Suchausgabe zu finden.
www.drweb.de
237
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Der Kampf um die besten Plätze
Keyword-Stuffing
Die vielleicht häufigste Methode im Rennen um die besten Plätze
ist das Keyword-Stuffing. Dabei werden Suchbegriffe in den MetaTags und Kommentaren, manchmal sogar im Seitentitel, untergebracht. Besonders beliebt sind Worte wie Erotik, Sex, usw. und in
diesem Zusammenhang sagt ein Blick in den Quellcode solcher
Seiten oft mehr über die Seelenlage des Gestalters als die Seite
selbst.
Non Stop-Submission
Auch gelegentliche Neuanmeldung frischt das elektronische
Gedächtnis eines Spiders auf. Hauptberufliche Spammer melden
laufend an. Dazu werden spezielle Scripts geschrieben.
7. Optimierung mit Rankware® 99
Wer im Web mit einem eigenen Angebot bestehen will, braucht
Besucher und zwar so viele wie möglich. Das Problem lässt sich
auf verschiedene Weise lösen: Mit entsprechendem finanziellen
Hintergrund und in geeigneten Medien geschalteten Anzeigen,
durch persönliches Engagement über Linktausch und die aktive
Zusammenarbeit mit anderen Projekten, oder durch Suchmaschinen.
Letztere Lösung ist nicht nur preiswert. Sie kann auch in relativ
kurzer Zeit für eine Belebung der Seiten sorgen. Hinzu kommt,
dass die Websurfer ganz natürlich erwarten, eine Firma in den
Suchmaschinen vorzufinden. Aber das geschieht nicht automatisch, denn bloßes Anmelden ist nicht genug. Die Datenbestände
der Suchmaschinen sind inzwischen derart angewachsen, die Zahl
Ihrer Mitbewerber so groß, dass nur solche Seiten eine Chance
haben, die speziell auf die Erfordernisse und Taktiken der
Suchmaschinen zugeschnitten wurden.
Genau hier setzt Rankware® 99, eine Software zur RanglistenOptimierung, an. Das Programm sorgt dafür, dass Web-Seiten besser in Suchmaschinen positioniert werden, denn nur von den vorderen Plätzen kommen die Besucher. Mit der üblichen Anmelde238
www.drweb.de
Kapitel 6
Prozedur hat das nichts zu tun; diese muss in einem gesonderten
Prozess durchgeführt werden.
Die Ranking Analyse
Bevor es an die Optimierung eigener Web-Seiten geht, kann
Rankware® 99 eine Analyse des "Ist-Zustandes" vornehmen. Das
heißt, für bestimmte Suchworte (Keywords) wird Ihre augenblickliche Position (Ranking) in 13 wichtigen Suchmaschinen bestimmt
und auf Wunsch mit der Position Ihrer Mitbewerber verglichen.
Sie erfahren innerhalb einer Viertelstunde, an welchen Stellen Sie
ansetzen müssen, um Ihr Ranking zu verbessern, denn
Suchmaschine ist nicht gleich Suchmaschine und jede arbeitet
nach einem eigenen Prinzip. Auf diese Weise kommen völlig unterschiedliche Ergebnisse zu Stande.
Die Beispiel-Analyse zeigt ein durchwachsenes Bild: In einigen Suchmaschinen ist
die Position topp, in anderen taucht die untersuchte Web-Site erst gar nicht auf.
Die Platzierungen eines Mitbewerber in der Berichtsansicht
www.drweb.de
239
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Was passiert eigentlich, wenn eine Seite in eine Suchmaschine aufgenommen wird?
Nach der Anmeldung wird die Suchmaschine nicht selbst tätig,
sondern schickt einen Spider vorbei. Das ist ein selbsttätig laufendes Programm, welche die angemeldeten Seiten untersucht und
gegebenenfalls dem Index der Suchmaschine hinzufügt. Dabei
geht der Spider (auch Robot oder Crawler genannt) überblicksweise wie folgt vor:
Die Zeichen "<" und ">" werden gesucht und dabei gefundene
Links (href) zur Weiterverfolgung vorgemerkt. Meta-Tags werden
aufgespürt und interpretiert, Seitentitel und Body-Text sowie die
erste Überschrift (H) herausgezogen und für eine spätere
Volltextsuche bereitgestellt. Das ist bei weitem nicht alles:
Keywords werden nicht einfach nach ihrer Häufigkeit bewertet,
sondern nach Ihrem Vorkommen im Verhältnis zum übrigen Text,
die sogenannte Relevanz. Eine manuelle Optimierung wäre deshalb ein schwieriges Unterfangen. Auch der Dateiname wird von
einigen Suchmaschinen berücksichtigt, von manchen, wie zum
Beispiel Fireball, sogar überproportional gewichtig.
Was macht Rankware mit meinen Web-Seiten?
Die Optimierung wird für jede Seite einzeln vorgenommen und
kann offline durchgeführt werden. Dabei wird die zu analysierende Seite erst einmal in Ihre Bestandsteile zerlegt. Aber keine
Angst, dem Quellcode passiert vorläufig nichts. Rankware® 99
ermittelt die vorhandenen Meta-Befehle (Tags), bestimmt die vorhandenen Keywords, untersucht den Seitentitel und checkt die
HTML-Syntax, weil Fehler im HTML-Code Ihr Ranking negativ
beeinflussen können. Auf Wunsch kümmert sich das Programm
auch um die Beschriftung der Grafiken (ALT), entfernt überflüssige Kommentarzeilen oder Frontpage-Befehle, um die Ladezeit des
Dokuments zu verbessern. Schließlich werden "Doorway-Pages"
(Brückenseiten) und die Steuerdatei für Robots (robots.txt) angelegt.
240
www.drweb.de
Kapitel 6
Seitenanalyse mit Rankware® 99
Wozu dienen Meta-Tags?
Meta-Tags werden im Kopf einer HTML-Seite untergebracht und
sind für den Besucher unsichtbar. Sie beinhalten Informationen,
die nicht auf dem Bildschirm dargestellt, aber von Spidern und
den damit verbundenen Suchmaschinen abgefragt werden.
Rankware analysiert nicht nur die vorhandenen Meta-Tags sondern ist auch in der Lage, diese zu erstellen; Fachkenntnisse sind
dazu nicht notwendig.
Der Meta-Tag-Wizard (Assistent)
Wozu eigentlich "Doorway-Pages"?
"Doorway-Pages", mit Brückenseiten zu übersetzen, sind Nebeneingänge. Je mehr Eingänge eine Web-Site hat, desto mehr
Besucher können, bildlich gesprochen, hereinkommen. Solch ein
Eingang macht auch dann Sinn, wenn die eigentliche Startseite
www.drweb.de
241
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
lediglich Grafiken enthält, ein Umstand, den Suchmaschinen gar
nicht schätzen. "Doorway-Pages" werden auf bestimmte
Suchbegriffe hin optimiert. Rankware ist in der Lage, diese Seiten
automatisch zu erstellen. Vier Seiten, für die wichtigsten
Keywords, sind vorgesehen. Die erzeugten Seiten sind einfach
gestrickt, ein notwendiger Umstand für die Spider der
Suchmaschinen. Man sollte allerdings darauf achten, auch diese
Seiten in den Suchmaschinen anzumelden oder sie unsichtbar zu
verlinken.
Nicht schön, aber wirkungsvoll: Eine automatisch angelegte Brückenseite
Das Nacharbeiten von Hand
Unsichtbare Links werden benötigt, damit die von Rankware® 99
angelegten "Doorway-Pages" selbsttätig ihren Weg in die
Suchmaschinen finden. Das funktioniert deshalb, weil die Spider
jedem Link folgen, dem sie habhaft werden können. Dabei ist nicht
zwingend festgelegt, dass diese Links für den Besucher sichtbar
sein müssen. Platzieren können Sie die Links an jeder beliebigen
Stelle innerhalb des Bodys, zum Beispiel in einer leeren
Tabellenzelle.
So geht's: Unsichtbare Links anlegen
<a href="doorway.htm"></a>
242
www.drweb.de
Kapitel 6
Der FTP-Upload
Nach Abschluss der Optimierung müssen die bearbeiteten Seiten
neu auf den Server übertragen werden. Das lässt sich mit jedem
handelsüblichen FTP-Programm oder HTML-Editor machen, aber
auch Rankware® 99 selbst verfügt über eine entsprechende Funktionalität. Bevor man allerdings diesen letzten Schritt wagt, sollte
alles noch einmal genau kontrolliert werden. Nach erfolgreichen
Heraufladen müssen die Seiten dann neu angemeldet werden. Bei
bereits besuchten Web-Sites ist das zwar nicht unbedingt nötig,
schließlich kommen die Spider von ganz allein vorbei, doch auch
hier empfiehlt sich die erneute Anmeldung, um die Sache zu
beschleunigen.
FTP-Upload mit Rankware® 99
Fazit:
Ranglisten-Optimierung ist ein mühsames Geschäft, denn viele
Suchmaschinen folgen einer eigenen (Un)logik. Gerade bei vielgefragten Suchbegriffen besteht kaum eine Chance auf Platz 1 der
Suchausgabe zu gelangen. Da ist auch mit Tricks und der besten
Software nichts zu machen. Ein Programm wie Rankware® 99 aber
kann Ihnen viel Arbeit abnehmen und Sie vor allem auf die richtige Spur bringen sowie Wege und Möglichkeiten für eine bessere
Platzierung aufzeigen. So lässt sich der Konkurrenz ein
Schnippchen schlagen. Wunder wirken kann das Programm jedoch
nicht. Rankware gibt es nur für Windows 95/98/NT und kostet im
Fachhandel 349,- DM. Eine eingeschränkte Testversion kann beim
Hersteller heruntergeladen werden.
www.drweb.de
243
Kapitel 6
Auf die Wesentlichen kommt es an
8. Seiten bei Suchmaschinen anmelden
Suchmaschinen gibt es an jeder "Ecke" des Webs in übergroßer
Anzahl. So viele werden aber gar nicht gebraucht, denn nur wenige bringen tatsächlich auch Besucher. Deshalb genügt es, sich auf
die 15 Major-Player, also die Marktführer in der Branche, zu
beschränken. "Klasse statt Masse" sollte die Devise sein. Vom Rest
können Sie aller Wahrscheinlichkeit nicht viel erwarten. Da ist es
sinnvoller, ein paar gute Links zu tauschen, um mehr Besucher zu
erhalten. Software-Lösungen melden dagegen oft wahllos an. Im
Ergebnis findet man sich dann auf schmuddeligen "Free for All"
Listen (FFA) und in irrelevanten Business Directories wieder.
Zusätzlich erhält man kurzfristig eine Menge Spam.
Folgende Strategien stehen Ihnen zur Verfügung:
Die manuelle Anmeldung von Hand
So aufwendig ist es nicht, einige Dutzend Maschinen aufzusuchen
und sich manuell anzumelden. Mehr als ein bis zwei Stunden
brauchen dafür nicht veranschlagt zu werden. Man nutzt dabei die
Gelegenheit, Suchmaschinen kennen zu lernen und trägt sich auch
gleich in von Hand gepflegte Kataloge wie Yahoo oder web.de ein.
Die automatische Anmeldung über ein Online-Formular
Webmasterplan
244
www.drweb.de
Kapitel 6
Auf die Wesentlichen kommt es an
Anmeldungen über Online-Formulare sind bequem, aber lückenhaft. Sie wissen dabei nicht genau, ob eine Anmeldung auch
tatsächlich stattgefunden hat. Zudem sind die Anmeldelisten nicht
immer komplett. Wer eine umfassende Anmeldung wünscht, muss
ins Portemonnaie greifen. Dafür gibt es inzwischen zahlreiche
deutschsprachige Dienste. Kostenlos und empfehlenswert sind
Ultra Submit, Jimtools (international) oder der Webmasterplan.
Anmelde-Software
Für alle, die häufiger Web-Sites anmelden müssen, ist eine
Anmelde-Software sehr sinnvoll. Vor allem Webmaster und WebDesigner wissen diesen Komfort zu schätzen. Die Software wir
durch regelmäßige Updates stets auf dem neuesten Stand gehalten. Projekte lassen sich in der Regel auch abspeichern, so dass sie
auch später für weitere Arbeitsgänge noch zur Verfügung stehen.
Bekannte Lösungen sind Free Submitter Pro (Freeware),
Europromote (Europäische Version von SubmitWolf) oder
Promoware.
Arbeitsumgebung von Promoware
Einen Dienstleister engagieren
Einen professionellen Dienstleister zu beauftragen, ist die teuerste
Lösung, denn diese Anmeldung wird nur einmal durchgeführt.
Dafür können Sie aber auch sicher sein, dass alle Anmeldungen
tatsächlich erfolgreich vorgenommen und so durchgeführt worden,
wie es Suchmaschinen verlangen. Empfehlenswerte Anbieter sind
Surfpromote oder Alphasearch.
www.drweb.de
245
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Noch Fragen...?
Wie lange dauert es, bis meine Seiten in einer Suchmaschine erscheinen?
Am schnellsten geht es bei Infoseek, dort können Sie beinahe
sofort das Resultat überprüfen. Fireball braucht etwa 24 Stunden,
Altavista einige Tage, Excite dagegen an die 4 Wochen.
Warum wird meine Homepage bei Geocities oder Compuserve nicht gefunden?
Auch wenn Sie sich noch so oft anmelden und die schönsten MetaTags schreiben können, manche Spider indizieren nur eine
bestimmte Anzahl von Seiten pro Site. Da Geocities eine Unzahl
von Seiten unter einer einzigen Adresse (geocities.com) unterhält,
haben Sie keine Chance. Indiziert wird nur ein Bruchteil aller
Seiten.
Soll ich meine Seiten bei Meta-Suchmaschinen anmelden?
Meta-Suchmaschinen wie "Metaspinner.de", "Hurra.de" oder
"Metacrawler.de" usw. kann man in des Wortes bestem Sinne
getrost "vergessen", da sich dahinter nichts weiter als die schmarotzerhafte Strategie verbirgt, sich des Datenbestandes der großen
Suchmaschinen zu bedienen. Das bedeutet aber nicht, dass diese
Dienste nicht auch ihre Berechtigung hätten. Aus der Sicht des
Webmasters sind sie allerdings nutzlos.
Wie lang dürfen Meta-Tags sein, wie viele Wörter dürfen
Sie enthalten?
Beschränken Sie sich auf etwa 200 Zeichen, mehr wird im allgemeinen nicht akzeptiert. Denken Sie auch daran, dass der HTML
unnötig aufgeschwemmt würde.
Werden .shtml-Seiten von Suchmaschinen aufgenommen?
Suchmaschinen haben damit keine Problem und indizieren alles
246
www.drweb.de
Kapitel 6
Noch Fragen...?
wie gewohnt. Eine zusätzliche Neuanmeldung kann aber nicht
schaden. Schließlich gibt es eine Fülle von frischen Seiten für die
Robots zu entdecken. Das Verfahren hat einen ungewollten Vorteil.
Bestehende, alte Seiten, bleiben für eine ganze Weile dem jeweiligen Index erhalten. Man ist also zumindest eine Zeit lang in einigen Suchmaschinen mit weit mehr Seiten vertreten. Das erhöht
Ihre Chancen auf einen Treffer. Alte Seiten können mit
Weiterleitungen (siehe Meta-Tags) auf die neuen umgeleitet werden.
Welche Suchmaschine empfiehlt die Dr. Web-Redaktion?
Suchmaschinen sind längst nicht mehr das, was sie einmal waren.
Das Suchen an sich ist in den Hintergrund getreten. Aus
Suchmaschinen sind über die Mutation zum Portal lärmende,
überlaufene Marktplätze geworden, die Ihnen mit jedem Klick eine
andere Ware feilbieten wollen. Ein Aufenthalt macht hier so viel
Spaß, wie in einer überfüllten Bahnhofshalle. Wer glaubt denn da
noch, dass die Betreiber an schnellem Finden interessiert sind?
Sogar randaliert wird hier: Im Rennen um die besten Plätze schlagen sich die Web-Site-Betreiber gegenseitig die Nasen blutig, zum
Leidwesen der kleinen und ehrlichen Nutzer, die in dem Wust aus
Spam und Nicht-Relevanz kaum noch Chancen mehr auf einen
Treffer haben. Die Gegenmaßnahmen der Suchmaschinen-Betreiber sorgen für eine weitere Abwertung, wenn zum Schutze der
Suchenden nur noch alte Seiten als Fundstellen ausgegeben wer-
Start-Seite von www.google.de
www.drweb.de
247
Kapitel 6
1
Damit
Soman
werden
Sie im
SieWeb
Web-Profi
findet
Noch Fragen...?
den oder bestimmte Sites einfach für eine Weile ganz aus dem
Index fallen.
Reisende aber haben es eilig und sehen aus Notwendigkeit über
den Schmutz hinweg. Ausnahmen bestätigen auch hier die Regel:
Die Suchmaschinen Google beispielsweise ist eine Oase der Ruhe.
Hier lässt sich ganz ohne störendes Portal- Gehabe und flimmernde Bannerwerbung das Netz durchforschen. Hier ist Suchen, wie
es früher einmal war - und fündig werden Sie auch ...
http://www.google.com
Auch die großen Suchmaschinen bietet "Hintereingänge" an, über
die man ein ruhigeren Bereich betreten kann. Hier lässt sich relativ ungestört suchen.
Fireball
http://www.altavista.de/cgi-bin/query?text
Altavista
http://www.altavista.de/cgi-bin/query?text
248
www.drweb.de
Kapitel 6
10. Links zum Thema
Searchenginewatch bietet umfassende Informationen zum
Thema Suchmaschinen. Außerdem kann ein regelmäßiger
Infobrief kostenlos bezogen werden.
http://www.searchenginewatch.com
Das deutschsprachige Pendant ist die Suchfibel
http://www.suchfibel.de
Ultra Submit
http://webxxx.schlund.de/
Surfpromote
http://www.surfpromote.com/hilfe.htm
Jimtools
http://www.jimtools.com
Alphasearch
http://www.intercomme.de
Eintragsfritz
http://www.webmasterplan.com/de/
Promoware
http://www.promoware.de
FreeSubmitterPro
http://www.free-submitter-pro.com
Europromote
http://www.trellian.com/de/europromote/
Rankware
http://www.rankware.de
www.drweb.de
249
Kapitel 6
Suchmaschinen-Glossar
Wer Suchmaschinen auch als Anbieter von Inhalten nutzen möchte, kommt nicht drumherum sich mit speziellen Vokabeln anzufreunden. Unser Glossar erklärt sie.
Agent Name Delivery
Ein Script erkennt, ob der Besucher ein Mensch oder ein Robot ist.
Je nachdem werden entsprechende Seiten geliefert. Die Ausgaben
werden unter Umständen für bestimmte Spider maßgeschneidert.
Anmeldung
"Masse statt Klasse" sollte hier die Devise sein, denn wer sich auf
die 20 wichtigsten Maschinen beschränkt, kann sich viel Mühe
erlauben. Software-Lösungen dagegen melden oft wahllos an.
Brückenseite
Auch Bridge Page oder Gateway Page genannt. Eine zusätzliche,
vor die eigentliche Seite geschaltete Seite. Dies wird vor allem
dann realisiert, wenn die eigentliche Seite nicht für
Suchmaschinen optimiert werden kann oder soll. Die Brückenseite
übernimmt dann diese Funktion und leitet den Surfer weiter.
Click through
Von einem "Click through" spricht man, wenn ein Besucher einen
Link auf einer Ausgabeseite einer Suchmaschine anklickt. Dies ist
das Ziel aller Bemühungen. Ein hohes Ranking genügt dabei aber
nicht, Seitentitel und Beschreibung müssen so gewählt sein, dass
der Besucher nicht widerstehen kann.
Crawler
Siehe Spider oder Robots
250
www.drweb.de
Kapitel 6
Dateinamen und Verzeichnisse
Ganz speziell die Suchmaschine Fireball hat es auf Dateibezeichnungen und Verzeichnisnamen abgesehen. Wer hier richtig
liegt, wird bei Suchanfragen häufig gefunden.
Dead Link
Ein nicht mehr funktionierender (toter) Link. Er sollte von
Suchmaschinen automatisch aus dem Index getilgt werden. Das
funktioniert in der Praxis jedoch nicht oder nicht mit der gebotenen Schnelligkeit. Dies läßt sich ausnutzen, indem entsprechende
Seiten gleich nach der Anmeldung gelöscht werden. Der Surfer
wird dann über eine Fehlerabfangseite umgeleitet.
Delisting
Das Löschen von Seiten aus einem Suchmaschinen Index.
Entweder, weil die Seite nicht mehr existiert oder aufgrund von
Missbrauch.
Description
Ein sogenannter Meta-Tag. Er bietet dem Autor einer Seite die
Möglichkeit, diese mit eigenen Worten zu beschreiben. Diese
Beschreibung wird dann oft bei der Suchausgabe angezeigt.
Domain
Manche Suchmaschinen indizieren nur Seiten, die auf bestimmten
Domainen liegen. Zum Beispiel nur .de Domainen, um einen
hauptsächlich deutschsprachigen Inhalt zu garantieren.
False Drop
Ein nicht relevantes Suchergebnis. Zum Beispiel wenn das
Suchwort zwar vorhanden ist, aber in einem anderen
Zusammenhang auftritt, die Seite inzwischen komplett ausgetauscht wurde oder ein Betrug mit unfeinen Methoden versucht
wurde.
www.drweb.de
251
Kapitel 6
Frames
Suchmaschinen haben in der Regel Probleme geframte Web-Sites
komplett zu indizieren. Grund: Die Framedatei enthält keine
Hyperlinks.
Grafiken
Auch Grafiken werden indiziert, denn in großen Suchmaschinen
lässt sich auch nach Bildern stöbern, auch wenn das nur über die
Dateibezeichnung funktionieren kann. Zusätzlich sollte jede
Grafik ein sogenanntes Alt Attribut enthalten.
Hidden Text
Text wird in der Farbe des Bildschirmhintergrundes formatiert.
Besucher sehen ihn nicht und Spider sind farbenblind. Auf diesen
Trick aus der Web-Steinzeit fallen die meisten Spider aber nicht
mehr herein.
Index
Die Datenbank einer Suchmaschine. Bei großen Suchmaschinen
verteilt sich diese auf mehrere Server.
Javascript
Javascript und ähnliche Techniken behindern die Spider der
Suchmaschinen. Ist die Navigation mit Javascript aufgebaut, hat
man keine Chance. Die dahinterliegenden Seiten werden nicht
indiziert.
Keyword
Schlüsselwort, das bei der Abfrage einer Suchmaschinen benutzt
wird.
Keyword Density
Auch Relevanz genannt. Hierbei handelt es sich um ein durchaus
252
www.drweb.de
Kapitel 6
komplizierte Beziehungsgeflecht von Position und Anzahl der
Keywords innerhalb einer HTML-Seite. Sie wird zum Beispiel von
Altavista zur Bewertung der Fundstellen verwendet.
Keyword Stuffing
Die vielleicht häufigste Methode im Rennen um die besten Plätze.
Suchbegriffe werden in den Meta Tags und Kommentaren, manchmal sogar im Seitentitel untergebracht. Besonders beliebt: Viagra,
Sex, etc.
Kommentar
Werden, entgegen häufig anderslautenden Meldungen, von den
meisten Suchmaschinen nicht berücksichtigt.
Meta-Suchmaschine
Eine Meta-Suchmaschinen verfügt über keinen eigenen Index von
erfassten Web-Seiten sondern durchsucht die Datenbestände
anderer Suchmaschinen. Das können bis zu einem Dutzend gleichzeitig sein.
Meta-Tag
Im Quellcode versteckte Informationen für die Suchmaschinen.
Hier lassen sich zum Beispiel Schlüsselwörter (Keywords) oder ein
beschreibender Text angeben, dieser wird dann oft für die
Suchausgabe verwendet.
Meta-Tag Generator
Eine Software, die nach Benutzereingabe alle relevanten MetaTags erzeugt.
Non Stop Submission
Gelegentliche Neuanmeldung frischt auch das elektronische
Gedächtnis eines Spiders auf. Hauptberufliche Spammer melden
laufend an.
www.drweb.de
253
Kapitel 6
Optimierung
Darunter versteht man das "Fitmachen" von HTML Seiten für
bestimmten Suchmaschinen oder eine allgemeine Verbesserung
aus Sicht der selben. Dazu gehört der Einbau von sichtbarem Text,
Meta-Befehle und eine Keyword-Analyse.
Page Popularity
Ein etwas schwammiges Maß für die Beliebtheit einer Seite. Je
häufiger ein Link nach einer Suchausgabe angeklickt wird, desto
populärer ist er. Suchmaschinen könnten diesen Wert zur
Beeinflussung des Rankings nutzen. Dieses Verfahren ist auch
unter dem Namen "Direct Hit" bekannt.
Positioning
siehe Ranking
Ranking
Darunter versteht man die Platzierung innerhalb der
Suchmaschinenausgabe. Das Ranking sollte für wichtige
Keywords möglichst hoch sein, da nur so Websurfer den Weg auf
Ihre Seiten finden.
Rechtschreibfehler
Jeder macht Fehler, auch bei der Abfrage einer Suchmaschine
kommen sie vor, zum Beispiel "Suchmaschiene". Gewiefte
Webmaster verstecken solche Begriffe in den Meta-Keywords.
Robot
Er wird auch Spider oder Crawler genannt. Dabei handelt es sich
um ein auf einem Server laufendes Script, das in eigener Regie das
Web durchforscht. Gefundene Seiten werden dann analysiert, dem
Index hinzugefügt und Hyperlinks für die Verfolgung vorgemerkt.
254
www.drweb.de
Kapitel 6
robots.txt
Eine simple ASCII Datei im Root (=Stammverzeichnis) des
Servers. Mit ihrer Hilfe werden bestimmte Spider von bestimmten
Verzeichnissen oder Seiten ausgeschlossen.
Seitentitel
Der Titel ist aus Sicht einer Suchmaschine einer der wichtigsten
Bestandteile einer Web-Seite. Seiner Beschreibung sollte besondere Aufmerksamkeit gewidmet werden. Er ist nicht zu verwechseln
mit dem Dateinamen.
Spamdexing
Missbräuchliche Verwendung von Suchmaschinen. Es werden
unzählige Seiten angelegt und nacheinander angemeldet. Diese
Seiten sind in den Details niemals gleich, bieten keinen sinnvollen
Inhalt und leiten den Besucher per Link oder Meta-Refresh auf die
eigentlichen Seiten des Anbieters weiter.
Splash Page
Vorschaltseite. Sie wird im Gegensatz zur Brückenseite meist aus
gestalterischen Gründen eingesetzt. Da solche Seiten oft nicht viel
mehr als eine Grafik enthalten, sind sie für Suchmaschinen relativ wertlos.
Submission Service
Ein Online-Dienst, der Seiten automatisch anmeldet. Dies
geschieht über Scripte und ist in rudimentärer Form meist kostenlos. Wer mehr will, muss zur Kreditkarte greifen.
Verzeichnis
Keine Suchmaschine im eigentlichen Sinne, sondern ein von
Menschen zusammengestellter Katalog von Links und Beschreibungen. Bekannte Beispiele sind Yahoo und web.de
www.drweb.de
255
Kapitel 6
Damit man Sie im Netz findet
Für Ihre Notizen
256
www.drweb.de
Damit man Sie im Netz findet
Kapitel 6
Für Ihre Notizen
www.drweb.de
257
www.drweb.de
Für Ihre Notizen
258
www.drweb.de

Editorial

Transcription

Similar documents

Diplomarbeit Konzeption und Realisierung einer - sebis

Erstausgabe vom 19.9.2007

Institut für Rundfunkökonomie

Musery Endbericht - Eldorado

PDF-Datei - Der millin Verlag

Mit Tabellen arbeiten

Preliminary Program PDF version