Deutschland € 7,60 | Schweiz sfr 15,20 | Österreich € 8,60 | Benelux € 8,60 | AOL-Stichwort pcwelt www.pcwelt.de SONDERHEFT Januar/Februar/März 2004 02/2004 NEU! 1 Homepage-Toolbox Ihre Grundausstattung fürs Web 2 Kostenlose Utilities Linkchecker, FTP-Tools & mehr 3 Profi-Programme Zum Testen: Dreamweaver & Flash UTILITIES AUF CD 55 Schritt für Schritt erklärt – Beispielvorlagen auf CD Wie Sie Ihre Seite kostenlos online stellen Die perfekte Homepage Homepage Tipps Professionelle Gästebücher, Seite 88 Zähler, Effekte & Animationen Utilities Die besten HTML-Editoren, Seite 102 FTP-Tools & Grafik-Software Grundkurs Die erste Homepage in fünf Seite 58 Schritten alle Beispielseiten auf CD So geht’s HTML, CGIs, Javascript, Flash, Seite 34 FTP – alles ausführlich erklärt Die CD enthält keine jugendbeeinträchtigenden Inhalte
Transcript
Deutschland € 7,60 | Schweiz sfr 15,20 | Österreich € 8,60 | Benelux € 8,60 | AOL-Stichwort pcwelt www.pcwelt.de
SONDERHEFTJanuar/Februar/März 2004
02/2004
NEU!
1 Homepage-ToolboxIhre Grundausstattung fürs Web
2 Kostenlose UtilitiesLinkchecker, FTP-Tools & mehr
3 Profi-ProgrammeZum Testen: Dreamweaver & Flash
UTILITIESAUF CD55
Schritt für Schritt erklärt – Beispielvorlagen auf CDWie Sie Ihre Seite kostenlos online stellen
Die perfekteHomepage
Hom
epag
e
Tipps Professionelle Gästebücher, Seite 88 Zähler, Effekte & Animationen
Utilities Die besten HTML-Editoren,Seite 102 FTP-Tools & Grafik-Software
Grundkurs Die erste Homepage in fünfSeite 58 Schritten alle Beispielseiten auf CD
So geht’s HTML, CGIs, Javascript, Flash,Seite 34 FTP – alles ausführlich erklärt
Die
CDen
thäl
tkei
ne ju
gend
beei
nträ
chtig
ende
n In
halte
Die besten Tools fürHomepage-Bastler
Die Heft-CD enthält fast 60 Profi-Programme,
die Ihnen helfen, Ihren Web-Auftritt zu ver-
wirklichen. Das Beste dran: Viele davon sind
gratis. Auf der CD finden Sie auch voll funkti-
onsfähige Testversionen von Adobe Golive 6
und – ganz neu – Macromedia Dreamweaver
MX 2004 und Flash MX 2004. Die Programme,
die sich auf der CD befinden, sind im Heft mit
dem Logo C Heft-CD gekennzeichnet.
Alles, was Sie brauchenAuf die CD haben wir nicht nur jede Menge
Tools gepackt, sondern auch Beispieldateien
und Testbilder zu unseren Artikeln. In den Ar-
tikeln finden Sie jeweils Verweise darauf.
Auf unserer Heft-CD finden Sie in der Regel
die Programmversion, auf die wir im Heft
Bezug nehmen, auch wenn inzwischen eine
andere verfügbar ist. Stand der Angaben in
dieser Ausgabe ist November 2003.
Keine Angst vor Viren: Bevor die PC-WELT-CDs
die Redaktion verlassen, prüfen wir sie
gründlich mit mehreren Antiviren-Program-
men. Wenn Sie sich selbst davon überzeugen
wollen: Die Logdatei eines der Virenscanner
finden Sie im Hauptverzeichnis der Heft-CD
unter der Bezeichnung NOVIRUS.TXT.
Die eigene Homepage
Editorial
PC-WELT SONDERHEFT 2/2004 5
Wer seine erste Webseite baut, hat viele Fragen. Wirliefern die Antworten. Außerdem gibt’s jede Menge Tipps & Tricks zu HTML, Javascript, Flash-Animationen ...
Grundlagen: Eine gut gemachte Website sollte ansprechend und bedienerfreund-lich gestaltet werden. Was das konkret heißt, erklären wir ab Seite 26. Nebendem Design zählen selbstverständlich die Inhalte. Wie Sie die so zusammenstel-len, dass Ihre Besucher gerne wiederkommen, lesen Sie ab Seite 98. Sie erfahren,wie Sie an Webspace-Provider kommen (ab Seite 10) und wie Sie sich IhrenWunsch-Domain-Namen sichern (ab Seite 16).
Workshops: Wir erklären in einem fünfteiligen Grundkurs ab Seite 58 Schritt fürSchritt, wie Sie eine einfache Website mit Startseite, Unterseiten, Navigations-leiste, Fotogalerie, Link-Liste und Gästebuch erstellen. Wenn Sie höhere Ansprü-che haben – kein Problem: Ab Seite 76 beschreiben wir, wie Sie mit Javascriptzum Beispiel ein Spiel einbauen. Mit dem Beitrag ab Seite 88 erstellen Sie insechs Schritten Ihr erstes Flash-Movie. Kleinere Animationen können Sie aberauch ohne Flash zaubern. Wie’s geht, erfahren Sie ab Seite 92. Zum Nachbauenfinden Sie die Workshop-Materialien auf der Heft-CD.
Utilities: Wir stellen Ihnen alle Programme vor, die Sie brauchen, um eine Websitezu erstellen, zu veröffentlichen und zu pflegen: von professionellen Web-Edito-ren (ab Seite 102) und Gratis-Alternativen dazu (ab Seite 110) bis hin zuLinkcheckern (ab Seite 114), Grafik-Tools (ab Seite 116) und Programmen zumHochladen der Dateien auf den Webserver (ab Seite 126). Wenn Sie wissen wollen,welche Homepage-Tools Web-Designer noch nutzen, schlagen Sie Seite 120 auf.
Roland BischoffStellv. Chefredakteur
PGrundlagen PWorkshops PUtilities
005 Editorial 05.12.2003 13:38 Uhr Seite 3
p AktuellPp Heft-CD/DVDPp ThemenPp TestcenterPpPraxis
PC-WELT SONDERHEFT 2/2004
Platz im InternetMit unseren Tipps finden Sie den richtigen Provider für Ihren Online-Auftritt.
Wir sagen Ihnen, worauf Sie achten sollten, und stellen Ihnen die interessan-
testen Angebote vor – auch kostenlose.
Seite 10
Die erste HomepageIn einem fünfteiligen Grundkurs zeigen wir Schritt für Schritt, wie Sie eine ein-
fache Website erstellen. Die Beispielseiten haben wir auf die Heft-CD gepackt,
Sie können mit dem Nachbauen sofort beginnen.
Seite 58
WORKSHOPS
Grundkurs I: Die erste Homepage 58Die Basis für Ihren ersten Online-Auftritt
Grundkurs II: Layouten mit Zellen 64So platzieren Sie die Elemente auf den Seiten
Grundkurs III: Fotos ins Web stellen 68So bringen Sie Bilder auf Ihre Website
Grundkurs IV: Link-Liste anfertigen 72So verweisen Sie auf andere Seiten im Netz
Grundkurs V: Gästebuch erstellen 74Im Gästebuch können Besucher ihre Meinung sagen
Javascript: So geht’s 76So nutzen Sie Javascript für Effekte
GRUNDLAGEN
Platz im Internet 10So finden Sie den richtigen Provider
Die eigene Domain 16Der richtige Name für Ihre Web-Präsenz
Gutes Web-Design 26So gestalten Sie Ihre Website optimal
Website-Marketing 30So machen Sie Ihre Website bekannt
Wichtige HTML-Tags 34Elementare Grundkenntnisse in HTML
Fehlerfahndung 38So finden und beseitigen Sie Fehler auf Ihrer Site
Homepage-Lexikon 40Die wichtigsten Begriffe kurz und knapp erklärt
Homepage interaktiv 44Gästebuch und Forum mit Webserver-Scripts
Weblogs: So geht’s 48Online-Tagebücher mit kommentierten Links
Geld für Ihre Website 52Wie Sie mit Ihrem Online-Auftritt Geld verdienen
Inhalt PC-WELT Sonderheft 2/2004
6
006-7 Inhalt 08.12.2003 13:30 Uhr Seite 8
PC-WELT SONDERHEFT 2/2004
UTILITIES
Test: Web-Editoren 1023 professionelle Web-Editoren im Test
HTML-Editoren light 11012 günstige oder kostenlose Web-Editoren
Tote Links finden 114So überprüfen Sie Ihre Website mit Linkcheckern
12 Top-Grafik-Tools 116Utilities für professionelle Grafikelemente
18 Homepage-Tools 120Spezial-Tools für Ihre Website
Die besten FTP-Tools 126Die besten Programme für den Datentransfer
Web-Seiten mit Style 80Stilvorlagen mit Cascading Stylesheets
Bilder optimieren 84So bereiten Sie Bilder für den Einsatz im Web vor
Flash in 6 Schritten 88Peppen Sie Ihre Site mit Flash-Animationen auf
Lebendige Homepage 92Diashows und Animationen mit Animation Shop
Daten hochladen 96Datentransfer auf den FTP-Server mit Filezilla
Besuchermagnet 98So machen Sie Ihren Web-Auftritt attraktiv
Flash in 6 SchrittenPeppen Sie Ihre Website mit Flash-Animationen auf – mit unserem Schnellkurs
für Einsteiger zaubern Sie schon nach kurzer Zeit ansprechende Filme für Ihren
Online-Auftritt auf den Bildschirm.
Seite 88
Test: Web-EditorenJe professioneller die Homepage, desto höher die Anforderungen an den Web-
Editor. Wir haben Dreamweaver MX, Frontpage 2002 und Golive 6 getestet und
auch schon die Nachfolger unter die Lupe genommen.
Seite 102
7
Rubriken
Editorial 5
Das ist auf der Heft-CD 9
Leserumfrage 55
Impressum 128
Inserentenverzeichnis 128
Inhalt PC-WELT Sonderheft 2/2004
006-7 Inhalt 08.12.2003 13:32 Uhr Seite 9
Die Heft-CD enthält annähernd 60 Pro-fi-Programme rund ums Thema „Die eige-ne Homepage“. Diese Utilities helfen Ih-nen, den privaten Web-Auftritt zu verwirk-lichen oder eine Firmen-Site online zu stel-len. Das Beste daran: Viele der vorgestell-ten Programme sind gratis. Außerdem fin-den Sie auf der CD voll funktionsfähigeTestversionen von Adobe Golive 6 und demgerade erst vorgestellten Dreamweaver MX2004 sowie Flash MX 2004 aus dem HauseMacromedia.
Als Ergänzung zu den Workshops imHeft finden Sie auf der CD die verwendetenBeispieldateien. Damit können Sie die vonunseren Experten gezeigten Tipps undTricks Schritt für Schritt nachvollziehenund das Gelernte anschließend für IhreProjekte nutzen.
Die Bedienerführung derPC-WELT-CD: So geht’s losWenn Sie die CD einlegen, erscheint einHinweisfenster. Falls nicht, starten Sie dieDatei PCWSTART.EXE im Hauptverzeichnisder CD. Im Starter wählen Sie, ob Sie dieCD mit dem mitgelieferten PC-WELT-Brow-ser oder mit Ihrem Standard-Browser be-trachten möchten. Der PC-WELT-Browser istdie komfortabelste Methode – die Softwarelässt sich damit beispielsweise bequem vonder CD installieren.
Damit der PC-WELT-Browser läuft, mussder Internet-Explorer ab Version 5.5 instal-liert sein. Wenn Sie alternativ Ihren Stan-dard-Browser einsetzen möchten, muss die-ser Javascript beherrschen. Die rund 60 Programme, die die PC-WELT-Au-toren in ihren Artikeln beschreiben undauf CD mitliefern, finden Sie unter „Soft-ware zum Heft“.
Die Software lässt sich nach drei Kriteri-en sortieren: nach Artikeln im Heft, alpha-betisch und nach Kategorien. Haben Sie dasgewünschte Programm angeklickt, sehen
Alle Tools für Ihre Homepage: Auf der CD zu diesem Sonderheft finden Sie alles, was Sie fürs Erstellen Ihrer eige-
nen Online-Präsenz brauchen – Web-Editoren, Grafik-Utilities, FTP-Programme und vieles mehr
Auf CD: Top-Tools für Ihre WebsiteEgal, ob Sie eine private Website gestalten, einen Internet-Auftrittfür Ihre Firma planen oder eine bestehende Site optimieren möchten: Auf der Heft-CD finden Sie die Software, die Sie dafür brauchen.
Sie rechts unten zwei Schaltflächen. WollenSie die Software ohne ein Setup auf die Plat-te bannen, klicken Sie auf „Kopieren“. Diezweite Schaltfläche heißt „Installieren“oder „Entpacken“ und bei sonstigen Datei-en „Öffnen“. Wenn Sie auf „Installieren“klicken, startet eine Setup-Routine. Bestehteine Software aus mehreren Dateien, fin-den Sie die Schaltfläche „Entpacken“ vor.Dann werden die Daten in das Verzeichnis„C:\PCWELT\HOMEPAGE2004“ entpackt.
Wenn Sie Ihren Standard-Browser ver-wenden, erscheint beim Klick auf „Kopie-ren“, „Installieren“ und „Entpacken“ dieDialogbox, die beim Download von Dateienaus dem Internet erscheint. Beim Klick auf„Öffnen“ wird sofort die Anwendung ge-startet, die mit dem Dateityp verknüpft ist.In vielen Artikeln finden Sie den Hinweis
C Heft-CD. Bitte haben Sie Verständnisdafür, dass wir keine Garantie dafür über-nehmen können, dass die CD-Inhalte auch
auf allen Systemen einwandfrei laufen.Wenn Sie Fehler finden, sind wir für Hin-weise dankbar. Probleme mit fremder Soft-ware können wir aber nicht lösen. RichtenSie Fragen zu den Programmen bitte direktan die Software-Anbieter. Schauen Sie bitteauch unter www.pcwelt.de/heft/korrektur.htmlnach. Dort veröffentlichen wir ständig Er-gänzungen und Korrekturen zu Heftarti-keln und zu der CD.Kritik und Anregungen schreiben Sie bitte indas Forum „Ihre Meinung zur aktuellen PC-WELT“ auf www.pcwelt.de/forum unter „PC-WELT: Aktuelles Heft“.Probleme mit der Heft-CD? Falls Sie einen De-fekt vermuten, wenden Sie sich für Ersatzbitte direkt an: A.B.O. Verlagsservice unterTel. 089/20959333, Fax 20028111 oder auchper Mail: [email protected]. Manche schnellen CD-Laufwerke lesen nicht alle CDs auf Anhieb.Meist funktioniert es aber nach einigen Anläufen.
Von Anja Laubstein
PC-WELT SONDERHEFT 2/2004 9
Die InhaltePGrundlagen PWorkshops PUtilities Heft-CD
Mit unseren Tipps finden Sie den richtigen Provider für IhrenWeb-Auftritt. Wir sagen Ihnen, worauf Sie bei der Auswahl achten sollten, und stellen die interessantesten Angebote vor.
Von Dirk Wischmann
Platz im Internet
GRUN
DLAG
EN
Wenn Sie eine Website ins Internet stel-len möchten, müssen Sie sich neben denInhalten und der Gestaltung auch mit derFrage befassen, welches der richtige Web-space-Provider ist, dessen Angebot Ihren Be-dürfnissen am besten entspricht. Rund1000 Webhoster stehen hierzulande zurWahl, wobei der Provider-Markt ständig inBewegung ist: Neue Anbieter kommen hin-zu, und alte streichen die Segel.
Erschwert wird die Entscheidung nochdadurch, dass die Provider in schöner Re-gelmäßigkeit mit immer neuen Angebotenund Tarifen aufwarten, mit denen sie Neu-kunden gewinnen oder sich gegenseitigKunden abjagen möchten. Auf den folgen-den Seiten geben wir Ihnen Entschei-dungskriterien an die Hand und informie-
ren Sie über die interessantesten Angebote.Ausführliche Infos zum Thema „Domain-Namen sichern – Kosten, Rechte, Pflichten“finden Sie 2 ab Seite 16.
1. Vor der Provider-Wahl:Grundsätzliche Überlegungen
Vor der Auswahl des Providers sollten Sieschon eine recht genaue Vorstellung vomeigenen Web-Auftritt haben. Wie viel Platzbraucht die Site? Wollen Sie große Dateienzum Download anbieten? Welche zusätzli-chen Funktionen brauchen Sie? Mit wel-chen Besucherzahlen rechnen Sie?
Wer sich über diese Dinge von vor-neherein einigermaßen im Klaren ist, läuftnicht Gefahr, ein überdimensioniertes, teu-res Angebot mit vielen ungenutzten Funk-
10 WEBSPACEIhr Platz im Internet
16 EIGENE DOMAINEin Name für Ihre Präsenz
26 WEB-DESIGN Eine gute Site bauen
30 SUCHMASCHINENIhre Site bekannt machen
34 HTML-TAGSDas sind die wichtigsten
40 GLOSSARDie wichtigsten Begriffe
44 INTERAKTIVE SITEWebserver-Scripts
und viele weitere Themen
GRUNDLAGEN
010-15 201 02.12.2003 12:55 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 11
WebspacepGrundlagen PWorkshops PUtilities GrundlagenPPPpPP S. xxx – S. xxx
tionen zu wählen. Ohnehin bieten alle se-riösen Webspace-Anbieter die Möglichkeit,während der Vertragslaufzeit das gewähltePaket upzugraden und damit an neue Be-dürfnissen anzupassen. Im Zweifel hilftauch ein Blick in die Allgemeinen Ge-schäftsbedingungen (AGB) der Anbieter.
Keine Zwangswerbung zulassenSicherlich legen Sie keinen Wert darauf,dass Ihr Web-Auftritt von störenden Wer-beeinblendungen in Form von Bannernoder festgelegten Frames verunstaltet wird.Da dies insbesondere bei kostenlosen An-
bietern öfter vorkommt, sollten Sie bei derProvider-Wahl darauf achten, wie es der An-bieter mit der Werbung hält.
Ebenso wichtig: Ihr Provider sollte Ih-nen die Möglichkeit bieten, eine eigene Se-cond-Level-Domain wie <meinname>.deeinzurichten (2 Punkt 2). Achten Sie auchdarauf, dass der Provider ein Heraufladen(Upload) Ihrer Dateien auf den Webserverper FTP erlaubt. Viele Provider bieten nurein HTTP Web-Frontend. Da sich damit ma-ximal zehn Dateien gleichzeitig hochladenlassen, artet der Upload vieler Dateien zumGeduldsspiel aus (2 ab Seite 96).
Um Ihre Website online zu stellen, gibt eseine Reihe von Möglichkeiten – vom kos-tenlosen Webspace bis hin zum gemiete-ten Server, auf dem Sie beliebige Softwareinstallieren (2 Punkt 6, „Profi-Alternative:Einen eigenen Server mieten“). Aber auchdie meisten Internet Service Provider (ISP)bieten ihren Kunden neben einem Inter-net-Zugang die Möglichkeit, eine eigeneWebsite online zu stellen (2 Kasten „Web-space bei Internet-Zugangsanbietern“).
Was bei Ihrem Internet-Provider in die-sem Punkt möglich ist, steht in Ihren Ver-tragsbedingungen. In unserer 2 Tabelle„Im Überblick: Ausgewählte Webspace-Provider“ haben wir für Sie kostenlose undkostenpflichtige Anbieter aufgelistet.
2. Die Art derDomain wählen
Gratis-Webspace-Hoster sind im Internetzahlreich vertreten, die Anmeldung lässtsich in der Regel schnell und unkompli-ziert erledigen. Nachdem die Bestätigungs-Mail des Providers eingetroffen ist, stehtder Webspace schon nach kurzer Zeit zurVerfügung. Wir empfehlen Ihnen, einen
Inhalt Seite
1. Vor der Provider-Wahl: Grundsätzliche Überlegungen 10
2. Die Art der Domain wählen 113. Keine Beschränkungen hinnehmen 124. Diese Merkmale sollte ein
Webserver unterstützen 135. So vermeiden Sie die
Traffic-Kostenfalle 136. Profi-Alternative: Einen eigenen
Server mieten 15
KästenProvider-Suche im Internet: Webhostlist.de 11Webspace bei Internet-Zugangsanbietern 12HTML-Software 13Im Überblick: Ausgewählte Webspace-Provider 14
Provider-Suche im Internet: Webhostlist.deUnter www.webhostlist.de können Sie aus über 700 Einträgennach dem für Sie geeigneten Provider suchen. In der erweiter-ten Suche legen Sie den Standort und das Betriebssystem desServers fest und bestimmen den benötigten Speicherplatz so-wie das zu erwartende Transfervolumen. Für professionelleWebsites lassen sich auch interaktive Funktionen wie Scriptsund Programmiersprachen als Kriterien definieren sowie dieMöglichkeit, mehrere Datenbanken zu integrieren. Als Such-ergebnis erhalten Sie eine Liste mit Webspace-Anbietern, dieAngebote für Ihre individuellen Bedürfnisse im Sortiment ha-ben. Für einen schnellen Überblick über wichtige Provider le-sen Sie unsere 2 Tabelle ab Seite 14.
deutschsprachigen Dienst zu wählen: Dadie verwendeten Server meist in Europa ste-hen, ist überwiegend für eine gute Ge-schwindigkeit gesorgt. Außerdem gestaltensich Supportfragen deutlich einfacher.
Nicht ganz so einfach ist es, wenn Sie eine Second-Level-Domain wie <meinname>.de benötigen. Für eine private Ho-mepage ist eine Sub-Level-Domain à la<meinname>.<Provider>.de noch akzepta-bel, geht es jedoch zum Beispiel um die Fir-menpräsenz oder wollen Sie einen Web-Shop betreiben, muss eine Second-Level-Domain wie <meinname>.de her.
Diesen Service bietet jedoch kein Gratis-Hoster. In diesem Fall hilft nur der Umwegüber so genannte Weiterleitungsdienstewie Alpen NIC (www.alpennic.de) oder Dot TK(www.nic.tk). Diese Dienste verwalten nur Ih-re Web-Adressen und leiten den Datenver-kehr gratis etwa von <meinname>.de.tt be-ziehungsweise <meinname>.tk auf IhreWebsite bei einem Gratis-Hoster um.
Ist Ihnen Ihr Web-Auftritt einige Eurowert, können Sie für Ihre private Site ausAngeboten kostenpflichtiger Webhosterwählen (2 Tabelle „Im Überblick: Ausge-wählte Webspace-Provider“). In der Regelbekommen Sie bei kostenpflichtigen Ange-boten von Haus aus schon Ihren Wunsch-Domain-Namen mit einer Top-Level-Do-main-Endung wie .de, .com, .net oder .org.Allerdings wird es zunehmend schwieri-ger, eine freie Adresse zu finden. Bevor Sie
also versuchen, eine eigeneDomain zu registrieren, soll-ten Sie prüfen, ob diese nochfrei ist. Den Check für .de-Do-mains erledigen Sie zum Bei-spiel in der Registrierungs-datenbank der Domainver-waltungsgesellschaft für dieTop-Level-Domain .de Denicunter www.denic.de (Detailsdazu ab 2 Seite 16).
Viele kommerzielle Hos-ter bieten die Option, Sub-domains, etwa für jedes Fa-milienmitglied, einzurich-ten, nach dem Muster <zu-satz>.<meinname>.de. Siesollten bei Abschluss der Ver-trages auch darauf achten,dass Ihr Provider bei der Be-antragung einer neuen Do-main bei der Denic Sie alsBesitzer, also als admin-c,der Adresse eintragen lässt.
Nur so ist sichergestellt, dass ein Umzugder Web-Präsenz zu einem anderen Dienst-leister ohne große Probleme funktioniert.
3. Keine Beschränkungen hinnehmen
Immer wieder kommt es vor, dass zwie-lichtige Gestalten Gratis-Webspace als La-gerstätte von illegalen Inhalten nutzen. Ausdiesem Grund haben viele Anbieter Be-
schränkungen in puncto Upload-Geschwin-digkeit eingeführt und sogar die erlaubteDateigröße begrenzt, um so etwa die Lage-rung von Filmen zu unterbinden.
Doch damit nicht genug: Einige Anbie-ter verbieten sogar gänzlich den Uploadvon Multimedia-Daten – MP3- oder JPG-Dateien etwa werden automatisch vonihren Servern gelöscht. Dieses Vorgehen istzwar verständlich, aber für Kunden, die Ur-laubsbilder oder eigene Musikstücke veröf-fentlichen wollen, ärgerlich und somit einK.o.-Kriterium bei der Auswahl.
Bei kostenpflichtigen Webspace-Anbie-tern gibt es in der Regel keine Einschrän-kungen bei Upload-Tempo und Dateitypen.Doch sollten Sie auch hier durch einenBlick in die AGB und die Antworten der am häufigsten gestellten Fragen (FAQs) si-chergehen, dass dem tatsächlich so ist.
Geschwindigkeit testenDie meisten Web-Präsenzen liegen auf sogenannten Shared-Hosting-Umgebungen.Dabei teilen sich Kunden einen Server-Rechner, weshalb die einzelnen Paketerecht preiswert sind. Jeder Kunde erhält einKontingent an Festplattenplatz, auf das erper FTP zugreifen kann, sowie einen Mail-zugang und administriert in der Regelüber ein Web-Frontend des Hosters.
Da die Anbieter natürlich versuchen,die einzelnen Server auszulasten und aufeiner Maschine manchmal bis zu mehrere
Webspace bei Internet-Zugangsanbietern
Webspace bekommen Sie in der Regel auch von Ihrem Inter-net Service Provider (ISP) kostenlos oder sehr preiswert. T-Online: Für 2,95 Euro im Monat bietet T-Online seinen Kun-den 10 Gigabyte (GB) Speicherplatz und ein Transfervolumenvon 2 GB pro Monat. Die Sub-Level-Domain, die Sie erhalten,hat das Muster „<meinName>.privat.t-online.de“ (ohne An-führungszeichen), gegen einen Aufpreis von 0,95 Euro imMonat bietet T-Online auch eine Domain à la „<meinName>.de“ (ohne Anführungszeichen).AOL: Hier haben Mitglieder unter http://hometown.aol.de dieMöglichkeit, eine einfache Homepage zu erstellen. Der Spei-cherplatz beträgt pro AOL-Name 20 MB, der Traffic ist unbe-grenzt. Allerdings bekommen Sie weder eine Second- noch eine Sub-Level-Domain. Der einfa-che Online-Designer genügt allenfalls einfachen privaten Anforderungen.Arcor: 50 MB stellt Arcor seinen Kunden für die Homepage zur Verfügung, wobei die Web-Adresse das Muster „www.home.arcor.de/<Benutzername>“ (ohne Anführungszeichen) hat. Fir-menkunden können auch eine .de-Domain registrieren.Auch andere bundesweit tätige und zahlreiche lokale Internet-Provider machen entsprechendeAngebote. Nähere Infos finden Sie in den AGBs des jeweiligen Anbieters.
Qual der Wahl: Webspace-Provider wie 1&1 oder Strato bieten für jeden
Geldbeutel eine breite Palette an Webspace-Angeboten (Punkt 2)
AOL: Der Online-Designer genügt
nur einfachen Anforderungen
010-15 201 02.12.2003 12:55 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 13
WebspacepGrundlagen PWorkshops PUtilities GrundlagenPPPpPP S. 10 – S. 15
Hundert Web-Präsenzen hosten, kann esunter Umständen zu Geschwindigkeitsein-bußen bei den Seitenaufrufen kommen.
Tipp: Da Sie selbst die Leistung eines Hosters im Vorfeld kaum überprüfen kön-nen, sollten Sie mal www.hostwatch.de be-suchen. Dort veröffentlicht die Interessen-gemeinschaft für Internet-Anwender Test-messungen, die sie laufend bei vielen deutschen Webspace-Providern durchführt.
4. Diese Merkmale sollte ein Webserver unterstützen
Ein paar bunte Web-Seiten liefert jederWebserver aus. Möchten Sie auf Ihrer Web-site aber etwa ein Gästebuch, Antwortfor-mulare, Besucherzähler und effektiveSuchfunktionen integrieren oder gar einenWebshop mit sicherer SSL-Verschlüsselungbetreiben, muss der Webserver eine Script-sprache unterstützen (2 ab Seite 44).
Perl und PHP sind die zurzeit populärs-ten Sprachen für die Implementierung solcher interaktiver CGI-Anwendungen
(2 Seite 40). Zwar bieten einige Provider sogenannte „Basis-CGIs“ oder eine „CGI-Sammlung“. Das heißt jedoch nicht, dassder Kunde eigene Scripts benutzen, son-dern lediglich, dass er auf die vom Anbieterbereitgestellten zurückgreifen kann.
Tendieren Sie zu einem Gratis-Anbieter,informieren Sie sich, am besten wiederdurch einen Blick in die AGB, ob Ihnen zu-mindest das Ausführen eigener Perl-Scriptserlaubt ist. Bei kommerziellen Anbieternhaben Sie meist die Wahl zwischen mehre-ren Paketen, die es dem Kunden je nach Be-darf erlauben, eigene Scripts zu installie-ren, in Einzelfällen auch in einer wenigerverbreiteten Programmiersprache.
Soll auf der Site eine Datenbank getrie-bene Anwendung laufen, ist ein kritischerBlick auf den Leistungsumfang des Hostersobligatorisch: Die meisten Server laufen un-ter Linux oder anderen Unix-Systemen undunterhalten MySQL-Datenbanken.
Rigorose Gratis-AnbieterWer von seinem Webhoster eine garantier-te Leistung erwartet und einen Web-Auf-tritt benötigt, der jederzeit erreichbar istund immer funktioniert, sollte einen kom-merziellen Anbieter wählen. Denn um ei-nem Missbrauch der Accounts vorzubeu-gen und sich rasch und unkompliziert vonMissetätern zu trennen, haben fast alle Gra-tis-Anbieter in ihren AGB Richtlinien fest-gelegt wie „Anbieter XX ist jederzeit berech-tigt, Nutzer ohne Vorankündigung undohne Angaben von Gründen vom Dienst
auszuschließen.“ Andere Gratis-Hosterüberwachen die Zugriffe auf einzelne Da-teien und deren Download-Volumen undsperren oder löschen den betreffenden Ac-count bei Überschreiten bestimmter Grenz-werte kommentarlos.
5. So vermeiden Sie dieTraffic-Kostenfalle
Der Provider erfasst genau den Traffic, dasheißt die vom und zum Server übertra-genen Kilobyte. Normalerweise verzeich-nen private Homepages kaum mehr als einpaar Hundert Seitenzugriffe im Monat. Eskann aber vorkommen, dass eine Websiteplötzlich „populär“ wird, sei es, weil Hackerden Space missbrauchen oder weil die Siteneue Inhalte präsentiert, die viele Surferaußerordentlich interessant finden. Dannwird das vereinbarte Daten-Transfer-Limitschnell überschritten. Zahlen muss in je-dem Fall der Kunde, wodurch ihm unterUmständen deutlich höhere Kosten entste-hen als ursprünglich kalkuliert.
Wird das vorgegebene Volumen über-schritten, berechnen die Provider zwischen5 und 30 Euro pro GB. Darum sollten Sieden entstandenen Traffic regelmäßig über-wachen. Am einfachsten geschieht dies mitspeziellen Tools, die die meisten Providerkostenlos anbieten. Ist Ihnen von vorneher-ein klar, dass Ihre Website viel Traffic ha-ben wird, sollten Sie auf ein Webspace-An-gebot mit unbegrenztem Transfervolumenzurückgreifen, auch wenn es etwas teurerist als Angebote mit Limit.
Verfügbarkeit checken: Ob Ihr Wunschname mit der Endung .de noch frei ist, finden Sie rasch unter www.denic.de
heraus. Dort erfahren Sie auch, wer der Besitzer einer Adresse ist (Punkt 2)
HTML-SoftwareBesonders Einsteiger ohne Programmier-erfahrung benötigen zum Erstellen der ei-genen Homepage entsprechende Soft-ware. Viele Provider versorgen ihre Neu-kunden mit einem Software-Bundle, dasunter anderem einen HTML-Editor enthält.Strato zum Beispiel liefert bei den Premi-um-Paketen Golive 6.0, Photoshop Ele-ments 2.0 und Live Motion 2.0 von Adobemit. Und wer seinen Webspace bei 1&1bestellt, bekommt die Vollversionen vonNet Objects Fusion 7 und Uleads PhotoImpact 8 SE. Allerdings sollten Sie IhreWahl nicht unbedingt von den Software-Beigaben abhängig machen. Haben Siesich für ein Angebot entschieden, bei demkeine Software mitgeliefert wird, so kön-nen Sie auf viele leistungsstarke kostenlo-se Programme zurückgreifen. Eine großeAuswahl davon haben wir Ihnen 2 ab Sei-te 110 zusammengestellt.
freie Perl, C/ 1 x MySQL 10 GB 5 Euro Sub-Domain 0,99 Euro, MySQLC++, Phyton 0,99 Euro, SSL-Server 9,99 Euro1)
Basis-CGIs – unbegrenzt – –
PHP, Perl / – unbegrenzt – –eigene CGIs
– – 4 GB 15 Euro Software-Paket, unter anderem mit Namo Web Editor 4
– – 4 GB 15 Euro Software-Paket, unter anderem mit Namo Web Editor 4
Basis-CGIs – 7,5 GB 15 Euro Software-Paket mit Adobe Golive 6.0, Photoshop Elements 2.0,Live Motion 2.0
6. Profi-Alternative: Einen eigenen Server mieten
Für professionelle Web-Auftritte oder an-spruchsvolle Anwender, die 100 ProzentKontrolle und Funktionalität wollen, bie-ten sich gemietete eigene Server an. Dieseso genannten dedizierten oder Root-Serversind in den letzten Monaten recht preis-wert geworden und schon ab etwa 30 Europro Monat zuzüglich Einrichtungsgebührzu bekommen (etwa bei Strato, www.strato.de, 2 Tabelle links).
Bei einem eigenen Server müssen Siesich keine Gedanken um irgendwelcheFunktionen wie Scriptsprachen, Datenban-ken und SSL-Verschlüsselung oder um eineetwaige Beschränkung beim Upload-Temporespektive bei den Dateitypen machen. Diebenötigten Anwendungen installieren Sieeinfach selber, und die volle Leistung desSystems steht exklusiv für Ihre Website zurVerfügung. Allerdings sind Sie als Betreiberauch selbst für die Wartung und die Si-cherheit Ihres Systems verantwortlich.
Meist bestehen die Server-Pakete aus sogenannten LAMP-Systemen. LAMP steht für„Linux-Apache-MySQL-PHP“, und dies be-deutet insbesondere, dass die Maschinensofort für Webserver-Dienste, Datenbank-Importe und dynamische Inhalte startklarsind. In der Regel sind diese Systeme preis-werter als etwa Windows-2000-Rechner, dakeine Lizenzgebühren fällig werden.
Falls Sie keine fundierten Linux-Kennt-nisse besitzen – schließlich gilt es, eigen-verantwortlich den eigenen Server mit al-len Konsequenzen bezüglich Updates undSicherheit zu warten –, bieten die Hoster(zum Beispiel 1&1) ohne Mehrkosten auchfremdadministrierte Server ohne Root-Zu-gang, die dann vom Provider selbst gewar-tet und up to date gehalten werden.
Mehr InfosPC-WELT-Sonderheft
Mit dem Sonderheft „PC-WELT Top-Tipps fürs In-
ternet“ kommen Sie sicher ins Web, surfen
schneller und zahlen we-
niger. Es kostet 7,60 Eu-
ro und ist eine gute Er-
gänzung zum vorliegen-
den Heft, das sich spezi-
ell mit der Erstellung ei-
ner eigenen Web-Prä-
senz beschäftigt.
010-15 201 02.12.2003 12:57 Uhr Seite 7
PC-WELT SONDERHEFT 2/200416
Mit der inhaltlichen und grafischen Gestaltung ist die Arbeit amWeb-Auftritt noch nicht getan. Ein guter Name fürs Angebot unddas Wissen um rechtliche Konsequenzen gehören auch dazu.
Die eigene Domain
Wer beschlossen hat, eine private Homepage oder gar eine kommerzielleWebsite ins Internet zu stellen, stehtzunächst mit vielen Fragen da: Wie erstelleich die Seiten? Wie bekomme ich sie insWeb? Wie finde ich einen freien Domain-Namen im Internet? Und wie und wo kannich ihn für mich reservieren? Was muss ichbei der Namenswahl und beim Aufbau mei-ner Website aus juristischer Sicht beachten?
Antwort auf die ersten beiden Fragen ge-ben Ihnen zahlreiche andere Beiträge indiesem PC-WELT-Sonderheft. Auf den fol-genden vier Seiten geht es um den Erwerbeiner Domain und die rechtlichen Aspekteeines Online-Auftritts.
1. Der eigene Domain-Name:Verfügbarkeit prüfen
Wer einen der großen Online-Provider fürden Zugang zum Internet nutzt, beispiels-weise AOL oder T-Online, erhält von vorn-herein Webspace, also Platz im Internet für
die eigene Homepage. Ausführliche Infor-mationen dazu finden Sie im vorherge-henden Beitrag (ab 2 Seite 10). Allerdingsist die Adresse, mit der Ihre Website dannim Internet steht, alles an-dere als gut zu merken. IhrAngebot mag dann noch soprofessionell sein – eineAdresse wie http://home.t-online.de/home/karl.auer/ wirktnicht gerade profihaft.
Besser und eingängigerwäre da sicher eine Domainwie www.karl-auer.de, die aus-schließlich den eigenen Na-men oder gewünschten Be-griff enthält und nichtdurch andere Bestandteile„entstellt“ wird.
Um zu prüfen, ob der ge-wünschte Name noch freiist, verwenden Sie eine derim Kasten „Registrierungs-
Von Ingo Böhme
Schon vergeben: Ob eine Domain bereits registriert ist, verraten die Regis-
trierungsdatenbanken, hier die für .de-Domains (Punkt 1)
datenbanken für Top Level Domains“ 2 aufSeite 23 genannten Internet-Adressen. Für.de-Domains ist dies www.denic.de, für .at-Domains www.nic.at, für .ch-Domains lautetdie Adresse www. switch.ch.
Für unser Beispiel „karl-auer.de“ öffnenSie www.denic.de in Ihrem Browser undklicken dort auf „WHOIS-Suche“. Geben Siedann im Eingabeformular den gesuchtenDomain-Namen ohne Zusätze wie „http://“oder „www“ ein, in unserem Beispiel also„karl-auer.de“ (ohne Anführungszeichen).
Bei dieser Beispielabfrage erfahren Sie,dass es bereits eine Site mit diesem Namengibt und wer diese Domain registriert hat.Versuchen Sie es hingegen mit der Verball-hornung „Kal-Auer.de“, erhalten Sie (Stand:Oktober 2003) die Information, dass dieserName noch nicht registriert ist. Tipp: Bei einigen Anbietern – beispielsweisebei www.sedo.de oder www.united-domains.de(2 Abbildung auf der rechten Seite oben) –müssen Sie nur den Namen, also etwa„karl-auer“ (ohne Anführungszeichen) ein-geben, und die Suchmaschine prüft sämt-liche Top-Level-Domain-Endungen (.de,.com und so weiter) in einem Durchgang.
2. Domain-Namen-Handel:So funktioniert der Kauf
Nach dem Dot-Com-Debakel ist die Bereit-schaft, für einen guten Domain-Namenhorrende Summen zu bezahlen, deutlichzurückgegangen. Dennoch haben gute, ein-gängige, bekannte oder aus sonstigenGründen lukrative Adressen immer nochihren Preis. Meistens werden diese und an-dere Domain-Namen über Portale zum Ver-kauf angeboten, die darauf spezialisiert
016-23 202 02.12.2003 14:14 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 17
Die eigene DomainpGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 16 – S. 23
sind, den Handel transparent und schnellüber die Bühne zu bringen.
Das bekannteste Handelsportal für Do-main-Namen im deutschsprachigen Raumist www.sedo.de (2 große Abbildung auf derlinken Seite oben). Möchten Sie sich dort le-diglich ein wenig umsehen, brauchen Siesich nicht anzumelden.
Um jedoch eine Domain zu kaufen oderzu verkaufen, müssen Sie sich zunächst beiSedo registrieren, natürlich kostenlos. Die-ser Vorgang ist unkompliziert, und außerIhren Adressdaten geben Sie keine Infor-mationen von sich preis. Nach knapp zweiMinuten – einschließlich Bestätigung perMail – sind Sie dabei.
Gebote abgebenDirekt auf der Sedo-Startseite geben Siewahlweise einen Suchbegriff ein oder stö-bern im Domain-Katalog innerhalb der Ru-briken. Ein bisschen wie der Rundgangdurchs Ferrari-Autohaus ist ein Besuch in
der Abteilung „Top Do-mains“, wo Domain-Namenwie „Marketing.de“ gerneeinmal zu Preisen wie400.000 Euro im Angebotstehen. Mit einem Klick aufeinen Domain-Namen ge-langen Sie auf eine Seite mitnäheren Informationen.Von dort aus können Sieauch ein Gebot abgeben. Da-durch treten Sie mit demVerkäufer in Kontakt undkönnen über den Preis ver-handeln. Werden Sie sich ei-nig, tritt Sedo wieder in Ak-tion. Kosten für die Vermitt-lung entstehen nur dem Ver-käufer, er zahlt zehn Pro-zent (mindestens 75 Euro)
an Sedo. Darin ist auch schon die komplet-te Abwicklung enthalten. Der Käufer hin-gegen bezahlt lediglich den mit dem Ver-käufer ausgehandelten Preis.
3. Meistbietend: Domain-Namenin einer Auktion ersteigern
Eine in aller Regel preiswertere und schnel-lere Variante ist die Ersteigerung eines Do-main-Namens über ein Online-Auktions-haus wie Ebay. Öffnen Sie in Ihrem Browserwww.ebay.de. Wenn Sie noch nicht bei Ebayregistriert sind, müssen Sie dies zunächstmit einem Klick auf „Anmelden“ nachho-len, bevor Sie bei Auktionen mitsteigernkönnen. Dann wechseln Sie in die Katego-rie „Computer“ und darin zu den „Do-mainnamen“, die nach Top-Level-Domain-Endungen unterteilt sind. Hier finden Siepermanent einige Hundert de-Domain-Na-men in der Versteigerung.
Gesteigert wird wie überall bei Ebaydurch Abgabe eines Gebots oder durch ei-
nen Klick auf „Sofort Kaufen“, wodurch Sieohne großes Warten an den Domain-Na-men gelangen. Haben Sie den Zuschlag er-halten, müssen Sie den Domain-Namen aufIhren Provider übertragen. Wie das funk-tioniert, erfahren Sie im 2 Kasten untenauf dieser Seite.
Noch eine Warnung: Achten Sie beiEbay in jedem Fall darauf, dass es sich auchwirklich um den Verkauf einer Domainhandelt, sonst kann es ein böses Erwachengeben. Denn manche Anbieter vermieteneinen Domain-Namen lediglich, und beidem ausgeschriebenen Preis handelt essich um die Monatsmiete.
4. Gelöschte Domain-Namen:Im Internet suchen
Neben der Suche nach dem gewünschtenist auch die Suche nach gerade gelöschtenDomain-Namen eine gute Möglichkeit, ei-nen passenden Namen aufzutreiben. Denntäglich werden Hunderte von Domain-Na-men von ihren Besitzern zurückgegeben.Und da könnte durchaus ein Name dabeisein, der vielleicht hervorragend zu IhremInternet-Auftritt passt und an den Sie nochgar nicht gedacht haben.
Den besten Service bietet der österrei-chische Anbieter Domainname.at (2Abbil-dung auf der nächsten Seite oben). Mit Hil-fe eines Suchformulars unter www.domainname.at/deleted_search.php können Sie re-cherchieren, welche Domain-Namen gera-
Gekaufte Domain-Namen übernehmenDie meisten großen Anbieter halten in ihrem Download-Bereich sämtliche Formulare für denWechsel einer Website zu einem anderen Provider oder auch für den Wechsel des Inhabers ei-ner Domain bereit. Grundsätzlich muss zunächst der Verkäufer seinen alten Provider darüberinformieren, dass ein Inhaberwechsel, ein so genannter KK (Konnektivitäts-Koordination), insHaus steht. Ist dieser informiert, können Sie bei Ihrem Provider den Wechsel initiieren. Dieserstellt den Antrag bei der Denic, die wiederum das Okay des alten Providers und des alten Be-sitzers einholt. Beide müssen zustimmen, bevor der Wechsel vonstatten gehen kann. In allerRegel fallen dadurch keine neuen Kosten an. Lediglich die jährlichen Registriergebühren sindsofort fällig und gelten ab da für den Zeitraum eines Jahres, ganz gleich, ob der bisherige Be-sitzer sie bereits bezahlt hat oder nicht.
Inhalt Seite
1. Eigener Domain-Name: Verfügbarkeit prüfen 16
2. Domain-Namen-Handel: So funktioniert der Kauf 16
3. Meistbietend: Domain-Namen in einer Auktion ersteigern 17
6. Rechtliche Grundlagen: Das müssen Sie beachten 18
7. Impressum: Pflicht aufjeder Website 23
KästenGekaufte Domain-Namen übernehmen 17Kosten eines Internet-Auftritts 18Registrierungsdatenbanken fürTop-Level-Domains 23
Auf einen Rutsch: Hier können Sie Ihren Wunsch-Domain-Namen mit meh-
reren Top-Level-Domain-Endungen auf einmal überprüfen (Punkt 1)
016-23 202 02.12.2003 14:15 Uhr Seite 3
Grundlagen Die eigene Domain pGrundlagen PWorkshops PUtilities
PC-WELT SONDERHEFT 2/200418
PPpP S. 16 – S. 23
de wieder frei geworden sind. Suchen Siezum Beispiel einen .de-Domain-Namen, dernicht länger als zehn Zeichen ist und denBegriff „shop“ enthält, wählen Sie zu-nächst ganz oben die Top-Level-Domain ausder Drop-down-Liste rechts neben „... suchenach Domains“. Geben Sie im Textfeldrechts neben „mit dem Begriff“ Ihren Such-begriff – also beispielsweise „shop“ – ein(ohne Anführungszeichen). Wählen Sie ausder unteren Drop-down-Liste den Eintrag„Nicht mehr als“, und tragen Sie rechts da-neben in das Textfeld die Zahl „10“ ein.Nach einem Klick auf „Go“ erhalten Sie dieerste Ergebnisseite.
Sollten Sie bei Ihrer Suche nicht fündiggeworden sein, versuchen Sie es einfacham nächsten Tag noch einmal. Wird etwasangezeigt, und der Name gefällt Ihnen, somüssen Sie in einer der Registrierungsda-tenbanken überprüfen, ob er auch wirklichfrei ist (2 Kasten „Registrierungsdatenban-ken für Top-Level-Domains“ auf der ge-genüberliegenden Seite). Denn gute Do-main-Namen können, wenn sie zurückge-geben werden, im Nu wieder weg sein.
5. Jetzt gilt’s: Domain-Namen registrieren lassen
Das Registrieren von Domain-Namen istheutzutage kein Problem mehr. Die meis-ten Dienste erledigen dies in Echtzeit. Dasbedeutet, dass Sie den gewünschten Do-main-Namen eintragen und mit dem Ab-senden Ihres Formulars automatisch beider entsprechenden Registrierungsstelleder Antrag gestellt wird. Voraussetzung istnatürlich, dass Sie bei dem Service – also
beispielsweise Puretec.de,Schlund.de oder Strato.de –als Kunde angemeldet sind.Nicht jeder Anbieter unter-stützt sämtliche Top-Level-Domains. Unterstützt IhrProvider beispielsweise dieteure .ag-Endung nicht (siesteht eigentlich für Antiguaand Barbuda, wird aber alsAbkürzung für Aktiengesell-schaft verwendet), könnenSie bei den meisten Re-gistrierungsportalen, zumBeispiel United-domains.de,den Namen anmelden und– überwiegend kostenlos –eine Weiterleitung auf ei-nen anderen Domain-Na-men festlegen. Gibt dann je-
mand Ihren AG-Namen im Browser ein,wird er, ohne es zu merken, auf eine ande-re Ihrer Seiten umgeleitet.
6. Rechtliche Grundlagen:Das müssen Sie beachten
Während es 1996 gerade mal drei Urteilezum Thema „Recht im Internet“ gab, sindes heute bereits viele Hundert, oft durchAbmahnvereine erwirkt. In deren Kreuz-feuer können auch Sie theoretisch geraten,sobald Sie mit Ihren Seiten online gegan-gen sind. Daher sollten Sie sich über einigerechtliche Gegebenheiten im Klaren sein.
Bei der Wahl des Domain-Namens lie-gen die ersten Fallstricke. Auf die Verwen-dung von Markennamen sollten Sie grund-sätzlich verzichten. Deren Inhaber genie-ßen in Deutschland einen sehr umfassen-den Schutz. Markennamen müssen aberentweder beim Deutschen Markenamt ein-getragen sein oder einen großen Bekannt-heitsgrad wie Porsche oder Tempo haben.In solchen Fällen erstreckt sich der Schutzsogar bis hin zu ähnlichen oder abgewan-delten Schreibweisen, etwa „Maikrosoft“.
Im Streitfall haben Sie in dreifacher Hin-sicht verloren: Sie müssen den Domain-Na-men abgeben. Der Inhaber kann Schadens-ersatzforderungen an Sie stellen. Zu guterLetzt gehen sämtliche Verfahrenskostensamt Anwaltsgebühren zu Ihren Lasten.Und da das Verfahren sich am Streitwertorientiert, kann das richtig ins Geld gehen.
Ist Ihr Name nicht gerade ein einge-tragener Markenname, so können Sie ihngetrost reservieren. Hier gilt: Wer zuerstkommt, mahlt zuerst. Wenn er bereits an
jemand anderen gleichen Namens verge-ben ist, haben Sie das Nachsehen. Ist eraber von jemandem reserviert worden, dernicht so heißt, können Sie die Herausgabedes Domain-Namens fordern.
Bei den Links und bei der Übernahmevon Inhalten (Texte oder Bilder) müssen Sie
Kosten eines Internet-AuftrittsEin Internet-Auftritt kostet Geld. Nicht nurdie Gestaltung der Website und das Zu-sammenstellen der Inhalte, sondern auchdas Präsentieren im Internet ist mit Kos-ten verbunden. Zunächst einmal fallen – möglicherweise – einmalige Kosten fürden Kauf des Domain-Namens an. War IhrDomain-Name noch frei, ist die eigentli-che Registrierung kostenlos.
Haben Sie einen eigenen Domain-Na-men, also beispielsweise <ihrname>.de,müssen Sie jährlich im Voraus an die Ver-waltungsstelle 10 bis 250 Euro (je nachTop-Level-Domain und Anbieter) zahlen.Dazu kommt der Speicherplatz im Inter-net, also die Festplattenkapazität des In-ternet-Servers, der in der Regel nach Me-gabyte abgerechnet wird. Und zusätzlichfällt dann noch der Traffic an, also die Da-tenmenge, die Ihre Besucher zusammen-genommen erhalten. Hat die abgerufeneWeb-Seite beispielsweise 20 KB Text undzwei Bilder à 40 KB, werden bei jedem Ab-ruf dieser Seite 100 KB übertragen. Bei10.000 Seitenabrufen am Tag macht diespro Monat knapp 30 GB. Da 1 GB Daten-transfer in Deutschland zwischen 5 und 6Euro kostet, können bei gut besuchtenSeiten mächtige Kosten entstehen.
Das Heraufladen der Daten durch Siefällt dagegen kaum ins Gewicht, weil diesja nur einmal und dann bei Aktualisierun-gen geschieht. Wenn Sie zum Beispiel100 MB hochladen, dann ist das garnichts, wenn diese 100 MB von 1000 An-wendern heruntergeladen werden.
Die meisten Internet Service Providerbieten Kombipakete an, in denen zum Teilalle drei Kostenfaktoren (Domain-Name,Speicherplatz und Datentransfer) in einermonatlichen Pauschale enthalten sind.Mehr Infos hierzu finden Sie im 2 Beitrag ab Seite 10. Beachten Sie aber, dass Siebei Überschreitung der Datenmengen zumTeil kräftig draufzahlen.
Besonderer Service: Bei Domainname.at finden Sie gerade wieder frei ge-
wordene Domain-Namen für verschiedene Länder (Punkt 4)
016-23 202 02.12.2003 14:15 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 23
Die eigene DomainpGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 16 – S. 23
immer erst den Anbieter fragen, auf denSie verlinken. Bei Bildern gilt das sogar,wenn Sie die Grafiken gar nicht auf IhrerSeite ablegen, sondern über den Image-Tag(<img src= ...) beim Copyright-Inhaber be-lassen und nur anzeigen. Zitieren dagegenist mit Quellenangabe unproblematisch.
Theoretisch müssen Sie sogar einen An-bieter fragen, auf dessen Inhalt Sie verwei-sen. Haben Sie jedoch keine anstößigenoder strafrechtlich bedenklichen Inhalteauf Ihrer Seite, wird sich jeder Website-Be-sitzer freuen, wenn Sie auf ihn verlinken,weil dadurch seine Seite bei Suchmaschi-nen mehr Gewichtung erhält.
Häufig wird auf Websites ein Urteil desLandgerichts Hamburg zitiert, welches an-geblich besagt, dass man sich mit dem An-bringen eines Links von jedwedem verlink-ten Inhalt distanziert. Doch diese Interpre-tation des Urteils ist ein Missverständnis.Vielmehr ist ein Anbieter einer Websitenach § 5 Abs. TDG nicht verantwortlich fürfremde Inhalte, zu denen er nur den Zu-gang zur Nutzung vermittelt hat, oder imKlartext: auf die er nur verlinkt. Einen aus-führlichen Diskurs hierzu finden Sie unterwww.schneegans.de/distanzierung-von-links.
7. Impressum: Pflicht aufjeder Website
Die Anbieter von Inhalten über das Inter-net – also Besitzer einer Website gleich wel-cher Art – müssen sich dem Besucher ge-genüber klar ausweisen. Es genügt nicht,dass Sie einfach Ihren Namen irgendwo auf
der Website vermerken.Vielmehr besagt das „Gesetzüber rechtliche Rahmenbe-dingungen für den elektro-nischen Geschäftsverkehr“(EGG), dass diese Informatio-nen „leicht erkennbar, un-mittelbar erreichbar undständig verfügbar“ sein müs-sen. Das bedeutet, dass esdem Besucher möglich seinmuss, von jeder Seite des An-gebots aus zu Ihrem Impres-sum zu gelangen.
Eindeutige IdentifizierungWas in diesem Impressumstehen muss, hängt von derIntention der Website ab.Geschäftsmäßige Sites müs-sen mehr über den Anbieter preisgeben alsder Rest. Allerdings nennt der Gesetzgeberall die Angebote „geschäftsmäßig“, die„aufgrund nachhaltiger Tätigkeit mit oderohne Gewinnerzielungsabsicht“ bereitge-stellt werden. Das dürfte wohl für nahezualle Websites im Internet gelten. Insofernsollten Sie auf jeden Fall ein Impressum inIhren Web-Auftritt einbauen, welches ambesten mit einem Link von allen Einzelsei-ten Ihres Angebots erreichbar ist.
Verstöße gegen die Impressumspflichtkönnen mit einem Bußgeld bis 50.000 Eurogeahndet werden. Und hier reicht schon dieAbmahnung eines der zahlreichen Ab-mahnvereine, die es gibt.
Das Impressum dient dazu, den Betreibereindeutig zu identifizieren. Somit gehörenauf jeden Fall Name und Anschrift dazu.Außerdem muss der Betreiber elektronischerreichbar sein. Deshalb sollten Sie auch Ih-re Mailadresse nennen.
Mailadresse vor Spammern schützenMailadressen im Internet sind allerdingsein begehrtes Ziel von so genannten Spam-Crawlern. Das sind Programme, die Web-Seiten nach Mailadressen durchsuchenund diese in riesigen Datenbanken spei-chern. Die Empfänger sind dann Opfer vongroß angelegten Spam-Attacken.
Daher sollten Sie Ihre Mailadressen imInternet auf eine Weise verklausulieren,dass Spam-Crawler nicht in der Lage sind,sie als Adresse zu erkennen. So können Siebeispielsweise in einem Bildbearbeitungs-programm wie Paint Shop Pro Ihre Mail-adresse als GIF erstellen und dieses Bild ander entsprechenden Stelle einbinden.
Weitere Angaben im Impressum müs-sen lediglich Unternehmen machen. Dazugehören neben dem Firmennamen gegebe-nenfalls die Steuernummer/Umsatzsteuer-identifikationsnummer und – im Falle ei-ner GmbH oder ähnlichen Gesellschafts-form – Handelsregisternummern oder An-gaben zu sonstigen Zulassungsstellen.
Unter www.digi-info.de/de/netlaw/webimpressum/assistent.php (2Abbildung oben) findenSie einen praktischen Assistenten, mit des-sen Hilfe Sie sowohl als Privatperson alsauch als Unternehmer das optimale Im-pressum erstellen können, das Sie dannnur noch mit den realen Daten versehen.
Registrierungsdatenbanken für Top-Level-DomainsAlle so genannten Top-Level-Domains (TLD), also beispielsweise .de, .com, .ch oder .at, sind inunterschiedlichen Registrierungsdatenbanken erfasst. Diese Datenbanken können Sie überWeb-Formulare abfragen. Falls der gewünschte Domain-Name bereits vergeben ist, erfahrenSie bei der Abfrage, wem er gehört. Im Folgenden finden Sie für die wichtigsten Top-Level-Domains die jeweiligen Internet-Adressen, unter denen Sie eine Abfrage starten können. EineWebsite mit allen TLD-Endungen und Verweisen zu den dazugehörigen Registrierungsdaten-banken steht unter www.iana.org/cctld/cctld-whois.htm.
TLD Bedeutung / Land Internet-Adresse.de Deutschland www.denic.de/servlet/Whois.at Österreich www.nic.at/de/index/index/index.asp.ch / .li Schweiz, Liechtenstein www.switch.ch/id/search-domain.html.com Commercial www.networksolutions.com.net Network www.networksolutions.com.org Organisationen (Non Profit) www.networksolutions.com.biz Business Websites www.networksolutions.com.info Informationen www.afilias.info/whois_search
Optimal: Mit Hilfe des Assistenten dieser Website erzeugen Sie anhand Ih-
rer persönlichen Angaben ein rechtlich einwandfreies Impressum (Punkt 7)
016-23 202 02.12.2003 14:15 Uhr Seite 5
PC-WELT SONDERHEFT 2/200426
Ob eine Website optisch gelungen ist oder nicht, ist nichtnur eine Frage des Geschmacks. Lesen Sie, welche GrundregelnSie beachten sollten, damit Ihre Site glänzend dasteht.
Gutes Web-Design
Ein gutes Design, wissen Fachleute, lebtvor allem von der Beschränkung: Wenige,aber dafür gezielt eingesetzte Elemente wieSchriften, Bilder und Grafiken sorgendafür, dass das Design aufgeräumt stattüberladen wirkt. Und dafür, dass es funk-tioniert, weil der Betrachter nicht durchSpielereien um ihrer selbst willen vom In-halt abgelenkt wird.
1. Minimalismus: Maß der Dinge im Web-Design
Diese allererste Regel jedes funktionalenDesigns ist das Grundgesetz des Internet-Designs. Hier ist streng genommen die ab-solute Beschränkung auf das Minimumeinziges Maß der Dinge. Nur so funktio-niert es, dass der Surfer eine Seite so sieht,wie sie aussehen soll.
Ein Auszug aus der Liste der Widrigkei-ten: Der Internet Explorer stellt Seiten an-ders dar als seine Konkurrenten Netscapeoder Opera. Umgekehrt gilt das natürlich
genauso. Grundsätzlich zeigt ein Browsernur das, was auf seinem Gastgeberrechnerauch vorhanden ist.
Das gilt zunächst für Schriften. DieFonts, die auf Ihrem PC wunderbar ausse-hen, sind auf anderen Web-Rechnern oftschlicht nicht vorhanden. Dort sehen dieSeiten dann ganz anders aus.
Es gilt weiter für Bilder, mit denen sichprinzipiell das komplette Aussehen festle-gen lässt. Allerdings ist das nicht ratsam,weil Bilder aufgrund ihrer Größe das La-den einer Web-Seite stark bremsen können.Es gilt nicht zuletzt für die Größe des Brow-ser-Fensters: Sie können zwar im Design ei-ne optimale Größe festlegen, Einfluss aufdie Größe, in der ein Betrachter diese Seiteanschaut, haben Sie jedoch nicht.
Das ist die Ausgangsbasis. Daran gemes-sen, ist es durchaus erstaunlich, dass vieleWeb-Seiten tatsächlich gut aussehen. Dasist die Kunst, deren Grundlagen wir Ihnenin diesem Beitrag vermitteln möchten.
2. Die Größe derWeb-Seite festlegen
Nur wenige Internet-Surfer haben einenmodernen PC mit großem Flachbildschirmsamt entsprechender Auflösung und Farb-tiefe vor sich stehen. Gehen Sie beim Pla-nen Ihrer Homepage von einer maximalenAuflösung von 800 x 600 dpi aus. Damitsind zwar alle Handy- und Handheld-Surferaußen vor, denn die haben keine Chance,Ihre Seite so zu sehen wie Sie. Dafür habenSie die meisten anderen damit wenigstensgrundsätzlich auf Ihrer Seite.
Wenn Sie Ihre Web-Seite gestalten, pla-nen Sie höchstens eine Größe von 780 x457 Pixeln ein. Der Rest des Platzes geht fürTitel-, Symbol- und Statusleisten Ihres Brow-sers drauf. Wir empfehlen Ihnen, währenddes Gestaltens Ihrer Web-Seite die Auflö-sung Ihres Bildschirms auf 800 x 600 zu re-duzieren. Dann haben Sie die beste Kon-trolle über das, was bei vorgegebener Grö-ße auf Ihre Web-Seite passt.
Als Faustregel für das Arbeiten mit einerfesten Seitenstruktur gilt: Niemand solltehorizontal scrollen müssen, um Ihre Web-Seite lesen zu können. Vertikales Scrollendagegen ist akzeptabel, wenn die Länge ei-nes Textes den Rahmen sprengt.
3. Tabellen oder Frames: Die Web-Seite strukturieren
HTML bietet nicht die Möglichkeit, Elemen-te wie Menüs, Texte oder Bilder punktge-nau auf einer Seite zu platzieren. Um den-noch einen festen Seitenaufbau vorgebenzu können, gibt es zwei Optionen: Sie tei-len eine Seite in Frames (Rahmen) auf odernutzen Tabellen zum Strukturieren.
Frames sind einzelne HTML-Seiten, diein einem übergeordneten „Frameset“ an-geordnet sind (2 Abbildung unten). DieStartseite INDEX.HTM ist im Grunde ge-nommen leer. Ihre einzige Aufgabe ist es,weitere HTML-Seiten an definierbare Stel-len zu platzieren. Frames bieten einige Vor-
Von Thomas Pelkmann
Beispielseite mit Frames. Jeder einzelne Block besteht
aus einer HTML-Seite (Punkt 3)
026-29 203 02.12.2003 14:03 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 27
Web-Seiten-DesignpGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 26 – S. 29
teile: Sie können durch voneinander unab-hängige Seiten leicht eine starre Seiten-struktur aufbauen. Frames sind zudem ei-ne gute Möglichkeit, Seitenelemente punkt-genau zu platzieren. Und: Die Pflege ein-zelner Seiten ist wesentlich einfacher.
Allerdings sind Frames nicht jedes Brow-sers Sache. Manche können Frames über-haupt nicht darstellen. Statt eines ausgewo-genen Gesamtbildes aus Frames sehen Be-nutzer solcher Browser einfach gar nichts.Ein zweiter gravierender Nachteil: Kommtein Besucher über eine Suchmaschine zu ei-ner Ihrer Seiten, sieht er nur diese eine Sei-te, nicht aber das komplette Frameset. Da-mit hat er keine Möglichkeit, weiter inner-halb Ihrer Seite zu manövrieren.
Unsere Empfehlung: TabellenEine bessere Möglichkeit, Seiten zu struk-turieren und ihnen einen festen Aufbau zugeben, sind daher Tabellen (2 Abbildungoben). Tabellen bieten im Prinzip alle Mög-lichkeiten eines Framesets (fester Seiten-aufbau), haben aber nicht deren Nachteile.
Daher unsere Empfehlung: Nutzen Siezum Strukturieren Ihrer Seiten Tabellen.Setzen Sie nach dem Fertigstellen der Ta-belle zum Schluss die Breite der Rahmenli-nien auf „0“. Der passende HTML-Befehlheißt „border='0'“ und gehört in den „<table>“-Tag. Viele Hinweise hierzu findenSie in den Beiträgen 2 ab Seite 34, 2 ab Sei-te 64 und 2 ab Seite 80.
4. Arbeit mit Farben: „Web-sicher“ kolorieren
Theoretisch steht Ihnen fürs Gestalten vonWeb-Seiten die maximale Farbpalette von16 Millionen Farben zur Verfügung. DasProblem: Nicht jeder Bildschirm und jederBrowser kann diese Farbzahl auch darstel-len. Wer seinen Monitor auf eine Farbtiefevon 16 Bit eingestellt hat, sieht maximalrund 16.000 Farben. Von Ihnen geplante fi-ligrane Farbübergänge geraten dann unterUmständen zur Treppchengrafik mit gro-ben Farbabstufungen.
Als „Web-sicher“ gelten im Internet 216von Netscape definierte Farben (2 Abbil-dung unten links). Die komplette Tabelledieser Web-sicheren Farben finden Sie zumBeispiel unter www.html-lexikon.de/farben_netscape.php. Wir empfehlen Ihnen, sich ausdieser Farbtabelle zu bedienen, dann sindSie auf der sicheren Seite.
Die Hintergrundfarbe definieren Sieüber den Tag „<bgcolor=>“. Geben Sie dieFarbe in hexadezimalen Werten an (zumBeispiel „#000000“ für „Schwarz“). Damithebeln Sie die Beschränkungen einzelnerBrowser bei der Farbdarstellung aus.
5. Farbkombinationen: Auf die Wirkung achten
Farbkombinationen sindnicht nur eine Sache des gu-ten Geschmacks. So solltenSie etwa bei der Zusammen-stellung von Hintergrund-farbe und Schriftfarbe aufgute Lesbarkeit achten. Mei-den Sie zum Beispiel dieKombination von Orangeund Grün oder Rot undSchwarz, weil die Schrift beisolchen Farbzusammenstel-lungen nur sehr schwer zulesen ist. Die Wirkung ver-schiedener Farbkombinatio-nen können Sie sehr gut un-ter http://primeshop.com/html/216colrs.htm ausprobieren.
Neben dem funktionalen Aspekt beimFarbverhältnis von Hintergrundfarbe undSchriftfarbe spielt bei der Wahl der richti-gen Kolorierung auch die Wirkung einegroße Rolle (2 Abbildung folgende Seiteoben). Welche Kombination etwa „Dyna-mik“ ausstrahlt (Rot, Blau, Orange), welche„Männlichkeit“ (Blau, Schwarz, Braun) undwelche „Schnelligkeit“ (Silber, Rot, Gelb),können Sie auf der informativen Seite zumThema Farbwahrnehmung und Farbwir-kung nachlesen, die das renommierteFraunhofer-Institut erstellt hat (www.darmstadt.gmd.de/~crueger/farbe).
Inhalt Seite
1. Minimalismus: Das Maß der Dinge 262. Größe der Web-Seite 263. Struktur: Tabellen oder Frames 264. „Web-sichere“ Farben 275. Farbkombinationen 276. Schriften: Auf Typo-Tricks verzichten 287. Grafische Elemente 288. Komprimierte Bilder verwenden 289. Intuitive Navigation 29
10. Site-Test 29
KästenSeitengröße fest einstellen 27Animationseffekte mit Javascript 28
Seitengröße fest einstellenSie können die Größe einer Web-Seite sofestlegen, dass der Benutzer das nicht än-dern kann. Dafür rufen Sie von Ihrer Start-seite aus einfach eine zweite Seite mitfester Größe auf. Fügen Sie im HTML-CodeIhrer INDEX.HTM innerhalb des „<head>“-Tags folgendes Javascript ein:
<SCRIPT LANGUAGE="Java Script">
F1 = open("start.htm", "Fenster1v","width=640,height=600,screenX=0,screenY=0");
</SCRIPT>
Mit „width“ und „height“ definieren Siedie absolute Größe Ihres Fensters in Pi-xeln, „start.htm“ heißt die Seite, die Siemit der ersten Seite zusammen starten (aufC Heft-CD, Beispiel 1.htm).Farbwahl: Die Netscape-Farbpalette mit den 216 „Web-sicheren“ Farben.
Wir empfehlen, sich aus dieser Farbtabelle zu bedienen (Punkt 4)
Flexible Seitengestaltung: Tabellen sind die Alternative
6. Verwendung von Schriften: Auf Typo-Tricks verzichten
Bei der Programmierung von Web-Seitensind Schriften eine ziemlich relative Ange-legenheit. So ist es nicht möglich, be-stimmte Schriften vorzugeben. Was einWindows-Programmierer als „Arial“ defi-niert, kommt bei einem Mac-Anwendernoch lange nicht als „Helvetica“ auf denSchirm und umgekehrt.
Vom namentlichen Benennen einerSchrift sollten Sie also absehen – bezie-hungsweise zumindest damit rechnen,dass eine von Ihnen gewünschte Schriftnicht funktioniert. Verwenden Sie zum Bei-spiel eine „Arial“, sollten Sie Ersatzschrif-ten für den Fall definieren, dass dieseSchrift nicht vorhanden ist. In HTML siehtdas beispielsweise so aus:
Der Browser versteht: „Benutze die Schrift,Lucida Console‘. Hast du die nicht, nehmedie ,Arial‘. Ist auch die nicht vorhanden,verwende eine ,Sans-Serif‘-Schrift deines Sys-tems, eine Schrift also ohne Verzierungen(Serifen) an den Enden!“
Wenn Ihre Seite im Zweifelsfall auchmit irgendeiner serifenlosen Schrift nichtgut aussieht, ist sie nicht gut geworden. EinSeitenentwurf ist nur dann geglückt, wennSie eine bestimmte serifenlose Schrift ver-wenden wollten. Auf alle gezielt eingesetz-
ten typographischen Tricks mit einer be-stimmten Schrift (Spationierung, Unter-schneidung, Schrifteffekte und -schnitte)müssen Sie also verzichten. Definieren kön-nen Sie dagegen Schriftgrößen in Punkt,allgemeine Schriftschnitte wie „fett“ oder„kursiv“ sowie die Farbe der Schrift.Tipp: Verwenden Sie nicht mehr als eineSchriftfamilie für Fließtexte („Times NewRoman“ oder Serifenschrift) und eine zwei-te für Überschriften („Arial“ oder serifenlo-se Schrift). Beschränken Sie sich auf Über-schrift (H1), Zwischenüberschrift (H2) undFließtext. Nutzen Sie Hervorhebungen mitkursiver oder fetter Schrift ebenfalls sehrsparsam, um den Effekt nicht durch über-mäßige Anwendung zu entwerten.
Wenn Sie aus grafischen Gründen nichtauf eine bestimmte Schrift verzichten kön-nen – etwa bei einem Firmenlogo –, gibt esnur einen Weg, diese Schrift im Original zuverwenden: Machen Sie ein Bild daraus,und stellen Sie dieses Bild anstelle der ur-sprünglichen Textmarke auf Ihre Web-Sei-te. Aber Achtung: Verwenden Sie solche Bil-der sparsam, um die Größe Ihres HTML-Do-kuments nicht unnötig aufzublasen.
7. Grafische Elemente: Für die eindeutige Struktur
Auch im Internet sagt ein Bild mehr alstausend Worte. So gesehen, sind grafischeFunktionselemente in Web-Seiten sehrempfehlenswert. Ein weiterer Vorteil: Gra-fische Elemente tragen zu einer übersicht-lichen und eindeutigen Struktur bei. Mitgrafisch gestalteten Schaltflächen oder But-
tons lässt sich eine einfach nachzuvollzie-hende Navigation erschaffen, die es jedemBesucher leicht macht, sich auf Ihren Sei-ten zurechtzufinden. Das gilt für dieMenüleiste ebenso wie für klassische Na-vigationselemente („Weiter“, „Startseite“,„E-Mail“, „Download“). Für Ihre Menü- undfür die klassischen Navigationselementesollten Sie jeweils nicht mehr als ein grafi-sches Element gestalten. Variieren Sie diesewenigen Elemente über ihre Beschriftung.
8. Bilder benutzen: Mit Komprimierung bitte
In keinem Bereich der Web-Seitengestal-tung gilt der erste Grundsatz des Web-De-signs – „Beschränkung, Beschränkung, Be-schränkung!“ – so sehr wie bei der Bildge-staltung. Klar ist es verlockend, mit Bildernauszudrücken, was mit Worten sehr vielmehr Platz einnimmt. Aber das Übertra-gungstempo im Internet lässt das extensiveArbeiten mit Bildern einfach nicht zu.
Als Faustregel gilt: Wenn ein Besuchernicht nach längstens zehn Sekunden weiß,was ihn auf einer Web-Seite erwartet, klickter weiter. Dauert das Laden zentraler Bild-elemente länger, haben Sie die „Abstim-mung mit der Maus“ verloren. Und Sie ha-ben keine Möglichkeit, mit Ihren Besu-chern darüber zu diskutieren!
Mit modernen Komprimierungsmetho-den ist es allerdings möglich, mit den Be-schränkungen bei der Arbeit mit Bildele-menten zu leben. GIF- oder JPG-Bilder sindbei der richtigen Bearbeitung hinreichendklein, um Web-Seiten-tauglich zu sein.
Animationseffekte mit Javascript
Mit Filmen auf der Homepage oder aufwendig animierten Grafiken sollten Sie möglichst spar-sam umgehen, weil das Laden solcher „Spielereien“ viel Zeit in Anspruch nehmen kann. Aufder C Heft-CD präsentieren wir Ihnen jedoch hübsche Beispiele für Effekte mit Javascript, dieden Vorzug haben, dass sie klein sind und sich damit schnell laden lassen.
Die Sammlung dieser Applets trägt den Na-men Anfy 2.0 und ist Freeware für alle Win-dows-Systeme (5 MB). Über die Website desHerstellers www.anfyteam.com sind auch Li-nux- und Macintosh-Versionen erhältlich. AlleApplets können Sie selbstredend leicht an Ihreeigenen Wünsche anpassen. So ist es in dervorbildlichen Schritt-für-Schritt-Prozedur be-sonders einfach, vorgegebene Bilder durch ei-gene zu ersetzen und die Parameter passendeinzustellen. Programmierkenntnisse benöti-gen Sie für diese Effekte nicht.
AufCHeft-CD: Ein Beispiel für Effekte mit Java-
script aus der Sammlung Anfy 2.0
High: „Helle“ und „leichte“ Farben vermitteln einen
Eindruck von Weite und wirken belebend (Punkt 5)
026-29 203 02.12.2003 14:04 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 29
Web-Seiten-DesignpGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 26 – S. 29
„Spiegel Online“ etwa schafft es, auf derStartseite (www.spiegel.de) mehr als zwei Dut-zend Fotos und Grafiken unterzubringen(2 Abbildung unten). Dennoch ist das ge-samte HTML-Dokument im Schnitt nichtgrößer als um die 220 KB.
Beachten Sie bei der Wahl des richtigenFormats, dass GIF-Bilder zwar kleiner sindals JPGs, aber nur maximal 255 Farben dar-stellen können. Im GIF-Format lässt sich da-her kein Farbrausch zeigen. JPG-Bilder kön-nen dagegen die komplette Farbpalette dar-stellen und taugen deshalb als Format fürFotos sehr viel besser.
Aber Sie sollten das Format von JPG-Fo-tos verkleinern, um Platz zu sparen. EineGröße von nur 145 auf 180 Pixeln reicht fürein Porträt absolut aus. Mehr zum Thema„Bildformate“ lesen Sie 2 ab Seite 84.Wichtig: Nutzen Sie die Möglichkeit, Bilderin HTML mit einem Alternativtext zu ver-sehen. Dieser Text erscheint bereits, wenndas Bild noch geladen wird, und ist auchdann zu sehen, wenn das Laden eines Bil-des fehlschlägt. Der passende Befehl inner-halb des „<img src>“-Tags heißt:
"alt=[ERKLÄRUNGSTEXT]"
9. Navigation auf der Seite: Nur intuitiv funktioniert’s
Die beste Navigation funktioniert intuitiv.Je weniger ein Besucher darüber nachden-ken muss, wie er von A nach B und wiederzu A zurückkommt, desto besser ist die Na-vigation. Eine gute Navigation leistet zwei-erlei: Erstens weiß Ihr Besucher immer, wogenau er sich gerade befindet. Und zwei-tens hat er von überall die Möglichkeit, zuallen anderen Stellen zurückzukommen.Zu realisieren sind solche Navigationenrecht einfach: Auf jeder Seite gibt es einen
Link zur Startseite. Jede Seiteenthält außerdem Standard-Links zu einer Sitemap und/oder Suchmaske sowie zurKontaktaufnahme. In derPraxis erprobt sind auchHinweise am Anfang der Sei-te, die dem Besucher zeigen,wo er sich gerade befindet.Sind diese Texthinweise miteinzelnen Links unterlegt,ist die Navigation schon fastperfekt. Umfangreiche Web-sites mit vielen Unterseitenwerden mit einer so genann-ten Sitemap noch übersicht-licher. Eine Sitemap ist eineSeite, die den Inhalt des Ge-samtangebots nach Stich-wörtern sortiert (2 neben-stehende Abbildung). BietenSie dazu noch eine Such-funktion, mit deren Hilfe dieBesucher nach beliebigen Wörtern inIhrem Angebot suchen können, bleibenkeine Wünsche mehr übrig. Wer neben derStartseite nur zwei bis drei Unterseiten prä-sentiert, kann auf auf Sitemap und Such-funktion aber getrost verzichten.
Für die Struktur einer Seite hat sich imWeb ein starrer Seitenaufbau durchgesetzt.Aus gutem Grunde, denn solch ein festerAufbau erleichtert Ihren Besuchern die Ori-entierung ungemein. Im Grunde bietensich zwei Varianten an: Menüleiste obenoder Menüleiste links. Tatsächlich gibt esviele Seiten, die beides nutzen (je nach Um-fang der angebotenen Informationen):Links finden Sie die Themengebiete, obendie festen Rubriken wie Impressum, Such-maske oder Hilfe. Entscheiden Sie sich füreine Struktur, und halten Sie diese Struk-
tur auf allen Seiten durch.
10. Abschließender Test:Größten Nenner finden
Stopp: Bevor Sie anfangen,Ihre Web-Seite zu program-mieren, stellen Sie die Auflö-sung Ihres Monitors und Ih-rer Grafikkarte auf 800 x 600bei 16 Bit Farbtiefe. So sehenSie Ihre Web-Seite bereits beider Arbeit so, wie sie die meis-ten Besucher sehen werden.Wenn alles fertig ist, testenSie Ihre Seite mit verschiede-nen Browsern, nicht nur mit
dem Internet Explorer, sondern beispiels-weise auch mit dem Netscape Navigatoroder Communicator sowie Opera. SehenSie sich die Seite ferner mit Mac- oder Li-nux-Rechnern an, sofern Sie die Möglich-keit dazu haben. Sie werden gleich mer-ken, wie unterschiedlich dieselbe Web-Sei-te auf verschiedenen Plattformen aussieht.
Die Testreihe vervollständigt die Probeauf Rechnern, die über ein analoges Mo-dem (56K) ins Internet verbinden. Damitmachen Sie selbst die Erfahrung, wie langees bei einer langsamen Internet-Verbin-dung dauert, bis die Bilder zu sehen sind.
Mit vertretbarem Aufwand ist es kaummöglich, eine Seite für alle vorkommendenBedingungen zu optimieren. Das Ziel derTestreihen sollte daher sein, den größtengemeinsamen Nenner zu finden: Was siehtüberall wenigstens annähernd gleich gutaus, was geht unter verschiedenen Bedin-gungen zumindest ausreichend schnell?Die Antwort auf diese Fragen stellt eine gu-te, ausgewogene und professionell gestalte-te Homepage dar. Und das ist doch was!
Mehr InfosBücher
Thomas Wirth, „Missing Links – Über gutes
Webdesign“, 2. erweiterte Auflage, Hanser-Ver-
lag 2004, www.hanser.de, 360 Seiten, ISBN 3-
446-22554-4, 49,90 Euro.
Sitemap als Sprungbrett: Hier finden Besucher alle Inhalte der Web-Prä-
senz der „Süddeutschen Zeitung“ sortiert (Punkt 9)
Kompakt-Angebot: Trotz zahlreicher Bilder ist die Startseite von „Spiegel
Online“ erfreulich klein. Das spart lange Ladezeiten (Punkt 8)
026-29 203 02.12.2003 14:05 Uhr Seite 5
PC-WELT SONDERHEFT 2/200430
Suchmaschinen wie Google entscheiden über Erfolg oder Miss-erfolg einer Homepage. Optimieren Sie mit einfachen Mitteln IhreWebsite, damit sie in den Suchergebnissen besser platziert ist.
Website-Marketing
Eine Homepage ist kein Selbstläufer,selbst wenn sie noch so interessante Inhaltebietet und perfekt gestaltet ist. Die Surferim Web müssen nämlich erst einmal wis-sen, dass es Ihre Website überhaupt gibt.Und der Weg zu neuen Websites führt fürSurfer in den allermeisten Fällen über eineder bekannten Suchmaschinen wie Goo-gle, Altavista oder MSN Search.
Ziel: Platzierung in den Top 50Sie müssen daher dafür sorgen, dass solcheSuchmaschinen Ihre Homepage kennen,mit den richtigen Stichwörtern verbindenund sie möglichst weit vorne in der Ergeb-nisliste nennen. Denn Suchmaschinen wer-fen meist Tausende von Fundstellen aus.Kaum ein Surfer blättert aber mehr als dieersten 50 Treffer durch.
Es ist also entscheidend, dass IhreHomepage-Adresse möglichst weit vorne inder Liste steht – es sei denn, Sie legen aufguten Besuch Ihrer Website keinen Wert.
1. Spider und Robots: Sofunktionieren Suchmaschinen
Mit wenig Aufwand machen Sie Ihre Web-Seite zur leicht verdaulichen Kost für Such-maschinen. Wenn Sie die „Denkweise“ vonSuchmaschinen wie Google kennen, kön-nen Sie Ihre Web-Seiten genau so bauen,wie die Suchmaschine siegerne hat.
Jede Suchmaschine hateine riesige Datenbank mitWeb-Adressen. Zu jederAdresse enthält die Daten-bank etliche Stichwörterund jeweils eine Wertung(sowie eine kurze Beschrei-bung, mehr dazu lesen Sieim 2 Abschnitt „4. Versteck-te Suchhilfe: Meta-Tags ein-fügen“). Tippt ein Anwendereinen oder mehrere Suchbe-griffe ein, so ermittelt dieSuchmaschine jene Einträ-
ge, die das passende Stichwort aufweisen.Die Reihenfolge in der Fundliste – auchRanking genannt – ergibt sich aus der Wer-tung der Stichwörter. Je höher die Wer-tung, desto weiter vorne in der Liste stehtIhre Homepage.
Das ist natürlich eine vereinfachte Dar-stellung, die Suchmaschinen nutzen mehrDetails und teilweise recht komplexe Ver-fahren, um eine Web-Seite zu bewerten. BeiGoogle zählt beispielsweise, wie viele ande-re Homepages auf diese Seite mit Links ver-weisen. Wie Sie hier Punkte holen, erfahrenSie unten im 2 Abschnitt „6. Adresse ver-breiten: Mehr Links auf die Homepage“.
Um die Datenbank zu füllen, arbeitenbei den Suchmaschinen rund um die Uhrso genannte Robots, Crawler oder Spider.Diese Programme fordern Web-Seiten anund analysieren sie. Wie die Analyse genauerfolgt, ist ein Betriebsgeheimnis der Such-maschinen-Betreiber. Denn sie ist die Basisfür gute Ergebnislisten, die den Surferschnell zu relevanten Homepages führen.
2. Stichwörter festlegen:Die Mühe lohnt sich
Eine zentrale Rolle spielen die Stichwörter.Notieren Sie sich acht oder zehn Stichwör-ter, die Ihr Angebot möglichst genau be-schreiben. Denken Sie dabei auch an alter-native Begriffe oder falsche Schreibweisenbei komplizierten Wörtern.
Besonders nützlich ist es, auch Bekann-te oder Kunden dazu zu befragen. BittenSie die hilfreichen Menschen aber nichteinfach, auf einem Blatt Papier einzelneStichwörter aufzuschreiben, sondern fra-gen Sie, welche Suchwortkombinationensie verwenden würden. Denn in der über-wiegenden Anzahl der Fälle geben Surferin eine Suchmaschine mehrere, miteinan-
Von Wolfgang Nefzger
Bitte melden: Unter der Adresse www.google.de/intl/de/webmasters infor-
miert Google über die Anmeldung von Websites beim Robot (Punkt 1)
030-33 205 02.12.2003 13:17 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 31
Suchmaschinen-EintragpGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 30 – S. 33
der verknüpfte Stichwörter ein, da ein ein-zelnes Stichwort meist zu viele unpassendeErgebnisse liefert.
Wenn Sie beispielsweise in einem On-line-Shop Tee verkaufen wollen, gehörenneben „Tee“ und verschiedenen bekanntenSorten auch „Shop“ und „Verkauf“ in dieListe. Ist Ihr Angebot regional begrenzt,zum Beispiel als Handwerker oder Dienst-leister, so ist auch der Ortsname oder dieRegion Pflicht. „Raumausstatter“ liefert alsSuchbegriff viel zu unscharfe Ergebnisse,mit „Raumausstatter München“ oder nochbesser „Raumausstatter Schwabing“ siehtes schon besser aus.
3. Suchmaschinen füttern:Überschrift und Text präparieren
Nun bauen Sie die Stichwörter in Ihre Web-Seiten ein. Am wichtigsten ist natürlich dieStartseite INDEX.HTM. Aber auch die übri-gen Seiten können Sie entsprechendnachrüsten. Eine Warnung vorweg: Über-
treiben Sie nicht. Widerste-hen Sie der Versuchung, Ih-re Homepage mit allenTricks und Kniffen mit die-sen Begriffen zuzupflastern.Im Web kursieren jede Men-ge Anleitungen, wie manganz sicher die vorderenPlätze in den Ergebnislistender Suchmaschinen erlangt.Die Robots sind aber so pro-grammiert, dass sie solchen„Unterschleif“ zu entdeckenversuchen. Im schlimmstenFall ignoriert ein Robot diegesamte Website. Beginnen
Sie mit dem Seitentitel (HTML-Tag „<title>“;ohne Anführungszeichen), den der Browser in seiner Titelzeile anzeigt (mehrzu HTML-Tags erfahren Sie 2 ab Seite 34. Zusätzlich verwenden etliche Suchma-schinen diesen Text als Überschrift in der Ergebnisliste.
Nicht übertreibenBeschreiben Sie knapp mit etwa acht Wor-ten den Inhalt der Homepage, bauen Siedie wichtigsten Stichwörter ein. Das Ganzesollte aber einen lesbaren Satz oder einMotto ergeben – und nicht nur eine An-sammlung von Stichwörtern sein.
Auch die Überschriften in der Web-Seite(mit den HTML-Tags „<h1>“, „<h2>“ und soweiter) sollten nach Möglichkeit Stichwör-ter enthalten. Im normalen Text verteilenSie wohldosiert ebenfalls Stichwörter, imSchnitt pro Satz etwa eines. Natürlich musssich das Stichwort sinnvoll in den Satz ein-fügen. Wenn Sie die Stichwörter gut ausge-
wählt haben, dürfte das kein Problem sein.Aber Vorsicht: Übersicht und Lesbarkeit derTexte dürfen nicht der Stichwortsucht zumOpfer fallen. Schließlich soll die Web-Seiteauch die Besucher überzeugen, und die in-teressieren sich nun mal nicht für eineSuchmaschinenoptimierung.
Um einzelne Schlagwörter für einen Ro-bot besonders interessant zu machen, he-ben Sie diese mit dem Tag „<strong>Begriff</strong>“ hervor. Das ist eine Betonung,die Browser üblicherweise fett darstellen,wodurch der Begriff auch für normale Be-sucher der Homepage hervorgehoben wird.Achten Sie allerdings darauf, dass die Lesbarkeit des Textes nicht darunter lei-det. Ein fett dargestelltes Wort pro Absatzreicht.
Ebenfalls Robot-freundlich sind Stich-wörter, die Sie als Text-Link formatieren.Dabei sollte es sich aber um echte Links miteiner gültigen Zieladresse handeln – sonstwerten manche Robots den Link als Moge-lei und ignorieren das Stichwort.
4. Versteckte Suchhilfe:Meta-Tags einfügen
Nur für den Robot gedacht sind die so ge-nannten Meta-Informationen im Kopf derHTML-Datei. Diese Texte bekommt der Sur-fer nie zu Gesicht, die Web-Browser stellenden Inhalt nicht dar. Der Robot liest dage-gen direkt die für ihn wichtigen Infos ausden Meta-Tags aus.
Zwischen „<head>“ und „</head>“ fügenSie mehrere Tags ein:
1. So funktionieren Suchmaschinen 302. Stichwörter festlegen 303. Suchmaschinen füttern 314. Meta-Tags einfügen 315. Mehrere Domains 326. Mehr Links auf die Homepage 327. Anmelden bei Suchmaschinen 33
KästenWeb-Kataloge: Anmelden lohnt sich 31Optimieren heißt auch vermeiden 33
Web-Kataloge: Anmelden lohnt sichEin Web-Katalog ist im Prinzip eine große Link-Liste, die nachKategorien sortiert ist. Web-Kataloge sehen nach außen wieSuchmaschinen aus, funktionieren aber ganz anders. Denndie Einträge erzeugt nicht ein Robot, vielmehr sortieren Men-schen die angemeldeten Homepages von Hand in die richtigeKategorie ein. Da ein Katalog nicht aktiv auf die Suche nachneuen Homepages geht, müssen Sie sich unbedingt selbstdort anmelden. Ob Sie Ihre Web-Site mit Stichwörtern undMeta-Tags optimiert haben, spielt hier keine Rolle.Bekannt sind vor allem die Kataloge von Yahoo (www.yahoo.de), Web.de (www.web.de), DMOZ (www.dmoz.de), Alles Klar(www.allesklar.de) und Dino Online (www.dino-online.de). Es lohnt sich, bei diesen Katalogeneine Anmeldung vorzunehmen. Zum einen nutzen viele Surfer die Kataloge als Suchhilfe, zumanderen bewertet Google Links in diesen Verzeichnissen besonders hoch.
Seitentitel: Ohne den und eine klare Beschreibung (im Bild bei Fundstelle
1) fällt Ihre Website in Suchmaschinen nicht auf (Punkt 2 und 3)
In der ersten Zeile tragen Sie bei „content“die Stichwörter (englisch: „keywords“) ein,jeweils durch ein Komma abgetrennt. DieListe darf beliebig lang sein, acht bis zehnStichwörter sollten Sie aber nur überschrei-ten, wenn Sie gute Gründe dafür haben.Das wäre etwa der Fall, wenn Ihre Websiteeinen so breiten Themenbereich abdeckt,dass zehn Stichwörter nicht reichen.
Die Beschreibung der Website formulie-ren Sie im Meta-Tag hinter „description“bei „content“ mit vollständigen Sätzen.Überschreiten Sie eine Länge von etwa 80Zeichen nicht. Diese Beschreibung zeigenviele Suchmaschinen in der Fundliste an.Google verwendet übrigens abweichend da-von einen Ausschnitt aus dem Text derWeb-Seite. Sie sollten also darauf achten,dass die ersten paar Textzeilen sich als all-gemeine Beschreibung eignen.
Stichwörter für mehrere SprachenWenn Sie getrennte Stichwörter für meh-rere Sprachen angeben wollen, so ergänzenSie das Attribut „language“:
Damit haben Sie eigene Stichwörter fürdeutsch (de) und englisch (en) hinterlegt.Die Kürzel für andere Sprachen und Län-der finden Sie zum Beispiel unter http://selfhtml.teamone.de. Allerdings kümmern
sich manche Suchmaschinen nicht um sol-che sprachspezifischen Angaben. DieseSuchmaschinen werfen alle Stichwörter ineinen Topf. Es gibt einfach keine Sprachzu-ordnung, also auch keine deutschen oderenglischen Stichwörter. Wichtig: Auch fürdie Angaben in den Meta-Tags gelten dieHTML-Umschreibungen für Sonderzei-chen. So tragen Sie etwa statt „ü“ „ü“ein (ohne Anführungszeichen). Weitere De-tails über HTML-Umschreibungen für Son-derzeichen finden Sie in dem bereits er-wähnten Artikel 2 ab Seite 34.
Wenn Sie sich die Arbeit mit den Meta-Tags erleichtern wollen, greifen Sie auf Spe-zial-Tools zurück. Dann müssen Sie nur dieTexte eintippen, das jeweilige Programm
Selber anmelden: Bei Altavista tragen Sie Ihre Domain samt Mailadresse ein. Die Grafik mit dem Submission Code
soll verhindern, dass Programme automatisch Seiten anmelden (Punkt 7)
Hilfe: Ein Spezialprogramm wie HTML bulk 4 hilft Ihnen beim Einfügen der Meta-Tags in Web-Seiten. Aus Meta-Tags
liest der Robot die für ihn wichtigen Infos aus. Das Tool bearbeitet beliebig viele HTML-Dateien auf einmal (Punkt 4)
baut die passenden HTML-Tags in die Web-Seiten ein. Mehr über Tools wie HTML bulklesen Sie 2ab Seite 120.
5. Mehrere Domains: Stichwörter unterbringen
Wenn Sie noch keine eigene Domain ha-ben, sollten Sie das schnellstens nachholen.Was dabei zu beachten ist, steht in denBeiträgen 2 ab Seite 10 und Seite 16. Zumeinen lässt sich eine kurze Domain leichterauf Briefpapier und Visitenkarten drucken.Zum anderen ist es bei vielen Suchmaschi-nen wichtig fürs Ranking, ob im Domain-Namen gesuchte Stichwörter vorkommen.
Typisch ist der Firmenname als Do-main, damit verschenken Sie aber Poten-zial. Viele Provider, wie Strato und 1&1, er-lauben ohne Aufpreis ein oder zwei zusätz-liche Domains für eine Homepage. Die zu-sätzlichen Domains leiten Surfer an IhreOriginaladresse weiter. Nutzen Sie das aus,und registrieren Sie Domains wie www.immobilien-muenchen.de oder www.tee-im-online-shop.de. Versuchen Sie, wichtige Stichwör-ter in der Domain unterzubringen. Auchlängere Domains sind kein Problem: Witzi-ge Einfälle wie www.willst-mich-mieten.de füreinen Anhängerverleih bleiben gut im Ge-dächtnis. Vermeiden Sie aber Monster-Do-mains mit einem Dutzend Stichwörtern –das riecht für Robots nach Betrug.
6. Adresse verbreiten: MehrLinks auf die Homepage
Die Optimierung der Web-Seiten ist damitabgeschlossen. Wie bereits erwähnt, bewertet Google jedoch darüber hinausauch, wie viele Links von anderen Domains
030-33 205 02.12.2003 13:18 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 33
Suchmaschinen-EintragpGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 30 – S. 33
auf Ihre Homepage zeigen (dies betrifftauch jede andere Web-Seite Ihrer Web-Prä-senz). Je mehr Links, desto mehr Bedeu-tung misst Google Ihrer Homepage zu. An-dere Suchmaschinen verwenden mittler-weile ähnliche Techniken. Sie sollten alsodafür sorgen, dass andere Web-Angebote Ih-re URL in ihre Link-Liste aufnehmen. Das istsowieso empfehlenswert, denn auch damitbringen Sie Surfer auf Ihre Seiten.
Vernünftige VerlinkungNatürlich muss die Verlinkung auch Sinnmachen. Als Handwerksbetrieb sollten Siebeispielsweise prüfen, ob die örtliche Kam-mer oder Innung einen eigenen Web-Auf-tritt mit Link-Liste hat. Auch viele Gemein-den pflegen auf ihrer Website eine Listemit lokalen Firmen.
Vielleicht haben Sie auch wichtige Lie-feranten oder Kunden, die eine eigene Sitemit Link-Liste ihr Eigen nennen. Oder esgibt für Ihr Hobby oder Ihre Branche einebesondere Portalseite – hier kommt es ganzauf den Einzelfall an. Web-Katalogegehören ebenfalls in diese Kategorie, mehrlesen Sie im 2 Kasten auf Seite 31.
7. Finger hoch: Anmelden bei Suchmaschinen
Nun müssen Sie den Robots mitteilen, dasses eine neue Homepage gibt. Die Robots fol-gen zwar selbständig Links auf bekanntenSeiten, um weitere Sites zu erreichen. Ir-gendwann findet ein Robot dann wahr-scheinlich zufällig Ihre Homepage – aberdas kann dauern, und zwar Jahre. Deshalb
teilen Sie den Suchmaschi-nen in einem Anmeldefor-mular Ihre Adresse mit.
Die Anmeldung sieht im-mer gleich aus: Sie gebendie Web-Adresse (inklusiveDateiname) und optional ei-ne Beschreibung an (wie imMeta-Tag <meta name="de-scription">). Nach der Über-mittlung der Adresse kannes allerdings zwei bis dreiWochen dauern, bis der Ro-bot Ihre Seiten besucht.Manche Robots lassen sichauch Monate Zeit. Schnellergeht es oft nur, wenn Sie fürden Eintrag in der Suchma-schine bezahlen.
Es macht durchaus Sinn,neben der Startseite weitereUnterseiten Ihres Auftrittsanzumelden. Heißer Kandi-dat ist eine Sitemap, also ein Index IhrerWebsite, der Links auf alle Unterseiten ent-hält. Damit stellen Sie sicher, dass der Ro-bot leicht alle Seiten Ihres Angebots findet.Ergänzend schaden zwei oder drei beson-ders wichtige Unterseiten nicht.
Wenige Anmeldungen genügenSie müssen Ihre Homepage nicht bei Hun-derten oder Tausenden von Suchmaschi-nen anmelden. Denn die Surfer benutzensowieso nur einige wenige. Für Deutsch-land genügen Altavista, Fireball, Google,Hotbot und Lycos. Die MSN-Suche (http://
search.msn.de) von Microsoft erlaubt leiderkeinen kostenlosen Eintrag – Sie müssenzahlen. Aufstrebende internationale Such-maschinen sind www.alltheweb.com undwww.teoma.com. Eine Liste von Suchmaschi-nen, die am häufigsten benutzt werden,finden Sie unter www.webhits.de/deutsch/ index.shtml?/deutsch/webstats.html.
Wenn Ihnen die Anmeldung per Handzu umständlich ist, hilft das kleine kosten-lose Tool Adaurl weiter. Hier tragen SieAdresse und Beschreibung sowie die Kate-gorie Ihre Homepage ein. Mehr über Ada-url lesen Sie im 2 Artikel ab Seite 120. Manche Suchmaschinen wie Altavista ver-langen für eine solche automatische An-meldung allerdings Geld. Ist es Ihnen dasnicht wert, müssen Sie bei diesen Suchma-schinen von Hand eintragen.
Mehr InfosInternet/Buch
Das ausschließlich werbefinanzierte E-Book
„Homepage Erfolg“ (www.homepage-erfolg.de)
von Stefan Rüttinger, das es auch in gedruckter
Form für 39,90 Euro (ISBN 3-833-006439) gibt,
bietet zahlreiche Infos, wie Sie Ihre Homepage
zu einem kommerziellen Erfolg führen oder Ihre
private Homepage mit Hilfe von Partnerschaf-
ten finanzieren. Zudem bietet das rundum
empfehlenswerte Buch Checklisten, Link-
Listen und rechtliche Tipps.
Optimieren heißt auch vermeiden
Einige Dinge gehören nicht auf eine Website, die für Robots optimiert ist. Sonst laufen Sie Gefahr,dass die Suchmaschinen Ihre Seiten nur unzureichend oder gar nicht indizieren.– Verwenden Sie keine Frames.– Vermeiden Sie Grafikbuttons als Links. Falls Sie nicht darauf verzichten wollen, tragen Sie beim
alt-Attribut im „<img>“-Tag die Textbezeichnung des Links ein.– Eine 3D-Grafik als Überschrift kann kein Robot lesen. Bleiben Sie bei Text, den Sie mit Casca-
ding Style Sheets (CSS) frei formatieren dürfen.– Auch Flash-Intros sind für Robots unleserlich.– Tragen Sie am Datei-Anfang keine umfangreichen Scripts oder CSS-Regeln ein. Robots lesen
nämlich oft nur bis zu einer bestimmten Zeilenzahl. Findet sich kein brauchbares Robot-Futter,fällt die Website durchs Raster. Lagern Sie Scripts und CSS-Angaben in externe Dateien aus.
– Prüfen Sie regelmäßig, ob alle site-internen Links noch funktionieren. Tote interne Links führeneventuell dazu, dass ein Robot die Analyse abbricht. Einige Tools, die Ihnen die Kontrolle derLinks abnehmen, finden Sie im 2 Artikel auf Seite 114.
– Stichwörter und Links in unsichtbarer Schrift (mit Hintergrundfarbe formatiert oder sehr kleinerText) interpretieren viele Robots als Betrugsversuch – und indizieren die Seite gar nicht.
Nummer eins: Die aktuelle Statistik von Webhits unterstreicht die überra-
gende Bedeutung von Google unter den Internet-Suchmaschinen (Punkt 7)
030-33 205 02.12.2003 13:18 Uhr Seite 5
PC-WELT SONDERHEFT 2/200434
Mit Spezialprogrammen lassen sich Web-Seiten weitgehend ohne HTML-Kenntnisse erstellen. Doch es gibt sehr gute Gründe,sich zumindest die wichtigsten HTML-Tags anzueignen.
Wichtige HTML-Tags
Mit Programmen wie Dreamweaver,Frontpage oder Golive gestalten Sie Web-Seiten, ohne dass Sie allzu sehr mit dem er-zeugten HTML-Code in Berührung kom-men (2 Seite 102). Aber elementare HTML-Kenntnisse sind auch heute noch nützlich.Handgemachtes HTML ist meist einfachund elegant, lädt auch dann schnell, wennder Surfer mit dem Modem im Internet un-terwegs ist, und erleichtert das Fein-Tu-ning, wenn die Seite mal nicht ganz so aus-sieht, wie Sie sich das vorgestellt hatten.
Wenn HTML im Ruf steht, kompliziertund undurchsichtig zu sein, so sind dieWYSIWYG-Editoren (What You See Is WhatYou Get), bei denen Sie das aktuelle Projektin einem extra Fenster immer so sehen, wiees Besucher der Site später auch sehen wer-den, nicht ganz unschuldig daran. Beson-ders ältere Versionen von Frontpage er-zeugten einen unnötig aufgequollenen, oh-ne Hilfsmittel kaum nachzuvollziehendenHTML-Code, und wer einmal einen Blickdarauf geworfen hatte, gab es schnell auf,etwas daran verbessern zu wollen.
HTML-Codierung per Hand stellt keinegroßen Ansprüche, was die benötigte Soft-ware betrifft, ein simpler Text-Editor wieWordpad reicht. Weniger spartanisch sindHTML-Editoren wie die Shareware-Lösun-gen Super HTML (für Windows 95/98, NT,2000 und XP, 49,95 Euro, Download unterwww.superhtml.de, 2 Seite 110) oder 40tudeHTML (für Windows 95/98, 2000 und XP, 35Dollar, Download unter www.40tude.com).
Sie heben die Struktur des Codes farb-lich hervor, ersparen mit Assistenten unnö-tige Schreibarbeit und bewahren vor Ein-gabefehlern. Auch stellen sie Infos zu deneinzelnen HTML-Tags bereit (2 Bild oben).Lernen Sie hier die wichtigsten HTML-Tagskennen. Sie werden es nicht bereuen.
1. Tags und Attribute:Markierungen und Beschreibungen
Eine HTML-Seite besteht aus Text und Mar-ken (englisch „tags“). Die HTML-Tags kenn-zeichnen einzelne Textabschnitte als ge-wöhnlichen Fließtext, Überschriften, Ta-bellen oder Verweise auf Bilder und andere
Seiten im Web. Ein Tag wird in die spitzenKlammern „<“ und „>“ (ohne Anführungs-zeichen) eingeschlossen und tritt meistpaarweise als Start- und End-Tag auf, wobeiman den End-Tag am vorangestelltenSchrägstrich erkennt. So erzeugen Sie bei-spielsweise einen Absatz, indem Sie einenText in die Tags „<p>“ und „</p>“ (jeweilsohne Anführungszeichen) einschließen:
<p>Dies ist ein Absatz</p>
Einige wenige Tags kommen ohne End-Tagaus, etwa „<br>“, das ein Zeilenende er-zeugt. Da in XHTML, dem HTML-Standardder Zukunft, solche einzelnen Tags nichtmehr erlaubt sind, sollten Sie sie schonheute mit nachgestelltem Schrägstrichschreiben – also etwa „<br />“: Der Tag istdann gleichzeitig Start- und End-Tag.
Viele Tags haben Attribute, die zwischenden spitzen Klammern stehen und die Be-deutung des Tags näher beschreiben. So be-stimmen Sie mit dem Attribut „align“ dieAusrichtung der Zeilen eines Absatzes:
<p align="center">Dies istein zentrierter Absatz.
</p>
Jedes Attribut besteht aus einem Schlüssel-wort wie „align“, dem ein in Anführungs-zeichen eingeschlossener Wert zugewiesenwird. Jeder Start-Tag kann mehrere solcherAttribute haben.
2. Head und Body:das nötige Grundgerüst
Anfang und Ende jeder HTML-Datei solltendie Tags „<html>“ und „</html>“ sein. Da-zwischen finden Kopf und Rumpf der SeitePlatz. In den Kopfteil, eingeschlossen in„<head>“ und „</head>“, gehören Informa-tionen zur Seite selbst, der Rumpf zwi-schen „<body>“ und „</body>“ beinhaltetden eigentlichen Seiteninhalt.
Das wichtigste Kopfelement ist der zwi-schen „<title>“ und „</title>“ eingeschlos-sene Titel der Seite, den Anwender von WY-SIWYG-Editoren oft einzutragen vergessen– kein Wunder, dass Tausende von Web-Sei-ten zu den unterschiedlichsten Themen„Willkommen bei Adobe GoLive“ heißen.
Mit „<meta>“-Tags kann man viele wei-tere Angaben zur Seite eintragen, zumin-dest sollten Sie deren MIME-Typ und denZeichensatz – üblicherweise ISO Latin-1 –vorgeben (2 Kasten „Entities für Umlaute
Von Michael J. Hußmann
034-37 207.qua 02.12.2003 13:31 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 35
HTML-TagspGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 34 – S. 37
und andere Sonderzeichen“). Das Grund-gerüst einer HTML-Seite sieht dann so aus:
<html><head><title>Hier soll der Titelder Seite stehen</title>
Die Bedeutung von „<meta>“-Tags, dieSchlüsselwörter zur Beschreibung der Sei-te für Suchmaschinen definieren, wirdhäufig überschätzt. Suchmaschinen orien-tieren sich tatsächlich mehr am Inhalt ei-ner Seite als an den Schlüsselwörtern.
Dennoch sollten Sie identifizierendeSchlüsselwörter angeben, wenn die Start-seite der Website wenig von Suchmaschi-nen verwertbaren Text enthält – das giltfür Seiten mit Frames ebenso wie für Sites,die überwiegend mit Flash arbeiten (2 Sei-te 30). Ein <meta>-Tag mit Schlüsselwör-tern hat die Form
Die Bausteine, aus denen Sie eine HTML-Sei-te aufbauen, sind Block- oder Inline-Ele-mente. Blockelemente stehen normaler-weise untereinander, lassen sich aber auchmit Cascading Style Sheets (CSS) beliebigauf einer Seite positionieren (2 Beitrag abSeite 80). Inline-Elemente fließen mit demText; an welcher Stelle sie stehen, hängt un-ter anderem vom Zeilenumbruch ab.
Textblöcke sind durchweg entweder in„<p>“ und „</p>“ eingeschlossene Absätzeoder Überschriften, die Sie durch Tags wie„<h3>“ und „</h3>“ klammern. Die Zahlzwischen 1 und 7 steht für den Rang derÜberschrift: „<h1>“ markiert eine Kapitel-überschrift, „<h7>“ eine Überschrift eineskleineren Absatzes. Mit dem align-Attributlegen Sie die Textausrichtung von Absätzenoder Überschriften fest, die ohne weitereKennzeichnung linksbündig wären:
<p align="center">Ein zentrierterAbsatz.</p>
<p align="right">Ein rechtsbündiger Absatz.</p>
<p align="justify">Ein im Blocksatz ausgerich-teter Absatz.</p>
Um eine Zeile zu beenden, ohne einen neu-en Absatz zu beginnen, verwenden Sie denTag „<br />“. Auch zusätzliche Leerzeilenlassen sich so einfügen.
4. Textstil bestimmen:So geht’s
Innerhalb eines Textblockskönnen Sie den Textstil mit Inline-Tags bestimmen.„<b>“und „</b>“ fetten deneingeschlossenen Text, „<i>“und „</i>“ stellen ihnschräg. „<sup>“ und„</sup>“ erzeugen hochge-stellten, „<sub>“ und„</sub>“ tiefgestellten Text;mit „<big>“ und „<small>“vergrößern oder verkleinernSie den Text, mit „<strong>“heben Sie Textpassagen her-vor. Die früher beliebten„<font>“-Tags, mit denenman Schriftart und -größe
Selbständig: HTML-Editoren vereinfachen das Einfügen von Bildern mit
„<img>“-Tags und erzeugen selbsttätig die richtigen Attributwerte (Punkt 5)
Tabelle als unsichtbarerSetzkastenBei einer Tabelle können Sie die Dicke desRahmens (in der Abbildung rot), den Ab-stand der Zellen zum Rahmen und vonein-ander (blau) sowie den Abstand zwischenZellenrand und Inhalt (grün) getrenntwählen. Mit dem Attribut „colspan“ las-sen sich mehrere Zellen einer Spalte (inder Abbildung 1 und 2 in der ersten und 2 und 3 in der dritten Zeile) ebenso ver-binden wie auch untereinander stehendeZellen mit dem Attribut „rowspan“ (hierdie drei Zellen der vierten Spalte).
Inhalt Seite
1. Tags und Attribute 342. Head und Body 343. Block- und Inline-Elemente 354. Textstil bestimmen 355. Bilder einbetten 356. Richtig verweisen 367. Texte und Bilder in Tabellen 368. Div und Span 37
KästenTabelle als unsichtbarer Setzkasten 35Entities für Umlaute und andere Sonderzeichen 36Das müssen Sie bei URLs beachten 37
wählte, trugen viel zur Unübersichtlichkeitdes HTML-Codes bei, da man jedesTextstückchen zwischen zwei Tags in„<font>“- und „</font>“-Tags einschließenmusste. Heute benutzt man besser Casca-ding Style Sheets, um etwa allen „<h3>“-Überschriften oder jedem von „<p>“ und„</p>“ begrenzten Text eine bestimmteSchrift, Schriftgröße und einen bestimm-ten Stil zuzuordnen.
5. Bilder einbetten:Darauf sollten Sie achten
Möchten Sie JPEG- oder GIF-Bilder auf einerSeite einbetten, benutzen Sie den „<img>“-Tag, der kein End-Tag braucht (2 Abbil-dung unten). Ein Attribut „src“ nennt dieURL des einzubettenden Bildes und mussstets vorhanden sein (2 Kasten „Das müs-sen Sie bei URLs beachten“). Auch ein Attri-but „alt“, das eine alternative Textbeschrei-
bung für den Fall bereithält, dass der Brow-ser das Bild nicht lädt, sollten Sie immerangeben. Wenn Sie die Breite und Höhe desBildes in Pixeln vorgeben, kann der Brow-ser bereits das Layout der Seite berechnen,bevor das Bild geladen ist:
Verweise auf andere HTML-Seiten erzeugenSie mit „<a>“- und „</a>“-Tags, die den Textoder die Grafik einschließen, die als Linkdienen sollen. Mit dem obligatorischen At-tribut „href“ geben Sie die URL der Seite an,auf die der Link verweist:
<a href="seite_zwei.htm">Klick mich!</a>
Statt des Textes zwischen dem Start- undEnd-Tag können Sie auch über einen<img>-Tag eine Grafik einbinden, die alsLink dienen soll. Mit dem Attribut „title“fügen Sie dem Link einen erklärenden Textbei, der vom Browser eingeblendet wird, so-bald der Besucher der Web-Seite mit demMauszeiger darüber fährt:
<a href="seite_zwei. htm" title="Hier geht es weiter">Klick mich!</a>
Wenn der Besucher einen Link anklickt,öffnet der Browser die neue Seite im selbenFenster. Das ist das Standardverhalten, so-fern man nichts anderes explizit codierthat. Dieses Verhalten können Sie mit demAttribut „target“ ändern: Setzen Sie „tar-get=_blank“ (ohne Anführungszeichen),öffnet der Browser mit jedem Klick ein neu-es Fenster, und die ursprüngliche Seitebleibt weiterhin geladen.
Statt „_blank“ können Sie auch einenbeliebigen Namen angeben, und wennmehrere Links auf dasselbe Zielfenster ver-weisen, wird immer dasselbe Fenster zurDarstellung des Links benutzt: Beim erstenKlick auf einen Link mit einem benanntenTarget öffnet sich ein neues Fenster, undfür alle weiteren Links mit demselben Tar-get greift der Browser dann auf dieses Fens-ter zurück. Auf diese Weise verhindern Sie,dass sich nach dem Anklicken mehrererLinks immer neue Fenster öffnen.
So könnten Sie etwa auf einer Seite Vor-schaubilder einer Fotogalerie zeigen, wobeiein Klick auf eines der verkleinerten Vor-schaubilder eine hoch aufgelöste Version
des Bildes öffnet. Geben Sie als Ziel des Ver-weises immer denselben Namen
an, so wird neben der Vorschauseite stetsnur ein weiteres Fenster geöffnet sein, dasdie hoch aufgelöste Version des zuletzt an-geklickten Vorschaubildes zeigt. Wichtig:Der Name verweist auf das Fenster, nichtauf das Bild. „Target“ gibt an, wo der Brow-ser das Bild oder die Seite anzeigen soll.
7. Texte und Bilder in Tabellen:Das Setzkastenprinzip
Der „<table>“-Tag war in HTML ursprüng-lich eingeführt worden, um Tabellen set-zen zu können. Setzt man allerdings dieDicke der Trennlinien einer Tabelle aufnull, so bleibt nurmehr ein unsichtbaresRaster, eine Art Setzkasten übrig, in demsich beliebige Inhalte wie Texte oder Bilderplatzieren lassen.
Eine Tabelle besteht aus Zeilen, einge-schlossen in „<tr>“ und „</tr>“, sowie Zel-len, die durch „<td>“ und „</td>“ markiertwerden. Normalerweise enthält jede Zeiledie gleiche Zahl von Zellen, die bündig un-tereinander ausgerichtet werden (2 Abbil-dung oben).
Das Aussehen einer Tabelle wird durchdrei Attribute bestimmt (2 Kasten „Tabelleals unsichtbarer Setzkasten“): „border“ gibtdie Dicke der Trennlinien vor; bei einerDicke von null wird das Raster aus Zeilenund Spalten unsichtbar. Durch „cellspa-cing“ lässt sich der Abstand zwischen denZellen vergrößern, während das „cellpad-ding“ eine „Auspolsterung“ zwischen derZellenbegrenzung und dem darin enthal-tenen Objekt frei lässt. Auf diese Weise kön-
Einfach: Mit dem Tabellenassistenten des Editors lässt
sich die Tabellen-Grundstruktur erzeugen (Punkt 7)
Entities für Umlaute und andere SonderzeichenHTML benutzt normalerweise den Ascii-Code, der kei-ne Umlaute oder sonstige Sonderzeichen kennt. Siekönnen zwar mit einem „<meta>“-Tag einen Code wieISO Latin-1 angeben und dann die darin verfügbarenZeichen verwenden. Sicherer ist es jedoch, für alleSymbole außerhalb des Ascii-Zeichensatzes die sogenannten HTML-Entities zu verwenden, die immermit „&“ beginnen und auf „;“enden (jeweils ohneAnführungszeichen). Das Währungssymbol für denEuro erzeugen Sie beispielsweise mit „€“. Auchdie Zeichen „<“, „>“ und „&“, die im HTML-Code einebesondere Bedeutung haben, müssen Sie im gewöhnlichen Text als Entities codieren, damit sieder Browser nicht für HTML-Code hält. Manche HTML-Editoren erzeugen diese Entities automa-tisch, wenn Sie Fließtext zwischen den Tags eintippen. Die wichtigsten Entities sind:
HTML-TagspGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 34 – S. 37
nen Sie beispielsweise verhindern, dassText in einer Tabellenzelle unmittelbar andie Begrenzungslinien stößt. Die abgebil-dete Tabelle ist mit einem „<table>“-Tag de-finiert, der „border“, „cellspacing“ und„cellpadding“ auf einen Wert von 16 Pixelnund die Breite der Tabelle auf die volle ver-fügbare Fensterbreite setzt:
Hinter dem „<table>“-Tag und vor der ers-ten Zeile lässt sich mit „<col>“-Tags die Brei-te der untereinander stehenden Zellen be-stimmen. Beispielsweise definiert
eine Tabelle mit drei Spalten, wobei dieBreiten der ersten und dritten Spalte einViertel der Gesamtbreite und die Breite derzweiten Spalte zwei Viertel der Gesamt-breite betragen soll. Statt Anteilen an derGesamtbreite können Sie auch Prozentan-gaben oder exakte Pixelwerte verwenden.
Das Tabellenraster ist nichtauf die simple Grundstruk-tur aus Zeilen und Spaltenbeschränkt; wie in einemrichtigen Setzkasten kann esauch in einer Tabelle größe-re Zellen geben, die mehrereSpalten oder Zeilen über-spannen. Die Attribute „row-span“ und „colspan“ einerZelle geben an, wie viele Zei-len und Spalten des Grund-rasters von der Zelle belegtsind (2 Bild rechts). Ist „row-span“ größer als 1, über-spannt die Zelle die entspre-chende Anzahl von Zeilen darunter; eineZelle mit einem „colspan“-Wert größer 1überspannt mehrere Spalten rechts davon.
Mit diesen beiden Attributen schaffenSie bei Bedarf sehr flexible Unterteilungeneiner Seite, die das Raster, das der Tabellezu Grunde liegt, kaum noch erahnen las-sen. Werden diese beiden Attribute aus-ufernd eingesetzt, so verkompliziert dies al-lerdings die Berechnung des Layouts imBrowser. Daher ist es häufig sinnvoll, eineallzu komplexe Tabelle in mehrere einzel-ne Tabellen zu zerlegen.
8. Div und Span:Elemente ohne Eigenschaften
Vergleichsweise jungen Datums in der Ent-wicklungsgeschichte von HTML sind dieTags „<div>“ und „<span>“. Mit „<div>“ und„</div>“ erzeugen Sie ein Blockelement oh-ne besondere Eigenschaften; entsprechendbilden Sie mit „<span>“ und „</span>“ Inli-ne-Elemente ohne weitere Eigenschaften.
Die Bedeutung dieser Tags liegt darin,dass Sie in Cascading Style Sheets (CSS) de-ren Eigenschaften definieren können. Soschließen Sie etwa eine Navigationsleiste in„<div>“-Tags ein und positionieren sie mitStyle Sheets auf der Seite. Mit CSS lässt sichauch ein besonderer Textstil wie eine Her-vorhebung durch einen farbigen Hinter-grund als Unterklasse von „<span>“ defi-nieren: Div und Span sind quasi Begren-zungselemente, innerhalb derer CSS zumEinsatz kommen. Span besagt: „Hierkommt Fließtext“; Div steht für „Hierkommt ein Block“. Diese Tags besagen fürsich genommen also fast nichts, aber denso definierten Elementen können Sie dannmit CSS beliebige Eigenschaften geben.
span.textmarker {background-color: #ffff33;}
Im HTML-Code können Sie nun auf diesenTextstil zurückgreifen:
<p>Dieses <span class="textmarker">Wort</span> ist hervorgehoben.</p>
Auf diese Weise lässt sich das Baukastensys-tem von HTML beliebig um neuartigeBlock- und Inline-Elemente erweitern.
Gitternetz ade: Mit den Attributen „colspan“ und „rowspan“ können Sie
Zellen mit rechts davon oder darunter liegenden Zellen vereinigen (Punkt 7)
Das müssen Sie bei URLs beachten
Sowohl als Ziel von Verweisen als auch bei der Einbindung von Bildern und Multimedia-Elemen-ten gibt man die entsprechende Adresse als „Uniform Resource Locator“ (URL) an. Bei Verwei-sen auf Seiten außerhalb der eigenen Website muss die URL vollständig sein – beispielsweise
http://pluto.ksi.edu/~cyh/ba519/Berners.html
Bei Verweisen auf Seiten oder Bilder auf der eigenen Site reicht es, deren Dateinamen anzu-geben – vorausgesetzt, sie liegen im selben Verzeichnis wie die Seite, von der aus Sie daraufverweisen:
<a href="seite_zwei.htm">Klick mich!</a>
Falls die Seite oder das Bild in einem Unterverzeichnis liegt, geben Sie zusätzlich auch diesesan:
<img src="bilder/meinbild.jpg" />
Mit einem vorangestellten Schrägstrich geben Sie die Adresse ausgehend von der Startseitean. Der Verweis
<a href="/seite_zwei.htm">Klick mich!</a>
bezieht sich also immer auf eine Datei auf der obersten Ebene der Website, auch wenn die dar-auf verweisende Seite in einem Unterverzeichnis liegt.
034-37 207.qua 02.12.2003 13:33 Uhr Seite 5
PC-WELT SONDERHEFT 2/200438
Fehler bei einer Web-Seite haben oft eine ganz einfache Ursache.Aber auf die muss man erst mal kommen. Wir sagen Ihnen, woSie suchen müssen und wie Sie Fehler vermeiden können.
Fehlerfahndung
Kleine Fehler – große Wirkung: Oft lie-gen die Probleme bei der Darstellung vonWeb-Seiten im Browser an einzelnen Buch-staben oder Befehlen.
1. Der Fehlerklassiker: Groß- und Kleinschreibung
Es gibt wohl kaum einen Webmaster, demnoch kein Ladefehler wegen falscherSchreibweise des Dateinamens passiert ist.Sämtliche Windows-Betriebssysteme un-terscheiden nicht zwischen großen undkleinen Buchstaben im Dateinamen. DerName „FotoGalerie.HTM“ ist völlig gleich-wertig zu „fotogalerie.htm“ (jeweils ohneAnführungszeichen).
Die meisten Webserver arbeiten jedochmit Linux oder einer anderen Unix-Varian-te. Und diese Betriebssysteme unterschei-den sehr wohl ein „A“ von einem „a“. WennSie also die HTML-Datei „FotoGalerie.HTM“auf den Server kopieren, in einem Linkaber href="fotogalerie.htm" steht, funktio-niert der Link nicht. Mehr zum Thema
HTML-Grundlagen finden Sie in dem Bei-trag 2 ab Seite 34. Um dieses Problem vonvornherein zu vermeiden, sollten Siegrundsätzlich alle Dateinamen komplettklein oder komplett groß schreiben. Dabeihilft Ihnen die Freeware Gross-Klein 2.6afür Windows 98/ME, 2000 und XP (1,9 MB,unter www.lab1.de und auf CHeft-CD).
Eine Ausnahme gibt es: Java-Applets (Da-tei-Erweiterungen .class und .Class) enthal-ten intern den Namen der Applet-Datei –inklusive Groß und Kleinschreibung.Wenn Sie die Schreibweise des Dateina-mens ändern, funktioniert das Applet aufdem Webserver nicht mehr. Das Tool Gross-Klein berücksichtigt diese Ausnahme.
2. Cascading Stylesheets:Doppelpunkt beachten
Bei HTML-Tags geben Sie den Wert eines At-tributs mit einem Gleichheitszeichen an,also beispielsweise:
<body background="muster.gif">
Bei Angaben in Cascading Stylesheets (CSS)kommt stattdessen ein Doppelpunkt zumEinsatz, wie zum Beispiel:
Dabei hat man sich schnell vertippt undstatt des Doppelpunkts das gewohnteGleichheitszeichen eingesetzt. Dumm: DerInternet Explorer schluckt diesen Fehlerund interpretiert die CSS-Angabe trotzdemrichtig (oder auch nicht, 2 nächster Ab-schnitt). Netscape/Mozilla dagegen ignorie-ren die komplette Angabe innerhalb der ge-schweiften Klammern. Auch Opera ist hiersehr kritisch.
Der erste Verdacht ist logischerweise:Netscape und Opera unterstützen die CSS-Angaben nicht. Auf die Idee, dass nur einGleichheitszeichen falsch gesetzt ist, mussman erst einmal kommen. Weitere wichti-ge Hinweise über CSS enthält der Work-shop ab 2Seite 80.
3. Alles wird anders: Standards Compliant Mode
Browser haben sich lange Zeit nicht um dieöffentlichen Standards des World WideWeb gekümmert. Eine Spezialität der älte-ren Browser-Versionen ist es, Fehler im Code von Web-Seiten stillschweigend aus-zubügeln. Hier verhalten sich Netscape 7,Mozilla und Internet Explorer 6 anders: Sieverweigern die Zusammenarbeit und igno-
Von Wolfgang Nefzger
Gross-Klein 2.6a: Damit wandeln Sie rasch die Datei-
rieren falsche Befehle – mit teilweise fata-len Folgen für die Darstellung Ihrer Web-Seiten. Das betrifft vor allem ungenauenoder falschen HTML- und CSS-Code.
Der Unterschied kann je nach Web-Seitebeträchtlich sein, wie die Gegenüberstel-lung in den beiden Bildern rechts zeigt.Beim IE nennt sich die strenge VersionStandards Compliant Mode, die wenigerstrenge Kompatibilitätsmodus.
4. Eine Zeile entscheidet:DOCTYPE oder nicht
Die gestrengen neuen Browser lassen sichallerdings milder stimmen. Die strengenRegeln gelten nämlich nur, wenn in IhrerHTML-Datei ein ganz bestimmter Text inder ersten Zeile steht. Laut Standard fängteine HTML-Datei nämlich nicht mit <html>an, sondern mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Diese !DOCTYPE-Deklaration legt fest, wel-che HTML-Version und HTML-Variante dienachfolgende Web-Seite verwendet (die Document Type Definition, kurz DTD). Diegenaue Bedeutung des Inhalts muss Sienicht kümmern.
Die Faustregel hierzu: Ist die !DOCTYPE-Zeile vorhanden, dann sind die neuenBrowser streng. Fehlt die Zeile, dann ver-bessern die Browser wie bisher viele kleineFehler automatisch. Denn der Browserkann dann ja nicht wissen, welchen Stan-dard er voraussetzen soll.
Die einfache Lösungsmöglichkeit be-steht also darin, mit einem HTML-Editordie !DOCTYPE-Zeile zu löschen. Besser ist esallerdings, die fehlerhaften Stellen in den
HTML- und CSS-Dateien auszubessern. Diewichtigsten HTML-Unterschiede betreffenvor allem Kleinigkeiten, die aber große Aus-wirkungen haben.
5. HTML-Unterschiede: DerHintergrund ist größer
In älteren Versionen des Internet Explorersentsprach der <body>-Tag dem komplettenHintergrund einer Web-Seite. Auf diesemHintergrund stellte der Browser den Inhaltdes Dokuments dar. Die Größe des Hinter-grunds legt das Browser-Fenster fest. ImGegensatz dazu entspricht der <html>-Tagim strengen Modus dem kompletten Sei-tenhintergrund.
Sie können die Größe des <body>-Be-reichs über CSS-Eigenschaften sogar nachBelieben setzen. Sie sollten daher ein Hin-tergrundbild oder eine Hintergrundfarbein <body> und <html> festlegen. Im rech-ten Teil der Abbildung oben ist der Fehlerals roter Rand deutlich zu sehen.
Über das Attribut scroll legen Sie fest, obder Browser Rollbalken anzeigt oder nicht.Im strengen Modus dagegen müssen Siedas Attribut in <html> eintragen.
6. CSS: Der Fehlersteckt im Detail
Die zweite Gruppe von Unterschieden be-zieht sich auf die Interpretation von Casca-ding Stylesheets (CSS, siehe auch den 2Bei-trag ab Seite 80). Dadurch können Style-sheets, die bisher im Kompatibilitätsmoduseinwandfrei funktioniert haben, plötzlichunvorhersehbare Ergebnisse liefern.
Der Internet Explorer akzeptiert imKompatibilitätsmodus die Kommentarzei-chen <!-- und --> von HTML auch innerhalbvon CSS-Bereichen. Im strengen Modussind nur noch die CSS-Kommentarzeichen/* und */ erlaubt.
SammeleigenschaftenGeben Sie bei Sammeleigenschaften wiemargin oder font einen falschen Wert an,interpretiert der Internet Explorer die Wer-te bis zum falschen Wert korrekt. Laut CSS-Standard sollte der Browser aber die Sam-meleigenschaft komplett ignorieren. Die-ses Verhalten gilt im strengen Modus.
Laut CSS-Standard müssen Sie außer-dem bei der font-Eigenschaft mindestensdie Werte für font-size und font-style ange-ben. Im strengen Modus ist konsequenter-weise zum Beispiel die Deklaration font:14pt; ungültig, es müsste font: 14pt nor-mal; notiert werden. Fehlt das führendeZeichen # in einer RGB-Farbangabe wie co-lor: #FF0000, ignoriert der Browser imstrengen Modus die Farbangabe komplett.
Viele CSS-Eigenschaften erwarten alsWert eine Längenangabe, für die CSS eineReihe von festen Einheiten erlaubt (zumBeispiel px für Pixel oder mm für Millime-ter). Der Microsoft-Bowser interpretiert ei-ne Längenangabe ohne Einheit wie width:600; automatisch als Pixel (width: 600px).Im strengen Modus ignoriert der InternetExplorer 6 die Deklaration.
SchlüsselwörterSchlüsselwörter wie die Farbnamen (redund so weiter) dürfen nach CSS nicht in An-führungszeichen stehen. Sonst interpre-tiert sie der Browser als Zeichenkette.
Nach CSS darf der Wert eines class- oderid-Attributs nicht mit einer Ziffer (0–9) be-ginnen. <img class="0rand"> ist also für CSSeine ungültige Schreibweise, die sich nichtals Klassenselektor einsetzen lässt. Zudemwird nach HTML 4.0 Groß- und Klein-schreibung in beiden Attributwerten un-terschieden. Der Internet Explorer akzep-tiert beide Problemfälle – allerdings nichtim strengen Modus.
Fehlerquelle SonderzeichenZum Komplex Dateinamen gehören nebender Groß- und Kleinschreibung (2 Punkt1) auch Sonderzeichen wie ö, ä, ß oderdas Leerzeichen. In Dateinamen solltenSie darauf verzichten und nur die Buch-staben a bis z sowie Zahlen und den Bin-destrich verwenden. Damit sollten alleWebserver klarkommen.
Code-Fehler: Ältere Browser korrigieren Fehler im Code von Web-Seiten oft stillschweigend (links). Die neue Brow-
ser-Generation macht dieselben Code-Fehler gnadenlos sichtbar, rechts etwa am roten Rand erkennbar (Punkt 3)
038-39 204 02.12.2003 13:39 Uhr Seite 3
PC-WELT SONDERHEFT 2/200440
In unserem Glossar finden Sie die wichtigsten Begriffe zum Thema Homepage kurz und bündig erklärt. Egal, welche Informationen Sie suchen – hier sind Sie richtig.
Homepage-Lexikon
Applet
Ein Applet ist ein kleines Programm-Mo-dul, das in Java programmiert ist und sichin Web-Seiten einbauen lässt. Der Web-server überträgt das Applet an den 2 Browser auf Ihrem PC. Dort wird das Pro-gramm dann in einer sicheren Umgebung(Sandbox) ausgeführt. Java-Applets führenkomplexe Funktionen aus, etwa ein Menü-system oder auch ein Action-Spiel.
AttributAngaben in HTML-Tags (2HTML, 2 Tag), diedas Verhalten des Browsers steuern, heißenAttribut. Der Tag <img> beispielsweise ent-hält immer die Angabe, welches Bild derBrowser anzeigen soll: <img src="bild.gif">.Es gibt noch weitere optionale Attributewie align=, border= oder low src=. Für vieleAttribute ist der CSS-Befehl (2 CSS) eine mo-dernere und leistungsfähigere Alternativezum HTML-Tag.
Blinde Tabelle
HTML ist nur beschränkt dazu in der Lage,einen Text oder ein Bild an einer bestimm-ten Stelle zu platzieren. Der Browser gestal-tet den Aufbau einer Web-Seite recht frei.Abhilfe schaffen Tabellen. Jede ihrer Zellenkann Text, Bilder oder wieder eine Tabelleaufnehmen. So zwingt der Homepage-Pro-grammierer den 2 Browser, Elemente ne-beneinander oder untereinander darzu-stellen. Da solche Layout-Tabellen unsicht-bare Ränder haben, heißen sie auch blindeTabellen. Als Alternative bietet 2 CSS die sogenannte Positionierung, die alle moder-nen Browser unterstützen.
BrowserDie Informationen im Web sind in HTML-Dateien gespeichert. Der Browser holt sichdiese Dateien aus dem Internet und zeigtden Inhalt formatiert auf dem Bildschirmdes Anwenders an. Das englische Wort
„browse“ bedeutet auf Deutsch soviel wieschmökern, also im Web blättern. Micro-softs Internet Explorer hat weit über 90Prozent Marktanteil. Daneben gibt es abernoch andere Browser wie Netscape (iden-tisch mit Mozilla) und Opera. Für Linux-PCsund Mac-Computer existieren ebenfallsweitere Browser. Damit möglichst viele Be-sucher die Web-Seiten einwandfrei sehenkönnen, sollte ihr Programmierer sie im-mer mit mehreren Browsern testen.
CGI Die Programmierschnittstelle CommonGateway Interface (CGI) gibt es nur auf den2Webservern im Internet. Mit CGI kann ein2 Browser etwa auf Datenbanken zugreifen,Gästebücher verwalten oder 2 Cookies set-zen. Allerdings erlauben die meisten On-line-Dienste wie AOL oder T-Online den Ein-satz von CGI aus Sicherheitsgründen nichtoder beschränken ihn auf einige vordefi-nierte Scripts. Zudem ist es recht kompli-ziert, CGI-Scripts zu schreiben.
ChatDas englische Wort „chat“ bedeutet so vielwie sich unterhalten oder ratschen. Überdas Web funktioniert das so ähnlich wie ei-ne Konferenzschaltung am Telefon: Sie tip-pen einen Satz ein, den sofort alle anderenTeilnehmer der Chat-Runde sehen. Die kön-nen direkt darauf antworten. Im Web gibtes Chat-Seiten (etwa bei www.allegra.de), dieauf 2Java basieren. Um an diesen Chats teil-zunehmen, braucht man nur einen Java-fähigen 2Browser. Der 2Webspace-Provider1&1 (www.1und1.de) beispielsweise bietet sei-nen Kunden ein fertiges Chat-Modul zumEinbau auf eigene Seiten ein.
Cookie Ein Cookie (englisch für Keks) ist eine klei-ne Textdatei, die ein 2Webserver auf demAnwender-PC speichert. So weiß der Serverbeim nächsten Besuch, dass dieser Anwen-der schon mal da war und welche Seiten erbetrachtet hat. Er kann ihn dann etwa mitNamen begrüßen oder eine Web-Seite an-zeigen, die ihn interessieren könnte.
CSSDie Cascading Style Sheets (CSS) sind wie 2 HTML ein Standard des 2W3C. Die CSS-Befehle dienen dazu, die Gestaltung einerWeb-Seite – etwa Schrift, Farben oder Plat-zierung von Elementen wie Bildern – zusteuern. Das W3C empfiehlt, in HTML-Da-
Von Wolfgang Nefzger
040-43 208.qua 02.12.2003 13:59 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 41
Homepage-LexikonpGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 40 – S. 43
teien nur die Struktur der Web-Seite mitÜberschriften, Absätzen und so weiter fest-zulegen. Die Gestaltung sollen dagegenCSS-Befehle direkt in der HTML-Datei oderin einer separaten Datei übernehmen. Dieaktuellen Browser unterstützen ausnahms-los fast alle Befehle von CSS Level 2, der Ein-satz ist stark zu empfehlen.
Domain Eine eindeutige Adresse im Internet wie„www.pcwelt.de“ ist eine Domain. Über die-se Adresse ist eine Homepage erreichbar.Um eine eigene Domain zu bekommen,müssen Sie Platz bei einem 2Webspace-Pro-vider mieten. Bekannte Webspace-Providersind 1&1 (www.1und1.de) oder Strato (www.strato.de). Die Domain wird auf Ihren Namenregistriert, Sie haben auf unbestimmte ZeitAnspruch darauf und können sie bei einemWechsel des Providers mitnehmen.
Download Beim Download übertragen Sie Dateienvon einem 2Webserver im Internet auf dieFestplatte Ihres PC. Sie wickeln den Down-load direkt über den 2 Browser oder überein spezielles Verfahren namens 2 FTP ab.
Event-HandlerEin Event-Handler ist ein 2 Attribut einesHTML-Tags (2 HTML, 2 Tag), das eine 2 Ja-vascript-Funktion aufruft. Solche Event-Handler sind zum Beispiel onload= (beimLaden der Site) oder onmouseover= (beimÜberfahren mit der Maus). Event-Handlersorgen dafür, dass eine Web-Seite nichtmehr passiv ist, sondern auf Benutzerak-tionen reagiert. Das bekannteste Beispielsind animierte Schaltflächen, die sichbeim Überfahren mit der Maus verändern.
Frame Mit Frames (zu deutsch Rahmen) teilen Siedas 2 Browser-Fenster in unabhängige Be-
reiche auf. Jeder dieser Be-reiche zeigt eine eigene 2HTML-Datei an.
FTPDas File Transfer Protocol(FTP) ist eine Methode, umvia Internet größere Dateienrasch zu übertragen. Als Ge-genstück zum FTP-Client aufdem PC des Anwenders trittein FTP-Server im Internetauf. Auch die Übertragung
der Website-Dateien zum 2 Webserver er-folgt in der Regel per FTP. Moderne 2 Brow-ser haben einen einfachen FTP-Client, deraber nur Dateien herunterladen kann.
GIFGraphics Interchange Format (GIF) ist einDateiformat, das ursprünglich vom Online-Dienst Compuserve für die Übertragungvon Bildern per Modem entwickelt wurde.GIF komprimiert die Bilddaten recht gutund verlustfrei. Es erlaubt kleine Trickfilmemit animierten Bildfolgen (GIF-Animation)sowie einen durchsichtigen, transparentenBildhintergrund. Doch lässt GIF nur maxi-mal 256 Farben je Bild zu. Für Bilder in na-türlichen beziehungsweise Echtfarben sinddie Formate 2 JPG beziehungsweise 2 PNGdeshalb die bessere Wahl.
Homepage Unter Homepage versteht man im Allge-meinen die erste Seite oder Startseite einesWeb-Angebots. Diese Seite bekommt derSurfer zu sehen, wenn er eine Adresse wiewww.pcwelt.de im 2 Browser eingibt. Die Homepage ist meist das Inhaltsverzeichnisfür viele weitere Teilseiten. Alle diese Web-Seiten bezeichnet man zusammen mit derHomepage als 2Website.
HTML-Standard HTML steht für Hyper TextMarkup Language, etwa „Be-schreibungssprache für Tex-te mit Querverweisen“. AlleWeb-Seiten im 2World WideWeb sind im HTML-Formatgespeichert. HTML entstand1991 als „Fleißarbeit“ eini-ger Wissenschaftler amSchweizer Kernforschungs-zentrum CERN. Die Weiter-entwicklung wurde baldans ehrenamtliche Gremi-
um 2 W3C übergeben. Seit Januar 1998gibt es die heute noch aktuelle HTML-Ver-sion 4.0. Der Nachfolger ist 2 XHTML 1.0,das etliche alte 2Tags und 2Attribute verbie-tet und dafür verstärkt auf 2 CSS setzt.
HTTPMit dem Hyper Text Transfer Protocol kom-munizieren 2 Browser und 2Webserver überdas Internet. Das Protokoll ist auf die Über-tragung vieler kleiner Dateien optimiert,da HTML-Dateien und Bilder meist kleinsind. Für große Dateien ist das 2 FTP-Proto-koll besser.
HyperlinkMit einem Hyperlink oder kurz Link – oftmit Querverweis, Verweis oder Verknüp-fung übersetzt – werden im WWW Web-Seiten miteinander verknüpft. Ein Link istein markiertes Wort oder eine Grafik, dasbeim Anklicken mit der Maus eine andereWeb-Seite in den Browser lädt. In der Regelstellen 2Browser Text-Links blau und unter-strichen dar, während Grafik-Links oft ei-nen blauen Rand haben. Die Farben lassensich jedoch vom Anwender frei einstellen.
Internet2World Wide Web
Java
Java ist eine Programmiersprache für dasInternet, die unabhängig vom jeweiligenBetriebssystem ist. Ein Entwickler schreibtein kleines Programm, ein 2 Applet, undbindet es in eine Web-Seite ein. Lässt sichder Anwender eine Web-Seite mit Appletanzeigen, so schickt der 2Webserver das Ap-plet an dessen 2 Browser. Der Browser be-sitzt ein Modul (Java Virtual Machine, kurzJava-VM), das den Programmcode des Ap-plets ausführt. Ein Applet funktioniert auf
Gestaltungsfreiheit mit CSS: Cascading Style Sheets in einer HTML-Datei
erlauben zum Beispiel solche ausgefallenen Tabellen-Layouts
Homepage-Upload: Mit einem FTP-Programm wie Filezilla übertragen Sie
allen Computern, die eine Java-VM bereit-stellen. Java-Applets sorgen oft für aufwen-dige Animationen oder Sound, aber auchfür sichere Homebanking-Lösungen. Umzu verhindern, dass ein böswilliger Pro-grammierer mit einer scheinbar harmlo-sen Web-Seite heimlich ein Programm aufden Anwender-PC überträgt, das etwa Pass-wörter stiehlt oder gar die Festplatte for-matiert, laufen Java-Applets in einer so ge-nannten Sandbox unter Überwachung ab.Ein Java-Applet kann keine Dateien aufIhren PC kopieren oder Systemprogrammeaufrufen. Das Konkurrenzprodukt Active Xvon Microsoft ist wesentlich gefährlicher.
JavascriptÄhnlich wie Word oder Excel besitzen auch2 Browser eine Makrosprache: Javascript. Ja-vascript-Programme trägt der Program-mierer direkt in den 2 HTML-Code einerWeb-Seite ein. Internet Explorer, Net-scape/Mozilla und Opera unterstützen Ja-vascript, unterscheiden sich aber in Details.Weil Javascript als Klartext übertragenwird, ist die Ausführung langsamer als beiJava-Applets (2Java, 2Applets). Auch Ja-vascript-Programme können theoretischwenig Schaden auf dem Anwender-PC an-richten, weil sie etwa nicht auf Dateien zu-greifen dürfen. Doch werden immer wie-der Browser-Sicherheitslöcher bekannt, dieunter Umständen doch gefährliche Aktio-nen erlauben. Nicht zuletzt deshalb gibt esalle paar Monate neue Windows-Updates.
JPGDas JPG-Dateiformat (Joint PhotographicExperts Group) für Grafiken kommt imWeb dann zum Zug, wenn der Program-mierer Bilder mit vielen Farben stark kom-primieren möchte. Denn die vielen Farben
bleiben erhalten, während Bilddetails, diedas menschliche Auge nicht wahrnimmt,verschwinden. Die Kompression ist also ver-lustbehaftet. Je stärker der Anwender denJPG-Algorithmus komprimieren lässt, destoschlechter wird die Bildqualität.
LinkcheckerIn einem größeren Projekt mit vielen Links(2 Hyperlink) ist es eine mühsame Aufgabe,die Funktionsfähigkeit aller internen (zuanderen Seiten des Projekts) und externen(zu fremden Web-Seiten) Links zu prüfen.Spezialisierte Programme, die Linkchecker,nehmen dem Programmierer diese Aufga-be ab. Sie klappern einen Link nach demanderen ab und prüfen, ob das angegebeneZiel vorhanden ist. Viele HTML-Editoren ha-ben bereits einen eingebauten Linkchecker.
Meta-Tag Die meisten HTML-Tags (2HTML, 2 Tag) be-einflussen das Aussehen der Web-Seite imBrowser. Eine Web-Seite kann aber auch an-dere Infos enthalten, zum Beispiel ihrenAutor, ihr Entstehungsdatum, Stichwörter(Keywords) für Suchmaschinen und so wei-ter. Für solche Informationen gibt es denTag <meta>. Um die verschiedenen Infor-mationen auseinander zu halten, gibt esdas 2Attribut name=. Die Information selbststeckt im Attribut content=. Stichwörterfür eine Suchmaschine sehen zum Beispielso aus: <meta name="keywords" con-tent="Stichwort1, Stichwort2, ...">
Perl Diese einfache Programmiersprache (Prac-tical Extraction and Report Language) istauf die Verarbeitung von Texten speziali-siert. Perl-Interpreter, die Perl-Programmeabarbeiten, sind im Internet kostenlos zuhaben. Deshalb erfreut sich Perl großer Be-liebtheit für den Einsatz auf 2Webservernzum Verfassen von 2 CGI-Scripts.
PHPWie 2 Perl ist PHP (PHP Hypertext Prepro-cessor) eine Scriptsprache, die auf dem 2Webserver abläuft. Sie ist mittlerweile sogarbeliebter als Perl. Die Steuerbefehle von
Java-Applet: Es führt komplexe Aufgaben in einer Site
aus. Hier lässt es die Schrift um die Weltkugel rotieren
Bilder komprimieren: Das JPG-Dateiformat für Grafiken kommt im Web dann zum Einsatz, wenn der Programmie-
rer Bilder mit vielen Farben stark komprimieren möchte. Darunter leidet aber die Bildqualität
PHP sind in eine normale 2HTML-Datei ein-gebettet und sorgen für dynamische Web-Seiten. So lassen sich damit beispielsweiseWeb-Seiten erzeugen, die Informationenaus einer Datenbank enthalten, etwa dieEinträge eines Gästebuchs.
Pixel PC-Monitore bauen Bilder immer aus ein-zelnen Farbpunkten auf. Am Bildschirm se-hen Sie typischerweise 640 x 480 oder 1024x 768 oder 1200 x 1024 Farbpunkte. JederFarbpunkt oder Bildpunkt ist ein Pixel.
PNGDas Dateiformat PNG (Portable NetworkGraphics) für Bilder beruht auf einem offe-nen Standard. Es vereint viele Eigenschaf-ten von 2 GIF und 2 JPG. Wie JPG kann esBilder in Echtfarben speichern, wie bei GIFerfolgt die Komprimierung verlustfrei, undes gibt Transparenzeffekte. Obwohl allemodernen 2Browser das PNG-Format un-terstützen, hat es sich in der Praxis bishernicht durchsetzen können.
Streaming Sound- und Videodateien sind meist großund eignen sich deshalb kaum für den Ein-satz im Web, vor dem Abspielen müssendie Daten erst komplett übertragen wer-den. Die Streaming-Technologie umgehtdas: Bereits während der Übertragung zeigtein Player die Videos an oder spielt Sound-dateien. Zwei Standards streben nach derMarktherrschaft: Real Player von Real Me-dia und Media Player von Microsoft.
Tag Die Web-Seiten im Internet sind mit der Be-schreibungssprache 2 HTML formatiert.Die einzelnen Kommandos bezeichnetman als Tags (Markierung oder Fähnchen).Mit Tags kann man zum Beispiel Textteilefett oder kursiv auszeichnen.
TexturDie kleinen Kachelbilder (meist 100 x 100Bildpunkte), die sich als Hintergrund einerWeb-Seite nahtlos aneinanderfügen, wer-den oft als Textur bezeichnet.
040-43 208.qua 02.12.2003 13:59 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 43
Homepage-LexikonpGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 40 – S. 43
Thumbnail Die Übertragung von großen Bilddateiendauert im Internet recht lange. Wer diesdem Besucher seiner Website ersparen will,setzt verkleinerte Vorschaubilder ein, vondenen der Gast sich nur die gewünschtenBilder im Originalformat anzeigen lässt.Die Vorschaubilder heißen ihrer Größe we-gen Thumbnails (Daumennagel).
Upload Beim Upload – zu deutsch: „Hochladen“ –übertragen Sie eine Datei von Ihrem PC aufeinen anderen Computer, etwa die DateienIhrer Website auf den 2Webserver eines On-line-Dienstes. Meist kommt dafür das 2 FTP-Protokoll zum Einsatz.
URLDer Uniform Resource Locator (URL) ist diekomplette Adresse einer Datei im Internet.So könnte „http://www.homepage.de/index.htm“etwa die Homepage eines Web-Angebotssein. „ftp://ftp.uni-augsburg.de/tools/psps5.exe“beispielsweise ist die URL einer Programm-datei auf einem 2 FTP-Server. Heute sprichtman allgemein von URI (Uniform ResourceIdentifier).
VB-ScriptAls Konkurrenz für 2 Javascript hat Micro-soft im Internet Explorer die MakrospracheVB-Script eingebaut. VB-Script basiert aufVisual Basic, das auch bei den ProgrammenWord und Excel als Makrosprache dient. Inder Praxis hat sich VB-Script kaum durch-gesetzt, weil es alle Benutzer von anderen2Browsern ausschließt.
W3CDas World Wide Web Consortium (W3C) istdas zentrale Entscheidungsgremium fürStandards im Web (www.w3c.de). Es arbeitetauf ehrenamtlicher Basis, mittlerweile sindviele Firmenvertreter daran beteiligt. DasW3C entscheidet zum Beispiel über Erwei-terungen des 2HTML-Standards.
Wallpaper2 Browser können eine Web-Seite mit ei-nem Hintergrundbild hinterlegen. Dabeikommen meist sehr kleine Bilder zum Ein-satz, die der Browser wie Kacheln oder Ta-petenstreifen aneinander reiht, um einegrößere Fläche zu erhalten. Deshalb ist oftvon Wallpaper (Tapete) die Rede.
WAVDigitale Klänge speichert Windows stan-dardmäßig im WAV-Format (Wave File For-mat). Dabei ist das Tonsignal wie auf derAudio-CD digital abgelegt. Je nach Qualitätkönnen WAV-Dateien sehr groß sein. Des-halb eignet sich WAV nur für Kurzsounds,etwa Effekte beim Anklicken eines Links.Für lange Musikstücke bietet sich das sehrplatzsparende Midi-Format (Musical In-strumental Digital Interface) an.
WebserverIm Internet gibt es spezialisierte Computer,die 2 HTML- und Bilddateien speichern, dieWebserver. Will ein Anwender eine be-stimmte 2 Homepage sehen, so nimmt sein2 Browser Verbindung zum passendenWebserver auf und lässt sich von ihm dieHTML-Dateien und Bilder schicken.
Website Der Sammelbegriff für denganzen Internet-Auftritt ei-nes privaten Anwendersoder eines Unternehmens,also alle Web-Seiten inklusi-ve der 2 Homepage, lautetWebsite.
Webspace-ProviderEin Webspace-Provider stelltAnwendern – kostenlos oderkostenpflichtig – Platz fürihre Homepage bereit. Be-kannte Provider sind etwa1&1 (www.1und1.de) oder Stra-to (www.strato.de). Auch diemeisten Internet-Zugangs-provider wie T-Online oder
Bewegte Bilder: Mit Streaming erscheinen auf der
Web-Seite Videos, noch während sie geladen werden
World Wide Web Consortium: Die unabhängige Organisation W3C sorgt für
weltweit anerkannte Standards rund ums Web
AOL stellen ihren Kunden begrenzt Platzfür eine Homepage zur Verfügung.
World Wide Web Das weltumspannende Netzwerk von Web-Seiten, die mit 2 Hyperlinks verknüpft sind.Der Name entstand, weil die Struktur mitden Hyperlinks an ein Spinnennetz (aufEnglisch: Web) erinnert und das Netz welt-umspannend ist (World Wide). Die Infra-struktur (Hardware und Software) dazu istdas Internet. Es verbindet die beteiligtenComputer physikalisch miteinander.
XHTMLXHTML ist der Nachfolger von 2 HTML, hatsich aber in der Praxis noch nicht durchge-setzt. Wesentlicher Unterschied: XHTML iststreng an den Regeln von 2 XML ausgerich-tet. So lässt sich XHTML mit anderen XML-kompatiblen Formatsprachen wie SVG(Vektorgrafik) oder MathML (mathemati-sche Gleichungen) verknüpfen. Da XHTMLkaum 2 Tags und 2 Attribute für die Gestal-tung von Web-Seiten unterstützt, ist derEinsatz von 2 CSS unerlässlich.
XMLDie Extensible Markup Language (XML) istwie 2HTML ein Standard des 2W3C. BeideSprachen haben einen gemeinsamen Ur-sprung, die Structured Generalized Mark-up Language (SGML), die für die Archivie-rung von Texten entwickelt wurde. Da siesehr kompliziert ist, haben sich die einfa-cheren Ableger HTML für das Internet undXML für die Textarchivierung durchge-setzt. XML ist übrigens nicht Nachfolgervon HTML: Beide Sprachen verfolgen un-terschiedliche Ziele und ergänzen sich.
040-43 208.qua 02.12.2003 14:00 Uhr Seite 5
PC-WELT SONDERHEFT 2/200444
Webserver-Scripts sind die hohe Schule eines Web-Auftritts. Sie geben damit Ihren Besuchern die Möglichkeit, sich interaktivzu beteiligen, zum Beispiel in einem Gästebuch oder Forum.
Homepage interaktiv
HTML-Seiten sind statisch. Mit Hilfe vonJavascript oder VB-Script können Sie IhrerSite einen pseudodynamischen Touch ge-ben. Wirklich interaktiv wird der Web-Auf-tritt aber erst dann, wenn ihm Webserver-Anwendungen zu Grunde liegen.
Dabei handelt es sich um Programme,die durch den Aufruf der URL gestartet wer-den. Sie werden auf dem Webserver ausge-führt und geben als Ergebnis reinen HTML-Code an den Browser des Benutzers zurück.Der merkt gar nicht, dass im Hintergrundein Script gestartet wurde, das vielleicht so-gar eine Datenbankabfrage über mehrereMillionen Datensätze ausgeführt hat.
Um diesen Beitrag gut nachvollziehenzu können, brauchen Sie Grundkenntnissein HTML, wie sie Ihnen der 2Artikel ab Sei-te 34 vermittelt. Und Sie sollten mit einemText-Editor umgehen können. Theoretischreicht der Windows-eigene Editor Notepad.Optimaler ist ein spezialisiertes HTML-Tool wie Homesite 5.5 (www.macrome
dia.com/de/software/homesite, ab Windows 98,142 Euro, Trial-Version auf der Website). Ei-ne kostenlose und noch dazu deutschspra-chige Alternative ist Phase 5.3 für Windows98/ME, NT 4, 2000 und XP (www.ftp-uploader.de/ftp-download.php4 und auf CHeft-CD, De-tails 2 auf Seite 113).
1. Webserver-Scripts:Dynamische Inhalte
Webserver-Scripts liefern Inhalte dyna-misch an den Browser des Benutzers – an-ders als HTML-Dateien, die, einmal auf denWebserver geladen, ihre Größe und dieübermittelten Daten nicht mehr verän-dern. Dabei kommen beim Benutzer selbstnur reine HTML-Tags an.
Scripts werten Daten aus und bauen ausden Ergebnissen eine HTML-Seite zusam-men, die vom Webserver an den Browserübertragen wird. Die Scripts werden aufdem Webserver von einem so genanntenInterpreter ausgeführt. Am gebräuchlichs-
ten sind heute die Interpreter für die bei-den Scriptsprachen Perl und PHP (2 Seite42). Dabei ist das jüngere PHP leichter ein-zubinden. Zudem ist die Sprache an sichsehr viel einfacher zu erlernen.
Mittlerweile bieten nahezu alle InternetService Provider (ISP) einen PHP-Interpreteran. Ob Ihr ISP dies auch tut und welchePHP-Version bei ihm installiert ist, könnenSie leicht prüfen. Erstellen Sie mit Home-site, Phase 5 oder mit dem Windows-Editoreine Textdatei mit dem Namen „test.php“(ohne Anführungszeichen). Anhand derEndung erkennt der Webserver, dass es sichum eine Datei handelt, die sowohl HTML-Tags als auch PHP-Code enthält. Geben Siedann in der Datei folgende drei Zeilen ein:
<?PHPphpinfo();?>
Im Gegensatz zu einer einfachen HTML-Da-tei können Sie PHP-Scripts nicht einfachmit einem Doppelklick im Browser öffnen.Laden Sie die Datei „test.php“ mit einemFTP-Programm auf Ihren Webserver (2 Sei-ten 96 und 126), zum Testen am besten indas Hauptverzeichnis.
Lautet die URL Ihres Internet-Auftrittsetwa www.meinname.de, geben Sie danach imBrowser die Adresse www.meinname.de/test.php ein. Führt dies zu einer Fehlermeldungoder wird nur der eingegebene Text ange-zeigt, kann Ihr Webserver PHP-Scripts nichtausführen. In diesem Fall empfehlen wirIhnen: Wechseln Sie Ihren ISP.
Meistens wird am Bildschirm jedoch ei-ne farblich formatierte Tabelle erscheinen(2Abbildung rechte Seite oben). Hier erfah-ren Sie ganz oben, welche PHP-Version aufIhrem Server installiert ist. Anhand dieserInformation finden Sie heraus, ob eines derim Folgenden erwähnten kostenlosenScripts auch bei Ihnen läuft. Nach Lektüredieses Beitrags sollten Sie die Datei „test.php“ unbedingt löschen, da sonst Besu-cher, die zufällig die Datei öffnen, alle In-formationen über Ihren Webserver sehen.Tipp: Manche Webserver können PHP-Codeauch innerhalb von HTML-Dateien ausfüh-ren. Das ist aber eher die Ausnahme. Dahersollten Sie PHP-Dateien auch mit der En-dung „.php“ (ohne Anführungszeichen)kennzeichnen. Sie können Ihre gesamte
Von Ingo Böhme
044-47 211 02.12.2003 14:25 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 45
Webserver-AnwendungenpGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 44 – S. 47
Website umstellen, indem Sie überall dieEndungen „htm“ oder „html“ gegen „php“tauschen. Den Inhalt können Sie gleich las-sen, da PHP-Dateien auch normale statischeHTML-Seiten sein können. Achten Sie nurdarauf, dass Sie die Links in Ihren Seitenentsprechend anpassen.
3. Homepage-Besucher: Ein Counter zählt
Es gibt viele Anbieter, die die Besucherzahlaufzeichnen, etwa http://topsites.onlinehost.de/rank_top.cgi?cat=7. Dort wird Ihre Seite inein Verzeichnis eingetragen. Sie erhaltenein Mini-Banner, das Sie auf Ihrer Site ein-binden und das die Besucherzahl anzeigt.
Wollen Sie Ihre Besucher selbst zählen,können Sie auch ohne PHP-Kenntnisse vor-gefertigte und kostenlose PHP-Scripts ein-setzen. Der 2 Kasten unten führt Anlauf-stellen auf, wo Sie aus Hunderten von kos-
tenlosen Webserver-Anwen-dungen wählen können, et-wa den Visyte Alpha Coun-ter (www.visyte.com/products/acounter.zip und auf CHeft-CD). Dieser Besucherzählerist mit einer Reload-Sperreausgestattet. Das bedeutet,dass er sich die IP-Adressedes Besuchers merkt und soverhindert, dass jemand dieBesucherzahl mit der „Ak-tualisieren“-Schaltfläche indie Höhe treibt. Der Einsatzdes Counters ist denkbareinfach. Extrahieren Sie dieDatei „acounter.php“ ausdem ZIP-Archiv, und kopie-ren Sie sie in Ihr Homepage-Verzeichnis auf Ihrem PC.Öffnen Sie dann Ihre Home-
page-Quelldatei, also beispielsweise „index.php“, und tragen Sie an der Stelle, an derder Zähler erscheinen soll, den Code
<?PHPinclude("acounter.php");?>
ein. Erstellen Sie dann im selben Verzeich-nis noch zwei leere Textdateien mit den Na-men „Stat.dat“ und „IPs.dat“ (ohne Anfüh-rungszeichen). Achten Sie dabei genau aufdie Schreibweise bei den Dateinamen, dadie meisten Webserver zwischen Groß- undKleinschreibung unterscheiden.
Übertragen Sie dann alle geänderten Da-teien mit Ihrem FTP-Programm auf denWebserver. Wenn Sie nun Ihre Online-Homepage öffnen, erhalten Sie an der ent-sprechenden Stelle die Anzeige „Du bist Be-sucher Nr. 1“. Erscheint statt der Besucher-
anzahl eine Fehlermeldung in der Form„Warning: fopen ... Permission denied“, ha-ben Ihre Scripts nicht die nötigen Schreib-rechte. Dann müssen Sie die Attribute desHomepage-Ordners im Web mit Ihrem FTP-Programm auf „755“ ändern. Das erlaubtIhrem Script, die Counter-Dateien zu ver-ändern. Wie dies funktioniert, erfahren Sieexemplarisch im 2 Kasten „Datei-Attributemit dem FTP-Programm ändern“.
Sollte Ihnen das lapidare „Du“ der An-zeige nicht gefallen, oder Sie wollen gene-rell einen anderen Text anzeigen, öffnenSie die Datei „acounter.php“ im Editor. Inder vorletzten Zeile steht der Befehl
echo "<html><body> ...
Ändern Sie die gesamte Zeile um in
echo $CurrentCount;
Nun wird nur noch die Anzahl der Besu-cher ausgegeben, und Sie können in IhrerHomepage-Datei beliebigen Text vor derAusgabe anzeigen lassen und diesen auchnach Ihren Vorstellungen formatieren.
4. Gästebuch anlegen:Erste Form der Interaktion
Die erste Form der Interaktion mit IhrenBesuchern ist ein Gästebuch. Neben zahl-reichen Lösungen, die eine Datenbank vor-aussetzen, gibt es auch kostenlose Scripts,die alle Gästebuch-Einträge in einer Text-datei verwalten. Ein besonders flexiblesund leicht zu installierendes Beispiel ist A-N Gästebuch 1.1 (unter www.code-box.deund auf CHeft-CD) von Carsten Hufe.
Erstellen Sie einen Ordner namens „gb“in Ihrem Homepage-Projektverzeichnis.Entpacken Sie das Archiv in diesen Ordner.Öffnen Sie dann die Datei „config.php“ inIhrem Editor. Hier nehmen Sie alle Ihre in-
Inhalt Seite
1. Dynamische Inhalte 442. Webserver überprüfen 443. Homepage-Besucherzähler 454. Gästebuch anlegen 455. Datenbanken auf dem Webserver 466. Kür für Ihre Website: Ein Forum 47
KästenHier finden Sie kostenlose Scripts 45Datei-Attribute per FTP-Programm ändern 47
Hier finden Sie kostenlose ScriptsWebmastermind: Über 1000 kostenlose Scripts gibt es unter www.php-free.de. Sie sind in Ru-briken wie „Counter“, „Email“ oder „Suche“ eingeteilt. In den Rubriken werden die Scriptskurz beschrieben, jedoch ohne Angabe, ob das jeweilige Script deutschsprachig ist. Am oberenRand der Übersicht finden Sie die Top-5-Scripts der jeweiligen Kategorie. Developer Channel: Auf dem – etwas langsamen – Developer Channel (www.developerchannel.de) finden Sie nicht nur PHP-Scripts, sondern auch solche zu ASP und Perl sowie Java-Ap-plets und Javascripts, die auf dem Browser des Besuchers laufen. Die knapp 300 PHP-Scriptssind kurz beschrieben, aber auch nicht sprachlich gekennzeichnet.PHP-Welt: Rund 800 Scripts finden Sie unter www.php-welt.net/script-archiv-ansehen.php.Das Besondere an diesem Portal ist, dass es neben einer ausführlichen Beschreibung bei je-dem Script die Sprache in Form einer kleinen deutschen oder britischen Flagge anzeigt.
Webserver-Infos: Mit Hilfe eines kleinen eigenen Scripts bringen Sie alle
wichtigen Informationen über Ihren Webserver in Erfahrung (Punkt 2)
dividuellen Änderungen vor. Als erstes pas-sen Sie das Passwort an, mit dem Sie als Ad-ministrator die Gästebuch-Einträge bear-beiten und gegebenenfalls löschen können.Ändern Sie dazu die Zeile
$password = "password";
in
$password = "hubabuba";
wobei „hubabuba“ für Ihr persönlichesPasswort steht. Weiter unten findet sich einEintrag, in dem Sie statt „[email protected]“Ihre eigene Mailadresse eintragen. Bei je-dem neuen Eintrag veranlasst das Script,dass der Webserver an diese Adresse eineBenachrichtigung verschickt. Noch weiterunten finden Sie zahlreiche Anpassungs-varianten und die Möglichkeit, gewisseWörter zu sperren. Ebenso können SieEmoticons, wie „:-)“ oder „8-)“ durch grafi-sche Smileys ersetzen lassen.
Haben Sie alle Änderungen durchge-führt, laden Sie den Ordner „gb“ komplettauf Ihre Homepage hoch. Auf das Gäste-buch können Sie dann mit dem Link www.<meinname.de>/gb/gb.php zugreifen – „<mein-name.de> ist der Platzhalter für Ihren Do-main-Namen (2 Abbildung rechts).
Mit einem Klick auf „Eintragen“ gelan-gen Sie zur Eingabemaske, in der Sie denText eintragen – sowie fakultativ die Home-page, Mailadresse und ICQ-Nummer – undüber die Schaltfläche absenden. Ihr Eintrag
wird verschlüsselt in der Datei „entries.txt“abgelegt. Wenn Sie nach dem Absendendes Gästebuch-Eintrags eine Fehlermel-dung erhalten, haben Ihre Scripts nicht dienötigen Schreibrechte. Dann müssen Sieentweder die Attribute des Ordners „gb“ imWeb mit Ihrem FTP-Programm auf „755“oder das Attribut der Datei „entries.txt“ auf666 ändern. Das erlaubt Ihrem Script, Gäs-tebuch-Einträge in die Textdatei zu schrei-ben. Wie dies funktioniert, erfahren Sie exemplarisch im 2 Kasten „Datei-Attributemit dem FTP-Programm ändern“.
Wollen Sie einzelne Gästebuch-Einträgekommentieren oder ganz herausnehmen,öffnen Sie www.<meinname.de>/gb/gbadmin.php(<meinname.de> steht für Ihren Domain-Namen). Nach Eingabe des Passworts, dasSie weiter oben geändert ha-ben, sehen Sie alle Einträgeund können sie kommentie-ren, ändern oder löschen.
5. Datenbanken aufdem Webserver
Kleinere Datenbankanwen-dungen wie ein Gästebuchlassen sich noch mit einfa-chen Textdateien bewerk-stelligen. Wenn aber vieleEinträge auf unterschiedli-che Weise sortiert, selektiertund angezeigt werden sol-len, kommen Sie um denEinsatz einer Datenbanknicht herum. Die auf Web-servern am häufigsten in-
stallierte, weil kostenlose Datenbank heißtmySQL. Ob diese bei Ihrem Webserver in-stalliert ist, können Sie ermitteln, indemSie das Test-Script aus 2 Punkt 2 auf IhremServer ausführen lassen. Wenn neben Ab-schnitten wie „PHP Core“, „Zend Optimi-zer“ und „ftp“ auch „mysql“ auftaucht, istdie Datenbank mySQL installiert.
Von Ihrem ISP benötigen Sie nun nochdrei Angaben: Wie lautet der Name der Da-tenbank selbst, wie der Benutzername undwie sein Passwort? Eventuell gibt Ihr Provi-der Ihnen die Möglichkeit, via Browser eige-ne Datenbanken anzulegen. Dann könnenSie die drei Angaben selbst bestimmen.Egal, welche Art von Datenbankanwen-dungen Sie auf Ihrer Homepage einrichtenwollen, diese Daten brauchen Sie immer.
DatenbankstrukturWenn Sie noch gar keine Vorstellung ha-ben, wie eine Datenbank strukturiert ist,kann ein vergleichendes Bild beim Ver-ständnis helfen. Stellen Sie sich eine Excel-Arbeitsmappe vor. Diese ist vergleichbarmit einer Datenbank. Beide können zahl-reiche Tabellen enthalten. Jede Tabelle hateinen eindeutigen Namen und besteht auseiner oder mehreren Spalten. In jeder Spal-te befinden sich immer gleiche Informa-tionen, also etwa in Spalte A die Nachna-men, in Spalte B die Vornamen und so fort.
Die Spaltenüberschriften nennt man inder Sprache der Datenbanken Feldnamen.Die einzelnen Zeilen, in denen sich die Da-ten selbst – also etwa die Adressen – befin-den, heißen Datensätze. Das komforta-belste und noch dazu kostenlose Werkzeugzur Verwaltung von mySQL-Datenbanken
Gästebuch im Nu: Mit Hilfe so genannter Templates passen Sie das A-N
Gästebuch 1.1 an nahezu jedes beliebige Layout an (Punkt 4)
Eins – zwei – drei: Über ein Mini-Banner, das Sie auf Ihre Website integrieren, werden bei Onlinehost Topsite Ihre
Besucher gezählt. Sie können aber auch einen eigenen Script-Counter direkt in Ihre Site einfügen (Punkt 3)
044-47 211 02.12.2003 14:26 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 47
Webserver-AnwendungenpGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 44 – S. 47
heißt phpMyAdmin. Sie finden es auf
CHeft-CD oder laden es unter http://phpmyadmin.sourceforge.net herunter.
6. Kür für Ihre Website:Ein Forum
Die Kür für Ihre Website stellt zweifelsohneein eigenes Forum dar. Diese in einzelneKategorien eingeteilten schwarzen Bretterdienen der raschen Kommunikation zwi-schen Menschen, die sich für dieselbenThemen interessieren. Eines der professio-nellsten Tools zur Forum-Erstellung ist dasOpen-Source-Projekt php BB, das in vielenHundert Websites eingesetzt wird.
Die Installation ist selbst ohne HTML-oder PHP-Kenntnisse kinderleicht. LadenSie das Tool unter www.phpbb.de/mods/phpBB2-2.0.6-deutsch.zip herunter, und entpa-cken Sie das Archiv in den Homepage-Pro-jektordner auf Ihrem PC. Danach solltedort ein Ordner namens „phpBB2“ existie-ren. Laden Sie diesen Ordner mit IhremFTP-Client ins Internet auf Ihre Homepage.
Zur Installation öffnen Sie dann inIhrem Browser die URL www.<meinname.de>/phpBB2/install/install.php (wobei Sie <mein-name.de> wieder durch Ihren Domain-Na-men ersetzen). Belassen Sie es bei der Spra-che Deutsch (German), und wählen Siedann den Datenbanktyp (2 Abbildungrechts oben). Welche Version von mySQLIhr Server unterstützt, erfahren Sie in derPHP-Info-Abfrage (2 Punkt 2) im Abschnitt
„mysql“ rechts neben „Client API version“.Sind Sie sich nicht sicher, zum Beispiel,weil Sie es einfach noch nicht gemacht ha-ben, belassen Sie den Eintrag bei „mySQL3.x“. Tragen Sie dann in der Datenbank-konfiguration den Datenbank- sowie denBenutzernamen und das Passwort ein.Wichtig ist auch, dass Sie einen Admini-
stratornamen und dessen Passwort festle-gen. Damit können Sie sich später einlog-gen und erhalten dann Zugriff auf den Ad-ministrations-Bereich.
Forum anpassenBelassen Sie alle bereits ausgefüllten Einga-befelder bei den Vorgaben. Schließen Siedann mit einem Klick auf die entsprechen-de Schaltfläche die Installation ab. Nunkönnen Sie in Ihrem FTP-Programm diebeiden Unterverzeichnisse „install“ und„contrib“ löschen und sich erstmalig alsAdministrator anmelden.
Öffnen Sie dazu www.<meinname.de>/phpBB2 (<meinname.de> steht wie üblich fürIhren Domain-Namen), und melden Siesich mit dem eben gewählten Administra-tornamen und dem zugehörigen Passwortan. Immer wenn Sie sich als Administratorangemeldet haben, erscheint am unterenRand der Startseite der Link „Administrati-ons-Bereich“. Klicken Sie darauf, und Siehaben die Administrator-Konsole vor sich,in der Sie neue Foren anlegen, Benutzer-rechte einschränken oder erweitern unddie Gestaltung des gesamten Forums vor-nehmen. Unter www.phpbb.de finden Sie – neben einer umfangreichen Dokumenta-tion – ein Forum für Einsteiger und Fortge-schrittene, in dem Sie erfahren, wie Sie dasForum weiter einrichten und erweitern.
Datei-Attribute mit dem FTP-Programm ändern
Auf einem Webserver soll nicht jeder Besucher dieMöglichkeit haben, Daten zu ändern. Daher sind dieDateien standardmäßig mit einem Schreibschutzversehen. Mit einem FTP-Programm geben Sie ganzeOrdner oder einzelne Dateien zum Schreiben frei.
Starten Sie zum Beispiel den FTP-Client Filezilla(ausführliche Infos dazu 2 ab den Seiten 96 und126), und loggen Sie sich auf Ihrem Webserver ein.Navigieren Sie dann im rechten Fenster zu der Dateioder zu dem Ordner, für die Sie Schreibrechte ertei-len wollen. Klicken Sie mit der rechten Maustastedarauf, und wählen Sie im Kontextmenü den Punkt„Dateiattribute“ (2 Abbildung). In der Dialogboxvergeben oder entfernen Sie nun die Schreibrechte,indem Sie die Kontrollkästchen an- oder abwählen.Versuchen Sie immer erst, lediglich minimale Rechtezu vergeben, also beispielsweise das Schreibrecht nur für den „Besitzer“. Sollte das Scriptdann nicht laufen, aktivieren Sie nach und nach die übrigen Berechtigungen, bis es läuft. DerGrundsatz lautet: so wenig Rechte wie möglich vergeben.
Attribute ändern: In der Dialogbox können Sie
Schreibrechte vergeben oder entfernen
Forum erstellen: Eines der professionellsten Tools zur Erstellung eines Forums ist php BB. Die Installation lässt
sich selbst ohne HTML- oder PHP-Kenntnisse einfach bewerkstelligen (Punkt 6)
044-47 211 02.12.2003 14:26 Uhr Seite 5
PC-WELT SONDERHEFT 2/200448
Weblogs sind Online-Tagebücher mit kommentierten Links zu anderen Sites. Doch es gibt noch mehr Einsatzmöglichkeiten.Welche das sind und wie Sie selber bloggen, erfahren Sie hier.
Weblogs: So geht’s
Vor etwa zehn Jahren begann der da-mals 19-jährige Amerikaner Justin Hall da-mit, seinen kompletten Alltag im Internetzu protokollieren. Dabei ging er mit seinentäglichen Online-Schilderungen so weit,dass ihm angeblich so manche Freundinden Laufpass gab. Weil es damals noch kei-ne speziellen Programme gab, die dieFührung eines Tagebuches im Internet ver-einfachten, musste Justin sein Web-Tage-buch noch per Hand codieren.
1. Ein Weblog bietet sich fürviele Inhalte an
Seit etwa zwei bis drei Jahren gibt es ent-sprechende Programme auf dem Markt,mit denen sich persönliche Schilderungendieser Art, im Fachjargon „Weblogs“ ge-nannt, mit wenigen Handgriffen ohnegroßen Aufwand erstellen und professio-nell aufmachen lassen. Der wichtigste Un-terschied zu den klassischen Websites: DieBeiträge werden nicht erst offline erstelltund anschließend auf einen Server hoch-
geladen, vielmehr verfasst und publiziertder Autor sie unmittelbar im Web.
Inhaltlich decken Weblogs eine beacht-liche Bandbreite ab. So gibt es Weblogs, diesich wie eine Familienchronik lesen. DerVerfasser teilt in diesem Fall der Welt eben-
so mit, wann er seine erste Liebe getroffenhat, wie den Zeitpunkt des ersten Kusses,den Tag der Vermählung, die Geburt desersten Kindes, aber auch die erste Ehekriseund deren Bewältigung.
Bei anderen Weblogs handelt es sichzum Beispiel um Reiseberichte – wie jenereines Schülers, der sich im Rahmen einesAustauschs in Südafrika befindet und sei-ne Familie und Freunde täglich über seineErlebnisse auf dem Laufenden hält.
MeinungsforumDaneben finden sich Weblogs, die kom-mentierte Links enthalten. Beispiel: dasThema „Kochen“. Samt Fotos von appetit-lich angerichteten Speisen stellen siemanchmal eine wahre Fundgrube für Hob-byköche und Genießer dar.
Zunehmend betreiben auch Firmenund Organisationen Weblogs, die in Formvon Meinungsforen der internen Kommu-nikation dienen. Außerdem eignen sichWeblogs zur Dokumentation von Projek-ten und können eine kostengünstige Alter-native zu kommerziellen Knowledge-Ma-nagement-Systemen oder Content-Manage-ment-Systemen (CMS) darstellen.
Gleichgültig, ob es sich um ein Internet-Tagebuch, um eine kommentierte Link-Sammlung zu Spezialthemen oder umKommentare auf einer Community-Platt-form handelt: Selten sind die Einträgetrocken und strikt auf maximalen Infor-mationsgehalt ausgerichtet. Vielmehr ent-halten sie oft witzige, ironische oder sarka-stische Anmerkungen, die chronologischfortlaufend auf einer einzigen Website auf-gelistet werden. Dabei müssen die Beiträgenicht von einem einzigen Autor stammen:
Von Achim Beiermann
Das erste Weblog im World Wide Web: Über den Link http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/
old-whats-new/whats-new-0693.html gelangen Sie zu den Ursprüngen des Bloggens
048-51 210.qua 02.12.2003 13:42 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004
WeblogspGrundlagen PWorkshops PUtilities GrundlagenPpP S. 48 – S. 51
49
Die Seite kann auch Beiträge mehrerer Au-toren mit unterschiedlichen Themen ent-halten, die aufeinander Bezug nehmen, sodass eine Art von öffentlichem Gesprächs-protokoll entsteht.
2. Diese Softwarebrauchen Sie
Die Inhalte eines Weblogs werden meistmit Hilfe entsprechender Systeme erstelltund verwaltet, die im weitesten Sinne mitContent-Management-Systemen vergleich-bar sind. Allerdings ist der Funktionsum-
fang oft auf das Wesentlichs-te beschränkt, so dass auchunbedarfte Anwender ihreBeiträge problemlos undschnell ins Netz stellen kön-nen. Die für die Erstellungvon Weblogs erforderlicheSoftware wird von vielen Fir-men kostenlos zum Down-load angeboten und ist inder Regel rasch installiert.Solche Tools sind etwa Grey-matter, Sunlog, Livejournaloder Movable Type (2 Kas-ten „Ausgewählte Weblog-
Software“). Daneben finden sich web-ba-sierte Werkzeuge, die Sie unmittelbar aufdem Server des Anbieters kostenlos nutzenkönnen. Dazu melden Sie sich bei einemBlockspace-Anbieter wie 20six (www.20six.de) an, legen in wenigen Schritten ein paarEinstellungen fest, und schon können SieIhren Beitrag schreiben und in derNetzwelt veröffentlichen.
Haben Sie jetzt Lust auf Ihr eigenes Web-log bekommen? Wir zeigen Ihnen im Fol-genden, wie Sie in wenigen Minuten zum„Weblogger“ werden.
3. So legen Sie Ihreigenes Weblog an
Der kostenlose Dienst Blogger.com, den derSuchmaschinenanbieter Google zu Beginndes Jahres 2003 übernommen hat, war si-cher einer der Auslöser für den vor etwadrei Jahren aufgekommenen Weblog-Boom. Blogger ist ein einfaches, englisch-sprachiges, web-basiertes Werkzeug, mitdem Sie eigene Weblogs ohne Program-mierkenntnisse auf dem Blogspot-Serveroder über ASP-Funktionen auf Ihrem eige-nen Webspace-Server einrichten. Account einrichten: Auf der Homepage desBloggers (www.blogger.com) drücken Sie denButton „Start Now“, um im darauf folgen-den Fenster einen Account einzurichten.Dort vergeben Sie einen beliebigen Ac-count-Namen und tragen Ihren Vor- undNachnamen, Ihre Mailadresse sowie einPasswort ein. Nachdem Sie die Nutzungs-bedingungen gelesen und mit einem Häk-chen in der Checkbox „I Accept“ akzeptierthaben, klicken Sie auf „Sign up“. Weblog benennen: Im ersten von vier weite-ren Schritten benennen Sie Ihr Weblogund beschreiben es kurz im Eingabefeld„Description“. Belassen Sie es bei der Frage„Public Blog?“ bei der Standardeinstellung„Yes“, wird Ihr Weblog in einem öffentli-chen Blogger-Verzeichnis geführt. Der But-ton „Next“ führt Sie zum nächsten Schritt.Server auswählen: Nun haben Sie die Wahl:Entweder legen Sie Ihr Weblog auf einemso genannten „Blogspot“ ab, oder Sie ladenes per FTP auf Ihren eigenen Webspace-Ser-ver. Letzteres funktioniert allerdings nichtbei Zugangs-Providern wie T-Online oderAOL, da deren Standardeinstellungen keineneuen Einträge von Bloggern in ihrem Be-reich zulassen. Bietet Ihr Provider keineMöglichkeit für einen Weblog, bleibt Ihnennichts anderes übrig, als die Option „Host
Inhalt Seite
1. Ein Weblog bietet sich für viele Inhalte an 48
2. Diese Software brauchen Sie 493. So legen Sie Ihr eigenes Weblog an 494. So machen Sie Ihr Weblog bekannt 51
http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/old-whats-new/whats-new-0693.html Das erste Weblog wurde unter die-sem Link für die Nachwelt archiviert.http://dmoz.org/World/Deutsch/Computer/Internet/WWW/Weblogs/ Auf dieser Seitesind deutschsprachige Weblogs aufgelistet.www.bloghaus.net Das Bloghaus ist eineCommunity für deutschsprachige Blogger, inder neue Weblogs vorgestellt und aktuelleThemen aus der Szene diskutiert werden.www.blogtree.com Hier tragen Blogger ihrWeblog ein und erklären, welche anderen Weblogs sie veranlasst haben, selbst eines zu erstel-len. So entsteht mit der Zeit ein überdimensionaler Stammbaum, aus dem ersichtlich ist, wiesich die Weblogs gegenseitig beeinflusst haben.www.dienstraum.com „Dienstraum“ ist ein Weblog über Medien. Es befasst sich insbesonde-re mit Telekommunikation, Internet, Medien, Entertainment und Software, daher kurz: TIMES.www.moving-target.de Die Autorin und Web-Designerin Carola Heine zählt mit ihrem MovingTarget, das sie seit 1996 betreibt, bereits zu den „ältesten“ deutschsprachigen Bloggern.www.schockwellenreiter.de Eines der bekanntesten deutschen Weblogs ist der Schockwellen-reiter, der nach eigener Aussage für „die tägliche Ration Wahnsinn“ steht.www.technorati.com Hier finden Sie die Top 100 der meistgelinkten Weblogs.www.weblogs.com Der Weblog-Monitor präsentiert täglich neu eingerichtete Weblogs. www.weblogverzeichnis.de Das Verzeichnis gibt einen Überblick über Weblogs, die vondeutschsprachigen Autoren betreut werden.
Blocktree.com: Hier tragen Blogger ihr Weblog einund erklären, welche Weblogs sie beeinflussten
Bloghaus: Eine Community für deutschsprachige Blogger, in der neue Web-
logs vorgestellt und aktuelle Themen aus der Szene diskutiert werden
048-51 210.qua 02.12.2003 13:42 Uhr Seite 3
PC-WELT SONDERHEFT 2/2004 51
WeblogsPGrundlagen pWorkshops PUtilities WorkshopsPPp S. 48 – S. 51
it at BlogSpot“ zu wählen. Bei einem Provi-der-Wechsel können Sie jederzeit mit allenArchiven auf Ihre neue Website ziehen.
Entscheiden Sie sich für FTP-Publishingauf eigenem Server, tragen Sie in die ent-sprechenden Formularfelder den FTP-Ser-ver, den internen Pfad sowie den Dateina-men ein, den die Startseite des Weblogs ha-ben wird. Das Unterverzeichnis für IhrWeblog müssen Sie aber zuvor angelegt ha-ben! Zum Schluss geben Sie als URL diekünftige Web-Adresse des Bloggers an, be-vor Sie den Button „Next“ drücken und di-rekt zu den Design-Vorlagen gelangen.Internet-Adresse festlegen: Die Blogspot-An-wender vervollständigen beim vorletztenSchritt die URL-Adresse, unter der ihr Web-log zu finden ist, und erklären sich mit denNutzungsbedingungen für den Blogspot-Service einverstanden. Danach geht esauch für diesen Nutzerkreis über „Next“weiter zum letzten Schritt.
Design-Vorlage auswählen: Hiersteht Ihnen eine Reihe ferti-ger Weblog-Designs zur Ver-fügung, die Sie sich im Ein-zelnen über den Link „Ex-ample“ näher anschauenkönnen, bevor Sie ein De-sign auswählen und denButton „Finish“ drücken.Die Design-Vorlagen basie-ren übrigens auf HTML-Tem-plates, die sich jederzeit indi-viduell anpassen oder kom-plett austauschen lassen. Bloggen Sie los! Den Textschreiben Sie ins große Ein-gabefeld des folgenden Fens-
ters. Zur Formatierung stehen Ihnen alsButtons die HTML-Tags Bold und Italic zurVerfügung. Eine Rechtschreibprüfung gibtes jedoch nur für englischsprachige Texte.
Sobald Sie die Eingabe abgeschlossenhaben, drücken Sie die Schaltfläche „Post& Publish“. Ihr Beitrag wird nun gespei-chert und gleichzeitig im Web veröffent-licht. Das fertige Ergebnis können Sie sichunter der von Ihnen vervollständigten URL-Adresse ansehen.
4. So machen Sie Ihr Weblog bekannt
Wie beschrieben, ist es eine einfache Sache,ein Weblog zu starten. Aber viele Autorenmüssen bereits nach kurzer Zeit feststellen,dass es nicht der erhoffte Publikums-magnet ist. Im Gegenteil: Oft herrscht gäh-nende Leere, niemand liest die Beiträge, somancher Blogger verliert deshalb rasch dieLust, seinen Weblog dauerhaft fortzu-
schreiben. Zurück bleiben dann Ruinen,deren letzte Einträge ziemlich lange hersind.
Um das möglichst zu verhindern, soll-ten Sie Ihr Weblog wie jede andere Siteauch bei Suchdiensten anmelden. Dies istvor allen Dingen dann sinnvoll, wenn Siesich in Ihrem Weblog mit einem speziellenThema von allgemeinem Interesse befas-sen. Auch der Eintrag in so genannten Web-log-Listen wie etwa Weblogcheckup (www.weblogcheckup.de) kann die Besucherzahlnachhaltig erhöhen.Eigene Favoriten anzeigen: Es gibt eine Vielzahlvon Websites, die dadurch von allgemei-nem Interesse sind, dass sie umfangreiche,qualifizierte Link-Listen anbieten. Auch Siekönnen Ihr Weblog zum Einstiegstor in dieBlogger-Welt machen, indem Sie über an-dere Weblogs informieren. So mancherBlogger, von der einen expliziten Erwäh-nung geschmeichelt, revanchiert sich ger-ne, indem er seinerseits in einem Eintragauf Ihr Weblog verweist.Links hinterlassen: Eine weitere Möglichkeit,Ihr eigenes Weblog bekannter zu machen,ist diese hier: Verfassen Sie in anderen Web-logs Beiträge, in denen ein Link zu Ihremeigenen Weblog auftaucht.
Dabei sollten Sie sich allerdings ein we-nig Zurückhaltung auferlegen, weil Web-log-Experten diesen „Trick“ rasch durch-schauen und davon genervt sein könnten.Verzichten Sie deshalb darauf, den Link un-mittelbar in Ihrem Beitrag zu erwähnen.Eleganter und effektiver ist es, den Link inIhre persönlichen Angaben zu integrieren.
Up to date: Damit Sie Ihr Weblog auch unterwegs aktualisieren können,
ermöglichen manche Anbieter, etwa 20six, das Bloggen per SMS/MMS
Ausgewählte Weblog-Software
Wenn Sie auf Ihren eigenen Seiten ein Weblog erstellen wollen, benötigen Sie eine spezielleWeblog-Software. In diesem Fall sollten Sie sich vorab informieren, welche Datenbankformenund welche Optionen der eingesetzte Hostserver unterstützt. So sind beispielsweise oft PHPund eine MySQL-Datenbank erforderlich, damit die Software sich verwenden lässt.
Software Download
Greymatter 1.3 http://noahgrey.com/greysoft/
Livejournal www.livejournal.com
Movable Type 2.64 www.movabletype.org
P-Machine Free 2.21 www.pmachine.com
C Project Steve Guttenberg (PSG) 1.8.1 www.projectsteveguttenberg.org
C Sunlog 2.3 www.sunlog.org
C auf Heft-CD
Ausgewählte Blogspace-AnbieterWeblog-Communities bieten Fertiglösun-gen an: Sowohl Software als auch Web-space sind vorhanden. Sie brauchennichts weiter zu tun, als sich in einer Com-munity zu registrieren und anzufangen.Bei den folgenden Blockspace-Anbieternerstellen Sie ohne Programmierkenntnis-se kostenlos Ihr eigenes Weblog: http://new.blogger.comwww.20six.dewww.antville.org www.blogger.dewww.bloggingnetwork.comwww.diaryland.comwww.yourblog.de
048-51 210.qua 02.12.2003 13:43 Uhr Seite 4
PC-WELT SONDERHEFT 2/200452
Ihre Homepage muss Sie nicht nur Geld kosten – Sie können auch welches damit verdienen! Lesen Sie, wie Sie ohne großen Aufwand für stetige Einnahmen sorgen.
Geld für Ihre Website
Lassen Sie Ihre Homepage für Ihr Porte-monnaie arbeiten. Über so genannte Part-nerprogramme seriöser Firmen und Ver-mittler sowie gesponserte Verkäufe fließenMonat für Monat Provisionen auf Ihr Kon-to. Reich werden können Sie so in aller Re-gel nicht. Aber als kleiner Zuverdienst, derzumindest Ihre Homepage-Kosten deckt,langt es meist allemal.
Als Homepage-Besitzer haben Sie dieWahl zwischen vielen Anbietern, sofern Ih-re Homepage nicht gegen gängiges Rechtverstößt oder unerwünschte Inhalte auf-weist und sofern Sie für einen Anbieter alsGeschäftspartner interessant sind.
1. So können Sie werbenAls Website-Anbieter steht Ihnen eine Viel-zahl an Werbeformen zur Verfügung. Zumeinen gibt es die bekannten Banner in meh-reren genormten Größen. Die gebräuch-
lichsten sind das so genannte Full-Size-Ban-ner, eine Grafik, die 468 x 60 Pixel groß ist,sowie das Half-Size-Format mit 234 x 60 Pi-xeln. Wenn Sie ein solchesBanner platzieren möchten,sollten Sie bei der Gestal-tung Ihrer Website an mar-kanten Stellen entspre-chend Platz lassen.
Außerdem können Siemit Text-Links auf das Ange-bot des Werbetreibendenverweisen, dessen PartnerSie sind. Vorteil: Die Text-Links lassen sich in den nor-malen Fließtext Ihrer Siteeinbauen, die Werbung trittnicht mehr so offensichtlichals solche in Erscheinung.
Eine für Website-Besitzersehr gute Form der Wer-
bung sind Pop-up-Fenster. Hierbei handeltes sich um kleine Fenster, die parallel zureigentlich vom Besucher gewünschtenWeb-Seite aufgehen. Zuweilen werden siehinter die Site gelegt, damit sie erst dannsichtbar werden, wenn der Benutzer dieWeb-Seite schließt.
Pop-up-Fenster werden in die Web-Seiteals Javascripts eingefügt. Unterstützt derBrowser des Besuchers Javascript nichtoder ist die Unterstützung ausgeschaltet,erscheinen auch die Pop-ups nicht.
WerbeblockerViele Anwender haben mittlerweile Toolsinstalliert, mit denen sich Werbung blo-ckieren lässt. Dazu gehört etwa die Google-Toolbar (www.google.de/toolbar), die Pop-up-Fenster unterdrückt. Der Webwasher (www.webwasher.de) geht noch einen Schritt weiterund kann sogar Banner in den Standard-größen ausblenden (2 Abbildung unten).
Sie können diesen Werbeblocker aller-dings überlisten. Verwenden Sie Banner,die nicht den Standards entsprechen unddie der Webwasher aus diesem Grund alsBilder der Web-Seite ansieht.
Haben Sie eine größere Community – zum Beispiel im Rahmen eines Forums –aufgebaut, können Sie auch die so gesam-melten Mailadressen zu Geld machen, et-wa mit Hilfe von Newslettern. Dies setzt al-lerdings voraus, dass sich die Besucher da-zu bereit erklärt haben, von Ihnen solcheNewsletter zu erhalten.
Allen Werbeformen ist gemeinsam, dassein Klick auf das Banner oder Pop-up-Fens-ter oder auf einen Werbe-Link zum Wer-betreibenden führt, wo registriert wird,dass der Besucher von Ihrer Site kommt.
Von Ingo Böhme
(Nicht) werbefrei: Tools wie Webwasher unterdrücken Werbeeinblendungen
anhand der Banner. Es gibt aber Tricks, die Tools zu überlisten (Punkt 1)
052-57 313NEU.qua 02.12.2003 14:34 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 53
Homepage-EinnahmenpGrundlagen PWorkshops PUtilities GrundlagenPpPP S. 52 – S. 57
2. So wird Ihre Werbung vergütet
Bei der Vergütung gibt es die unterschied-lichsten Varianten. Das reine Anzeigen derWerbung auf Ihrer Website bringt in derRegel kein Geld, es sei denn, Sie haben einWerbebanner direkt verkauft.
Wenn Sie beispielsweise eine Seite überWeine betreiben, hat der Entwickler einerWeindatenbank möglicherweise Interessedaran, dauerhaft bei Ihnen angezeigt zuwerden. Bei solchen Konstellationen liegendie Preise je nach Besucherzahl zwischen10 Euro und – im absoluten Extremfall –mehreren 1000 Euro pro Monat.
Pay-per-ClickBei Partnerprogrammen erhalten Sie dage-gen nur eine erfolgsabhängige Vergütung.Das heißt, der Werbetreibende zahlt nurdann, wenn er auch tatsächlich etwas da-von hat, wenn der Besucher nämlich aufdas Banner klickt. Bei diesem so genanntenPay-per-Click (PPC) sind Vergütungen von
1 bis 20 Cent die Norm. Weraber glaubt, er bräuchtesich nur noch hinzusetzenund den ganzen Tag auf dasBanner zu klicken, um sosteinreich zu werden, wirdenttäuscht. Denn anhandvon Cookies und der IP-Adresse merkt das Überwa-chungssystem, dass derKlick von ein und demsel-ben Besucher kommt, undzählt ihn nur einmal.
UmsatzbeteiligungEinen Schritt weiter gehenmanche Online-Shops. Hierwerden Sie in der Regel miteinem Prozentsatz am Um-
satz des Besuchers beteiligt, der von IhrerWebsite zum Shop gelangt ist. Achten Siedarauf, ob Sie auch bei Folgekäufen parti-zipieren oder wenn der Besucher nichtgleich beim ersten Mal seinen Einkaufswa-gen zur virtuellen Kasse schiebt. Diese Kon-ditionen sind in der Regel im Rahmen derPartnerprogramme genau festgelegt.
Während Sie bei den Klicks anhand derWebserver-Protokolle noch selbst überprü-fen können, ob der Ihnen gutgeschriebeneBetrag auch wirklich stimmt, sind Sie beider Umsatzbeteiligung auf die Aussagendes Shops angewiesen. Zu etwas mehr Ver-trauen verhelfen Ihnen die Vermittler, dieso genannten Partnerprogramm-Netzwer-ke, denn sie haben Möglichkeiten, die Ver-käufe im Shopsystem des Werbetreibendenzu überwachen.
Tipp: Wenn Sie als Website-Anbieterselbst etwas über das bei Ihnen geschalteteBanner einkaufen, partizipieren Sie eben-falls am Umsatz. Sie kaufen also gewisser-maßen mit Prozenten ein.
LeadÄhnlich wie beim Shop wird auch beim sogenannten „Lead“ (englisch für „Vermitt-lung“) nur im Erfolgsfall gezahlt, zum Bei-spiel, wenn ein Besucher einen Newsletterabonniert. Da fallen dann schon mal 25Cent bis hin zu mehreren Euros ab.
Aber lassen Sie sich nicht von zu hohenFallpauschalen blenden: lieber eine inter-essante Teilhabe an einem lukrativen Ge-winnspiel, mit dem Sie 100 Leads pro Tagfür 25 Cent generieren, als 20 Euro für dieVermittlung eines Angebots, das keinen in-teressiert. Das setzt natürlich eine gewisseBesucheranzahl auf Ihrer Website voraus.
3. Direkte PartnerprogrammeViele große Firmen bieten selbst Part-nerprogramme an. So können Sie bei-spielsweise beim Internet-Serviceprovider1&1 an dessen Programm „Kunde wirbtKunde“ teilnehmen (http://hosting.1und1.com,2 große Abbildung auf Seite 52). Voraus-setzung ist, dass Sie mindestens ein Web-Angebot von 1&1 nutzen.
Über allgemeine Suchmaschinen wieGoogle sind solche Partnerprogrammeschwer zu finden. Aber es gibt Spezialsuch-maschinen, etwa www.partnerprogramm.de.Wenn Sie dort nach einem Begriff suchen– beispielsweise nach „Foto“, falls sich IhreWebsite um die Fotografie dreht –, erhaltenSie etliche Einträge von Unternehmen, diePartnerprogramme anbieten. Außerdemfinden Sie in den Link-Listen der Site weite-re Suchmaschinen und Übersichten zuPartnerprogrammen.
4. Bücher & Co. verkaufen mit AmazonDas vielseitigste und für so gut wie jedeWebsite mögliche Partnerprogramm bietetder Internet-Buchhändler Amazon. Wermit seiner Partner-ID den Verkauf eines Bu-ches vermittelt, erhält zwischen 5 und 15
Inhalt Seite
1. So können Sie werben 52 2. So wird Ihre Werbung vergütet 53 3. Direkte Partnerprogramme 534. Bücher & Co. verkaufen mit Amazon 53 5. Partnerprogramm-Netzwerke 57
KästenTipps für bessere Ergebnisse 53Partnerprogramm-Netzwerke 54Klick-Verhalten kontrollieren 57
Tipps für bessere ErgebnisseBanner und Pop-up-Fenster alleine werden Siesicher nicht reich machen. Sehr viel mehr Be-sucher werden auf Ihre Partner-Links klicken,wenn Sie folgende Tipps berücksichtigen:1. Integrieren Sie die beworbenen Produkteund Dienstleistungen im redaktionellen Teil Ihrer Website. Eine persönliche Meinung istzehnmal mehr wert als das tollste Banner.2. Suchen Sie bei Verbraucherportalen – etwawww.ciao.de oder www.dooyoo.de – nach In-
formationen über die Produkte, und verweisenSie auf entsprechende Testberichte.3. Achten Sie auf die Inhalte der Werbung, dieauf Ihrer Website präsentiert wird. Sie solltenthematisch zu Ihrem Auftritt passen. 4. Assoziieren Sie Themen, die Ihre Besucherüber den speziellen Inhalt der Homepage hin-aus auch interessieren könnten. Bei einer Sei-te über Fotografie ist davon auszugehen, dassdie Besucher meist auch gerne reisen.
Finden: Bei Partnerprogramm.de kann man neben Suchbegriffen auch Ver-
gütungsart, Bannergröße und Mindestverdienst angeben (Punkte 3 und 5)
Prozent des Buchpreises – das ist mehr alsdie meisten Fachbuchautoren bekommen.Weil es zu jedem Themenbereich Büchergibt, ist auch für Ihre Website sicher etwasdabei. Und da es bei Amazon nicht nurBücher, sondern auch Musik-CDs, Videofil-me, DVDs und mittlerweile sogar Elektro-nikartikel zu kaufen gibt, sind die Werbe-möglichkeiten vielfältig.
Als Partner anmeldenUm sich bei Amazon als Partner zu regis-trieren, gehen Sie zunächst auf die Startsei-te www.amazon.de. Am linken Rand sehen Sieden Kasten „Entdecken“. Klicken Sie darinauf den ersten Link „Partnerprogramm“.Auf dieser Seite registrieren Sie sich überdie Schaltfläche „Jetzt mitmachen!“ als neu-er Partner. Folgen Sie den Anweisungen aufden Folgeseiten, und geben Sie Ihre An-
schrift und Kontoverbin-dung an. Nach der letztenAnmeldeseite erhalten SieIhre eindeutige Partner-ID.Anhand dieser Kennungwerden Verkäufe IhremPartnerkonto zugerechnet.
Partner-Links generierenHaben Sie sich unter http://partnernet.amazon.de neu ein-geloggt, gelangen Sie zurPartner-Net-Startseite. Hierkönnen Sie für jedes Pro-dukt, das bei Amazon er-hältlich ist, einen individu-ellen Link erzeugen lassen.Klicken Sie dazu im oberen
Bereich der Web-Seite auf „Link-Generator“.Auf der nun erscheinenden Seite sehen Siejetzt so genannte dynamische Links. Dassind Verknüpfungen zu Bestsellern, die täg-lich oder wöchentlich aktualisiert werden.Haben Sie einen solchen Link erstellt undauf Ihrer Homepage eingebunden, änderter immer dann sein Aussehen, wenn Ama-zon eine neue Bestsellerliste veröffentlicht.
Interessanter sind jedoch die statischenLinks. Klicken Sie oben rechts auf das oran-gefarbene Kästchen „Statische Links“. Aufder Seite, auf die Sie nun gelangen, findenSie im unteren Bereich den Abschnitt „Ein-zeltitel-Link“. Klicken Sie dort auf dieSchaltfläche „Link erstellen“. Auf der nächs-ten Seite müssen Sie in dem Textfeld dieAmazon-eigene Bestellnummer – ASIN ge-nannt – eingeben. Bei Büchern entsprichtdiese Nummer der ISBN, die auch auf den
Buchrückseiten steht. In jedem Fall findenSie die ASIN bei allen Artikel-Detailseiteninnerhalb von Amazon.de. Tipp: MachenSie ein zweites Fenster auf, um die einzel-nen Bücher und Produkte innerhalb vonAmazon.de zu recherchieren, für die Siedann die Links erstellen lassen.
Partner-Links in Website einbauenWenn Sie beispielsweise das Buch „Digital-fotografie. Das große Einsteigerbuch“ aufIhrer Website vorstellen möchten, tragenSie die ISBN „3899940105“ ein (ohne An-führungszeichen). Achtung: Die Eingabedarf keine Leer- oder Sonderzeichen ent-halten. Nachdem Sie auf „Link erstellen“geklickt haben, erhalten Sie den HTML-Code für einen Text- und – separat – für ei-nen Bilder-Link (2 Abbildung oben links).
Klicken Sie im Eingabekasten unter„Bild-Link HTML“ dreimal schnell hinter-einander mit der linken Maustaste, um dengesamten Inhalt zu markieren, und kopie-ren Sie mit <Strg>-<C> in die Zwischen-ablage. Öffnen Sie den Quelltext der HTML-
www.partnerprogramm.de sehr übersichtlicher Anbieter mit viel- ab 25 Euro 5 Euro gute Suchfunktion auch nach Werbe-
fältigem Portfolio von über 650 Werbe- form; einfach zu bedienende Oberfläche;
programmen passable Statistik; Qualitätsindex der
Werbetreibenden anhand Berechnungsformel
www.tradedoubler.com Partnernetzwerk mit rund 100 Werbe- ab 25 Euro – keine Suchfunktion; hervorragende Werbemit-kunden tel-Vorschau aller Anbieter; die besten Statisti-
ken und Berichte aller Partnerprogramm-Netzwerke
www.vitrado.de kleines deutsches Partnerprogramm mit ab 25 Euro 2,50 Euro funktioniert zusätzlich zur Internet-Präsenzwenigen Partnern und konkreten Produkten auch per SMS, Fax, Telefon und Mail
www.zanox.de Partnernetzwerk mit rund 300 nationalen ab 25 Euro – Programmsuche nur nach Rubriken und Stich-und internationalen Werbekunden wörtern; sehr ausgefeilte und flexible Statistik
Integriert: Als Empfehlung wirkt das beworbene Buch
(links) nicht mehr wie Werbung (Punkt 4)
Amazon-Link: Den richtigen Link samt Verweis auf Ihre Partner-ID und das
Homepage-EinnahmenpGrundlagen PWorkshops PUtilities GrundlagenPPPp S. 52 – S. 57
Seite, auf der das Bild erscheinen soll. FügenSie an der passenden Stelle den Inhalt derZwischenablage mit <Strg>-<V> ein. Ama-zon geht davon aus, dass Sie das Cover-Bildim selben Verzeichnis wie die HTML-Dateispeichern. Dazu klicken Sie mit der rechtenMaustaste auf das kleine Cover-Bild undspeichern es im HTML-Verzeichnis ab.
Alternativ können Sie den generiertenLink so erweitern, dass sich die HTML-Seitedas Bild direkt vom Amazon-Server holt. Su-chen Sie im Link den HTML-Code
<IMG SRC="
und erweitern Sie dies um die ULR „http://images-eu.amazon.com/images/P/“ (ohneAnführungszeichen):
<IMG SRC="http://images-eu.amazon.com/images/P/
Wollen Sie statt des kleinen das große Co-ver angezeigt haben, ändern Sie im Bilder-Dateinamen „.TZZZZZZZ.gif“ in „.MZZZZZZZ.gif“ um.
5. Partnerprogramm-NetzwerkePartnerprogramm-Netzwerke sind virtuel-le Vermittlungsagenturen für Werbemaß-nahmen im Internet. Wie Sie als Home-page-Besitzer vorgehen, ist bei allen Part-nerprogrammen gleich.
Als erstes registrieren Sie sich. NebenIhren persönlichen Daten melden Sie aucheinen oder mehrere Domain-Namen an.Nur Banner auf den angemeldeten Do-mains nehmen an den Werbemaßnahmen
des Partnerprogramms teil. Sollten Sietrotzdem Banner auf anderen Sites ein-blenden, zählen die Klicks und Sales nicht.
Werbepartner auswählenHaben Sie sich registriert, steht die Aus-wahl der Werbepartner auf dem Pro-gramm. Dazu sind alle Werbetreibenden inKategorien wie Hardware, Reise oder Un-terhaltung eingeteilt. Alternativ verwen-den Sie die Suche. Bei den meisten Partner-programm-Netzwerken lassen sich nurSuchbegriffe recherchieren. Partnerpro-gramm.de bietet dagegen auch die Selek-tion nach Bannergröße, Vergütungsart(Klick, Sale, Lead) und Mindestverdienst.
Bei allen Partnerprogrammen gilt: Wol-len Sie sämtliche Anbieter angezeigt be-kommen, um sich etwa offline in Ruhe für
die passenden Angebote zuentscheiden, geben Sie alsSuchbegriffe „a“ ein (ohneAnführungszeichen). HabenSie ein interessantes Ange-bot für Ihre Website gefun-den, gehen Sie auf die De-tailseite des Anbieters. Ge-fällt Ihnen das Angebot, sokönnen Sie sich mit IhrerHomepage beim Anbieterbewerben. Der besuchtdann Ihren Internet-Auftrittund entscheidet, ob dieserzur Werbekampagne passt.Je nach Anbieter bekommenSie innerhalb weniger Minu-ten oder auch erst nach eini-gen Tagen eine Zu- oder Ab-sage. Erst wenn Sie eine po-
sitive Rückmeldung erhalten haben, dür-fen Sie die Werbung auch auf Ihrer Site an-zeigen. Tipp: Bewerben Sie sich besondersam Anfang bei vielen Programmen. Da-durch entstehen Ihnen keine Kosten, undSie können gleich mit dem reaktions-schnellsten Werbetreibenden anfangen.
HTML-Code einfügenHaben Sie die Zusage erhalten, besuchenSie erneut im Partnerprogramm-Netzwerkdie Detailseite des Werbetreibenden. Dortfinden Sie unter „Linkauswahl“ oder „Wer-bemittel“ alle Werbeformen, die der Anbie-ter zur Verfügung stellt.
Ebenso steht dort der HTML-Code fürdie entsprechende Werbung. Kopieren Siediesen in die Zwischenablage und fügenSie ihn im HTML-Quellcode Ihres Doku-ments an der Stelle ein, an der das Bannererscheinen soll. In diesem Code ist bereitsalles enthalten – Sie brauchen nur nochauf den warmen Geldregen zu warten.
Mehr InfosInternet/Buch
Das ausschließlich werbefinanzierte E-Book
„Homepage Erfolg“ (www.homepage-erfolg.de)
von Stefan Rüttinger, das es auch in gedruckter
Form für 39,90 Euro (ISBN 3-833-00643-9)
gibt, bietet zahlreiche Infos, wie Sie Ihre Home-
page zu einem kommerziellen Erfolg führen
oder Ihre private Homepage mit Hilfe von Part-
nerschaften finanzieren. Zudem bietet das
rundum empfehlenswerte Buch Checklisten,
Link-Listen und rechtliche Tipps.
So kontrollieren Sie das Klick-Verhalten
Um zu entscheiden, ob sich eine Werbunglohnt, müssen Sie wissen, wie oft Ihre Besu-cher das Banner gesehen, wie oft sie daraufgeklickt und – bei Pay-per-Sale-Vergütung –welche der Klicks dann auch zu einem Einkaufgeführt haben. Dazu bieten alle in diesem Bei-trag genannten Anbieter Statistiken an. Klickt so gut wie niemand auf das angezeigteBanner, scheint es für Ihren typischen Besu-cher kein interessantes Thema zu sein, oderdas Banner ist schlecht.
Klicken hingegen viele Besucher auf dasBanner und keiner kauft etwas, kann das auchan der Qualität der Online-Shops liegen. In je-
dem Fall sollten Sie dann einmal etwas ande-res probieren – einen anderen Anbieter, ande-re Produkte oder andere Banner.
Durchblick: Die Tradedoubler-Werbemittel-Matrix
zeigt sofort, wer mit welchen Werbeformen arbeitet
Nackte Zahlen: Anhand der Statistiken, hier von Zanox.de, erhalten Sie ei-
nen Überblick, welche Partnerprogramme sich für Sie lohnen (Punkt 5)
052-57 313NEU.qua 02.12.2003 14:35 Uhr Seite 5
Grundlagen Grundkurs I: Die erste Homepage pGrundlagen PWorkshops PUtilities
PC-WELT SONDERHEFT 2/2004XX
PPpPPP S. xx – S. xx
Im Verlauf dieses fünfteiligen Grundkurses zeigen wir Schrittfür Schritt, wie Sie eine einfache Website erstellen. DasBeispielmaterial finden Sie zum Nachbauen auf der Heft-CD.
Von Wolfgang Nefzger
Die erste Homepage
WOR
KSHO
PS
Ihre erste Homepage ist in ein paar Stun-den fertig. Ganz bestimmt. Wir zeigen Ih-nen detailliert und nachvollziehbar, wieSie die Seite mit Text, Bildern sowie Linksgestalten und online stellen. Auf der
C Heft-CD finden Sie die Beispieldateien. Als Thema haben wir die Website eines
Landrover-Autoclubs ausgewählt. Die In-halte sind jedoch austauschbar, nach dem-selben Schema lässt sich also beispielswei-se auch eine private Familien-Site, eine Vor-stellung des eigenen Hobbys oder die Web-Präsenz eines Sportclubs gestalten.
Im ersten Teil gestalten Sie eine einzelneWeb-Seite mit Überschrift, Text, ausgerich-teten Absätzen, einem Hintergrundbildund einer Logo-Grafik. Danach übertragenSie die Dateien, aus denen die fertige Web-
Seite besteht, auf den Webserver beim Pro-vider. Damit ist die Website online, und je-der Surfer kann sie abrufen.
Im zweiten Teil des Grundkurses plat-zieren Sie mit einem unsichtbaren Tabel-len-Layout Navigationsleiste, Logo sowieÜberschrift und geben so Ihrer ersten Web-Seite den Feinschliff. Im dritten Teil erstel-len Sie eine Fotogalerie, im vierten eineLink-Liste und im fünften ein Gästebuch.
1. Gratis-Web-Editor besorgen:Netscape Composer
Als Editor für die Web-Seiten kommt beiuns der kostenlose Browser Netscape 7 zumEinsatz. Sie laden das Programm unterwww.netscape.de herunter (2 Abbildungrechte Seite). Mit identischen Menübefeh-
58 ERSTE HOMEPAGESo erstellen Sie eine Site
64 LAYOUT MIT ZELLENSo platzieren Sie Elemente
68 FOTOS IM WEB Arbeiten mit Fotogalerien
76 JAVASCRIPTEffekte mit Javascript
80 SEITEN MIT STYLECascading Stylesheets
84 BILDER OPTIMIERENSo kommen Bilder ins Web
88 FLASHPep mit Flash-Animationen
und viele weitere Themen
WORKSHOPS
Grundkurs I
301 02.12.2003 17:49 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 59
Grundkurs I: Die erste HomepagepGrundlagen PWorkshops PUtilities GrundlagenPPPpPP S. xxx – S. xxx
len kommt die Open-Source-Software Mo-zilla (www.mozilla.org). Die Installation ist je-doch umständlicher, und die Programm-oberfläche sieht ein bisschen anders aus.
Zu diesen beiden Browsern gehört eincleverer Web-Editor, der Composer. Damitentwerfen Sie Web-Seiten, ohne HTML, die„Programmiersprache“ des Web, kennenzu müssen. Wie in Word geben Sie Texteein, formatieren Absätze und Überschrif-ten, klinken Bilder ein und so weiter.
Nach der Installation von Netscape ru-fen Sie im Start-Menü den Eintrag „Pro-gramme, Netscape 7.1, Composer“ auf. Es
erscheint ein typisches Windows-Fenstermit Menü- und Symbolleiste sowie einemgroßen Eingabebereich. Bevor Sie die ersteWeb-Seite in Angriff nehmen, sollten SieComposer anpassen. Dazu rufen Sie denMenüpunkt „Bearbeiten, Einstellungen“auf und wählen links die Kategorie „Com-poser“. Auf der rechten Seite löschen Siedas Häkchen vor „Verwenden von CSS-Sti-len anstelle von HTML-Elementen und -At-tributen“. Damit stellen Sie sicher, dass derEditor nur HTML erzeugt. Mehr über denCSS-Modus (CSS steht für Cascading StyleSheets) und kleine Fehler lesen Sie im
2 Kasten „CSS-Modus: Feh-ler in Composer“.
2. INDEX.HTML: Der Nameder Startseite
Fangen Sie einfach damitan, den gewünschten Textfür die Web-Seite einzutra-gen (2 Abbildung folgendeSeite oben). Die Überschriftoder einen Absatz schließenSie mit der <Return>-Tasteab. Zwischendurch oder spä-testens am Ende der Textein-gabe ist es sinnvoll, den ak-tuellen Zustand auf der Fest-platte zu sichern. Dazu ru-
fen Sie den Menüpunkt „Datei, Speichern“auf. Composer zeigt eine Dialogbox, dienach dem Titel der neuen Web-Seite fragt.Der Titel erscheint zwar nicht auf der Web-Seite, aber in der Titelleiste des Browsers,mit dem die Seite geladen wird. Tragen Sieeinen sinnvollen Text ein, in unserem Bei-spiel etwa „Landrover-Club München“. Be-stätigen Sie mit einem Klick auf „OK“.
Nun erscheint die gewohnte „Spei-chern“-Dialogbox von Windows. Als Da-teiname tragen Sie INDEX.HTML ein undbestätigen mit „Speichern“. Diesem Datei-namen kommt eine besondere Bedeutungzu, ein anderer Name funktioniert nicht.Wenn Sie im Browser eine Adresse wiewww.pcwelt.de eintippen, dann fordert derBrowser beim Webserver die Startseite an.Da Sie den Dateinamen der Startseite inder Adresse weggelassen haben, verwendetder Webserver seine Standardeinstellungund schickt die Datei INDEX.HTML.
Was die Erweiterung des Dateinamensbetrifft, so sind sowohl HTML als auch HTMerlaubt – beide funktionieren mit allenWebservern und Browsern. Sie sollten sichnur auf eine Schreibweise festlegen, sonst
Inhalt Seite
1. Gratis-Web-Editor besorgen 582. INDEX.HTML: Der Name der
Startseite 593. Text formatieren 604. Schriftart und Farben 605. Seitenhintergrund:
Farbe oder Muster 616. Gegenprüfung 617. Bild einbauen 628. HTML-Tags einfügen 629. Seite publizieren:
Parameter eintragen 6310. Dateien hochladen per FTP 63
KästenWYSIWYG, Tags, HTML oder Vorschau? 61Das richtige Format für Bilder 62CSS-Modus: Fehler in Composer 63
Homepage-Bauer: Mit einem Web-Editor wie dem kostenlosen Composer
entwerfen Sie Web-Seiten, ohne HTML kennen zu müssen (Punkt 1)
301 02.12.2003 17:49 Uhr Seite 3
Workshops Grundkurs I: Die erste Homepage PGrundlagen pWorkshops PUtilities
PC-WELT SONDERHEFT 2/200460
PPpPPP S. 58 – S. 63
machen Sie über kurz oder lang Fehler.Auch auf die Groß- und Kleinschreibungim Dateinamen sollten Sie achten – mehrdarüber lesen Sie 2 ab Seite 38.
Betreiben Sie mehrere Websites, solltenSie für jede davon ein eigenes Verzeichnisanlegen. Sie kommen sonst schnell durch-einander, da eine Site aus vielen verschiede-nen Dateien besteht. Spätestens beim Hoch-laden der Dateien auf den Webserver wäredie Gefahr groß, eine Datei zu vergessen.
3. Wie in Word:Text formatieren
Nach dem Speichern markieren Sie mit derMaus die Überschrift. Ein einzelnes Wortlässt sich übrigens, wie von Word gewohnt,mit einem Doppelklick markieren. Danachklappen Sie in der unteren Symbolleiste dieAuswahlliste ganz links auf. Wählen Sieden Eintrag „Überschrift 1“ aus. Der Texterscheint in größerer, fetter Schrift.
Nun rufen Sie den Menüpunkt „Absatz,Ausrichten, Zentriert“ auf. Damit erschei-nen die Überschriften immer zwischendem linken und dem rechten Rand desBrowser-Fensters zentriert. Schneller gehtes über das Symbol „Zentrieren“ in der un-teren Symbolleiste.
Der nachfolgende Absatz ist soweit inOrdnung, ein bisschen mehr Abstand zurÜberschrift könnte aber nicht schaden. Set-zen Sie den Cursor an den Anfang der Zei-le, und drücken Sie einmal die <Return>-Taste. Der zweite Absatz mit der Kontakt-und der Mailadresse wirkt unübersichtlich.Hinter dem Doppelpunkt fügen Sie einenZeilenumbruch ein. Die Adresse samt Tele-fonnummer verteilen Sie ebenfalls auf vier
Zeilen und löschen jeweils das Komma amEnde. Vor der Mailadresse fügen Sie eineLeerzeile ein. Nun markieren Sie alle sechsZeilen mit der Maus und zentrieren sie.
4. Schriftart und Farben:Vorsicht walten lassen
Die Einladung zum Grillabend muss etwasauffälliger werden. Der Text soll in eineranderen Schriftart, etwas größer und un-terstrichen erscheinen.
Fügen Sie zunächst nach dem Doppel-punkt einen Zeilenumbruch ein. Markie-ren Sie nun die ersten Wörter einschließ-lich Doppelpunkt, und rufen Sie den
Menüpunkt „Absatz, Schriftformat“ auf.Composer zeigt daraufhin ein langes Menümit allen Schriften an, die auf Ihrem Sys-tem installiert sind. Je nachdem, welche an-deren Programme, etwa Corel Draw oderMicrosoft Office, Sie installiert haben, ent-hält diese Liste unterschiedliche Schriften.Klicken Sie eine bestimmte Schrift an, sozeigt Composer den Text sofort entspre-chend formatiert an.
StandardschriftenGenau hier lauert die Falle: Damit ein Web-Browser diese Schrift verwenden kann,muss sie auf dem jeweiligen PC installiertsein. Fehlt diese Schrift, so wählt der Brow-ser eine ähnliche Schrift aus – das geht inder Praxis oft völlig daneben, statt derBuchstaben sieht der Surfer dann zum Bei-spiel nur Sonderzeichen.
Am oberen Ende der Schriftliste findenSie drei abgetrennte Einträge: „Helvetica,Arial“, „Times“ und „Courier“. Diese Schrif-ten gibt es praktisch auf jedem Computer-system. Damit sind Sie weitgehend auf dersicheren Seite. Für das Beispiel verwendenwir trotzdem die Schrift „Comic Sans MS“,die auf fast jedem Windows-PC zu findenist (2 Abbildung unten).
Belassen Sie die Markierung der Wörter,und klicken Sie auf das Symbol „Schrift ver-größern“. Bei jedem Klick wird die Schriftetwas größer, mit dem Symbol danebenverkleinern Sie die Schrift wieder. Die Far-
Text eingeben: Nach dem Start von Composer erscheint ein typisches Fenster mit Menü- und Symbolleiste sowie
einem Eingabebereich. Fangen Sie einfach damit an, Ihren Text für die Web-Seite einzutragen (Punkt 2)
Schrift festlegen: Die Auswahl an Schriften auf einem PC ist meist riesig. Doch nur wenn die Schrift auch auf dem
PC des Website-Besuchers installiert ist, funktioniert die Anzeige im Browser (Punkt 4)
301 02.12.2003 17:50 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 61
Grundkurs I: Die erste HomepagePGrundlagen pWorkshops PUtilities WorkshopsPPPpPP S. 58 – S. 63
be wählen Sie über „Absatz, Textfarbe“ aus.Ein Dialogfeld zeigt eine Reihe vordefinier-ter Farben, im Beispiel wird ein kräftigesRot eingestellt. Schließen Sie mit „OK“, undzentrieren Sie abschließend den Einlei-tungssatz. Nun fügen Sie in den Text derEinladung ein paar Zeilenumbrüche einund zentrieren dann ebenfalls alle Zeilen.
In der letzten Zeile der Beispielseite istdas Datum der letzten Änderung eingetra-gen. Das ist zwar keine Pflicht, aber ein Ser-vice gegenüber den Besuchern. Damit dieZeile das Layout nicht stört, verkleinern Siedie Schrift um einen Schritt.
5. Seitenhintergrund:Farbe oder Muster
Jetzt kann sich die Homepage schon sehenlassen, jedoch ist alles immer noch sehrschwarzweiß gehalten. Hier wirkt eine Hin-tergrundfarbe für die ganze Web-SeiteWunder. Dazu rufen Sie den Menüpunkt„Absatz, Seitenfarben und Hintergrund“auf. Ein Dialogfeld zeigt als Einstellung„Standardfarben des Browsers“. Damitüberlassen Sie die Wahl der Farben demSurfer, der seinen Browser entsprechendeinstellen kann. Schalten Sie stattdessendie Option „Benutzerdefinierte Farben ver-wenden“ ein (2 Abbildung oben rechts).
Jetzt lassen sich die Farben für Text, Ver-knüpfungen (Links) und eben den Hinter-grund einzeln einstellen. Klicken Sie aufdie Farbschaltfläche rechts neben „Hinter-
grund“, um den Auswahl-dialog anzuzeigen. Bei derFarbauswahl müssen Sie be-hutsam vorgehen, damitder Text auf der Web-Seitegut lesbar bleibt. Im Regel-fall fahren Sie mit Pastelltö-nen recht gut. Für die Bei-spiel-Landrover-Seite bietetsich etwa ein erdfarbenerOckerton an. Im Vorschau-feld der Dialogbox sehen Sieauch gleich, wie die Schrift-und Link-Farben mit demHintergrund zusammenpas-sen. Für den normalen Textwählen wir im Beispiel einsehr dunkles Grün aus.
Hintergrundbild statt -farbeDie Alternative zu einer Hintergrundfarbeist ein Hintergrundbild. Dazu brauchen Sieeine kleine Grafik, die sich wie Kacheln ne-beneinander setzen lässt, ohne dass einÜbergang sichtbar ist. Solche Grafiken sindals „Wallpaper“ (englisch für Tapete) oderTextur bekannt. Sie können diese Texturenmit einem Grafikprogramm wie Xara Web-style selbst herstellen (2 ab Seite 116).
Im Web gibt es aber viele freie Grafikenzum Download. Ein guter Startpunkt fürdie Suche ist der Webkatalog Dmoz unterhttp://dmoz.org/World/Deutsch/Computer/Grafik/Web. Wenn Sie die Grafikdatei auf der Fest-
platte haben, kopieren Sie sie in das Ver-zeichnis mit den Homepage-Dateien. Dasist wichtig, weil Sie die Datei zusammenmit der HTML-Datei am Ende auf denWebserver kopieren müssen.
Anschließend rufen Sie den Menüpunkt„Absatz, Seitenfarben und Hintergrund“auf. Klicken Sie auf „Datei wählen“, undmarkieren Sie die gewünschte Hinter-grundgrafik. Achten Sie darauf, dass dieOption „URL ist relativ zur Seitenadresse“aktiviert ist. Warum, beschreibt der 2Kasten „CSS-Modus: Fehler in Composer“.
6. Gegenprüfung: Öffnenim Internet Explorer
Es lohnt sich, zwischendurch immer malwieder die Web-Seite mit dem Internet Ex-plorer anzuzeigen. Zwischen Netscape/Mo-zilla und dem Microsoft-Browser gibt es Un-terschiede in der Darstellung.
Da Composer keinen Menübefehl bietet,mit dem sich ein anderer Browser zur Vor-schau starten ließe, öffnen Sie den InternetExplorer und rufen dann „Datei, Öffnen“auf. Nach einem Klick auf die Schaltfläche„Durchsuchen“ erscheint der normaleWindows-Dialog zum Öffnen von Dateien.Wählen Sie INDEX.HTML aus, und bestäti-gen Sie mit „Öffnen“ und dann „OK“.
Gleich auf den ersten Blick fällt auf, dassder Internet Explorer eine größere Grund-schrift als Netscape/Mozilla benutzt. DieProportionen zwischen Überschrift undText stimmen jedoch. Auch die letzte Zeile,die Sie um einen Schritt verkleinert haben,ist beim Internet Explorer größer.
Die Ursache: Composer fügt HTML-Be-fehle ein, die relative Größenangaben ent-
Farbe statt Schwarzweiß: Über „Absatz, Seitenfarben und Hintergrund“
ändern Sie die Farben für Text, Links und die ganze Web-Seite (Punkt 5)
WYSIWYG, Tags, HTML oder Vorschau?Der Web-Editor Composer, den wir für diesen Grundkurs ver-wenden, bietet vier Ansichten, zwischen denen Sie mit vierKarteireitern unten am Programmfenster umschalten. ImWorkshop setzen wir ausschließlich den grafischen Editorein, auch WYSIWYG-Modus genannt. Die Abkürzung steht für„What you see is what you get“, frei übersetzt etwa „DasEndergebnis sieht so aus wie die Anzeige im Programm“.
Wenn Sie sich mit HTML auskennen oder einfach nur neu-gierig sind, dann rufen Sie das Register „HTML-Tags“ auf. Hierfügt Composer in die Web-Seite gelbe Markierungen für dieeinzelnen Tags ein. So sehen Sie sofort, wo die wichtigenTags sind und was sie bewirken. Mit einem Doppelklick auf ein Tag-Symbol oder über das Kon-textmenü, das Sie mit der rechten Maustaste öffnen, rufen Sie die Eigenschaften des Tags auf.
Das Register „Quelle“ zeigt die HTML-Tags als Text an. Diesen Text speichert Composer inder HTML-Datei. Der Browser liest die Kommandos aus und erzeugt daraus die Web-Seite.
Das vierte Register mit der Bezeichnung „Ansicht“ ist eine Vorschau auf das endgültige Er-gebnis. In der Praxis unterscheidet es sich kaum vom WYSIWYG-Modus, sinnvoller ist es, Sieladen die Web-Seite zur Vorschau mit dem Internet Explorer. Ausführliche Erläuterungen zumThema HTML-Tags finden Sie 2 ab Seite 34.
Modus „HTML-Tags“: Composer
zeigt Tags als gelbe Grafiken
301 02.12.2003 17:51 Uhr Seite 5
Workshops Grundkurs I: Die erste Homepage PGrundlagen pWorkshops PUtilities
PC-WELT SONDERHEFT 2/200462
PPPPpP S. 58 – S. 63
halten. Die kleine Schrift ist einfach eineStufe kleiner als die normale Schrift. Auchdie Größe der Überschrift bestimmt derBrowser. Das ist wichtig, weil damit bei-spielsweise ein Surfer, der nicht so gutsieht, eine besonders große Grundschriftim Browser wählen kann.
Daher sollten Sie es vermeiden, Schrift-größen zu verwenden, obwohl HTML undCSS diese Option bieten. Außerdem kön-nen Sie sowieso nicht genau sagen, wiegroß eine Schrift auf einem anderen PC er-scheint – das hängt nämlich ganz von des-sen Monitor und Grafikauflösung ab.
7. Bild einbauen:Logo muss sein
Eine Landrover-Seite ohne das Logo des Off-road-Gefährts ist natürlich nur eine halbeSache. Für das Beispiel steht das Logo linksin einem langen dunklen Balken zur Ver-
fügung. Das Bild soll ganzoben auf der Web-Seite überdem Text stehen. Für Logosund ähnliche Grafiken mitgroßen, einfarbigen Flächenbieten sich das GIF- und dasPNG-Format an. Durch diegroßen Flächen lässt sichsolches Bildmaterial sehrgut komprimieren. Mehrüber das richtige Bildformatfinden Sie im 2 Kastenrechts. Wie Sie größere Bil-der für den Einsatz im Webvorbereiten, erfahren Sie im2 Beitrag ab Seite 84.
Alternativtext integrierenSetzen Sie die Schreibmarke an den Anfangder Überschrift, und fügen Sie mit der <Re-turn>-Taste einen Zeilenumbruch ein.Anschließend rufen Sie den Menüpunkt„Einfügen, Grafik“ auf. Alternativ klickenSie auf das „Grafik“-Icon in der Symbol-leiste. Im Dialogfeld „Eigenschaften“ be-stimmen Sie zunächst mit „Datei wählen“die Bilddatei. Im Bereich „Bildvorschau“ se-hen Sie jetzt den Bildinhalt und danebendie Abmessungen in Pixel.
Wenn Sie jetzt auf „OK“ klicken, fordertComposer mit einer Dialogbox auf, einenAlternativtext anzugeben. Tragen Sie imentsprechenden Eingabefeld eine kurze Beschreibung des Bildes ein, im Beispiel et-wa „Landrover-Firmenlogo“ (2 Abbildungoben links). Dieser Text erscheint nurdann, wenn der Browser, etwa wegen einesÜbertragungsfehlers, das Bild nicht anzei-
gen kann. SehbehinderteMenschen surfen ebenfalls,ihre speziellen Lesegerätezeigen den Inhalt einer Web-Seite in Blindenschrift an,inklusive Alternativtext.Schließen Sie anschließendden Eigenschaften-Dialogder Grafik mit „OK“. Jetzt istdie Grafik sichtbar. Ein Bildbehandelt der Web-Browserwie einen Textabsatz, des-halb erscheint automatischein Zeilenumbruch, dieÜberschrift bleibt mittig.Wenn Sie etwas am Bild ver-ändern möchten, klickenSie es einfach doppelt an,um den Eigenschaften-Dia-log aufzurufen.
8. HTML-Tags einfügen: Seitenränder ausblenden
Allerdings steht die Grafik nicht am Rand,vielmehr ist links und oben ein schmalerStreifen des Hintergrundmusters sichtbar.Um das zu ändern, rufen Sie den Menü-punkt „Absatz, Seitenfarben und Hinter-grund“ auf und klicken dort auf „Fortge-schrittene Bearbeitung“. Im Register„HTML-Attribute“ sehen Sie alle Zusatzan-gaben, die der Tag „<body>“ momentan hat(2 Abbildung links).
Dieser Tag (auf Deutsch etwa „Etikett“oder „Marke“) ist für die Gestaltung der ge-samten Web-Seite zuständig (body bedeutetKörper). Hier sind beispielsweise die Farbenfür den Text oder das Hintergrundbild aufgeführt. Ausführliche Erläuterungen zu HTML-Tags finden Sie 2 ab Seite 34.
Das richtige Formatfür BilderFür Web-Seiten sind nur drei Grafikforma-te tauglich: JPG, GIF und PNG. Alle drei ha-ben Stärken und Schwächen, je nachdem,um was für Bildmaterial es sich handelt.JPG: Für größere Bilder und vor allem Fo-tos ist das JPG-Format die erste Wahl. Eskomprimiert die Bilddaten extrem, dieBildqualität hängt aber vor allem vom Mo-tiv und dem Komprimierungsgrad ab. Beisehr starker Komprimierung, bei einfarbi-gen Flächen oder bei geraden Linien sinddie Bildfehler bei JPG-Dateien allerdingsdeutlich sichtbar.GIF: Für kleine Grafiken, Hintergrundbil-der, Schaltflächen, Trennlinien und Ähnli-ches hat sich deshalb das GIF-Format eta-bliert. Es komprimiert nicht so gut wieJPG, lässt aber die Bilddaten unverändert.Das größte Manko: Es sind maximal 256Farben pro Bild vorgesehen. Bei einemSonnenuntergang beispielsweise entste-hen so hässliche, grobe Farbübergänge.Dafür lassen sich mit GIF kleine Trickfilme,so genannte animierte GIFs, erzeugen.Außerdem kennt das GIF-Format Transpa-renz, also durchsichtige Bereiche im Bild.PNG: Als Nachfolger von GIF platziert sichPNG. Das Format beherrscht alles, was GIFkann, und erlaubt darüber hinaus belie-big viele Farben. Die aktuellen Web-Brow-ser unterstützen allesamt das PNG-For-mat. Trotzdem hat es sich in der Praxisbisher kaum durchgesetzt.
Bilddatei einfügen: Hier fügen Sie mit „Datei wählen“ eine Bilddatei ein
und geben ihr einen alternativen Text als Kurzbeschreibung (Punkt 7)
Seitenränder ausblenden: Den Seitenrand der Web-Seite schalten Sie mit
den zusätzlichen Attributen „topmargin“ und „leftmargin“ aus (Punkt 8)
301 02.12.2003 17:51 Uhr Seite 6
PC-WELT SONDERHEFT 2/2004 63
Grundkurs I: Die erste HomepagePGrundlagen pWorkshops PUtilities WorkshopsPPPPPp S. 58 – S. 63
alle darin referenzierten, also eingebunde-nen Dateien (Logo- und Hintergrundgrafik)auf den Webserver (2 Abbildung oben).
Nach dem Ende der Übertragung rufenSie im Browser die Web-Adresse auf, die Ih-nen der Provider zugeteilt hat. Bei T-Onlineist das beispielsweise www.<wunschname>.privat.t-online.de. Statt <wunschname> tragenSie den Namen ein, den Sie sich selbst beider Anmeldung auf den Service-Web-Seitenvon T-Online ausgesucht haben.
Zum Hochladen der HTML- und Bildda-teien auf den Webserver müssen Sie nichtunbedingt Composer benutzen. Wie Siemit dem FTP-Programm Filezilla vorgehen,lesen Sie 2 ab Seite 96. Eine Auswahl anverschiedenen spezialisierten FTP-Tools fin-den Sie 2 ab Seite 126.
Im Eingabefeld unter „Attribut“ tragen Sie„topmargin“ ein, rechts daneben tragen Sieden Zahlenwert „0“ ein (jeweils ohne An-führungszeichen). Composer nimmt dasAttribut in die Liste mit auf. Damit lassenSie den oberen Rand verschwinden.
Dasselbe machen Sie mit „leftmargin“und dem Wert „0“. Beenden Sie die Dialog-felder dann mit zweimal „OK“. Nun ist derhässliche Zwischenraum verschwunden.Wenn Sie möchten, können Sie noch denAbstand zwischen Logo und Überschriftmit einem Zeilenumbruch vergrößern.
9. Seite publizieren:Parameter eintragen
Jetzt ist Ihre erste Web-Seite fertig. Damitsie jeder Surfer im Web abrufen kann,müssen Sie die Dateien auf den WebserverIhres Providers hochladen. Das funktio-
niert bei allen Providern im Prinzip gleich,Sie brauchen allerdings die FTP-Adresse, Be-nutzername und Passwort. Das regelt jederProvider individuell, über die Online-Hilfe-texte des Providers finden Sie die Angabenaber leicht heraus.
Wenn Sie die notwendigen Daten zurHand haben, rufen Sie in Composer denMenüpunkt „Datei, Publizieren“ auf. EineDialogbox fragt jetzt die einzelnen Para-meter ab (2 Abbildung oben).
Bei „Name der Web-Site“ tragen Sie ei-nen beliebigen Text ein, er dient nur zurKennzeichnung. Das Eingabefeld „Publi-zierungs-Adresse“ nimmt die FTP-AdresseIhres Webservers auf. Das Feld „HTTP Adres-se Ihrer Homepage“ lassen Sie leer. Bei „Be-nutzername“ tragen Sie den FTP-Benutzer-namen beim Provider ein.
Das Passwort lassen Sie weg, dann fragtComposer bei jedem Verbindungsaufbauerneut nach. Es ist einfach sicherer, Pass-wörter nicht in einer Datei auf der Fest-platte abzulegen. Bei T-Online beispielswei-se tragen Sie als FTP-Adresse „home-up.t-on-
line.de“ ein. Diese Adresse istfür alle T-Online-Kundengleich. Der Benutzernameist „ftp“, als Passwort gebenSie einen Punkt (.) an. In die-sem Fall können Sie ruhigdas Passwort speichern. Eineindividuelle Anmeldungbeim FTP-Server von T-Onli-ne ist nicht erforderlich,weil die Prüfung von Benut-zer und Passwort bereits beider Einwahl in T-Online er-folgt ist. Andersherum be-deutet dies allerdings auch:T-Online-Kunden könnenauf ihre Homepage nurdann zugreifen, wenn siesich mit ihrem T-Online-Zugang einge-wählt haben.
10. Zum Schluss: Dateienhochladen per FTP
Wenn Sie alle Parameter eingetragen ha-ben, wechseln Sie zum Register „Publizie-ren“. In der Auswahlliste „Name der Web-site“ ist jetzt der neue Eintrag vorbelegt.Die Felder „Seitentitel“ und „Dateiname“enthalten ebenfalls schon die richtigenWerte. Die restlichen Einstellungen lassenSie unverändert.
Vor dem nächsten Schritt bauen Sie ei-ne Online-Verbindung auf. Dann klickenSie auf die Schaltfläche „Publizieren“. Com-poser meldet sich beim FTP-Server an undkopiert dann die Datei INDEX.HTML und
CSS-Modus: Fehler in Composer
Standardmäßig ist der Web-Editor Composer so eingestellt, dass er in die HTML-Tags CSS-Be-fehle für die Formatierung einfügt. Dagegen ist im Prinzip nichts einzuwenden, alle modernenWeb-Browser kommen damit zurecht (Web-Editoren-Test2 ab Seite 102 und Workshop zu Cascading Style Sheets2 ab Seite 80.)
Abgesehen davon, dass CSS den HTML-Code der Web-Seiten unübersichtlich macht, hatComposer in puncto CSS einen kleinen Fehler: Fügen Sie ein Hintergrundbild ein, notiert Com-poser in der CSS-Anweisung den kompletten Pfad und nicht nur den Dateinamen der Grafikda-tei. Statt MUSTER.GIF steht hier zum Beispiel C:\HOMEPAGE\MUSTER.GIF. Das funktioniert, so-lange Sie die Web-Seite im Browser von der lokalen Festplatte aufrufen. Dann ist die Bilddateiunter dieser Adresse gespeichert. Kopieren Sie die Web-Seite aber auf den Webserver, ist dasVerzeichnis C:\HOMEPAGE nicht mehr da. Der Browser findet die Bilddatei nicht und zeigt einenBildfehler an. Die Option „URL ist relativ zur Seitenadresse“ im Dialogfeld für die Hintergrund-grafik (2 Punkt 5) sorgt dafür, dass nur der Dateiname und nicht der ganze Pfad im HTML-Attri-but erscheint. Das funktioniert aber nur im HTML-Modus, nicht im CSS-Modus.
Um den CSS-Modus abzuschalten, rufen Sie den Menüpunkt „Bearbeiten, Einstellungen“auf und wählen links die Kategorie „Composer“. Auf der rechten Seite löschen Sie das Häkchenvor „Verwenden von CSS-Stilen anstelle von HTML-Elementen und -Attributen“.
Seite veröffentlichen: Composer kopiert die drei Dateien der ersten Web-
Seite auf den Webserver bei T-Online (Punkt 10)
Parameter eintragen: Mit diesen Parametern laden Sie
Ihre erste Web-Seite bei T-Online hoch (Punkt 9)
301 02.12.2003 17:52 Uhr Seite 7
PC-WELT SONDERHEFT 2/200464
Mit einem Tabellen-Layout platzieren Sie Navigationsleiste, Gra-fiken sowie Überschriften – und geben so Ihrer Web-Seite denFeinschliff. Das Workshop-Material finden Sie auf der Heft-CD.
Layouten mit Zellen
Ihre erste Web-Seite haben Sie im vor-hergehenden Teil des Kurses (2 Seite 58) ge-staltet und online gestellt. Nun erweiternSie Ihre Site und fügen neben der Startsei-te noch weitere Web-Seiten für Kontakt-adresse, Neuigkeiten und so weiter hinzu.
Dazu bauen Sie eine Navigationsleistemit Links auf die Teilseiten ein. So entstehteine sinnvoll organisierte Website, die Sieselbst leicht um weitere Seiten ergänzen.Als Web-Editor setzen Sie wie schon imGrundkurs I den Netscape Composer ein.
1. Navigationsleiste: Platz schaffen mit Tabellen-Layout
Wie Sie im ersten Kursteil gemerkt haben,bietet HTML nicht viele Möglichkeiten, ei-ne Web-Seite zu gestalten: Sie dürfen Ab-sätze einfügen, Bilder und Überschriftensind automatisch ein eigener Absatz. Aberwie entstehen dann all die tollen Layouts,die man im Web bewundern kann?
Die Antwort lautet: mit Tabellen. Für dieLayout-Gestaltung legen Sie eine Tabelle
wie ein Gitter über die gesamte Web-Seite.In die einzelnen Zellen der Tabelle fügenSie Bilder, Texte, Links und sogar weitereTabellen ein. Die Rahmenlinien der Tabel-le machen Sie danach unsichtbar. Damitplatzieren Sie Text und Bilder problemlosnebeneinander, oder die Navigationsleisteund den restlichen Inhalt einer Web-Seite.
Als Erstes sollten Sie überlegen, welcheElemente Sie mit dem Tabel-len-Layout platzieren wol-len. Denn es kann sehr, sehrumständlich werden, einsolches Layout im Nachhin-ein zu verändern. Im Bei-spiel ist oben eine Zelle querüber das ganze Browser-Fen-ster erforderlich, die das Lo-go aufnimmt. Als kleine Er-weiterung soll dieser Logo-balken auch die Überschriftenthalten. Auf der linkenSeite brauchen Sie einenschmalen Streifen für die
Navigationsleiste. Rechts soll ein großer Be-reich entstehen, der Text, Bilder und der-gleichen aufnimmt. Und am unteren Fen-sterrand nimmt ein Querstreifen das Da-tum der letzten Änderung auf. Dieses Da-tum soll am rechten Rand des Browser-Fensters ausgerichtet sein.
2. Vier Zellen: Das Roh-Layout entsteht
Insgesamt brauchen Sie für das Beispiel al-so vier Zellen. In der Praxis benötigen Siedafür eine Tabelle mit zwei Spalten unddrei Zeilen. Die überflüssigen zwei Zellenspielen keine Rolle. Starten Sie Composer,und beginnen Sie mit einer leeren Web-Sei-te. Rufen Sie den Menüpunkt „Tabelle, Ein-fügen, Tabelle“ auf, oder klicken Sie das Icon „Tabelle“ in der Symbolleiste an. ImDialogfeld „Tabelle einfügen“ tragen Sienun die Eckwerte ein (2Abbildung unten).
Bei „Zeilen“ ändern Sie den Wert in „3“,bei „Spalten“ bleibt der Vorgabewert „2“.Die Breite ist auf 100 Prozent des Browser-Fensters eingestellt – auch das ist korrekt.Das Eingabefeld „Rand“ gibt eine Pixelbrei-te von 1 für die Rahmenlinien vor. DiesenWert belassen Sie zunächst, Composer zeigtals Rahmenlinien sonst hässliche, rot ge-strichelte Linien. Erst wenn alles fertig ist,schalten Sie die Rahmenlinien aus. KlickenSie auf „OK“, um die Tabelle einzufügen.
3. Layout befüllen: Inhalte kopieren
Im nächsten Arbeitsschritt übernehmenSie die Bilder und Texte aus dem ersten Ent-wurf in Kursteil I (2 Seite 58). Laden Sie die alte Web-Seite mit „Datei, Öffnen“.Composer zeigt die Web-Seite in einemzweiten Programmfenster. Markieren Sieden Text unterhalb der Überschrift, unddrücken Sie die Tastenkombination <Strg>-
Von Wolfgang Nefzger
Seitenbasis: Diese schlichte Tabelle verrät direkt nach dem Einfügen noch
nicht, dass sie die Grundlage für ein Web-Seiten-Layout ist (Punkt 2)
Grundkurs II
302 03.12.2003 9:00 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 65
Grundkurs II: Tabellen-LayoutPGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 64 – S. 67
<C>. Wechseln Sie zum Composer-Fenstermit der Tabelle, und klicken Sie die rechteZelle in der zweiten Zeile an. Mit <Strg>-<V>fügen Sie den kopierten Text ein.
Composer übernimmt automatisch dieTextformatierung wie fette Schrift oderzentrierte Darstellung. Beachten Sie aber,dass die Schriftfarbe wieder den Standard-wert Schwarz hat. Denn die Schriftfarbegehört zu den Seiteneigenschaften – unddie hat Composer nicht mitkopiert. Mar-kieren Sie jetzt den Text „Letzte Ände-rung:“, und verschieben Sie ihn per Drag &Drop in die rechte Zelle der letzten Zeile.
Die Überschrift können Sie auch kopie-ren, neu eintippen geht aber fast genausoschnell. Klicken Sie die Zelle oben rechtsan, und tragen Sie die Überschrift ein. Mar-kieren Sie den Text, und wählen Sie imDrop-down-Menü in der unteren Symbol-leiste links den Eintrag „Überschrift 1“.Dann klicken Sie auf das „Zentrieren“-Iconrechts in der Symbolleiste.
Sichern Sie abschließend die neue Web-Seite mit „Datei, Speichern“ unter dem Na-men INDEX.HTML in einem neuen, leerenVerzeichnis. Als Seitentitel geben Sie dabeidie Überschrift an, im Beispiel „Landrover-Club München“ (2 Abbildung oben).
4. Logo links: Richtige Breite erzwingen
Nun bauen Sie das Landrover-Logo in dielinke obere Zelle ein. Alle Zellen in einerSpalte haben dieselbe Breite. Deshalb solltedie Logografik so breit sein, dass in der dar-unter liegenden Zelle die Links der Naviga-tionsleiste in einer Zeile ohne UmbruchPlatz haben. In der Praxis sollten dafür 140Pixel ausreichen. Die Höhe der Grafik ori-entiert sich an der Höhe der Überschrift inder Zelle rechts daneben, im Beispiel genü-gen etwa 70 Pixel. Bringen Sie Ihr Logo miteinem Grafikprogramm auf diese Aus-
maße, ein Pixel hin oder her spielt keineRolle. Klicken Sie die linke obere Zelle an,so dass der Cursor darin blinkt. Dann kli-cken Sie in der Symbolleiste auf das Icon„Grafik“. Mit der Schaltfläche „Datei wäh-len“ tragen Sie den Dateinamen im Dialog-feld „Bildeigenschaften“ ein (2 Abbildungunten). Beim Eingabefeld „AlternativerText“ tragen Sie „Landrover-Logo“ ein.Dann das Dialogfeld mit „OK“ schließen.
Nun klicken Sie in die Zelle unter demLogo. Hier soll die Navigationsleiste entste-hen. Fürs Erste genügt es, nur den Link-Texteinzutragen. Tippen Sie „Home“, „Neuig-keiten“, „Fotos“, „Links“, „Gästebuch“ und„Kontakt“ ohne Anführungszeichen undjeweils durch einen Zeilenumbruch ge-trennt ein. Um eine ordentliche Gestaltungkümmern Sie sich später.
5. Titelzeile anpassen: Farbige Zellen
Als Erstes nehmen Sie sich die Titelzeilevor. Rechts neben dem Logo ist die Über-schrift angeordnet. Sie soll dieselbe Hinter-grundfarbe wie die Logografik haben, dieBuchstaben bekommen eine hellere Farbe.Dadurch wirkt die gesamte erste Zeile derTabelle wie ein Block.
Öffnen Sie zunächst die Logografik miteinem Grafik-Viewer wie dem für Privatan-wender kostenlosen Irfan View (2 Seite117). Klicken Sie den Hintergrund mit derMaus an, Irfan View zeigt dann in der Titel-leiste den Farbwert in RGB- und Hexadezi-malschreibweise an (2Abbildung folgendeSeite oben links). Notieren oder merken Siesich die Buchstaben-Zahlen-Kombinationin Klammern hinter „HTML:“, im Beispiel„#00293F“. Im Beispielbenötigen wir auch denFarbwert der gelben Schrift:„#FFFF99“.
Klicken Sie in Composerdie Zelle mit der Überschriftan, um sie zu markieren.Nun rufen Sie den Menü-punkt „Tabelle, Hinter-grundfarbe für Tabelle oderZelle“ auf. Im Eingabefeldtragen Sie die in Irfan Viewermittelte Farbe ein. Verges-sen Sie dabei nicht das vor-angestellte #-Zeichen. ImFeld rechts daneben zeigtComposer eine Vorschauder Farbe. Schließen Sie dasDialogfeld mit „OK“. Mar-
kieren Sie jetzt die Überschrift, und rufenSie den Menüpunkt „Absatz, Textfarbe“auf. Tragen Sie im bereits bekannten Ein-gabefeld den Farbwert der gelben Schriftein.
6. Links oder rechts: Ausrichtung einstellen
Noch sind Elemente auf der Web-Seite un-schön platziert: Die Überschrift „klebt“ amoberen Rand, die Texte in der Navigations-leiste hängen ganz links, das Änderungs-datum in der untersten Zelle würde sicham rechten Rand besser machen.
Klicken Sie in die Zelle mit der Über-schrift und auf das Icon „Tabelle“ in derSymbolleiste. Alternativ rufen Sie „Tabelle,Tabelleneigenschaften“ auf und wechselnzum Register „Zellen“ (2Abbildung nächs-te Seite oben rechts). Im Bereich „Inhalts-
Inhalt Seite
1. Platz schaffen mit Tabellen-Layout 642. Das Roh-Layout entsteht 643. Layout befüllen 644. Richtige Breite erzwingen 655. Titelzeile anpassen 656. Ausrichtung einstellen 657. Rahmen ausschalten 668. Links einfügen 669. Layout abrunden 66
Kästen:RGB: Wie Sie in HTML Farben definieren 66Schriftfarbe als Design 67
Layout in Arbeit: Beim ersten Speichern der Datei fragt
Composer nach dem Seitentitel (Punkt 3)
Komplett: Mit Logo und Text in der Navigationsleiste ist die Startseite nun
vollständig – es fehlt nur noch der Feinschliff am Layout (Punkt 4)
302 03.12.2003 9:01 Uhr Seite 3
Workshops Grundkurs II: Tabellen-Layout
PC-WELT SONDERHEFT 2/200466
PPpP S. 64 – S. 67
PGrundlagen pWorkshops PUtilities
ausrichtung“ aktivieren Sie die Option„Vertikal“ und stellen die Auswahlliste auf„Zentriert“ ein. Klicken Sie abschließendauf die Schaltfläche „Anwenden“ – schonerscheint die Überschrift mittig.
Sie müssen das Dialogfeld nicht verlas-sen, um andere Zellen zu markieren. Mitden Schaltflächen „Vorige“ und „Weiter“wechseln Sie zur vorhergehenden respek-tive nächsten Zelle. Die jeweils markierteZelle hat einen breiten grauen Rand.Klicken Sie auf „Weiter“, bis die Zelle mitder Navigationsleiste markiert ist. Aktivie-ren Sie die Option „Horizontal“, stellen Siedie Auswahlliste auf „Zentriert“ ein, undbetätigen Sie die Schaltfläche „Anwenden“.Danach wechseln Sie zur Zelle mit dem Än-derungsdatum und richten den Inhalt mitder Einstellung „Rechtsbündig“ in der Aus-wahlliste am rechten Rand aus.
7. Rahmen ausschalten: Die Tabelle verschwindet
Das Tabellen-Layout ist nun komplett –Zeit, die Rahmenlinien auszuschalten und
die Tabelle unsichtbar zu machen. KlickenSie irgendeine Zelle in der Tabelle an, undrufen Sie dann den Menüpunkt „Tabelle,Tabelleneigenschaften“ auf. Interessant istder Bereich „Ränder und Abstände“. TragenSie bei „Rand“ eine „0“ ein (ohne An-führungszeichen). Auch bei „Abstand“ und„Auffüllung“ tragen Sie eine „0“ ein. Sonstzeigen Web-Browser zwischen der Logogra-fik und der Zelle rechts daneben einenhässlichen weißen Streifen.
Wenn Sie jetzt auf die Schaltfläche „OK“klicken, dann sehen Sie in Composer an-statt der Randlinie gestrichelte rote Linien.Um das Layout ohne die roten Markierun-gen zu betrachten, speichern Sie die Web-Seite und öffnen die Datei anschließend imInternet Explorer. Jetzt kleben allerdingsdie Texte in der Navigationsleiste undrechts in der großen Hauptzelle am Titel-balken. Fügen Sie in Composer einfach amTextbeginn jeweils mit der <Return>-Tasteeinen Zeilenumbruch ein.
8. Navigation komplett: Links einfügen
Jetzt ist der Moment gekommen, um dieTexte in der Navigationsleiste zu echtenLinks zu machen. Beim Anklicken sollendie Links die entsprechenden Unterseitenaufrufen. Markieren Sie zunächst mit ei-nem Doppelklick den Text „Home“. Dannklicken Sie in der Symbolleiste auf das Icon
„Verknüpfung“ – das ist bei Composer derName für einen Link. Im Eingabefeld tra-gen Sie den Dateinamen ein, den der Brow-ser beim Anklicken laden soll. „Home“ ruftINDEX.HTML, die Startseite, auf. Tragen Siealso diesen Dateinamen ein.
Das wirkt insofern paradox, als die Start-seite damit sich selbst aufruft. Die Naviga-tionsleiste soll aber für alle Web-Seitenidentisch sein. Und auf der Unterseite mitder Kontaktadresse macht der Link sehrwohl Sinn. Nachdem Sie auf „OK“ geklickthaben, zeigt Composer „Home“ in der ty-pisch blauen Linkfarbe mit Unterstrich an.
Markieren Sie nun das nächste Wort„Neuigkeiten“, und rufen Sie den Verknüp-fungsdialog auf. Tragen Sie als DateinameNEUIGKEITEN.HTML ein. Diese Datei gibtes noch nicht, aber das spielt keine Rolle.An sich dürfen Sie der Datei einen beliebi-gen Namen geben, er muss nicht mit demText des Links übereinstimmen. Sie behal-ten aber später leichter den Überblick,wenn Link-Text und Dateiname aussage-kräftig und übereinstimmend sind.
Fahren Sie nach dem beschriebenenSchema mit den restlichen Links fort. BeimGästebuch ersetzen Sie im Dateinamen „ä“durch „ae“ – Umlaute sind eine beliebteFehlerquelle bei Dateinamen, die Sie damitvermeiden (2Abbildung rechte Seite oben).
9. Letzter Schliff: Layout abrunden
Die Navigationsleiste wirkt noch ein wenigverloren links neben dem Text. Färben Sieden Zellenhintergrund mit dem Farbtonder Titelzeile ein: zuerst die Zelle und danndas Symbol „Tabelle“ anklicken, die Schalt-fläche neben „Hintergrundfarbe“ drückenund den Farbwert eintragen – fertig. Auchdie unterste Zelle der linken Tabellenspaltefärben Sie entsprechend ein.
Farbinfo: Mit einem Grafik-Viewer finden Sie den RGB-
Wert der Hintergrundfarbe im Logo heraus (Punkt 5)
Einstellungssache: Für jede Zelle stellen Sie einzeln die
vertikale und horizontale Ausrichtung ein (Punkt 6)
RGB: Wie Sie in HTML Farben definieren
Wenn Sie in HTML eine Farbe für eine Schrift oder den Hintergrund angeben, machen Sie Be-kanntschaft mit dem RGB-Farbwert. Ein solcher Farbwert besteht aus dem Rot-, Grün- und Blau-anteil der Farbe. Jede Grundfarbe kann einen Wert zwischen 0 und 255 haben, notiert in hexa-dezimaler Schreibweise. Ein reines Rot hat den Farbwert #FF0000, Ocker #FFCC33. Für HTML istes egal, ob Sie Groß- oder Kleinbuchstaben verwenden, die Großschreibung ist aber üblich.
Es ist natürlich ziemlich mühsam, diese Farbwerte vonHand einzutippen. Deshalb haben Web-Editoren wie Com-poser einen bequemen Auswahldialog für Farben. Über dasTool Irfan View (und andere Grafikprogramme) stellen Sieden RGB-Farbwert eines Bildausschnitts fest (2 Punkt 5).
Die Alternative zu den RGB-Farbwerten sind Farbna-men. In HTML sind allerdings nur sechzehn Farbnamenfestgelegt: „black“ (schwarz), „gray“ (grau), „maroon“(dunkelrot), „red“ (rot), „green“ (dunkelgrün), „lime“(hellgrün), „olive“ (braungrün), „yellow“ (gelb), „navy“(dunkelblau), „blue“ (blau), „purple“ (dunkles Lila),„fuchsia“ (helles Lila), „teal“ (blaugrün), „aqua“ (hell-blau), „silver“ (hellgrau) und „white“ (weiß).
Sie tragen diesen Farbnamen ohne #-Zeichen und ohne Anführungszeichen ein.
Farbwahl: In Composer wählen Sie
Farben aus einer Palette aus
302 03.12.2003 9:01 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 67
Grundkurs II: Tabellen-LayoutPGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 64 – S. 67
Wenn Sie möchten, ändern Sie auch nochdie Farbe der Links wie im 2 Kasten„Schriftfarbe als Design“ unten erklärt. Wieim ersten Kursteil 2 ab Seite 58 bei Schritt5 ausführlich beschrieben, fügen Sie nundas Hintergrundbild ein und setzen dieRandabstände auf Null.
Schön wäre es jetzt noch, wenn die Na-vigationsleiste nicht am Ende des Textesaufhören würde. Damit sie bis zum unte-ren Fensterrand reicht, muss die gesamteTabelle 100 Prozent der Fensterhöhe ein-nehmen. Positiver Nebeneffekt: Damit wür-de dann auch das Änderungsdatum immeram unteren Rand stehen.
Das Problem daran ist: Es gibt kein offi-zielles HTML-Attribut, das die Höhe der Ta-belle festlegt. Internet Explorer und Net-scape/Mozilla erweitern hier aber denHTML-Standard sinnvoll. Klicken Sie ir-gendeine Zelle an, wählen Sie „Tabelle, Ta-belleneigenschaften“ und dann „Fortge-schrittene Bearbeitung“. Bei „Attribut“ tra-gen Sie „height“ ein, bei Wert „100%“ (ohneAnführungszeichen). Schließen Sie die Dia-logfelder mit zweimaligem „OK“.
Jetzt zeigt sich ein hässlicher StreifenHintergrund zwischen Logo und Navigati-onsleiste. Um dieses Problem zu beheben,klicken Sie auf die rechte Zelle mit demHaupttext und dann auf das Symbol „Ta-belle“. Aktivieren Sie die Option „Höhe“,tragen Sie als Wert „100“ ein (ohne An-führungszeichen), und stellen Sie die Aus-wahlliste rechts daneben auf „% der Tabel-le“ (2 Abbildung unten). Markieren Sienun die Zelle darüber mit der Überschrift.Aktivieren Sie die Option „Breite“, und tra-gen Sie daneben „100%“ ein. Schließen Siedas Dialogfeld mit „OK“.
10. Abstand halten: Verschachtelte Tabelle
Ein Problem gibt es jetztnoch: Der Haupttext klebtlinks an der dunkel einge-färbten Navigationsleiste.Das ist auch klar, schließ-lich haben wir die Abständezwischen Zellen in 2 Punkt7 auf Null eingestellt. DasProblem lösen wir durch ei-nen Trick, der oft bei Tabel-len-Layouts zum Einsatzkommt: eine verschachtelteTabelle. Und so funktioniertder Trick: Markieren Sie den gesamten Textin der rechten Hauptzelle, und drücken Siedie Tastenkombination <Strg>-<X>. Damitverschieben Sie den Text in die Zwi-schenablage von Windows. Setzen Sie denCursor in die linke obere Ecke der nun lee-ren Zelle, und rufen Sie anschließend „Ta-belle, Einfügen, Tabelle“ auf.
Im Dialogfeld „Tabelle einfügen“ tragenSie bei „Zeilen“ und „Spalten“ den Wert „1“ein (ohne Anführungszeichen), bei „Rand“dagegen „0“. Schließen Sie das Dialogfeldmit „OK“. In der großen Zelle ist nun eineTabelle mit nur einer Zelle eingefügt, eineso genannte verschachtelte Tabelle. KlickenSie in diese eine Zelle der inneren Tabelle,und fügen Sie mit <Strg>-<V> den kopiertenText ein. Jetzt hält der Text gebührend Ab-stand vom blauen Rand.
Noch besser: Sie dürfen den Abstand freiwählen. Dazu klicken Sie in die innere Ta-belle und rufen den Menüpunkt „Tabelle,Tabelleneigenschaften“ auf. Der Wert ne-ben „Auffüllung“ legt den Abstand des Zell-inhalts vom Rand in Pixel fest. Tragen Sie
hier zum Beispiel eine „10“ein (ohne Anführungszei-chen).
11. Musterseite: Basisfür Erweiterungen
Das Layout ist nun fertig – si-chern Sie daher als Erstesdie Startseite mit „Datei,Speichern“. Jetzt ist es Zeit,dass die anderen Seiten andie Reihe kommen. Erzeu-gen Sie zuerst eine leereMusterseite, rufen Sie „Da-tei, Speichern unter“ auf,und geben Sie als Datei-name LEER.HTML an. Jetztlöschen Sie den gesamten
Haupttext und tragen stattdessen einenText wie „Baustelle: Hier wird noch gear-beitet.“ ein. Dann speichern Sie die Web-Seite erneut.
Diese Musterseite ist ab jetzt die Basisfür alle neuen Seiten. Sie laden die Muster-seite LEER.HTML und sichern sie mit „Da-tei, Speichern unter“ mit dem gewünsch-ten Dateinamen. Auf diese Weise erzeugenSie nun alle Unterseiten, deren Dateina-men Sie in der Navigationsleiste als Ziel an-gegeben haben: NEUIGKEITEN.HTML, FO-TOS.HTML und so weiter.
Wenn Sie jetzt die Startseite INDEX.HTML mit dem Internet Explorer über „Da-tei, Öffnen“ und die Schaltfläche „Durch-suchen“ aufrufen, funktionieren alle Linksder Navigationsleiste. In den folgendenKursteilen erfahren Sie, wie Sie die Inhalteder bisher leeren Web-Seiten nach IhrenVorstellungen gestalten können.
Link-Funktion: In der Navigationsleiste weisen Sie den Wörtern eine Ziel-
adresse zu, hier den Dateinamen der entsprechenden Web-Seite (Punkt 8)
Anpassen: Die Höhenangabe „100%“ sorgt dafür, dass die Navigations-
leiste immer bis zum unteren Fensterrand reicht (Punkt 9)
Schriftfarbe als Design
Den letzten Schliff geben Sie einer Web-Seite, wenn Sie die Schriftfarben auf dierestlichen Seitenelemente abstimmen. ImBeispiel macht es etwa Sinn, die normaleSchriftfarbe an das dunkle Hintergrund-blau des Logos anzupassen.
Zunächst stellen Sie mit Irfan View denRGB-Farbwert des blauen Hintergrundsfest (2 Punkt 5). Dann rufen Sie in Com-poser den Menüpunkt „Absatz, Seitenfar-ben und Hintergrund“ auf. Aktivieren Siedie Option „Benutzerdefinierte Farbenverwenden“, und klicken Sie auf dieSchaltfläche hinter „Normaler Text“. ImFarbauswahldialog tragen Sie den zuvorermittelten dunkelblauen RGB-Farbwertein – das Zeichen # nicht vergessen.
302 03.12.2003 9:02 Uhr Seite 5
PC-WELT SONDERHEFT 2/200468
Mit einer Fotogalerie präsentieren Sie die Bilder Ihrer Digitalka-mera oder des Scanners im Web. Wie’s perfekt funktioniert, zei-gen dieser Workshop und das Beispielmaterial auf der Heft-CD.
Fotos ins Web stellen
Bei einem Ausflug ins Grüne sind netteFotos entstanden. Unsere Beispiel-Websitesoll deshalb eine Fotogalerie bekommen.Wir zeigen Ihnen, wie das mit dem kosten-losen Galeriegenerator Jojothumb funktio-niert (für Windows 95/98/ME, NT 4, 2000und XP, auf C Heft-CD und unter www.jojotsch.de, 2,2 MB; mehr Details 2 Seite 117).
1. Fotos präsentieren: Diashow oder Galerie
Wenn Sie im Web Fotos präsentieren wol-len, können Sie sich an der klassischenDiashow orientieren: Auf der Web-Seite istein Foto fensterfüllend sichtbar. Über zweiLinks blättert der Besucher vor und zurück.Nachteil: Bei einer langsamen Online-Ver-bindung dauert der Seitenaufbau sehr lan-ge, weil die Bilder trotz JPG-Format rechtgroß sind. Und um die Bilder weiter hintenzu sehen, müssen sich die Surfer alle davorplatzierten Fotos anzeigen lassen, auchwenn sie diese vielleicht gar nicht interes-sant finden.
Deshalb hat sich in der Web-Praxis eine an-dere Lösung durchgesetzt: die Galerie mitVorschaubildern (englisch: Thumbnails).Die Thumbnail-Seite zeigt sechs bis zehnkleine Vorschaubilder. Ein Mausklick aufein Bild öffnet eine neue Web-Seite, die dasangeklickte Bild groß zeigt. Technisch istdas nicht weiter schwer, bedeutet aber eineMenge Handarbeit. Deshalbgibt es jede Menge Tools, diediese Aufgabe übernehmen,zum Beispiel Jojothumb.
2. Vorarbeiten: Fotos aus-wählen und kopieren
Bevor Jojothumb zum Ein-satz kommt, legen Sie mitdem Windows-Explorer einleeres Bilderverzeichnis aufder Festplatte an. Danachblättern Sie mit einem Gra-fikbetrachter wie dem Gra-tis-Tool Irfan View (2 Seite117) die Bildersammlung
durch und wählen die Bilder fürs Web aus.Diese kopieren Sie dann ins eben angelegteleere Verzeichnis. Irfan View verfügt überpfiffige Funktionen, die Ihnen dabei hel-fen. Nach dem Starten des Programms ru-fen Sie den Menüpunkt „Datei, Thumb-nails“ auf. In einem Extrafenster zeigt dasTool nun links einen Ordnerbaum wie derExplorer. Stellen Sie hier das Verzeichnismit den Bilddateien ein. Rechts zeigt IrfanView Thumbnails der Bilder aus diesemVerzeichnis (2 Abbildung unten).
Um eine Datei in ein anderes Verzeich-nis zu übertragen, rufen Sie „Datei, Selek-tierte Dateien kopieren“ auf oder drückendie Taste <F8>. Es erscheint das Dialogfeld„Kopiere“ (2Vordergrund Bild unten). Hierfinden sich Eingabefelder für zehn Zielver-zeichnisse. Klicken Sie hinter dem Eingabe-feld „1“ auf „Durchsuchen“, und stellen SieIhr bisher leeres Bilderverzeichnis ein. Drü-cken Sie nun die Taste <1>, oder klicken Sieauf die entsprechende Schaltfläche, so ko-piert Irfan View die markierte Bilddatei insZielverzeichnis „1“. Statt umständlich mitder Maus zu hantieren, brauchen Sie nurdie zwei Tasten <F8> und <1> zu drücken.
Mit der Kopieraktion stellen Sie sicher,dass nur die gewünschten Bilder in der Fo-togalerie im Web erscheinen und dass IhreOriginaldateien unangetastet bleiben. FallsSie also etwa in Jojothumb versehentlichein Bild löschen, so können Sie immernoch auf das Originalbild zurückgreifen.
3. Projekt einrichten: Profil anlegen und speichern
Sie starten das Indexprogramm nach derInstallation über das Start-Menü und „Pro-gramme, JoJoSoftware, JoJoThumb“. DasHauptfenster zeigt links einen Ordner-baum wie im Windows-Explorer (2 Abbil-
Von Wolfgang Nefzger
Bildauswahl: Der Grafikbetrachter Irfan View hilft mit Thumbnails und
schneller Kopierfunktion, die Galeriebilder zusammenzustellen (Punkt 2)
Grundkurs III
303 02.12.2003 17:43 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 69
Grundkurs III: FotogaleriePGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 68 – S. 71
dung oben). Stellen Sie den Ordner mit denBildern für die Galerie ein. Rechts ist auf-gelistet, wie viele Bilddateien sich in demOrdner befinden.
In der Voreinstellung zählen für dasTool übrigens nur JPG-Bilder. Falls Ihre Fo-tos ein anderes Dateiformat haben, passenSie Jojothumb in der Kategorie „Dateifilter“an. Verwenden Sie ausschließlich JPG-Bil-der, belassen Sie die Voreinstellung „jpg“,ansonsten schalten Sie zusätzlich das For-mat Ihrer Bilddateien ein. Wie Sie sehen,fehlt das GIF-Format – Bilder dieses For-mats wandeln Sie vorher mit Irfan Viewund „Datei, Batchkonvertierung/Umbe-nennung“ in das PNG-Format um.
Alle weiteren Einstellungen nehmen Sieim „Optionen“-Dialog vor. Dazu klicken Siedie gleichnamige Schaltfläche an. Wie Siesehen, bietet das Tool eine ganze MengeOptionen, die Sie auf der linken Seite aus-wählen. Bleiben Sie zunächst bei „Profile“.
Mit der Schaltfläche „Profilverzeichnis“wählen Sie den Ordner aus, den Jojothumbzum Speichern der Projektdatei benutzt.Stellen Sie hier das Bildverzeichnis ein.Wählen Sie anschließend unter „aktuellesProfil“ den Eintrag „Profilbeispiel_Schat-ten“, damit das Tool für jedes Vorschau-bild einen Schatteneffekt erzeugt. WennSie das nicht wollen, belassen Sie die „Vor-einstellung“. Wer ganz sicher gehen will,kann auch noch eine „Beschreibung“ ein-tragen. Diese ist auch nützlich als Todo-Liste, wenn Sie geplante Änderungen vor-merken wollen.
Klicken Sie nun auf „Speichern als“, undgeben Sie dem Profil einen aussagekräfti-gen Namen, etwa „Club-Fotogalerie“. Wäh-rend Sie die anderen Kategorien des Profils
bearbeiten, sollten Sie zwischendurch dieSchaltfläche „Speichern“ anklicken.
4. Klon-Funktion einschalten: Bilder verkleinern und kopieren
Digitalkamera-Originalbilder sind in derRegel viel zu groß für die Darstellung aufeiner Web-Seite. Eine Breite von 500 Pixelnist hier die praktische Obergrenze. Diemeisten Surfer nutzen einen Monitor mit1024 x 768 Pixeln Auflösung. Von den 1024Pixeln Breite gehen etwa 250 Pixel für denRahmen des Browser-Fensters und die Lese-zeichen verloren, die viele Surfer stets ein-geblendet haben. Links auf der Web-Seitemuss Platz für die Navigationsleiste blei-ben, im Beispiel 140 Pixel. Es bleiben maxi-mal 630 Pixel Breite für das Bild. Bei einerBildbreite von 500 Pixeln ist dann linksund rechts noch ein kleiner Rand übrig.
Jojothumb verkleinert die Bilddateienauf Wunsch automatisch für Sie. KlickenSie dazu die Kategorie „Clonen“ an, und ak-tivieren Sie ganz oben die gleichnamigeOption, um die Eingabefelder freizuschal-ten (2 Abbildung unten rechts). Entschei-dend ist das „Cloneverzeichnis“. Damit istdas Zielverzeichnis gemeint, in dem Jojo-thumb die verkleinerten Bilddateien,Thumbnails und HTML-Dateien ablegt.Klicken Sie auf die Schaltfläche „Clone-verzeichnis“, und stellen Sie das Home-page-Verzeichnis ein. In diesem Verzeichnislegt das Tool später drei Unterverzeichnis-se für die Galeriedateien an, so dass keinebestehenden Dateien versehentlich über-schrieben werden.
Aktivieren Sie nun die Option „Originalals JPEG kopieren“. Im Bereich „Ausdeh-nung/Qualität“ schalten Sie die Einstellung„Ändern auf Pixel für die“ ein. Im Eingabe-feld tragen Sie 500 für diegewünschten 500 Pixel Brei-te ein. Die Einstellung„längste Seite“ belassen Sie.Damit werden die Bildermaximal 500 Pixel breitoder 500 Pixel hoch, je nachBildausrichtung. Falls Siedie Bilder mit einer Digital-kamera aufgenommen ha-ben, enthalten die JPG-Da-teien zusätzliche Informa-tionen, die Exif/ IPTC-Daten.Darin sind Details wie Be-lichtungszeit, Brennweiteoder auch das Aufnahmeda-tum gespeichert. Mit der Op-
tion „Exif/IPTC-Informationen und Kom-mentare erhalten“ übernimmt Jojothumbdie Daten in die verkleinerte Bilddatei. Ak-tivieren Sie die Funktion nur, wenn Sie Tei-le der Exif-Daten über einen Stempel indi-viduell in jedes Bild einfügen wollen. An-sonsten verringern Sie die Dateigröße derBilder, indem Sie die Infos weglassen. AufWunsch können Sie einen Stempel in dieverkleinerten Bilddateien einfügen (2 Kas-ten „Stempel in Bilder einfügen“).
5. Thumbnail-Seite gestalten: Anzahl der Bilder festlegen
In den Kategorien „JoJoScript“ beziehungs-weise „Thumbnails“ müssen Sie nichts ver-ändern. Klicken Sie nun links auf die Kate-gorie „HTML“. Das Eingabefeld „HTML-Ver-zeichnis“ enthält den Namen des Verzeich-nisses, in dem Jojothumb die HTML-Datei-en für die Thumbnail-Seiten und die ein-zelnen Bilderseiten ablegen wird.
Im Bereich „Bildsortierung“ bestimmenSie die Reihenfolge der Thumbnails. Sinnmacht etwa die Einstellung „Datum“.Wenn Sie eine bestimmte Reihenfolge er-
Inhalt Seite
1. Diashow oder Galerie 682. Fotos auswählen und kopieren 683. Profil anlegen und speichern 684. Bilder verkleinern und kopieren 695. Thumbnail-Seite gestalten 696. Layout übernehmen 707. Bildseiten anpassen 718. Fein-Tuning 71
Kasten:Stempel in Bilder einfügen 71
Quelle wählen: Im Ordnerbaum links wählen Sie das
Quellverzeichnis mit den Bilddateien aus (Punkt 3)
Die Klonfabrik: Mit diesen Einstellungen erzeugt Jojothumb auf 500 Pixel
Breite oder Höhe reduzierte Bilder für die Galerie (Punkt 4)
303 02.12.2003 17:44 Uhr Seite 3
Workshops Grundkurs III: Fotogalerie
PC-WELT SONDERHEFT 2/200470
PPpP S. 68 – S. 71
PGrundlagen pWorkshops PUtilities
reichen wollen, müssen Sie die Dateina-men der Bilder im Windows-Explorer umeine laufende Nummer ergänzen, etwa „01-...“, „02-...“. Ganz unten steuern Sie mit „Jo-JoThumb Copyrightnotiz“, ob auf jederThumbnail-Seite ein Hinweis aufs Tool ein-geblendet wird. Die Option „Browser auto-matisch starten“ bewirkt, dass nach Erzeu-gen der Galerie sofort Ihr Standard-Browsermit der ersten Thumbnail-Seite startet.
Die Kategorien „Deko-Angaben“, „Start-seite“ und „Index-Seite“ lassen Sie unverän-dert. Die Deko-Angaben sind für den Schat-teneffekt zuständig, eine Startseite ist un-nötig, schließlich binden Sie die Galerie inIhre Website ein. Eine Index-Seite enthältdirekte Links zu den Thumbnail-Seiten,was nur bei sehr vielen Seiten sinnvoll ist.
Klicken Sie nun auf die Kategorie„Thumbnail-Seite“. Das Eingabefeld „Datei-name-Basis“ nimmt den Anfang des Datei-namens für die Thumbnail-Seiten auf. Jojo-thumb hängt eine laufende Nummer an,falls für viele Bilder mehrere Seiten nötigsind. Tragen Sie hier „thumb“ ein. Damitentstehen später die Dateinamen THUMB-1.HTML und so fort.
Die „Thumbnailverteilung“ regelt, wieviele Vorschaubilder auf einer Seite stehen.Im Beispiel sollen es sechs Vorschaubildersein, also tragen Sie bei „Thumbnails je Zei-le“ den Wert „3“ (ohne Anführungszei-chen) ein. Aktivieren Sie die Option „neueSeite nach Zeilen“, und tragen Sie den Wert„2“ ein (ohne Anführungszeichen). Die rest-lichen Werte lassen Sie unverändert. Weildie zehn Bilder im Beispiel auf einerThumbnail-Seite nicht Platz haben, erzeugtJojothumb zwei Seiten für Thumbnails.
Auch die Links zum Blätternzwischen den Thumbnail-Seiten fügt das Tool ein.Klicken Sie nun auf die Un-terkategorie „Seitendefiniti-on“ bei „Thumbnail-Seite“.Auf der rechten Seite zeigtdas Tool eine schematischeDarstellung des Seiteninhal-tes. Wenn Sie eines der Ele-mente der Vorschau ankli-cken, erscheinen im Einga-befeld unten die dem Ele-ment zugeordneten HTML-Tags. In der fertigen HTML-Datei sind diese HTML-Tagseingefügt. An manchen Stel-len stehen Angaben in ge-schweiften Klammern wie
„{count_pages}“. Es sind interne Variablen,die bei der Ausgabe durch Texte oder Zah-len ersetzt werden. Das Beispiel zeigt dieGesamtzahl an Thumbnail-Seiten an, sodass sich eine Überschrift wie „Seite 1 von3“ generieren lässt.
6. Layout übernehmen: Galerie an Website anpassen
Damit das Layout der Galerie zur Landro-ver-Website passt, sollen Überschrift, Logound die Navigationsleiste auftauchen. Da-zu fügen Sie den HTML-Code Ihrer Web-Sei-te aus Composer in Jojothumb ein. KlickenSie in Jojothumb im Vorschaubereich auf„Seitentitel“. Unten erscheinen die HTML-Tags für eine Überschrift: „<h2 align="center">JoJoThumb – {profile}</h2>“. ErsetzenSie die Überschrift durch „<h2 align="center">Ausflug ins Gruene</h2>“ (ohne die ge-schwungenen Anführungszeichen) oder ei-nen anderen sinnvollen Text. Wechseln Siejetzt zu Composer, und la-den Sie die Web-Seite FO-TOS.HTML. Aktivieren Sieüber die Registerkarte untendie Ansicht „HTML-Quelle“.Suchen Sie die Stelle, die un-mittelbar auf die schließen-de spitze Klammer des <bo-dy>-Tags folgt. Die Stelle soll-te mit „<table“ beginnen (2Abbildung oben). MarkierenSie ab dieser Stelle den Textbis zur Tabellenzelle, dieden Haupttext der Web-Seiteenthält. Im Beispiel beginntdieser Text mit „<b>Baustel-le:“. Rufen Sie den Menübe-
fehl „Bearbeiten, Kopieren“ auf. WechselnSie zurück zu Jojothumb, und fügen Sie imEingabebereich ganz am Anfang mit der<Return>-Taste einen Zeilenumbruch ein(2 Abbildung unten). Setzen Sie dieSchreibmarke in die leere Zeile, unddrücken Sie die Tastenkombination <Strg>-<V>. Mit der Schaltfläche „Syntaxtest“ un-ter dem Eingabebereich prüfen Sie übri-gens, ob Sie beim Kopieren etwas falsch ge-macht haben.
Klicken Sie nun im Vorschaubereich auf„Seitenabschluss“. Wechseln Sie zu Compo-ser, und markieren Sie hinter dem Haupt-text ab dem schließenden Tag der Zelle„</td>“ alles bis vor den Tag „</body>“ amEnde der Datei. Übertragen Sie den Text indie Zwischenablage. Wechseln Sie zu Jojo-thumb, und fügen Sie den Text mit <Strg>-<V> in den Eingabebereich ein.
Hintergrundbild ergänzenJetzt fehlt nur noch das Hintergrundbild.Klicken Sie im Vorschaubereich auf einefreie Stelle, so erscheinen im Eingabebe-reich zwei Attribute für Hintergrund undTextfarbe.
Wechseln Sie jetzt zu Composer, und su-chen Sie am Anfang die Zeile, die mit „<bo-dy“ beginnt. Kopieren Sie den Text danachbis vor die abschließende spitze Klammer(im Beispiel: „topmargin="0" leftmargin="0"background="28.gif"“) in die Zwischenabla-ge. Wechseln Sie nun zu Jojothumb, lö-schen Sie den Inhalt des Eingabebereichs,und fügen Sie mit <Strg>-<V> die Zwi-schenablage ein.
Standardmäßig zeigt Jojothumb nor-male Links in Schwarz an. Um die Stan-dardfarbe für Links einzustellen, klickenSie im Vorschaubereich den gelben Balken
HTML-Tags kopieren: Markieren Sie in Composer den Teil der HTML-Tags,
der vor dem Haupttext der Web-Seite liegt (Punkt 6)
HTML-Tags einfügen: In Jojothumb fügen Sie die im Bild oben kopierten
HTML-Befehle im Bereich für den Seitentitel ein (Punkt 6)
303 02.12.2003 17:45 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 71
Grundkurs III: FotogaleriePGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 68 – S. 71
am oberen Rand an. Löschen Sie nun imEingabebereich alle Angaben ab „<style >“.
7. Bildseiten anpassen: Kopieren wiederholen
Nun kümmern Sie sich um die Detailsei-ten, die beim Anklicken eines Thumbnailsjeweils ein großes Bild anzeigen. Auch hiersoll das Layout der Website entsprechen.Öffnen Sie die Unterkategorie „Seitendefi-nition“ bei „Bild-Seite“. Der Aufbau ent-
spricht exakt dem Gegenstück bei „Thumb-nail-Seite“. Wiederholen Sie die Anweisun-gen aus 2 Punkt 6. Wechseln Sie nun in dieKategorie „Profile“, und klicken Sie auf„Speichern“. Schließen Sie den „Optionen“-Dialog mit der Schaltfläche „OK“.
Klicken Sie auf „Starten“, damit Jojo-thumb die Galerie erzeugt. Je nach Materi-al und Anzahl der Bilder kann es etwasdauern, bis die Bilder verkleinert und dieThumbnail- sowie die HTML-Dateien er-zeugt sind. Danach öffnet sich Ihr Stan-dard-Browser. Sie sehen die erste Galerie-seite mit den Vorschaubildern. Die Naviga-tion funktioniert, auch die Detailbilder las-sen sich aufrufen. Allerdings fehlen dieLogografik und das Hintergrundbild, unddie Links der Navigationsleiste funktionie-ren noch nicht (2 Abbildung oben).
8. Fein-Tuning: Bilder kopieren und Links anpassen
Das Grafikproblem hat eine einfache Ursa-che: Die HTML-Tags erwarten, dass die bei-den Bilddateien im selben Verzeichnis wiedie HTML-Datei gespeichert sind. StartenSie den Windows-Explorer, und wechselnSie zum Homepage-Verzeichnis. Darin sinddrei neue Unterverzeichnisse angelegt: DE-CO_SCHATTEN, HTML_SCHATTEN undTHUMBS. Der erste Ordner enthält die Gra-fiken für den Schatteneffekt, der zweitesämtliche HTML-Dateien (Thumbnail- undBilderseiten), der dritte die Thumbnails.
Die Bilddateien für die „Großansicht“ sel-ber sind im Homepage-Verzeichnis gelan-det. Kopieren Sie mit dem Windows-Explo-rer die beiden Bilddateien für Hinter-grundgrafik und Logo aus dem Homepage-Verzeichnis ins HTML-Verzeichnis.
Danach wechseln Sie wieder zu Jojo-thumb, klicken auf „Optionen“ und öffnendie Unterkategorie „Seitendefinition“ bei„Thumbnail-Seite“. Klicken Sie im Vor-schaubereich auf „Seitentitel“. Durchsu-chen Sie die HTML-Tags im Eingabebereich,bis Sie den ersten Link-Tag finden. Er lautetim Beispiel „<a href="index.html">“.
Der erste Link in der Navigationsleisteruft die Homepage auf. Er erwartet dieZieldatei INDEX.HTML im selben Verzeich-nis. Sie ist aber im übergeordneten Home-page-Verzeichnis gespeichert. Ergänzen Siedeshalb den Link so: „<a href="../index.html">“. Verfahren Sie so auch bei allen fol-genden Links. Wechseln Sie zur „Seitende-finition“ bei „Bild-Seite“, und wiederholenSie die Änderung bei den Links.
Speichern Sie das Profil, und beendenSie das Dialogfeld. Erzeugen Sie die Galerie-dateien erneut über die Schaltfläche „Star-ten“. Jetzt sind die Thumbnail- und Bildsei-ten ins normale Layout eingebunden, alleLinks der Navigationsleiste funktionieren.Um die Galerieseite über die Navigations-leiste zu starten, müssen Sie einen zusätz-lichen Link setzen. Wie Sie dabei vorgehen,zeigt der nächste Kursteil (2 Seite 72).
Erster Versuch: Die Thumbnail-Seiten von Jojothumb passen sich ans Site-Layout an. Aber es fehlen noch die Logo-
grafik und das Hintergrundbild, auch funktionieren die Links der Navigationsleiste noch (Punkt 7)
Stempel in Bilder einfügen
Damit es Bilderdiebe schwerer haben, fü-gen Sie in die verkleinerten Bilddateien(2 Punkt 4) einen Stempel ein. KlickenSie dazu in Jojothumb „Clonen“ an, undaktivieren Sie die Option „Stempel erzeu-gen“. Nun erscheint links die neue Kate-gorie „Stempel“, die Sie anklicken.
Sie haben die Wahl zwischen einemText- und einem Bildstempel (oder bei-den). Beim Bildstempel blenden Sie eineGrafikdatei, etwa das Firmenlogo, ins Bildein. Fürs Beispiel nehmen wir einen Text-stempel. Dazu schreiben Sie „Landrover-Club München“ ins Eingabefeld „Text“.Dann wählen Sie Art und Größe der Schriftaus; standardmäßig ist die Schrift weiß.Um die Schriftfarbe zu verändern, klickenSie ins Eingabefeld – nun erscheint derFarbauswahl-Dialog von Windows.
Im Bereich „Position“ legen Sie fest,wo der Stempel im Bild erscheint. Jedegrün markierte Stelle steht für eine Positi-on, die Sie mit einem Mausklick setzenoder löschen. Der Stempel darf auchmehrfach vorkommen. Fürs Beispielwählen wir die Ecke links unten. Die Off-set-Werte legen fest, wie weit der Stempelvom Bildrand entfernt ist. Die „Deckkraft“bestimmt, ob die Schrift das Bild durch-scheinen lässt – je geringer die Deckkraft,desto stärker ist der Hintergrund sichtbar.
Bildstempel: Links unten in der Bildecke steht
der Text, den Jojothumb eingefügt hat
303 02.12.2003 17:46 Uhr Seite 5
PC-WELT SONDERHEFT 2/200472
Eine ordentliche Website braucht eine Liste mit Links. Wirzeigen, wie Sie diese ganz einfach aus dem Internet Explorerübernehmen. Das Beispielmaterial finden Sie auf der Heft-CD.
Link-Liste anfertigen
Jeder Surfer sammelt eine mehr oderweniger umfangreiche Liste mit Favoriten.Wenn Ihre Favoriten-Liste bereits die Linksenthält, die Sie auf Ihrer Homepage inte-grieren möchten, haben Sie das Verlinkenschon halb erledigt.
Hier zeigen wir Ihnen, wie Sie eine Listemit Favoriten aus dem Internet Explorer inIhre Homepage übertragen und eineSprungleiste mit internen Links einrich-ten, mit deren Hilfe sich die einzelnen The-mengebiete schneller erreichen lassen.
1. Internet Explorer: Favoriten exportieren
Der Internet Explorer speichert die gesam-melten Links unter dem Titel „Favoriten“.Sie müssen diese Favoriten nicht mühsameinzeln über die Zwischenablage in Compo-ser, den Web-Editor, den wir für diesen fünf-teiligen Grundkurs verwenden, überneh-men. Stattdessen exportieren Sie die Favori-ten oder einen Teil davon als HTML-Datei.
Es ist sinnvoll, die Favoriten gleich imExplorer nach Themen zu sortieren. LegenSie für jedes Thema einen neuen Ordner
an, und ziehen Sie die Favoriten per Drag &Drop in den jeweils passenden Ordner. Dasgeht im Explorer wesentlich schneller alsspäter in Composer – und die Suche in derFavoritenliste ist auch einfacher. Im Inter-
net Explorer rufen Sie den Menüpunkt „Da-tei, Importieren und exportieren“ auf. Dieerste Seite des Import/Export-Assistenten ver-lassen Sie mit „Weiter“.
HTML-Datei erstellenIm nächsten Schritt markieren Sie den Lis-teneintrag „Favoriten exportieren“ undklicken auf „Weiter“. Nun wählen Sie in ei-ner Baumstruktur den Favoriten-Ordneraus, den Sie exportieren wollen, und be-stätigen mit „Weiter“.
Der Internet Explorer exportiert wahl-weise direkt in die Favoritenliste des Net-scape-Browsers. Um eine HTML-Datei zu er-halten, wählen Sie allerdings die Option„In Datei oder Adresse exportieren“.
Über die Schaltfläche „Durchsuchen“stellen Sie die Zieldatei ein. Den Vorgabe-wert BOOKMARK.HTM belassen Sie, und alsZielverzeichnis geben Sie Ihr Homepage-Verzeichnis vor. Bestätigen Sie mit derSchaltfläche „Speichern“. Ein Klick auf„Weiter“ und anschließend auf „Fertig stel-len“ schließt den Export ab.
Laden Sie nun mit „Datei, Datei öffnen“ dieaus dem Internet Explorer exportierte Da-tei BOOKMARK.HTM in Composer, wo Siesie in einem zweiten Programmfenster se-hen. Das Ganze sieht schön sauber forma-tiert aus, die Themengebiete sind als Zwi-schenüberschriften eingefügt.
Im Prinzip können Sie die Link-Liste di-rekt übernehmen. Markieren Sie mit der
Von Wolfgang Nefzger
Link auf eine andere Web-SeiteEinen Link auf eine andere Web-Seite Ihres Internet-Auftritts setzen Sie genauso leicht wie ei-nen internen Link auf einen benannten Anker. Dazu ein praktisches Beispiel: Im dritten Teildieses fünfteiligen Grundkurses (2 ab Seite 68) haben Sie ein Fotoalbum zusammengestellt.Es fehlt noch die Verbindung zwischen der bestehenden Fotoseite und der Galerie.
Laden Sie zunächst die Web-Seite FOTOS.HTML in Composer. Löschen Sie den bekanntenBaustellen-Text im Hauptbereich, und fügen Sie mit der <Return>-Taste eine Leerzeile ein.Anschließend tragen Sie in der zweiten Zeile den Text ein, der später als Link dienen soll, in unserem Beispiel „Ausflug ins Grüne, August 2003“. Wenn Sie mehrere Fotoalben planen,sollten Sie die Links als Liste formatieren. Setzen Sie den Cursor irgendwo in den Text, und ru-fen Sie den Menüpunkt „Absatz, Liste, Auflistung“ auf. Um einen neuen Listenpunkt anzufü-gen, gehen Sie einfach ans Ende der Zeile und drücken <Return>.
Markieren Sie jetzt den gesamten Text, und klicken Sie auf das Icon „Verknüpfung“ in derSymbolleiste. Im einzigen Eingabefeld tragen Sie den Namen der Zieldatei ein. Im Beispiel istdas THUMB-1.HTML. Diese Web-Seite liegt allerdings im Unterverzeichnis HTML_SCHATTEN. Indas Eingabefeld tragen Sie deshalb „html_schatten/thumb-1.html“ ein (ohne Anführungszei-chen). Nach dem Schließen des Dialogfelds ist der Link funktionsfähig.
Tastenkombination <Strg>-<A> die gesam-ten Links inklusive Überschrift, und rufenSie „Bearbeiten, Kopieren“ auf (bezie-hungsweise <Strg>-<C>). Mit „Datei, Dateiöffnen“ laden Sie jetzt die DateiLINKS.HTML aus Ihrem Website-Projekt.Hier löschen Sie den bestehenden Baustel-len-Text im Hauptbereich rechts. Dann fü-gen Sie mit „Bearbeiten, Einfügen“ die Link-Liste aus der Zwischenablage ein; schnellergeht’s mit <Strg>-<V>.
Die Überschrift „Bookmarks“ und dienachfolgende Leerzeile sind überflüssig.Setzen Sie den Cursor vor die Überschrift,und löschen Sie mit der Taste <Entf>, bisnur noch die Leerzeile vorhanden ist. Die-ses etwas umständliche Verfahren stellt si-cher, dass Sie nicht irrtümlich einen Teilder Listenformatierung mit löschen.
Jetzt bleibt noch eine Leerzeile am An-fang vor der ersten Zwischenüberschrift (2 Abbildung oben). Am einfachsten lö-schen Sie diese im HTML-Modus. Klicken Sieauf das Register „HTML-Quelle“ unten imComposer-Fenster. Gehen Sie die HTML-Tagsdurch, bis Sie eine Zeile mit „<dl>“ finden.Hier beginnt die Liste mit den Links.
Die folgenden Zeilen bis zum Tag„<h3>“ löschen Sie. Wechseln Sie über dieRegisterkarte zurück in die Normalansicht– die Leerzeile ist verschwunden.
3. Leichtere Suche:Sprungleiste einfügen
Die Liste mit den Links kann ziemlich langwerden. Um leichter zu einem bestimmtenThema zu kommen, bauen Sie am Seiten-anfang eine kleine Sprungleiste ein. DieLinks führen in diesem Fall direkt zu der
Stelle der Web-Seite, an derdie Links des Themenge-biets beginnen. Zunächsttragen Sie am Beginn desHauptbereichs mit denLinks die Themengebietedurch einen Bindestrich ge-trennt ein: „Clubs – Händler– Private Homepages – Rei-sen“. Das klingt einfacher,als es ist. Denn die Listen-definition beginnt direktam Anfang der Zelle, undComposer lässt nicht zu,dass Sie die Schreibmarkevor der Markierung platzie-ren. Also wechseln Sie wie-der über die Registerkarte indie Ansicht „HTML-Quelle“
und suchen den ersten Tag „<dl>“. Unmit-telbar davor sollte der Tag „<td ... >“ stehen.Fügen Sie zwischen beiden Tags mit der<Return>-Taste eine Leerzeile ein, und tip-pen Sie die Themenüberschriften ein.
Anschließend wechseln Sie über die Re-gisterkarte zurück in die Normalansicht.Oben auf der Web-Seite sind jetzt in Grund-schrift die Texte zu sehen.
4. Interne Links setzen:Anker als Sprungziel
Bevor Sie die Wörter der Sprungleiste inLinks umwandeln, definieren Sie das Zielfür die Links. Klicken Sie die erste Zwi-schenüberschrift „Clubs“ doppelt an, umsie zu markieren.
Nun rufen Sie den Menüpunkt „Einfü-gen, Benannter Anker“ auf. In einem Dia-
logfeld geben Sie dem Anker einen Namen,als Vorgabewert trägt Composer den mar-kierten Text ein. Den können Sie überneh-men und mit „OK“ bestätigen. Achten Sieaber darauf, dass der Text keine Leerzei-chen und Sonderzeichen wie Umlaute ent-hält und am Anfang keine Zahl steht.
Weisen Sie nach diesem Schema auchden übrigen Zwischenüberschriften einenbenannten Anker zu. In Composer ist jederAnker mit einem gelben Ankersymbol mar-kiert. Im Browser dagegen sind die Ankerspäter unsichtbar.
VerknüpfungKlicken Sie jetzt in der Sprungleiste denersten Begriff „Clubs“ zur Markierung dop-pelt an. Aus diesem Wort soll ein Link wer-den, der als Ziel den benannten Anker derentsprechenden Zwischenüberschrift hat.
Klicken Sie auf das Icon „Verknüpfung“in der Symbolleiste. Öffnen Sie die Aus-wahlliste, darin sind sämtliche benanntenAnker der Web-Seite aufgelistet. Stellen Siedas passende Ziel ein, und bestätigen Sie danach mit „OK“. Wiederholen Sie dieAktion für die anderen Links der Sprung-leiste (2 Abbildung unten).
Um die Links innerhalb der Web-Seiteauszuprobieren, speichern Sie die Dateiund öffnen sie mit dem Internet Explorer.Ein Klick auf einen der Links sorgt dafür,dass der Browser die Web-Seite bis zur je-weiligen Zwischenüberschrift hochscrollt.Wenn Sie möchten, können Sie die Sprung-leiste noch komplett markieren und dannüber den Menüpunkt „Absatz, Ausrichten,Zentriert“ in die Mitte stellen.
Nicht ohne Trick: Die verbleibende Leerzeile vor der ersten Zwischenüber-
schrift löschen Sie am besten im HTML-Modus (Punkt 2)
Sprungziel auswählen: Wählen Sie im Dialogfeld „Link-Eigenschaften“ einen benannten Anker als Ziel aus.
Wiederholen Sie die Aktion anschließend für die anderen Links der Sprungleiste (Punkt 4)
304 02.12.2003 17:26 Uhr Seite 3
PC-WELT SONDERHEFT 2/200474
Ein Gästebuch rundet Ihre Website ab. Besucher können ihreMeinung loswerden und Beiträge von anderen durchstöbern.Das Beispielmaterial finden Sie zum Nachbauen auf der Heft-CD.
Gästebuch erstellen
Im fünften und letzten Teil des Home-page-Grundkurses, in dem wir Schritt fürSchritt den Bau einer einfachen Website er-klären, erhält Ihre Web-Präsenz mit demGästebuch ein interaktives Feature. Davonhaben nicht nur Ihre Besucher etwas, son-dern auch Sie: Sie bekommen Feedback zuIhrem Web-Auftritt und können diesenweiter verbessern und den Wünschen derGäste entsprechend anpassen.
Damit ein Gästebuch funktioniert, be-nötigen Sie ein CGI-Script auf dem Webser-ver (2 Seite 44). Es muss die neuen Kom-mentare entgegennehmen und in die Listeder Gästebucheinträge aufnehmen.
Wenn Ihr Provider keine eigenen Scriptserlaubt oder Sie nicht programmieren kön-nen: kein Problem! Binden Sie einfach einfertiges Gästebuch ein, das viele Anbietersogar kostenlos zur Verfügung stellen. DasScript läuft dann auf dem Server des An-bieters. Zur Finanzierung blenden die meis-
ten Anbieter ein Werbebanner ein. AchtenSie daher im eigenen Interesse darauf, dasses sich um seriöse Angebote handelt.
Bei www.kostenlos.de finden Sie in der Ru-brik „Internet, Homepage-Tools“ eine ganzeReihe entsprechender Anbieter. Für das Bei-spiel haben wir uns für www.123gb.de ent-schieden. Das Gästebuch lässt sich sehr viel-fältig anpassen, und für fünf Euro pro Jahrwerden Sie auch die Werbung los.
1. Hintergrundbild: Die Datei muss online sein
Auf der Startseite von 123gb.de klicken Sieauf „Anmelden“ und füllen dann die ge-wünschten Eingabefelder aus. Wichtig sinddabei vor allem der Benutzername, dasPasswort und die Mailadresse. Mit „Gäste-buch einrichten“ schließen Sie den Vor-gang ab. Nach kurzer Zeit erhalten Sie eineBestätigungsmail. Unter der Navigations-leiste von 123gb.de tragen Sie in die Einga-
befelder „User“ und „Passwort“ Ihre Datenein und klicken auf „Login“. Sie befindensich jetzt im Konfigurationsbereich IhresGästebuchs. Sie wählen die gewünschteAufgabe über die Navigationsleiste aus,rechts zeigt die Web-Seite eine kurze Er-klärung zu den einzelnen Punkten.
Klicken Sie zunächst auf die Schalt-fläche „Layout“. Neben der Farbe für ver-schiedene Elemente legen Sie hier auch dasHintergrundbild der Web-Seite für das Gäs-tebuch fest. Dazu muss sich die Bilddateibereits auf dem Webserver bei Ihrem Pro-vider befinden. Wenn Sie die Website be-reits hochgeladen haben, ist das der Fall.Der Grund: Das Script von 123gb.de holtsich das Bild direkt von Ihrem Webserver.
Tragen Sie im Eingabefeld „Hinter-grundbild“ die komplette Web-Adresse desBildes ein, also zum Beispiel http://<www.domain.de>/<muster.gif>. Statt <www.domain.de> verwenden Sie die Web-AdresseIhrer Homepage, statt <muster.gif> den Da-teinamen Ihres Hintergrundbildes. An-schließend klicken Sie am Ende der Web-Seite auf die Schaltfläche „Speichern“.
Um das Gästebuch auszuprobieren, öff-nen Sie ein zweites Browser-Fenster. TippenSie zum Aufruf des Gästebuchs die Web-Adresse ein, die Sie in der Bestätigungsmailfinden. Das Gästebuch zeigt einen Eintragund Ihr Hintergrundbild.
2. Eigenes Layout kopieren: Header und Footer festlegen
Klicken Sie jetzt auf „Sonstige Einstellun-gen“. Für das Layout interessieren vor allemdie Eingabefelder „Header“ und „Footer“ (2 Abbildung rechte Seite oben). Hier tra-gen Sie den HTML-Code ein, den das Gäste-buch am Anfang beziehungsweise am En-de einfügen soll. Damit stülpen Sie sozusa-gen das Layout Ihrer Website über das Gästebuch auf dem fremden Server. Diesel-be Technik kommt übrigens bei der Foto-galerie in Teil III dieses Grundkurses zumEinsatz (2 ab Seite 68).
Laden Sie in Composer mit „Datei, Dateiöffnen“ GAESTEBUCH.HTML. Wechseln Sieüber die Registerkarte „HTML-Quelle“ dieAnsicht. Suchen Sie die Stelle, die unmit-telbar auf die schließende spitze Klammerdes <body>-Tags folgt. Die Stelle sollte mit„<table“ beginnen. Markieren Sie ab dieserStelle den Text bis zur Tabellenzelle, dieden Haupttext der Web-Seite enthält. ImBeispiel beginnt dieser Text mit „<b>Bau-stelle:“. Rufen Sie den Menübefehl „Bear-
beiten, Kopieren“ auf. Wechseln Sie nunzurück zum Web-Browser, und klicken Siedas Eingabefeld „Header“ an. Mit demMenüpunkt „Bearbeiten, Einfügen“ oderder Tastenkombination <Strg>-<V> fügenSie den HTML-Code ein.
Wechseln Sie zurück zu Composer, undmarkieren Sie hinter dem Haupttext abdem schließenden Tag der Zelle („</td>“) al-les bis vor den Tag „</body>“ am Ende derDatei. Kopieren Sie diese Zeichen wie be-schrieben in das Eingabefeld „Footer“ imBrowser. Dann klicken Sie am Ende derWeb-Seite auf die Schaltfläche „Speichern“.
3. Logo: Direkt von Ihrem Webserver laden
Wenn Sie das Gästebuch jetzt zur Kontrol-le aufrufen, sieht das Ergebnis schon ganzgut aus. Allerdings fehlt das Logo linksoben. Das ist nicht verwunderlich, dennder HTML-Code sucht die Bilddatei auf demWebserver von 123gb.de. Und dort ist sienatürlich nicht vorhanden.
Klicken Sie auf der Konfigurationsseitevon 123gb.de auf „Sonstige Einstellungen“.Im Eingabefeld „Header“ ist im HTML-Codeauch der Tag „<img ...>“ enthalten, der dasBild einbindet. Suchen Sie nach diesem Tagund dem Attribut „src="logo.gif"“ darin(selbstverständlich kann der Dateiname beiIhnen anders lauten).
Ergänzen Sie den Dateinamen wie in 2 Punkt 1 beim Hintergrundbild zu einerkompletten Web-Adresse, also etwa http://<www.domain.de>/<logo.gif>. Jetzt störtnoch der Rand auf der linken und oberenSeite, wie Sie es bereits aus Kursteil II ken-nen (2 ab Seite 64).
In der Konfiguration gibt es keine Mög-lichkeit, Attribute für den Tag „<body>“ an-zugeben. Um das Problem zu lösen, greifen
wir zu einem Trick: SetzenSie die Schreibmarke imEingabefeld „Header“ ganzan den Anfang, und fügenSie mit der <Return>-Tasteeine Leerzeile ein. In dieseLeerzeile tragen Sie „<bodytopmargin="0" leftmargin="0">“ ein. Das ist laut HTML-Standard nicht erlaubt,funktioniert aber zumin-dest mit dem Internet Ex-plorer und mit Opera, aller-dings nicht mit Mozilla/Net-scape. Benutzer der letztge-nannten beiden Browser
können das Gästebuch trotzdem problem-los nutzen. Schließen Sie die Eingabe wie-der mit der Schaltfläche „Speichern“ ab.
Gästebuch mit Website verknüpfenUm das Gästebuch mit Ihrer Website zuverknüpfen, laden Sie die Seite GAESTE-BUCH.HTML in Composer. Löschen Sie denBaustellen-Text, und tippen Sie stattdesseneinen Text ein wie „Tragen Sie sich in unserGästebuch ein ...“. Markieren Sie das Wort„Gästebuch“ im Composer, und klicken Siedas Icon „Verknüpfung“ in der Symbolleis-te an. Tragen Sie im Eingabefeld den Linkzum Start des Gästebuchs aus der Bestäti-gungsmail von 123gb.de ein – fertig.
Alternativ passen Sie die Navigations-leiste an: Setzen Sie die Schreibmarke aufdas Wort „Gästebuch“, und klicken Sie auf
„Verknüpfung“ in der Symbolleiste. Lö-schen Sie im Eingabefeld GAESTEBUCH.HTML, und tragen Sie den Link zum 123gb.de-Gästebuch ein. Diese Prozedur müssenSie auf allen Web-Seiten durchführen.
4. Verwaltung: Kommentare freigeben und löschen
Als Verwalter des Gästebuchs sind Sie auchfür den Inhalt verantwortlich. Standardmä-ßig schickt Ihnen der Webserver deshalb je-den neuen Eintrag als Mail zu. Um einenEintrag zu löschen, loggen Sie sich auf derHomepage von 123gb.de mit Benutzerna-me und Passwort ein. Klicken Sie auf dieSchaltfläche „Einträge“ – eine Liste zeigtdann alle Einträge des Gästebuchs an.
Über die Links rechts neben jedem Ein-trag fügen Sie einen Kommentar hinzu,verändern den Eintrag oder löschen ihn (2 Abbildung unten). Über die Rubrik„Sonstige Einstellungen“ lässt sich die Mail-benachrichtigung abstellen. In diesem Fallmüssen Sie das Gästebuch im Browser auf-rufen, um neue Einträge zu sehen.
Wenn Sie nicht wollen, dass neue Ein-träge sofort veröffentlicht werden, klickenSie in der Navigationsleiste auf „Sicher-heit“. Stellen Sie die Option „Gästebuchmoderieren“ auf „Ja“ ein. Von nun an müs-sen Sie neue Einträge persönlich freischal-ten. Dazu erhalten Sie eine Mail mit demText des Eintrags und zwei Links zum Ver-werfen oder Freigeben. Nun viel Spaß beimNachbauen unserer Beispiel-Website!
Layout kopieren: In die Eingabefelder „Header“ und „Footer“ fügen Sie den
HTML-Code aus Ihrer Web-Seite ein (Punkt 2)
Gästebuch verwalten: Über die Konfigurationsseite bei www.123gb.de, dem Anbieter, dessen Gästebuch wir auf
unserer Beispiel-Website einsetzen, löschen oder kommentieren Sie jeden Eintrag (Punkt 4)
305 02.12.2003 17:23 Uhr Seite 3
PC-WELT SONDERHEFT 2/200476
Javascript sorgt für Effekte auf Ihrer Homepage. Falls Sie Scriptsnicht selber programmieren möchten, holen Sie sich fertige ausdem Internet. Die Workshop-Beispiele finden Sie auf der Heft-CD.
Javascript: So geht’s
Javascript ist eine einfache Program-miersprache, die Ihre Homepage intelli-gent macht. Sie können sie für simple Ef-fekte nutzen, etwa um das aktuelle Datumund die Uhrzeit auf Ihrer Website anzeigenzu lassen. Aber auch ganze Spiele wie Java-script-Schach (2 Abbildung oben) lassensich mit Javascript realisieren.
Im Internet gibt es zahlreiche fertigeScripts zum Download (2 Kasten „Hier be-kommen Sie fertige Scripts“). Dieser Artikelzeigt Ihnen, wie Sie fertige Scripts an denrichtigen Stellen in Ihren HTML-Code ein-bauen und kleinere Modifikationen vor-nehmen. Wenn Sie mit HTML-Tags nichtklarkommen, hilft ein Blick in den Grund-lagen-Artikel 2 ab Seite 34.
1. Das erste Programm:Hello World!
Lernen Sie am besten ohne lange theoreti-sche Erklärungen anhand eines Beispiels:Javascript-Programme tragen Sie direkt inden HTML-Text einer Web-Seite ein. Allewichtigen Browser von Netscape/Mozillaüber den Internet Explorer bis zu Opera
unterstützen Javascript. Das Programm istmit den Tags „<script>“ und „</script>“ ein-gefasst. Ein klassisches Beispiel zum Erler-nen einer Programmiersprache ist das Hel-lo-World-Programm. Es hat nur eine Aufga-be: den Text „Hello World!“ am Bildschirmauszugeben (2 Abbildung unten). Gleichdas komplette Beispiel:
<html><head><title>JavaScript minimal</title>
</head><body>
JavaScript sagt:
<script type="text/javascript">
<!--document.write ("Hello World!");
//--></script></body></html>
Das entspricht dem Standardaufbau einerWeb-Seite. Der für Javascript relevante Teilist nur fünf Zeilen lang. Das Attribut „type="text/javascript"“ im einleitenden <script>-Tag legt fest, dass das Script die Sprache Ja-vascript benutzt. Das ist praktisch immerder Fall, es gibt aber noch andere Sprachenwie VB-Script beim Internet Explorer. In äl-teren Web-Seiten finden Sie statt des type-Attributs oft die Angabe „language="JavaScript"“. In den Anfangstagen von HTMLwar das die gültige Schreibweise, sie funk-tioniert auch heute noch.
Eine Zeile sagt allesWie bei HTML spielen Zeilenumbrüche kei-ne Rolle. So können Sie ein Javascript or-dentlich formatieren und zu lange, un-übersichtliche Zeilen vermeiden. Eine Zei-le endet immer mit einem Strichpunkt.
Das Script selbst besteht nur aus einerZeile: „document“ bezieht sich auf die ak-tuelle Web-Seite, die der Browser gerade an-zeigt. Und „write“ sorgt dafür, dass derBrowser an dieser Stelle der Web-Seite denin Klammern angegebenen Text schreibt.Sobald der Browser beim Einlesen desHTML-Quelltextes an dieser Stelle ange-kommen ist, arbeitet er das Script ab. Da-durch mischen Sie normalen Text auf derWeb-Seite mit den Ausgaben von Javascript.
2. Kommentarzeichen:Das Script verstecken
Diese eine Scriptzeile ist als Kommentarmarkiert: „<!-- Kommentar //-->“ weist ältereBrowser ohne Javascript-Unterstützung an,diesen Text zu ignorieren. Würde diese An-gabe fehlen, würde der Browser das Scriptals Text auf der Web-Seite ausgeben. Moder-ne Browser begehen solche Fehler nicht, esmacht also in der Praxis auch nichts, wenn
Von Wolfgang Nefzger
Klassisch: Ein Beispiel zum Erlernen einer Program-miersprache ist das Hello-World-Programm (Punkt 1)
306.qua 02.12.2003 17:16 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 77
JavascriptPGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 76 – S. 79
Sie den Kommentar weglassen. Die Schreib-weise hat sich aber eingebürgert.
Innerhalb des Scripts sind ebenfallsKommentare erlaubt. Den Beginn markie-ren Sie mit „/*“, das Ende passend dazu mit„*/“. Geht es nur um einen einzeiligen Kom-mentar, so beginnen Sie mit „//“. Das wirktbis zum Zeilenende, ein Abschlusszeichenist nicht erforderlich.
Verschiedene KommentarzeichenWarum gibt es zwei verschiedene Kom-mentarzeichen? Die Variante „<!-- //-->“ istim HTML-Standard festgelegt. Viele Anwen-der gebrauchen diese Zeichen auch inScripts, die Browser akzeptieren das still-schweigend. Im Javascript-Standard geltendagegen „/*“ und „*/“ sowie „//“.
Moderne Browser wie der Internet Ex-plorer 6 und Mozilla/Netscape 7 erlaubeninnerhalb des Scripts nur noch diese Ja-vascript-Kommentarzeichen. Am Anfangund Ende des Scripts ist aber weiterhin dieHTML-Variante „<!-- //-->“ erlaubt.
3. Event-Handler:Script auf Mausklick
Grundsätzlich ist es egal, anwelcher Stelle des HTML-Quelltextes Sie das Scripteinbauen. Es dürfen auchmehrere Scripts über denQuelltext verteilt vorkom-men. Der Browser führtdann die Scripts jeweils aus,wenn er an der entspre-chenden Stelle in der HTML-
Datei angekommen ist. Wollen Sie nicht,dass ein Script gleich beim Laden der Web-Seite aktiv wird, verwenden Sie Event-Handler (auf Deutsch in etwa „Ereignisrou-tine“). In einem normalen HTML-Tag wie
<input type=button value="Klick mich!">
fügen Sie einen Event-Handler ein: „on-Click=alert ("Angeklickt!")“. Der Tag erzeugteine Schaltfläche. Sobald jemand dieSchaltfläche anklickt, zeigt der Javascript-Befehl „alert“ im Browser ein Dialogfeldmit dem Text „Angeklickt!“ (2 Bild oben).
HTML 4.0 definiert eine ganze Reihe vonEvent-Handlern. Im 2 Kasten „Javascriptstarten: Event-Handler“ finden Sie eine Lis-te der Handler, der auslösenden Aktionenund der HTML-Tags, in denen sie erlaubtsind. Sehr beliebt ist es zum Beispiel, einScript im Hintergrund beim Laden derWeb-Seite zu starten. Dazu ist in den Tag<body> der Handler „onload=""“ eingefügt.
4. Hyperlink:Script statt Web-Seite
Es gibt noch eine weitere Methode, umScripts durch eine Aktion des Web-Seiten-Besuchers aufzurufen. Bei einem normalenLink geben Sie als Verweisziel zum BeispielFolgendes an:
<a href="javascript:alert("Verweisziel noch nichtverfügbar!")">
Ein Link</a>
Damit zeigt der Browser beim Anklickendes Verweises das Dialogfeld mit dem Text.Statt des Textes „Ein Link“ dürfen Sie natür-lich auch ein Bild als Link definieren.
5. Eigene Funktionen:Befehle zusammenfassen
Weil es ziemlich unübersichtlich und um-ständlich ist, hinter einem Event-Handlerein längeres Script anzufügen, dürfen Sieeigene Funktionen definieren. Eine Funk-tion besteht aus mehreren Javascript-Be-fehlen, die Sie unter einem Namen zusam-menfassen. Später fügen Sie in den Event-Handler oder in ein Script nur den Funk-tionsnamen ein, damit alle Befehle abgear-beitet werden.
Auch eine Funktion können Sie irgend-wo in der HTML-Datei notieren. Am sichers-ten ist es aber, die Funktion zwischen„<head>“ und „</head>“ einzubauen. Dannkönnen Sie sie an beliebiger Stelle imHTML-Code aufrufen. Beachten Sie: Die Be-fehle in einer Funktion führt der Browsernicht automatisch aus. Sie müssen eine
Hier bekommen Sie fertige Scripts
Im Internet gibt es eine Vielzahl fertiger Javascripts, die Sie gratis in Ihre eigene Homepage ein-bauen können. Das ist oft viel einfacher, als selbst ein Script zu entwickeln. Mit dem Grundwis-sen aus diesem Artikel haben Sie den Einbau der Scripts und kleine Anpassungen im Griff. FürAnwender, die weiter in Javascript einsteigen möchten, ist das Tutorial „SelfHTML“ empfehlens-wert (http://selfhtml.teamone.de).
Name der Website Internet-AdresseDr. Web www.drweb.de/javascriptGatescript www.gatescript.comJavascript City www.javascriptcity.comJavascripts http://webdeveloper.earthweb.com/webjsJava Script Station www.javascriptstation.comJavatop.de www.javatop.dePigasus www.pigasus.deScriptindex.de www.scriptindex.deThe Javascript Source www.javascript.com
Inhalt Seite
1. Das erste Programm: Hello World! 762. Kommentarzeichen: Das Script
verstecken 763. Event-Handler: Script auf Mausklick 774. Hyperlink: Script statt Web-Seite 775. Eigene Funktionen: Befehle
Kästen:Hier bekommen Sie fertige Scripts 77Javascript starten: Event-Handler 79
Event-Handler: Sie sorgen dafür, dass ein Script nicht gleich beim Ladender Web-Seite aktiv wird, sondern erst nach einer Aktion (Punkt 3)
306.qua 02.12.2003 17:17 Uhr Seite 3
Workshops Javascript
PC-WELT SONDERHEFT 2/200478
PPpP S. 76 – S. 79
PGrundlagen pWorkshops PUtilities
Funktion zum Beispiel über einen Event-Handler ausdrücklich starten. Die Definiti-on einer eigenen Funktion, die eine Zahlmit sich selbst multipliziert, sieht so aus:
Das Schlüsselwort „function“ teilt demBrowser mit, dass die folgenden Zeilen eineFunktion definieren. Darauf folgt der Na-me der Funktion, im Beispiel „Quadrat“.Danach stehen in runden Klammern dieParameter, die die Funktion beim Start er-hält. Im Beispiel muss die Funktion natür-lich wissen, welche Zahl sie quadrierensoll. Sie übergeben der Funktion „Quadrat“die Variable „Zahl“. Die Namen für dieFunktion und die Variable sind übrigensbeliebig, meist nutzen Programmierer aberaussagekräftige längere Namen.
Beliebige VerwendungDie geschweiften Klammern „{“ und „}“schließen in Javascript immer einen An-weisungsblock ein. Der Programmcodeselbst interessiert uns hier nicht weiter. Ermultipliziert im Beispiel „Zahl“ mit sichselbst und speichert das Resultat in der Va-riablen „Ergebnis“. Anschließend macht„return Ergebnis“ den Inhalt dieser Varia-blen zum Rückgabewert der Funktion.
Diese Funktion verwenden Sie an belie-biger Stelle und beliebig oft in der Web-Sei-te. Beispielsweise mit dem Event-Handler„onClick=“ einer Schaltfläche:
<form><input type="button" value="Quadrat von 7 berechnen"onClick=alert(Quadrat(7))>
</form>
Natürlich muss nicht jedeFunktion einen Rückgabe-wert haben; lassen Sie ein-fach „return“ weg. Auch Pa-
rameter sind keine Pflicht, Sie müssen aberimmer die leeren Klammern „()“ angeben.Innerhalb einer Funktion ist der Aufruf an-derer Funktionen erlaubt.
6. Fertige Scripts:Zuerst analysieren
Spielen Sie an einem Beispiel durch, wieSie ein fertiges Script in Ihre Homepageeinbauen. Ein Nachrichtenticker soll aufder Startseite aktuelle Meldungen hervor-heben. Bei einer Vereinsseite könnte dasder Termin der Weihnachtsfeier sein oderein Hinweis auf eine neue Rubrik.
Bei Javatop.de (www.javatop.de) gibt’s dasfertige Script gratis unter der Rubrik „Di-verses“ als „Newsticker“. Klicken Sie denLink an, so erscheint im linken Bereich ei-ne Demoseite mit dem Script.
Um das Script zu kopieren, rufen Siebeim Internet Explorer mit der rechtenMaustaste das Kontextmenü auf undwählen den Eintrag „Quelltext anzeigen“.Es erscheint der normale Windows-Editormit der geladenen HTML-Datei.
Scrollen Sie im Editor nach unten, bisSie die Zeile finden, die mit „<script...>“ be-ginnt. Meistens enthaltendie ersten Zeilen des Scriptseinen Kommentar, der dieVerwendung und Anpas-sung beschreibt. Sonst müs-sen Sie sich selbst auf die Su-che machen. Sind bis zumabschließenden „</script>“nur Funktionen enthalten,so wird das Script an ande-rer Stelle in der HTML-Dateigestartet. Das gilt auch,wenn sich der Scriptbereichkomplett innerhalb desKopfbereichs zwischen„<head>“ und „</head>“ be-findet. Gehen Sie die restli-chen HTML-Befehle durch,
und suchen Sie nach dem Start der Funk-tion durch einen Event-Handler oder einenJavascript-Link. Bei langen HTML-Dateienhilft die Suchfunktion des Editors, der Sieden Namen der Funktion übergeben.
7. Javascript gefunden:Texte kopieren
Nun übertragen Sie den Scriptbereich in Ihre eigene HTML-Datei. Markieren Sieeinschließlich der Zeile „<script>“ bis zumabschließenden „</script>“ den gesamtenText, und rufen Sie „Bearbeiten, Kopieren“auf. Wechseln Sie anschließend zu IhremWeb-Editor, und schalten Sie ihn in denHTML-Modus. Bei Netscape/Mozilla Com-poser nutzen Sie dazu die Registerkartenam unteren Fensterrand.
Funktionen fügen Sie am besten imKopfbereich zwischen „<head>“ und„</head>“ ein. Javascript-Befehle ohneFunktionsklammern wirken sofort beimLaden der Web-Seite. Hier müssen Sie sichüberlegen, an welcher Stelle Ihrer Web-Sei-te die Ausgabe erfolgen soll.
Im Beispiel enthält das Script zwarFunktionen, aber auch Befehle außerhalbvon Funktionen. Das Script erzeugt ein Ein-gabefeld, in dem der gewünschte Textdurchläuft. Aus diesem Grund fügen Sieden Scriptbereich an derjenigen Stelle Ih-rer Web-Seite ein, an welcher der Nach-richtenticker erscheinen soll.
8. Inhalt anpassen:Nachrichten ändern
Haben Sie das Script in Ihre Homepage ein-gefügt, sollten Sie einen ersten Testlauf star-ten. Damit stellen Sie sicher, dass die Über-tragung im Prinzip funktioniert hat. Erst
Funktion Quadrat: Hier hat die Funktion Quadrat das Ergebnis für 7 gelie-
fert, das die Alert-Dialogbox ausgibt (Punkt 5)
Newsticker: Dieses Script, zu finden etwa unter www.javatop.de, erzeugt
ein Eingabefeld, in dem der gewünschte Text durchläuft (Punkte 6 bis 8)
306.qua 02.12.2003 17:18 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 79
JavascriptPGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 76 – S. 79
danach machen Sie sich andie Anpassung. Im Nach-richtenticker-Beispiel ist esnatürlich sinnvoll, den an-gezeigten Text zu ändern.Blättern Sie im Scriptbe-reich bis zur Zeile „"tl=newtextlist"“. In den folgendenZeilen stehen in Anfüh-rungszeichen die Texte, dieder Ticker nacheinander er-scheinen lässt. Die An-führungszeichen sind unbe-
dingt notwendig, damit der Browser dieZeichenketten erkennt. Ändern Sie die Tex-te nach Belieben. Wenn Sie mehr oder we-niger Texte benötigen, löschen Sie einfachTextzeilen oder fügen welche ein. Sie müs-sen nur darauf achten, dass die Zeilen je-weils am Ende durch ein Komma getrenntsind (mit Ausnahme der letzten Zeile).
Wenn Sie wollen, verändern Sie auchdie Wartezeiten zwischen der Anzeige dereinzelnen Texte oder die Gestaltung derAusgaben. Die Kommentare im Script wei-sen Ihnen den Weg.
Ticker übertragen: Markieren Sie den Scriptbereich, und fügen Sie das
Script an der Stelle Ihrer Web-Seite ein, an der die Ausgabe erfolgen soll
Javascript starten: Event-HandlerWenn Sie nicht wollen, dass ein Script gleich beim Laden der Web-Seite aktiv wird, verwenden Sie so genannte Event-Handler. HTML 4.0 definiert ei-ne ganze Reihe von Event-Handlern, die durch unterschiedliche Aktionen aktiviert werden. Die Tabelle unten listet die Handler, die auslösende Akti-on und die HTML-Tags, in denen sie erlaubt sind, auf. Ein einfaches Beispiel: Fügen Sie in einen normalen HTML-Tag wie „<input type=button va-lue="Klick mich!">“ den Event-Handler „onClick=alert ("Angeklickt!")“ ein, erzeugt das Tag eine Schaltfläche. Sobald ein Anwender die Schaltflächeanklickt, zeigt der Javascript-Befehl „alert“ im Browser ein Dialogfeld mit dem Text „Angeklickt!“ (2 Beispieldatei „handler.htm“ aufC Heft-CD).
Handler Erklärung Erlaubt in
onBlur= Beim Verlassen eines Elements <a>, <area>, <button>, <input>, <label>, <select>, <textarea>
onChange= Wert eines Elements ändert sich <input>, <select>, <textarea>
onDblClick= Beim Doppelklick mit der Maus wie onClick=
onFocus= Beim Selektieren des Elements wie onBlur=
onKeyDown= Beim Drücken einer Taste wie onClick=
onKeyPress= Beim Drücken und anschließenden Loslassen einer Taste wie onClick=
onKeyUp= Beim Loslassen einer Taste wie onClick=
onLoad= Beim Laden der Web-Seite <frameset>, <body>
onMouseDown= Bei gedrückter Maustaste wie onClick=
onMouseMove= Beim Bewegen der Maus wie onClick=
onMouseOut= Wenn die Maus den Elementbereich verlässt wie onClick=
onMouseOver= Wenn die Maus den Elementbereich erreicht wie onClick=
onMouseUp= Beim Loslassen der Maustaste wie onClick=
onReset= Beim Zurücksetzen eines Formulars <form>
onSelect= Beim Selektieren von Text <input>, <textarea>
onSubmit= Vor dem Abschicken eines Formulars <form>
onUnLoad= Beim Verlassen einer Web-Seite oder eines Framesets <body>, <frameset>
306.qua 02.12.2003 17:19 Uhr Seite 5
PC-WELT SONDERHEFT 2/200480
Cascading Stylesheets sind Stilvorlagen für die Homepage. Sie geben Ihren Web-Seiten den letzten Schliff und vereinfachendie Pflege. Das Workshop-Material finden Sie auf der Heft-CD.
Web-Seiten mit Style
Mit Cascading Stylesheets – kurz: CSS –steuern Sie die Gestaltung Ihrer Web-Seitengenauer als mit HTML. Zudem dürfen Sieden Zeilenabstand ändern, die Hinter-grundfarbe einzelner Wörter regeln oderdie erste Zeile in einem Absatz einrücken.Haben Sie eine CSS-Regel einmal am An-fang der HTML-Datei definiert, gilt die Re-gel für die ganze Web-Seite. Noch besser:Sie lagern die CSS-Angaben in eine Extra-datei aus, die alle Seiten Ihrer Web-Präsenzgemeinsam nutzen. Eine Änderung in derCSS-Datei wirkt dann auf alle Web-Seiten.
1. CSS im HTML-TagSie fügen eine CSS-Eigenschaft und den ge-wünschten Wert in HTML ein. Für die Far-be nennt sich die Eigenschaft „color“. Er-laubt sind wie in HTML Farbnamen (zumBeispiel „red“ für rot) oder RGB-Zahlenan-gaben (etwa „#0000FF“ für blau). Eine voll-ständige CSS-Deklaration sieht so aus: „co-lor: blue;“ (ohne Anführungszeichen). Die
Eigenschaft und den Wert trennen Siedurch einen Doppelpunkt, ein Strichpunktam Ende schließt die Deklaration ab. Imeinfachsten Fall fügen Sie die CSS-Deklara-tion direkt in den HTML-Tag ein:
<p style="color: green;">
Textabsatz ....
</p>
Mit dem Attribut „style“ geben Sie die CSS-Deklaration in Anführungszeichen an. Da-mit färbt der Browser alle Texte zwischen„<p>“ und „</p>“ ein. (Grundlagen-Infos zuHTML finden Sie 2 ab Seite 34.)
Sie dürfen mehrere CSS-Deklarationenin einem „style“-Attribut angeben (mitStrichpunkt getrennt). Das folgende Bei-spiel ergibt eine Schrift von 18 Punkt ingrüner Farbe:
<p style="color: green;
font-size: 18pt;">
2. Bereiche bearbeiten: Div und SpanEine CSS-Deklaration ist an einen HTML-Tag gebunden. Daher gibt es in HTML zweibesondere Tags – „<div>“ und „<span>“ –,die beide nur dazu dienen, Bereiche fürCSS zu markieren. „<div>“ entspricht demnormalen Absatz-Tag: Vorher und nachhermacht der Browser automatisch einen Zei-lenumbruch. Mit „<span>“ markieren Sieein einzelnes Wort – oder auch mehrere –im Fließtext (2 Abbildung rechte Seiteoben), es gibt dadurch keinen Umbruch.Haben Sie den gewünschten Text mit„<span>“ markiert, können Sie ihn danachper CSS formatieren.
Das Beispiel formatiert den ganzen„<div>“-Absatz mit einer Schriftgröße von20 Punkt und einem Zeilenabstand von 30Punkt. Zwei Abschnitte im Text haben eineblaue respektive eine rote Schriftfarbe:
<div style="font-size: 20pt;
line-height: 30pt;">
Die Schrift ... <span
style="color: red;">20
Punkt</span>
... <span style="color: blue"
>30 Punkt</span>.
</div>
3. Stylesheet-Bereich einrichtenWenn Sie die CSS-Deklaration direkt in denHTML-Tag einfügen, verschenken Sie etwas.Besser ist es nämlich, die Deklarationen ge-sammelt an den Anfang der HTML-Datei zuschreiben. Die Angaben gelten dann für diegesamte Web-Seite. Wenn Sie etwas ändernwollen, müssen Sie nur eine Stelle bearbei-
Von Wolfgang Nefzger
Bequem: CSS-Programme
Wenn Sie CSS-Regeln nicht in einem Text-Editor tippen wollen, greifen Sie zu einerSoftware, die Ihnen hilft. Die CSS-Eigen-schaften und die erlaubten Werte wählenSie über Dialogfelder aus. Sie müssen al-so nur wissen, was Sie erreichen wollen,der CSS-Editor kennt die passenden Ei-genschaften. Weil CSS-Format und HTML-Dateien getrennt sind, müssen Sie für ei-ne Änderung im Editor nur die CSS-Dateianpassen. Ein guter Tipp ist der kostenlo-se Morphon CSS-Editor 1.3.6 für Java-fähi-ge Betriebssysteme wie Windows, dessenBedienerführung sehr übersichtlich ist(nähere Infos zum Tool 2 Seite 123).
307 02.12.2003 17:00 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 81
Cascading StylesheetsPGrundlagen pWorkshops PUtilities WorkshopsPpP S. 80 – S. 83
ten. Dazu definieren Sie im Kopf der HTML-Datei einen Stylesheet-Bereich:
<head>
<style type="text/css">
h1 {color: red;}
</style>
</head>
Das Tag-Paar „<style>“ und „</style>“schließt den Bereich ein. Alles dazwischeninterpretiert der Browser nicht als Textoder HTML-Tag, sondern als CSS-Angaben.
Das Beispiel enthält die CSS-Deklaration„color: red“. Sie ist in geschweifte Klam-mern eingefasst, davor steht ein Selektor. Ersagt dem Browser, auf welche Teile derWeb-Seite der Browser die CSS-Angaben an-wenden soll. „h1“ im Beispiel bedeutet,dass der Browser alle Überschriften ersterOrdnung (die mit dem Tag „<h1>“ markiertsind) im Dokument rot einfärben soll. Se-lektor und CSS-Deklaration zusammennennt man CSS-Regel.
4. Selektoren und DeklarationenIn vielen Fällen werden Sie auf unter-schiedliche HTML-Tags eine CSS-Deklarati-on anwenden wollen. Statt mehrere kom-plette CSS-Regeln einzutippen, tragen Sieeinfach alle HTML-Tags als Selektor ein:
h1, h2, h3, h4, h5, h6 {color:
red;}
Damit erfassen Sie alle Überschriften von„<h1>“ bis „<h6>“ und färben sie rot ein. Siedürfen auch andere Tags so kombinieren,etwa „<p>“, „<table>“ und „<div>“. Ähnlichgehen Sie vor, wenn Sie mehrere CSS-De-klarationen einem Selektor zuweisen wol-len. Trennen Sie die einzelnen Angabendurch einen Strichpunkt. Der Quelltext
wird übersichtlicher, wennSie jede Deklaration in eineeigene Zeile schreiben.
<style type="text/
css">
p {
font-family:
sans-serif;
font-size: 9pt;
text-indent: 5mm;
text-align: justify;
}
</style>
Die CSS-Regel bewirkt, dass Absätze (Tag„<p>“) eine Schriftart ohne Serifen mit 9 Punkt Größe haben. Die dritte CSS-Anga-be „text-indent“ rückt die erste Zeile im Ab-satz um 5 Millimeter ein – allein mit HTMLwäre dieser Effekt viel umständlicher zurealisieren (mit einer unsichtbaren Grafikals Platzhalter). „text-align: justify“ sorgtschließlich für Blocksatz, also einen saube-ren linken und rechten Rand beim Text (2 Abbildung unten).
5. Einzelne Elemente formatierenFür Fälle, in denen man nicht alle Absätzeeinheitlich gestalten, sondern bestimmteAbsätze besonders hervorheben will, kenntCSS außer dem Tag-Selektor (2 Punkt 4)den Klassenselektor. Dafür ändern Sie eineCSS-Regel ein wenig ab:
.rot {color: red;}
Entscheidend ist der Punkt am Beginn derZeile, er ist zwingend nötig. Diese CSS-Regelhat keinen Hinweis, welche Tags der Brow-ser so formatieren soll. Deshalb müssen Sieselbst die betroffenen Tags markieren:
<h1 class="rot">Text</h1>
Damit ist auch klar, warumes Klassenselektor heißt. Siefügen in den Tag das Attri-but „class“ ein und gebenals Wert in Anführungszei-chen den Namen des Klas-senselektors an, im Beispiel„rot“ (ohne den Punkt amAnfang). Der Browser weißnun, dass er die Überschriftmit der CSS-Deklaration „co-lor: red“ formatieren soll.Das „class“-Attribut fügen
Sie in jedes HTML-Attribut ein, das rotenText haben soll. Dabei muss es sich nichtunbedingt um eine Überschrift handeln.
6. Individuelle KlassenWenn Sie mit CSS und dem Klassenselektorarbeiten, müssen Sie gut planen. Sonst sindhinterher größere Änderungen genausoumständlich wie mit HTML-Attributen.
Denken Sie sich etwa folgenden Fall: Siehaben ein CSS-Format „.rot“ definiert undwenden es per „class“-Attribut auf Über-schriften und einzelne Wörter im Text an.Wollen Sie später die Farbe der Überschrif-ten verändern und passen dazu die CSS-Re-gel am Datei-Anfang an, beeinflusst dasauch alle anderen Stellen mit class=„rot“.
Daher ist es im Beispiel sinnvoll, von An-fang an zwei CSS-Regeln für rote Über-schriften und rote Textstellen zu definie-ren, beispielsweise „.rotH“ und „.rotText“.Beachten Sie außerdem, dass in den Klas-sennamen ausschließlich die Buchstabena-z und A-Z erlaubt sind, nicht jedoch Zah-len oder Sonderzeichen.
Damit Sie bei vielen Klassenselektorenden Überblick nicht verlieren, dürfen SieKommentare einfügen. Ein Kommentar be-
Inhalt Seite
1. CSS im HTML-Tag 802. Bereiche bearbeiten: Div und Span 803. Stylesheet-Bereich einrichten 804. Selektoren und Deklarationen 815. Einzelne Elemente formatieren 816. Individuelle Klassen 817. CSS-Regeln in Extradatei auslagern 838. Praktischer Einsatz 839. Links einfärben 83
Kästen:Bequem: CSS-Programme 80Initial am Satzanfang 83
Neue Effekte: Über eine globale CSS-Regel sind Absätze eingerückt und im
Blocksatz dargestellt. Allein mit HTML wäre das umständlicher (Punkt 4)
Markant: Mit dem Tag „<span>“ markieren Sie Bereiche für eine besondere
Formatierung mit Cascading Stylesheets (Punkt 2)
307 02.12.2003 17:01 Uhr Seite 3
PC-WELT SONDERHEFT 2/2004 83
Cascading StylesheetsPGrundlagen pWorkshops PUtilities WorkshopsPPp S. 80 – S. 83
ginnt mit /* und endet mit */. Alle Zeichendazwischen ignoriert der Browser. Auf denersten Blick wirkt das vielleicht lächerlich.Aber wenn Sie nach einem halben Jahr ei-ne umfangreiche CSS-Datei laden, werdenSie froh über die Kommentare sein.
7. CSS-Regeln in Extradatei auslagernDie CSS-Regeln im Stylesheet-Bereich ver-einfachen die Pflege einer HTML-Datei. DasProblem: Eine Website besteht meist ausvielen HTML-Dateien. Damit Sie diese nichtfür eine Änderung einzeln anpassen müs-sen, ermöglicht es Ihnen CSS, die CSS-Re-geln in eine Extradatei auszulagern, die al-le Web-Seiten gemeinsam nutzen.
Dazu erzeugen Sie zuerst eine neue Da-tei namens FORMAT.CSS für die CSS-Re-geln. In diese Datei kopieren Sie den Inhaltdes Stylesheet-Bereichs, also ohne dieHTML-Zeilen „<style ...>“ und „</style>“. Inder HTML-Datei fügen Sie in den Kopf zwi-schen den HTML-Tags „<head>“ und„</head>“ eine Zeile ein:
<link href="format.css“ rel=
"stylesheet" type="text/css">
Anstelle von „format.css“ tragen Sie hinterdem Attribut „href“ den Namen Ihrer CSS-Datei ein. Sie dürfen auch mehrere CSS-Da-teien einbinden, schreiben Sie einfach fürjede Datei einen „<link>“-Tag.
8. Praktischer EinsatzAls praktisches Beispiel rüsten Sie nun dieWebsite aus dem ersten Teil des Homepage-Grundkurses (2 ab Seite 58) mit einer ex-ternen CSS-Datei aus. Dabei sollen die Ein-stellungen für das Hintergrundbild unddie Text- und Link-Farben per CSS geregeltwerden. Für die CSS-Datei brauchen Sie ei-nen einfachen Editor, der Textdateien spei-chern kann. Im einfachsten Fall ist das derEditor aus dem Windows-Zubehör. StartenSie das Programm, Sie finden es etwa bei
Windows 2000 und XP imStartmenü unter „Program-me, Zubehör“. Die erste CSS-Regel betrifft das Hinter-grundbild. Sie benötigen al-so einen Tag-Selektor, dersich auf den Tag „<body>“bezieht. Die CSS-Eigenschaftfür das Hintergrundbild ist„background-image“ (2 ers-te vier Zeilen der Abbildungoben). Einen Dateinamen
oder eine komplette Web-Adresse dürfenSie bei CSS nicht einfach so angeben. Wieim Beispiel müssen Sie den Namen mit„url(...)“ einfassen. Die Schriftfarbe legenSie mit der Eigenschaft „color“ fest, darauffolgt in der bei HTML üblichen Schreibwei-se der RGB-Farbwert (2 ab Seite 64).
9. Links einfärbenJetzt geht es noch darum, die Farbe derLinks zu definieren. Der Haken dabei ist,dass ein Link mehrere Zustände kennt: nor-maler Link, angeklickter Link, bereits be-suchter Link. Es reicht also nicht, einfacheinen Tag-Selektor für <a> zu benutzen. DieLösung für das Problem sind die Pseudo-formate, wie sie in den letzten drei Zeilender 2Abbildung oben stehen.
Das Pseudoformat „a:link“ wirkt aufnormale Links, die noch nicht angeklicktwurden. „a:visited“ bezieht sich auf Links,die Sie bereits besucht haben. Dabei ist esegal, ob es sich um andere Web-Seiten IhresInternet-Auftritts oder um Seiten auf ei-nem fremden Webserver handelt. „a:active“
betrifft den Link, den Sie gerade anklicken.Denn erst wenn Sie die Maustaste loslassen,lädt der Browser die Zielseite.
Die 2 Abbildung links zeigt die CSS-Da-tei komplett. Speichern Sie die Textdatei imWindows-Editor mit „Datei, Speichern un-ter“ als FORMAT.CSS im selben Verzeichniswie die HTML-Dateien.
Jetzt bleibt noch die Aufgabe, die CSS-Datei in die verschiedenen Web-Seiten derBeispiel-Site einzubinden. Laden Sie die ers-te Datei INDEX.HTML mit „Datei, Datei öff-nen“ im Web-Editor Composer (Bestandteilvon Netscape, 2 ab Seite 58). Da Composerkeine Menübefehle anbietet, um eine ex-terne CSS-Datei einzubinden, gehen Sie wiefolgt vor: Wechseln Sie über den Karteirei-ter „HTML-Quelle“ zur Textansicht. FügenSie unmittelbar vor dem Tag „</head>“ Fol-gendes ein:
<link href="format.css"
rel="stylesheet"
type="text/css">
Anschließend gehen Sie eine Zeile weiterzu „<body ...>“. In dem Tag gibt es eineganze Reihe von Attributen, beispielsweise„background“. Löschen Sie alle Attributebis auf „topmargin“ und „leftmargin“.Führen Sie diese Aktion bei allen anderenWeb-Seiten ebenfalls durch – berücksichti-gen Sie dabei auch die Vorlage LEER.HTML.Ab jetzt genügt eine Änderung in FOR-MAT.CSS, um beispielsweise den Hinter-grund auszutauschen oder eine andereSchriftfarbe zu wählen.
Extra: In einer ausgelagerten CSS-Datei werden die Einstellungen für das
Hintergrundbild sowie die Text- und Link-Farben geregelt (Punkt 7)
Initial am SatzanfangMit CSS lässt sich eine Menge anstellen. Soerzeugen Sie beispielsweise ein Klassenfor-mat, das automatisch den ersten Buchsta-ben in einem Absatz als Initial größer dar-stellt. Der normale Text fließt um das Initialherum. Die CSS-Regel dazu sieht so aus:
.ErsterAbsatz:first-letter {
font-size: 300%;
float: left;
}
.ErsterAbsatz {
font-family: sans-serif;
font-size: 10pt;
text-align: justify;
}
In der HTML-Datei markieren Sie den Absatzmit dem Attribut „class“:
<p class="ErsterAbsatz">
Wir sind ... </p>
307 02.12.2003 17:02 Uhr Seite 4
PC-WELT SONDERHEFT 2/200484
Von der Digitalkamera oder vom Scanner direkt auf die Homepage – wir zeigen Ihnen, wie Sie Ihre Fotos und Grafikenoptimal für die Darstellung im Web vorbereiten.
Bilder optimieren
Ein Bild sagt mehr als tausend Worte –so ließe sich eine Grundregel fürs Web for-mulieren, wo textlastige Seiten den Be-trachter noch eher abschrecken als inPrintmedien. Ebenso abschreckend wirkenallerdings zu große Grafiken, falsch darge-stellte Farben oder zu lange Ladezeiten.
Um solche Fehler zu vermeiden und Ih-re Homepage optisch attraktiv zu gestalten,benötigen Sie nur ein Bildbearbeitungs-programm wie Paint Shop Pro 8.0 und dieTipps auf den folgenden vier Seiten. Einevoll funktionsfähige, auf 30 Tage Laufzeitbeschränkte Version von Paint Shop Profinden Sie auf C Heft-CD, so dass Sie sofortloslegen können. Weitere Web-taugliche Pixelkünstler finden Sie im gleichnamigenKasten auf Seite 87.
1. So wählen Sie das richtige Dateiformat aus
BMP, GIF, JPG, PNG – beim Speichern IhrerGrafiken haben Sie die Qual der Wahl un-ter einer Vielzahl von Dateiformaten, die
von Browsern wie dem Internet Exploreroder dem Navigator unterstützt werden.Welches Format das richtige für Ihre Bilderist, hängt von der Art der Bilder und vomEinsatzzweck ab.
BMPDas Windows-eigene Bitmap-Format BMPwird beispielsweise zum Speichern vonHintergrundbildern für den Windows-Desktop verwendet. Da BMP-Dateien un-komprimierte Informationen enthalten,sind sie aufgrund der riesigen Dateigrößefür das Web denkbar ungeeignet.
Wenn Sie BMP-Dateien – zum BeispielDesktop-Hintergründe – auf Ihrer Home-page anbieten möchten, dann sollten Siedie Bilder in ein ZIP-Archiv packen und die-ses über einen Link mit kleiner Vorschau-grafik zum Download anbieten.
Wie Sie eine solche Vorschaugrafik er-zeugen, erfahren Sie in 2 Punkt 2. Dasgroße Beispielbild am Anfang dieses Bei-trags ist im BMP-Format 3140 KB groß.
TIFDas Profi-Dateiformat für die Druckvorstu-fe kann Bildinhalte zwar komprimieren,doch die finalen Dateien sind immer nochviel zu groß für die Online-Darstellung.Außerdem sind die meisten Browser nichtin der Lage, TIF-Bilder darzustellen.
Für die Bereitstellung von TIFs verwen-den Sie deshalb die gleiche Verfahrenswei-se wie für BMP-Grafiken (2 Abschnitt„BMP“). Die Größe der Beispielgrafik imTIF-Format: 1400 KB.
JPGDas beliebteste Grafikformat für das Inter-net zeichnet sich durch eine extrem hoheDatenkompression aus. Als JPG-Grafik mitt-lerer Qualität (Komprimierungsfaktor: 50)schrumpft das Beispielbild auf 64 KB zu-sammen, während die gleiche Datei bei ei-nem hohen Komprimierungsfaktor von 90gerade mal 30 KB umfasst.
Vorteil neben der geringen Dateigrößeist die Farbtiefe von über 16 Millionen Farb-tönen. Sie macht das JPG-Format besondersgeeignet für Fotos. Zu den Nachteilen vonJPG zählen deutlich sichtbare Pixel-Arte-fakte und Farbsäume an Kontrastkanten,die mit höheren Komprimierungsfaktorenimmer stärker zunehmen.
GIFDas Graphic Interchange Format (GIF) istder Klassiker unter den Dateiformaten fürsInternet. Aufgrund der geringeren Farbtie-fe von maximal 256 Farbtönen und einerverlustfreien Komprimierung entstehenbeim Speichern im GIF-Format relativ klei-ne Dateien, die sich für den Einsatz auf derWebsite eignen. Ideal ist dieses Format fürZeichnungen, Computergrafiken oder Clip-arts – weniger gut geeignet dagegen für Fo-tos mit vielen Farbnuancen.
Drei Besonderheiten machen das GIF-Format besonders web-tauglich: Erstenskann eine Farbe transparent geschaltetwerden, wodurch Sie auf Ihrer Homepagefreigestellte Grafiken realisieren können.Zweitens lassen sich mehrere Bilder zu ei-ner animierten GIF-Grafik zusammenfas-sen – mehr dazu in unserem Workshop 2 ab Seite 92.
Drittens lassen sich GIF-Grafiken „Inter-laced“ anlegen – dieses Zeilensprungver-fahren sorgt dafür, dass die Grafik auf derHomepage nicht etwa von oben nach un-ten aufgebaut wird, sondern zunächst groberscheint und dann allmählich immer de-
Von Michael Schmithäuser
084-87 308 02.12.2003 15:45 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 85
Bilder aufbereitenPGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 84 – S. 87
taillierter dargestellt wird. Auf diese Weiseerhält der Betrachter rasch einen erstenEindruck von der Grafik, bevor sie kom-plett geladen wird (2Abbildung oben). DasBeispielbild besitzt als GIF eine Dateigrößevon 640 KB.
PNGDas Portable Network Graphics Format(PNG) ist sozusagen der Nachfolger des GIF-Formats – allerdings fällt die Beschrän-kung auf 256 Farben weg. Merkmale wieTransparenz – auf Wunsch auch mehrstu-fig – und Interlace-Darstellung bleiben da-gegen erhalten.
Da jedoch die geringe Komprimierungvon Bildern mit mehr als 256 Farben zusehr großen Dateien führt (Beispielbild mit2000 KB), eignet sich auch das PNG-Formatwie GIF eher zur Übermittlung von Grafi-ken oder Cliparts. Auf 256 Farben gestutzt,reduziert sich die Dateigröße des Beispiel-bildes auf 550 KB.
2. So bestimmen Sie die richtige Bilddateigröße
Wenn Sie Ihre Lieblingsfotos auf der Home-page präsentieren möchten, sollten Sie dar-auf achten, nicht in die Formatfalle zu tap-pen. Denn moderne 3-Megapixel-Kamerasliefern Bilddateien mit einer horizontalenAuflösung von über 2000 Pixeln. SolcheRiesenbilder treiben nicht nur die Down-load-Zeiten in die Höhe, sondern findenauch auf keinem Monitor Platz.
Ergebnis: Entweder der Browser zeigtnur einen Ausschnitt des Fotos, oder die au-tomatische Darstellung verkleinert das Bildauf ein passendes Format – dabei hätte dieHälfte an Daten locker für die gleiche Dar-stellungsgröße gereicht. Deshalb sollten SieIhre Originaldateien für den Web-Einsatz
zunächst einmal entspre-chend verkleinern. Das FotoWATER.JPG finden Sie aufderCHeft-CD. Es wurde miteiner 2-Megapixel-Kamerageknipst und verfügt des-halb über eine Auflösungvon 1024 x 1280 Bildpunk-ten – viel zu groß für die Homepage. Damit auch einAnwender, der eine Bild-schirmauflösung von 800 x600 Bildpunkten verwendet,in der Lage ist, das komplet-te Foto zu sehen, sollte es inder Vertikalen 500 Bild-
punkte nicht überschreiten – schließlichmüssen ja auch noch Windows-Elementewie Fensterrahmen oder die Startleiste indie Kalkulation mit einfließen.
Richtig kalkulierenLaden Sie das Foto mit „Datei, Öffnen“ inPaint Shop Pro, und wählen Sie „Bild,Größe ändern“. Im Dialogfenster, das dar-aufhin erscheint, öffnen Sie das Pull-down-Menü im Bereich „Pixelgröße“ und wählendie Option „Pixel“.
Anschließend markieren Sie das Einga-befeld „Höhe“ und tragen dort den Wert„500“ ein. Der Wert für die Breite wird au-tomatisch angepasst, vorausgesetzt, dieCheckbox „Seitenverhältnis beibehalten“ist aktiv. Im Pull-down-Menü „Resampling
mit:“ klicken Sie auf die Option „Smart Size“. Dabei handelt es sich um eine Be-rechnungsmethode zum Hinzufügen oderEntfernen einzelner Pixel, die sowohl beimVergrößern als auch beim Verkleinern vonBilddateien optimale Ergebnisse erzielt.Nach einem abschließenden Klick auf „OK“liegt das Bild in der neuen Größe vor undkann dann für das Heraufladen auf die Homepage im gewünschten Format ge-speichert werden.
Mit der gleichen Technik können Sieauch Miniatur-Vorschaubilder (Fachbegriff:„Thumbnails“) für Download-Links erzeu-gen. Reduzieren Sie dazu einfach die Bild-größe auf 100 Pixel oder weniger.
Erster Eindruck: GIF- oder PNG-Grafiken im Interlaced-Modus bauen sich
zunächst grob auf und werden dann immer detaillierter (Punkt 1)
Inhalt Seite
1. So wählen Sie das richtige Dateiformat aus 84
2. So bestimmen Sie die richtige Bilddateigröße 85
3. So optimieren Sie Ihre Fotosblitzschnell 86
4. So stellen Sie Bildelemente frei 865. So reduzieren Sie die Farben 866. So stellen Sie die Transparenz ein 877. Analysieren ist besser als Warten 87
Kästen:Hintergründe im Handumdrehen 86Web-taugliche Pixelkünstler 87
Klick und schön: Die Funktion „Fotokorrektur in einem Schritt“ macht aus fahlen Bildern brillante Aufnahmen. Das
Rot der Haare, die Färbung des Wassers und die Kontraste im Bild wirken wesentlich stärker (Punkt 3)
084-87 308 02.12.2003 15:45 Uhr Seite 3
Workshops Bilder aufbereiten
PC-WELT SONDERHEFT 2/200486
PPpP S. 84 – S. 87
PGrundlagen pWorkshops PUtilities
3. So optimieren Sie Ihre Fotos blitzschnell
Mit dem im vorhergehenden Abschnitt ver-kleinerten Foto führen Sie die nächste Op-timierungsmaßnahme durch. Paint ShopPro bietet eine automatische Fotokorrek-tur, die durch Anpassung der Kontraste,Farben und Helligkeitsstufen für eine we-sentlich brillantere Darstellung sorgt.
Klicken Sie in der Symbolleiste auf dasFeld „Fotokorrektur“ und im Pull-down-Menü auf „Fotokorrektur in einem Schritt“.Nun analysiert Paint Shop Pro das Bild undführt alle nötigen Optimierungsschritteautomatisch durch. Nach dieser Prozedurwirken das Rot der Haare, die Färbung desWassers und die Kontraste im Bild wesent-lich stärker (2Abbildung auf der vorherge-henden Seite unten rechts).
Ist der eine oder andere Effekt nachIhrem Geschmack zu stark ausgefallen, op-timieren Sie beispielsweise mit der Option„Automatische Kontrastkorrektur“ ausdem Fotokorrektur-Menü lediglich die Kon-traste im Bild, während Sie die Farben un-angetastet lassen.
4. So stellen Sie Bildelemente frei
Es muss nicht immer rechteckig sein. Da al-le Browser die Möglichkeit bieten, transpa-rente Bildbereiche auszublenden, könnenSie problemlos zum Beispiel herzförmigeFotos von Ihrer Liebsten oder runde Grafi-ken als Buttons verwenden. Letzteres kön-nen Sie gleich mit der Beispielgrafik REI-FEN.TIF auf C Heft-CD ausprobieren.
Öffnen Sie das Reifenfoto, und aktivie-ren Sie mit der <S>-Taste das Auswahlwerk-zeug. In der Optionsleiste oben klicken Siein das Feld „Auswahltyp“ und wählen die
Variante „Ellipse“. Nun be-wegen Sie den Mauscursorins Zentrum der Radnabeund ziehen bei gedrückt ge-haltener Maustaste eine run-de Markierung auf, die dengesamten Reifen einschließt(linker Bereich der 2 Abbil-dung links). Um alle Berei-che außerhalb des Reifensauszuwählen, verwendenSie den Befehl „Umkehren“aus dem Menü „Auswahl“.Definieren Sie nun im Fens-ter „Materialien“ die Hinter-grundfarbe neu, indem Sie
mit der rechten Maustaste auf die ge-wünschte Farbe in der Palette klicken.Wählen Sie eine Farbe aus, die im Bildnicht vorkommt – zum Beispiel ein leuch-tendes Rot. Anschließend drücken Sie die<Entf>-Taste, um alle markierten Bereichezu löschen und durch die Hintergrundfar-be zu ersetzen (rechter Bereich der 2 Ab-bildung oben). Diese Farbe definiert nach-folgend die transparenten Bereiche im Bild,die für die spätere Verarbeitung in Schritt6 final festgelegt werden.
Unregelmäßig geformte ObjekteDie wenigsten Bildelemente sind ähnlicheinfach geformt wie der Reifen im Beispiel-foto. Oft verfügen Objekte über unregel-mäßige Kanten oder ganz feine Elemente,die über den Hintergrund hinausragen,wie der Adventskranz in der 2Abbildungauf Seite 87 oben links (als KRANZ.JPG auf
CHeft-CD). Wollen Sie solche kniffligen Elemente
als transparente Grafiken auf Ihrer Home-page einbinden, greifen Sie auf das „Hin-tergrundlöschwerkzeug“ von Paint ShopPro zurück. Dieses verbirgt sich auf derWerkzeugleiste im Ausklappmenü hinterdem normalen Radiergummi. Stellen Siein der Optionsleiste oben eine „Größe“ von„130“ ein, und bewegen Sie den rundenMauscursor über das Bild. Achten Sie dar-auf, dass sich die Spitze des inneren Ra-diergummi-Symbols über einem grauenHintergrundbereich befindet, und klickenSie einmal, um den Hintergrund zu lö-schen, ohne dass andere Bildelemente wieZweige oder Bänder beschädigt werden.
Als Bestätigung für die erfolgreiche Eli-minierung des Hintergrunds erscheint inden gelöschten Bereichen eine grauweißgekachelte Fläche. Bearbeiten Sie auf diese
Weise das gesamte Bild mit einzelnenKlicks. Vorsicht: Machen Sie keinesfallsWischbewegungen bei gedrückter Maus-taste, sonst radieren Sie womöglich auchandere Bildelemente weg.
5. So reduzieren Sie die Farben
Häufig enthalten auch Fotos nur sehr we-nige Farben – so etwa der bereits ausge-schnittene Reifen. Diese Farbarmut könnenSie nutzen, um die Dateigröße einer Grafikzugunsten einer schnelleren Übertra-gungsgeschwindigkeit zu reduzieren.
Aktivieren Sie das Fenster mit dem Rei-fenfoto, und wählen Sie „Bild, Bildfarbenzählen“. Der vermeintlich hohe Wert vonüber 93.000 eindeutigen Farben sollte Sienicht irritieren – das ist sehr wenig, wennman den Wert mit der maximalen Farb-zahl von 16,7 Millionen in einem True-
Hintergründe im Handumdrehen
Wenn Sie auf der Suche nach einem an-sprechenden Hintergrundmuster für IhreHomepage sind, hilft Ihnen die Kachel-funktion von Paint Shop Pro ganz be-stimmt weiter. Als Ausgangsbild dienendabei Fotos mit einer bestimmten Struk-tur – zum Beispiel Gras, Sand, Meerwas-ser oder ein Himmel mit Wolken (2 Abbil-dung unten). Markieren Sie den ge-wünschten Bildausschnitt mit dem Aus-wahlwerkzeug, und schneiden Sie das ge-samte Foto mit <Shift>-<R> auf die Auswahlzu. Dann rufen Sie den Filterdialog „Effek-te, Bildeffekte, Nahtloses Kacheln...“ auf.Belassen Sie die Grundeinstellungen, undbestätigen Sie mit „OK“. Nun hat PaintShop Pro die Bildvorlage durch geschick-tes Überblenden an allen vier Seiten inein Bild verwandelt, das sich in alle Rich-tungen nahtlos aneinanderfügen lässt –ideal zum Beispiel als gekacheltes Hinter-grundmuster für Ihre Homepage.
Rund: Per Auswahlwerkzeug markieren Sie die gewünschten Objekte und
füllen bestimmte Bereiche mit einer Kontrastfarbe (Punkt 4)
084-87 308 02.12.2003 15:45 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 87
Bilder aufbereitenPGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 84 – S. 87
color-Bild vergleicht. Ein solch niedrigerWert ist Indiz dafür, dass zum Beispiel eineGIF-Version mit weitaus weniger als 256Farben auskommen kann, ohne dass dieBildqualität groß darunter leidet.
Wählen Sie „Datei, Speichern unter“,und klicken Sie in der Liste „Dateityp“ auf„CompuServe Graphics Interchange (*.gif)“.Ein Klick auf die Schaltfläche „Optionen“und anschließend auf „Optimierung aus-führen“ bringt Sie in den Dialog „GIF-Opti-mierung“. Wechseln Sie zur Registerkarte„Farben“, und verkleinern Sie die Vor-schauansicht mit dem Minuslupen-Symbolauf „30%“, so dass Sie einen großen Aus-schnitt des gesamten Bildes im Überblickhaben (2 Abbildung rechts).
Nun klicken Sie neben der Option „Wieviele Farben möchten Sie verwenden?“ aufden blauen Pfeil nach unten und bewegendie Maus bei gedrückt gehaltener Tastekontinuierlich nach links, um die Farbzahl
zu reduzieren. Sie werden feststellen, dasssich bis hinunter zu nur 20 Farben keinemerklichen Unterschiede zwischen Origi-nal (links) und modifiziertem Bild (rechts)ergeben – immerhin über 100 KB Speicher-platz gespart!
6. So stellen Sie die Transparenz ein
Im Dialog „Optimierung“finden Sie auf der Register-karte „Transparenz“ alleFunktionen, um jene Berei-che zu definieren, die späterim Browser „durchsichtig“erscheinen sollen. Die Opti-mierungsfunktion ist überdie Schaltfläche „Optimie-rung ausführen“ im Spei-cher-Fenster auch für vieleandere Dateiformate in ähn-licher Form verfügbar, etwafür PNG und JPG.
Die Option „BestehendeBild- oder Ebenentranspa-renz“ eignet sich für bereitstransparent gestaltete Bild-vorlagen, etwa den mit demHintergrundradierer bear-beiteten Adventskranz. Wasvon Ihnen im Bild ausradiert und von PaintShop Pro mit dem grauweißen Schach-brettmuster versehen wurde, wird auto-matisch transparent. Im Falle des Autorei-fens verwenden Sie die Option „Bereiche,die dieser Farbe entsprechen“. Der Cursor
verwandelt sich in eine Pipette, die Sie überden roten Bereich im Foto bewegen undmit der Sie die Farbe durch einmaligesKlicken aufnehmen. Nach kurzer Berech-nungszeit sehen Sie im rechten Vorschau-fenster den perfekt freigestellten Reifen.
7. Analysieren istbesser als Warten
Nachdem Sie sowohl die Farben reduziertals auch die Transparenz korrekt einge-stellt haben, steht dem Speichern der Grafik für die Verwendung im Web-Editornichts mehr im Wege. Auf der Register-karte „Format“ können Sie sowohl für GIFs als auch für PNGs zwischen der „In-terlaced“- und „Non Interlaced“-Darstel-lung wählen (2 Punkt 1), bevor Sie auf der Registerkarte „Download-Zeiten“ einenBlick auf die Ladezeiten werfen, die Paint Shop Pro anhand der Dateigröße berechnet.
Die vier angegebenen Mittelwerte decken das ganze Spektrum vom Analog-Modem (56K) bis zur DSL-Verbindung(720K) ab. Wie viel Ladezeit Sie Ihren Besu-chern zumuten wollen, liegt letztlich inIhrem Ermessen – die 33 Sekunden für die180 KB des Beispielbildes stellen die Geduldeines Modem-Besitzers – je nach Anschluss– möglicherweise auf eine harte Probe.Hier könnten Sie zum Beispiel in Erwä-gung ziehen, das Foto weiter zu verklei-nern (2 Punkt 2) oder es als stark kompri-mierte JPG-Grafik anzulegen.
Web-taugliche Pixelkünstler
Neben Paint Shop Pro sind auch viele andere Bild-bearbeitungsprogramme mit praktischen Funktio-nen zur Optimierung von Web-Grafiken ausgestat-tet. Hier zwei besonders nützliche Pixelkünstler fürdie Gestaltung Ihrer Homepage:Ulead Photo Impact: Die Software bietet sowohlzahlreiche klassische Bildbearbeitungswerkzeugeals auch eine Reihe leistungsstarker Web-Grafik-Tools. Der Bildoptimierer erleichtert die Vorberei-tung der Grafiken für den Web-Einsatz. Mit den in-teraktiven Diashows bringen Sie mehr Leben auf Ihre Homepage. Sogar Bildeffekte per Java-script macht das vielseitige Programm möglich. Info: www.ulead.de, Preis: 111 Euro.Adobe Photoshop Elements: Der kleine Bruder des Profi-Bildbearbeiters Photoshop bietetebenfalls eine Vielzahl leicht zu bedienender Bearbeitungsfunktionen für Digitalfotos sowie ei-nen interaktiven Dialog zur Vorbereitung von Grafiken fürs Web. Außerdem lassen sich mit Pho-toshop Elements im Handumdrehen Internet-Fotoalben und animierte GIF-Grafiken erstellen.Info: www.adobe.de, Preis: 110 Euro.
Weniger Farben: Bilder mit wenigen und/oder sehr ähnlichen Farben las-
sen sich problemlos auf eine Hand voll Farbtöne reduzieren (Punkt 5)
Magisch: Die bereits transparenten Bereiche zeigt die
Software durch ein Schachbrettmuster an (Punkt 6)
084-87 308 02.12.2003 15:46 Uhr Seite 5
PC-WELT SONDERHEFT 2/200488
Peppen Sie Ihre Website mit Flash-Animationen auf! Mitunserem Schnellkurs für Einsteiger zaubern Sie schon nach kurzer Zeit ansprechende Filme auf den Bildschirm.
Flash in 6 Schritten
Flash-Filme sind der Quasi-Standard fürAnimationen im Web. Das liegt erstens dar-an, dass sich das Flash-Format durch gerin-ge Dateigrößen auszeichnet. Zweitens ver-fügen die meisten ambitionierten Websur-fer über das zur Wiedergabe nötige Plug-in.Und drittens sind die Gestaltungsmöglich-keiten für Flash-Filme nahezu grenzenlos.
Die einzige Hürde zwischen begabtenEinsteigern und einer Bibliothek eigenerFlash-Filme ist die auf den ersten Blick et-was umständliche Bedienung von Macro-media Flash MX (30-Tage-Testversion auf
C Heft-CD). Doch keine Sorge – mit unse-rem Workshop meistern Sie den Einstieg indie Flash-Welt mühelos.
1. So legen Sie die Grundeinstellungen fest
Los geht’s: Nach dem Start von Flash MX se-hen Sie einen leeren, weißen Arbeitsbereichvor sich. Klicken Sie in der Optionsleiste un-ten im Feld „Eigenschaften“ auf die Schalt-fläche „Größe“ (2Abbildung rechts). Hier
definieren Sie die Darstellungsgröße IhresFlash-Films. Dabei gilt: je kleiner, destoschneller und kompakter. Flash-Dateien,die größer als 500 Punkte in der Horizon-talen ausfallen, laufen auf langsameren Sys-temen nur sehr ruckelig ab.
Geben Sie eine Größe von 320 x 200 px(Abkürzung für Pixel) vor, setzen Sie dannim zentralen Ausklappme-nü die „Hintergrundfarbe“auf Schwarz, und erhöhenSie anschließend die „Bildra-te“ auf 20 BpS. „BpS“ stehtfür Bilder pro Sekunde – jehöher dieser Wert ausfällt,desto flüssiger läuft späterdie fertige Animation ab. Be-stätigen Sie Ihre Eingabenmit „OK“. Per „Ansicht, Ska-lierung, Bild einblenden“vergrößern Sie den Vor-schaubereich exakt auf dieAbmessungen des Films. So,der erste Schritt wäre getan.
Von Michael Schmithäuser
Schnell eingestellt: Im Dialog „Dokumenteigenschaften“ legen Sie das
Grundgerüst für Ihren Flash-Film fest (Punkt 1)
2. So bringen Sie den Ball zum Springen
Am Beispiel eines springenden Balls lässtsich die grundlegende Arbeitsweise vonFlash sehr gut veranschaulichen.
Objekt zeichnenAktivieren Sie mit der <O>-Taste oder perKlick auf das Kreis-Symbol in der Werk-zeugleiste das „Ellipsen“-Werkzeug. ZiehenSie auf der Bühne oben mittig einen klei-nen Kreis auf. Damit es auch wirklich einKreis wird, halten Sie während des Aufzie-hens die <Shift>-Taste gedrückt. Sobald derKreis vollendet ist, aktivieren Sie das „Pfeil“-Werkzeug mit der <V>-Taste und klickendamit den Kreis an, um ihn zur weiterenBearbeitung auszuwählen.
Objekt einfärbenIm Dialog „Eigenschaften“ ganz untenklicken Sie nun auf das Farbfeld nebendem Farbeimer-Symbol, um die Farb-palette einzublenden. In der Palette ganzunten finden Sie eine Reihe vorgefertigterFarbverläufe; klicken Sie mit dem Pipetten-cursor aufs Feld mit den Regenbogen-farben.
Ebene umbenennenDie folgenden Schritte finden in der „Zeit-leiste“ auf dem Bildschirm ganz oben statt.Diese Leiste stellt quasi das Drehbuch fürdie Animation dar. In der Zeitleiste links se-hen Sie den Namen der aktuellen Ebene,auf der sich unser bunter Ball befindet, der-zeit standardmäßig als „Ebene 1“ betitelt.
Da aufwendige Flash-Filme Dutzendevon Ebenen enthalten können und dabeirasch die Übersicht verloren gehen kann,sollten Sie jeder Ebene stets gleich beim An-legen einen aussagekräftigen Namen zu-
088-91 309 02.12.2003 14:20 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 89
FlashPGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 88 – S. 91
ordnen. Führen Sie einen Doppelklick aufdie Bezeichnung „Ebene 1“ aus, und gebenSie stattdessen „Ball“ ein. Im Moment be-steht die Animation nur aus einem einzi-gen Bild, das in der Zeitleiste durch einRechteck mit einem Punkt an Position „1“repräsentiert wird. Die Ziffern über derZeitleiste geben nicht die Zeit in absolutenSekunden wieder, sondern stehen für dieBildnummern in der Animation.
Schlüsselbild einfügenWenn – wie in unserem Beispiel – eineBildrate von 20 Bildern pro Sekunde einge-stellt ist, ist eine Sekunde beim Erreichender Marke 20 verstrichen. Der Ball soll in ei-ner Sekunde vom oberen Bildrand auf den„Boden“ am unteren Bildrand fallen. Dazumüssen Sie zunächst in der Zelle 20 einSchlüsselbild einfügen.
Klicken Sie mit der rechten Maustaste inder Ebene „Ball“ auf die Zelle 20, undwählen Sie aus dem Kontextmenü die Op-tion „Schlüsselbild einfügen“ (2Abbildungoben). Damit haben Sie den Grundstein fürdie nachfolgende Animation gelegt, diejetzt durch einen grauen Balken zwischenZelle 1 und 20 symbolisiert wird.
Inhalt des Schlüsselbildes verändernAktivieren Sie nun das Pfeilwerkzeug, undklicken Sie den Ball auf der Bühne an. Mitder Taste <Cursor unten> verschieben Sieden Ball an den unteren Bildrand. Damithaben Sie die Endposition des Objekts inZelle Nummer 20 definiert.
Wenn Sie jetzt in der Zeitleiste auf Zel-le 1 klicken, erscheint der Ball immer nocham oberen Bildrand. Zwischen diesem Aus-gangsbild in Zelle 1 und dem Endbild inZelle 20 soll Flash automatisch die erforder-lichen Zwischenschritte berechnen; dieseTechnik heißt im Fachjargon „Tweening“.
Tweening durchführen lassen
Markieren Sie in der Zeitleis-te per Mausklick die Zelle 1,halten Sie die <Shift>-Tastegedrückt, und klicken Sieauf Zelle 20, um den gesam-ten Bereich in der Zeitleistezu markieren. Dann wählenSie im Menü „Einfügen“ denBefehl „Bewegungs-Tweenerstellen“. Nun erscheint inder Zeitleiste zwischen Zelle1 und 20 ein Pfeil als Symbolfür die Animationssequenz.Mit einem Druck auf die
<Return>-Taste lassen Sie die fertige Se-quenz abspielen – der Ball fällt vom oberenBildrand nach unten (2Abbildung unten).
Objektverformung animierenFügen Sie jetzt in die Zelle 25 ein neuesSchlüsselbild ein. Flash erkennt automa-tisch, dass das neue Schlüsselbild an eineAnimation anschließt, und fügt deshalb ei-nen weiteren Bewegungs-Tween zwischenZelle 20 und 25 ein. In Bild 25 soll der Balldurch die Kraft der Gravitation zusam-mengequetscht erscheinen.
Markieren Sie dazu die Zelle 25 in derZeitleiste, und rufen Sie mit der <Q>-Tastedie Funktion „Frei transformieren“ auf.Durch Klickziehen des oberen mittleren Be-arbeitungsquadrats nach unten stauchenSie den Ball nun auf etwa 50 Prozent seinerGröße (2 Abbildung nächste Seite oben).Anschließend verschieben Sie das Objektmit der <Cursor unten>-Taste wieder anden unteren Bildrand, um den vertikalenFlächenverlust auszugleichen. Tipp: Um das Ergebnis des Tweens ohneWiedergabe der kompletten Animationsse-quenz zu begutachten, kli-cken Sie einfach in das roteRechteck am oberen Randder Positionslinie in der Zeit-leiste und verschieben die-ses bei gedrückt gehaltenerMaustaste hin und her.
Animation umkehrenNun soll die ganze Sequenzwieder „rückwärts“ laufen,der Ball also wieder seinerunde Form annehmen undzurück zum oberen Bild-rand springen. Dazu erzeu-gen Sie in Zelle 30 ein neuesSchlüsselbild und klicken in
der Zeitleiste mit der rechten Maustaste aufZelle 20 (die den unverformten Ball am un-teren Bildrand enthält), um im Kontext-menü die Option „Bilder kopieren“ zuwählen. Klicken Sie dann mit der rechtenMaustaste auf Zelle 30, und wählen Sie „Bil-der einfügen“. Damit ist das Stauchen und„Entstauchen“ des Balls am unterenBildrand erledigt.
Abschließend fügen Sie in die Zelle 50ein neues Schlüsselbild ein. Kopieren Sieden Ball am oberen Bildrand aus Zelle 1,und fügen Sie diesen in Zelle 50 ein. EinDruck auf die <Return>-Taste, und Sie kön-nen Ihre erste komplette Animationsse-quenz bewundern.
Rotationseffekt hinzufügenJetzt geht’s ans Fein-Tuning: Damit die Ani-mation bewegter aussieht, lassen Sie denBall sich drehen, während er fällt. Einensolchen Rotationseffekt bekommen Sie inFlash mit wenigen Mausklicks hin.
Markieren Sie in der Zeitleiste die Zel-le 1, und klicken Sie dann im Eigenschaf-ten-Dialog ganz unten auf den blauen Pfeilneben dem Eingabefeld „Drehen“. Im Pull-down-Menü wählen Sie die Option „UZS“
Der Schlüssel zum Film: Erst das Einfügen von Schlüsselbildern erlaubt
Flash die Berechnung von Animationssequenzen (Punkt 2)
Ball im Spiel: Die erste Animationssequenz wird in der Zeitleiste oben
durch einen Pfeil zwischen den Schlüsselbildern symbolisiert (Punkt 2)
088-91 309 02.12.2003 14:21 Uhr Seite 3
Workshops Flash
PC-WELT SONDERHEFT 2/200490
PPpP S. 88 – S. 91
PGrundlagen pWorkshops PUtilities
aus (das Kürzel steht für „im Uhrzeigersinndrehen“). Genau die gleiche Option stellenSie für die Zelle 30 ein, und schon rotiertder Ball munter auf seinem Weg zur Erdeund wieder zurück. Tipp: Um den Ball noch schneller rotierenzu lassen, können Sie im Eigenschaften-Dialog den Wert „1 mal“ beliebig erhöhen.
3. So animieren SieText am Pfad
Im nächsten Schritt fügen Sie dem sprin-genden Ball einen animierten Text hinzu,der sich entlang eines von Ihnen definier-ten Pfades schlängelt. Dazu erzeugen Siemit dem Befehl „Einfügen, Ebene“ zu-nächst eine neue Ebene, der Sie den Na-men „Text“ verleihen.
Text eingeben und formatierenMit der <T>-Taste oder per Klick auf das „A“-Symbol in der Werkzeugleiste aktivierenSie das Textwerkzeug. Klicken Sie dann mitder Eingabemarke auf eine beliebige Stelleinnerhalb der Bühne. Geben Sie das Wort„Ballsaison!“ ein, und formatieren Sie denText anschließend mit Hilfe der Formatfel-der im Dialog „Eigenschaften“ in derSchriftfarbe Rot, der Schriftart „Arial“ undder Schriftgröße 40 Punkt.
Text linear animierenUm den Text linear zu ani-mieren, verschieben Sie denText zunächst mit dem Pfeil-werkzeug über den linkenBühnenrand hinaus. Dannfügen Sie in der Textebenein die Zelle 50 ein neuesSchlüsselbild ein. AktivierenSie die Zelle 50, und ver-schieben Sie den Text überden rechten Bühnenrandhinaus. Halten Sie dabei die<Shift>-Taste gedrückt, so
dass der Schriftzug beim Verschieben ver-tikal auf gleicher Höhe bleibt.
Markieren Sie in der Zeitleiste bei ge-drückter <Shift>-Taste gemeinsam die Zel-len 1 und 50, und wählenSie „Einfügen, Bewegungs-Tween erstellen“. Nun wan-dert der Schriftzug bei derWiedergabe als Laufschriftvon links nach rechts überdie Bühne (2 großes Bild amAnfang dieses Beitrags).
Bewegungspfad hinzufügenKlicken Sie jetzt mit derrechten Maustaste in derZeitleiste direkt neben denEbenennamen „Text“, undwählen Sie im Kontextme-nü die Funktion „Pfad hin-zufügen“. Darauf erscheintdirekt über der Textebene eine neue Ebenemit der Bezeichnung „Pfad: Text“.
Klicken Sie in der Werkzeugleiste aufdas Stift-Symbol, um den Freihand-Zei-chenmodus zu aktivieren. Damit zeichnenSie eine sanft geschwungene Linie, die weitentfernt vom linken Bühnenrand beginntund ebenso weit außerhalb des rechtenBühnenrandes endet (2 Abbildung unten
links). Der Schriftzugschnappt nun automatischam rechten Endpunkt derPfadlinie ein und kann beiBedarf mit Hilfe des Pfeil-werkzeugs am Pfad entlangverschoben werden – dasgleiche gilt auch für den Be-ginn der Animation in Zel-le 1. Wenn Sie jetzt den Filmper Druck auf die <Shift>-Tas-te wiedergeben, gleitet dieSchrift wie auf Wellendurchs Bild.
Tipp: Um den Pfad für das Auge des Be-trachters unsichtbar zu machen, klickenSie in der Ebene „Pfad: Text“ auf denschwarzen Punkt unterhalb des Augen-symbols. Der Punkt verwandelt sich dar-aufhin in ein rotes Kreuz, und die Ebenewird unsichtbar geschaltet.
Ebenen umschichtenMomentan verdeckt der Schriftzug beimDurchlauf durch die Mitte des Bildes teil-weise den Ball. Um den Schriftzug hinterdem Ball vorbeisausen zu lassen, müssenSie lediglich die Ebenen in der Zeitleisteumschichten. Klicken Sie auf die Ebenen-bezeichnung „Ball“, halten Sie die Maustas-te gedrückt, und verschieben Sie die Ebenein der Liste ganz nach oben.
4. So animieren SieBitmap-Grafiken
Bislang haben Sie lediglich mit Vektorob-jekten gearbeitet, die – Speicherplatz spa-rend – als Koordinatenpaare von Flash ver-waltet werden. Doch das Flash-Format istauch in der Lage, Bitmap-Grafiken in vielenFormaten in Filme zu integrieren und dortfachgerecht zu animieren.
Bitmap importierenErzeugen Sie mit „Einfügen, Ebene“ eineneue Ebene, und benennen Sie diese als„Himmel“. Verschieben Sie sie in der Ebe-nenliste ganz nach unten, so dass sie imHintergrund liegt. Wählen Sie „Datei, Im-portieren“, und wechseln Sie in das ent-sprechende Verzeichnis auf der C Heft-CD.
Markieren Sie die Datei SKY.JPG, und be-stätigen Sie mit „Öffnen“. Klicken Sie in derZeitleiste auf die Zelle 1 in der Ebene „Him-mel“, und verschieben Sie die Bitmap-Gra-
Virtuelle Presse: Mit dem Werkzeug „Frei transformieren“ sorgen Sie dafür,
dass der Ball gestaucht wird, sobald er auf den Boden trifft (Punkt 2)
Einfach himmlisch: Auch Bitmaps – wie hier ein Wolken-Hintergrund – las-
sen sich in Flash importieren und problemlos animieren (Punkt 4)
Kurviges Vergnügen: Der animierte Text folgt automatisch dem von Ihnen
gezeichneten Pfad auf der Unterebene „Pfad: Text“ (Punkt 3)
088-91 309 02.12.2003 14:21 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 91
FlashPGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 88 – S. 91
fik so weit nach links und oben, bis die un-tere rechte Ecke des Fotos deckungsgleichmit der unteren rechten Ecke der schwar-zen Bühnenmarkierung zum Liegenkommt (2 Bild linke Seite, rechte Spalte).
Animation mit Zoom-EffektNun könnten Sie die Wolken im Hinter-grund wie den Schriftzug von rechts nachlinks durchs Bild wandern lassen. Doch fürdie Hintergrundgrafik verwenden Sie ei-nen weiteren Tweening-Kniff von Flash: dasgleichzeitige Bewegen und Zoomen einesObjekts. Tipp: Um den Überblick über alleElemente eines Projekts zu behalten, wäh-len Sie „Ansicht, Skalierung, Alles zeigen“.
Markieren Sie in der Ebene „Himmel“die Zelle 50 am Ende der Animation, undfügen Sie dort ein neues Schlüsselbild ein.Verschieben Sie die Bitmap-Grafik nachrechts unten, bis sich die oberen linkenEcken von Foto und Bühne überlappen.Jetzt erstellen Sie einen neuen Bewegungs-Tween zwischen Zelle 1 und 50 der Him-mels-Ebene. Anschließend verkleinern Siedie Bitmap-Grafik in Zelle 50 mit demWerkzeug „Frei transformieren“ auf eine
Höhe von 200 Bildpunkten und korrigierendie Bildlage entsprechend. Nun wird beimTweening nicht nur das Bild verschoben,sondern gleichzeitig eine stufenlose Ver-kleinerung animiert – das Endergebniswirkt jetzt viel dynamischer.
5. So fügen SieSound hinzu
Fehlt zur perfekten Flash-Animation nurnoch der richtige Sound. Erzeugen Sie eineneue Ebene mit dem Titel „Sound“, mar-kieren Sie in der Zeitleiste die Zelle 1, und
öffnen Sie anschließend den Dialog „Im-portieren“ aus dem Menü „Datei“. Von der CHeft-CD importieren Sie die DateiBUMM.WAV. Dann öffnen Sie im Eigen-schaften-Dialog unten das Pull-down-Menü„Ton“ und wählen dort die eben importier-te Datei aus.
In der Zeitleiste sehen Sie jetzt in der Sound-Ebene eine Wellenform. Nun müs-sen Sie das Geräusch nur noch mit demAuftreffen des Balls synchronisieren. Dazuklicken Sie in der Zeitleiste an den Anfangder Wellenform in der Sound-Ebene, haltendie Maustaste gedrückt und ziehen denStartpunkt nach rechts bis zur Zelle 20 (2 Abbildung oben).
6. So exportieren Sieden Flash-Film
Nun speichern Sie den fertigen Film perDialog „Datei, Speichern unter“ als Flash-MX-Dokument mit der Bezeichnung „BALL.FLA“. Diese FLA-Datei dient nur zur späte-ren Verwendung, etwa zur Korrektur derInhalte. Die Datei für das Internet mit derEndung SWF müssen Sie erst noch generie-ren – diesen Vorgang bezeichnet Macrome-dia als „Veröffentlichung“ (2 Kasten links).
Zunächst einmal begutachten Sie, wiedie fertige Datei im Browser aussehen wird.Dazu wählen Sie „Datei, Vorschau für Ver-öffentlichungen, Standard (HTML)“. Flashstartet daraufhin Ihren Browser und prä-sentiert die fertige Animation im Browser-Fenster. Sind Sie mit dem Ergebnis zufrie-den, klicken Sie im Menü „Datei“ auf denBefehl „Veröffentlichen“. Nach einer kur-zen Wartezeit finden Sie die fertige Flash-Datei im SWF-Format sowie eine HTML-Da-tei mit allen nötigen Tags für die Integrati-on in Ihren Webeditor im gleichen Ver-zeichnis, in das Sie zuvor die FLA-Datei ab-gelegt haben – fertig. Sie dürfen sich nunmit dem Titel Flash-Regisseur schmücken.
Flash-Filme richtig veröffentlichen
Mit den Grundeinstellungen des Dialogs „Einstellun-gen für Veröffentlichungen“ aus dem Datei-Menüfahren Sie bei kleineren und unkomplizierten Anima-tionen meist richtig. Doch dank der vielfältigen Op-tionen können Sie vor dem finalen Export der Flash-Datei noch ordentlich Fein-Tuning betreiben.Registerkarte „Formate“: Hier legen Sie fest, welcheDateitypen Flash bei der Veröffentlichung erzeugtund im Arbeitsordner speichert. „Flash“ und „HTML“bezeichnen den eigentlichen Film und das dazuge-hörige HTML-Script zur Einbindung in Ihr Homepage-Script. Die drei Grafikformate GIF, PNG und JPEG erzeugen ein Vorschaubild, das als Basis füreinen Link auf den Flash-Film dienen kann. „Windows-Projektor“ und „Macintosh-Projektor“packen den Flash-Film samt Player in eine ausführbare EXE-Datei – so läuft die Präsentationauch auf Systemen ohne Flash-Player. Und die Option „Quick Time“ erzeugt eine Videodateizur direkten Wiedergabe in Quicktime oder im Windows Media Player.Registerkarte „Flash“: Die wichtigsten Einstellmöglichkeiten in diesem Dialog sind die Check-box „Film komprimieren“, die für eine möglichst kleine SWF-Datei sorgt, sowie der Regler„JPEG-Qualität“. Wenn Sie große Bitmap-Grafiken in Ihren Film integriert haben, führt eine Reduzierung der JPEG-Qualität in der Regel zu einer drastischen Verkleinerung der fertigenFilmdatei. Ähnlich bedeutend für die finale Filmgröße sind die Einstellungen für die „Audio-Streams“ und „Audio-Ereignisse“.Registerkarte „HTML“: Hier geben Sie die Inhalte des HTML-Scripts vor. So können Sie die„Größe“ unabhängig von der in Flash gewählten Filmgröße ändern, die automatische „Wieder-holung“ aktivieren oder ausschalten, oder die Darstellungsqualität und die Ausrichtung aufder Web-Seite nach Belieben verändern.
Inklusive Sound: Der Soundeffekt für das Auftreffen des Balls befindet sich ebenfalls auf einer eigenen Ebene.
Durch Verschieben in der Zeitleiste synchronisieren Sie ihn mit der Animation (Punkt 5)
Finale: Hier können Sie vor dem Export der
Flash-Datei noch Fein-Tuning betreiben
088-91 309 02.12.2003 14:22 Uhr Seite 5
PC-WELT SONDERHEFT 2/200492
Sorgen Sie für mehr Bewegung auf Ihrer Homepage – ohne kom-plizierte Flash-Movies und lästige Plug-ins. Mit Animation Shopgestalten Sie im Handumdrehen Diashows und Animationen.
Lebendige Homepage
Bewegte Bilder, die sich blitzschnell ge-stalten lassen, wenig Speicherplatz bean-spruchen und auf jedem Browser ohne zu-sätzliche Plug-ins dargestellt werden – einebrandneue Web-Technologie? Mitnichten!Animierte GIFs haben schon ein paar Jähr-chen auf dem Buckel – und erfüllen den-noch alle Anforderungen an eine moderneAnimationstechnologie.
Natürlich kann man mit Flash & Co.weitaus beeindruckendere und komplexe-re Trickfilme auf den Bildschirm zaubern,doch für einfache Diashows und kleineAnimationssequenzen reicht das unkom-plizierte GIF-Format vollends aus.
1. Bild für Bild: Diashow erstellenIn diesem Workshop zeigen wir Ihnen, wieSie mit Animation Shop 3 von Jasc Soft-ware (für Windows 95/98, NT 4, 2000, unterwww.jasc.de, 39 Euro) in nur wenigen Minu-ten Ihre eigenen Web-Filmchen gestalten.Eine auf 30 Tage Laufzeit beschränkte, vollfunktionsfähige Demoversion (10,9 MB) desleistungsstarken und zugleich leicht zu
bedienenden GIF-Animators finden Sie auf
CHeft-CD. Ebenfalls auf CHeft-CD beige-legt ist eine Demoversion (61,7 MB) des Bild-bearbeitungsprogramms Paint Shop Pro8.0 (für Windows 98/ME, NT 4, 2000 undXP), das gleichfalls aus dem Hause Jasc Soft-ware stammt und sich hervorragend als Bil-derlieferant für Animation Shop eignet.Die einfachste Variante einer GIF-Animati-
on besteht darin, mehrere Einzelbilder alsvirtuelle Diashow abzuspielen. Diese Ani-mationen eignen sich zum Beispiel hervor-ragend dazu, ein Produkt auf einer Web-site zu präsentieren oder eine Ebay-Aukti-on zu illustrieren. Mit Animation Shop 3stellen Sie auf diese Weise blitzschnell eineansprechende Bildsequenz mit attraktivenÜberblendeffekten her.
Grundeinstellungen festlegenStarten Sie Animation Shop 3, und wählenSie „Datei, Neu“. Im Dialog „Neue Animati-on“ geben Sie eine „Breite“ von 320 Bild-punkten und eine „Höhe“ von 200 Pixelnvor. Die Bilder müssen vergleichsweiseklein sein, denn das GIF-Format zeichnetsich nicht gerade durch eine hohe Daten-kompression aus – 2-Megapixel-Fotos kom-men also für eine Diashow nicht in Frage.
Unter „Leinwandfarbe“ aktivieren Siedie Option „Gedeckt“ für einen soliden, ein-farbigen Hintergrund. Mit einem Klick aufdas Farbfeld rechts ändern Sie die Hinter-grundfarbe – in unserem Fall auf Weiß. Be-stätigen Sie mit „OK“, um das neue Anima-tionsfenster zu erstellen.
Bilder einfügenJetzt füllen Sie das Animationsfenster mitden gewünschten Einzelbildern. Verwen-den Sie dazu den Befehl „Animation, Bildhinzufügen, aus Datei“. Im nun erschei-nenden Dialog (2 Abbildung unten) kli-cken Sie auf die Schaltfläche „Datei hinzu“und wechseln in das Verzeichnis auf
CHeft-CD. Wählen Sie die fünf enthaltenen Bei-
spielbilder mit der Tastenkombination<Strg>-<A> gemeinsam aus, und klicken Sieauf „Öffnen“. Nun zeigt die Übersichtslisteoben die ausgewählten Dateien an. Im un-
Von Michael Schmithäuser
Vom Bild zum Film: Zu Beginn importieren Sie die Einzelbilder für die Animationssequenz (Dialogbox rechts). In
der Animationsvorschau sind sämtliche Einzelbilder mit attraktiven Übergängen versehen (Punkt 1)
092-95 310 02.12.2003 14:48 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 93
Animierte GIFsPGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 92 – S. 95
teren Fensterbereich erhöhen Sie zunächstdie „Verzögerungszeit“ (2 Abbildung linkeSeite unten). Als Maßeinheit verwendetAnimation Shop Hundertstelsekunden, ei-ne Verzögerungszeit von „300“ bewirkt al-so eine Anzeigedauer von 3 Sekunden proBild. Unter „Position innerhalb des Rah-mens“ wählen Sie die Option „Zentriert“,um jedes Einzelbild zentriert anzuordnen.
Besonders wichtig ist die Checkbox„Größe anpassen“ im Dialog ganz untenlinks. Nur wenn Sie hier ein Häkchen set-zen, werden die Bilder automatisch auf dasvon Ihnen vorgegebene Format von 320 x200 Pixel herunterskaliert.
Bestätigen Sie Ihre Eingaben abschlie-ßend mit „OK“, um die Fotos in den Ani-mationsstreifen einzufügen.
Überblendungen gestaltenVergrößern Sie nun den Animationsstrei-fen auf Bildschirmbreite, und wählen Siegegebenenfalls einen kleineren Zoomfak-tor, um alle Einzelbilder der Animation imÜberblick zu haben. Das vormalige, leereStartbild mit der Bezeichnung „E6“ ist ansEnde der Animation gewandert.
Aktivieren Sie es per Mausklick, und be-fördern Sie es mit einem Druck auf die<Entf>-Taste in den Papierkorb. Nun be-steht die Animationssequenz aus fünf Zel-len mit den Bezeichnungen „E1“ bis „E5“,wobei „E“ für „Einzelbild“ steht. Der Wert
„V“ unter jedem Bild gibtdie Verzögerungszeit unddamit die Anzeigedauer an.Sie können schon jetzt ei-nen Blick auf die Animationwerfen – für die „Animati-onswiedergabe“ klicken Sieeinfach aufs Icon mit demFilmstreifen in der Symbol-leiste ganz rechts. Nun öff-net sich ein Vorschaufenster,das die Animationssequenzin einer Endlosschleife an-zeigt. Beim Betrachten desFilmchens fallen die direk-ten Sprünge von Bild zu Bildunangenehm auf. Um dieSequenz optisch aufzu-lockern, nutzen Sie die viel-seitige Überblendungsfunk-tion von Animation Shop.Klicken Sie auf die erste Zel-le, und rufen Sie die Dialog-box „Bildübergang einfü-gen“ aus dem Menü „Effek-
te“ auf (2 Abbildung oben links). Im Fens-ter links sehen Sie das Startbild, in der Mit-te die Effektvorschau, rechts das Endbild.
Aktivieren Sie zunächst in der Sektion„Endbild“ die Option „Animationsbild“, sodass der Übergang zwischen den jeweiligenFotos in der Animationssequenz erfolgt. Beiden voreingestellten Effektparametern un-ter „Übergangseigenschaften“ mit einer„Übergangslänge“ von zwei Sekunden undzehn Bildern pro Sekunde würde ein einzi-ger Übergang 20 Einzelbilder benötigen –damit wäre die Datei am Schluss zu großfür einen effizienten Einsatz im Internet.Reduzieren Sie deshalb diese beiden Werteauf eine Sekunde und fünf Bilder pro Se-kunde. Die Zahl der benötigten Zwi-schenbilder reduziert sichdadurch auf fünf.
Im Pull-down-Menü „Über-gang“ finden Sie viele inter-essante Überblendeffekte.„Auflösen“ zerlegt das Bildin einzelne Pixelkörnchen,„Irisblende“ bewirkt einenFoto-Effekt, während „Um-blättern“ die einzelnen Bil-der wie die Seiten einer Zeit-schrift ineinander überge-hen lässt. Wählen Sie letzte-ren Effekt aus, und klickenSie auf die Schaltfläche„Konfigurieren“, um im Ein-
stellungsdialog die Umblätter-Variante von„Unten links“ auszuwählen. Bestätigen Siezwei Mal mit „OK“, schon errechnet Ani-mation Shop automatisch die Zwischenbil-der für den Übergangseffekt, die es als Zel-len „E2“ bis „E6“ mit einer Verzögerungs-zeit von jeweils 0,2 Sekunden in den Ani-mationsstreifen einfügt.
MetamorphosenWiederholen Sie nun den Vorgang für dasnächste Einzelbild „E7“, und suchen Siesich dafür eine andere Übergangsvarianteaus, zum Beispiel das sehr effektvolle „Ver-drehen“. Danach verpassen Sie dem Fotovon der Innenausstattung, das nun an dieZellennummer „E13“ vorgerückt ist, einen„Metamorphose“-Effekt. Die Frontansicht„E19“ blenden Sie im nächsten Schritt per„Jalousie“ in die Heckansicht über.
Das letzte Bild, jetzt an der Stelle „E25“,blenden Sie nach Weiß aus. Dazu wählenSie im Dialog „Bildübergang einfügen“ un-ter „Endbild“ die Option „Leinwandfarbe“,die Sie zuvor als Weiß definiert haben, undden Übergang „Metamorphose“.
Nun sind sämtliche Einzelbilder mit at-traktiven Übergängen versehen – dakommt schon mehr Freude beim Betrach-ten der Animationsvorschau auf, wie 2 diegroße Abbildung oben auf der ersten Seitedieses Beitrags anschaulich zeigt.
Inhalt Seite
1. Bild für Bild: Diashow erstellen 922. Animationseffekte für die Homepage 94
Kästen:Videobilder als animierte GIFs 94Weitere Software 95
Effektvoll: Die Übergangseffekte von Animation Shop machen jeden Bild-
wechsel zu einem visuellen Erlebnis (Punkt 1)
Qualitätsprüfung: Vor dem Speichern der fertigen GIF-Animation legen Sie
den Kompromiss zwischen Bildqualität und Dateigröße fest (Punkt 1)
092-95 310 02.12.2003 14:49 Uhr Seite 3
Workshops Animierte GIFs
PC-WELT SONDERHEFT 2/200494
PPpP S. 92 – S. 95
PGrundlagen pWorkshops PUtilities
Die richtigen EinstellungenDie eigentliche Diashow ist damit vollen-det, doch bevor Sie sie in Ihre Website ein-binden, müssen Sie noch die richtigenSpeicheroptionen wählen. Gehen Sie unter„Datei, Speichern unter“, und geben Sie derDatei einen aussagekräftigen Namen –zum Beispiel AUTO_SHOW.GIF. Sobald SieIhre Eingaben mit einem Klick auf „Spei-chern“ bestätigt haben, gelangen Sie auto-matisch in den Assistenten für die Anima-tionsqualität (2Abbildung vorhergehendeSeite unten rechts).
Animation Shop schließt in der Stan-dardeinstellung einen Kompromiss zwi-schen Bildqualität und Dateigröße, den Siejedoch mit dem Schieberegler links unddem Dialog „Konfigurieren“ an Ihre eige-nen Vorstellungen anpassen können.
Als Faustregel gilt, dass bei Bildern mitvielen Farben – also auch bei unserer Bei-spieldatei – die „Stufe 4“ eingestellt seinsollte, der Schieberegler sich also ganzoben bei „Höhere Bildqualität“ befindensollte. Alle niedrigeren Einstellungen spa-ren Speicher, indem sie Farben weglassen,was bei Fotovorlagen zu unbefriedigendenErgebnissen führen kann.
Nach einem Klick auf „Weiter“ berech-net Animation Shop die gewählten Um-rechnungsmaßnahmen. Bei einer kleinenDatei geht dies recht flott vonstatten.Klicken Sie erneut auf „Weiter“, und be-trachten Sie die Animation in der „Opti-mierungs-Vorschau“ (2 Abbildung oben).
Wenn Sie mit dem Ergebnis zufriedensind, übernehmen Sie die Einstellungenmit „Weiter“, andernfalls klicken Sie auf„Zurück“ und ändern die Werte im Dialog„Konfigurieren“. Sollte es zum Beispiel beieiner niedrigen Qualitätsstufe zu deutlichsichtbaren Farbflächen gekommen sein,
setzen Sie die „Anzahl derFarben“ auf den Maximal-wert und aktivieren den „Pa-lettenyp:“ „Octree, opti-miert“. Bei Bildern mit ein-heitlichen Farben kannauch die „Farbreduktions-methode: Ähnliche Farben“bessere Ergebnisse bringen.Im letzten Fenster des Opti-mierungs-Dialogs erhaltenSie Informationen über dieDateigröße und die voraus-sichtliche Übertragungszeitbei verschiedenen Übertra-gungsraten vom 14,4-KBaud-
Modem bis hin zur ISDN-Verbindung. Auf-grund der Übergänge bringt es die Bei-spieldatei auf 512 KB – das ist kein Problemfür Anwender mit ISDN- oder DSL-Verbin-dung, bedeutet jedoch Wartezeiten zwi-schen 1,5 und 6,5 Minuten für die Besitzerlangsamerer Modems. Deshalb sollten Siesolch eine aufwendige Animation nicht di-rekt auf Ihre Homepage stellen, sondern siezum optionalen Download mit einem Hin-weis auf die Dateigröße anbieten.
Um die Datei zur späteren Nachbearbei-tung im Originalzustand zu speichern,wählen Sie „Datei, Speichern unter“ undden „Dateityp:“ „Animation Shop Animati-on“ mit der Datei-Endung MNG. Diese Da-
tei sowie die fertige Animation im GIF-For-mat finden Sie auf der CHeft-CD.
2. Animationseffekte fürdie Homepage
Eine zu statisch wirkende Homepage lässtsich durch animierte Aufzählungszeichen(neudeutsch „Bullets“), bewegte Initialenoder Trennbalken im Trickfilm-Stil deut-lich aufwerten. Bevor Sie loslegen und IhreWeb-Seiten mit den im Folgenden erklär-ten Effekten versehen, sollten Sie sich aller-dings ganz genau überlegen, wie viele Ani-mationen Ihre Homepage verträgt.
Viele Homepage-Betreiber sind einerwahren GIF-Manie verfallen und haben ih-re Seiten mit Dutzenden von bewegtenBildchen ausgeschmückt – solch ver-schwenderischer Umgang mit animiertenGIFs zeugt nicht gerade von Professiona-lität. Wie in vielen Gestaltungsbereichengilt auch hier die Devise: Weniger ist mehr(2 Beitrag ab Seite 26).
Anfangsbuchstaben animierenEin animierter, großer Anfangsbuchstabezur Einleitung eines Textblocks lässt sichmit Animation Shop in wenigen Schrittenerstellen. Erzeugen Sie eine neue Datei,und geben Sie eine „Breite“ und „Höhe“von 100 x 100 Pixeln sowie die „Leinwand-farbe:“ „Transparent“ vor. Setzen Sie nun
Videobilder als animierte GIFs
Mit Animation Shop verwandelnSie Einzelbilder aus Ihren Video-sequenzen im AVI-, MPEG- oderWMF-Format im Handumdrehenin animierte GIFs. Dazu wählenSie einfach „Datei, Öffnen“ undselektieren die gewünschte Vi-deodatei. Daraufhin erscheint derDialog „Importoptionen“. Im obe-ren Fensterbereich legen Sie fest, ob sämtliche Einzelbilder oder nur Bilder aus einem ganz be-stimmten Bereich des Videos eingefügt werden sollen. Da Videodateien oftmals aus Hundertenoder gar Tausenden von Einzelbildern bestehen, ist der Bereich „Sampling“ in der unteren Fensterhälfte von großer Bedeutung. Hier geben Sie beispielsweise an, dass Sie nur jedeszehnte oder zwanzigste Bild verwenden möchten, damit die Dateigröße der fertigen GIF-Anima-tion nicht ins Unermessliche steigt.
Nach dem Import empfiehlt sich natürlich auch eine Verkleinerung des Bildformats – im-merhin 720 x 576 Pixel im DV-Vollformat – mit dem Befehl „Animation, Animationsgröße ver-ändern“. Größer als 320 Pixel in der Breite sollte keine GIF-Animation ausfallen. Damit die Ein-zelbilder nicht zu schnell abgespielt werden, markieren Sie alle Zellen im Animationsstreifenmit <Strg>-<A> und rufen mit <Alt>-<Eingabe> den Dialog „Einzelbildeigenschaften“ auf, in demSie die „Wiedergabezeit“ entsprechend erhöhen.
Gut angezeigt: Im Vorschaumodus der Qualitätsoptimierung können Sie
die Auswirkungen der Kompressionseinstellungen begutachten (Punkt 1)
Importoptionen: In diesem Dialog legen Sie die Optionen für die
Umwandlung von Videomaterial in animierte GIFs fest
092-95 310 02.12.2003 14:49 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 95
Animierte GIFsPGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 92 – S. 95
mit dem Werkzeug „Referenzpunkt“ (Fa-denkreuz-Icon in der Werkzeugleiste) einenPunkt exakt in der Mitte der Animations-zelle bei den Koordinaten 50,50.
Dabei ist Ihnen die Koordinatenanzeigeam unteren linken Fensterrand behilflich.Solche Referenzpunkte helfen Ihnen beimexakten Ausrichten von Objekten wie demInitial, das Sie nachfolgend per Textwerk-zeug („A“-Symbol in der Werkzeugleiste)einfügen.
Spezialeffekte einsetzenKlicken Sie mit dem Textcursor in die Ani-mationszelle, und geben Sie im nun er-scheinenden Dialogfenster „Text einfügen“folgende Parameter ein: „Schriftart:“ „Ari-al“, „Schriftschnitt:“ „Fett“, „Schriftgrad:“„72“ und „Darstellung:“ „Antialiasing“ (2 Abbildung oben).
Klicken Sie danach ins weiße Eingabe-feld, um dort den Buchstaben „A“ einzuge-ben. Ignorieren Sie die Warnung, dass derText für die Animation zu groß sei. Mit Hil-fe des zuvor gesetzten Referenzpunktesrichten Sie den Buchstaben exakt mittig in
der Zelle aus und betten ihnper Mausklick ein. Um ausdem Buchstaben ein wirk-lich „bewegendes“ Initial zumachen, greifen Sie auf dieFunktion „Spezialeffekt ein-fügen“ aus dem Menü „Ef-fekte“ zurück. Als „Start-bild“ legen Sie das „Animati-onsbild“ fest, im Pull-down-Menü „Effekt“ haben Sie dieQual der Wahl unter mehrals 20 animierten Spezialef-fekten. „Bildrauschen“ lässtden Buchstaben im Look ei-nes gestörten Fernsehbildes
erscheinen, „Dehnen“ zoomt das „A“ anden Betrachter heran, „Drehen“ rotiert denBildinhalt um 360 Grad, während „Krat-zer“ dem Bild typische Streifen wie bei ei-nem alten Film hinzufügt.
Im Beispiel wählen Sie den Effekt „Wir-bel“ in der Liste ganz unten aus (2 Abbil-dung unten links). Die „Effekteigenschaf-ten“ im Dialog sind im Wesentlichen iden-tisch mit den Einstellmöglichkeiten desÜberblendungs-Fensters aus dem erstenBeispiel dieses Beitrags. Für eine optimaleWiedergabe der Spezialeffekte stellen Siedie „Effektlänge“ auf 2 Sekunden und die„Bilder pro Sekunde“ auf 10 EpS ein. Da-durch enthält die fertige Animation 20 Ein-zelbilder. Damit der Buchstabe aus einem
zunächst unkenntlichen Wirbel entsteht,aktivieren Sie die Checkbox „Effekt in ent-gegengesetzter Richtung einfügen“, bevorSie die Berechnung mit einem Klick auf„OK“ starten. Nun ist ein Animationsstrei-fen mit 21 Zellen entstanden, in dem dasursprüngliche „A“ ganz nach hinten in dieZelle „E 21“ gewandert ist.
Klicken Sie diese Zelle an, und wählenSie erneut „Effekte, Spezialeffekt einfügen“.Deaktivieren Sie die Checkbox „Effekt inentgegengesetzter Richtung einfügen“, sodass die Verwirbelung des Buchstabensjetzt am Ende der Transformation steht,und bestätigen Sie mit „OK“.
Nahtloser ÜbergangWenn Sie nun die Animationsvorschaustarten, gehen beide Animationssequenzenbei der Endloswiedergabe nahtlos ineinan-der über. Nur am Schnittpunkt zwischender letzten und der ersten Animationszelletritt eine unschöne Pause ein, die Sie eli-minieren, indem Sie die Zelle „E41“ mit der<Entf>-Taste löschen.
Speichern Sie jetzt die Datei zunächstim Animation-Shop-Format MNG undnachfolgend im GIF-Format ab. BelassenSie die automatisch ermittelten Standard-einstellungen – weil die Animation nurüber drei Farben verfügt, beansprucht sietrotz der hohen Zahl an Einzelbildern le-diglich 18 KB Speicherplatz.
Rundherum: Der Effekt „Wirbel“ ist einer von über 20
spektakulären Spezialeffekten (Punkt 2)
Letternwirtschaft: Buchstaben und Texte lassen sich auf vielfältige Weise in
eine Animation einfügen, die der Website Pep verleiht (Punkt 2)
Weitere Software
Neben Jasc Animation Shop gibt es zahlreiche weitere Tools, um animierte GIFs zu erstellen.Hier eine Auswahl:ULead GIF Animator 5: Preiswertes Tool für Windows 95/98/ME, NT 4 und 2000, 45,95 Euro,voll funktionsfähige 15-Tage-Testversion (10,3 MB, Download unter www.ulead.de), miteingängiger Benutzerführung und vielen Zusatzfunktionen, zum Beispiel leistungsstarken Grafikwerkzeugen mit Ebenenfunktion und automatischem Tweening zum Gestalten aufwendiger Animationen per Mausklick.KoolMoves 4.2.3: Dieses englischsprachige Tool für Windows 95/98/ME, NT 4, 2000 und XP,49 Dollar, Demoversion (3 MB) unter www.koolmoves.com und aufC Heft-CD, glänzt durch viele Spezialeffekte, Ebenenverwaltung und die Möglichkeit, Animationen auf Wunsch alsFlash-Film im Shockwave-Format abzuspeichern.Xara 3D 5.0: Leicht zu bedienendes Programm für Windows 95/98/ME, NT 4, 2000 und XP,49,95 Euro, 15-Tage-Testversion (1,3 MB) unter http://xara.haage-partner.de und aufC Heft-CD, zum Gestalten von einfachen 3D-Animationen. Jede Menge Schrift- und Animationseffekte.Die fertigen Filme lassen sich sowohl als animierte GIFs als auch im Flash-Format oder alsBildschirmschoner exportieren.Animake 2.7: Einfaches, kostenloses Programm für Windows 95/98/ME, NT 4, 2000 und XP,Download (2,1 MB) unter www.rms.to und aufC Heft-CD zum Importieren, Verknüpfen undAnimieren von vorbereiteten Einzelbildern. Die Freeware kann auch Videodateien im MPEG-Format importieren.
092-95 310 02.12.2003 14:50 Uhr Seite 5
PC-WELT SONDERHEFT 2/200496
Mit einem FTP-Programm übertragenSie Dateien und ganze Verzeichnisse vonIhrem PC auf Ihren Webserver. Auf demServer löschen und verschieben Sie damitaußerdem Dateien oder erzeugen neue Ver-zeichnisse. Wie Sie dabei vorgehen, zeigtIhnen dieser Artikel am Beispiel der ausge-reiften Freeware Filezilla 2.2.1a für Win-dows 95/98/ME, NT 4, 2000 und XP (Down-load unter http://filezilla.sourceforge.net). Wei-tere Informationen über dieses Tool ent-hält der Beitrag über FTP-Programme, denSie 2 ab Seite 126 finden.
Die Grundlagen der Vorgehensweise las-sen sich auch auf andere FTP-Tools als File-zilla übertragen, auch wenn die Menü-punkte und Eingabefelder oft anders be-zeichnet sind. Bei der Installation von File-zilla übernehmen Sie am besten sämtlicheVorgaben des Setup-Programms. Dann sindalle notwendigen Module installiert, undes kann nichts schief gehen.
1. FTP-Server einrichten: Adresse, Name, Passwort
Wenn Sie einen bestimmten FTP-Server öf-ter benutzen, tragen Sie dessen Verbin-dungsdaten in die Adressverwaltung vonFilezilla ein. Danach wählen Sie zum Ver-bindungsaufbau nur noch den passendenEintrag in einem Drop-down-Menü aus.
Rufen Sie den Menüpunkt „Datei, SeitenVerwaltung“ auf. „Seite“ gibt hier das eng-lische „site“ wieder – eine nicht besondersgelungene Übersetzung. Im Dialogfeld„Servermanager“ sehen Sie links eine Listemit den vorhandenen FTP-Servern. Sie soll-te zunächst leer sein, nur der Ordner „Ei-gene FTP Seiten“ ist vorhanden. Mit derSchaltfläche „Neue Seite“ erzeugen Sie ei-nen leeren Eintrag.
Als Erstes ändern Sie den vorgegebenenNamen, dazu klicken Sie den Listeneintrageinmal mit der Maus an. Im Beispiel tragen
wir „T-Online“ ein. Auf der rechten Seite desDialogfelds erscheinen nun die leeren Ein-gabefelder für diesen Eintrag. Im Feld„Host“ tragen Sie die Adresse ein, zum Bei-spiel „home-up.t-online.de“ (ohne Anführungs-zeichen) für T-Online. Die in Ihrem Fall rich-tige Adresse finden Sie auf der Website IhresProviders in den Hilfetexten.
Im Bereich „Logontyp“ aktivieren Sie dieOption „Normal“. Jetzt gibt Filezilla die Ein-gabefelder für Benutzername und Passwortfrei. Tragen Sie die Daten ein, für T-Onlineals Benutzer „ftp“ (ohne Anführungszei-chen) und als Passwort einen Punkt (.). Weildie Surfer bei T-Online bereits bei der Ein-wahl identifiziert werden, ist hier kein ex-tra Passwort erforderlich.
Zahlreiche öffentliche FTP-Server – bei-spielsweise ftp.netscape.com – erlauben es, ei-ne anonyme Verbindung aufzunehmen.Falls Sie so einen öffentlichen FTP-Serververwenden, belassen Sie einfach die Ein-stellung „Anonym“.
Sicherheit fürs PasswortDie Möglichkeit, das Passwort zu spei-chern, ist zweischneidig. Einerseits ist essehr bequem, wenn Sie zum Verbindungs-aufbau nur einen Mausklick brauchen. An-dererseits ist das Sicherheitsrisiko rechthoch, denn Filezilla speichert die Verbin-dungsdaten – und andere Programmoptio-nen – in der Datei Filezilla.XML in seinemProgrammverzeichnis. Das Passwort istzwar verschlüsselt abgelegt, doch ein An-greifer kann diesen Schutz leicht umge-hen, indem er die ganze Datei kopiert undauf seinem PC mit Filezilla öffnet.
Standardmäßig sollten Sie deshalb„Passwort nicht speichern“ aktivieren. Da-mit sind die Eingaben komplett, und Sieschließen das Dialogfeld mit der Schalt-fläche „Speichern“.
2. Oberfläche anpassen:Schaffen Sie mehr Platz
Die Verbindung zu dem neu angelegtenServer bauen Sie über das Drop-down-Menü in der Symbolleiste ganz links auf.Wählen Sie aus dem Menü den gewünsch-ten Eintrag, im Beispiel „T-Online“. Danachschickt Filezilla entsprechende Komman-dos an diesen FTP-Server und meldet sichan. Wenn Sie das Passwort nicht gespei-chert haben, fragt ein Dialogfeld danach.
Die FTP-Kommandos und Antwortendes Servers erscheinen im Bereich unter-halb der Symbolleiste (2 Abbildung oben).
Um Ihre Homepage-Dateien vom PC auf den Webserver zu übertragen, verwenden Sie am besten ein FTP-Tool. Wie derUpload funktioniert, zeigen wir am Beispiel von Filezilla.
Darunter sehen Sie links die Dateien auf Ih-rer Festplatte („Lokale Seite“), rechts er-scheinen die Verzeichnisse und Dateien desFTP-Servers („Serverseite“). Ganz untenzeigt Filezilla die gerade laufenden Datei-Übertragungen und die noch ausstehen-den in der Warteschlange an.
Überflüssiges ausblendenUm Platz im Programmfenster zu schaffen,lassen sich die verschiedenen Elementeüber die Symbolleiste ausschalten und beiBedarf wieder einschalten.
Die FTP-Kommandos interessieren nor-malerweise nicht. Nur wenn Fehler auftre-ten, lässt sich damit leichter die Ursache er-mitteln. Blenden Sie den Bereich über dasentsprechende Symbol oder „Ansicht,Nachrichten Log“ aus. Die Kommandoszeichnet Filezilla im Hintergrund weiter-
hin auf, Sie müssen zur Ansicht den Be-reich nur wieder einblenden.
Auch den Dateibaum bei der „LokalenSeite“ benötigen Sie nicht – schalten Sieihn über „Ansicht, Lokale Ordneransicht“aus. Über das Menü „Ansicht“ stehen nochweitere Optionen bereit – probieren Sie ru-hig ein wenig herum.
3. File-Transfer: Dateien und Verzeichnisse übertragen
Die Übertragung einer Datei oder einesOrdners ist denkbar einfach: Ziehen Sie dasObjekt per Drag & Drop von der „LokalenSeite“ auf die „Serverseite“ oder umge-kehrt. Filezilla reiht das Objekt daraufhinin die Warteschlange ein und beginnt mitder Übertragung. Beachten Sie, dass sichaus der Ordneransicht keine Objekte in dasandere Fenster ziehen lassen. Das klapptnur im Dateibereich.
Sie können natürlich mit den bei Win-dows üblichen Methoden mehrere Dateienoder Verzeichnisse markieren. Wenn Siedie <Strg>-Taste gedrückt halten, markie-ren Sie mit einem Mausklick zusätzlicheDateien. Mit gedrückter <Shift>-Taste mar-kieren Sie alle Verzeichniseinträge, die zwi-schen dem aktuell markierten Eintrag unddem angeklickten Eintrag liegen. Mit derTastenkombination <Strg>-<A> markierenSie alle Daten und Unterverzeichnisse.
Zusätzliche BefehleÜber das Kontextmenü eines Objekts, dasSie mit der rechten Maustaste öffnen, ste-hen einige zusätzliche Befehle bereit. Dergenaue Wortlaut ist bei der lokalen Fest-platte und dem FTP-Server etwas unter-schiedlich, die Wirkung aber identisch.
Die Menü-Einträge „Upload“ bezie-hungsweise „Download“ starten sofort die
Übertragung. „Zur Warteschlange hinzufü-gen“ übernimmt das Objekt zunächst in dieWarteschlange. Der Transfer beginnt aller-dings noch nicht, Sie müssen ihn über dasIcon in der Symbolleiste oder den Menü-punkt „Warteschlange, Warteschlange ab-arbeiten“ extra starten.
Mit „Upload als“ fragt ein Dialogfeldnach einem besonderen Benutzernamensamt Passwort. Für die Pflege einer Websiteist diese Funktion nicht notwendig.
4. Datei-Operationen: Attributeund Kopieroptionen
Wenn eine Datei auf dem Ziel bereits exis-tiert, dann fragt Filezilla mit einem Dia-logfeld nach, was passieren soll. Standard-mäßig schlägt das Tool vor, die vorhandeneDatei zu ersetzen (2 Abbildung unten).
Die Option „Fortsetzen“ verwenden Siebei abgebrochenen Datei-Übertragungen.„Umbenennen“ ruft ein Dialogfeld auf, indem Sie einen neuen Datei- oder Ordner-namen eingeben. Bei „Überspringen“macht Filezilla einfach mit der nächstenDatei in der Warteschlange weiter.
Als Standardeinstellung macht „Über-schreiben falls neuer“ Sinn. Damit markie-ren Sie auf der lokalen Festplatte einfach al-le Dateien, Filezilla kopiert aber nur diegeänderten Dateien auf den FTP-Server. Zu-sätzlich aktivieren Sie unten rechts „Im-mer diese Aktion benützen, wenn eine Da-tei bereits existiert“ – sonst nervt Filezillabei jeder einzelnen Datei. Sie ändern dasVerhalten jederzeit über „Transfer, Dateiexistiert Einstellungen“.
Server-Dateien verwaltenDie Verwaltung von Dateien funktioniertim Bereich „Serverseite“ genau wie auf derlokalen Festplatte. Über das Kontextmenüstehen Befehle zur Verfügung, die für sichsprechen: „Ansehen/bearbeiten“, „Löschen“oder „Verzeichnis erstellen“ und so weiter.Der Befehl „Eigenschaften“ ruft auf der „Lo-kalen Seite“ den bei Windows üblichen Ei-genschaftendialog auf.
Auf der „Serverseite“ gibt es allerdingseine Besonderheit, hier nennt sich derMenüpunkt „Dateiattribute“. Weil die meis-ten Web- und FTP-Server mit Unix arbeiten,zeigt das Dialogfeld mehr Optionen für Zu-griffsrechte, als bei Windows üblich sind.Normalerweise müssen Sie daran nichtsändern, es sei denn, Sie übertragen ein aus-führbares CGI-Script. Mehr hierzu lesen Sie2 ab Seite 44.
Rückfrage: Ist eine Datei in der Warteschlange im Zielverzeichnis bereits vorhanden, will das FTP-Programm File-
zilla wissen, wie es verfahren soll. Als Standardeinstellung macht „Überschreiben falls neuer“ Sinn (Punkt 4)
Schnelle FTP-Verbindung
Wenn Sie nur schnell eine Verbindung zueinem FTP-Server aufbauen wollen, ist esnicht notwendig, dass Sie umständlichden Servermanager bemühen. Unter derSymbolleiste zeigt Filezilla mehrere Einga-befelder für „Adresse“, „Benutzer“ und„Passwort“ an. Tragen Sie hier die Verbin-dungsdaten für den FTP-Server ein, undklicken Sie ganz rechts auf die Schaltflä-che „Verbinden“. Das macht vor allem beianonymen FTP-Servern Sinn, die ohnePasswort frei zugänglich sind. Übrigens speichert Filezilla die eingetipp-ten Daten: Wenn Sie rechts neben der„Verbinden“-Schaltfläche auf das Pfeil-symbol klicken, öffnet das Tool ein Menümit vorhandenen Adressen.
096-97 312 02.12.2003 15:13 Uhr Seite 3
PC-WELT SONDERHEFT 2/200498
Ein guter Web-Auftritt ist ansprechend und bedienerfreundlichgestaltet und bietet spannende Inhalte. Wir verraten Ihnen, wieSie Ihre Site so konzipieren, dass Besucher gern wiederkommen.
Besuchermagnet
Liebe zu einem Thema, PC-Begeisterungund etwas HTML reichen längst nicht mehraus, um eine erfolgreiche Website zu er-stellen. Die Surfer sind anspruchsvoll ge-worden, der <Back>-Button ist schließlichnur einen Mausklick entfernt.
Lernen Sie also aus den Negativ-Beispie-len, die es im Internet zuhauf zu besichti-gen gibt, und machen Sie Ihre Homepagezu einem Besuchermagneten.
Negativ-Beispiel: Sie gelangen auf eine vielversprechende und vielleicht noch auf-wendig gestaltete Seite. Die Inhalte haltenallerdings nicht, was das schicke Design,die Top-URL und aufwendige Bildschirmef-fekte versprechen. Die Informationen sindüberaus dürftig, schlecht recherchiert unddarüber hinaus auch noch uralt – für Besu-cher ist wenig zu holen.
So machen Sie’s besser: Überlegen Sie sichals (künftiger) Webmaster, welchen Zweck
Sie mit Ihrer Site verfolgen. Erstellen Sie einKonzept für die Inhalte. Worüber möchtenSie Ihre Besucher informieren? An wenwollen Sie sich wenden?
Ihre Site kann nicht für alle Surfer inter-essant sein: Suchen Sie sich eine bestimmteZielgruppe, die Sie adäquat mit Inhaltenversorgen. Egal ob Familien-, Firmen- oderVereins-Homepage: Pflegen und aktualisie-ren Sie Ihre Inhalte in regelmäßigen Ab-ständen. Dabei sollten Sie allerdings denEindruck vermeiden, dass es sich bei IhrerSeite um eine endlose Baustelle handelt.
2. Texte sorgfältig auswählen und redigieren
Negativ-Beispiel: Auf manchen Seiten hatsich jemand mit der Beschreibung seinesHobbys sehr viel Mühe gegeben. Doch dieTexte wirken nicht lebendig, sondern höl-zern, und wimmeln nur so von Fehlern.
So machen Sie’s besser: Legen Sie beim Er-stellen der Inhalte die gleiche Sorgfalt anden Tag wie beim Schreiben einer Bewer-
bung. Da Sie für Ihr Hobby-Projekt wohlkaum eine professionelle Online-Redaktionengagieren werden, müssen Sie eben Ihr ei-gener Redakteur sein. Dazu gehören dieAuswahl und Bearbeitung von Texten undAbbildungen ebenso wie der sorgfältigeKorrekturgang am Schluss. Denn auch imWeb wirken Fehler alles andere als profes-sionell. Sie können auch Freunde oder Be-kannte bitten, Ihre Texte vor der Veröffent-lichung noch einmal durchzulesen.
3. Texte gezielt fürsWeb aufbereiten
Negativ-Beispiel: Sie haben eine Seite mitinteressanten Inhalten gefunden, doch dasLesen der Informationen ist quälend. DieSchrift ist zu klein, die Absätze kleben zudicht aneinander. Die Texte dehnen sichlang wie Kaugummi. Das Lesen ermüdetSie, denn es fehlt die Abwechslung.
So machen Sie’s besser: Lesen am Monitorermüdet schneller als das Lesen von Textenauf Papier. Oft werden die Texte am Bild-schirm nur überflogen, „gescannt“.
Fassen Sie sich deshalb möglichst kurz.Lockern Sie Ihre Texte auf, beispielsweisedurch häufige Absatzumbrüche, Zwischen-überschriften, Farben und kleine Symbol-grafiken (2 Abbildung rechte Seite oben).Vermeiden Sie Phrasendrescherei undFüllfloskeln. Wenn Sie im Medium Webnicht nur publizieren, sondern auch wirk-lich gelesen werden wollen, heißt das Mot-to: In der Kürze liegt die Würze.
4. Angemessene Typographie für den Bildschirm beachten
Negativ-Beispiel: Auf manchen Seitenklicken Sie auf ein unterstrichenes Wort,und es passiert – nichts. Denn der ver-meintliche Link war gar keiner. Auch sonstist die Typographie vieler Seiten mangel-haft, da die Gestalter die Eigenheiten desMediums Web nicht beachtet haben.
So machen Sie’s besser: Unterstreichungensollten Sie ausschließlich für Hyperlinks re-servieren – das ist eine eiserne Regel. Aberauch die Formate kursiv oder fett wirkenim Web anders als im Druck: Am Bild-schirm sehen „schräg gestellte“ Textpassa-gen längst nicht so gut aus wie auf dem Pa-pier. Auf Web-Seiten eignet sich zur opti-schen Hervorhebung eher das Format fett.
Im Druck wiederum besitzen die so ge-nannten Serifenschriften (etwa Times, Ga-
Von Johann-Christian Hanke
098-101 209 02.12.2003 14:38 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004
Tipps & TricksPGrundlagen pWorkshops PUtilities WorkshopsPpPP S. 98 – S. 101
99
ramond) einen hohen Stellenwert. Ihrekleinen „Füßchen“ betonen die Leselinieund erleichtern das Lesen. Auf Web-Seitendagegen sind sachliche, serifenlose Schrif-ten (zum Beispiel Arial, Helvetica) angesagt,da sie auf den Bildschirmen besser zur Gel-tung kommen (2 Abbildung oben).
Druckmedien und das Web gehen auchmit dem Thema Farbe anders um: Wäh-rend etwa die meisten Bücher aus Kosten-gründen in Schwarzweiß gedruckt werdenmüssen, sollten Sie Ihre „Bildschirmtexte“ruhig durch Farben auflockern.
5. Ein einheitliches Erscheinungsbildschaffen
Negativ-Beispiel: Der Zustand so manchenWeb-Auftritts lässt sich nur als „gestalteri-sches Chaos“ bezeichnen: Das Layout dereinzelnen Unterseiten ist nicht aufeinan-der abgestimmt. Manche Seiten öffnen sichin einem Extra-Fenster, andere dagegennicht. Beim Surfen verlieren Besucherleicht die Orientierung und erkennennicht, dass sie sich innerhalb von ein undderselben Präsenz bewegen.
So machen Sie’s besser: Achten Sie auf eineinheitliches Erscheinungsbild, auf Ihr sogenanntes Corporate Design. Sie müssenkein Grafiker sein, um das zu erreichen. Siebrauchen nur Folgendes zu beherzigen:Verwenden Sie überall eine einheitlicheSchriftart. Nutzen Sie aufeinander abge-stimmte Farben. Schon das auf jeder Seiteplatzierte Logo oder die einheitliche Navi-gationsleiste sorgen dafür, dass der Benut-zer Ihren Web-Auftritt als Ganzes erfasst.
6. Navigationspfad angeben
Negativ-Beispiel: Nicht im-mer ist bei Websites klar,„wo oben und unten ist“.Dann kann es leicht passie-ren, dass Besucher sich hoff-nungslos in einer Kategorieverirren und schwer zuübergeordneten Kategorienzurückfinden.
So machen Sie’s besser: EineLösung heißt BreadcrumbNavigation (deutsch „Brot-krumennavigation“). FügenSie auf jeder Seite einen ausHyperlinks aufgebauten,hierarchischen Navigations-pfad ein. Dieser kann etwa
so aussehen: „Home – Musik – Jazz“. ZeigenSie Ihren Besuchern also die jeweils über-geordneten Kategorien und zum Schlussdie aktuelle Position. So können sie sichbesser orientieren (2 Abbildung unten).Solch ein Navigationspfad lässt sich dyna-misch mit Hilfe einer Programmierspracheerzeugen, aber auch „von Hand“ auf jedereinzelnen HTML-Seite einbauen. Eine an-dere mögliche Lösung: Heben Sie die ent-sprechende Position in Navigationsleistenoptisch hervor, zum Beispiel durch ver-schiedenfarbige „Registerzungen“.
7. Per „Home“-Logo zur Startseitezurückführen
Negativ-Beispiel: Sie befinden sich auf ei-ner Web-Präsenz und möchten von Unter-seiten möglichst schnell wieder zur Start-seite zurück. Doch der „Home“-Link ist ver-
steckt, und der Navigationspfad ist nichtbesonders „klickfreundlich“ platziert.
So machen Sie’s besser: Platzieren Sie aufjeder Unterseite eine Grafik in der linkenoberen Ecke, die Sie in einen Hyperlinkumwandeln. Dieser Hyperlink führt stetszur Startseite zurück (2Abbildung auf derfolgenden Seite oben). Der Einsatz solch ei-nes „Home-Logos“ ist längst zu einem Mussfür professionelle Websites geworden. Ha-ben Sie sich einmal daran gewöhnt, fallenIhnen jene Seiten umso unangenehmerauf, die diese Technik nicht verwenden.
Inhalt Seite
1. Zielgruppenspezifische und aktuelle Inhalte bieten 98
2. Texte sorgfältig auswählen und redigieren 98
3. Texte gezielt fürs Web aufbereiten 984. Angemessene Typographie für den
Bildschirm beachten 985. Ein einheitliches Erscheinungsbild
schaffen 996. Navigationspfad angeben 997. Per „Home“-Logo zur Startseite
zurück führen 998. Tagline – den Zweck der Seite
beschreiben 1009. Die rechte obere Ecke für ein
Suchen-Feld nutzen 10010. Auf Frames verzichten 10011. Hyperlinks richtig kennzeichnen 10012. Alternativtexte für Grafiken nutzen 10013. Den richtigen Seitentitel wählen 10114. <Back>-Button nicht deaktivieren 10115. Korrekte Grafiknamen wählen 101
Kurze Absätze, Farben, Symbole und sachliche Schrift: Hier sind die Texte
optimal für die Darstellung am Bildschirm aufbereitet (Punkte 3 und 4)
Orientierung leicht gemacht: Ein Navigationspfad wie bei Web.de führt schnell zurück zu übergeordneten Katego-
rien. Der Besucher weiß jederzeit, wo innerhalb der umfangreichen Website er sich gerade befindet (Punkt 6)
098-101 209 02.12.2003 14:38 Uhr Seite 3
Workshops Tipps & Tricks
PC-WELT SONDERHEFT 2/2004100
PPpP S. 98 – S. 101
PGrundlagen pWorkshops PUtilities
8. Tagline – den Zweck der Seite beschreiben
Negativ-Beispiel: Sie gelangen durch Zufallauf eine bestimmte Seite. Worum es geht,lässt sich aber nicht auf Anhieb verstehen.Auf vielen Seiten müssen Sie das Thema er-raten. Die entsprechenden aussagekräfti-gen Informationen werden Ihnen auf derStartseite vorenthalten, die Site-Betreiberfallen gleich mit der Tür ins Haus.
So machen Sie’s besser: Beschreiben Sieden Zweck Ihrer Seite. Das gelingt bei-spielsweise durch einen gut sichtbarenknappen Text, den Sie auf der Startseiteplatzieren (2Abbildung unten). Der ameri-kanische Usability-Experte Jakob Nielsenredet von einer Tagline. Solch ein „Slogan“oder „Untertitel“ hilft dem Besucher beider Orientierung. Verzichten Sie auf solcheine Tagline nur dann, wenn Sie oder IhreFirma so bekannt sind, dass jeder weiß,worum es bei Ihnen geht.
9. Die rechte obere Ecke für ein Suchen-Feld nutzen
Negativ-Beispiel: Bei vielen Seiten werdenSie von der Wucht der Infos geradezu er-
schlagen. Die Suchfunktionmuss ran. Doch manchmalist es ausgerechnet das Su-chen-Feld, welches die Site-Macher besonders gut vorihren Besuchern versteckthaben.
So machen Sie’s besser: Plat-zieren Sie das Suchen-Feldan prominenter Stelle, zumBeispiel in der rechten oberen Ecke (2Abbildung
rechts unten). Diese Stelle nehmen die Be-sucher am schnellsten wahr. Deshalb plat-zieren zahlreiche Webmaster an dieserStelle übrigens nicht nur das Suchen-Feld,sondern häufig auch einen Link zu einerHilfeseite. Schließlich ist das „Hilfe“-Menüauch bei den meisten Programmen rechtsoben zu finden.
10. Auf Framesverzichten
Negativ-Beispiel: Sie gelan-gen durch den direkten Linkeiner Suchmaschine auf ei-ne interessante Web-Seite.Allerdings vermissen Sie jeg-liche Navigationsmöglich-keit. Der Überblick über dieweitere Struktur der Prä-senz bleibt Ihnen verwehrt.Der Grund: Sie sind auf die isolierte Unterseite ei-ner Frame-Struktur gelangt.
So machen Sie’s besser: Verzichten Sie ganzeinfach auf Frames! Bei Frames wird die Sei-te in mehrere (zu) kleine Unterseiten „ge-stückelt“, die teilweise individuell gescrolltwerden müssen. Das Lesen wird dadurch
gerade auf kleinen Bildschirmen zur Qual.Mit einem Verzicht auf Frames befinden Siesich übrigens in guter Gesellschaft, denndie vor Jahren so hochgelobten Frames fin-den heutzutage immer weniger Anhänger.Selbst „Frame-Vorreiter“ T-Online hat vorwenigen Monaten seine ehemals frame-ge-steuerte Site in eine frame-freie Varianteumgewandelt (2 große Abbildung am An-fang dieses Beitrags). Auch die Firma DataBecker beispielsweise verzichtet auf ihrerWebsite seit einiger Zeit auf die „Rahmen-Technologie“.
11. Hyperlinks richtig kennzeichnen
Negativ-Beispiel: Auf manchen Seiten er-kennen Sie nicht, ob sich hinter einer Text-passage oder einer Grafik ein Hyperlink be-findet. Nichts deutet auf den weiterführen-den Querverweis hin.
So machen Sie’s besser: Heben Sie Hyper-links optisch hervor. Das kann zum einendurch das klassische Blau und die typischeUnterstreichung erfolgen. Zum anderenhelfen auch kleine Grafiken oder Symboleals Eyecatcher (2 Abbildung auf der rech-ten Seite oben). Das zusätzliche Hervorhe-ben durch Mouseover-Effekte kann den„Link-Charakter“ erhöhen.
Wählen Sie sinnvolle Texte für die Link-Beschreibung. Anstatt „Weiterführende In-formationen zum Thema Usability findenSie hier“ zu schreiben, fomulieren Sie bes-ser: „Hier finden Sie weiterführende Infor-mationen zum Thema Usability“.
12. Alternativtexte für Grafiken nutzen
Negativ-Beispiel: Auf vielen Seiten wartenSie oft lange auf den Aufbau eines Bildes,ohne vorher zu erfahren, was sich dahinterverbirgt. Vielleicht lohnt sich das Warten jagar nicht? Besonders ärgerlich ist es, wenn
PC-WELT-Site: Egal, wo Sie sich gerade befinden – ein Klick auf das „Home-
Logo“ in der linken oberen Ecke führt stets zurück zur Startseite (Punkt 7)
Blickfang: Die rechte obere Ecke wird von den Besuchern bevorzugt. Des-
halb platzieren viele Site-Betreiber Suchen-Felder an dieser Stelle (Punkt 9)
Klare Ansage: Wählen Sie einen aussagekräftigen Slogan (Tagline) für Ihre Seite. Die Abbildung zeigt die Tagline
des Kommunikations-Designers Thomas Wirth auf www.kommdesign.de (Punkt 8)
098-101 209 02.12.2003 14:39 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 101
Tipps & TricksPGrundlagen pWorkshops PUtilities WorkshopsPPPp S. 98 – S. 101
Buttons durch Grafiken dargestellt werden.In diesen Fällen können Sie erst klicken,wenn der Button voll geladen ist.
So machen Sie’s besser: Verzichten Sie nieauf die Alternativtexte für Ihre Grafiken.Geben Sie den Abbildungen einen beschrei-benden Text mit auf den Weg. Dieser istschon dann sichtbar, wenn die Grafik nochnicht geladen wurde. Viele Browser zeigendiesen Alternativtext auch als Tooltip an,wenn Sie den Mauszeiger über einer Grafik„parken“. Auch Suchmaschinen könnensich am Alternativtext orientieren, da reineGrafiken nicht indiziert werden. Fügen Sieden Alternativtext mithilfe des Attributs„alt“ in den Tag „<img>“ ein (mehr zuHTML-Tags lesen Sie im 2 Beitrag ab Seite34). Schreiben Sie zum Beispiel innerhalbvon „<img>“:
CODE: alt="Zum Bestellformular"
13. Den richtigen Seitentitel wählen
Negativ-Beispiel: Viele Seiten werden vonSuchmaschinen nicht richtig präsentiert.Statt einer sinnvollen Überschrift findenSie den Text „Kein Titel“, „Untitled Docu-ment“, „Neue Seite 2“ oder etwas ähnlichNichtssagendes vor (2 Abbildung unten).
So machen Sie’s besser: Vergessen Sie nie ei-nen aussagekräftigen und beschreibendenSeitentitel. Daraus erzeugen die meistenSuchmaschinen die Überschrift der Fund-stelle. Schuld am häufigen Vergessen sinddie HTML-Editoren. Sie setzen oft uninfor-mative Platzhalter, ohne Sie über die Wich-tigkeit des Seitentitels zu informieren. DenSeitentitel platzieren Sie im Kopf des
HTML-Dokuments zwischen den Tags <tit-le></title>. Schreiben Sie beispielsweise:
CODE: <title>Tipps und Tricksfuer Open Office</title>
14. <Back>-Button nichtdeaktivieren
Negativ-Beispiel: Vielleicht ist Ihnen dasauch schon einmal passiert: Sie klicken aufden <Back>-Button Ihres Browsers, weil Sieeine Seite verlassen wollen. Doch das ge-lingt Ihnen nicht – Sie werden zurück aufdiese Seite gezwungen. Schuld ist meist derEinsatz zweifelhafter Javascripts.
So machen Sie’s besser: Vermeiden SieScripts, die den <Back>-Button deaktivierenund somit Besucher in Ihrer Präsenz ge-fangen halten. Ein derartig bevormundeterBesucher kommt so bald nicht wieder.
15. Korrekte Grafiknamen wählen
Negativ-Beispiel: Auf manchen Seiten wer-den Grafiken nicht richtig eingebunden.
Statt dessen erscheinen andieser Stelle lediglich roteKreuze. Oft sind die Site-Be-treiber ratlos, in der Vor-schau hatte alles bestensfunktioniert.
So machen Sie’s besser:Wählen Sie immer nur For-mate, die im Web auch pro-blemlos darstellbar sind.Wir empfehlen entwederGIF oder JGP, das PNG-For-mat können nämlich nochnicht alle Browser darstel-len. Beachten Sie außerdem
die Schreibung der Grafiknamen. Im Un-terschied zu Windows-Dateisystemen un-terscheiden die meisten Webserver sehr pe-nibel zwischen Groß- und Kleinschreibung.Wenn die Grafik „Logo.gif“ heißt, dürfenSie im Verweis also auch nicht „logo.gif“schreiben.
Leerzeichen, Umlaute und andere Son-derzeichen haben in Grafik-Dateinamengrundsätzlich nichts zu suchen. Wenn Siesolche solche Zeichen trotzdem einsetzen,führt das nämlich in vielen Fällen dazu,dass die Abbildung in manchen Internet-Browsern nicht korrekt angezeigt werdenkann.
Mehr Infos
Internet
Der Usability-Papst Jakob Nielsen ist unter
www.useit.com im Internet, seine berühmte
Kolumne „Alertbox“ steht unter www.usabili
ty.ch/alertbox/main.htm in deutscher Überset-
zung zur Verfügung.
Die Themen Psychologie, Ergonomie, Usability
und Kommunikation behandelt der Kommuni-
kations-Designer Thomas Wirth auf seiner Web-
site www.kommdesign.de.
Bücher
Jakob Nielsen, „Homepage Usability. 50 ent-
tarnte Websites“, Markt+Technik, www.mut.de,
318 Seiten, ISBN: 3 827 26290 9, 49,95 Euro.
Der Usability-Experte Nielsen analysiert in die-
sem Buch 50 internationale Sites.
Thomas Wirth: „Missing Links. Über gutes Web-
design“, Hanser, www.hanser.de, 300 Seiten,
ISBN: 3 446 22009 7, 49,90 Euro.
Das flüssig zu lesende Buch zur Website-Usabi-
lity bietet viele Praxisbeispiele.
Hervorhebung: Heben Sie Hyperlinks optisch hervor. Das kann zum einen durch das klassische Blau und die typi-
sche Unterstreichung erfolgen. Zum anderen helfen auch kleine Symbole, wie hier unter www.pcwelt.de (Punkt 11)
Unverzichtbar: Geben Sie Ihrer Seite einen aussagekräftigen Seitentitel,
damit Suchmaschinen ihn als Überschrift nutzen können (Punkt 13)
Je professioneller die Homepage, desto höher die Anforderungenan den Web-Editor. Wir haben Dreamweaver MX, Frontpage 2002und Golive 6 getestet und auch schon ihre Nachfolger betrachtet.
Von Johann-Christian Hanke
Test: Web-Editoren
UTIL
ITIE
S
Golive, Dreamweaver und Frontpagesind die drei führenden HTML-Editoren aufdem Markt. Sie stehen in dem Ruf, schlan-ken Quellcode zu erzeugen und vorhande-ne Dokumente nicht zu verändern. Sie sindweniger für Anfänger, sondern vorrangigfür HTML-Profis und Entwickler konzipiert.
Wir haben die drei einem gründlichenPraxistest unterzogen und informieren Sieüber Stärken und Schwächen der Testkan-didaten. Zusätzlich werfen wir auch schoneinen Blick auf ihre Nachfolgeversionen.
1. Das können alle: Bearbeiten im Layout
Auch anspruchsvolle Web-Arbeiter schät-zen Komfort. Mit allen drei Testkandidatenkönnen Sie Ihre Web-Seiten deshalb kom-
plett in einer Layoutansicht erstellen –ganz ohne HTML-Kenntnisse. Frontpagebietet Ihnen dabei die gewohnt kompakteUmgebung aus Microsoft Office. Die ein-zelnen Funktionen erreichen Sie über Be-fehle oder Symbolleisten.
In Dreamweaver und Golive müssen Siesich mit einem Dokumentfenster ausein-andersetzen, um das herum eine mehroder minder große Flut an Schwebefens-tern angeordnet wird. Das wirkt auf den ers-ten Blick ziemlich unübersichtlich, aberman gewöhnt sich schnell an die entspre-chende Arbeitsweise.
Dabei kommt zwei Bedienelementen be-ziehungsweise Paletten die größte Bedeu-tung zu. Sie heißen in Dreamweaver „Ein-fügen“ und „Eigenschaften“, in Golive „Ob-
102 TEST: WEB-EDITORENProfi-Web-Editoren
110 HTML-EDITORENPreiswerte Alternativen
114 LINKCHECKERSo finden Sie tote Links
116 TOP-GRAFIK-TOOLS12 Programme vorgestellt
120 HOMEPAGE-TOOLS18 Spezial-Utilities
126 FTP-PROGRAMMEDie besten FTP-Tools
UTILITIES
102-109 401 02.12.2003 13:22 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 103
Grundkurs I: DiePGrundlagen PWorkshops pUtilities GrundlagenPPPpPPPP S. xxx – S. xxx
jekt-Palette“ und „Eigenschaften-Inspek-tor“. Die Philosophie ist klar: Mit dem ei-nen Bedienelement fügen Sie die Objekteein, mit dem anderen bearbeiten Sie sie.
2. Wichtig für Profis: HTML-Ansicht
Ein professioneller HTML-Editor mussselbstverständlich mehr können als nurWeb-Seiten generieren. Dieser Anforderung
entsprechend kommen alle drei Program-me mit einer Code-Ansicht. Damit sehenSie sofort, was ein per Schaltfläche bezie-hungsweise Symbol eingefügtes Objekt imHTML-Quellcode bewirkt.
Aber auch die umgekehrte Richtung istmöglich und für ein flüssiges Arbeitenwichtig: Jede Änderung im Quellcode wird– soweit möglich – sofort im Layout umge-setzt (2 Abbildung unten).
3. Drei Programme –drei unterschiedliche Ansätze
Dreamweaver, Frontpage und Golive ver-folgen drei unterschiedliche Ansätze.Grund: Ihre Entwickler sprechen damitdrei verschiedene Anwendergruppen an.
DreamweaverDas Programm hat von Anfang an denQuelltextkenner glücklich gemacht. Schonin der Version 1 von 1997 konnte man vonHand erstellte Seiten bedenkenlos dem„Traumweber“ – so die deutsche Bedeu-tung des Namens – anvertrauen, ohne dassdem Quellcode ein Härchen gekrümmtwurde. Dieser Tradition ist das Programmbis heute treu geblieben.
GoliveIm Lager der Mac-Anhänger eroberte zu derZeit das „Cyberstudio“, später umbenanntin „Golive“, die Herzen der Web-Arbeiterim Sturm. Ganz im Adobe-Stil wendet sichGolive an Designer und Layouter, die inPhotoshop und Indesign zu Hause sind.
Inhalt Seite
1. Das können alle: Bearbeiten im Layout 102
2. Wichtig für Profis: HTML-Ansicht 103
3. Drei Programme – drei unterschiedliche Ansätze 103
4. Selbstverständlichkeiten: Site-Verwaltung und Upload-Funktion 104
Das zeigt sich vor allem an der Bedienung,die fast ausschließlich auf die Maus setzt.Inzwischen gelingt es Golive immer besser,auch die Quellcode-orientierten Anwenderzufrieden zu stellen.
FrontpageFrontpage zielte von Beginn an auf denambitionierten Einsteiger. Wer aber seinenVorstellungen gemäß aus dem von Micro-soft vorgegebenen Code-Schema ausbre-chen wollte, hatte schlechte Karten.
Erst seit Version 2000 widersetzt sichdas Programm nicht mehr den Verände-rungen im Quellcode, und langsamschließt Frontpage zu den professionellenWeb-Editoren auf. Wer jedoch das volle Leistungsspektrum von Frontpage nutzenmöchte, benötigt einen Dienstleister mit
den Frontpage-Server-Erwei-terungen beziehungsweiseTeam Services. Mehr dazu le-sen Sie im 2 Kasten „DieFrontpage-Server-Erweiterun-gen“ unten links auf dieserSeite. Problematisch warund ist allerdings immernoch die Code-Qualität, dienicht immer allen strengenMaßstäben genügt (2neben-stehende Abbildung).
4. Selbstverständlichkeiten: Site-Verwaltung und Upload-Funktion
Alle drei Programme bieten eine leistungs-fähige Site-Verwaltung. Die Handhabungder HTML-Dateien, Stilvorlagen und Grafi-ken wird damit einfach. Spüren Sie fehler-hafte Hyperlinks auf. Blenden Sie eine gra-fische Site-Übersicht ein, von der aus Sie je-des Dokument bearbeiten können (2 Ab-bildung unten). Fügen Sie Objekte mit Drag& Drop in Ihre Web-Seiten ein. Mit dabei istselbstverständlich auch ein Tool zum Hoch-laden der Seiten auf den Webserver.
5. Vorschau: Das bringen die neuen Versionen
Während unserer Testphase im Spätherbst2003 waren die Hersteller gerade dabei,neue Versionen auf den Markt zu bringen.Wir haben uns diese angesehen, beziehensie aber nicht in die Testurteile ein, weil essich um Vorabprodukte handelt.
Dreamweaver MX 2004Dreamweaver MX 2004 (Demo auf CHeft-CD) wartet mit einer integrierten Prüfungfür „Browser-Verträglich-keit“ auf. Bestimmte, auf diejeweiligen Browser bezoge-ne „Syntaxfehler“ werdenauf Wunsch rot unterkrin-gelt und lassen sich sofortberichtigen. Hinzugekom-men sind Code-Referenzenfür PHP und SQL. Bedienungund Oberfläche wurden nurbehutsam überarbeitet:Nach dem Aufruf präsen-tiert Dreamweaver nun eineattraktive Startseite. Vonhier aus öffnen Sie Doku-mente, erstellen neue oderrufen das Lernprogrammauf. Neu ist die Symbolleiste„Common“ („Allgemein“),
die nur die wichtigsten Befehle bietet, bei-spielsweise zum Einfügen von Grafikenund Tabellen. So müssen Sie nicht erst diejeweilige „Untergruppe“ aufrufen.
Frontpage 2003Auch Frontpage 2003 geht stärker aufQuelltextfreunde ein. Neu ist die in der ge-testeten Version noch schmerzlich vermiss-te „geteilte Ansicht“. Das Wechseln zwi-schen Code und Design wird einfacher.
Auch die Funktion „Layouttabelle“ zureinfacheren Tabellenzuweisung ist neu –hier war Dreamweaver Vorbild (2 Abbil-dung auf der rechten Seite oben). In punk-to Code-Qualität notierten wir für die unsvorliegende Beta-Version die gleichen Kri-tikpunkte, die wir in unserem Test beiFrontpage 2002 festgestellt haben.
Aufgebläht: Frontpage erweitert den HTML-Kopf ohne Zustimmung des
Anwenders mit eigenen Meta-Tags. Das ist nicht zu ändern (Punkt 3)
Die Frontpage-Server-ErweiterungenWenn Sie die Möglichkeiten von Frontpageoptimal ausnutzen möchten, brauchen Sieeinen Dienstleister, der die Frontpage-Ser-ver-Erweiterungen oder neuerdings auchTeam Services anbietet. (Team Services istpraktisch die neue Version der Frontpage-Server-Erweiterungen mit erweitertemFunktionsumfang.) Das sind spezielle Er-weiterungen auf dem Webserver, die aufFrontpage-Sites abgestimmt wurden. Erstdadurch wird das Hochladen der Seitenmit Frontpage sehr einfach. Und erst dannkönnen Sie Gästebuch, Besucherzähler,Suchmaschine und anderes mehr einbin-den. Vor allem Datenbank-gestützte Sei-ten benötigen diese Microsoft-Erweite-rung auf dem Webserver. Das schränkt Siein Ihrer Dienstleisterwahl ein, da dieMehrzahl der Webhoster den frei verfüg-baren Apache-Webserver einsetzt.
Keine Konkurrenz: Netobjects FusionDer Hersteller von Netobjects Fusion wirbtdamit, dass der Anwender kein HTML kön-nen muss. Entsprechend ist die Softwareein typischer Generator, der praktisch kei-ne Änderungen von Hand im Quellcodezulässt. Fusion wendet sich damit an Ge-legenheits-Homepage-Bastler und Web-worker, die ohne viel Mühe eine gut aus-sehende Site generieren möchten. FürProfis ist dieser Ansatz jedoch problema-tisch, denn sie brauchen an jeder Stelledie volle Kontrolle über den HTML-Quell-code – und genau das bieten Dreamwea-ver, Golive und Frontpage.
Überblick: Golive verfügt über eine leistungsfähige Site-Verwaltung. Die
Navigationsansicht (vorne) zeigt die Struktur der Website (Punkt 4)
102-109 401 02.12.2003 13:23 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 105
Profi-Web-EditorenPGrundlagen PWorkshops pUtilities UtilitiesPPPpPPPP S. 102 – S. 109
Golive CSDie für Dezember 2003 angekündigte neueGolive-Version (CS steht für Creative Suite)integriert die einzelnen Produkte Acrobat,Photoshop, Illustrator und Indesign stär-ker. Golive erstellt aus Web-Seiten PDF-Da-teien, importiert Photoshop- und Illustra-tor-Dokumente und wartet mit etlichen De-tailverbesserungen in Bezug auf CSS undXML auf. Nicht verbessert wurde offenbardie katastrophale Rückgängig-Funktion (2 Einzeltestbericht auf Seite 108).
Dafür gab die Qualität des Quellcodeskeinen Anlass zur Kritik mehr. Erheblichverbessert wurde der Stylesheet-Editor: Hiersind alle Elemente endlich übersichtlichinnerhalb eines Fensters angeordnet. Mehrnoch: Das neue Register „Source“ (Quell-code) ermöglicht sogar das direkte Arbei-ten im CSS-Quellcode.
Von Dreamweaver abgeschaut: Die neueste Frontpage-Version 2003 kennt Layout-Tabellen und eine geteilte
Ansicht. Das Wechseln zwischen Code und Design wird einfacher (Punkt 5)
Professionelle Web-Editoren: Wie wir testenDie PC-Welt untersucht HTML-Editoren nachmehreren Kriterien. Dabei gewichten wir so:
LeistungDie Leistung testen wir anhand eines kleinenProjekts: Wir planen eine anspruchsvoll auf-gemachte HTML-Musterseite, die wir Schrittfür Schritt zusammensetzen. Sie beinhaltet:1. Tabellenlayout mit verschachtelten Tabellen(Spaltensatz); 2. Grafiken (auch als Hinter-grund); 3. selbst erstellte Stylesheets (CSS)
und 4. Formulardesign. Dabei prüfen wir vorallem, wie das Zusammenspiel zwischen Lay-out-Ansicht und Quellcode funktioniert.
BedienungIst die Bedienung einfach, intuitiv oder zu-mindest logisch? Stehen dem Anwender vieleVorlagen und Assistenten zur Verfügung?
Qualität des QuellcodesHält der Quellcode der von unseren Prüflingenerzeugten Musterseiten der offiziellen Prü-fung durch das World Wide Web Consortium(W3C) stand (2 Abbildung unten rechts)? Wirtesten mit dem Online-Prüfprogramm desW3C unter http://validator. w3.org. Als Ver-gleich ziehen wir die in Handarbeit erstelltemustergültige Version unserer Seite heran (2 Abbildung unten links; Download auf derWebsite des Testers unter www.jchanke.de/pcwelt).
Site-VerwaltungHier prüfen wir, wie einfach oder kompliziertdie Verwaltung komplexer Sites ist, die derTester zum Beispiel für seine Bücher erstellthat. Dazu zählt auch der Upload, das Hoch-laden der Seiten.
SpezialfunktionenUnsere Testkandidaten warten mit einer Füllevon Spezialfunktionen auf. Das geht von derUnterstützung dynamischer Projekte mitDHTML bis hin zur Einbindung von Flash-Animationen. Negativ bewerten wir, wenn einTool Zusatzfunktionen nur dann anbietet,wenn der Anwender einen bestimmtenWebserver verwendet.
InstallationDie Software sollte sich einfach und problem-los installieren (und de-installieren) lassen.
DokumentationVon einem professionellen Web-Editor istnicht zu erwarten, dass er selbsterklärend ist.Was taugt die mitgelieferte Hilfe-Funktion?Bekommt der Nutzer weiterführende Hinweisezu HTML & Co.?
Preis-Leistungs-VerhältnisWir überprüfen, ob das Verhältnis zwischenVerkaufspreis und Leistungsspektrum in Ord-nung ist. Als Verkaufspreis gilt der von uns re-cherchierte Marktpreis der Vollversion.
Die manuell erstellte Referenzseite: Die Testkandida-
ten müssen diese möglichst fehlerfrei nachbilden
Der HTML-Test des World Wide Web-Consortiums:
Bei validator.w3.org fallen viele Web-Seiten durch
Dreamweaver MX überzeugt als an-spruchsvolle Entwicklungsumgebung fürQuellcode-Kenner und erstellt sauberenHTML-Code.
BedienungWer in fünf Minuten eine Homepage zu-sammenklicken möchte, wird enttäuscht:Dreamweaver ist weder einfach noch in-tuitiv zu bedienen. Doch wenn erst einmalalle schwebenden Fenster gebändigt sind,erscheint die Bedienung logisch.
Die Bedienfeldgruppe „Einfügen“ hilftbeim Einfügen der gewünschten Elemente,über das „Eigenschaften“-Fenster lassensich die entsprechenden Attribute undWerte nachbearbeiten.
Der HTML-Profi erkennt sofort, welcheAttribute und Werte bei der markierten Ta-belle oder beim Bild eingestellt sind.Grund: Dreamweaver bildet bei der Dar-stellung dieser Eigenschaften exakt dieMöglichkeiten der jeweiligen HTML-Tagsab. Überhaupt ist die HTML-Unterstützunghervorragend, das zeigt die auf Wunschteilbare Ansicht. Im oberen Bereich wirdder Code eingeblendet, unten arbeiten Sieam Entwurf und behalten so die volle Kon-trolle über den Quellcode.
TastaturbefehleDank vieler Tastaturbefehle geht die Arbeitzügig voran: <Strg>-<F3> öffnet bezie-hungsweise schließt das „Eigenschaften“-Fenster, mit <F8> kommt die Site-Ansichtauf den Bildschirm. Fast jeder Befehl lässtsich mit einer schnellen Tastenkombinati-on ansteuern. Die „Rückgängig-Funktion“ist hervorragend, alle Schritte lassen sich ineinem Verlaufsfenster sichtbar machenund sogar einzeln zurückrufen. Dabei kön-nen Sie ausgewählte Schritte sogar als eineArt „Sammelbefehl“ abspeichern.
MusterprojektDas Einrichten der verschachtelten Tabel-len allein in der Layout-Ansicht war zwarschwierig, aber es gelang: Die Inline-CSS-Anweisungen für die Hintergrundgrafikenmussten wir von Hand im Quellcode ein-tragen. Grafiken lassen sich schnell undreibungslos einfügen. Der Klick auf die ent-sprechende Schaltfläche oder das Tasten-kürzel <Strg>-<Alt>-<I> genügt.
Die CSS-Unterstützung ist perfekt undmacht Spaß: Selbst das Erstellen einer se-paraten CSS-Datei und auch das Einbindender Datei in HTML klappte auf Anhieb. AufWunsch hilft ein separates Design-Fenster
beim Erstellen der Regeln.Auch das Erstellen des For-mulars wurde zum Kinder-spiel. Selbst durch das nach-trägliche Einfügen des For-mularbereichs ließ sich dasProgramm nicht aus der Ru-he bringen. Die zuvor er-zeugte Tabelle zum Ausrich-ten der einzelnen Formular-felder konnten wir ohneProbleme nachträglich indiesen Bereich verschieben.
HTML-UnterstützungDer Wechsel zwischen Lay-out- und HTML-Ansicht ge-lingt reibungslos, die Ände-rungen werden sofort über-nommen. Kleine Klappme-nüs im übersichtlich einge-färbten Quelltext helfen, dierichtigen Befehle und Attri-bute zu finden. Wer bei ei-nem Befehl nicht weiter
Dreamweaver MX
Dreamweaver MX
PREIS: 450 Euro
www.macromedia.com/de
SYSTEMVORAUSSETZUNGENBETRIEBSSYSTEME Windows 98/ME, 2000, XP, Mac-OS
PROZESSOR Pentium II 300
RAM 64 MB
AUFLÖSUNG 1024 x 768 Pixel
PLATTENPLATZ 275 MB
GESAMTNOTE 1,5GESAMTERGEBNIS
Spezial-funktionen
(10%) 1,2
Installation
(5%) 1,2
Site-Verwaltung
(10%) 2,0
Preis-Leistungs-Verhältnis
(5%) 3,0
Leistung
(25%) 1,0
Bedienung
(20%) 2,2
Qualität desQuellcodes
(20%) 1,0
weiß, verwendet einfach die Tastenkombi-nation <Shift>-<F1>: Schon erscheint einReferenz-Fensterchen, das genau den aktu-ellen HTML-Befehl erklärt. Diese „Online-Code-Referenzen“ stammen aus Büchernder Verlage O’Reilly und Wrox.
HTML-QuellcodeDreamweaver war und ist berühmt für dieQualität des im Hintergrund entstehendenQuellcodes. Bei unserem Beispielprojektwurde nach Setzen aller Grafik-Alternativ-texte der Code als gültig validiert. Dabeikam das Programm sogar mit weniger Zei-len aus als das handgeschriebene Muster-beispiel. Ebenfalls überzeugen kann dereingebaute HTML-Markup-Test („Datei, Sei-te überprüfen, Markup“). Dieser erkannteunseren im Beispiel absichtlich doppelt ge-setzten Ausschalt-Tag </p></p>.
FazitDreamweaver wendet sich vorrangig an en-gagierte Quellcode-Kenner, lässt sich aberauch von Einsteigern nach einer gewissenEinarbeitungszeit benutzen. Die Bedie-nung ist logisch. Das Programm punktetdurch hervorragenden HTML-Code und dievielen mitgelieferten Referenzen.
Dokumentation
(5%) 1,2
Das Elemente-Fenster von Dreamweaver: Hier werden Links, Farbschemata,
Grafiken und andere Elemente angezeigt
102-109 401 02.12.2003 13:25 Uhr Seite 6
PC-WELT SONDERHEFT 2/2004 107
Profi-Web-EditorenPGrundlagen PWorkshops pUtilities UtilitiesPPPPPpPP S. 102 – S. 109
Frontpage ist einfach zu bedienen, dochder HTML-Code entspricht nicht immerdem strengen Standard.
Assistenten und StilvorlagenDie Oberfläche im Stil von Microsoft Of-fice ist übersichtlich und dürfte den meis-ten Anwendern daher vertraut vorkom-men. Unzählige Muster-Layouts, Assisten-ten und Stilvorlagen helfen auch dem un-erfahrenen Anwender, in kurzer Zeit eineansprechende Seite zu erstellen.
Wenn Ihr Webserver über die Front-page-Server-Erweiterungen beziehungswei-se die Team Services verfügt (2 Kasten„Frontpage-Server-Erweiterungen), ist auchdas Verwalten, Testen und Hochladen derSeiten komfortabel gelöst. Doch die Frageist, ob diese Funktionen genügen, um imRahmen unseres Praxistests das an-spruchsvolle Musterprojekt umzusetzen.
MusterprojektWir begannen mit dem Erstellen der se-paraten CSS-Datei. Dies gelang dank derentsprechenden CSS-Vorlage sofort. Dochschon beim Zuweisen der Schriftartenzum Selektor „body“ folgte die erste Ent-täuschung über das Programm.
Statt sinnvoller Schriftenbündel wie„Verdana, Arial, Helvetica, sans-serif“band Frontpage jeweils nur eine einzigeSchriftart ein. Zwangsläufig schrieben wirden Rest der Datei von Hand und vermiss-ten dabei die aus Dreamweaver gewohntepraktische CSS-Syntax-Farbhervorhebung.
Das Verlinken auf die CSS-Datei gelangjedoch mühelos. Allerdings störte uns hier-
bei und auch beim Einbinden von Grafi-ken, dass Frontpage immer erst in einem„Web-Ordner“ nach dem Objekt sucht. Hin-tergrund: Das Programm erwartet, dassder Nutzer zuerst ein „Web“ einrichtet,aber das haben wir uns bei diesem kleinenProjekt erspart.
Tabellen formatierenDie Schwierigkeiten setzten sich beim Er-stellen der geschachtelten Tabellenkon-struktion fort. Erst nachdem automatischeingebundene CSS-Attribute entfernt wor-den waren, kam der Schatteneffekt deräußeren Tabelle zur Geltung. Insgesamtfiel uns folgender Widerspruch auf: DasEinfügen von Objekten – ganz gleich, obTabellen oder Grafiken – ist sehr einfach.Das Nachbearbeiten jedoch entwickelt sichzum Zeit raubenden Geduldsspiel. Der sowichtige Alternativtext bei Grafiken wurdezum Beispiel in ein Unterregister des Fens-ters „Bildeigenschaften“ verbannt.
Eine weitere Schwäche: Die von uns inHandarbeit geschriebenen freien CSS-Stilezeigte Frontpage nicht an. Und auch die Ar-beit im Quelltext ist kein Vergnügen: Diegeteilte Ansicht fehlt. In Frontpage 2002lässt sich lediglich zwischen den Registern„Normal“ und „HTML“ hin- und herschal-ten – so verliert man als Anwender leichtden Überblick über seine Position.
Auch sonst ist Frontpage nicht flexibel:Das Verschieben der Formulartabelle inden absichtlich hinterher eingefügten For-mularbereich zerstörte das gesamte Lay-out. Zum Glück funktionierte die Rück-gängig-Funktion.
Frontpage 2002
Frontpage 2002
PREIS: 200 Euro
www.microsoft.de
SYSTEMVORAUSSETZUNGENBETRIEBSSYSTEME Windows 98/ME, 2000, XP
PROZESSOR Pentium I 133
RAM 64 MB
AUFLÖSUNG 800 x 600 Pixel
PLATTENPLATZ 180 MB
GESAMTNOTE 2,2GESAMTERGEBNIS
HTML-QuellcodeBeim Test auf validator.w3.org (2 Kasten „Pro-fessionelle Web-Editoren: Wie wir testen“)fiel die von Frontpage generierte Seite mitPauken und Trompeten durch. Der einfa-che Grund: Die Dokumenttyp-Deklarationfehlte.
Aber auch nachdem wir diese von Handeingesetzt hatten, war das Prüfprogrammdes World Wide Web Consortiums (W3C)nicht zufrieden – das Attribut „borderco-lor“ entspricht nicht dem HTML-4-Stan-dard. Wer validen Code wünscht, kommtums Nachbearbeiten nicht herum.
Nachbearbeiten mussten wir auch denFormularbereich, da unser PHP-Form-mailer mit den „webbot-HTML-Kommenta-ren“ nichts anfangen konnte.
FazitFrontpage 2002 ist das ideale Programmfür den HTML-Einsteiger, der dank attrakti-ver Vorlagen und Designs schnell zu Ergeb-nissen gelangt. Doch bei komplexen Pro-jekten mit intensiver Quelltextarbeit zei-gen sich die Schwächen. Die Qualität desHTML-Codes entspricht nicht den strengenVorgaben des World Wide Web Consorti-ums, das Bearbeiten ist umständlich.
Suchmaschine und Zugriffszähler: Diese Frontpage-Funktionen können Sie nur dann nutzen, wenn Ihr Dienstleis-
ter die Server-Erweiterungen bietet (2 Kasten „Die Frontpage-Server-Erweiterungen“)
Golive wendet sich an Designer undQuellcode-Kenner, die Bedienung ist je-doch oft gewöhnungsbedürftig.
BedienungWer Adobe-Programme kennt, wird sich inGolive sicherlich zu Hause fühlen. Für alleanderen Anwender ist die Einarbeitung einhartes Stück Arbeit.
Zugegeben, für den Anfang gibt es etli-che Assistenten und sogar fix und fertigvorbereitete Musterseiten. Doch spätestensbei „fortgeschrittenen Techniken“ fängt dieSucherei in den Paletten, Registern undKontextmenüs an.
Externe CSS-Datei einbindenDas Anlegen einer externen CSS-Datei (die Details beschreibt der 2 Beitrag ab Sei-te 80) glückte dank des Menüs „Spezial“noch relativ gut. Doch das Einbinden die-ser Datei ist ein Geduldsspiel: Dazu öffnenSie zuerst den CSS-Editor. Dort klicken Siemit der rechten Maustaste, um das Kon-textmenü zu aktivieren. Hier wählen Sieden Befehl „Neuer Link zu externem CSS“.Markieren Sie das Symbol mit dem Text„Empty Reference“. Schließlich suchen Siedas Schwebefenster „Inspector“, um hierdie externe CSS-Datei auszuwählen.
Viele Wege in Golive sind ähnlich ver-schlungen, und Quelltextkennern reißt ir-gendwann der Geduldsfaden. Oft geht esschneller, den Code fix von Hand zu notie-ren. Und so haben wir es auch beim Zuwei-sen unserer Stile gehalten, da etliche dervon uns erstellten Regeln nicht im CSS-Kontextmenü angezeigt wurden.
Zweigeteilte AnsichtDer Quelltextfreund wird dafür allerdingsgut bedient: Neben den Registern „Layout“und „Quellcode“ gibt es auch eine Gliede-rungsansicht. Hier erscheinen die Tags alsaufklappbare Symbolzeichen, die sich so-gar bearbeiten lassen.
Noch besser ist die zweigeteilte Ansicht.Dank dieser Funktionen gelang uns dasweitere Erstellen und Bearbeiten der Tabel-len und Grafiken beinahe spielend. Eineandere Eigenschaft kam uns dabei aller-dings mehrmals in die Quere.
Nach Besuch der Ansicht „Quellcode“leidet das Programm unter einem „Undo-Gedächtnisverlust“. Sprich: Der kompletteVerlauf wird gelöscht, und kein einzigerSchritt lässt sich mehr zurücknehmen.Trotzdem gelang der weitere Testablauf,auch mit dem Einbinden der Formularele-mente gab es keinen Ärger.
SyntaxcheckÜberzeugen konnte der eingebaute Syntax-check, den Sie in der Quellcode-Ansichtdurch Klick auf das „Blitz“-Symbol aktivie-ren. Dieser Check erkannte zuverlässig un-ser im Beispiel absichtlich doppelt gesetz-tes Ausschalt-Tag </p></p>.
Daneben besitzt Golive einen hervorra-genden Hyperlink-Tester und leistungsstar-ke „Site-Tools“ zum Verwalten einer kom-plexen Site. Achten Sie darauf, dass dieSchaltfläche „Link-Warnungen“ eingeras-tet ist. Es handelt sich um den Knopf mitdem Käfersymbol rechts in der Werk-zeugleiste. Nun zeigt Ihnen Golive bei de-fekten Links stets einen roten Rahmen an.
Golive 6
Golive 6
PREIS: 450 Euro
www.adobe.de
SYSTEMVORAUSSETZUNGENBETRIEBSSYSTEME Windows 98/ME, 2000, XP Mac-OS
PROZESSOR Pentium II 400
RAM 96 MB
AUFLÖSUNG 1024 x 768 Pixel
PLATTENPLATZ 320 MB
GESAMTNOTE 2,5GESAMTERGEBNIS
HTML-QuellcodeVon der Qualität des Quellcodes wurdenwir enttäuscht. Das Programm wurde sei-nem Ruf nicht gerecht, die Seite fiel beimstrengen Test des World Wide Web Consor-tiums (W3C) unter validator.w3.org (2 Kasten„Professionelle Web-Editoren: Wie wir tes-ten“) durch. Die Dokumenttyp-Deklarationwar vorhanden, woran lag es dann?
Die Ursache war banal: Die <input>-Formularfelder wurden zusätzlich mitdem Attribut „border“ versehen. Doch die-ses Attribut hat an dieser Stelle absolutnichts verloren.
FazitDer Funktionsumfang ist enorm, die Be-dienung ist aber in vielen Punkten gewöh-nungsbedürftig und umständlich. Golivespricht Layouter und Designer an, die sichin Photoshop zu Hause fühlen, die Mauslieben und den Mac als ihre eigentlicheHeimat ansehen. An Windows gewöhnteTastaturfreunde werden dagegen schwereinsehen, dass es für bestimmte Aktioneneben keine Tastaturbefehle gibt. Das Pro-gramm glänzt durch seine Prüf- und Ver-waltungsfunktionen, erzeugte im Test je-doch keinen absolut sauberen HTML-Code.
HTML-Syntaxprüfung: Überzeugen konnte der eingebaute Syntaxcheck, den Sie in der Quellcode-Ansicht durch
Klick auf das „Blitz“-Symbol aktivieren. Diese Golive-Funktion findet viele Quelltextfehler
Spezial-funktionen
(10%) 1,2
Installation
(5%) 1,2
Site-Verwaltung
(10%) 1,3
Preis-Leistungs-Verhältnis
(5%) 3,0
Leistung
(25%) 2,9
Bedienung
(20%) 3,0
Qualität desQuellcodes
(20%) 3,0
Dokumentation
(5%) 2,7
102-109 401 02.12.2003 13:26 Uhr Seite 9
PC-WELT SONDERHEFT 2/2004 109
Profi-Web-EditorenPGrundlagen PWorkshops pUtilities UtilitiesPPPPPPPp S. 102 – S. 109
Wer Web-Seiten erstellt, kommt um HTML-Editoren nicht herum.Es muss aber nicht zwangsläufig ein teures Produkt sein. Wirstellen Ihnen 12 preiswerte Alternativen und Gratis-Tools vor.
HTML-Editoren light
Das Angebot an Programmen, die Ihnenbeim Erstellen Ihrer Website mehr oderminder effektiv hilfreich unter die Armegreifen, ist überaus vielfältig. So bieten in-zwischen sogar fast alle Textverarbeitungs-und Layout-Programme oder Tools für diedigitale Bildbearbeitung irgendwo einenSchalter, mit dem man als Anwender in dieLage versetzt wird, das eben Produzierte so-fort internet-fähig exportieren zu lassen.
Der dabei im Automatikverfahren er-zeugte Code ist allerdings in den meistenFällen alles andere als optimal. Allenfallsreicht das für geringe Ansprüche und ein-fache private Einsatzzwecke.
Wenn Sie mehr Wert auf ein anspre-chendes Design legen und dabei kein vor-gefertigtes Layout verwenden möchten,dann greifen Sie für optimierten Code zuSpezial-Tools, die als Schnittstelle zwischenText- und Layout-Programm und der ferti-gen Website fungieren.
Sehr hilfreich: Vorschaufunktionen
Sind Sie sich darüber im Klaren, wie diespätere Struktur der Website aussehen sollund welche Inhalte Sie künftig präsentie-
ren wollen, müssen Sie die vorbereitetenTexte und/oder Grafiken internet-tauglichund ansprechend aufbereiten. Als hilfreicherweisen sich dabei – insbesondere für
Neulinge in diesem Metier – Programme,die eine so genannte WYSIWYG-Funktion(What you see is what you get) bieten. Dabeisehen Sie das aktuelle Projekt in einem ex-tra Fenster immer so, wie es die Besucherder Seite später auch sehen werden (2 Ab-bildung rechte Seite). Sie können auf die-sem Wege immer sofort kontrollieren, obÄnderungen sinnvoll sind.
Eine – allerdings nicht so komfortable –Alternative sind Programme, die eine sepa-rate Vorschaufunktion aufweisen. Zwarverfügen Sie damit ebenfalls über eine vi-suelle Kontrolle, Sie müssen diese aber inder Regel immer erst nach Änderungenmanuell starten, was sich, speziell bei Ein-steigern, kontraproduktiv auf die Arbeits-geschwindigkeit auswirkt.
Erfahrene Anwender, die schon einigeÜbung im Umgang mit HTML haben, wer-den auch mit reinen text- beziehungsweisecode-basierten Lösungen klarkommen, vorallem dann, wenn diese mit sinnvollen Ein-gabehilfen und Tastaturkürzeln für häufigverwendete Standard-Tags aufwarten.
Ein Muss: Drag & Drop, Linkcheck, Assistent und Upload-Funktion
Wenn es darum geht, Bilder oder Dateienzu platzieren, ist die Unterstützung vonDrag & Drop ein weiteres nützliches Leis-tungsmerkmal. Hierbei werden die Bilderund Dateien mittels gedrückter Maustasteeinfach in das Dokument gezogen, das Pro-
Von Dirk Wischmann
Netscape Composer: Das einfach zu bedienende Gratis-Tool erlaubt neben der direkten code-basierten Website-
Erstellung auch eine intuitive Vorgehensweise mit Grafik-, Text- und Verknüpfungswerkzeug
110-113 405.qua 02.12.2003 13:12 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 111
Preiswerte HTML-EditorenPGrundlagen PWorkshops pUtilities UtilitiesPpPP S. 110 – S. 113
gramm erstellt daraufhin – nachdem es ei-nige Angaben wie Größe, Position, Text-fluss oder Rahmen abgefragt hat – selb-ständig den dazugehörigen Code.
Ein HTML-Editor sollte zudem eine Link-checker-Funktion integriert haben, außer-dem – für die Verwaltung größerer Web-sites – eine Projektverwaltung und einenPublishing-Assistent sowie eine direkte Upload-Funktion der fertigen Site inklusiveder benötigten Dateien.
Leistungsfähige ToolsFür diesen Mittelweg zwischen komforta-blen Automatiken und direktem Eingriff inden Code gibt es auf dem Markt eine Reihevon Tools, mal mehr, mal weniger teuer.
Dabei bedeutet preiswertoder gar gratis keinesfalls,dass die Programme nichtleistungsfähig sind oderdass sie nur wenige Funktio-nen bieten. Wie Sie auf dennächsten Seiten erfahren,können es einige sogar mitdeutlich teureren Produk-ten aufnehmen.
Viele der preiswerten be-ziehungsweise kostenlosenHTML-Editoren finden Sieübrigens auf CHeft-CD. Die2 Tabelle unten verschafft Ihnen einenÜberblick über die 12 vorgestellten Pro-gramme und gibt Ihnen die wichtigsten In-
formationen zu 14 weiteren Tools. EinenTest professioneller, kommerzieller Web-Editoren finden Sie ab 2 Seite 102.
Web-Editoren: 26 nützliche Tools im ÜberblickProdukt Preis Betriebssysteme Internet Download Sprache
1st Page 2000 2.0 gratis Win 98/ME, NT 4, 2000, XP www.evrsoft.com/download.shtml 4,9 MB Englisch
C Ace HTML 5.08.5 gratis Win 98/ME, NT 4, 2000, XP http://freeware.acehtml.com/download.html 3,7 MB Englisch
C AFSS HTML Designer 2.3 gratis1) Win 98/ME, NT 4, 2000, XP www.afss.de/designer/index.htm 3,6 MB Deutsch
Arachnophilia gratis Win 98/ME, NT 4, 2000, XP www.arachnoid.com/arachnophilia 1,7 MB Englisch
B3 HTML Studio 4.1.500 30 Dollar Win 98/ME, NT 4, 2000, XP www.htmldialogs.com/downloadstuff.htm 5,2 MB Englisch
C BAT HTML Editor 3.0 gratis Win 98/ME, NT 4, 2000, XP www.bat-html-editor-3.de.vu 2,8 MB Deutsch
Coffee Cup HTML Editor 9.5 50 Dollar Win 98/ME, NT 4, 2000, XP www.coffeecup.com/software 7,0 MB Englisch
C Edit4Win 1.70 10 Euro Win 98/ME, NT 4, 2000, XP www.edit4win.de 0,6 MB Deutsch
Hotdog Professional 7.03 99 Dollar Win 98/ME, NT 4, 2000, XP www.sausage.com/professional/overview.html 11,3 MB Englisch
HTML Format 7 gratis Win 98/ME, NT 4, 2000, XP www.christian-diekmann.de/software/ 0,7 MB Deutschindex.htm
C HTML Studio gratis Win 98/ME, NT 4, 2000, XP www.htmlstudio.de 2,0 MB Deutsch
C HTML Toolbox 3.1 gratis Win 98/ME, NT 4, 2000, XP http://delphi-soft.de 0,7 MB Deutsch
C Manfreds HTML Creator gratis Win 98/ME, NT 4, 2000, XP www.e-school4you.com 2,4 MB Deutsch
Namo Web Editor 5.5 99 Dollar Win 98/ME, NT 4, 2000, XP www.namo.com 38,3 MB Deutsch
Coffee Cup HTML Editor 9.5Preis: 50 DollarDownload: www.coffeecup.com/software/
(6,99 MB)
Um diesen Editor verwenden zu kön-nen, benötigen Sie gewisse Grundkennt-nisse in HTML. Zahlreiche nützliche Zu-satzfunktionen wie mehrere HTML- undScript-Hilfen machen die Arbeit an einemHTML-Dokument erheblich komfortabler,als sie es gewöhnlich ist. Zum direkten Up-load der Dateien beinhaltet das Programmden FTP-Client Expresso-FTP, über einenSplitscreen lassen sich Änderungen optischbetrachten. Außerdem liefert der Herstellereine umfassende HTML-Dokumentationund stellt einen Live-Support über Chat zurVerfügung. Auf der Website steht eine 45-Tage-Testversion zum Download bereit.
SYSTEMÜBERGREIFEND
HTML Format 7Preis: gratisDownload: www.christian-diekmann.de/
software/index.htm (0,659 MB)
HTML Format kommt mit Syntaxhervor-hebung und vielen weiteren nützlichenFunktionen. Etliche Dialoge und Eingabe-hilfen erleichtern die Arbeit. Für die wich-tigsten Tags gibt es Tastaturkürzel, Makroslassen sich abspeichern. Weitere Funktio-nen sind mehrzeiliges Suchen und Erset-zen sowie Autotext-Funktionen zum auto-matischen Aktualisieren von Datum undZeit an Textmarken. Die jüngste Versionder Freeware beinhaltet auch eine automa-tische Tag-Vervollständigung, eine offenePlug-in-Schnittstelle, Perl- und PHP-Syntax-hervorhebung sowie automatische Umlaut-umwandlung beim Speichern und Laden.
Manfreds HTML CreatorPreis: gratisDownload: www.e-school4you.com (2,38 MB)
Ausgestattet ist die Freeware mit einemFormular-Assistenten und HTML-Tags, de-ren Eigenschaften sich per Mausklick bear-beiten lassen, sowie speziellen Dialogfel-dern für folgende Elemente: neue HTML-Seite, formatierter Text, Überschriften, Hy-perlinks, Listen, Tabellen, Vorlagen mitText und Bildelementen, Navigationsele-mente mit vielen Optionen und Bilder. PerMausklick lassen sich Absätze, Zeilenum-brüche, horizontale Linien, Sonderzeichen,Farben, Kommentare und Meta-Tags erstel-len. Über die Vorschau im integriertenBrowser-Fenster können Sie die erstelltenSeiten jederzeit überprüfen.
KREATIV aufCHeft-CDALLROUNDER aufCHeft-CD
HTML StudioPreis: gratisDownload: www.htmlstudio.de (2,01 MB)
Das Programm eignet sich sowohl fürEinsteiger, die HTML erlernen möchten, alsauch für Profis, die die vollen Möglichkei-ten von HTML und seinen Erweiterungenausschöpfen wollen. Die Oberfläche ist ein-fach zu bedienen und bietet dennoch vieleFunktionen: Mit der Code Completion be-arbeiten Sie Tags, mit HTML Tidy formatie-ren und korrigieren Sie den Quelltext, undper Syntaxcheck prüfen Sie den Quelltext.Die HTML-Referenz erklärt kompakt dieeinzelnen HTML-Elemente, eine Projekt-verwaltung unterstützt den Anwender beiumfangreicheren Websites. Die Freewarelässt sich durch Plug-ins noch erweitern.
AFSS HTML Designer 2.3Preis: gratisDownload: www.afss.de/designer/index.htm
(3,59 MB)
Diese Freeware bietet zahlreiche Textfor-matierungen, Formularsteuerelemente, Lis-ten und Javascript. Damit erleichtert dasTool besonders solchen Anwendern die Ar-beit, die die ersten Schritte hin zur eigenenHomepage wagen. Damit Sie das Design ei-ner Web-Seite besser in Augenschein neh-men können, besitzt das Programm einenWYSIWYG-Modus. Sie sehen das aktuelleProjekt also so, wie es Besucher der Seitespäter auch sehen werden. Hilfreich für diepraktische Arbeit ist überdies ein Tabellen-assistent. Eine gute Grafik-Einbindung, derInclude-Explorer und der Meta-Tag-Genera-tor runden die Funktionen ab.
WYSIWYG-EDITOR aufCHeft-CD
BAT HTML Editor 3.0Preis: gratisDownload: www.bat-html-editor-3.de.vu
(2,84 MB)
Der HTML-Editor hat viele Tools, mit de-nen sich Farben, Tags und HTML-Elementeeinfügen lassen. Zudem bietet er Funktio-nen, mit denen Sie das Tempo einer Seitetesten und ein Backup erstellen. Mit demProjekt-Manager können Sie auf einfacheWeise größere Projekte mit mehreren Sei-ten bearbeiten. Ein integrierter Debuggerprüft HTML und CSS. Auch ein kleinerBrowser ist dabei. Ein Assistent hilft beimProgrammieren und gibt Infos zu allenDialogfenstern, der Upload-Assistent istbeim Hochladen behilflich. Mit BAT lassensich auch WAP-Seiten programmieren undmit einem internen WAP-Emulator testen.
AUCH FÜR WAP aufCHeft-CD
110-113 405.qua 02.12.2003 13:13 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 113
Preiswerte HTML-EditorenPGrundlagen PWorkshops pUtilities UtilitiesPPPp S. 110 – S. 113
Zu den vielen Funktionen dieses HTML-Quelltext-Editors zählen eine interne Vor-schau, Syntax-Highlighting, Projektverwal-tung, Cascading Stylesheets, Java (Script),HTML-Formulare sowie ein integrierterBildbetrachter und Syntax-Debugger. Pha-se 5.3 beherrscht zudem die automatischeUmlautkonvertierung, glänzt mit einemFußnotenassistent und hat einen Dateima-nager zum schnellen Wechsel zwischeneinzelnen Dokumenten. Ein Tabellenassis-tent, ein FTP-Client und ein Ressourcen-menü runden die Freeware ab. Die Benut-zerführung ist praktischer und logischerals die manch kommerzieller Programme.
Quick Editor 2.1 ist ein HTML-Editor mitvielen Funktionen. So bietet das Programmetwa den Multi-Editor, mit dem sich belie-big viele Dateien auf einmal editieren las-sen. Ferner beinhaltet die Freeware einekomplette Syntaxsammlung aus HTML 4.0sowie den Quick Editor, der vorgegebeneQuelltexte für mehrere Funktionen auf-weist. Dieses Tool ergänzt den Windows-Editor etwa um Umlautumschrift, vieleSyntaxbeispiele zum schnellen Einfügen inden Quelltext und eine Farbpalette, bei derdie von Ihnen ausgewählte Farbe in Hexa-dezimalcode konvertiert wird. Das Pro-gramm unterstützt HTML und CSS.
Super HTML 7.0Preis: 50 EuroDownload: www.superhtml.de (9,46 MB)
Dieser Quellcode-basierte, mit vielen As-sistenten ausgestattete Web-Editor kommtohne WYSIWYG-Funktion, bietet aber eineVorschaufunktion, die auch DHTML unter-stützt. Verschiedene Bildschirmauflösun-gen sind ohne Wechsel des Grafikmodus si-mulierbar. Mit dem komfortablen Projekt-management-Tool fassen Sie HTML-Dateienund andere Ressourcen zusammen, Datei-en fügen Sie per Drag & Drop als Links di-rekt in den Code ein. Mit Profi-Web-Edito-ren kann sich Super HTML nicht messen,im Vergleich dazu ist das Tool für ersteSchritte aber eine kostengünstige Alterna-tive und besser als viele Gratisangebote.
Scribe 2.1 besitzt einen integriertenBrowser sowie einen CSS-Editor und unter-stützt Javascript. Für jeden Tag bietet dieFreeware einen Assistenten, der die Arbeiterleichtert. Nützlich sind auch ein Datei-und Projektmanager und Werkzeuge wieSyntaxcheck, Stylesheet-Editor, Konvertie-rung, Download-Zeitcheck, Linkcheck,Thumbnail-Generator, Grafikkatalog, FTP-Transfer und Makro-Erstellung. Dank derPlug-in-Schnittstelle ESP lässt sich Scribemit vielen Plug-ins erweitern. Die umfang-reiche Hilfe, das moderierte Website-Forumund die übersichtliche Benutzerführungtragen zum guten Gesamteindruck bei.
Namo Web Editor 5.5Preis: 99 DollarDownload: www.namo.com (38,3 MB)
Dieser WYSIWYG-Web-Editor ist komfor-tabel ausgestattet. Er unterstützt DHTMLund ist besonders stark beim genauen Plat-zieren mit Hilfe von Layern. Mit Hilfe derTime-Line lassen sich freie Animationenleicht erstellen, beim Java Scripting hilftein Script Wizard. Damit gelingen Maus-Rollovers, Animationen und Drop-down-Menüs im Handumdrehen. Auch Image-maps definiert Namo unkompliziert imEdit-Fenster. Tabellen lassen sich mit Werk-zeugen wie Bleistift und Radiergummileicht erstellen. Zu den weiteren Funktio-nen zählen zahlreiche Layout-Vorlagen, einGIF-Animator und eine Site-Verwaltung.
Note Tab ist ein praktischer Ersatz fürdas Windows-Notepad und gleichzeitig einHTML-Editor. Die Freeware kann mehreregroße Dateien in einer Oberfläche öffnen,vielseitig Text formatieren, Wortstatistikenanzeigen und Dokumente als Lesezeichenablegen. Die Werkzeugleiste von Note Tabist frei konfigurierbar. Sie können sogarselbst Buttons erstellen und mit eigenenScripts versehen. Außerdem ist Note Tab inder Lage, mathematische Ausdrücke aus-zuwerten und direkt in den Text einzufü-gen. Der Editor ermöglicht es, eigene Kom-mandos mittels einer eigenen Scriptspra-che zu erstellen.
NOTEPAD-ERSATZ aufCHeft-CD
110-113 405.qua 02.12.2003 13:13 Uhr Seite 5
PC-WELT SONDERHEFT 2/2004114
Um tote Links auf Ihrer Homepage zu finden, müssen Sie nichtalle Links eigenhändig überprüfen. Linkchecker übernehmen diese lästige, aber notwendige Aufgabe für Sie.
Tote Links finden
Sicher kennen Sie das: Auf einer Home-page haben Sie eine interessante Link-Sammlung gefunden, die genau Ihr Hobbybetrifft. Sie klicken den ersten Link an –und erhalten eine Fehlermeldung. So er-geht es Ihnen mit jedem dritten Link in derListe. Logisch, dass Sie dann genervt sindund die Website verlassen.
Wie kann man seinen Web-Auftritt nurso miserabel pflegen, fragen Sie sich. DieErklärung ist in den meisten Fällen ein-fach: Je größer eine Website wird, destoschwieriger ist die Pflege. Wer klickt schonDutzende von Links durch, um festzustel-len, ob es die Zieladresse noch gibt? Oft fin-den sich tote Links auf andere Web-Seitenauch in Projekten oder bei Bilddateien.
Linkchecker: Die gute Alternative zur Handarbeit
Wenn Sie den Besuchern Ihrer Homepageeinen besseren Service bieten möchten alsim eben beschriebenen Fall, dann setzenSie am besten einen Linkchecker ein. Diese
spezialisierten Tools lesen HTML-Dateien ein, gehen sie Zeile für Zeile durchund suchen nach den Verweiszielen. EinVerweisziel ist dabei jede verlinkte externeDatei: Web-Seiten im eigenen Projekt, Bild-dateien, Video- und Musikdateien, Flash-Animationen und Ähnliches sowie selbst-verständlich auch die Adressen fremder Homepages. Dann prüft das Tool, ob dasZiel existiert. Auf der folgenden Seite stel-len wir Ihnen sechs Programme vor. Die
meisten prüfen die Homepage gleich on-line auf dem Webserver. Sie geben nur IhreWeb-Adresse an und erhalten abschließendein Protokoll. Eine Online-Verbindung istsowieso notwendig, damit die Tools exter-ne Web-Adressen überprüfen können. Einsehr gutes Tool dieser Kategorie ist XenuLink Sleuth.
Die Komfortklasse der Linkcheckerprüft auch HTML-Dateien auf der Festplat-te. Damit bügeln Sie tote Links aus, nochbevor Sie die Homepage online stellen.Sehr bequem sind beispielsweise CSE HTMLValidator und HTML Link Validator. Sie ha-ben einen integrierten Editor: Sobald Sie inder Ergebnisliste einen toten Link an-klicken, zeigt der Editor die passende Stel-le im HTML-Quelltext an. Das spart denWechsel zum HTML-Editor und eine lang-wierige Suche.
Online-ServicesDie Alternative zu Linkcheckern, die Sieauf Ihrem PC installieren, sind Online-Ser-vices. Sie stellen auf einer Web-Seite ein Ein-gabefeld für die Homepage-Adresse zur Ver-fügung (2 Abbildung oben links). Dannsucht ein Script nach fehlerhaften Linksund gibt das Ergebnis als Web-Seite aus. DieListe drucken Sie aus oder kopieren sie.Hier finden Sie gute Online-Services: http://validator.w3.org/checklink, www.law.utulsa.edu/lcund watson.addy.com.
Ein anderer Weg zum Aufspüren vonLink-Fehlern führt über die Server-Proto-kolle, die Provider wie 1&1 oder Strato fürjede Domain führen. Bei Strato etwa loggenSie sich in den Kundenbereich ein (Link„Kundenservice“ oben auf der Homepage).Dann rufen Sie den Link „Statistikabfrage“auf sowie „Statistics for the last 12months“. Im „Navigation Window“ wählenSie einen Monat aus und klicken dann aufden Link „Not Found“. Jetzt listet dasHauptfenster fehlerhafte Zugriffe auf.
Von Wolfgang Nefzger
Linkchecker im ÜberblickProdukt Windows-Betriebssystem Sprache
C * CSE HTML Validator 6.01 95/98/ME, NT 4, 2000 und XP englisch
C * HTML Link Validator 3.58 95/98/ME, 2000 und XP englisch
C * Link Checker Pro 3.1.33 95/98/ME, NT 4, 2000 und XP englisch
C Mihov Link Checker 0.3 95/98/ME, NT 4, 2000 und XP englisch
C Rel Link Checker Lite 1.0 95/98/ME, NT 4, 2000 und XP englisch
C Xenu Link Sleuth 1.2e 95/98/ME, NT 4, 2000 und XP englisch* Testversion
Link Checker Pro 3.1.33Preis: 39,95 DollarDownload: www.linkcheckerpro.com (4 MB)
Mit professionellem Funktionsumfangwartet Link Checker Pro auf. Das Tool prüftinterne Links auf andere Web-Seiten undBilder wie auch Links zu fremden Adres-sen. Die Ergebnisliste lässt sich vielfältigkonfigurieren, so können Sie etwa nur feh-lerhafte Links auf Bilder einblenden. Dochmüssen die HTML-Dateien bereits auf demWebserver gespeichert sein, Dateien aufder Festplatte bleiben außen vor. Eine Be-sonderheit ist die grafische Darstellung dereinzelnen Seiten und Verbindungs-Linksinnerhalb einer Site. Ihre Einstellungenspeichern Sie als Vorlage – so sind wieder-holte Prüfungen rasch erledigt.
LINKCHECKER
Mihov Link Checker 0.3Preis: gratisDownload: www.mihov.com (226 KB)
Betont einfach gibt sich die Oberflächevon Mihov Link Checker. Sie geben eineWeb-Adresse oder den Namen einer Dateiauf der lokalen Festplatte ein. Leider lassensich nur HTML-Dateien auswählen, keineHTM-Dateien. Der Linkchecker stellt danneine Liste aller vorhandenen Links auf. Da-bei zählen nur „echte“ Links, keine Ver-weise auf Bilddateien oder Ähnliches. Siespeichern diese Liste als Textdatei oder las-sen sofort alle Links auf der Liste prüfen.Das Tool kann auch eine Liste von Links ineiner Textdatei auf Erreichbarkeit prüfen.Ferner lassen sich die Antwortzeiten beimZugriff auf einen Webserver ermitteln.
Xenu Link Sleuth 1.2ePreis: gratisDownload: http://home.snafu.de/tilman/
xenulink.html (292 KB)
Die Freeware kommt aus Deutschland,hat aber eine englischsprachige Ober-fläche. Xenu Link Sleuth überprüft Web-sites im Internet ebenso wie HTML-Dateienauf der Festplatte. Dabei sucht es nach feh-lerhaften Links zu externen Adressen undDateien. Mehrere Adressen lassen sich alsTextdatei einlesen. Das Ergebnis erscheintals Liste, lässt sich aber als Report im HTML-Format speichern. Das Tool erkennt auchWeb-Seiten, die zu einer neuen Adresse wei-tergeleitet werden. Verwaiste Dateien aufdem Webserver stellt Xenu Link Sleuthnach Eingabe des Passworts ebenfalls fest.Die Angaben sind als Projekt speicherbar.
LINKCHECKERLINKCHECKER
Rel Link Checker Lite 1.0Preis: gratisDownload: www.relsoftware.com (730 KB)
Rel Link Checker ist anzumerken, dasser die abgespeckte Version eines Profi-Toolsist. Zunächst importieren Sie die Links vonIhrer Website oder aus einer Textdatei.Dann führt Rel Link die Prüfung durch. DieErgebnisliste lässt sich nach Fehlern, Adres-sen und weiteren Kriterien sortieren. Esgibt eine einfache Projektverwaltung, sodass Sie die eingestellten Adressen und Op-tionen später leicht wiederherstellen. DasTool überprüft HTML-Seiten nur auf einemWebserver. Dafür kann es mit Proxy-Ser-vern im Firmennetzwerk umgehen undAdressen aus der Zwischenablage von Win-dows automatisch importieren.
aufC Heft-CD aufC Heft-CD aufC Heft-CD
aufC Heft-CD
CSE HTML Validator 6.01Preis: 69 DollarDownload: www.htmlvalidator.com (2,7 MB)
Der CSE HTML Validator macht vielmehr als nur Links prüfen. Wie ein Editorzeigt er HTML- und CSS-Dateien an undmarkiert darin fehlerhafte Stellen, dienicht dem HTML-Standard entsprechen.Diese Fehler ändern Sie direkt im HTML Va-lidator, ein zusätzliches Programm istunnötig. Bei der Prüfung erfasst das Toolauch gleich interne und externe Links aufDateien und Web-Seiten. Klickt man in derErgebnisliste einen Eintrag doppelt an, sozeigt das Editorfenster den entsprechendenAusschnitt der Datei. Ein Haken ist jedoch,dass sich jeweils immer nur die Links einerHTML-Datei überprüfen lassen.
LINKCHECKER
HTML Link Validator 3.58Preis: 25 DollarDownload: http://lithopssoft.com (840 KB)
Das Tool checkt HTML-Dateien wahlwei-se auf der lokalen Festplatte oder auf einemWebserver. Die Ergebnisliste lässt sich nachverschiedenen Kriterien sortieren. KlickenSie in der Liste einen Eintrag an, öffnet dasTool den Editorbereich und zeigt die zuge-hörige Stelle der HTML-Datei an. Dort neh-men Sie direkt Änderungen vor und korri-gieren so den Fehler. Ein typischer Fehlerwird durch gemischte Groß- und Klein-schreibung in Dateinamen verursacht.Link Validator wandelt in einem Rutsch al-le Dateinamen in Kleinbuchstaben um. Esgibt auch eine Funktion zum Suchen undErsetzen in allen Projektdateien.
LINKCHECKER aufC Heft-CDaufC Heft-CD
114-115 402 02.12.2003 13:07 Uhr Seite 3
PC-WELT SONDERHEFT 2/2004116
Gut gemachte Grafikelemente geben Ihrer Homepage den letzten Schliff. Mit den richtigen Tools sparen Sie sich viel Zeitund erzielen professionelle Ergebnisse.
12 Top-Grafik-Tools
Auf einer Homepage gibt es mehr Gra-fik, als es auf den ersten Blick den Anscheinhat. Hintergrundmuster, Schaltflächen, Lo-gos, Fotos von Produkten oder aus demletzten Urlaub. Die nachfolgenden Toolshelfen Ihnen dabei, diese Grafiken zu er-zeugen, ihre Dateigröße für den Einsatz imWeb zu optimieren und sie zu verwalten.Die meisten der vorgestellten zwölf Utili-ties sind kostenlos, und etliche davonkonnten wir für Sie auf CHeft-CD packen.
GIF mit LizenzManche Share- und Freeware-Programmekönnen Bilddateien im GIF-Format nichtbearbeiten. Grund: Die amerikanische Fir-ma Unisys hat ein weltweites Patent (außerUSA) auf den Komprimier-Algorithmus,den GIF einsetzt. Jeder Anbieter eines GIF-tauglichen Programms muss Lizenzen zah-len. Als Alternative zu GIF bietet sich dasfreie PNG-Format an.
Bildbetrachter
Bildbetrachter leisten oft viel mehr, als nurGrafikdateien anzuzeigen. Vallen J-Pegger(2 Seite 119) etwa zeigt die EXIF-Infos, dieDigitalkameras in JPG-Bildern speichern,ausführlich an. Und Irfan View (2 Seite 117)erzeugt einfache Bildergalerien fürs Webund bearbeitet im Batchmodus ganze Bild-verzeichnisse in einem Rutsch.
Design-ToolsDie Dateigröße von Bildern für das Web zuoptimieren ist nicht einfach. EinfacheTools entfernen etwa aus GIF-BilddateienKommentare. Ein komplettes Bildbearbei-tungsprogramm wie Photo Impact XL (2 Seite 118) nimmt eine automatische Op-timierung vor. Es reduziert zum Beispieldie Farbpalette oder hilft beim Komprimie-ren von JPG-Bildern mit einer Vorschau aufdas Endergebnis. Tools wie Xara Webstyle 4
(2 Seite 118) wiederum setzen auf einfacheBedienung: Aus den Vorlagen wählen Siedie gewünschte Form für Buttons, Banneroder Hintergrundmuster aus. Dann stellenSie die Parameter wie Farbe neu ein und ex-portieren die fertigen Grafiken.
GalerienEin Kapitel für sich sind gut gestaltete Fo-togalerien. Der Surfer soll zunächst eineÜbersicht der Bilder mit kleinen Vorschau-bildern (Thumbnails) erhalten. Klickt er einBild an, erscheint die große Version des Bil-des im Browser. Digitalfotos sind meistauch dafür viel zu groß, so dass gleich zweiverkleinerte Versionen nötig sind. Dasklingt nach jeder Menge Handarbeit. Gale-rie-Tools wie Jojothumb (2 Seite 117) über-nehmen die komplette Arbeit. Sie wählennur die originalen Bilddateien aus und stel-len die Parameter ein.
WasserzeichenWer Fotos online stellt, kann nicht verhin-dern, dass jedermann diese Bilddateien aufseinen PC kopiert. Ein deutliches Wasser-zeichen als Grafik oder Text, wie es bei-spielsweise Bildschutz Pro (2 Seite 117) er-stellt, sorgt aber wenigstens dafür, dass derCopyright-Inhaber nicht vergessen wird.
Grafik-ToolsPGrundlagen PWorkshops pUtilities UtilitiesPpPP S. 116 – S. 119
WASSERZEICHEN-TOOL
Bildschutz Pro 2.5Preis: gratisSysteme: Win 95/98/ME, NT 4, 2000 und XPSprache: deutschDownload: www.web-profi-tools.de (1,4 MB)
Bei im Internet veröffentlichten Bildernlässt sich kaum verhindern, dass jeder-mann die Datei kopieren kann. Es gibt eineReihe von Tricks, um Fotodieben die Arbeitschwer zu machen, wer technisch versiertist, umgeht aber alle Hindernisse.
Mit Bildschutz Pro verhindern Sie zwarkeinen Download, erschweren jedoch dieWeiterverwendung von Bildern oder Fotosmit hoher Auflösung.
Langfinger abschreckenBildschutz Pro kopiert einen beliebigenText oder eine Logografik als sichtbaresWasserzeichen in die Bilddatei. Damit istauf den ersten Blick erkennbar, dass es sichum Ihr Bild handelt. Position und Transpa-renz des Wasserzeichens lassen sich belie-big einstellen. Sie wählen getrennt für Text-und Grafikwasserzeichen zwischen neunPositionen aus. Dabei ist es erlaubt, einWasserzeichen auch mehrfach an ver-schiedenen Positionen einzufügen. DasGrafikwasserzeichen passt Bildschutz Proauf Wunsch an die Größe des Bildes an. Da-mit erscheint es auch bei Bildern unter-schiedlicher Größe immer gut sichtbar.
Auf diese Weise lässt sich eine Raubko-pie leicht identifizieren. Das Tool setztauch das Kommentarfeld in der Bilddatei – sofern das Dateiformat dies unterstützt –und kopiert bei JPG zusätzliche Bildinfor-mationen (EXIF und ITPC). Die kosten-pflichtige Version für 19,95 Euro bearbeitetnicht nur Einzelbilder, sondern ganze Ver-zeichnisse am Stück.
Tipp: Wenn Sie öfter Bilder bearbeiten,ist es sinnvoll, die Einstellungen als Profilzu sichern. Dazu rufen Sie „Datei, Konfigu-ration speichern unter“ auf. Tragen Sie ei-nen Dateinamen ein – fertig. Beim nächs-ten Mal holen Sie alle Details mit „Datei,Konfiguration erneut laden“ zurück.
BILDBETRACHTER
Irfan View 3.85Preis: gratis (10 Euro für kommerzielle
Anwender)Systeme: Win 95/98/ME, NT 4, 2000 und XPSprache: deutschDownload: www.irfanview.de (931 KB)
Es gibt kaum ein Grafikformat, das IrfanView nicht öffnen, anzeigen und in einemanderen Format speichern kann. EinfacheBildbearbeitungsfunktionen wie Filter sindebenfalls integriert, Bilder lassen sich be-schneiden oder Ausschnitte anfertigen.
BatchkonvertierungBesonders nützlich fürs Web ist die Batch-konvertierung. Dabei wandelt das Toolmehrere Bilddateien in einem Rutsch inein neues Format um, verkleinert oder ver-größert sie, wendet Filter an und vergibtneue Dateinamen. Beim Bearbeiten vonJPG-Dateien behält Irfan View die EXIF-oder ITPC-Infos im Bild bei. Darin spei-chern viele Digitalkameras Infos wie Brenn-weite oder Belichtungszeit. Die Batchkon-vertierung entfernt auf Wunsch diese An-gaben. Die Funktion „Slideshow“ zeigtnacheinander ausgewählte Bilder an. DasTool kann eine solche Show als ausführba-res Programm oder Bildschirmschonerspeichern oder direkt als Daten- oder Video-CD brennen. Es gibt ein einfaches Modulfür die Gestaltung von HTML-Bildgalerienmit Vorschau. Es lohnt sich, von der Home-page des Herstellers die zusätzlichen Gratis-Plug-ins herunterzuladen und zu installie-ren. Sie enthalten Extrafunktionen wie dieverlustlose Bearbeitung von JPG-Dateien.
Tipp: Über „Datei, Batchkonvertierung/Umbenennung“ verkleinern Sie ein ganzesVerzeichnis mit Bildern. Fügen Sie zu-nächst die Bilder in die Dateiliste ein. Dannwählen Sie die Option „Batchkonvertie-rung“ und stellen das „Zielverzeichnis“ ein.Über den Button „Spezialoptionen“ legenSie die neue Bildgröße fest. In den meistenFällen ist eine prozentuale Verkleinerungsinnvoll, weil Sie damit das Seitenverhält-nis der Bilder erhalten und Hoch- undQuerformat berücksichtigen.
auf CHeft-CD auf CHeft-CDGALERIEGENERATOR
Jojothumb 2.8Preis: gratisSysteme: Win 95/98/ME, NT 4, 2000 und XPSprache: deutschDownload: www.jojotsch.de (2,2 MB)
Wenn Sie die besten Fotos aus dem letz-ten Urlaub auf der Homepage als Bilderga-lerie veröffentlichen möchten, nimmt Jojo-thumb Ihnen die einzelnen Handgriffe ab.Das Programm liest die Bilddateien ein, ver-kleinert sie auf die gewünschte Größe, er-zeugt die Vorschaugrafiken (Thumbnails)und erstellt die nötigen HTML-Dateien.
Die Ausgabe lässt sich auf vielfältigeWeise konfigurieren. Sie bestimmen etwa,wie groß die Thumbnails sind oder wie vie-le davon auf einer Web-Seite erscheinen.Wahlweise erzeugt Jojothumb auch eineStart- und eine Indexseite mit Links auf al-le Galerieseiten. Interessant ist die Option,die verkleinerten Bilder mit einem Stempelzu versehen. Das kann ein einfacher Textsein oder auch ein Bild, etwa ein Firmenlo-go. Zwei vordefinierte Layouts arbeiten mitSchatteneffekt sowie mit Rahmen. WeitereAnpassungen sind erlaubt.
Bilder manipulierenWer besondere Ergebnisse erzielen will,kann auf die ausgefeilte Scriptsprache Jo-joscript zurückgreifen. Damit ist es bei-spielsweise kein Problem, in die Bilder in-dividuelle Texte einzufügen. Diese könnenzum Beispiel aus den EXIF-Daten einer Bild-datei wie Belichtungszeit, Blende oderBrennweite stammen, die Digitalkamerasin JPG-Dateien speichern. Scriptbefehlesind in geschweiften Klammern auch inden Seitendefinitionen erlaubt – so lässtsich etwa der Dateiname einfügen.
Tipp: Für eine Bildunterschrift mit Da-teiname und Dateigröße klicken Sie auf„Optionen“ und wählen das Register „Sei-tendefinition“ aus. Klicken Sie in der Vor-schau auf „Bildbeschreibung“. Im Eingabe-feld unten tippen Sie „{file_ext}, {format(„%3.2“,size_kbyte)}“ (ohne Anführungs-zeichen) ein.
Photo Impact XLPreis: 99,95 EuroSysteme: Win 95/98/ME, NT 4, 2000 und XPSprache: deutschDownload: www.ulead.de (42,8 MB)
Ein ausgewachsenes Bildbearbeitungs-programm mit ausgefeilten Web-Funktio-nen ist Photo Impact XL. Die neue VersionXL ist stärker auf Digitalfotos ausgerichtet.So kann die Shareware etwa blasse oderdunkle Fotos mit einem Sonnenlicht-Filteraufhellen. In Nachtaufnahmen fügt PhotoImpact XL realistische Darstellungen desMondes ein. Bildverfremdungen erreichenSie mit Kreativeffekten, mit denen Sie in ge-eignete Fotos etwa blauen Himmel, Wol-ken, Regen oder ein Feuerwerk einfügen.
Designer entwerfen mit dem Programmkomplette grafische Web-Seiten. Photo Im-pact erzeugt im Hintergrund den nötigenHTML-Code. Im Bildarchiv stehen über2000 Grafikelemente und Animationen fürden Einbau in Web-Seiten bereit.
Diashow-FunktionEin Highlight ist die Diashow-Funktion.Aus etlichen Grafikvorlagen lässt sich dasgewünschte Design auswählen. Das Toolbringt Ihre Fotos auf die richtige Größeund blendet optional Beschreibungstexteein. Auf einer Web-Seite sind auch mehrereDiashows erlaubt. Dass Photo Impact XLauch den HTML-Code für Image Maps er-zeugen kann, erscheint schon fast selbst-verständlich. Dynamic HTML für animierteMenüs, Mouseover-Schaltflächen und an-dere Effekte erzeugt das Tool ebenfalls. Siegeben nur die Grafiken an, Photo ImpactXL erzeugt den nötigen Programmcode.
Tipp: Mit der <F4>-Taste rufen Sie denBildoptimierer für das Web auf. Er hilft Ih-nen dabei, die Dateigröße eines Bildes zureduzieren. Im Vorschaubereich sehen Siegenau, welche Spuren die eingestellte Kom-primierung im Bild hinterlässt. Auf dieseWeise gelangen Sie rasch zur optimalenEinstellung. Als Ausgabeformate stehenGIF, JPG und PNG zur Verfügung.
BILDVERWALTUNG
Studioline Photo BasicPreis: gratisSysteme: Win 95/98/ME, NT 4, 2000 und XPSprache: deutschDownload: www.studioline.net/de/ (28,9 MB)
Ein Bildarchiv mit Bildbearbeitungs-funktionen ist Studioline Photo Basic. Nachdem Import der Bilder organisieren Sie dieDateien in Kategorien, die Sie selbst anle-gen. Jedes Bild bekommt einen Namen undlässt sich mit beliebig vielen Beschrei-bungstexten versehen. Neue thematischeKategorien erzeugen Sie aus den Bildernvorhandener Kategorien. So können Sie et-wa Kategorien mit den einzelnen Urlaubs-reisen anlegen und dann in einer weiterenKategorie alle Sonnenuntergänge zusam-menfassen, egal, in welchem Urlaub Sie dieeinzelnen Fotos geschossen haben.
Digitalkamerabilder nachbearbeitenDie Software leistet vor allem bei der Nach-bearbeitung von Fotos aus Digitalkamerasgute Dienste. Eine Reihe von Filtern wie Ro-te-Augen-Korrektur oder Schwarzweiß-Um-wandlung stehen hierfür bereit. Studiolineverändert nicht die Originalbilder, sondernspeichert die darauf angewendeten Filter.So bleibt das Original immer erhalten, ein-zelne Filteroptionen lassen sich jederzeitwieder rückgängig machen.
Die Ausgabe der Bilder erfolgt unter an-derem als Web-Galerie, in der Basic-Versionstehen zwei ansehnliche Layouts zur Aus-wahl. Die Vorschauseiten stattet Studiolinemit animierten Thumbnails aus, die aufMausberührung reagieren. Die eingetipp-ten Beschreibungstexte und Bildnamen er-scheinen in der fertigen Galerie.
Studioline ist empfehlenswert für An-wender, die komplexe Galerien mit Zusatz-texten und aufwendigem Layout gestaltenwollen. Zwei wesentliche Einschränkungender Freeware-Version: GIF-Bilder und kom-primierte TIFF-Bilder lassen sich nicht öff-nen. Außerdem verkraftet die Datenbankmaximal 200 Bilder. Die Vollversion Studio-line Photo 2 kostet 44 Euro.
auf CHeft-CDauf CHeft-CD auf CHeft-CDGALERIEGENERATOR
Auf besonders einfache Bedienung setztdie Shareware Xara Webstyle 4. Mit demTool erzeugen Sie praktisch alle Arten vonGrafiken inklusive kompletter Web-Seiten:Navigationsleisten und Menüs, Werbeban-ner, Logos, Trennlinien, Aufzählungspunk-te (Bullets), Überschriften, 3D-Überschrif-ten, Hintergrundmuster und Buttons.
Zusätzlich erzeugt Webstyle kompletteThemen-Sets, alle nötigen Grafiken (Hin-tergrund, Buttons und so weiter) für eineWebsite, die farblich und im Design auf-einander abgestimmt sind. Für ganz Eiligegibt es komplette Web-Seitenvorlagen, dienur noch angepasst werden müssen.
Einfachste BedienungDie Arbeit folgt in allen Kategorien dem-selben Schema und ist ganz leicht: Siewählen aus den Vorlagen ein Objekt aus,das Ihren Vorstellungen entspricht. ÜberSchaltflächen auf der linken Seite passenSie die Gestaltung an: Text, Farben, Hinter-grundmuster, 3D-Effekt, Schatten undGröße. Bei den 3D-Überschriften könnenSie eine beliebige Schrift verwenden, dieauf Ihrem PC unter Windows installiert ist.Abschließend erzeugt ein Mausklick auf„Save“ die gewünschten Dateien.
Bei Grafiken stehen die Formate JPG,GIF und PNG zur Auswahl. Komplette Web-Seiten speichert Webstyle inklusive HTML-Datei. Auf Wunsch fügt die Software dabeispezielle Markierungen für Frontpage undDreamweaver ein (2 ab Seite 102). Ein eige-nes Modul ist für die Gestaltung von Bil-dergalerien zuständig. Gleich beim Importder Bilddateien bringt Webstyle sie auf eineweb-taugliche Größe. Alle Thumbnails lan-den auf einer Web-Seite, für jedes Bild las-sen sich eine Überschrift und eine Be-schreibung eintragen. Das Layout wählenSie aus den vorhandenen Seitenvorlagen.
116-119 403 02.12.2003 14:58 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 119
Grafik-ToolsPGrundlagen PWorkshops pUtilities UtilitiesPPPp S. 116 – S. 119
Deknop für Win 95/98/ ME, NT 4, 2000und XP erzeugt rechteckige Buttons – etwafür Navigationsleisten auf Web-Seiten. Mitdem Tool lassen sich ansprechende 3D-But-tons gestalten, Fläche und Schrift erschei-nen einfarbig, mit Verlauf oder mit Grafik-textur. Besonders einfach ist es, einenganzen Satz von Buttons mit unterschied-licher Beschriftung zu erstellen. Sie tragendie Texte ein, Deknop generiert mit einemMenüaufruf alle Grafiken (GIF, JPG, PNGoder BMP). Wichtig: Die deutsche Sprach-datei müssen Sie extra herunterladen undins Programmverzeichnis kopieren.
HTML 4.0 unterstützt Image Maps. Die-se Technik ermöglicht es, dass ein Surfer ei-ne bestimmte Stelle eines Bildes anklicktund damit eine bestimmte Web-Adresseaufruft. Welche Bereiche der Grafik alsLink funktionieren, legen Sie fest. Als Be-reich sind Rechtecke, Kreise und beliebigeUmrisse erlaubt. Mit Geohtml für Win 95/98/ME, NT 4, 2000 und XP laden Sie dasBild und zeichnen die gewünschten Image-Map-Bereiche mit der Maus ein. Daraus er-zeugt das englischsprachige Tool die erfor-derlichen HTML-Tags. Bestehende ImageMaps importiert Geohtml problemlos.
Einen schnellen Überblick über Bildda-teien verschiedenster Formate verschafftVallen J-Pegger für Win 95/98/ME, NT 4,2000 und XP. Links sehen Sie einen Da-teibaum wie im Windows-Explorer oderkleine Vorschaugrafiken. Rechts zeigt dasTool das markierte Bild groß an. Wahlwei-se erscheinen die Thumbnails ebenfallsrechts, das Vollbild ist dann via Karteireitererreichbar. Die EXIF-Infos in JPG-Bildern.werden ausführlich angezeigt. Praktischfür Besitzer eines USB-Sticks: Vallen J-Pegger muss nicht installiert werden – dasTool ist sofort auf jedem PC einsatzbereit.
GIF-Bilder enthalten oft Infos wie Kom-mentare zum Bildinhalt oder Copyright-Hinweise. Beim Einsatz auf Web-Seitenkommt es entscheidend auf die Dateigrößean, bei vielen Bildern lassen sich rasch einpaar KB einsparen. Gifclean 32 für Win95/98/ME, NT 4, 2000 und XP entfernt alleZusatzdaten aus GIF-Bildern. Das englisch-sprachige Tool mit der etwas eigenwilligenBedienung kann aber auch Kommentare indie Bilder einfügen. Auf Wunsch sichertGifclean 32 die gesäuberten Bilddateiennach einigen Sekunden automatisch. Da-bei überschreibt es die Originaldatei.
Partyfotos auf der Homepage sind jaganz nett. So richtig amüsant sind sie aberoft erst dann, wenn die abgebildeten Ge-sichter mit Anmaniesmp retuschiert wor-den sind. Das kleine Tool für Win 95/98/ME, NT 4, 2000 und XP bietet eine Reihevon Werkzeugen. Sie dürfen einzelne Be-reiche wachsen oder schrumpfen lassen,verdrehen, ziehen oder plätten. Sie sehenin Echtzeit, wenn das Werkzeug ein über-breites Grinsen auf ein Gesicht zaubert. So-gar Animationsvideos erzeugt Anmanie-smp, die sich etwa mit Advanced Gif Ani-mator (2 links) aufbereiten lassen.
Das GIF-Format bietet eine Besonder-heit: In einer Datei lassen sich mehrere Bil-der speichern, die bei der Anzeige im Brow-ser wie ein Trickfilm ablaufen. AdvancedGif Animator für Win 95/98/ME, NT 4, 2000und XP hilft, solche kurzen Bildsequenzenzu gestalten. Mit dem eingebauten Zeichen-programm gestalten Sie die Einzelbilder.Als Rohmaterial importiert das Tool nebenGIF auch AVI-Videos und animierte Win-dows-Cursor. Die fertige GIF-Datei kompri-miert das Programm auf Wunsch zusätz-lich, indem es die Farbpaletten vereinheit-licht und unnötige Infos löscht.
GIF-ANIMATIONS-TOOL aufC Heft-CDaufC Heft-CD
116-119 403 02.12.2003 14:58 Uhr Seite 5
PC-WELT SONDERHEFT 2/2004120
Auch wer mit seinem HTML- oder Web-Editor zufrieden ist, kannsich den Alltag beim Homepage-Design noch erleichtern. Wirhaben 18 wichtige Spezial-Tools für Sie zusammengestellt.
18 Homepage-Tools
Falls Sie schon einen guten HTML- oderWeb-Editor haben, mit dem Sie gerne ar-beiten, lohnt es sich trotzdem, andere Toolsin Augenschein zu nehmen. Denn kein Pro-gramm deckt alle Bereiche gleich gut ab.Manche Aufgaben lassen sich mit dengroßen Design-Werkzeugen nur umständ-lich und zeitaufwendig lösen, während einkleines Spezial-Tool das Problem in weni-gen Minuten im Griff hat. Die Mehrzahlder vorgestellten 18 Utilities ist übrigenskostenlos, die meisten konnten wir für Sieauf die CHeft-CD packen.
Ein weites Feld ist die Bearbeitung vonHTML-Dateien. Oft ist das Problem, dass esnicht nur um fünf oder zehn Dateien geht,sondern ein paar Hundert zu bearbeitensind. Sie wollen beispielsweise auf denWeb-Seiten Ihre Mailadresse anpassen odereinen neuen Link in die Navigationsleisteeinfügen. Das Suchen & Ersetzen erledigenTools wie Info Rapid (2 Seite 122) automa-tisch in Hunderten von Dateien, die sogarüber mehrere Verzeichnisse verstreut sind.
HTML-Tools: Quelltextschnell optimierenAuch sonst bietet HTML viel Raum zumOptimieren. Das Textformat HTML erlaubtbeliebig viele Leerzeichen und Kommenta-re, die der Browser bei derAnzeige aber nur über-liest. Wenn Sie diese Zei-chen entfernen, so verklei-nert sich die Datei und dieLadezeit im Internet ver-kürzt sich. Oder Sie wollenandersherum eine Dateifür die Ansicht im Text-Editor formatieren – dieeinschlägigen Tools wieMhs HTML Tool (2 Seite125) erledigen beides.
Im Zeitalter massenhaf-ten Mail-Spams ist es nichtratsam, seine Mailadresseöffentlich auf der Websitezu publizieren. Automa-tische Suchroboter klap-
pern nämlich das Web genau nach solchenMailto-Links ab. Verschlüsseln Sie die Mail-adresse so, dass sie Besucher im Browserproblemlos lesen können, die Suchroboteraber nichts erkennen. Diese Aufgabe erle-digt Mailto-Encrypter für Sie (2 Seite 125).
Suchmaschinen wie Google oder Alta-vista sind so etwas wie die Gelben Seitendes Webs. Sorgen Sie dafür, dass diese undandere Suchmaschinen Ihre Website inde-xieren. Nur so können Interessenten sieauch finden. Dazu versehen Sie die HTML-Dateien mit aussagekräftigen Meta-Infor-mationen wie Stichwörtern und Beschrei-bung. Hierbei hilft Ihnen Meta Master (2 Seite 125). Und Anmelde-Software wieAdaurl (2 Seite 124) teilt den Suchmaschi-nen Ihre Internet-Adresse mit.
Websites pflegen: ContentManagement System
Nicht immer ist ein normaler Web- oderHTML-Editor die beste Wahl für die Pflegeeiner Homepage. Sie wollen etwa ein Tage-buch (englisch: Weblog) publizieren, dasSie täglich oder alle paar Wochen um neueEinträge ergänzen. Ein spezieller Weblog-Editor kümmert sich automatisch um dieVerwaltung, Sie tippen nur Ihre Tages-beiträge ein. Ältere Einträge wandern sozum Beispiel automatisch auf eine Archiv-seite. Auf Seite 124 stellen wir Ihnen für die-sen Einsatzzweck Blog vor.
Wenn Sie eine Vereins- oder Firmenseitebetreuen, sind Sie es sicher bald leid, auchkleinste Änderungen selbst durchführenzu müssen. Mit einem einfachen ContentManagement System (CMS) wie Zeta Pro-ducer (2 Seite 123) verlagern Sie Arbeit auf
Von Wolfgang Nefzger
Effekt mit Text: Wem das Originalprogramm für Flash-Animationen zu teuer
ist, der nimmt Swish Lite, dessen Stärke Textanimationen sind
120-125 404.qua 02.12.2003 13:02 Uhr Seite 2
PC-WELT SONDERHEFT 2/2004 121
Homepage-Tools UtilitiesPpPPPP S. 120 – S. 125
PGrundlagen PWorkshops pUtilities
Mehr Infos
Internet
Eine der aktuellsten und umfangreichsten Sam-
melseiten für Free- und Shareware rund um das
Thema Internet ist www.webattack. com. Dort fin-
den Sie übersichtlich sortiert vor allem englisch-
sprachige Programme.
Eine kleine, aber feine Sammlung an kostenlosen
Programmen finden Sie bei www.freeware-ar
chiv.de. Die Rubrik „Internet + DFÜ“ listet ein-
schlägige Tools auf, viele davon mit deutsch-
sprachiger Bedienerführung. Auch das Archiv
unter der Adresse www.freeware.de hat sich auf
kostenlose, großteils deutschsprachige Software
spezialisiert.
Im Überblick: 18 Homepage-ToolsProdukt Kategorie Preis Betriebssysteme Internet Download Seite
C Adaurl 2.02 Suchmaschinen- gratis Win 95/98/ME, NT 4, www.adaurl.com/de 840 KB 124eintrag 2000, XP
C Blog 7.1 Weblog-Autorensystem gratis Win 98, ME, 2000, XP www.farook.org 1,9 MB 124
C Color Fazer 1.0 Farbgenerator gratis Win 95/98/ME, NT 4, http://coscorrosa.com/ 1,7 MB 1242000, XP programs/cfazer
Exactmapper Lite 1.2 Sitemap-Generator gratis Win 95/98/ME, NT 4, 2000, XP www.exacttrend.com 1,1 MB 122
HTML bulk 4.0 HTML-Konvertierung 9 Euro Win 98/ME, NT 4, 2000, XP www.mettlerweb.de 1,7 MB 124
HTML Calendar Kalender-Tool gratis Win 95/98/ME, NT 4, 2000, XP www.dbhsoftware.com 1,6 MB 122Generator 4.02
C HTML Verschlüsseler 1.2 Dateischutz 10,22 Euro Win 95/98/ME, NT 4, 2000, XP www.cadkas.de 378 KB 124
C Info Rapid 3.1f Suchen & Ersetzen gratis* Win 95/98/ME, NT 4, 2000, XP www.inforapid.de 1 MB 122
C Javascript Utility Suite 1.0 Javascript-Generator gratis Win 95/98/ME, NT 4, 2000, XP www.dark-street.com 840 KB 124
Mailto-Encrypter Spam-Schutz gratis Win 95/98/ME, NT 4, 2000, XP www.modernbytes.cjb.net 197 KB 125
C Meta Master 1.1 Meta-Tag-Generator gratis Win 95/98/ME, NT 4, 2000, XP www.rms.to 851 KB 125
C Mhs HTML Tool 2.11 HTML-Formatierung gratis Win 95/98/ME, NT 4, 2000, XP www.mhsoft.de 348 KB 125
Robot Pack 1.2 Suchmaschinensteuerung gratis Win 98/ME, NT 4, 2000, XP www.soho-it.com 5,8 MB 125
C Speedcms 1.3d Content Management gratis Win ME, NT 4, 2000, XP http://speedcms.de.vu 521 KB 125System
Swish Lite 1.52 Flash-Animationen 19,95 Dollar Win 95/98/ME, NT 4, 2000, XP www.swishzone.com 1,6 MB 123
C Webexe 1.5 Offline-Browser 39,95 Euro Win 95/98/ME, NT 4, 2000, XP www.aw-soft.de 1,6 MB 125
C Zeta Producer 4.0 Content Management gratis Win 95/98/ME, NT 4, 2000, XP www.zeta-producer.de 15,1 MB 123System
* 25 Euro für kommerzielle Anwender
die Verursacher. Diese müssen gar nichtsüber HTML und die Erstellung von Web-Sei-ten wissen, sondern tragen nur ihren neu-en Text in das System ein. Das erzeugt dar-aus eine normale Web-Seite und überträgtdiese zum Webserver. Sogar Teamarbeit istmit solchen kostenlosen Tools machbar.
Profis in Sachen Website-Gestaltungnutzen oft Cascading Style Sheets (CSS),um die Gestaltung und das Layout zu vereinheitlichen. Sämtliche Angabenstecken in einer einzigen CSS-Datei, die Sie über einen Link in alle HTML-Dateieneinbinden. Eine Änderung an den CSS-Regeln wirkt dann automatisch auf alleWeb-Seiten. Viele Web-Editoren unterstüt-zen CSS aber nur mangelhaft. BesondereCSS-Editoren – beispielsweise Morphon CSSEditor (2 Seite 123) – helfen Ihnen, die Eigenschaften und Regeln zu entwerfenund zu pflegen.
Stylesheets im Griff: CSS-Editoren helfen
CSS gehört die Zukunft, denn die künftigeVersion von HTML, XHTML 2.0, ist schonfast fertiggestellt. Und bei XHTML 2.0 gibtes keine Tags und Attribute mehr, mit de-
nen Sie die Gestaltung einer Web-Seite steu-ern können. Diese Aufgabe sollen Style-sheets übernehmen. Es wird zwar noch ei-nige Jahre dauern, bis sich XHTML durch-setzt, aber CSS lässt sich auch mit dem ak-tuellen HTML 4.0 gut einsetzen.
CSS Level 2Der aktuelle Standard für CSS heißt CSS Le-vel 2. Neben Eigenschaften für die Schrift-gestaltung und Farbgebung kann er vor al-lem beliebige Elemente wie Bilder oder Absätze frei im Browser-Fenster platzieren.Diese positionierbaren Bereiche sind zumBeispiel die Grundlage für aufklappbareMenüs oder Animationen. Solche Effekte,bei denen auch Javascript zum Einsatzkommt, sind unter dem Namen DynamicHTML oder kurz DHTML bekannt. DieBrowser von Internet Explorer über Mozil-la/Netscape 7 bis Opera unterstützen die al-lermeisten CSS-Eigenschaften.
Es gibt ziemlich viele CSS-Eigenschaftenund noch mehr gültige Werte. So kenntCSS Level 2 beispielsweise Farbwerte, diesich auf die Systemumgebung des Surfersbeziehen. Mit „color: windowtext;“ stellenSie beispielsweise eine Schriftfarbe ein, die
der normalen Textfarbe in einem Win-dows-Fenster entspricht. Da sich niemanddiese vielen Details merken kann, helfendie CSS-Editoren auf den folgenden Seitenweiter. Sie bieten die Eigenschaften und er-laubten Werte bequem über Dialogfelderund Auswahllisten an. Auch die Umrech-nung von Farben in die RGB-Farbwerte neh-men Ihnen diese Tools ab.
120-125 404.qua 02.12.2003 13:03 Uhr Seite 3
Utilities Homepage-Tools
PC-WELT SONDERHEFT 2/2004122
PPpPPP S. 120 – S. 125
PGrundlagen PWorkshops pUtilities
SITEMAP-GENERATOR
Exactmapper Lite 1.2
Preis: gratisSysteme: Windows 95/98/ME, NT 4, 2000, XPSprache: englischDownload: www.exacttrend.com (1,1 MB)
Je umfangreicher eine Website ist, destoschwieriger wird es für Besucher, sich zuorientieren. Besonders stark strukturierteAngebote mit mehreren Hierarchie-Ebenensind schwer zu durchschauen. Über die Na-vigationsleiste ist immer nur eine Ebenesichtbar. Davon abgesehen, haben die Men-schen ein ganz unterschiedliches Ord-nungsempfinden: Was der eine logisch fin-det, ist für einen anderen Dschungel pur.
Abhilfe schafft eine Sitemap, ein Ver-zeichnis aller Web-Seiten, aus denen dieWeb-Präsenz besteht. In einer langen Listefindet ein Besucher oft schneller das Ge-wünschte. Es ist sehr mühsam, eine Site-map von Hand anzulegen und vor allembei Änderungen zu pflegen. Diese Aufgabeübernimmt Exactmapper Lite.
Assistenten helfenSie wählen über einen Assistenten nur dieBasisseite aus, das Tool ermittelt selbst dieLinks zu den anderen Seiten und baut dar-aus eine hierarchische Liste auf. Die Listelässt sich bearbeiten, beispielsweise kön-nen Sie Äste löschen, hinzufügen oder dieEbene ändern. In mehreren Registern be-stimmen Sie das genaue Layout und den In-halt der Sitemap. Abschließend erzeugtExactmapper Lite eine HTML-Datei, die Sienur noch hochladen müssen. Der Sitemap-Generator kommt auch mit sehr großenWeb-Angeboten zurecht: Die Self-HTML-Referenz von Stefan Münz (http://selfhtml.teamone.de) hat über 2000 HTML-Dateien –kein Problem für Exactmapper Lite.Tipp: Über das Register „Style“ legen Sie dasLayout fest. Die Option „Index Page“ er-zeugt eine alphabetisch sortierte Liste. Mitder Schaltfläche „Preview Site Map“ startenSie eine Vorschau mit den aktuellen Ein-stellungen in Ihrem Standard-Browser.
KALENDER-TOOL
HTML Calendar Generator4.02Preis: gratisSysteme: Windows 95/98/ME, NT 4, 2000, XPSprache: englisch (Ausgabe deutsch)Download: www.dbhsoftware.com (1,6 MB)
Es ist eine ziemlich mühsame Angele-genheit, einen Kalender mit Terminen alsWeb-Seite zu pflegen. Der HTML CalendarGenerator ist Ihnen dabei behilflich.
Sie verwalten die Termine in übersicht-lichen Dialogboxen. Zu jedem Tag dürfenSie zehn Eintragungen machen. Jeder Ein-trag lässt sich mit einem Link hinterlegen.Ein Tageseintrag kann zusätzlich mit ei-nem Bild – etwa einem animierten Ausru-fezeichen – ausgestattet sein. So ruft bei-spielsweise ein Klick auf einen Eintrag di-rekt eine Web-Seite mit den Details auf.
Über die Optionen legen Sie wiederkeh-rende Ereignisse fest, zum Beispiel Geburts-tage. Das Programm erzeugt aus den Ter-minen eine Serie von HTML-Dateien mitJahres- und Monatskalender – und zwarnicht nur in Englisch, sondern auch inDeutsch und in neun weiteren Sprachen.
Freie KonfigurationDie Gestaltung des Kalenders bestimmenSie über viele Optionen weitgehend selbst.Sie wählen die Elemente aus, stellen dieFarben und das Hintergrundbild ein undlegen Meta-Tags für Suchbegriffe und Autorfest. Sogar externe Cascading Style Sheetsund HTML-Includes für professionelle An-wender sind vorgesehen.
Alle Angaben speichern Sie als Profil, sodass Sie mehrere Kalendertypen pflegenkönnen. Mit einem einfachen FTP-Clientübertragen Sie einen neuen Kalender so-fort zu Ihrem Webserver.Tipp: Mit dem Button „Configure“ rufen Sieden Einstellungsdialog auf. Im Register„Language“ stellen Sie in der Auswahlliste„German“ ein. Damit erzeugt der Genera-tor einen deutschen Kalender. Über „Addnew language“ legen Sie Ihre eigenen Tex-te fest, etwa für einen Dialektkalender.
SUCHEN & ERSETZEN aufC Heft-CD
Info Rapid 3.1fPreis: gratis (25 Euro für kommerzielle
Anwender)
Systeme: Windows 95/98/ME, NT 4, 2000, XPSprache: deutschDownload: www.inforapid.de (1 MB)
Das Problem: Eine Website ist auf überhundert HTML-Seiten angewachsen. Undnun möchten Sie einen neuen Link in dieNavigationsleiste einsetzen. Oder Sie su-chen eine bestimmte Mailadresse auf ir-gendeiner der Seiten, um sie zu ändern.Oder Sie wollen eine Ladung Word-Doku-mente in ordentliche HTML-Dateien ohneBallast umwandeln. Da ist Handarbeit ge-fragt – oder Info Rapid Suchen & Ersetzen.
Vielseitige SuchoptionenDas Tool bearbeitet beliebig viele Dateien ineinem Rutsch, Sie wählen nur das Ver-zeichnis und die Dateimaske (*.html unddergleichen) aus. Als Suchbegriff geben Sieentweder ganz normalen Text ein, oder Sieverwenden die Ähnlichkeitssuche, wenn Siesich mit der Schreibweise nicht sicher sind.
Der Mustervergleich ist etwas für Profis,dafür gibt es nichts, was sich damit nichtexakt finden lässt. Auch Sonderzeichen wieZeilenumbruch oder Tabulator sind er-laubt. Optional beschränken Sie auf Groß-oder Kleinschreibung, suchen nur nachganzen Wörtern oder nur in einer Zeile.
Ein anderer Einsatzzweck von Info Ra-pid besteht darin, im lokalen Cache desWeb-Browsers nach Stichwörtern zu su-chen, die sich dann offline anzeigen lassen.Die Software verwaltet mehrere Suchauf-träge gleichzeitig, Sie schalten wie bei Ex-cel über Karteireiter um.Tipp: Mit dem Mustervergleich formulierenSie komplexe Suchaufträge. „Uwe&Udo&Rolf“ findet beispielsweise alle Dateien, indenen diese drei Namen vorkommen.„M[ae][iy]er“ findet viele Schreibweisen desNamens, etwa Maier, Mayer, Meier oderauch Meyer. Die Buchstaben in eckigenKlammern sind eine Aufzählung der andieser Stelle erlaubten Buchstaben.
120-125 404.qua 02.12.2003 13:03 Uhr Seite 4
PC-WELT SONDERHEFT 2/2004 123
Homepage-Tools UtilitiesPPPpPP S. 120 – S. 125
PGrundlagen PWorkshops pUtilities
CSS-EDITOR
Morphon CSS Editor 1.3.6
Preis: gratisSysteme: JavaSprache: englisch, deutsch mit ZusatzdateiDownload: www.morphon.com/csseditor (12 MB)
Ein Werkzeug für Profis ist MorphonCSS Editor. Das Tool ist in Java program-miert und läuft somit mit praktisch allenBetriebssystemen, sofern dort eine Java Vir-tual Machine (JVM) installiert ist. Die JVMgibt es unter www.java.com kostenlos.
Das Tool bietet alle Optionen von CSS Le-vel 1 und 2, CSS Mobile sowie SVG in Dia-logboxen an. In einer hierarchischen Listewählen Sie aus, welche CSS-Eigenschaft Siein die aktuelle CSS-Datei einfügen wollen.Dabei orientiert sich der Editor am offiziel-len W3C-Standard. Die Details zu den Ei-genschaften und die erlaubten Werte sindin den Dialogfeldern vorgegeben, Sie wäh-len nur die passenden Einstellungen aus.
Nah am StandardDie Entwickler haben die Vorgaben derW3C-Standards fast komplett berücksich-tigt. So sind zum Beispiel auch die CSS-Ein-stellungen für die Druckausgabe vorhan-den, auch wenn der Internet Explorer 6und die meisten anderen Browser damitnichts anfangen können.
Damit Sie die Übersicht behalten, zeigtdie Ansicht „Summary“ alle CSS-Eigen-schaften der aktuellen CSS-Datei an. Überdie Ansicht „Source“ präsentiert der Editorden Quelltext zur gerade markierten CSS-Regel. Beim Speichern erzeugt er eine se-parate CSS-Datei, die Sie über einen Link inbeliebig viele HTML-Dateien einbinden.Tipp: Um die deutschsprachigen Texte fürdie Programmoberfläche zu erhalten, la-den Sie auf der Homepage des Herstellersdie Sprachdatei „CSSEditor_de.properties“herunter (rechte Maustaste im Browser,dann im Kontextmenü „Speichern unter“).Diese Datei kopieren Sie in das Programm-verzeichnis, standardmäßig ist das „C:\Pro-gramme\Morphon CSS Editor 1.3.6“.
FLASH-ANIMATIONEN
Swish Lite 1.52
Preis: 19,95 DollarSysteme: Windows 95/98/ME, NT 4, 2000, XPSprache: englischDownload: www.swishzone.com (1,6 MB)
Flash-Animationen sind vor allem fürEinführungen auf eine Homepage beliebt.Das Originalprogramm Macromedia Flashist allerdings recht teuer. Die preiswerte Alternative heißt Swish Lite, das sich aufTextanimationen konzentriert. Die erzeug-ten Dateien haben dasselbe Format wie diemit Macromedia Flash erstellten und funk-tionieren daher auf rund 95 Prozent allerPCs mit Internet-Anschluss.
Fertige EffekteSie geben den Text ein, wählen Art und Far-be der Schrift sowie weitere Details. Dannfügen Sie der Animation fertige Effekte hin-zu, die die Schrift etwa langsam aus- odereinblenden, quetschen, explodieren oderdreidimensional rotieren lassen. Über dieVorschau begutachten Sie die Animationzwischendurch. Außer Text sind als Ele-mente Pixelbilder, Sounddateien (FormateWAV oder MP3) und Buttons erlaubt. Damitgestalten Sie zum Beispiel eine Jukeboxoder ein animiertes Auswahlmenü.
Beim Export entsteht nicht nur eineSWF-Datei, das Tool erzeugt nach IhrenVorgaben auch die HTML-Tags, mit denenSie die Animation auf der Web-Seite ein-binden. Die Tags kopieren Sie über die Zwi-schenablage von Windows. Neben recht-eckigen Animationen sind auch Transpa-renzeffekte möglich. Damit scheint auf derWeb-Seite der Hintergrund an transparen-ten Stellen der Flash-Animation durch. Tipp: Über das Register „Actions“ realisierenSie Reaktionen auf Mausklicks. Damit etwanach dem Anklicken eine bestimmte Web-Seite erscheint, klicken Sie zuerst auf „AddEvent“ und wählen „On Press“ aus. Dannklicken Sie auf „Add Action“ und wählen„Goto URL“. Jetzt tragen Sie nur noch dieWeb-Adresse ein – fertig.
CONTENT MANAGEMENT SYSTEM aufC Heft-CD
Zeta Producer 4.0
Preis: gratisSysteme: Windows 95/98/ME, NT 4, 2000, XPSprache: deutschDownload: www.zeta-producer.de (15,1 MB)
Mit diesem Tool gestalten Sie kompletteWebsites ohne HTML-Kenntnisse und ohnezusätzliche Werkzeuge. Die Bedienung isteinfach, gelungen ist auch die deutschspra-chige Online-Hilfe, die das Tutorial für denEinstieg in das Programm ergänzt.
Zunächst legen Sie die Seitenstrukturfest, der Ihre Site folgen soll. Die Hierarchiesetzt das Tool später automatisch in eineNavigationsleiste um. Sie können jederzeitSeiten ergänzen, verschieben oder löschen.
Layout nach KapitelnEine Seite besteht aus einer beliebigen Zahlvon Kapiteln. Ein Kapitel ist ein Elementauf der fertigen Web-Seite, etwa eine Über-schrift oder ein Absatz. Jedes Kapitel hatein eigenes Layout, das Sie aus einer Reihevon Vorlagen wählen. Für die gesamte Sitegibt es ebenfalls eine austauschbare De-sign-Vorlage. Auch ein Editor für Formula-re und eine automatische Sitemap-Funkti-on sind enthalten. Wer selbst Kapitel- undSitevorlagen gestalten möchte, brauchtdafür jedoch HTML-Kenntnisse. Ist alles fer-tig gestellt, so übernimmt Zeta Producerauch den Upload zum Webserver.
Die Freeware-Version des Programmsdürfen Sie unbeschränkt nutzen, aller-dings lassen sich maximal 20 Web-Seitendamit pflegen. Die kommerzielle Version5.0 hebt diese Einschränkung auf und bie-tet viele zusätzliche Funktionen.Tipp: Oft ist es sinnvoll, Web-Seiten eineZeitlang vor dem Termin zu gestalten, zudem sie online stehen sollen. Per Doppel-klick auf einen Seiteneintrag rufen Sie des-sen Eigenschaftendialog auf. Im Register„Standard“ entfernen Sie das Häkchen vor„Diese Seite im Internet anzeigen“. WennSie die Site veröffentlichen, überträgt ZetaProducer so markierte Seiten nicht mit.
120-125 404.qua 02.12.2003 13:03 Uhr Seite 5
Utilities Homepage-Tools
PC-WELT SONDERHEFT 2/2004124
PPPPpP S. 120 – S. 125
PGrundlagen PWorkshops pUtilities
FARBGENERATOR
Color Fazer 1.0Preis: gratisDownload: http://coscorrosa.com (1,7 MB)
Die Wirkung von Color Fazer 1.0 ist ein-fach, doch wirkungsvoll. Das Programmfärbt Text wie einen Regenbogen ein. Sie ge-ben den Text, die Schriftart, die Start- unddie Endfarbe an. Bis zu zehn Zwischenfar-ben sind möglich. Nach einem Mausklickberechnet das Tool den passenden HTML-Code und zeigt eine Vorschau. Dabei be-ruht alles auf dem normalen HTML-Tag<font>. Deshalb funktioniert der Trick mitallen Browsern. Und wenn der Browser denTag ignoriert, bleibt der Text dennoch er-halten; er erscheint dann eben ohne Far-ben. Über die Zwischenablage überneh-men Sie den Code in Ihren HTML-Editor.
HTML-KONVERTIERUNG
HTML bulk 4.0Preis: 9 EuroDownload: www.mettlerweb.de (1,7 MB)
HTML bulk hilft, viele HTML-Dateienauf einmal zu verändern. Über „Hinzufü-gen“ nehmen Sie beliebig viele Dateien indie Liste auf. Dann können Sie in einemDurchgang HTML-Codes suchen und erset-zen, Mailto-Links verstecken, Meta-Tags ein-fügen, Dateinamen umwandeln und Um-laute konvertieren. Alle Angaben samt Da-teiliste lassen sich als Vorlage speichern, sodass wiederholte Aufgaben schnell von derHand gehen. Besonders praktisch: Mit derUmwandlung von Dateinamen umgehenSie Probleme mit der unterschiedlichenHandhabung von Groß- und Kleinschrei-bung unter Windows und Webservern.
Javascript Utility Suite 1.0Preis: gratisDownload: www.dark-street.com (840 KB)
Viele pfiffige Funktionen auf Web-Sei-ten lassen sich nur mit Javascript realisie-ren: aufklappende Menüs, Pop-up-Fenster,animierte Schaltflächen oder eine automa-tisch ablaufende Diashow. Die JavascriptUtility Suite erzeugt die dafür notwendi-gen Scripts maßgeschneidert nach IhrenVorgaben. Sie tragen zum Beispiel die ein-zelnen Menüpunkte über ein Dialogfeldein und sortieren sie in die gewünschte Rei-henfolge. Ein Mausklick erzeugt das zu-gehörige Script, das Sie über die Zwischen-ablage in Ihre HTML-Dateien einfügen. AlsErgänzung ist noch ein einfacher Java-script-Editor integriert.
JAVASCRIPT-GENERATORDATEISCHUTZ
HTML Verschlüsseler 1.2Preis: 10,22 EuroDownload: www.cadkas.de (378 KB)
Sobald Sie HTML-Dateien auf den Web-server kopieren, kann jeder darauf zugrei-fen. Mancher Zeitgenosse lädt die Dateienauf seinen PC und kopiert einfach Ihr Lay-out. HTML Verschlüsseler codiert die Datei-en, so dass in einem HTML-Editor nur Buch-stabensalat zu sehen ist. Auch wandelt dasTool einzelne Buchstaben in ihren Zeichen-code um. Beim Laden im Browser ändertein Script den Salat wieder in normaleHTML-Tags. Nachteil: Hat jemand Javascriptdeaktiviert, sieht er nur einen kurzen Hin-weis. HTML Verschlüsseler bietet keinenperfekten Schutz, Sie machen es damitaber unerfahrenen Datendieben schwerer.
Damit viele Besucher Ihre Website fin-den, muss sie in Suchmaschinen vertretensein. Um sicherzustellen, dass die Suchma-schinen die Seite auch in ihre Datenbankaufnehmen, melden Sie am besten IhreWeb-Adresse dort an. Bei einer Suchma-schine ist das noch okay, aber bei zwei Dut-zend richtig lästig. Delegieren Sie diese Auf-gabe an Adaurl. Sie stellen nur die passen-den Infos zusammen und wählen die Kate-gorien sowie Suchmaschinen aus. Adaurlmeldet Ihre Site bei den Suchmaschinenan und prüft die Resultate. So fällt es leicht,die Anmeldung auch bei einer größerenÄnderung am Inhalt zu wiederholen.
SUCHMASCHINENEINTRAG
Blog 7.1Preis: gratisDownload: www.farook.org (1,9 MB)
Weblogs sind öffentliche Tagebücher imWeb. Da sich ständig etwas ändert, ist diePflege eines Weblogs mit einem normalenWeb-Editor recht aufwendig. Die FreewareBlog nimmt Ihnen diese Aufgabe ab. DieEinrichtung eines neuen Weblogs (bei Blog:„Journal“) ist etwas langwierig. Danachwird es aber bequem. Sie wählen nur dasJournal und den Tag aus, für den Sie ergän-zen wollen. Dann tippen Sie Überschriftund Text wie bei Word ein. Über Icons fü-gen Sie Links, Bilder und Download-Datei-en ein. Zum Abschluss überträgt Blog dieHTML- und sonstige Dateien wie eingefüg-te Bilder an die eingestellten Webserver.
WEBLOG-AUTORENSYSTEM aufC Heft-CDaufC Heft-CD
aufC Heft-CD
120-125 404.qua 02.12.2003 13:04 Uhr Seite 6
PC-WELT SONDERHEFT 2/2004 125
Homepage-Tools UtilitiesPPPPPp S. 120 – S. 125
PGrundlagen PWorkshops pUtilities
HTML-FORMATIERER
Mhs HTML Tool 2.11Preis: gratisDownload: www.mhsoft.de (348 KB)
HTML-Dateien müssen nicht besondersformatiert sein, im Prinzip dürfen auch al-le Tags und Texte in einer Zeile stehen. MhsHTML Tool nutzt das auf zwei Arten: Eskann fertige HTML-Dateien komprimieren,so dass sich die Ladezeit im Web verringert.Dabei löscht die Freeware alle Zeilenum-brüche und Kommentare, auf Wunschauch Tabulator- und Leerzeichen. Zum an-deren kann das Programm HTML-Dateienauch sauber mit Umbrüchen und Ein-rückungen formatieren, damit sie im Edi-tor leichter zu bearbeiten sind. Zusätzlichwandelt das Tool Umlaute in die bei HTMLerforderlichen Umschreibungen um.
Suchmaschinen nutzen spezielle Such-programme, um neue oder veränderteWeb-Seiten zu finden und in ihre Daten-bank aufzunehmen. Ob und wie diese sogenannten Robots Ihre Web-Seiten inde-xieren, steuern Sie über die Datei ROBOTS.TXT, die Sie im Wurzelverzeichnis IhresWebspace ablegen. Diese Datei legt fest,welche Verzeichnisse Robots durchsuchendürfen. Genau diese Datei erzeugt RobotPack automatisch. Sie wählen nur die Ver-zeichnisse direkt auf dem Webserver ausund geben an, was damit jeweils passierensoll. Auch das Hochladen der fertigen ROBOTS.TXT übernimmt das Tool.
Sie wollen HTML-Dateien nicht nur imWeb veröffentlichen, sondern auf CD bren-nen und weitergeben, aber zugleich ver-hindern, dass jemand Texte und Bilder vonder CD kopiert und verwendet. Webexe er-zeugt aus einem normalen HTML-Projekteine große Programmdatei. Beim Start die-ses Programms erscheint ein Browser, derwie gewohnt die Web-Seiten anzeigt, alleLinks funktionieren. Erscheinungsbild undEigenschaften der Ausgabedateien konfi-gurieren Sie wie gewünscht. Eine Beson-derheit ist die integrierte Volltextsuche, diealle HTML-Dateien des Projekts erfasst undeine exakte Trefferliste ausgibt.
Mit Speedcms lässt sich eine Websiteverwalten, ohne dass dafür HTML-Befehleoder ein komplexer Editor nötig sind. Dasmacht vor allem Sinn, wenn Laien die Siteaktualisieren sollen. Sie richten HTML-Vor-lagen ein, die Textlieferanten tippen nurihren Beitrag in Speedcms ein. Das Toolfügt die Texte dann in die HTML-Vorlagenein und kopiert die Seiten per FTP auf denWebserver. Speedcms kann die Textdateienund Vorlagen mit auf den Webserver kopie-ren. Das ist praktisch, falls mehrere Leutebei einem Projekt zusammenarbeiten: Willjemand was ändern, so lädt er zunächst dieaktuellen Dateien auf seinen PC herunter.
Falls Sie plötzlich Massen an Spam-Mailsin Ihrem Posteingang finden, obwohl SieIhre Mailadresse nur Freunden gegeben ha-ben, liegt es vermutlich daran, dass Sie sieauch auf Ihrer Website veröffentlicht ha-ben. Spam-Versender lassen Robots dasWeb wie Suchmaschinen nach Adressendurchsuchen. Mailto-Encrypter verhindert,dass diese Programme Ihre Adresse finden.Das Tool wandelt eine normale Mailadres-se in eine Folge von Zahlencodes um. Brow-ser stellen die Adresse korrekt dar, Spam-Roboter können damit nichts anfangen.Die verschlüsselte Adresse kopieren Sie perZwischenablage in Ihren Web-Editor.
SPAM-SCHUTZ
Meta Master 1.1Preis: gratisDownload: www.rms.to (851 KB)
Mit Meta Master erzeugen Sie bequemdie wichtigen Meta-Tags für Ihre HTML-Da-teien. Über Meta-Tags geben Sie beispiels-weise den Autor an oder halten Stichwörterund Beschreibungstext für Suchmaschinenbereit. Auch eine automatische Weiterlei-tung zu einer anderen Adresse lässt sich da-mit bewerkstelligen. Sie wählen zunächstdie HTML-Dateien aus, die das Tool bear-beiten soll. Bereits vorhandene Meta-Datenliest Meta Master aus den HTML-Dokumen-ten ein. Dann tragen Sie in Eingabefelderdie Texte für die Meta-Tags ein. Die auto-matische Aktualisierung fügt die geänder-ten Werte direkt in die Dokumente ein.
META-TAG-GENERATOR aufC Heft-CD
120-125 404.qua 02.12.2003 13:05 Uhr Seite 7
PC-WELT SONDERHEFT 2/2004126
Wer eine Homepage haben will, der braucht ein FTP-Programm.Nur so lassen sich Dateien auf den Webserver hochladen unddort pflegen. Wir haben die besten Tools für Sie ausgewählt.
Die besten FTP-Tools
Wenn es um die Übertragung von Da-teien im Internet geht, dann ist das FileTransfer Protocol – kurz: FTP – gefragt. FürHomepage-Betreiber ist FTP wichtig, da dieÜbertragung von HTML- und Bilddateienauf den Webserver üblicherweise mit die-sem Protokoll erfolgt.
FTP-Client: MehrFunktionen nutzen
Auf Ihrem PC müssen Sie dazu einen FTP-Client installiert haben, der mit dem FTP-Server auf der anderen Seite kommuni-ziert. Darüber werden Dateien in beideRichtungen übertragen. Auch Datei-Opera-tionen auf dem FTP-Server wie Löschenoder Verschieben lassen sich vom heimi-schen PC aus fernsteuern.
Komfortabel: Moderne FTP-Server undFTP-Clients sind dazu in der Lage, eine ab-gebrochene Übertragung später fortzuset-zen. Damit gehören endlose Wiederholun-gen bei einer schlechten Modemverbin-dung der Vergangenheit an. Praktisch jederWeb-Editor hat eine eingebaute FTP-Funk-tion, mit der sich die fertige Homepage di-rekt hochladen lässt. Wozu dann noch einbesonderes FTP-Programm?
Komfortablerer Abgleich:Festplatte und Webserver
Mit einem FTP-Programm sehen Sie die Ver-zeichnisse und Dateien auf dem Web- oderFTP-Server wie im Windows-Explorer. Sie er-zeugen neue Verzeichnisse oder löschenund verschieben Dateien. Außerdem lassensich die Homepage-Dateien auf der Fest-platte mit der Version auf dem Webserverdank paralleler Darstellung beider Ver-zeichnisse direkt und schnell vergleichen.Auf der gegenüberliegenden Seite stellenwir Ihnen fünf klassische FTP-Clients undein Spezial-Tool vor: Sendtoftp 2.8. Es er-
weitert das Kontextmenü und den Befehl„Senden an“ beim Windows-Explorer, sodass Sie Dateien direkt aus dem Win-dows-Explorer auf den FTP-Server hochla-den können. Sämtliche Tools haben wir fürSie auf C Heft-CD gepackt.
Das normale FTP-Protokoll überträgt Da-teien ungeschützt über das Internet. Mit ei-nem IP-Sniffer kann ein Angreifer die Über-tragung mitlesen und die Dateien auf sei-ner Festplatte speichern. Das gilt bedauer-licherweise auch für das Passwort. Ein An-greifer könnte dann Ihren Webspace über-nehmen und darüber zum Beispiel illegaleDownloads anbieten.
Es gibt aber Optionen, um dieses Pro-blem anzugehen: Firmen nutzen dazu ofteine gesicherte Verbindung im Internet,ein so genanntes Virtual Private Network(VPN). Beim VPN sind die einzelnen Daten-pakete verschlüsselt, ein potenzieller Lau-scher kann lediglich wertlosen Datenmüllabfangen. Die Einrichtung eines VPN ist al-lerdings nicht trivial, und die Gegenstellemuss dasselbe Verfahren unterstützen.
„Secure FTP“: Sichere Übertragung
Eine andere Methode ist Secure FTP (SFTP).Dabei wird die gesamte Datenübertragungzum FTP-Server verschlüsselt, einschließ-lich des Passwortes selbstverständlich. Siebrauchen dafür nur ein SFTP-fähiges Pro-gramm, etwa Filezilla oder Smartftp. DerFTP-Server auf der Gegenseite muss eben-falls SFTP beherrschen.
Beim Webspace-Provider Strato bei-spielsweise ist ein SFTP-Zugang bei den teu-reren Premium-Paketen möglich. BeachtenSie, dass Sie hier im Gegensatz zum nor-malen FTP-Zugang einen anderen FTP-Ser-ver einstellen müssen: „ssh.strato.de“.
Von Wolfgang Nefzger
FTP-Programme im ÜberblickProdukt Windows-Betriebssystem Sprache
C Bob 1.3 98/ME, 2000, XP englisch
Boostftp 1.1.12 95/98/ME, NT 4, 2000, XP deutsch
Filezilla 2.2.1a 95/98/ME, NT 4, 2000, XP mehrsprachig
Filezilla lässt als FTP-Client kaum Wün-sche offen. Die Verzeichnisse auf der loka-len Festplatte und auf dem FTP-Server er-scheinen übersichtlich in zwei Fensterbe-reichen nebeneinander. Das Tool, das außerin Deutsch auch in anderen Sprachen vor-liegt, kann mehrere FTP-Übertragungengleichzeitig verwalten und setzt unterbro-chene Downloads fort. Die Datenübertra-gung wird auf Wunsch per SSL gesichert.Mit Drag & Drop füllen Sie die Warte-schlangen für Up- und Downloads. Die Pro-grammoptionen sind sehr vielfältig, so las-sen sich zum Beispiel die Geschwindigkei-ten für Up- und Download begrenzen (sieheauch den Beitrag 2 ab Seite 96).
FTP Watchdog automatisiert die Über-tragung von Dateien per FTP im Hinter-grund. Das Tool überwacht ein einstellba-res Verzeichnis, wobei sich die überwach-ten Dateitypen sowie Ausnahmen festlegenlassen. Verändert sich eine Datei, baut der„Wachhund“ eine FTP-Verbindung auf undüberträgt nur die betroffene Datei. Siemüssen also nach Änderungen an Ihrer Site nicht umständlich den Upload starten,alles passiert automatisch. Der Transfer er-folgt sofort oder in einem einstellbarenZeitraum von bis zu drei Tagen. AufWunsch wandelt das Tool alle Dateinamenund Groß- oder Kleinbuchstaben um.
Die Oberfläche von Smartftp ähneltdem Windows-Explorer. Beim Funktions-umfang kann der einfache FTP-Client aberbeispielsweise mit Filezilla (2 oben) nichtmithalten, dafür lassen sich Dateien aller-dings per Drag & Drop verschieben. Ein Ge-schwindigkeitstest misst die Übertra-gungsraten, ein Zeitplaner führt Übertra-gungen automatisch durch. Als Besonder-heit ist Smartftp in der Lage, Verbindungenzu 16 FTP-Servern gleichzeitig aufzuneh-men. Sogar Kopien zwischen zwei FTP-Ser-vern mit FXP-Support sind machbar. Dabeischickt ein FTP-Server die Daten direkt anden anderen.
Das kleine Tool Sendtoftp erweitert denWindows-Explorer um eine FTP-Funktion.Markieren Sie die Dateien und Verzeich-nisse im Explorer, und rufen Sie mit derrechten Maustaste das Kontextmenü auf.Unter dem Menüpunkt „Senden an“ fin-den Sie den Eintrag „SendToFTP“. Damitöffnen Sie ein kleines Dialogfeld, das es Ih-nen erlaubt, den gewünschten FTP-Serverauszuwählen. Die Dateien landen aufWunsch in einem einstellbaren Unterver-zeichnis. Wenn es ganz schnell gehen soll,stellen Sie Ihren Standard-Server ein. Dannstartet die Übertragung sofort, ohne dassSie auf „OK“ klicken.
aufC Heft-CD aufC Heft-CD
Bob 1.3Preis: gratisDownload: www.farook.org (2,7 MB)
Das FTP-Tool Bob konzentriert sich aufeine einzige Aufgabe: beliebige Dateien miteinem Mausklick auf mehrere FTP-Serverhochzuladen. In jenen Fällen, in denen SieIhre Homepage auf mehreren Webservernanbieten, erleichtert das die Aktualisie-rungsarbeit erheblich. Bob lässt sich denk-bar einfach bedienen: Das Hauptfensterzeigt links die Liste mit Dateien und rechtsdie Liste der FTP-Server, die als Ziel einge-stellt sind. Der Pfeil-Button startet die Über-tragung, im Statusfeld erscheint für jedeerfolgreich übertragene Datei eine Mel-dung. Abgesehen von der Einstellung füreinen Proxy finden sich in dem Tool keineweiteren Optionen.
Wenn Sie Ihren Web-Auftritt pflegen,geht es oft darum, Dateien und Verzeich-nisse auf der lokalen Festplatte und einemFTP-Server abzugleichen. Boostftp prüft aufMausklick, welche Dateien veraltet odernoch gar nicht vorhanden sind, und über-trägt die neuen Dateien. Dabei kopieren Siewahlweise von der lokalen Festplatte aufden FTP-Server oder in die umgekehrteRichtung. Ein Auftrag kann beliebig vieleVerzeichnisse mit jeweils eigenen Optio-nen enthalten. Was mit verwaisten Dateienauf dem Ziel-Server passiert, lässt sich eben-so einstellen wie eine Dateimaske (*.htmund so weiter). Die Einstellungen sichernSie als Profildatei für eine Wiederholung.
Chefredakteur: Michael Lohmann (ml)(verantwortlich, Anschrift der Redaktion)Stellvertretender Chefredakteur: Roland Bischoff (bif)Chef vom Dienst: Andrea Kirchmeier (ak)Koordination: Heide Kuhlmann (hk)Redaktion: Ruth Drost-Hüttl (rdh), Heide Kuhlmann (hk)Freie Mitarbeiter: Achim Beiermann, Ingo Böhme, AndreasBorchert, Johann-Christian Hanke, Michael J. Hußmann, Wolfgang Nefzger, Thomas Pelkmann, Michael Schmithäuser,Dirk WischmannFreie Mitarbeiter Schlussredaktion: Evelyn Köhler, Marion Linssen, Franz MayerCD-/DVD-Produktion: Anja LaubsteinRedaktionsassistenz: Ursula Istavrinos (Leitung), HeikeMeironk, Bianca Springer, Thamar Thomas-Ißbrücker, Christa Vetterwww.pcwelt.de: Stefan Willeke (Leitung/sw), Eric Bonner (eb),Hans-Christian Dirscherl (hc), Panagiotis Kolokythas (pk), Markus Pilzweger (mp)DTP-Produktion/Disposition: Alex Dankesreiter (Leitung), Andreas Förth (leitend) DTP-Layout: Bianca Aumeyer, Snezana Dejanovic, Anton Paunert, Hans WeberDesign: h2Design.de
Copyright: Das Urheberrecht für angenommene und veröffent-lichte Manuskripte liegt beim IDG Magazine Verlag. Eine Verwer-tung der urheberrechtlich geschützten Beiträge und Abbildun-gen, insbesondere durch Vervielfältigung und/oder Verbreitung,ist ohne vorherige schriftliche Zustimmung des Verlages un-zulässig und strafbar, soweit sich aus dem Urheberrechtsgesetznichts anderes ergibt. Eine Einspeicherung und/oder Verarbei-tung der auch in elektronischer Form vertriebenen Beiträge inDatensysteme ist ohne Zustimmung des Verlages unzulässig.
Anzeigenabteilung
Tel. 089/36086-210, Fax 089/36086-263E-Mail: [email protected] (Associate Publisher):Christoph Burkhart (-294) (verantwortlich für Anzeigen, Anschrift des Verlags)Stellvertretende Anzeigenleitung:PLZ 0, 1, 8, 9 Reinhard Baum (-516) (verantwortlich für dieVorstellung der New-Media-Inhalte im „Promotion“-Teil derPC-WELT und auf CD-ROM; Anschrift des Verlags)
Anzeigenverkaufsleitung Markenartikel:Marcus Schardt (-219)Mediaberatung Print, CD-ROM, Online:PLZ 3, 6, 7 Thomas Ströhlein (-188)PLZ 2: Iris Haug (-854)PLZ 4, 5: Petra Rammelsberger (-355)Computer Direct: Helga de Gregori (-132)Online-Specialist: Stefan Bader (-129)Marketing/Sales Markenartikel: Monika Fiedler (-181)Anzeigenverkauf Ausland: Daniela Radzio, Leitung, Europa (-293), Iris Haug, Asien / USA (-854)Marketingleitung: Katja Martin (-320) Leitung Marktforschung: Frank Heublein (-785)New Media: Andreas Koschinsky (-644) Leitung Sonderprojekte: Joachim Herbert(-121, freier MA)Leitung Anzeigendisposition:Rudolf Schuster (-135)Anzeigendisposition:Magdalena Lerch (-291, Fax -328)Digitale Anzeigenannahme:Thomas Wilms, leitend (-604), Manfred Aumaier (-602), Andreas Mallin (-603), Martin Mantel (-780) Anzeigenpreise: Es gilt die Anzeigenpreisliste 20 (1.10.2003).
Bankverbindungen: HypovereinsbankMünchen, Konto 322 460 95, BLZ 700 202 70; Postbank München, Konto 220 977-800, BLZ 700 100 80Anschrift für Anzeigen: siehe Anschrift des VerlagsErfüllungsort, Gerichtsstand: MünchenIGS Anzeigenverkaufsleitung für ausländische Publikationen:Tina Ölschläger (-116); für inländische Publikationen:Peter L. Townsend (Leitung) (-299)Verlagsrepräsentanten für AnzeigenFrankreich: F. Bonnin, 5 Rue Chantecoq, 92808 Puteaux, Tel.:0033-1-4197-0, Fax 0033-1-4197-6202. NL: Florence Schmit,Richard Holkade 8, 2033 Haarlem, Tel.: 0031-23-5461090.Großbritannien: Shane Hannam, 29/31 Kingston Road, GB-Stai-nes, Middlesex TW 18 4QG, Tel.: 0044-1-784210210. USAEast: Chip Zaborowski, 500 Old Connecticut Path, P.O. Box9377, Framingham, MA 01701-9377, Tel.: 001-508-87907 00.USA West: Larry Arthur, 501 Second Street, S. 114, San Francis-co, CA 94107, Tel.: 001-415-2434141. Taiwan: The InfoproGroup, Sophia Yu, 8F, 131 Sec 3 Nanking E Road, Tel.: 00886-2-2715-3000. Japan: Noriko Nozaki, 8th Floor 3-4-5, HongoBunkyo-Ku, Tokio 113-0033, Japan, Tel. 0081-3-5800-4851.Singapur: J. Yu, No. 80 Marine Parade Road, #17-01A ParkwayParade, S-449269, Tel.: 0065-3458383. Hongkong: V. Chan,S.1707, K.Wah Centre, 191 North Point, Tel.: 00852-2861 3238.
Korea: C.H. Park, Rm. 1806/7, Golden Tower 191, 2-ka, Choon-gjungro, Seodaemun-ku, Seoul, Tel.: 0082-2364-4182/3
Vertrieb
So abonnieren Sie die PC-WELT:01805/999-801, Fax 07132/959-166Vertriebsleitung: Josef Kreitmair (-243)Leitung Vertriebsmarketing:Peter Priewasser (-154)Vertrieb Handelsauflage: MZVModerner Zeitschriften Vertrieb GmbH, Breslauer Straße 5, 85386 Eching, Tel. 089/31906-0, Fax 089/31906-113, E-Mail: [email protected], Internet: www.mzv.de
Haftung: Eine Haftung für die Richtigkeit der Beiträge könnenRedaktion und Verlag trotz sorgfältiger Prüfung nicht überneh-men. Die Veröffentlichungen in der PC-WELT erfolgen ohneBerücksichtigung eines eventuellen Patentschutzes. Auch wer-den Warennamen ohne Gewährleistung einer freien Verwen-dung benützt.
Geschäftsführer: York von HeimburgVerlagsleitung (Mitglied der Geschäftsleitung):Stephan Scherzer
Veröffentlichung gemäß § 8, Absatz 3 des Gesetzes über diePresse vom 8.10.1949: Alleiniger Gesellschafter der IDG Maga-zine Verlag GmbH ist die IDG Communications Verlag AG, Mün-chen, eine 100%ige Tochter der IDG Inc., Boston, Mass., USA.
Vorstand: Keith Arnot, York von Heimburg, Pat KenealyAufsichtsratsvorsitzender: Pat McGovern
D Digital World 07132/959166 01805/999801 http://www.digital-world.de/shop 4
domainfactory 0831/59188-22 0831/59188-0 http://www.domain-go.de 3. US
1 1 & 1 Internet AG 02602/96-1010 0180/500-1535 http://www.1und1.de/webhosting 2. US, 3
L Lycos Europe 05241/80-6071 05241/8071000 http://www.webcenter.de 4. US
S Strato Medien 030/88615-113 01805/055-055 http://www.strato.de 24/25
