PC - PC Welt - Sonderheft - Die Perfekte Homepage

Deutschland 7,60 | Schweiz sfr 15,20 | sterreich 8,60 | Benelux 8,60 | AOL-Stichwort pcwelt
www.pcwelt.de
NE
U!
02/2004
Die CD enthlt keine jugendbeeintrchtigenden Inhalte
SONDERHEFT
Januar/Februar/Mrz 2004
Homepage
Die perfekte Homepage

Schritt fr Schritt erklrt Beispielvorlagen auf CD Wie Sie Ihre Seite kostenlos online stellen
Grundkurs Die erste Homepage in fnf Seite 58 Schritten alle Beispielseiten auf CD So gehts
Seite 34
55 AUF CD
UTILITIES
Utilities
Seite 102
Tipps
Seite 88
HTML, CGIs, Javascript, Flash, 1 Homepage-Toolbox Ihre Grundausstattung frs Web FTP alles ausfhrlich erklrt 2 Kostenlose Utilities Die besten HTML-Editoren, Linkchecker, FTP-Tools & mehr FTP-Tools & Grafik-Software 3 Profi-Programme Zum Testen: Dreamweaver & Flash Professionelle Gstebcher, Zhler, Effekte & Animationen
P Grundlagen
P Workshops
P Utilities
Editorial
Die besten Tools fr Homepage-Bastler
Die eigene Homepage

Die Heft-CD enthlt fast 60 Profi-Programme, die Ihnen helfen, Ihren Web-Auftritt zu verwirklichen. Das Beste dran: Viele davon sind gratis. Auf der CD finden Sie auch voll funktionsfhige 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.
Wer seine erste Webseite baut, hat viele Fragen. Wir liefern die Antworten. Auerdem gibts jede Menge Tipps & Tricks zu HTML, Javascript, Flash-Animationen ...
Grundlagen: Eine gut gemachte Website sollte ansprechend und bedienerfreundlich gestaltet werden. Was das konkret heit, erklren wir ab Seite 26. Neben dem Design zhlen selbstverstndlich die Inhalte. Wie Sie die so zusammenstellen, 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 Ihren Wunsch-Domain-Namen sichern (ab Seite 16). Workshops: Wir erklren in einem fnfteiligen Grundkurs ab Seite 58 Schritt fr Schritt, wie Sie eine einfache Website mit Startseite, Unterseiten, Navigationsleiste, Fotogalerie, Link-Liste und Gstebuch erstellen. Wenn Sie hhere Ansprche haben kein Problem: Ab Seite 76 beschreiben wir, wie Sie mit Javascript zum Beispiel ein Spiel einbauen. Mit dem Beitrag ab Seite 88 erstellen Sie in sechs Schritten Ihr erstes Flash-Movie. Kleinere Animationen knnen Sie aber auch ohne Flash zaubern. Wies geht, erfahren Sie ab Seite 92. Zum Nachbauen finden Sie die Workshop-Materialien auf der Heft-CD. Utilities: Wir stellen Ihnen alle Programme vor, die Sie brauchen, um eine Website zu erstellen, zu verffentlichen und zu pflegen: von professionellen Web-Editoren (ab Seite 102) und Gratis-Alternativen dazu (ab Seite 110) bis hin zu Linkcheckern (ab Seite 114), Grafik-Tools (ab Seite 116) und Programmen zum Hochladen der Dateien auf den Webserver (ab Seite 126). Wenn Sie wissen wollen, welche Homepage-Tools Web-Designer noch nutzen, schlagen Sie Seite 120 auf.
Alles, was Sie brauchen

Auf die CD haben wir nicht nur jede Menge Tools gepackt, sondern auch Beispieldateien und Testbilder zu unseren Artikeln. In den Artikeln 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 verfgbar ist. Stand der Angaben in dieser Ausgabe ist November 2003. Keine Angst vor Viren: Bevor die PC-WELT-CDs die Redaktion verlassen, prfen wir sie grndlich mit mehreren Antiviren-Programmen. Wenn Sie sich selbst davon berzeugen wollen: Die Logdatei eines der Virenscanner finden Sie im Hauptverzeichnis der Heft-CD unter der Bezeichnung NOVIRUS.TXT.
Roland Bischoff Stellv. Chefredakteur
PC-WELT SONDERHEFT 2/2004
Inhalt
PC-WELT Sonderheft 2/2004
p AktuellPp Heft-CD/DVDPp ThemenPp TestcenterPp Praxis
GRUNDLAGEN
Platz im Internet
So finden Sie den richtigen Provider
10
Die eigene Domain

Der richtige Name fr Ihre Web-Prsenz
16
Gutes Web-Design
So gestalten Sie Ihre Website optimal
26
Website-Marketing
So machen Sie Ihre Website bekannt
30
Wichtige HTML-Tags
Elementare Grundkenntnisse in HTML
34
Fehlerfahndung
So finden und beseitigen Sie Fehler auf Ihrer Site
38
Platz im Internet
Mit unseren Tipps finden Sie den richtigen Provider fr Ihren Online-Auftritt. Wir sagen Ihnen, worauf Sie achten sollten, und stellen Ihnen die interessantesten Angebote vor auch kostenlose.
Homepage-Lexikon
Die wichtigsten Begriffe kurz und knapp erklrt
40
Homepage interaktiv
Gstebuch und Forum mit Webserver-Scripts
44
Seite 10
Weblogs: So gehts
Online-Tagebcher mit kommentierten Links
48
Geld fr Ihre Website

Wie Sie mit Ihrem Online-Auftritt Geld verdienen
52
WORKSHOPS
Grundkurs I: Die erste Homepage
Die Basis fr Ihren ersten Online-Auftritt
58
Grundkurs II: Layouten mit Zellen

So platzieren Sie die Elemente auf den Seiten
64
Grundkurs III: Fotos ins Web stellen

So bringen Sie Bilder auf Ihre Website
68
Grundkurs IV: Link-Liste anfertigen

So verweisen Sie auf andere Seiten im Netz
72
Die erste Homepage

74
In einem fnfteiligen Grundkurs zeigen wir Schritt fr Schritt, wie Sie eine einfache Website erstellen. Die Beispielseiten haben wir auf die Heft-CD gepackt, Sie knnen mit dem Nachbauen sofort beginnen.
Grundkurs V: Gstebuch erstellen

Im Gstebuch knnen Besucher ihre Meinung sagen
Javascript: So gehts
So nutzen Sie Javascript fr Effekte
76
Seite 58
Inhalt
PC-WELT Sonderheft 2/2004
Web-Seiten mit Style

Stilvorlagen mit Cascading Stylesheets
80
Bilder optimieren
So bereiten Sie Bilder fr den Einsatz im Web vor
84
Flash in 6 Schritten
Peppen Sie Ihre Site mit Flash-Animationen auf
88
Lebendige Homepage
Diashows und Animationen mit Animation Shop
92
Daten hochladen
Datentransfer auf den FTP-Server mit Filezilla
96
Besuchermagnet
So machen Sie Ihren Web-Auftritt attraktiv
98
Peppen Sie Ihre Website mit Flash-Animationen auf mit unserem Schnellkurs fr Einsteiger zaubern Sie schon nach kurzer Zeit ansprechende Filme fr Ihren Online-Auftritt auf den Bildschirm.
UTILITIES
Test: Web-Editoren
3 professionelle Web-Editoren im Test
102
Seite 88
HTML-Editoren light
12 gnstige oder kostenlose Web-Editoren
110
Tote Links finden

So berprfen Sie Ihre Website mit Linkcheckern
114
12 Top-Grafik-Tools
Utilities fr professionelle Grafikelemente
116
18 Homepage-Tools
Spezial-Tools fr Ihre Website
120
Die besten FTP-Tools

Die besten Programme fr den Datentransfer
126
Rubriken
Editorial 5 9 55 128 128
Test: Web-Editoren
Je professioneller die Homepage, desto hher die Anforderungen an den WebEditor. Wir haben Dreamweaver MX, Frontpage 2002 und Golive 6 getestet und auch schon die Nachfolger unter die Lupe genommen.
Das ist auf der Heft-CD Leserumfrage Impressum
Seite 102
Inserentenverzeichnis
P Grundlagen
P Workshops
P Utilities
Die Inhalte
Heft-CD
Auf CD: Top-Tools fr Ihre Website

Egal, ob Sie eine private Website gestalten, einen Internet-Auftritt fr Ihre Firma planen oder eine bestehende Site optimieren mchten: Auf der Heft-CD finden Sie die Software, die Sie dafr brauchen.
Von Anja Laubstein
Die Heft-CD enthlt annhernd 60 Profi-Programme rund ums Thema Die eigene Homepage. Diese Utilities helfen Ihnen, den privaten Web-Auftritt zu verwirklichen oder eine Firmen-Site online zu stellen. Das Beste daran: Viele der vorgestellten Programme sind gratis. Auerdem finden Sie auf der CD voll funktionsfhige Testversionen von Adobe Golive 6 und dem gerade erst vorgestellten Dreamweaver MX 2004 sowie Flash MX 2004 aus dem Hause Macromedia. Als Ergnzung zu den Workshops im Heft finden Sie auf der CD die verwendeten Beispieldateien. Damit knnen Sie die von unseren Experten gezeigten Tipps und Tricks Schritt fr Schritt nachvollziehen und das Gelernte anschlieend fr Ihre Projekte nutzen.
Die Bedienerfhrung der PC-WELT-CD: So gehts los

Wenn Sie die CD einlegen, erscheint ein Hinweisfenster. Falls nicht, starten Sie die Datei PCWSTART.EXE im Hauptverzeichnis der CD. Im Starter whlen Sie, ob Sie die CD mit dem mitgelieferten PC-WELT-Browser oder mit Ihrem Standard-Browser betrachten mchten. Der PC-WELT-Browser ist die komfortabelste Methode die Software lsst sich damit beispielsweise bequem von der CD installieren. Damit der PC-WELT-Browser luft, muss der Internet-Explorer ab Version 5.5 installiert sein. Wenn Sie alternativ Ihren Standard-Browser einsetzen mchten, muss dieser Javascript beherrschen. Die rund 60 Programme, die die PC-WELT-Autoren in ihren Artikeln beschreiben und auf CD mitliefern, finden Sie unter Software zum Heft. Die Software lsst sich nach drei Kriterien sortieren: nach Artikeln im Heft, alphabetisch und nach Kategorien. Haben Sie das gewnschte Programm angeklickt, sehen
Alle Tools fr Ihre Homepage: Auf der CD zu diesem Sonderheft finden Sie alles, was Sie frs Erstellen Ihrer eigenen Online-Prsenz brauchen Web-Editoren, Grafik-Utilities, FTP-Programme und vieles mehr
Sie rechts unten zwei Schaltflchen. Wollen Sie die Software ohne ein Setup auf die Platte bannen, klicken Sie auf Kopieren. Die zweite Schaltflche heit Installieren oder Entpacken und bei sonstigen Dateien ffnen. Wenn Sie auf Installieren klicken, startet eine Setup-Routine. Besteht eine Software aus mehreren Dateien, finden Sie die Schaltflche Entpacken vor. Dann werden die Daten in das Verzeichnis C:\PCWELT\HOMEPAGE2004 entpackt. Wenn Sie Ihren Standard-Browser verwenden, erscheint beim Klick auf Kopieren, Installieren und Entpacken die Dialogbox, die beim Download von Dateien aus dem Internet erscheint. Beim Klick auf ffnen wird sofort die Anwendung gestartet, die mit dem Dateityp verknpft ist. In vielen Artikeln finden Sie den Hinweis C Heft-CD. Bitte haben Sie Verstndnis dafr, dass wir keine Garantie dafr bernehmen knnen, dass die CD-Inhalte auch
auf allen Systemen einwandfrei laufen. Wenn Sie Fehler finden, sind wir fr Hinweise dankbar. Probleme mit fremder Software knnen wir aber nicht lsen. Richten Sie Fragen zu den Programmen bitte direkt an die Software-Anbieter. Schauen Sie bitte auch unter www.pcwelt.de/heft/korrektur.html nach. Dort verffentlichen wir stndig Ergnzungen und Korrekturen zu Heftartikeln und zu der CD. Kritik und Anregungen schreiben Sie bitte in das Forum Ihre Meinung zur aktuellen PCWELT auf www.pcwelt.de/forum unter PCWELT: Aktuelles Heft. Probleme mit der Heft-CD? Falls Sie einen Defekt vermuten, wenden Sie sich fr Ersatz bitte direkt an: A.B.O. Verlagsservice unter Tel. 089/20959333, Fax 20028111 oder auch per Mail: idg@csj.de. Manche schnellen CDLaufwerke lesen nicht alle CDs auf Anhieb. Meist funktioniert es aber nach einigen Anlufen.
Grundlagen Webspace GRUNDLAGEN PPpPPP

S. xx S. xx
pGrundlagen
P Workshops
P Utilities
10 WEBSPACE
Ihr Platz im Internet
16 EIGENE DOMAIN
Ein Name fr Ihre Prsenz
26 WEB-DESIGN
Eine gute Site bauen
30 SUCHMASCHINEN
Ihre Site bekannt machen
34 HTML-TAGS
Das sind die wichtigsten
40 GLOSSAR
Die wichtigsten Begriffe
44 INTERAKTIVE SITE
Webserver-Scripts und viele weitere Themen
GRUNDLAGEN
Platz im Internet
Mit unseren Tipps finden Sie den richtigen Provider fr Ihren Web-Auftritt. Wir sagen Ihnen, worauf Sie bei der Auswahl achten sollten, und stellen die interessantesten Angebote vor.
Von Dirk Wischmann
Wenn Sie eine Website ins Internet stellen mchten, mssen Sie sich neben den Inhalten und der Gestaltung auch mit der Frage befassen, welches der richtige Webspace-Provider ist, dessen Angebot Ihren Bedrfnissen am besten entspricht. Rund 1000 Webhoster stehen hierzulande zur Wahl, wobei der Provider-Markt stndig in Bewegung ist: Neue Anbieter kommen hinzu, und alte streichen die Segel. Erschwert wird die Entscheidung noch dadurch, dass die Provider in schner Regelmigkeit mit immer neuen Angeboten und Tarifen aufwarten, mit denen sie Neukunden gewinnen oder sich gegenseitig Kunden abjagen mchten. Auf den folgenden Seiten geben wir Ihnen Entscheidungskriterien an die Hand und informie-
ren Sie ber die interessantesten Angebote. Ausfhrliche Infos zum Thema DomainNamen sichern Kosten, Rechte, Pflichten finden Sie 2 ab Seite 16.
1. Vor der Provider-Wahl: Grundstzliche berlegungen

Vor der Auswahl des Providers sollten Sie schon eine recht genaue Vorstellung vom eigenen Web-Auftritt haben. Wie viel Platz braucht die Site? Wollen Sie groe Dateien zum Download anbieten? Welche zustzlichen Funktionen brauchen Sie? Mit welchen Besucherzahlen rechnen Sie? Wer sich ber diese Dinge von vorneherein einigermaen im Klaren ist, luft nicht Gefahr, ein berdimensioniertes, teures Angebot mit vielen ungenutzten Funk-
XX
pGrundlagen
P Workshops
P Utilities
Webspace Grundlagen PPPpPP S. xxx S. xxx
Inhalt 1. Vor der Provider-Wahl: Grundstzliche berlegungen 2. Die Art der Domain whlen 3. Keine Beschrnkungen hinnehmen 4. Diese Merkmale sollte ein Webserver untersttzen 5. So vermeiden Sie die Traffic-Kostenfalle 6. Profi-Alternative: Einen eigenen Server mieten Ksten Provider-Suche im Internet: Webhostlist.de Webspace bei InternetZugangsanbietern HTML-Software Im berblick: Ausgewhlte Webspace-Provider
Seite
10 11 12 13 13 15
11 12 13 14
tionen zu whlen. Ohnehin bieten alle serisen Webspace-Anbieter die Mglichkeit, whrend der Vertragslaufzeit das gewhlte Paket upzugraden und damit an neue Bedrfnissen anzupassen. Im Zweifel hilft auch ein Blick in die Allgemeinen Geschftsbedingungen (AGB) der Anbieter. Keine Zwangswerbung zulassen Sicherlich legen Sie keinen Wert darauf, dass Ihr Web-Auftritt von strenden Werbeeinblendungen in Form von Bannern oder festgelegten Frames verunstaltet wird. Da dies insbesondere bei kostenlosen An-
bietern fter vorkommt, sollten Sie bei der Provider-Wahl darauf achten, wie es der Anbieter mit der Werbung hlt. Ebenso wichtig: Ihr Provider sollte Ihnen die Mglichkeit bieten, eine eigene Second-Level-Domain wie <meinname>.de einzurichten (2 Punkt 2). Achten Sie auch darauf, dass der Provider ein Heraufladen (Upload) Ihrer Dateien auf den Webserver per FTP erlaubt. Viele Provider bieten nur ein HTTP Web-Frontend. Da sich damit maximal zehn Dateien gleichzeitig hochladen lassen, artet der Upload vieler Dateien zum Geduldsspiel aus (2 ab Seite 96).
Provider-Suche im Internet: Webhostlist.de

Unter www.webhostlist.de knnen Sie aus ber 700 Eintrgen nach dem fr Sie geeigneten Provider suchen. In der erweiterten Suche legen Sie den Standort und das Betriebssystem des Servers fest und bestimmen den bentigten Speicherplatz sowie das zu erwartende Transfervolumen. Fr professionelle Websites lassen sich auch interaktive Funktionen wie Scripts und Programmiersprachen als Kriterien definieren sowie die Mglichkeit, mehrere Datenbanken zu integrieren. Als Suchergebnis erhalten Sie eine Liste mit Webspace-Anbietern, die Angebote fr Ihre individuellen Bedrfnisse im Sortiment haben. Fr einen schnellen berblick ber wichtige Provider lesen Sie unsere 2 Tabelle ab Seite 14.
Um Ihre Website online zu stellen, gibt es eine Reihe von Mglichkeiten vom kostenlosen Webspace bis hin zum gemieteten Server, auf dem Sie beliebige Software installieren (2 Punkt 6, Profi-Alternative: Einen eigenen Server mieten). Aber auch die meisten Internet Service Provider (ISP) bieten ihren Kunden neben einem Internet-Zugang die Mglichkeit, eine eigene Website online zu stellen (2 Kasten Webspace bei Internet-Zugangsanbietern). Was bei Ihrem Internet-Provider in diesem Punkt mglich ist, steht in Ihren Vertragsbedingungen. In unserer 2 Tabelle Im berblick: Ausgewhlte WebspaceProvider haben wir fr Sie kostenlose und kostenpflichtige Anbieter aufgelistet.
2. Die Art der Domain whlen

Gratis-Webspace-Hoster sind im Internet zahlreich vertreten, die Anmeldung lsst sich in der Regel schnell und unkompliziert erledigen. Nachdem die BesttigungsMail des Providers eingetroffen ist, steht der Webspace schon nach kurzer Zeit zur Verfgung. Wir empfehlen Ihnen, einen
Auswahl: Bei www.webhostlist.de knnen Sie gezielt suchen
11
Grundlagen Webspace PPpPPP S. 10 S. 15
pGrundlagen
P Workshops
P Utilities
schrnkungen in puncto Upload-Geschwinalso versuchen, eine eigene digkeit eingefhrt und sogar die erlaubte Domain zu registrieren, sollDateigre begrenzt, um so etwa die Lageten Sie prfen, ob diese noch rung von Filmen zu unterbinden. frei ist. Den Check fr .de-DoDoch damit nicht genug: Einige Anbiemains erledigen Sie zum Beiter verbieten sogar gnzlich den Upload spiel in der Registrierungsvon Multimedia-Daten MP3- oder JPGdatenbank der DomainverDateien etwa werden automatisch von waltungsgesellschaft fr die ihren Servern gelscht. Dieses Vorgehen ist Top-Level-Domain .de Denic zwar verstndlich, aber fr Kunden, die Urunter www.denic.de (Details laubsbilder oder eigene Musikstcke verfdazu ab 2 Seite 16). fentlichen wollen, rgerlich und somit ein Viele kommerzielle HosK.o.-Kriterium bei der Auswahl. ter bieten die Option, SubBei kostenpflichtigen Webspace-Anbiedomains, etwa fr jedes Fatern gibt es in der Regel keine Einschrnmilienmitglied, einzurichkungen bei Upload-Tempo und Dateitypen. ten, nach dem Muster <zuDoch sollten Sie auch hier durch einen satz>.<meinname>.de. Sie Blick in die AGB und die Antworten der sollten bei Abschluss der Veram hufigsten gestellten Fragen (FAQs) sitrages auch darauf achten, chergehen, dass dem tatschlich so ist. dass Ihr Provider bei der Beantragung einer neuen DoQual der Wahl: Webspace-Provider wie 1&1 oder Strato bieten fr jeden Geschwindigkeit testen main bei der Denic Sie als Geldbeutel eine breite Palette an Webspace-Angeboten (Punkt 2) Die meisten Web-Prsenzen liegen auf so Besitzer, also als admin-c, genannten Shared-Hosting-Umgebungen. der Adresse eintragen lsst. deutschsprachigen Dienst zu whlen: Da Dabei teilen sich Kunden einen ServerNur so ist sichergestellt, dass ein Umzug die verwendeten Server meist in Europa steRechner, weshalb die einzelnen Pakete der Web-Prsenz zu einem anderen Diensthen, ist berwiegend fr eine gute Gerecht preiswert sind. Jeder Kunde erhlt ein leister ohne groe Probleme funktioniert. schwindigkeit gesorgt. Auerdem gestalten Kontingent an Festplattenplatz, auf das er 3. Keine Beschrnkungen sich Supportfragen deutlich einfacher. per FTP zugreifen kann, sowie einen Mailhinnehmen Nicht ganz so einfach ist es, wenn Sie zugang und administriert in der Regel Immer wieder kommt es vor, dass zwieeine Second-Level-Domain wie <mein ber ein Web-Frontend des Hosters. lichtige Gestalten Gratis-Webspace als Laname>.de bentigen. Fr eine private HoDa die Anbieter natrlich versuchen, gersttte von illegalen Inhalten nutzen. Aus mepage ist eine Sub-Level-Domain la die einzelnen Server auszulasten und auf diesem Grund haben viele Anbieter Be<meinname>.<Provider>.de noch akzeptaeiner Maschine manchmal bis zu mehrere bel, geht es jedoch zum Beispiel um die Firmenprsenz oder wollen Sie einen WebShop betreiben, muss eine Second-LevelDomain wie <meinname>.de her. Webspace bekommen Sie in der Regel auch von Ihrem InterDiesen Service bietet jedoch kein Gratisnet Service Provider (ISP) kostenlos oder sehr preiswert. Hoster. In diesem Fall hilft nur der Umweg T-Online: Fr 2,95 Euro im Monat bietet T-Online seinen Kunber so genannte Weiterleitungsdienste den 10 Gigabyte (GB) Speicherplatz und ein Transfervolumen wie Alpen NIC (www.alpennic.de) oder Dot TK von 2 GB pro Monat. Die Sub-Level-Domain, die Sie erhalten, (www.nic.tk). Diese Dienste verwalten nur Ihhat das Muster <meinName>.privat.t-online.de (ohne Anre Web-Adressen und leiten den Datenverfhrungszeichen), gegen einen Aufpreis von 0,95 Euro im kehr gratis etwa von <meinname>.de.tt beMonat bietet T-Online auch eine Domain la <meinName>. ziehungsweise <meinname>.tk auf Ihre de (ohne Anfhrungszeichen). Website bei einem Gratis-Hoster um. AOL: Hier haben Mitglieder unter http://hometown.aol.de die AOL: Der Online-Designer gengt Ist Ihnen Ihr Web-Auftritt einige Euro Mglichkeit, eine einfache Homepage zu erstellen. Der Spei- nur einfachen Anforderungen wert, knnen Sie fr Ihre private Site aus cherplatz betrgt pro AOL-Name 20 MB, der Traffic ist unbeAngeboten kostenpflichtiger Webhoster grenzt. Allerdings bekommen Sie weder eine Second- noch eine Sub-Level-Domain. Der einfawhlen (2 Tabelle Im berblick: Ausgeche Online-Designer gengt allenfalls einfachen privaten Anforderungen. whlte Webspace-Provider). In der Regel Arcor: 50 MB stellt Arcor seinen Kunden fr die Homepage zur Verfgung, wobei die Webbekommen Sie bei kostenpflichtigen AngeAdresse das Muster www.home.arcor.de/<Benutzername> (ohne Anfhrungszeichen) hat. Firboten von Haus aus schon Ihren Wunschmenkunden knnen auch eine .de-Domain registrieren. Domain-Namen mit einer Top-Level-DoAuch andere bundesweit ttige und zahlreiche lokale Internet-Provider machen entsprechende main-Endung wie .de, .com, .net oder .org. Angebote. Nhere Infos finden Sie in den AGBs des jeweiligen Anbieters. Allerdings wird es zunehmend schwieriger, eine freie Adresse zu finden. Bevor Sie
Webspace bei Internet-Zugangsanbietern
12
pGrundlagen
P Workshops
P Utilities
Webspace
Grundlagen PPPpPP S. 10 S. 15
Hundert Web-Prsenzen hosten, kann es unter Umstnden zu Geschwindigkeitseinbuen bei den Seitenaufrufen kommen. Tipp: Da Sie selbst die Leistung eines Hosters im Vorfeld kaum berprfen knnen, sollten Sie mal www.hostwatch.de besuchen. Dort verffentlicht die Interessengemeinschaft fr Internet-Anwender Testmessungen, die sie laufend bei vielen deutschen Webspace-Providern durchfhrt.
4. Diese Merkmale sollte ein Webserver untersttzen

Ein paar bunte Web-Seiten liefert jeder Webserver aus. Mchten Sie auf Ihrer Website aber etwa ein Gstebuch, Antwortformulare, Besucherzhler und effektive Suchfunktionen integrieren oder gar einen Webshop mit sicherer SSL-Verschlsselung betreiben, muss der Webserver eine Scriptsprache untersttzen (2 ab Seite 44). Perl und PHP sind die zurzeit populrsten Sprachen fr die Implementierung solcher interaktiver CGI-Anwendungen
Verfgbarkeit 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-Software
Besonders Einsteiger ohne Programmiererfahrung bentigen zum Erstellen der eigenen Homepage entsprechende Software. Viele Provider versorgen ihre Neukunden mit einem Software-Bundle, das unter anderem einen HTML-Editor enthlt. Strato zum Beispiel liefert bei den Premium-Paketen Golive 6.0, Photoshop Elements 2.0 und Live Motion 2.0 von Adobe mit. Und wer seinen Webspace bei 1&1 bestellt, bekommt die Vollversionen von Net Objects Fusion 7 und Uleads Photo Impact 8 SE. Allerdings sollten Sie Ihre Wahl nicht unbedingt von den SoftwareBeigaben abhngig machen. Haben Sie sich fr ein Angebot entschieden, bei dem keine Software mitgeliefert wird, so knnen Sie auf viele leistungsstarke kostenlose Programme zurckgreifen. Eine groe Auswahl davon haben wir Ihnen 2 ab Seite 110 zusammengestellt.
(2 Seite 40). Zwar bieten einige Provider so genannte Basis-CGIs oder eine CGISammlung. Das heit jedoch nicht, dass der Kunde eigene Scripts benutzen, sondern lediglich, dass er auf die vom Anbieter bereitgestellten zurckgreifen kann. Tendieren Sie zu einem Gratis-Anbieter, informieren Sie sich, am besten wieder durch einen Blick in die AGB, ob Ihnen zumindest das Ausfhren eigener Perl-Scripts erlaubt ist. Bei kommerziellen Anbietern haben Sie meist die Wahl zwischen mehreren Paketen, die es dem Kunden je nach Bedarf erlauben, eigene Scripts zu installieren, in Einzelfllen auch in einer weniger verbreiteten Programmiersprache. Soll auf der Site eine Datenbank getriebene Anwendung laufen, ist ein kritischer Blick auf den Leistungsumfang des Hosters obligatorisch: Die meisten Server laufen unter Linux oder anderen Unix-Systemen und unterhalten MySQL-Datenbanken. Rigorose Gratis-Anbieter Wer von seinem Webhoster eine garantierte Leistung erwartet und einen Web-Auftritt bentigt, der jederzeit erreichbar ist und immer funktioniert, sollte einen kommerziellen Anbieter whlen. Denn um einem Missbrauch der Accounts vorzubeugen und sich rasch und unkompliziert von Missettern zu trennen, haben fast alle Gratis-Anbieter in ihren AGB Richtlinien festgelegt wie Anbieter XX ist jederzeit berechtigt, Nutzer ohne Vorankndigung und ohne Angaben von Grnden vom Dienst
auszuschlieen. Andere Gratis-Hoster berwachen die Zugriffe auf einzelne Dateien und deren Download-Volumen und sperren oder lschen den betreffenden Account bei berschreiten bestimmter Grenzwerte kommentarlos.
5. So vermeiden Sie die Traffic-Kostenfalle

Der Provider erfasst genau den Traffic, das heit die vom und zum Server bertragenen Kilobyte. Normalerweise verzeichnen private Homepages kaum mehr als ein paar Hundert Seitenzugriffe im Monat. Es kann aber vorkommen, dass eine Website pltzlich populr wird, sei es, weil Hacker den Space missbrauchen oder weil die Site neue Inhalte prsentiert, die viele Surfer auerordentlich interessant finden. Dann wird das vereinbarte Daten-Transfer-Limit schnell berschritten. Zahlen muss in jedem Fall der Kunde, wodurch ihm unter Umstnden deutlich hhere Kosten entstehen als ursprnglich kalkuliert. Wird das vorgegebene Volumen berschritten, berechnen die Provider zwischen 5 und 30 Euro pro GB. Darum sollten Sie den entstandenen Traffic regelmig berwachen. Am einfachsten geschieht dies mit speziellen Tools, die die meisten Provider kostenlos anbieten. Ist Ihnen von vorneherein klar, dass Ihre Website viel Traffic haben wird, sollten Sie auf ein Webspace-Angebot mit unbegrenztem Transfervolumen zurckgreifen, auch wenn es etwas teurer ist als Angebote mit Limit.
All inclusive: Webspace plus die bentigten Programme
13
Grundlagen Webspace PPPPpP S. 10 S. 15
pGrundlagen
P Workshops
P Utilities
Im berblick: Ausgewhlte Webspace-Provider

Kostenlose Webspace-Provider Anbieter 8ung Beepworld Paket Internet-Adresse www.8ung.at www.beepworld.de Anmeldegebhr Laufende Kosten 1) Domains www.<user>.8ung.at oder .tk oder .de.tt 2) www.beepworld.de/members/ <mitgliedsname> oder .tk oder .de.tt 2) www.members.fortunecity.de/ <user> oder .tk oder .de.tt 2) www.people.freenet.de/<wunsch name> oder .tk oder .de.tt 2) de.geocities.com/<user>oder .tk oder .de.tt 2) Webspace 20 MB 100 KB Mailpostfcher 1
Fortunecity Freenet Geocities Heim.at Fortgeschrittene
www.fortunecity.de www.freenet.de/dienste /homepage/index.html www.geocities.de www.heim.at
25 MB 60 MB 15 MB
1 1
http://<gebiet>.heim.at/<subgebiet>/ 20 MB <nummer> oder .tk oder .de.tt 2) www.<ihrname>.it-pc.de .tk oder .de.tt 2) Anzahl/Domain-Endungen 10 MB 50 MB
it-pc.de Tripod Kostenpflichtige Webspace-Provider 1&1 1&1 All-inkl.com Domainbox Domainbox Visitenkarte 4.0 Star Paket 4.0 Web Premium A Start BOX .1 Start BOX .2
www.it-pc.de www.tripod.lycos.de
20 5
www.1und1.com www.1und1.com www.all-inkl.com www.domainbox.de www.domainbox.de www.domainfactory.de www.hosteurope.de www.webcenter.lycos.de www.manitu.de www.manitu.de www.netbeat.de www.netbeat.de www.strato.de www.strato.de www.strato.de
9,60 Euro 9,60 Euro 4,95 Euro 1,79 Euro 3,79 Euro 3,99 Euro 7,90 Euro 6,90 Euro 2,49 Euro 4,99 Euro 0,27 Euro 2,49 Euro 0,99 Euro 2,49 Euro 2,49 Euro
1,49 Euro 6,99 Euro 15 Euro 0 Euro 0 Euro 0 Euro
1 / .de 1 / .de, .com, .net, .org 1 / .de, .com, .net, .org u.v.m. 1 / .de, .com, .net, .org 1 / .de, .com, .net, .org 1 / .de, .com, .net, .org
10 MB 100 MB 200 MB 10 MB 100 MB 50 MB 250 MB 250 MB 1 MB 50 MB 5 MB 20 MB 2 MB 25 MB 100 MB
1 50 200 50 250 unbegrenzt 100 50 1 10 1 10 12 50 85
Domainfactory Hosting Starter Hosteurope Lycos Manitu Manitu Netbeat Netbeat Strato Strato Strato Webpack L Plus Paket Visitenkarte Newcomer Level 1 Level 2 Web-Visitenkarte S Web-Visitenkarte M Power Web A
14,90 Euro 1 / .de 9,60 Euro 19 Euro 19 Euro 9,99 Euro 9,99 Euro 1 / .de, .com, .net, .org 1 / .de, .com, .net, .org 1 / .de, .com, .net, .org 1 / .de 1 / .de, .com, .net, .org, .biz, .info
19,90 Euro 1 / .de 19,90 Euro 1 / .de 19,90 Euro 3 / .de, .com, .net, .org
1) pro Monat 2) mit Weiterleitungsdienst k. A. = keine Angabe Stand: November 2003
14
pGrundlagen
P Workshops
P Utilities
Webspace
Grundlagen PPPPPp S. 10 S. 15
6. Profi-Alternative: Einen eigenen Server mieten

Fr professionelle Web-Auftritte oder anspruchsvolle Anwender, die 100 Prozent Kontrolle und Funktionalitt wollen, bieten sich gemietete eigene Server an. Diese so genannten dedizierten oder Root-Server sind in den letzten Monaten recht preiswert geworden und schon ab etwa 30 Euro pro Monat zuzglich Einrichtungsgebhr zu bekommen (etwa bei Strato, www.strato. de, 2 Tabelle links). Bei einem eigenen Server mssen Sie sich keine Gedanken um irgendwelche Funktionen wie Scriptsprachen, Datenbanken und SSL-Verschlsselung oder um eine etwaige Beschrnkung beim Upload-Tempo respektive bei den Dateitypen machen. Die bentigten Anwendungen installieren Sie einfach selber, und die volle Leistung des Systems steht exklusiv fr Ihre Website zur Verfgung. Allerdings sind Sie als Betreiber auch selbst fr die Wartung und die Sicherheit Ihres Systems verantwortlich. Meist bestehen die Server-Pakete aus so genannten LAMP-Systemen. LAMP steht fr Linux-Apache-MySQL-PHP, und dies bedeutet insbesondere, dass die Maschinen sofort fr Webserver-Dienste, DatenbankImporte und dynamische Inhalte startklar sind. In der Regel sind diese Systeme preiswerter als etwa Windows-2000-Rechner, da keine Lizenzgebhren fllig werden. Falls Sie keine fundierten Linux-Kenntnisse besitzen schlielich gilt es, eigenverantwortlich den eigenen Server mit allen Konsequenzen bezglich Updates und Sicherheit zu warten , bieten die Hoster (zum Beispiel 1&1) ohne Mehrkosten auch fremdadministrierte Server ohne Root-Zugang, die dann vom Provider selbst gewartet und up to date gehalten werden.
Scriptsprachen
Datenbank
FreiTraffic k. A. k. A.
Traffic-Kosten / Gigabyte k. A. k. A.
Sonstiges Bannerwerbung, nur fr Einsteiger
k. A.
k. A.
k. A. k. A. k. A. k. A.
k. A. k. A. k. A. k. A.
Bannerwerbung Newsticker, Umzugs-Service Bannerwerbung http://see.you.at/<beliebigername> gegen Bannerwerbung oder http://<user>.at kostenpflichtig
Perl, eigene PHP
1 MySQL (1MB) MySQL
500 MB fair use
Sperrung bei Errei- chen des Limits k. A. werbefinanziert
nur Basics-CGIs PHP, Perl / eigene CGIs PHP, Perl / eigene CGIs Basis-CGIs freie Perl oder CGIs freie Perl, C/ C++, Phyton Basis-CGIs PHP, Perl / eigene CGIs Basis-CGIs
3 x MySQL 1 x MySQL 1 x MySQL 1 x MySQL
2 GB 7,5 GB 15 GB 10 GB 15 GB unbegrenzt / fair use 25 GB 10 GB 5 GB 10 GB unbegrenzt unbegrenzt 4 GB 4 GB 7,5 GB
15 Euro 15 Euro 1,99 Euro 2,50 Euro 2,50 Euro 0,30 Euro 3 Euro 5 Euro 5 Euro 15 Euro 15 Euro 15 Euro
gleiches Paket mit Werbung fr 0,99 Euro im Monat gleiches Paket mit Werbung fr 4,99 Euro im Monat PHPMyAdmin, htaccess, kostenloser Tarifwechsel htaccess, kostenloser Tarifwechsel htaccess, kostenloser Tarifwechsel, SSL-Verschlsselung SSL, IMAP Sub-Domain 0,99 Euro, MySQL 0,99 Euro, SSL-Server 9,99 Euro1) Sub-Domain 0,99 Euro, MySQL 0,99 Euro, SSL-Server 9,99 Euro1) Software-Paket, unter anderem mit Namo Web Editor 4 Software-Paket, unter anderem mit Namo Web Editor 4 Software-Paket mit Adobe Golive 6.0, Photoshop Elements 2.0, Live Motion 2.0
Mehr Infos
PC-WELT-Sonderheft Mit dem Sonderheft PC-WELT Top-Tipps frs Internet kommen Sie sicher ins Web, surfen schneller und zahlen weniger. Es kostet 7,60 Euro und ist eine gute Ergnzung zum vorliegenden Heft, das sich speziell mit der Erstellung einer eigenen Web-Prsenz beschftigt.
15
Die eigene Domain

Mit der inhaltlichen und grafischen Gestaltung ist die Arbeit am Web-Auftritt noch nicht getan. Ein guter Name frs Angebot und das Wissen um rechtliche Konsequenzen gehren auch dazu.
Von Ingo Bhme
datenbanken fr Top Level Domains 2 auf Seite 23 genannten Internet-Adressen. Fr .de-Domains ist dies www.denic.de, fr .atDomains www.nic.at, fr .ch-Domains lautet die Adresse www. switch.ch. Fr unser Beispiel karl-auer.de ffnen Sie www.denic.de in Ihrem Browser und klicken dort auf WHOIS-Suche. Geben Sie dann im Eingabeformular den gesuchten Domain-Namen ohne Zustze wie http:// oder www ein, in unserem Beispiel also karl-auer.de (ohne Anfhrungszeichen). Bei dieser Beispielabfrage erfahren Sie, dass es bereits eine Site mit diesem Namen gibt und wer diese Domain registriert hat. Versuchen Sie es hingegen mit der Verballhornung Kal-Auer.de, erhalten Sie (Stand: Oktober 2003) die Information, dass dieser Name noch nicht registriert ist. Tipp: Bei einigen Anbietern beispielsweise bei www.sedo.de oder www.united-domains.de (2 Abbildung auf der rechten Seite oben) mssen Sie nur den Namen, also etwa karl-auer (ohne Anfhrungszeichen) eingeben, und die Suchmaschine prft smtliche 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 Bereitschaft, fr einen guten Domain-Namen horrende Summen zu bezahlen, deutlich zurckgegangen. Dennoch haben gute, eingngige, bekannte oder aus sonstigen Grnden lukrative Adressen immer noch ihren Preis. Meistens werden diese und andere Domain-Namen ber Portale zum Verkauf angeboten, die darauf spezialisiert
Wer beschlossen hat, eine private Homepage oder gar eine kommerzielle Website ins Internet zu stellen, steht zunchst mit vielen Fragen da: Wie erstelle ich die Seiten? Wie bekomme ich sie ins Web? Wie finde ich einen freien DomainNamen im Internet? Und wie und wo kann ich ihn fr mich reservieren? Was muss ich bei der Namenswahl und beim Aufbau meiner Website aus juristischer Sicht beachten? Antwort auf die ersten beiden Fragen geben Ihnen zahlreiche andere Beitrge in diesem PC-WELT-Sonderheft. Auf den folgenden vier Seiten geht es um den Erwerb einer Domain und die rechtlichen Aspekte eines Online-Auftritts.
1. Der eigene Domain-Name: Verfgbarkeit prfen

Wer einen der groen Online-Provider fr den Zugang zum Internet nutzt, beispielsweise AOL oder T-Online, erhlt von vornherein Webspace, also Platz im Internet fr
die eigene Homepage. Ausfhrliche Informationen dazu finden Sie im vorhergehenden Beitrag (ab 2 Seite 10). Allerdings ist die Adresse, mit der Ihre Website dann im Internet steht, alles andere als gut zu merken. Ihr Angebot mag dann noch so professionell sein eine Adresse wie http://home.t-on line.de/home/karl.auer/ wirkt nicht gerade profihaft. Besser und eingngiger wre da sicher eine Domain wie www.karl-auer.de, die ausschlielich den eigenen Namen oder gewnschten Begriff enthlt und nicht durch andere Bestandteile entstellt wird. Um zu prfen, ob der gewnschte Name noch frei ist, verwenden Sie eine der Schon vergeben: Ob eine Domain bereits registriert ist, verraten die Regisim Kasten Registrierungs- trierungsdatenbanken, hier die fr .de-Domains (Punkt 1)
16
pGrundlagen
P Workshops
P Utilities
Die eigene Domain
Grundlagen PpPP S. 16 S. 23
der Abteilung Top Domains, wo Domain-Namen wie Marketing.de gerne einmal zu Preisen wie 400.000 Euro im Angebot stehen. Mit einem Klick auf einen Domain-Namen gelangen Sie auf eine Seite mit nheren Informationen. Von dort aus knnen Sie auch ein Gebot abgeben. Dadurch treten Sie mit dem Verkufer in Kontakt und knnen ber den Preis verhandeln. Werden Sie sich einig, tritt Sedo wieder in Aktion. Kosten fr die VermittAuf einen Rutsch: Hier knnen Sie Ihren Wunsch-Domain-Namen mit meh- lung entstehen nur dem Verreren Top-Level-Domain-Endungen auf einmal berprfen (Punkt 1) kufer, er zahlt zehn Prozent (mindestens 75 Euro) sind, den Handel transparent und schnell an Sedo. Darin ist auch schon die kompletber die Bhne zu bringen. te Abwicklung enthalten. Der Kufer hinDas bekannteste Handelsportal fr Dogegen bezahlt lediglich den mit dem Vermain-Namen im deutschsprachigen Raum kufer ausgehandelten Preis. ist www.sedo.de (2 groe Abbildung auf der 3. Meistbietend: Domain-Namen linken Seite oben). Mchten Sie sich dort lein einer Auktion ersteigern diglich ein wenig umsehen, brauchen Sie Eine in aller Regel preiswertere und schnelsich nicht anzumelden. lere Variante ist die Ersteigerung eines DoUm jedoch eine Domain zu kaufen oder main-Namens ber ein Online-Auktionszu verkaufen, mssen Sie sich zunchst bei haus wie Ebay. ffnen Sie in Ihrem Browser Sedo registrieren, natrlich kostenlos. Diewww.ebay.de. Wenn Sie noch nicht bei Ebay ser Vorgang ist unkompliziert, und auer registriert sind, mssen Sie dies zunchst Ihren Adressdaten geben Sie keine Informit einem Klick auf Anmelden nachhomationen von sich preis. Nach knapp zwei len, bevor Sie bei Auktionen mitsteigern Minuten einschlielich Besttigung per knnen. Dann wechseln Sie in die KategoMail sind Sie dabei. rie Computer und darin zu den Domainnamen, die nach Top-Level-DomainGebote abgeben Endungen unterteilt sind. Hier finden Sie Direkt auf der Sedo-Startseite geben Sie permanent einige Hundert de-Domain-Nawahlweise einen Suchbegriff ein oder stmen in der Versteigerung. bern im Domain-Katalog innerhalb der RuGesteigert wird wie berall bei Ebay briken. Ein bisschen wie der Rundgang durch Abgabe eines Gebots oder durch eidurchs Ferrari-Autohaus ist ein Besuch in
Inhalt 1. Eigener Domain-Name: Verfgbarkeit prfen 2. Domain-Namen-Handel: So funktioniert der Kauf 3. Meistbietend: Domain-Namen in einer Auktion ersteigern 4. Gelschte Domain-Namen: Im Internet suchen 5. Jetzt gilts: Domain-Namen registrieren lassen 6. Rechtliche Grundlagen: Das mssen Sie beachten 7. Impressum: Pflicht auf jeder Website
Seite
16 16 17 17 18 18 23
Ksten Gekaufte Domain-Namen bernehmen 17 Kosten eines Internet-Auftritts 18 Registrierungsdatenbanken fr Top-Level-Domains 23
nen Klick auf Sofort Kaufen, wodurch Sie ohne groes Warten an den Domain-Namen gelangen. Haben Sie den Zuschlag erhalten, mssen Sie den Domain-Namen auf Ihren Provider bertragen. Wie das funktioniert, erfahren Sie im 2 Kasten unten auf dieser Seite. Noch eine Warnung: Achten Sie bei Ebay in jedem Fall darauf, dass es sich auch wirklich um den Verkauf einer Domain handelt, sonst kann es ein bses Erwachen geben. Denn manche Anbieter vermieten einen Domain-Namen lediglich, und bei dem ausgeschriebenen Preis handelt es sich um die Monatsmiete.
4. Gelschte Domain-Namen: Im Internet suchen

Neben der Suche nach dem gewnschten ist auch die Suche nach gerade gelschten Domain-Namen eine gute Mglichkeit, einen passenden Namen aufzutreiben. Denn tglich werden Hunderte von Domain-Namen von ihren Besitzern zurckgegeben. Und da knnte durchaus ein Name dabei sein, der vielleicht hervorragend zu Ihrem Internet-Auftritt passt und an den Sie noch gar nicht gedacht haben. Den besten Service bietet der sterreichische Anbieter Domainname.at (2 Abbildung auf der nchsten Seite oben). Mit Hilfe eines Suchformulars unter www.domain name.at/deleted_search.php knnen Sie recherchieren, welche Domain-Namen gera-
Gekaufte Domain-Namen bernehmen

Die meisten groen Anbieter halten in ihrem Download-Bereich smtliche Formulare fr den Wechsel einer Website zu einem anderen Provider oder auch fr den Wechsel des Inhabers einer Domain bereit. Grundstzlich muss zunchst der Verkufer seinen alten Provider darber informieren, dass ein Inhaberwechsel, ein so genannter KK (Konnektivitts-Koordination), ins Haus steht. Ist dieser informiert, knnen Sie bei Ihrem Provider den Wechsel initiieren. Dieser stellt den Antrag bei der Denic, die wiederum das Okay des alten Providers und des alten Besitzers einholt. Beide mssen zustimmen, bevor der Wechsel vonstatten gehen kann. In aller Regel fallen dadurch keine neuen Kosten an. Lediglich die jhrlichen Registriergebhren sind sofort fllig und gelten ab da fr den Zeitraum eines Jahres, ganz gleich, ob der bisherige Besitzer sie bereits bezahlt hat oder nicht.
17
Grundlagen PPpP S. 16 S. 23
Die eigene Domain
pGrundlagen
P Workshops
P Utilities
beispielsweise Puretec.de, Schlund.de oder Strato.de als Kunde angemeldet sind. Nicht jeder Anbieter untersttzt smtliche Top-LevelDomains. Untersttzt Ihr Provider beispielsweise die teure .ag-Endung nicht (sie steht eigentlich fr Antigua and Barbuda, wird aber als Abkrzung fr Aktiengesellschaft verwendet), knnen Sie bei den meisten Registrierungsportalen, zum Beispiel United-domains.de, den Namen anmelden und berwiegend kostenlos Besonderer Service: Bei Domainname.at finden Sie gerade wieder frei geeine Weiterleitung auf eiwordene Domain-Namen fr verschiedene Lnder (Punkt 4) nen anderen Domain-Namen festlegen. Gibt dann jede wieder frei geworden sind. Suchen Sie mand Ihren AG-Namen im Browser ein, zum Beispiel einen .de-Domain-Namen, der wird er, ohne es zu merken, auf eine andenicht lnger als zehn Zeichen ist und den re Ihrer Seiten umgeleitet. Begriff shop enthlt, whlen Sie zu6. Rechtliche Grundlagen: nchst ganz oben die Top-Level-Domain aus Das mssen Sie beachten der Drop-down-Liste rechts neben ... suche Whrend es 1996 gerade mal drei Urteile nach Domains. Geben Sie im Textfeld zum Thema Recht im Internet gab, sind rechts neben mit dem Begriff Ihren Suches heute bereits viele Hundert, oft durch begriff also beispielsweise shop ein Abmahnvereine erwirkt. In deren Kreuz(ohne Anfhrungszeichen). Whlen Sie aus feuer knnen auch Sie theoretisch geraten, der unteren Drop-down-Liste den Eintrag sobald Sie mit Ihren Seiten online geganNicht mehr als, und tragen Sie rechts dagen sind. Daher sollten Sie sich ber einige neben in das Textfeld die Zahl 10 ein. rechtliche Gegebenheiten im Klaren sein. Nach einem Klick auf Go erhalten Sie die Bei der Wahl des Domain-Namens lieerste Ergebnisseite. gen die ersten Fallstricke. Auf die VerwenSollten Sie bei Ihrer Suche nicht fndig dung von Markennamen sollten Sie grundgeworden sein, versuchen Sie es einfach stzlich verzichten. Deren Inhaber genieam nchsten Tag noch einmal. Wird etwas en in Deutschland einen sehr umfassenangezeigt, und der Name gefllt Ihnen, so den Schutz. Markennamen mssen aber mssen Sie in einer der Registrierungsdaentweder beim Deutschen Markenamt eintenbanken berprfen, ob er auch wirklich getragen sein oder einen groen Bekanntfrei ist (2 Kasten Registrierungsdatenbanheitsgrad wie Porsche oder Tempo haben. ken fr Top-Level-Domains auf der geIn solchen Fllen erstreckt sich der Schutz genberliegenden Seite). Denn gute Dosogar bis hin zu hnlichen oder abgewanmain-Namen knnen, wenn sie zurckgedelten Schreibweisen, etwa Maikrosoft. geben werden, im Nu wieder weg sein. Im Streitfall haben Sie in dreifacher Hin5. Jetzt gilts: Domain-Namen sicht verloren: Sie mssen den Domain-Naregistrieren lassen men abgeben. Der Inhaber kann SchadensDas Registrieren von Domain-Namen ist ersatzforderungen an Sie stellen. Zu guter heutzutage kein Problem mehr. Die meisLetzt gehen smtliche Verfahrenskosten ten Dienste erledigen dies in Echtzeit. Das samt Anwaltsgebhren zu Ihren Lasten. bedeutet, dass Sie den gewnschten DoUnd da das Verfahren sich am Streitwert main-Namen eintragen und mit dem Aborientiert, kann das richtig ins Geld gehen. senden Ihres Formulars automatisch bei Ist Ihr Name nicht gerade ein eingeder entsprechenden Registrierungsstelle tragener Markenname, so knnen Sie ihn der Antrag gestellt wird. Voraussetzung ist getrost reservieren. Hier gilt: Wer zuerst natrlich, dass Sie bei dem Service also kommt, mahlt zuerst. Wenn er bereits an
jemand anderen gleichen Namens vergeben ist, haben Sie das Nachsehen. Ist er aber von jemandem reserviert worden, der nicht so heit, knnen Sie die Herausgabe des Domain-Namens fordern. Bei den Links und bei der bernahme von Inhalten (Texte oder Bilder) mssen Sie
Kosten eines InternetAuftritts

Ein Internet-Auftritt kostet Geld. Nicht nur die Gestaltung der Website und das Zusammenstellen der Inhalte, sondern auch das Prsentieren im Internet ist mit Kosten verbunden. Zunchst einmal fallen mglicherweise einmalige Kosten fr den Kauf des Domain-Namens an. War Ihr Domain-Name noch frei, ist die eigentliche Registrierung kostenlos. Haben Sie einen eigenen Domain-Namen, also beispielsweise <ihrname>.de, mssen Sie jhrlich im Voraus an die Verwaltungsstelle 10 bis 250 Euro (je nach Top-Level-Domain und Anbieter) zahlen. Dazu kommt der Speicherplatz im Internet, also die Festplattenkapazitt des Internet-Servers, der in der Regel nach Megabyte abgerechnet wird. Und zustzlich fllt dann noch der Traffic an, also die Datenmenge, die Ihre Besucher zusammengenommen erhalten. Hat die abgerufene Web-Seite beispielsweise 20 KB Text und zwei Bilder 40 KB, werden bei jedem Abruf dieser Seite 100 KB bertragen. Bei 10.000 Seitenabrufen am Tag macht dies pro Monat knapp 30 GB. Da 1 GB Datentransfer in Deutschland zwischen 5 und 6 Euro kostet, knnen bei gut besuchten Seiten mchtige Kosten entstehen. Das Heraufladen der Daten durch Sie fllt dagegen kaum ins Gewicht, weil dies ja nur einmal und dann bei Aktualisierungen geschieht. Wenn Sie zum Beispiel 100 MB hochladen, dann ist das gar nichts, wenn diese 100 MB von 1000 Anwendern heruntergeladen werden. Die meisten Internet Service Provider bieten Kombipakete an, in denen zum Teil alle drei Kostenfaktoren (Domain-Name, Speicherplatz und Datentransfer) in einer monatlichen Pauschale enthalten sind. Mehr Infos hierzu finden Sie im 2 Beitrag ab Seite 10. Beachten Sie aber, dass Sie bei berschreitung der Datenmengen zum Teil krftig draufzahlen.
18
pGrundlagen
P Workshops
P Utilities
Die eigene Domain
Grundlagen PPPp S. 16 S. 23
immer erst den Anbieter fragen, auf den Sie verlinken. Bei Bildern gilt das sogar, wenn Sie die Grafiken gar nicht auf Ihrer Seite ablegen, sondern ber den Image-Tag (<img src= ...) beim Copyright-Inhaber belassen und nur anzeigen. Zitieren dagegen ist mit Quellenangabe unproblematisch. Theoretisch mssen Sie sogar einen Anbieter fragen, auf dessen Inhalt Sie verweisen. Haben Sie jedoch keine anstigen oder strafrechtlich bedenklichen Inhalte auf Ihrer Seite, wird sich jeder Website-Besitzer freuen, wenn Sie auf ihn verlinken, weil dadurch seine Seite bei Suchmaschinen mehr Gewichtung erhlt. Hufig wird auf Websites ein Urteil des Landgerichts Hamburg zitiert, welches angeblich besagt, dass man sich mit dem Anbringen eines Links von jedwedem verlinkten Inhalt distanziert. Doch diese Interpretation des Urteils ist ein Missverstndnis. Vielmehr ist ein Anbieter einer Website nach 5 Abs. TDG nicht verantwortlich fr fremde Inhalte, zu denen er nur den Zugang zur Nutzung vermittelt hat, oder im Klartext: auf die er nur verlinkt. Einen ausfhrlichen Diskurs hierzu finden Sie unter www.schneegans.de/distanzierung-von-links.
der Website vermerken. Vielmehr besagt das Gesetz ber rechtliche Rahmenbedingungen fr den elektronischen Geschftsverkehr (EGG), dass diese Informationen leicht erkennbar, unmittelbar erreichbar und stndig verfgbar sein mssen. Das bedeutet, dass es dem Besucher mglich sein muss, von jeder Seite des Angebots aus zu Ihrem Impressum zu gelangen.
Eindeutige Identifizierung Was in diesem Impressum stehen muss, hngt von der Optimal: Mit Hilfe des Assistenten dieser Website erzeugen Sie anhand IhIntention der Website ab. rer persnlichen Angaben ein rechtlich einwandfreies Impressum (Punkt 7) Geschftsmige Sites mssen mehr ber den Anbieter preisgeben als Das Impressum dient dazu, den Betreiber der Rest. Allerdings nennt der Gesetzgeber eindeutig zu identifizieren. Somit gehren all die Angebote geschftsmig, die auf jeden Fall Name und Anschrift dazu. aufgrund nachhaltiger Ttigkeit mit oder Auerdem muss der Betreiber elektronisch ohne Gewinnerzielungsabsicht bereitgeerreichbar sein. Deshalb sollten Sie auch Ihstellt werden. Das drfte wohl fr nahezu re Mailadresse nennen. alle Websites im Internet gelten. Insofern sollten Sie auf jeden Fall ein Impressum in Mailadresse vor Spammern schtzen Ihren Web-Auftritt einbauen, welches am Mailadressen im Internet sind allerdings 7. Impressum: Pflicht auf besten mit einem Link von allen Einzelseiein begehrtes Ziel von so genannten Spamjeder Website ten Ihres Angebots erreichbar ist. Crawlern. Das sind Programme, die WebDie Anbieter von Inhalten ber das InterVerste gegen die Impressumspflicht Seiten nach Mailadressen durchsuchen net also Besitzer einer Website gleich welknnen mit einem Bugeld bis 50.000 Euro und diese in riesigen Datenbanken speicher Art mssen sich dem Besucher gegeahndet werden. Und hier reicht schon die chern. Die Empfnger sind dann Opfer von genber klar ausweisen. Es gengt nicht, Abmahnung eines der zahlreichen Abgro angelegten Spam-Attacken. dass Sie einfach Ihren Namen irgendwo auf mahnvereine, die es gibt. Daher sollten Sie Ihre Mailadressen im Internet auf eine Weise verklausulieren, dass Spam-Crawler nicht in der Lage sind, sie als Adresse zu erkennen. So knnen Sie beispielsweise in einem BildbearbeitungsAlle so genannten Top-Level-Domains (TLD), also beispielsweise .de, .com, .ch oder .at, sind in programm wie Paint Shop Pro Ihre Mailunterschiedlichen Registrierungsdatenbanken erfasst. Diese Datenbanken knnen Sie ber adresse als GIF erstellen und dieses Bild an Web-Formulare abfragen. Falls der gewnschte Domain-Name bereits vergeben ist, erfahren der entsprechenden Stelle einbinden. Sie bei der Abfrage, wem er gehrt. Im Folgenden finden Sie fr die wichtigsten Top-LevelWeitere Angaben im Impressum msDomains die jeweiligen Internet-Adressen, unter denen Sie eine Abfrage starten knnen. Eine sen lediglich Unternehmen machen. Dazu Website mit allen TLD-Endungen und Verweisen zu den dazugehrigen Registrierungsdatengehren neben dem Firmennamen gegebebanken steht unter www.iana.org/cctld/cctld-whois.htm. nenfalls die Steuernummer/Umsatzsteueridentifikationsnummer und im Falle eiTLD Bedeutung / Land Internet-Adresse ner GmbH oder hnlichen Gesellschafts.de Deutschland www.denic.de/servlet/Whois form Handelsregisternummern oder An.at sterreich www.nic.at/de/index/index/index.asp gaben zu sonstigen Zulassungsstellen. .ch / .li Schweiz, Liechtenstein www.switch.ch/id/search-domain.html Unter www.digi-info.de/de/netlaw/webimpres .com Commercial www.networksolutions.com sum/assistent.php (2 Abbildung oben) finden .net Network www.networksolutions.com Sie einen praktischen Assistenten, mit des.org Organisationen (Non Profit) www.networksolutions.com sen Hilfe Sie sowohl als Privatperson als .biz Business Websites www.networksolutions.com auch als Unternehmer das optimale Im.info Informationen www.afilias.info/whois_search pressum erstellen knnen, das Sie dann nur noch mit den realen Daten versehen.
Registrierungsdatenbanken fr Top-Level-Domains
23
2. Die Gre der Web-Seite festlegen

Nur wenige Internet-Surfer haben einen modernen PC mit groem Flachbildschirm samt entsprechender Auflsung und Farbtiefe vor sich stehen. Gehen Sie beim Planen Ihrer Homepage von einer maximalen Auflsung von 800 x 600 dpi aus. Damit sind zwar alle Handy- und Handheld-Surfer auen vor, denn die haben keine Chance, Ihre Seite so zu sehen wie Sie. Dafr haben Sie die meisten anderen damit wenigstens grundstzlich auf Ihrer Seite. Wenn Sie Ihre Web-Seite gestalten, planen Sie hchstens eine Gre von 780 x 457 Pixeln ein. Der Rest des Platzes geht fr Titel-, Symbol- und Statusleisten Ihres Browsers drauf. Wir empfehlen Ihnen, whrend des Gestaltens Ihrer Web-Seite die Auflsung Ihres Bildschirms auf 800 x 600 zu reduzieren. Dann haben Sie die beste Kontrolle ber das, was bei vorgegebener Gre auf Ihre Web-Seite passt. Als Faustregel fr das Arbeiten mit einer festen Seitenstruktur gilt: Niemand sollte horizontal scrollen mssen, um Ihre WebSeite lesen zu knnen. Vertikales Scrollen dagegen ist akzeptabel, wenn die Lnge eines Textes den Rahmen sprengt.
Gutes Web-Design
Ob eine Website optisch gelungen ist oder nicht, ist nicht nur eine Frage des Geschmacks. Lesen Sie, welche Grundregeln Sie beachten sollten, damit Ihre Site glnzend dasteht.
Von Thomas Pelkmann
3. Tabellen oder Frames: Die Web-Seite strukturieren

HTML bietet nicht die Mglichkeit, Elemente wie Mens, Texte oder Bilder punktgenau auf einer Seite zu platzieren. Um dennoch einen festen Seitenaufbau vorgeben zu knnen, gibt es zwei Optionen: Sie teilen eine Seite in Frames (Rahmen) auf oder nutzen Tabellen zum Strukturieren. Frames sind einzelne HTML-Seiten, die in einem bergeordneten Frameset angeordnet sind (2 Abbildung unten). Die Startseite INDEX.HTM ist im Grunde genommen leer. Ihre einzige Aufgabe ist es, weitere HTML-Seiten an definierbare Stellen zu platzieren. Frames bieten einige Vor-
Ein gutes Design, wissen Fachleute, lebt vor allem von der Beschrnkung: Wenige, aber dafr gezielt eingesetzte Elemente wie Schriften, Bilder und Grafiken sorgen dafr, dass das Design aufgerumt statt berladen wirkt. Und dafr, dass es funktioniert, weil der Betrachter nicht durch Spielereien um ihrer selbst willen vom Inhalt abgelenkt wird.
1. Minimalismus: Ma der Dinge im Web-Design

Diese allererste Regel jedes funktionalen Designs ist das Grundgesetz des InternetDesigns. Hier ist streng genommen die absolute Beschrnkung auf das Minimum einziges Ma der Dinge. Nur so funktioniert es, dass der Surfer eine Seite so sieht, wie sie aussehen soll. Ein Auszug aus der Liste der Widrigkeiten: Der Internet Explorer stellt Seiten anders dar als seine Konkurrenten Netscape oder Opera. Umgekehrt gilt das natrlich
genauso. Grundstzlich zeigt ein Browser nur das, was auf seinem Gastgeberrechner auch vorhanden ist. Das gilt zunchst fr Schriften. Die Fonts, die auf Ihrem PC wunderbar aussehen, sind auf anderen Web-Rechnern oft schlicht nicht vorhanden. Dort sehen die Seiten dann ganz anders aus. Es gilt weiter fr Bilder, mit denen sich prinzipiell das komplette Aussehen festlegen lsst. Allerdings ist das nicht ratsam, weil Bilder aufgrund ihrer Gre das Laden einer Web-Seite stark bremsen knnen. Es gilt nicht zuletzt fr die Gre des Browser-Fensters: Sie knnen zwar im Design eine optimale Gre festlegen, Einfluss auf die Gre, in der ein Betrachter diese Seite anschaut, haben Sie jedoch nicht. Das ist die Ausgangsbasis. Daran gemessen, ist es durchaus erstaunlich, dass viele Web-Seiten tatschlich gut aussehen. Das ist die Kunst, deren Grundlagen wir Ihnen in diesem Beitrag vermitteln mchten.
Beispielseite mit Frames. Jeder einzelne Block besteht aus einer HTML-Seite (Punkt 3)
26
pGrundlagen
P Workshops
P Utilities
Web-Seiten-Design
Daher unsere Empfehlung: Nutzen Sie zum Strukturieren Ihrer Seiten Tabellen. Setzen Sie nach dem Fertigstellen der Tabelle zum Schluss die Breite der Rahmenlinien auf 0. Der passende HTML-Befehl heit border='0' und gehrt in den <table>-Tag. Viele Hinweise hierzu finden Sie in den Beitrgen 2 ab Seite 34, 2 ab Seite 64 und 2 ab Seite 80.
Flexible Seitengestaltung: Tabellen sind die Alternative zum Benutzen sperriger Frames (Punkt 3)
Inhalt 1. Minimalismus: Das Ma der Dinge 2. Gre der Web-Seite 3. Struktur: Tabellen oder Frames 4. Web-sichere Farben 5. Farbkombinationen 6. Schriften: Auf Typo-Tricks verzichten 7. Grafische Elemente 8. Komprimierte Bilder verwenden 9. Intuitive Navigation 10. Site-Test Ksten Seitengre fest einstellen Animationseffekte mit Javascript
Seite
4. Arbeit mit Farben: Web-sicher kolorieren

Theoretisch steht Ihnen frs Gestalten von Web-Seiten die maximale Farbpalette von 16 Millionen Farben zur Verfgung. Das Problem: Nicht jeder Bildschirm und jeder Browser kann diese Farbzahl auch darstellen. Wer seinen Monitor auf eine Farbtiefe von 16 Bit eingestellt hat, sieht maximal rund 16.000 Farben. Von Ihnen geplante filigrane Farbbergnge geraten dann unter Umstnden zur Treppchengrafik mit groben Farbabstufungen. Als Web-sicher gelten im Internet 216 von Netscape definierte Farben (2 Abbildung unten links). Die komplette Tabelle dieser Web-sicheren Farben finden Sie zum Beispiel unter www.html-lexikon.de/farben_net scape.php. Wir empfehlen Ihnen, sich aus dieser Farbtabelle zu bedienen, dann sind Sie auf der sicheren Seite. Die Hintergrundfarbe definieren Sie ber den Tag <bgcolor=>. Geben Sie die Farbe in hexadezimalen Werten an (zum Beispiel #000000 fr Schwarz). Damit hebeln Sie die Beschrnkungen einzelner Browser bei der Farbdarstellung aus.
26 26 26 27 27 28 28 28 29 29
teile: Sie knnen durch voneinander unabhngige Seiten leicht eine starre Seitenstruktur aufbauen. Frames sind zudem eine gute Mglichkeit, Seitenelemente punktgenau zu platzieren. Und: Die Pflege einzelner Seiten ist wesentlich einfacher. Allerdings sind Frames nicht jedes Browsers Sache. Manche knnen Frames berhaupt nicht darstellen. Statt eines ausgewogenen Gesamtbildes aus Frames sehen Benutzer solcher Browser einfach gar nichts. Ein zweiter gravierender Nachteil: Kommt ein Besucher ber eine Suchmaschine zu einer Ihrer Seiten, sieht er nur diese eine Seite, nicht aber das komplette Frameset. Damit hat er keine Mglichkeit, weiter innerhalb Ihrer Seite zu manvrieren. Unsere Empfehlung: Tabellen Eine bessere Mglichkeit, Seiten zu strukturieren und ihnen einen festen Aufbau zu geben, sind daher Tabellen (2 Abbildung oben). Tabellen bieten im Prinzip alle Mglichkeiten eines Framesets (fester Seitenaufbau), haben aber nicht deren Nachteile.
27 28
Neben dem funktionalen Aspekt beim Farbverhltnis von Hintergrundfarbe und Schriftfarbe spielt bei der Wahl der richtigen Kolorierung auch die Wirkung eine groe Rolle (2 Abbildung folgende Seite oben). Welche Kombination etwa Dynamik ausstrahlt (Rot, Blau, Orange), welche Mnnlichkeit (Blau, Schwarz, Braun) und welche Schnelligkeit (Silber, Rot, Gelb), knnen Sie auf der informativen Seite zum Thema Farbwahrnehmung und Farbwirkung nachlesen, die das renommierte Fraunhofer-Institut erstellt hat (www.darm stadt.gmd.de/~crueger/farbe).
Seitengre fest einstellen

Sie knnen die Gre einer Web-Seite so festlegen, dass der Benutzer das nicht ndern kann. Dafr rufen Sie von Ihrer Startseite aus einfach eine zweite Seite mit fester Gre auf. Fgen Sie im HTML-Code Ihrer INDEX.HTM innerhalb des <head>Tags folgendes Javascript ein:
5. Farbkombinationen: Auf die Wirkung achten

Farbkombinationen sind nicht nur eine Sache des guten Geschmacks. So sollten Sie etwa bei der Zusammenstellung von Hintergrundfarbe und Schriftfarbe auf gute Lesbarkeit achten. Meiden Sie zum Beispiel die Kombination von Orange und Grn oder Rot und Schwarz, weil die Schrift bei solchen Farbzusammenstellungen nur sehr schwer zu lesen ist. Die Wirkung verschiedener Farbkombinationen knnen Sie sehr gut unter http://primeshop.com/html/ 216colrs.htm ausprobieren.
<SCRIPT LANGUAGE="Java Script"> F1 = open("start.htm", "Fenster1v","width= 640,height=600, screenX=0,screenY=0"); </SCRIPT>

Mit width und height definieren Sie die absolute Gre Ihres Fensters in Pixeln, start.htm heit die Seite, die Sie mit der ersten Seite zusammen starten (auf C 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)
27
Web-Seiten-Design
pGrundlagen
P Workshops
P Utilities
High: Helle und leichte Farben vermitteln einen Eindruck von Weite und wirken belebend (Punkt 5)
6. Verwendung von Schriften: Auf Typo-Tricks verzichten

Bei der Programmierung von Web-Seiten sind Schriften eine ziemlich relative Angelegenheit. So ist es nicht mglich, bestimmte Schriften vorzugeben. Was ein Windows-Programmierer als Arial definiert, kommt bei einem Mac-Anwender noch lange nicht als Helvetica auf den Schirm und umgekehrt. Vom namentlichen Benennen einer Schrift sollten Sie also absehen beziehungsweise zumindest damit rechnen, dass eine von Ihnen gewnschte Schrift nicht funktioniert. Verwenden Sie zum Beispiel eine Arial, sollten Sie Ersatzschriften fr den Fall definieren, dass diese Schrift nicht vorhanden ist. In HTML sieht das beispielsweise so aus:
ten typographischen Tricks mit einer bestimmten Schrift (Spationierung, Unterschneidung, Schrifteffekte und -schnitte) mssen Sie also verzichten. Definieren knnen Sie dagegen Schriftgren in Punkt, allgemeine Schriftschnitte wie fett oder kursiv sowie die Farbe der Schrift. Tipp: Verwenden Sie nicht mehr als eine Schriftfamilie fr Flietexte (Times New Roman oder Serifenschrift) und eine zweite fr berschriften (Arial oder serifenlose Schrift). Beschrnken Sie sich auf berschrift (H1), Zwischenberschrift (H2) und Flietext. Nutzen Sie Hervorhebungen mit kursiver oder fetter Schrift ebenfalls sehr sparsam, um den Effekt nicht durch bermige Anwendung zu entwerten. Wenn Sie aus grafischen Grnden nicht auf eine bestimmte Schrift verzichten knnen etwa bei einem Firmenlogo , gibt es nur einen Weg, diese Schrift im Original zu verwenden: Machen Sie ein Bild daraus, und stellen Sie dieses Bild anstelle der ursprnglichen Textmarke auf Ihre Web-Seite. Aber Achtung: Verwenden Sie solche Bilder sparsam, um die Gre Ihres HTML-Dokuments nicht unntig aufzublasen.
tons lsst sich eine einfach nachzuvollziehende Navigation erschaffen, die es jedem Besucher leicht macht, sich auf Ihren Seiten zurechtzufinden. Das gilt fr die Menleiste ebenso wie fr klassische Navigationselemente (Weiter, Startseite, E-Mail, Download). Fr Ihre Men- und fr die klassischen Navigationselemente sollten Sie jeweils nicht mehr als ein grafisches Element gestalten. Variieren Sie diese wenigen Elemente ber ihre Beschriftung.
8. Bilder benutzen: Mit Komprimierung bitte

In keinem Bereich der Web-Seitengestaltung gilt der erste Grundsatz des Web-Designs Beschrnkung, Beschrnkung, Beschrnkung! so sehr wie bei der Bildgestaltung. Klar ist es verlockend, mit Bildern auszudrcken, was mit Worten sehr viel mehr Platz einnimmt. Aber das bertragungstempo im Internet lsst das extensive Arbeiten mit Bildern einfach nicht zu. Als Faustregel gilt: Wenn ein Besucher nicht nach lngstens zehn Sekunden wei, was ihn auf einer Web-Seite erwartet, klickt er weiter. Dauert das Laden zentraler Bildelemente lnger, haben Sie die Abstimmung mit der Maus verloren. Und Sie haben keine Mglichkeit, mit Ihren Besuchern darber zu diskutieren! Mit modernen Komprimierungsmethoden ist es allerdings mglich, mit den Beschrnkungen bei der Arbeit mit Bildelementen zu leben. GIF- oder JPG-Bilder sind bei der richtigen Bearbeitung hinreichend klein, um Web-Seiten-tauglich zu sein.
7. Grafische Elemente: Fr die eindeutige Struktur

Auch im Internet sagt ein Bild mehr als tausend Worte. So gesehen, sind grafische Funktionselemente in Web-Seiten sehr empfehlenswert. Ein weiterer Vorteil: Grafische Elemente tragen zu einer bersichtlichen und eindeutigen Struktur bei. Mit grafisch gestalteten Schaltflchen oder But-
Animationseffekte mit Javascript

Mit Filmen auf der Homepage oder aufwendig animierten Grafiken sollten Sie mglichst sparsam umgehen, weil das Laden solcher Spielereien viel Zeit in Anspruch nehmen kann. Auf der C Heft-CD prsentieren wir Ihnen jedoch hbsche Beispiele fr Effekte mit Javascript, die den Vorzug haben, dass sie klein sind und sich damit schnell laden lassen. Die Sammlung dieser Applets trgt den Namen Anfy 2.0 und ist Freeware fr alle Windows-Systeme (5 MB). ber die Website des Herstellers www.anfyteam.com sind auch Linux- und Macintosh-Versionen erhltlich. Alle Applets knnen Sie selbstredend leicht an Ihre eigenen Wnsche anpassen. So ist es in der vorbildlichen Schritt-fr-Schritt-Prozedur besonders einfach, vorgegebene Bilder durch eigene zu ersetzen und die Parameter passend Auf C Heft-CD: Ein Beispiel fr Effekte mit Javaeinzustellen. Programmierkenntnisse bentiscript aus der Sammlung Anfy 2.0 gen Sie fr diese Effekte nicht.
{font-family: "Lucida Console", "Arial", "sansserif"}

Der Browser versteht: Benutze die Schrift ,Lucida Console. Hast du die nicht, nehme die ,Arial. Ist auch die nicht vorhanden, verwende eine ,Sans-Serif-Schrift deines Systems, eine Schrift also ohne Verzierungen (Serifen) an den Enden! Wenn Ihre Seite im Zweifelsfall auch mit irgendeiner serifenlosen Schrift nicht gut aussieht, ist sie nicht gut geworden. Ein Seitenentwurf ist nur dann geglckt, wenn Sie eine bestimmte serifenlose Schrift verwenden wollten. Auf alle gezielt eingesetz-
28
pGrundlagen
P Workshops
P Utilities
Web-Seiten-Design
Spiegel Online etwa schafft es, auf der Startseite (www.spiegel.de) mehr als zwei Dutzend Fotos und Grafiken unterzubringen (2 Abbildung unten). Dennoch ist das gesamte HTML-Dokument im Schnitt nicht grer als um die 220 KB. Beachten Sie bei der Wahl des richtigen Formats, dass GIF-Bilder zwar kleiner sind als JPGs, aber nur maximal 255 Farben darstellen knnen. Im GIF-Format lsst sich daher kein Farbrausch zeigen. JPG-Bilder knnen dagegen die komplette Farbpalette darstellen und taugen deshalb als Format fr Fotos sehr viel besser. Aber Sie sollten das Format von JPG-Fotos verkleinern, um Platz zu sparen. Eine Gre von nur 145 auf 180 Pixeln reicht fr ein Portrt absolut aus. Mehr zum Thema Bildformate lesen Sie 2 ab Seite 84. Wichtig: Nutzen Sie die Mglichkeit, Bilder in HTML mit einem Alternativtext zu versehen. Dieser Text erscheint bereits, wenn das Bild noch geladen wird, und ist auch dann zu sehen, wenn das Laden eines Bildes fehlschlgt. Der passende Befehl innerhalb des <img src>-Tags heit:
Link zur Startseite. Jede Seite enthlt auerdem StandardLinks zu einer Sitemap und/ oder Suchmaske sowie zur Kontaktaufnahme. In der Praxis erprobt sind auch Hinweise am Anfang der Seite, die dem Besucher zeigen, wo er sich gerade befindet. Sind diese Texthinweise mit einzelnen Links unterlegt, ist die Navigation schon fast perfekt. Umfangreiche Websites mit vielen Unterseiten werden mit einer so genannten Sitemap noch bersichtlicher. Eine Sitemap ist eine Seite, die den Inhalt des Gesamtangebots nach Stichwrtern sortiert (2 nebenstehende Abbildung). Bieten Sitemap als Sprungbrett: Hier finden Besucher alle Inhalte der Web-PrSie dazu noch eine Such- senz der Sddeutschen Zeitung sortiert (Punkt 9) funktion, mit deren Hilfe die dem Internet Explorer, sondern beispielsBesucher nach beliebigen Wrtern in weise auch mit dem Netscape Navigator Ihrem Angebot suchen knnen, bleiben oder Communicator sowie Opera. Sehen keine Wnsche mehr brig. Wer neben der Sie sich die Seite ferner mit Mac- oder LiStartseite nur zwei bis drei Unterseiten pr"alt=[ERKLRUNGSTEXT]" nux-Rechnern an, sofern Sie die Mglichsentiert, kann auf auf Sitemap und Suchkeit dazu haben. Sie werden gleich merfunktion aber getrost verzichten. 9. Navigation auf der Seite: ken, wie unterschiedlich dieselbe Web-SeiFr die Struktur einer Seite hat sich im Nur intuitiv funktionierts te auf verschiedenen Plattformen aussieht. Web ein starrer Seitenaufbau durchgesetzt. Die beste Navigation funktioniert intuitiv. Die Testreihe vervollstndigt die Probe Aus gutem Grunde, denn solch ein fester Je weniger ein Besucher darber nachdenauf Rechnern, die ber ein analoges MoAufbau erleichtert Ihren Besuchern die Oriken muss, wie er von A nach B und wieder dem (56K) ins Internet verbinden. Damit entierung ungemein. Im Grunde bieten zu A zurckkommt, desto besser ist die Namachen Sie selbst die Erfahrung, wie lange sich zwei Varianten an: Menleiste oben vigation. Eine gute Navigation leistet zweies bei einer langsamen Internet-Verbinoder Menleiste links. Tatschlich gibt es erlei: Erstens wei Ihr Besucher immer, wo dung dauert, bis die Bilder zu sehen sind. viele Seiten, die beides nutzen (je nach Umgenau er sich gerade befindet. Und zweiMit vertretbarem Aufwand ist es kaum fang der angebotenen Informationen): tens hat er von berall die Mglichkeit, zu mglich, eine Seite fr alle vorkommenden Links finden Sie die Themengebiete, oben allen anderen Stellen zurckzukommen. Bedingungen zu optimieren. Das Ziel der die festen Rubriken wie Impressum, SuchZu realisieren sind solche Navigationen Testreihen sollte daher sein, den grten maske oder Hilfe. Entscheiden Sie sich fr recht einfach: Auf jeder Seite gibt es einen gemeinsamen Nenner zu finden: Was sieht eine Struktur, und halten Sie diese Strukberall wenigstens annhernd gleich gut tur auf allen Seiten durch. aus, was geht unter verschiedenen Bedin10. Abschlieender Test: gungen zumindest ausreichend schnell? Grten Nenner finden Die Antwort auf diese Fragen stellt eine guStopp: Bevor Sie anfangen, te, ausgewogene und professionell gestalteIhre Web-Seite zu programte Homepage dar. Und das ist doch was! mieren, stellen Sie die Auflsung Ihres Monitors und Ihrer Grafikkarte auf 800 x 600 bei 16 Bit Farbtiefe. So sehen Bcher Sie Ihre Web-Seite bereits bei Thomas Wirth, Missing Links ber gutes der Arbeit so, wie sie die meisWebdesign, 2. erweiterte Auflage, Hanser-Verten Besucher sehen werden. lag 2004, www.hanser.de, 360 Seiten, ISBN 3Wenn alles fertig ist, testen Kompakt-Angebot: Trotz zahlreicher Bilder ist die Startseite von Spiegel 446-22554-4, 49,90 Euro. Sie Ihre Seite mit verschiedeOnline erfreulich klein. Das spart lange Ladezeiten (Punkt 8) nen Browsern, nicht nur mit
Mehr Infos
29
Website-Marketing
Suchmaschinen wie Google entscheiden ber Erfolg oder Misserfolg einer Homepage. Optimieren Sie mit einfachen Mitteln Ihre Website, damit sie in den Suchergebnissen besser platziert ist.
Von Wolfgang Nefzger
ge, die das passende Stichwort aufweisen. Die Reihenfolge in der Fundliste auch Ranking genannt ergibt sich aus der Wertung der Stichwrter. Je hher die Wertung, desto weiter vorne in der Liste steht Ihre Homepage. Das ist natrlich eine vereinfachte Darstellung, die Suchmaschinen nutzen mehr Details und teilweise recht komplexe Verfahren, um eine Web-Seite zu bewerten. Bei Google zhlt beispielsweise, wie viele andere Homepages auf diese Seite mit Links verweisen. Wie Sie hier Punkte holen, erfahren Sie unten im 2 Abschnitt 6. Adresse verbreiten: Mehr Links auf die Homepage. Um die Datenbank zu fllen, arbeiten bei den Suchmaschinen rund um die Uhr so genannte Robots, Crawler oder Spider. Diese Programme fordern Web-Seiten an und analysieren sie. Wie die Analyse genau erfolgt, ist ein Betriebsgeheimnis der Suchmaschinen-Betreiber. Denn sie ist die Basis fr gute Ergebnislisten, die den Surfer schnell zu relevanten Homepages fhren.
2. Stichwrter festlegen: Die Mhe lohnt sich

Eine zentrale Rolle spielen die Stichwrter. Notieren Sie sich acht oder zehn Stichwrter, die Ihr Angebot mglichst genau beschreiben. Denken Sie dabei auch an alternative Begriffe oder falsche Schreibweisen bei komplizierten Wrtern. Besonders ntzlich ist es, auch Bekannte oder Kunden dazu zu befragen. Bitten Sie die hilfreichen Menschen aber nicht einfach, auf einem Blatt Papier einzelne Stichwrter aufzuschreiben, sondern fragen Sie, welche Suchwortkombinationen sie verwenden wrden. Denn in der berwiegenden Anzahl der Flle geben Surfer in eine Suchmaschine mehrere, miteinan-
Eine Homepage ist kein Selbstlufer, selbst wenn sie noch so interessante Inhalte bietet und perfekt gestaltet ist. Die Surfer im Web mssen nmlich erst einmal wissen, dass es Ihre Website berhaupt gibt. Und der Weg zu neuen Websites fhrt fr Surfer in den allermeisten Fllen ber eine der bekannten Suchmaschinen wie Google, Altavista oder MSN Search. Ziel: Platzierung in den Top 50 Sie mssen daher dafr sorgen, dass solche Suchmaschinen Ihre Homepage kennen, mit den richtigen Stichwrtern verbinden und sie mglichst weit vorne in der Ergebnisliste nennen. Denn Suchmaschinen werfen meist Tausende von Fundstellen aus. Kaum ein Surfer blttert aber mehr als die ersten 50 Treffer durch. Es ist also entscheidend, dass Ihre Homepage-Adresse mglichst weit vorne in der Liste steht es sei denn, Sie legen auf guten Besuch Ihrer Website keinen Wert.
1. Spider und Robots: So funktionieren Suchmaschinen
Mit wenig Aufwand machen Sie Ihre WebSeite zur leicht verdaulichen Kost fr Suchmaschinen. Wenn Sie die Denkweise von Suchmaschinen wie Google kennen, knnen Sie Ihre Web-Seiten genau so bauen, wie die Suchmaschine sie gerne hat. Jede Suchmaschine hat eine riesige Datenbank mit Web-Adressen. Zu jeder Adresse enthlt die Datenbank etliche Stichwrter und jeweils eine Wertung (sowie eine kurze Beschreibung, mehr dazu lesen Sie im 2 Abschnitt 4. Versteckte Suchhilfe: Meta-Tags einfgen). Tippt ein Anwender einen oder mehrere Suchbegriffe ein, so ermittelt die Bitte melden: Unter der Adresse www.google.de/intl/de/webmasters inforSuchmaschine jene Eintr- miert Google ber die Anmeldung von Websites beim Robot (Punkt 1)
30
pGrundlagen
P Workshops
P Utilities
Suchmaschinen-Eintrag
treiben Sie nicht. Widerstehen Sie der Versuchung, Ihre Homepage mit allen Tricks und Kniffen mit diesen Begriffen zuzupflastern. Im Web kursieren jede Menge Anleitungen, wie man ganz sicher die vorderen Pltze in den Ergebnislisten der Suchmaschinen erlangt. Die Robots sind aber so programmiert, dass sie solchen Unterschleif zu entdecken Seitentitel: Ohne den und eine klare Beschreibung (im Bild bei Fundstelle versuchen. Im schlimmsten 1) fllt Ihre Website in Suchmaschinen nicht auf (Punkt 2 und 3) Fall ignoriert ein Robot die gesamte Website. Beginnen der verknpfte Stichwrter ein, da ein einSie mit dem Seitentitel (HTML-Tag <title>; zelnes Stichwort meist zu viele unpassende ohne Anfhrungszeichen), den der Ergebnisse liefert. Browser in seiner Titelzeile anzeigt (mehr Wenn Sie beispielsweise in einem Onzu HTML-Tags erfahren Sie 2 ab Seite 34. line-Shop Tee verkaufen wollen, gehren Zustzlich verwenden etliche Suchmaneben Tee und verschiedenen bekannten schinen diesen Text als berschrift in Sorten auch Shop und Verkauf in die der Ergebnisliste. Liste. Ist Ihr Angebot regional begrenzt, zum Beispiel als Handwerker oder DienstNicht bertreiben leister, so ist auch der Ortsname oder die Beschreiben Sie knapp mit etwa acht WorRegion Pflicht. Raumausstatter liefert als ten den Inhalt der Homepage, bauen Sie Suchbegriff viel zu unscharfe Ergebnisse, die wichtigsten Stichwrter ein. Das Ganze mit Raumausstatter Mnchen oder noch sollte aber einen lesbaren Satz oder ein besser Raumausstatter Schwabing sieht Motto ergeben und nicht nur eine Anes schon besser aus. sammlung von Stichwrtern sein. Auch die berschriften in der Web-Seite 3. Suchmaschinen fttern: (mit den HTML-Tags <h1>, <h2> und so berschrift und Text prparieren weiter) sollten nach Mglichkeit StichwrNun bauen Sie die Stichwrter in Ihre Webter enthalten. Im normalen Text verteilen Seiten ein. Am wichtigsten ist natrlich die Sie wohldosiert ebenfalls Stichwrter, im Startseite INDEX.HTM. Aber auch die briSchnitt pro Satz etwa eines. Natrlich muss gen Seiten knnen Sie entsprechend sich das Stichwort sinnvoll in den Satz einnachrsten. Eine Warnung vorweg: berfgen. Wenn Sie die Stichwrter gut ausge-
Inhalt 1. So funktionieren Suchmaschinen 2. Stichwrter festlegen 3. Suchmaschinen fttern 4. Meta-Tags einfgen 5. Mehrere Domains 6. Mehr Links auf die Homepage 7. Anmelden bei Suchmaschinen Ksten Web-Kataloge: Anmelden lohnt sich Optimieren heit auch vermeiden
Seite
30 30 31 31 32 32 33
31 33
whlt haben, drfte das kein Problem sein. Aber Vorsicht: bersicht und Lesbarkeit der Texte drfen nicht der Stichwortsucht zum Opfer fallen. Schlielich soll die Web-Seite auch die Besucher berzeugen, und die interessieren sich nun mal nicht fr eine Suchmaschinenoptimierung. Um einzelne Schlagwrter fr einen Robot besonders interessant zu machen, heben Sie diese mit dem Tag <strong>Begriff </strong> hervor. Das ist eine Betonung, die Browser blicherweise fett darstellen, wodurch der Begriff auch fr normale Besucher der Homepage hervorgehoben wird. Achten Sie allerdings darauf, dass die Lesbarkeit des Textes nicht darunter leidet. Ein fett dargestelltes Wort pro Absatz reicht. Ebenfalls Robot-freundlich sind Stichwrter, die Sie als Text-Link formatieren. Dabei sollte es sich aber um echte Links mit einer gltigen Zieladresse handeln sonst werten manche Robots den Link als Mogelei und ignorieren das Stichwort.
Web-Kataloge: Anmelden lohnt sich

Ein Web-Katalog ist im Prinzip eine groe Link-Liste, die nach Kategorien sortiert ist. Web-Kataloge sehen nach auen wie Suchmaschinen aus, funktionieren aber ganz anders. Denn die Eintrge erzeugt nicht ein Robot, vielmehr sortieren Menschen die angemeldeten Homepages von Hand in die richtige Kategorie ein. Da ein Katalog nicht aktiv auf die Suche nach neuen Homepages geht, mssen Sie sich unbedingt selbst dort anmelden. Ob Sie Ihre Web-Site mit Stichwrtern und Bitte eintragen: Web-Kataloge wie Meta-Tags optimiert haben, spielt hier keine Rolle. DMOZ sollten Ihre Site kennen 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 Katalogen eine Anmeldung vorzunehmen. Zum einen nutzen viele Surfer die Kataloge als Suchhilfe, zum anderen bewertet Google Links in diesen Verzeichnissen besonders hoch.
4. Versteckte Suchhilfe: Meta-Tags einfgen

Nur fr den Robot gedacht sind die so genannten Meta-Informationen im Kopf der HTML-Datei. Diese Texte bekommt der Surfer nie zu Gesicht, die Web-Browser stellen den Inhalt nicht dar. Der Robot liest dagegen direkt die fr ihn wichtigen Infos aus den Meta-Tags aus. Zwischen <head> und </head> fgen Sie mehrere Tags ein:
<meta name="keywords" content="Stichwort1, Stichwort2"> <meta name="description" content="Beschreibung der Web-Seite">
31
pGrundlagen
P Workshops
P Utilities
baut die passenden HTML-Tags in die WebSeiten ein. Mehr ber Tools wie HTML bulk lesen Sie 2ab Seite 120.
5. Mehrere Domains: Stichwrter unterbringen

Wenn Sie noch keine eigene Domain haben, sollten Sie das schnellstens nachholen. Was dabei zu beachten ist, steht in den Beitrgen 2 ab Seite 10 und Seite 16. Zum einen lsst sich eine kurze Domain leichter auf Briefpapier und Visitenkarten drucken. Zum anderen ist es bei vielen Suchmaschinen wichtig frs Ranking, ob im DomainNamen gesuchte Stichwrter vorkommen. Typisch ist der Firmenname als Domain, damit verschenken Sie aber Potenzial. Viele Provider, wie Strato und 1&1, erlauben ohne Aufpreis ein oder zwei zustzliche Domains fr eine Homepage. Die zustzlichen Domains leiten Surfer an Ihre Originaladresse weiter. Nutzen Sie das aus, und registrieren Sie Domains wie www.im mobilien-muenchen.de oder www.tee-im-onlineshop.de. Versuchen Sie, wichtige Stichwrter in der Domain unterzubringen. Auch lngere Domains sind kein Problem: Witzige Einflle wie www.willst-mich-mieten.de fr einen Anhngerverleih bleiben gut im Gedchtnis. Vermeiden Sie aber Monster-Domains mit einem Dutzend Stichwrtern das riecht fr Robots nach Betrug.
Hilfe: Ein Spezialprogramm wie HTML bulk 4 hilft Ihnen beim Einfgen der Meta-Tags in Web-Seiten. Aus Meta-Tags liest der Robot die fr ihn wichtigen Infos aus. Das Tool bearbeitet beliebig viele HTML-Dateien auf einmal (Punkt 4)
In der ersten Zeile tragen Sie bei content die Stichwrter (englisch: keywords) ein, jeweils durch ein Komma abgetrennt. Die Liste darf beliebig lang sein, acht bis zehn Stichwrter sollten Sie aber nur berschreiten, wenn Sie gute Grnde dafr haben. Das wre etwa der Fall, wenn Ihre Website einen so breiten Themenbereich abdeckt, dass zehn Stichwrter nicht reichen. Die Beschreibung der Website formulieren Sie im Meta-Tag hinter description bei content mit vollstndigen Stzen. berschreiten Sie eine Lnge von etwa 80 Zeichen nicht. Diese Beschreibung zeigen viele Suchmaschinen in der Fundliste an. Google verwendet brigens abweichend davon einen Ausschnitt aus dem Text der Web-Seite. Sie sollten also darauf achten, dass die ersten paar Textzeilen sich als allgemeine Beschreibung eignen. Stichwrter fr mehrere Sprachen Wenn Sie getrennte Stichwrter fr mehrere Sprachen angeben wollen, so ergnzen Sie das Attribut language:
sich manche Suchmaschinen nicht um solche sprachspezifischen Angaben. Diese Suchmaschinen werfen alle Stichwrter in einen Topf. Es gibt einfach keine Sprachzuordnung, also auch keine deutschen oder englischen Stichwrter. Wichtig: Auch fr die Angaben in den Meta-Tags gelten die HTML-Umschreibungen fr Sonderzeichen. So tragen Sie etwa statt ü ein (ohne Anfhrungszeichen). Weitere Details ber HTML-Umschreibungen fr Sonderzeichen finden Sie in dem bereits erwhnten Artikel 2 ab Seite 34. Wenn Sie sich die Arbeit mit den MetaTags erleichtern wollen, greifen Sie auf Spezial-Tools zurck. Dann mssen Sie nur die Texte eintippen, das jeweilige Programm
6. Adresse verbreiten: Mehr Links auf die Homepage

Die Optimierung der Web-Seiten ist damit abgeschlossen. Wie bereits erwhnt, bewertet Google jedoch darber hinaus auch, wie viele Links von anderen Domains
<meta name="keywords" lan guage="de" content="..."> <meta name="keywords" lan guage="en" content="...">
Damit haben Sie eigene Stichwrter fr deutsch (de) und englisch (en) hinterlegt. Die Krzel fr andere Sprachen und Lnder finden Sie zum Beispiel unter http:// selfhtml.teamone.de. Allerdings kmmern
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)
32
pGrundlagen
P Workshops
P Utilities
auf Ihre Homepage zeigen (dies betrifft auch jede andere Web-Seite Ihrer Web-Prsenz). Je mehr Links, desto mehr Bedeutung misst Google Ihrer Homepage zu. Andere Suchmaschinen verwenden mittlerweile hnliche Techniken. Sie sollten also dafr sorgen, dass andere Web-Angebote Ihre URL in ihre Link-Liste aufnehmen. Das ist sowieso empfehlenswert, denn auch damit bringen Sie Surfer auf Ihre Seiten.
teilen Sie den Suchmaschinen in einem Anmeldeformular Ihre Adresse mit. Die Anmeldung sieht immer gleich aus: Sie geben die Web-Adresse (inklusive Dateiname) und optional eine Beschreibung an (wie im Meta-Tag <meta name="description">). Nach der bermittlung der Adresse kann Vernnftige Verlinkung es allerdings zwei bis drei Natrlich muss die Verlinkung auch Sinn Wochen dauern, bis der Romachen. Als Handwerksbetrieb sollten Sie bot Ihre Seiten besucht. beispielsweise prfen, ob die rtliche KamManche Robots lassen sich mer oder Innung einen eigenen Web-Aufauch Monate Zeit. Schneller tritt mit Link-Liste hat. Auch viele Gemeingeht es oft nur, wenn Sie fr den pflegen auf ihrer Website eine Liste den Eintrag in der Suchmamit lokalen Firmen. schine bezahlen. Vielleicht haben Sie auch wichtige LieEs macht durchaus Sinn, feranten oder Kunden, die eine eigene Site neben der Startseite weitere Nummer eins: Die aktuelle Statistik von Webhits unterstreicht die berramit Link-Liste ihr Eigen nennen. Oder es Unterseiten Ihres Auftritts gende Bedeutung von Google unter den Internet-Suchmaschinen (Punkt 7) gibt fr Ihr Hobby oder Ihre Branche eine anzumelden. Heier Kandibesondere Portalseite hier kommt es ganz dat ist eine Sitemap, also ein Index Ihrer search.msn.de) von Microsoft erlaubt leider auf den Einzelfall an. Web-Kataloge Website, der Links auf alle Unterseiten entkeinen kostenlosen Eintrag Sie mssen gehren ebenfalls in diese Kategorie, mehr hlt. Damit stellen Sie sicher, dass der Rozahlen. Aufstrebende internationale Suchlesen Sie im 2 Kasten auf Seite 31. bot leicht alle Seiten Ihres Angebots findet. maschinen sind www.alltheweb.com und Ergnzend schaden zwei oder drei besonwww.teoma.com. Eine Liste von Suchmaschi7. Finger hoch: Anmelden ders wichtige Unterseiten nicht. nen, die am hufigsten benutzt werden, bei Suchmaschinen finden Sie unter www.webhits.de/deutsch/ Nun mssen Sie den Robots mitteilen, dass Wenige Anmeldungen gengen index.shtml?/deutsch/webstats.html. es eine neue Homepage gibt. Die Robots folSie mssen Ihre Homepage nicht bei HunWenn Ihnen die Anmeldung per Hand gen zwar selbstndig Links auf bekannten derten oder Tausenden von Suchmaschizu umstndlich ist, hilft das kleine kostenSeiten, um weitere Sites zu erreichen. Irnen anmelden. Denn die Surfer benutzen lose Tool Adaurl weiter. Hier tragen Sie gendwann findet ein Robot dann wahrsowieso nur einige wenige. Fr DeutschAdresse und Beschreibung sowie die Katescheinlich zufllig Ihre Homepage aber land gengen Altavista, Fireball, Google, gorie Ihre Homepage ein. Mehr ber Adadas kann dauern, und zwar Jahre. Deshalb Hotbot und Lycos. Die MSN-Suche (http:// url lesen Sie im 2 Artikel ab Seite 120. Manche Suchmaschinen wie Altavista verlangen fr eine solche automatische Anmeldung allerdings Geld. Ist es Ihnen das nicht wert, mssen Sie bei diesen SuchmaEinige Dinge gehren nicht auf eine Website, die fr Robots optimiert ist. Sonst laufen Sie Gefahr, schinen von Hand eintragen. 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. Internet/Buch Eine 3D-Grafik als berschrift kann kein Robot lesen. Bleiben Sie bei Text, den Sie mit CascaDas ausschlielich werbefinanzierte E-Book ding Style Sheets (CSS) frei formatieren drfen. Homepage Erfolg (www.homepage-erfolg.de) Auch Flash-Intros sind fr Robots unleserlich. von Stefan Rttinger, das es auch in gedruckter Tragen Sie am Datei-Anfang keine umfangreichen Scripts oder CSS-Regeln ein. Robots lesen Form fr 39,90 Euro (ISBN 3-833-006439) gibt, nmlich oft nur bis zu einer bestimmten Zeilenzahl. Findet sich kein brauchbares Robot-Futter, bietet zahlreiche Infos, wie Sie Ihre Homepage fllt die Website durchs Raster. Lagern Sie Scripts und CSS-Angaben in externe Dateien aus. zu einem kommerziellen Erfolg fhren oder Ihre Prfen Sie regelmig, ob alle site-internen Links noch funktionieren. Tote interne Links fhren private Homepage mit Hilfe von Partnerschafeventuell dazu, dass ein Robot die Analyse abbricht. Einige Tools, die Ihnen die Kontrolle der ten finanzieren. Zudem bietet das rundum Links abnehmen, finden Sie im 2 Artikel auf Seite 114. empfehlenswerte Buch Checklisten, Link Stichwrter und Links in unsichtbarer Schrift (mit Hintergrundfarbe formatiert oder sehr kleiner Listen und rechtliche Tipps. Text) interpretieren viele Robots als Betrugsversuch und indizieren die Seite gar nicht.
Optimieren heit auch vermeiden
Mehr Infos
33
Seiten im Web. Ein Tag wird in die spitzen Klammern < und > (ohne Anfhrungszeichen) eingeschlossen und tritt meist paarweise als Start- und End-Tag auf, wobei man den End-Tag am vorangestellten Schrgstrich erkennt. So erzeugen Sie beispielsweise einen Absatz, indem Sie einen Text in die Tags <p> und </p> (jeweils ohne Anfhrungszeichen) einschlieen:
<p>Dies ist ein Absatz</p>

Einige wenige Tags kommen ohne End-Tag aus, etwa <br>, das ein Zeilenende erzeugt. Da in XHTML, dem HTML-Standard der Zukunft, solche einzelnen Tags nicht mehr erlaubt sind, sollten Sie sie schon heute mit nachgestelltem Schrgstrich schreiben also etwa <br />: Der Tag ist dann gleichzeitig Start- und End-Tag. Viele Tags haben Attribute, die zwischen den spitzen Klammern stehen und die Bedeutung des Tags nher beschreiben. So bestimmen Sie mit dem Attribut align die Ausrichtung der Zeilen eines Absatzes:
Wichtige HTML-Tags
Mit Spezialprogrammen lassen sich Web-Seiten weitgehend ohne HTML-Kenntnisse erstellen. Doch es gibt sehr gute Grnde, sich zumindest die wichtigsten HTML-Tags anzueignen.
Von Michael J. Humann
<p align="center">Dies ist ein zentrierter Absatz. </p>

Jedes Attribut besteht aus einem Schlsselwort wie align, dem ein in Anfhrungszeichen eingeschlossener Wert zugewiesen wird. Jeder Start-Tag kann mehrere solcher Attribute haben.
Mit Programmen wie Dreamweaver, Frontpage oder Golive gestalten Sie WebSeiten, ohne dass Sie allzu sehr mit dem erzeugten HTML-Code in Berhrung kommen (2 Seite 102). Aber elementare HTMLKenntnisse sind auch heute noch ntzlich. Handgemachtes HTML ist meist einfach und elegant, ldt auch dann schnell, wenn der Surfer mit dem Modem im Internet unterwegs ist, und erleichtert das Fein-Tuning, wenn die Seite mal nicht ganz so aussieht, wie Sie sich das vorgestellt hatten. Wenn HTML im Ruf steht, kompliziert und undurchsichtig zu sein, so sind die WYSIWYG-Editoren (What You See Is What You Get), bei denen Sie das aktuelle Projekt in einem extra Fenster immer so sehen, wie es Besucher der Site spter auch sehen werden, nicht ganz unschuldig daran. Besonders ltere Versionen von Frontpage erzeugten einen unntig aufgequollenen, ohne Hilfsmittel kaum nachzuvollziehenden HTML-Code, und wer einmal einen Blick darauf geworfen hatte, gab es schnell auf, etwas daran verbessern zu wollen.
HTML-Codierung per Hand stellt keine groen Ansprche, was die bentigte Software betrifft, ein simpler Text-Editor wie Wordpad reicht. Weniger spartanisch sind HTML-Editoren wie die Shareware-Lsungen Super HTML (fr Windows 95/98, NT, 2000 und XP, 49,95 Euro, Download unter www.superhtml.de, 2 Seite 110) oder 40tude HTML (fr Windows 95/98, 2000 und XP, 35 Dollar, Download unter www.40tude.com). Sie heben die Struktur des Codes farblich hervor, ersparen mit Assistenten unntige Schreibarbeit und bewahren vor Eingabefehlern. Auch stellen sie Infos zu den einzelnen HTML-Tags bereit (2 Bild oben). Lernen Sie hier die wichtigsten HTML-Tags kennen. Sie werden es nicht bereuen.
2. Head und Body: das ntige Grundgerst

Anfang und Ende jeder HTML-Datei sollten die Tags <html> und </html> sein. Dazwischen finden Kopf und Rumpf der Seite Platz. In den Kopfteil, eingeschlossen in <head> und </head>, gehren Informationen zur Seite selbst, der Rumpf zwischen <body> und </body> beinhaltet den eigentlichen Seiteninhalt. Das wichtigste Kopfelement ist der zwischen <title> und </title> eingeschlossene Titel der Seite, den Anwender von WYSIWYG-Editoren oft einzutragen vergessen kein Wunder, dass Tausende von Web-Seiten zu den unterschiedlichsten Themen Willkommen bei Adobe GoLive heien. Mit <meta>-Tags kann man viele weitere Angaben zur Seite eintragen, zumindest sollten Sie deren MIME-Typ und den Zeichensatz blicherweise ISO Latin-1 vorgeben (2 Kasten Entities fr Umlaute PC-WELT SONDERHEFT 2/2004
1. Tags und Attribute: Markierungen und Beschreibungen

Eine HTML-Seite besteht aus Text und Marken (englisch tags). Die HTML-Tags kennzeichnen einzelne Textabschnitte als gewhnlichen Flietext, berschriften, Tabellen oder Verweise auf Bilder und andere
34
pGrundlagen
P Workshops
P Utilities
HTML-Tags
und andere Sonderzeichen). Das Grundgerst einer HTML-Seite sieht dann so aus:
3. Block- und Inline-Elemente: die Text-Bausteine

Die Bausteine, aus denen Sie eine HTML-Seite aufbauen, sind Block- oder Inline-Elemente. Blockelemente stehen normalerweise untereinander, lassen sich aber auch mit Cascading Style Sheets (CSS) beliebig auf einer Seite positionieren (2 Beitrag ab Seite 80). Inline-Elemente flieen mit dem Text; an welcher Stelle sie stehen, hngt unter anderem vom Zeilenumbruch ab. Textblcke sind durchweg entweder in <p> und </p> eingeschlossene Abstze oder berschriften, die Sie durch Tags wie <h3> und </h3> klammern. Die Zahl zwischen 1 und 7 steht fr den Rang der berschrift: <h1> markiert eine Kapitelberschrift, <h7> eine berschrift eines kleineren Absatzes. Mit dem align-Attribut legen Sie die Textausrichtung von Abstzen oder berschriften fest, die ohne weitere Kennzeichnung linksbndig wren:
Inhalt 1. Tags und Attribute 2. Head und Body 3. Block- und Inline-Elemente 4. Textstil bestimmen 5. Bilder einbetten 6. Richtig verweisen 7. Texte und Bilder in Tabellen 8. Div und Span Ksten Tabelle als unsichtbarer Setzkasten Entities fr Umlaute und andere Sonderzeichen Das mssen Sie bei URLs beachten
Seite
<html> <head> <title>Hier soll der Titel der Seite stehen</title> <meta http-equiv="contenttype" content="text/html" charset="iso-8859-1" /> </head> <body> </body> </html>
Die Bedeutung von <meta>-Tags, die Schlsselwrter zur Beschreibung der Seite fr Suchmaschinen definieren, wird hufig berschtzt. Suchmaschinen orientieren sich tatschlich mehr am Inhalt einer Seite als an den Schlsselwrtern. Dennoch sollten Sie identifizierende Schlsselwrter angeben, wenn die Startseite der Website wenig von Suchmaschinen verwertbaren Text enthlt das gilt fr Seiten mit Frames ebenso wie fr Sites, die berwiegend mit Flash arbeiten (2 Seite 30). Ein <meta>-Tag mit Schlsselwrtern hat die Form
34 34 35 35 35 36 36 37
35 36 37
<meta name="keywords" con tent="Schlsselwort, ein anderes Schlsselwort" />
<p align="center"> Ein zentrierter Absatz.</p> <p align="right"> Ein rechtsbndiger Absatz.</p> <p align="justify"> Ein im Blocksatz ausgerichteter Absatz.</p>
Um eine Zeile zu beenden, ohne einen neuen Absatz zu beginnen, verwenden Sie den Tag <br />. Auch zustzliche Leerzeilen lassen sich so einfgen.
whlte, trugen viel zur Unbersichtlichkeit des HTML-Codes bei, da man jedes Textstckchen zwischen zwei Tags in <font>- und </font>-Tags einschlieen musste. Heute benutzt man besser Cascading Style Sheets, um etwa allen <h3>berschriften oder jedem von <p> und </p> begrenzten Text eine bestimmte Schrift, Schriftgre und einen bestimmten Stil zuzuordnen.
5. Bilder einbetten: Darauf sollten Sie achten

Mchten Sie JPEG- oder GIF-Bilder auf einer Seite einbetten, benutzen Sie den <img>Tag, der kein End-Tag braucht (2 Abbildung unten). Ein Attribut src nennt die URL des einzubettenden Bildes und muss stets vorhanden sein (2 Kasten Das mssen Sie bei URLs beachten). Auch ein Attribut alt, das eine alternative Textbeschrei-
Tabelle als unsichtbarer Setzkasten

Bei einer Tabelle knnen Sie die Dicke des Rahmens (in der Abbildung rot), den Abstand der Zellen zum Rahmen und voneinander (blau) sowie den Abstand zwischen Zellenrand und Inhalt (grn) getrennt whlen. Mit dem Attribut colspan lassen sich mehrere Zellen einer Spalte (in der Abbildung 1 und 2 in der ersten und 2 und 3 in der dritten Zeile) ebenso verbinden wie auch untereinander stehende Zellen mit dem Attribut rowspan (hier die drei Zellen der vierten Spalte).
4. Textstil bestimmen: So gehts
Innerhalb eines Textblocks knnen Sie den Textstil mit Inline-Tags bestimmen. <b>und </b> fetten den eingeschlossenen Text, <i> und </i> stellen ihn schrg. <sup> und </sup> erzeugen hochgestellten, <sub> und </sub> tiefgestellten Text; mit <big> und <small> vergrern oder verkleinern Sie den Text, mit <strong> heben Sie Textpassagen hervor. Die frher beliebten <font>-Tags, mit denen Selbstndig: HTML-Editoren vereinfachen das Einfgen von Bildern mit man Schriftart und -gre <img>-Tags und erzeugen selbstttig die richtigen Attributwerte (Punkt 5)
35
HTML-Tags
pGrundlagen
P Workshops
P Utilities
bung fr den Fall bereithlt, dass der Browser das Bild nicht ldt, sollten Sie immer angeben. Wenn Sie die Breite und Hhe des Bildes in Pixeln vorgeben, kann der Browser bereits das Layout der Seite berechnen, bevor das Bild geladen ist:
<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 selben Fenster. Das ist das Standardverhalten, sofern man nichts anderes explizit codiert hat. Dieses Verhalten knnen Sie mit dem Attribut target ndern: Setzen Sie target=_blank (ohne Anfhrungszeichen), ffnet der Browser mit jedem Klick ein neues Fenster, und die ursprngliche Seite bleibt weiterhin geladen. Statt _blank knnen Sie auch einen beliebigen Namen angeben, und wenn mehrere Links auf dasselbe Zielfenster verweisen, wird immer dasselbe Fenster zur Darstellung des Links benutzt: Beim ersten Klick auf einen Link mit einem benannten Target ffnet sich ein neues Fenster, und fr alle weiteren Links mit demselben Target greift der Browser dann auf dieses Fenster zurck. Auf diese Weise verhindern Sie, dass sich nach dem Anklicken mehrerer Links immer neue Fenster ffnen. So knnten Sie etwa auf einer Seite Vorschaubilder einer Fotogalerie zeigen, wobei ein Klick auf eines der verkleinerten Vorschaubilder eine hoch aufgelste Version
<img src="meinbild.jpg" alt="Mein Portrt" width= "120" height="180" />
6. Richtig verweisen: So setzen Sie Links

Verweise auf andere HTML-Seiten erzeugen Sie mit <a>- und </a>-Tags, die den Text oder die Grafik einschlieen, die als Link dienen sollen. Mit dem obligatorischen Attribut href geben Sie die URL der Seite an, auf die der Link verweist:
Einfach: Mit dem Tabellenassistenten des Editors lsst sich die Tabellen-Grundstruktur erzeugen (Punkt 7)
des Bildes ffnet. Geben Sie als Ziel des Verweises immer denselben Namen
<a href="Bild23gross.jpg" target="foto"><img src= "Bild23klein.jpg" /></a>

an, so wird neben der Vorschauseite stets nur ein weiteres Fenster geffnet sein, das die hoch aufgelste Version des zuletzt angeklickten Vorschaubildes zeigt. Wichtig: Der Name verweist auf das Fenster, nicht auf das Bild. Target gibt an, wo der Browser das Bild oder die Seite anzeigen soll.
<a href="seite_zwei.htm"> Klick mich!</a>

Statt des Textes zwischen dem Start- und End-Tag knnen Sie auch ber einen <img>-Tag eine Grafik einbinden, die als Link dienen soll. Mit dem Attribut title fgen Sie dem Link einen erklrenden Text bei, der vom Browser eingeblendet wird, sobald der Besucher der Web-Seite mit dem Mauszeiger darber fhrt:
7. Texte und Bilder in Tabellen: Das Setzkastenprinzip

Der <table>-Tag war in HTML ursprnglich eingefhrt worden, um Tabellen setzen zu knnen. Setzt man allerdings die Dicke der Trennlinien einer Tabelle auf null, so bleibt nurmehr ein unsichtbares Raster, eine Art Setzkasten brig, in dem sich beliebige Inhalte wie Texte oder Bilder platzieren lassen. Eine Tabelle besteht aus Zeilen, eingeschlossen in <tr> und </tr>, sowie Zellen, die durch <td> und </td> markiert werden. Normalerweise enthlt jede Zeile die gleiche Zahl von Zellen, die bndig untereinander ausgerichtet werden (2 Abbildung oben). Das Aussehen einer Tabelle wird durch drei Attribute bestimmt (2 Kasten Tabelle als unsichtbarer Setzkasten): border gibt die Dicke der Trennlinien vor; bei einer Dicke von null wird das Raster aus Zeilen und Spalten unsichtbar. Durch cellspacing lsst sich der Abstand zwischen den Zellen vergrern, whrend das cellpadding eine Auspolsterung zwischen der Zellenbegrenzung und dem darin enthaltenen Objekt frei lsst. Auf diese Weise kn-
Entities fr Umlaute und andere Sonderzeichen

HTML benutzt normalerweise den Ascii-Code, der keine Umlaute oder sonstige Sonderzeichen kennt. Sie knnen zwar mit einem <meta>-Tag einen Code wie ISO Latin-1 angeben und dann die darin verfgbaren Zeichen verwenden. Sicherer ist es jedoch, fr alle Symbole auerhalb des Ascii-Zeichensatzes die so genannten HTML-Entities zu verwenden, die immer mit & beginnen und auf ;enden (jeweils ohne Transfer: Super HTML untersttzt auch die Anfhrungszeichen). Das Whrungssymbol fr den Euro erzeugen Sie beispielsweise mit €. Auch Umwandlung von Sonderzeichen in Entities die Zeichen <, > und &, die im HTML-Code eine besondere Bedeutung haben, mssen Sie im gewhnlichen Text als Entities codieren, damit sie der Browser nicht fr HTML-Code hlt. Manche HTML-Editoren erzeugen diese Entities automatisch, wenn Sie Flietext zwischen den Tags eintippen. Die wichtigsten Entities sind: ä Ä ö Ö ü Ü ß – € © &bdquo; “ & < > ’ • & < >
36
pGrundlagen
P Workshops
P Utilities
HTML-Tags
nen Sie beispielsweise verhindern, dass Text in einer Tabellenzelle unmittelbar an die Begrenzungslinien stt. Die abgebildete Tabelle ist mit einem <table>-Tag definiert, der border, cellspacing und cellpadding auf einen Wert von 16 Pixeln und die Breite der Tabelle auf die volle verfgbare Fensterbreite setzt:
Das Tabellenraster ist nicht auf die simple Grundstruktur aus Zeilen und Spalten beschrnkt; wie in einem richtigen Setzkasten kann es auch in einer Tabelle grere Zellen geben, die mehrere Spalten oder Zeilen berspannen. Die Attribute row<table border="16" cellspa span und colspan einer cing="16" cellpadding="16" Zelle geben an, wie viele Zeiwidth="100%"> len und Spalten des Grundrasters von der Zelle belegt Hinter dem <table>-Tag und vor der erssind (2 Bild rechts). Ist row- Gitternetz ade: Mit den Attributen colspan und rowspan knnen Sie ten Zeile lsst sich mit <col>-Tags die Breispan grer als 1, ber- Zellen mit rechts davon oder darunter liegenden Zellen vereinigen (Punkt 7) te der untereinander stehenden Zellen bespannt die Zelle die entsprestimmen. Beispielsweise definiert chende Anzahl von Zeilen darunter; eine 8. Div und Span: Zelle mit einem colspan-Wert grer 1 Elemente ohne Eigenschaften <col width="1*" /> berspannt mehrere Spalten rechts davon. <col width="2*" /> Vergleichsweise jungen Datums in der EntMit diesen beiden Attributen schaffen <col width="1*" /> wicklungsgeschichte von HTML sind die Sie bei Bedarf sehr flexible Unterteilungen Tags <div> und <span>. Mit <div> und einer Seite, die das Raster, das der Tabelle eine Tabelle mit drei Spalten, wobei die </div> erzeugen Sie ein Blockelement ohzu Grunde liegt, kaum noch erahnen lasBreiten der ersten und dritten Spalte ein ne besondere Eigenschaften; entsprechend sen. Werden diese beiden Attribute ausViertel der Gesamtbreite und die Breite der bilden Sie mit <span> und </span> Inliufernd eingesetzt, so verkompliziert dies alzweiten Spalte zwei Viertel der Gesamtne-Elemente ohne weitere Eigenschaften. lerdings die Berechnung des Layouts im breite betragen soll. Statt Anteilen an der Die Bedeutung dieser Tags liegt darin, Browser. Daher ist es hufig sinnvoll, eine Gesamtbreite knnen Sie auch Prozentandass Sie in Cascading Style Sheets (CSS) deallzu komplexe Tabelle in mehrere einzelgaben oder exakte Pixelwerte verwenden. ren Eigenschaften definieren knnen. So ne Tabellen zu zerlegen. schlieen Sie etwa eine Navigationsleiste in <div>-Tags ein und positionieren sie mit Style Sheets auf der Seite. Mit CSS lsst sich auch ein besonderer Textstil wie eine HerSowohl als Ziel von Verweisen als auch bei der Einbindung von Bildern und Multimedia-Elemenvorhebung durch einen farbigen Hinterten gibt man die entsprechende Adresse als Uniform Resource Locator (URL) an. Bei Verweigrund als Unterklasse von <span> defisen auf Seiten auerhalb der eigenen Website muss die URL vollstndig sein beispielsweise nieren: Div und Span sind quasi Begrenzungselemente, innerhalb derer CSS zum http://pluto.ksi.edu/~cyh/ba519/Berners.html Einsatz kommen. Span besagt: Hier kommt Flietext; Div steht fr Hier Bei Verweisen auf Seiten oder Bilder auf der eigenen Site reicht es, deren Dateinamen anzukommt ein Block. Diese Tags besagen fr geben vorausgesetzt, sie liegen im selben Verzeichnis wie die Seite, von der aus Sie darauf sich genommen also fast nichts, aber den verweisen: so definierten Elementen knnen Sie dann mit CSS beliebige Eigenschaften geben.
Das mssen Sie bei URLs beachten
<a href="seite_zwei.htm">Klick mich!</a>

Falls die Seite oder das Bild in einem Unterverzeichnis liegt, geben Sie zustzlich auch dieses an:
span.textmarker {backgroundcolor: #ffff33;}

Im HTML-Code knnen Sie nun auf diesen Textstil zurckgreifen:
<img src="bilder/meinbild.jpg" />

Mit einem vorangestellten Schrgstrich geben Sie die Adresse ausgehend von der Startseite an. 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 darauf verweisende Seite in einem Unterverzeichnis liegt.
<p>Dieses <span class= "textmarker">Wort</span> ist hervorgehoben.</p>

Auf diese Weise lsst sich das Baukastensystem von HTML beliebig um neuartige Block- und Inline-Elemente erweitern.
37
Bei Angaben in Cascading Stylesheets (CSS) kommt stattdessen ein Doppelpunkt zum Einsatz, wie zum Beispiel:
<style type="text/css"> body {background-image: url(muster.gif);} </style>

Dabei hat man sich schnell vertippt und statt des Doppelpunkts das gewohnte Gleichheitszeichen eingesetzt. Dumm: Der Internet Explorer schluckt diesen Fehler und interpretiert die CSS-Angabe trotzdem richtig (oder auch nicht, 2 nchster Abschnitt). Netscape/Mozilla dagegen ignorieren die komplette Angabe innerhalb der geschweiften Klammern. Auch Opera ist hier sehr kritisch. Der erste Verdacht ist logischerweise: Netscape und Opera untersttzen die CSSAngaben nicht. Auf die Idee, dass nur ein Gleichheitszeichen falsch gesetzt ist, muss man erst einmal kommen. Weitere wichtige Hinweise ber CSS enthlt der Workshop ab 2Seite 80.
Fehlerfahndung
Fehler bei einer Web-Seite haben oft eine ganz einfache Ursache. Aber auf die muss man erst mal kommen. Wir sagen Ihnen, wo Sie suchen mssen und wie Sie Fehler vermeiden knnen.
3. Alles wird anders: Standards Compliant Mode

Browser haben sich lange Zeit nicht um die ffentlichen Standards des World Wide Web gekmmert. Eine Spezialitt der lteren Browser-Versionen ist es, Fehler im Code von Web-Seiten stillschweigend auszubgeln. Hier verhalten sich Netscape 7, Mozilla und Internet Explorer 6 anders: Sie verweigern die Zusammenarbeit und igno-
Kleine Fehler groe Wirkung: Oft liegen die Probleme bei der Darstellung von Web-Seiten im Browser an einzelnen Buchstaben oder Befehlen.
1. Der Fehlerklassiker: Gro- und Kleinschreibung

Es gibt wohl kaum einen Webmaster, dem noch kein Ladefehler wegen falscher Schreibweise des Dateinamens passiert ist. Smtliche Windows-Betriebssysteme unterscheiden nicht zwischen groen und kleinen Buchstaben im Dateinamen. Der Name FotoGalerie.HTM ist vllig gleichwertig zu fotogalerie.htm (jeweils ohne Anfhrungszeichen). Die meisten Webserver arbeiten jedoch mit Linux oder einer anderen Unix-Variante. Und diese Betriebssysteme unterscheiden sehr wohl ein A von einem a. Wenn Sie also die HTML-Datei FotoGalerie.HTM auf den Server kopieren, in einem Link aber href="fotogalerie.htm" steht, funktioniert der Link nicht. Mehr zum Thema
HTML-Grundlagen finden Sie in dem Beitrag 2 ab Seite 34. Um dieses Problem von vornherein zu vermeiden, sollten Sie grundstzlich alle Dateinamen komplett klein oder komplett gro schreiben. Dabei hilft Ihnen die Freeware Gross-Klein 2.6a fr Windows 98/ME, 2000 und XP (1,9 MB, unter www.lab1.de und auf C Heft-CD). Eine Ausnahme gibt es: Java-Applets (Datei-Erweiterungen .class und .Class) enthalten intern den Namen der Applet-Datei inklusive Gro und Kleinschreibung. Wenn Sie die Schreibweise des Dateinamens ndern, funktioniert das Applet auf dem Webserver nicht mehr. Das Tool GrossKlein bercksichtigt diese Ausnahme.
2. Cascading Stylesheets: Doppelpunkt beachten

Bei HTML-Tags geben Sie den Wert eines Attributs mit einem Gleichheitszeichen an, also beispielsweise:
<body background="muster.gif">
Gross-Klein 2.6a: Damit wandeln Sie rasch die Dateinamen ganzer Verzeichnisse um (Punkt 1)
38
pGrundlagen
P Workshops
P Utilities
Fehler finden
Grundlagen
rieren falsche Befehle mit teilweise fatalen Folgen fr die Darstellung Ihrer WebSeiten. Das betrifft vor allem ungenauen oder falschen HTML- und CSS-Code. Der Unterschied kann je nach Web-Seite betrchtlich sein, wie die Gegenberstellung in den beiden Bildern rechts zeigt. Beim IE nennt sich die strenge Version Standards Compliant Mode, die weniger strenge Kompatibilittsmodus.
4. Eine Zeile entscheidet: DOCTYPE oder nicht

Die gestrengen neuen Browser lassen sich allerdings milder stimmen. Die strengen Regeln gelten nmlich nur, wenn in Ihrer HTML-Datei ein ganz bestimmter Text in der ersten Zeile steht. Laut Standard fngt eine HTML-Datei nmlich nicht mit <html> an, sondern mit
Code-Fehler: ltere Browser korrigieren Fehler im Code von Web-Seiten oft stillschweigend (links). Die neue Browser-Generation macht dieselben Code-Fehler gnadenlos sichtbar, rechts etwa am roten Rand erkennbar (Punkt 3)
HTML- und CSS-Dateien auszubessern. Die wichtigsten HTML-Unterschiede betreffen vor allem Kleinigkeiten, die aber groe Auswirkungen haben.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">

Diese !DOCTYPE-Deklaration legt fest, welche HTML-Version und HTML-Variante die nachfolgende Web-Seite verwendet (die Document Type Definition, kurz DTD). Die genaue Bedeutung des Inhalts muss Sie nicht kmmern. Die Faustregel hierzu: Ist die !DOCTYPEZeile vorhanden, dann sind die neuen Browser streng. Fehlt die Zeile, dann verbessern die Browser wie bisher viele kleine Fehler automatisch. Denn der Browser kann dann ja nicht wissen, welchen Standard er voraussetzen soll. Die einfache Lsungsmglichkeit besteht also darin, mit einem HTML-Editor die !DOCTYPE-Zeile zu lschen. Besser ist es allerdings, die fehlerhaften Stellen in den
5. HTML-Unterschiede: Der Hintergrund ist grer

In lteren Versionen des Internet Explorers entsprach der <body>-Tag dem kompletten Hintergrund einer Web-Seite. Auf diesem Hintergrund stellte der Browser den Inhalt des Dokuments dar. Die Gre des Hintergrunds legt das Browser-Fenster fest. Im Gegensatz dazu entspricht der <html>-Tag im strengen Modus dem kompletten Seitenhintergrund. Sie knnen die Gre des <body>-Bereichs ber CSS-Eigenschaften sogar nach Belieben setzen. Sie sollten daher ein Hintergrundbild oder eine Hintergrundfarbe in <body> und <html> festlegen. Im rechten Teil der Abbildung oben ist der Fehler als roter Rand deutlich zu sehen. ber das Attribut scroll legen Sie fest, ob der Browser Rollbalken anzeigt oder nicht. Im strengen Modus dagegen mssen Sie das Attribut in <html> eintragen.
Sammeleigenschaften Geben Sie bei Sammeleigenschaften wie margin oder font einen falschen Wert an, interpretiert der Internet Explorer die Werte bis zum falschen Wert korrekt. Laut CSSStandard sollte der Browser aber die Sammeleigenschaft komplett ignorieren. Dieses Verhalten gilt im strengen Modus. Laut CSS-Standard mssen Sie auerdem bei der font-Eigenschaft mindestens die Werte fr font-size und font-style angeben. Im strengen Modus ist konsequenterweise zum Beispiel die Deklaration font: 14pt; ungltig, es msste font: 14pt normal; notiert werden. Fehlt das fhrende Zeichen # in einer RGB-Farbangabe wie color: #FF0000, ignoriert der Browser im strengen Modus die Farbangabe komplett. Viele CSS-Eigenschaften erwarten als Wert eine Lngenangabe, fr die CSS eine Reihe von festen Einheiten erlaubt (zum Beispiel px fr Pixel oder mm fr Millimeter). Der Microsoft-Bowser interpretiert eine Lngenangabe ohne Einheit wie width: 600; automatisch als Pixel (width: 600px). Im strengen Modus ignoriert der Internet Explorer 6 die Deklaration. Schlsselwrter Schlsselwrter wie die Farbnamen (red und so weiter) drfen nach CSS nicht in Anfhrungszeichen stehen. Sonst interpretiert sie der Browser als Zeichenkette. Nach CSS darf der Wert eines class- oder id-Attributs nicht mit einer Ziffer (09) beginnen. <img class="0rand"> ist also fr CSS eine ungltige Schreibweise, die sich nicht als Klassenselektor einsetzen lsst. Zudem wird nach HTML 4.0 Gro- und Kleinschreibung in beiden Attributwerten unterschieden. Der Internet Explorer akzeptiert beide Problemflle allerdings nicht im strengen Modus.
6. CSS: Der Fehler steckt im Detail

Die zweite Gruppe von Unterschieden bezieht sich auf die Interpretation von Cascading Stylesheets (CSS, siehe auch den 2Beitrag ab Seite 80). Dadurch knnen Stylesheets, die bisher im Kompatibilittsmodus einwandfrei funktioniert haben, pltzlich unvorhersehbare Ergebnisse liefern. Der Internet Explorer akzeptiert im Kompatibilittsmodus die Kommentarzeichen  von HTML auch innerhalb von CSS-Bereichen. Im strengen Modus sind nur noch die CSS-Kommentarzeichen /* und */ erlaubt.
Fehlerquelle Sonderzeichen
Zum Komplex Dateinamen gehren neben der Gro- und Kleinschreibung (2 Punkt 1) auch Sonderzeichen wie , , oder das Leerzeichen. In Dateinamen sollten Sie darauf verzichten und nur die Buchstaben a bis z sowie Zahlen und den Bindestrich verwenden. Damit sollten alle Webserver klarkommen.
39
browse bedeutet auf Deutsch soviel wie schmkern, also im Web blttern. Microsofts Internet Explorer hat weit ber 90 Prozent Marktanteil. Daneben gibt es aber noch andere Browser wie Netscape (identisch mit Mozilla) und Opera. Fr Linux-PCs und Mac-Computer existieren ebenfalls weitere Browser. Damit mglichst viele Besucher die Web-Seiten einwandfrei sehen knnen, sollte ihr Programmierer sie immer mit mehreren Browsern testen.
CGI
Die Programmierschnittstelle Common Gateway Interface (CGI) gibt es nur auf den 2 Webservern im Internet. Mit CGI kann ein 2 Browser etwa auf Datenbanken zugreifen, Gstebcher verwalten oder 2 Cookies setzen. Allerdings erlauben die meisten Online-Dienste wie AOL oder T-Online den Einsatz von CGI aus Sicherheitsgrnden nicht oder beschrnken ihn auf einige vordefinierte Scripts. Zudem ist es recht kompliziert, CGI-Scripts zu schreiben.
Homepage-Lexikon
In unserem Glossar finden Sie die wichtigsten Begriffe zum Thema Homepage kurz und bndig erklrt. Egal, welche Informationen Sie suchen hier sind Sie richtig.
Chat
Das englische Wort chat bedeutet so viel wie sich unterhalten oder ratschen. ber das Web funktioniert das so hnlich wie eine Konferenzschaltung am Telefon: Sie tippen einen Satz ein, den sofort alle anderen Teilnehmer der Chat-Runde sehen. Die knnen direkt darauf antworten. Im Web gibt es Chat-Seiten (etwa bei www.allegra.de), die auf 2Java basieren. Um an diesen Chats teilzunehmen, braucht man nur einen Javafhigen 2Browser. Der 2 Webspace-Provider 1&1 (www.1und1.de) beispielsweise bietet seinen Kunden ein fertiges Chat-Modul zum Einbau auf eigene Seiten ein.
Applet
Ein Applet ist ein kleines Programm-Modul, das in Java programmiert ist und sich in Web-Seiten einbauen lsst. Der Webserver bertrgt das Applet an den 2 Browser auf Ihrem PC. Dort wird das Programm dann in einer sicheren Umgebung (Sandbox) ausgefhrt. Java-Applets fhren komplexe Funktionen aus, etwa ein Mensystem oder auch ein Action-Spiel.
Blinde Tabelle
HTML ist nur beschrnkt dazu in der Lage, einen Text oder ein Bild an einer bestimmten Stelle zu platzieren. Der Browser gestaltet den Aufbau einer Web-Seite recht frei. Abhilfe schaffen Tabellen. Jede ihrer Zellen kann Text, Bilder oder wieder eine Tabelle aufnehmen. So zwingt der Homepage-Programmierer den 2 Browser, Elemente nebeneinander oder untereinander darzustellen. Da solche Layout-Tabellen unsichtbare Rnder haben, heien sie auch blinde Tabellen. Als Alternative bietet 2 CSS die so genannte Positionierung, die alle modernen Browser untersttzen.
Cookie
Ein Cookie (englisch fr Keks) ist eine kleine Textdatei, die ein 2 Webserver auf dem Anwender-PC speichert. So wei der Server beim nchsten Besuch, dass dieser Anwender schon mal da war und welche Seiten er betrachtet hat. Er kann ihn dann etwa mit Namen begren oder eine Web-Seite anzeigen, die ihn interessieren knnte.
Attribut
Angaben in HTML-Tags (2 HTML, 2 Tag), die das Verhalten des Browsers steuern, heien Attribut. Der Tag <img> beispielsweise enthlt immer die Angabe, welches Bild der Browser anzeigen soll: <img src="bild.gif">. Es gibt noch weitere optionale Attribute wie align=, border= oder low src=. Fr viele Attribute ist der CSS-Befehl (2 CSS) eine modernere und leistungsfhigere Alternative zum HTML-Tag.
CSS
Die Cascading Style Sheets (CSS) sind wie 2 HTML ein Standard des 2 W3C. Die CSSBefehle dienen dazu, die Gestaltung einer Web-Seite etwa Schrift, Farben oder Platzierung von Elementen wie Bildern zu steuern. Das W3C empfiehlt, in HTML-Da-
Browser
Die Informationen im Web sind in HTMLDateien gespeichert. Der Browser holt sich diese Dateien aus dem Internet und zeigt den Inhalt formatiert auf dem Bildschirm des Anwenders an. Das englische Wort
40
pGrundlagen
P Workshops
P Utilities
Homepage-Lexikon
reiche auf. Jeder dieser Bereiche zeigt eine eigene 2 HTML-Datei an.
FTP
um 2 W3C bergeben. Seit Januar 1998 gibt es die heute noch aktuelle HTML-Version 4.0. Der Nachfolger ist 2 XHTML 1.0, das etliche alte 2 Tags und 2 Attribute verbietet und dafr verstrkt auf 2 CSS setzt.
Das File Transfer Protocol HTTP (FTP) ist eine Methode, um Mit dem Hyper Text Transfer Protocol komvia Internet grere Dateien munizieren 2 Browser und 2 Webserver ber rasch zu bertragen. Als Gedas Internet. Das Protokoll ist auf die bergenstck zum FTP-Client auf Gestaltungsfreiheit mit CSS: Cascading Style Sheets in einer HTML-Datei tragung vieler kleiner Dateien optimiert, dem PC des Anwenders tritt erlauben zum Beispiel solche ausgefallenen Tabellen-Layouts da HTML-Dateien und Bilder meist klein ein FTP-Server im Internet sind. Fr groe Dateien ist das 2 FTP-Protoauf. Auch die bertragung teien nur die Struktur der Web-Seite mit koll besser. der Website-Dateien zum 2 Webserver erberschriften, Abstzen und so weiter festfolgt in der Regel per FTP. Moderne 2 BrowHyperlink zulegen. Die Gestaltung sollen dagegen ser haben einen einfachen FTP-Client, der Mit einem Hyperlink oder kurz Link oft CSS-Befehle direkt in der HTML-Datei oder aber nur Dateien herunterladen kann. mit Querverweis, Verweis oder Verknpin einer separaten Datei bernehmen. Die GIF fung bersetzt werden im WWW Webaktuellen Browser untersttzen ausnahmsGraphics Interchange Format (GIF) ist ein Seiten miteinander verknpft. Ein Link ist los fast alle Befehle von CSS Level 2, der EinDateiformat, das ursprnglich vom Onlineein markiertes Wort oder eine Grafik, das satz ist stark zu empfehlen. Dienst Compuserve fr die bertragung beim Anklicken mit der Maus eine andere Domain von Bildern per Modem entwickelt wurde. Web-Seite in den Browser ldt. In der Regel Eine eindeutige Adresse im Internet wie GIF komprimiert die Bilddaten recht gut stellen 2Browser Text-Links blau und unterwww.pcwelt.de ist eine Domain. ber dieund verlustfrei. Es erlaubt kleine Trickfilme strichen dar, whrend Grafik-Links oft eise Adresse ist eine Homepage erreichbar. mit animierten Bildfolgen (GIF-Animation) nen blauen Rand haben. Die Farben lassen Um eine eigene Domain zu bekommen, sowie einen durchsichtigen, transparenten sich jedoch vom Anwender frei einstellen. mssen Sie Platz bei einem 2Webspace-ProBildhintergrund. Doch lsst GIF nur maxiInternet 2 World Wide Web vider mieten. Bekannte Webspace-Provider mal 256 Farben je Bild zu. Fr Bilder in nasind 1&1 (www.1und1.de) oder Strato (www. trlichen beziehungsweise Echtfarben sind Java strato.de). Die Domain wird auf Ihren Namen die Formate 2 JPG beziehungsweise 2 PNG Java ist eine Programmiersprache fr das registriert, Sie haben auf unbestimmte Zeit deshalb die bessere Wahl. Internet, die unabhngig vom jeweiligen Anspruch darauf und knnen sie bei einem Homepage Betriebssystem ist. Ein Entwickler schreibt Wechsel des Providers mitnehmen. Unter Homepage versteht man im Allgeein kleines Programm, ein 2 Applet, und Download meinen die erste Seite oder Startseite eines bindet es in eine Web-Seite ein. Lsst sich Beim Download bertragen Sie Dateien Web-Angebots. Diese Seite bekommt der der Anwender eine Web-Seite mit Applet von einem 2 Webserver im Internet auf die Surfer zu sehen, wenn er eine Adresse wie anzeigen, so schickt der 2 Webserver das ApFestplatte Ihres PC. Sie wickeln den Downwww.pcwelt.de im 2 Browser eingibt. Die plet an dessen 2 Browser. Der Browser beload direkt ber den 2 Browser oder ber Homepage ist meist das Inhaltsverzeichnis sitzt ein Modul (Java Virtual Machine, kurz ein spezielles Verfahren namens 2 FTP ab. fr viele weitere Teilseiten. Alle diese WebJava-VM), das den Programmcode des ApSeiten bezeichnet man zusammen mit der plets ausfhrt. Ein Applet funktioniert auf Event-Handler Homepage als 2 Website. Ein Event-Handler ist ein 2 Attribut eines HTML-Standard HTML-Tags (2 HTML, 2 Tag), das eine 2 JaHTML steht fr Hyper Text vascript-Funktion aufruft. Solche EventMarkup Language, etwa BeHandler sind zum Beispiel onload= (beim schreibungssprache fr TexLaden der Site) oder onmouseover= (beim te mit Querverweisen. Alle berfahren mit der Maus). Event-Handler Web-Seiten im 2 World Wide sorgen dafr, dass eine Web-Seite nicht Web sind im HTML-Format mehr passiv ist, sondern auf Benutzerakgespeichert. HTML entstand tionen reagiert. Das bekannteste Beispiel 1991 als Fleiarbeit einisind animierte Schaltflchen, die sich ger Wissenschaftler am beim berfahren mit der Maus verndern. Schweizer KernforschungsFrame zentrum CERN. Die WeiterMit Frames (zu deutsch Rahmen) teilen Sie entwicklung wurde bald Homepage-Upload: Mit einem FTP-Programm wie Filezilla bertragen Sie das 2 Browser-Fenster in unabhngige Beans ehrenamtliche Gremi- die Dateien Ihrer Homepage zum Webserver PC-WELT SONDERHEFT 2/2004
41
Homepage-Lexikon
pGrundlagen
P Workshops
P Utilities
bleiben erhalten, whrend Bilddetails, die das menschliche Auge nicht wahrnimmt, verschwinden. Die Kompression ist also verlustbehaftet. Je strker der Anwender den JPG-Algorithmus komprimieren lsst, desto schlechter wird die Bildqualitt.
PHP sind in eine normale 2 HTML-Datei eingebettet und sorgen fr dynamische WebSeiten. So lassen sich damit beispielsweise Web-Seiten erzeugen, die Informationen aus einer Datenbank enthalten, etwa die Eintrge eines Gstebuchs.
Linkchecker
In einem greren Projekt mit vielen Links (2 Hyperlink) ist es eine mhsame Aufgabe, die Funktionsfhigkeit aller internen (zu anderen Seiten des Projekts) und externen (zu fremden Web-Seiten) Links zu prfen. Spezialisierte Programme, die Linkchecker, nehmen dem Programmierer diese Aufgabe ab. Sie klappern einen Link nach dem anderen ab und prfen, ob das angegebene Ziel vorhanden ist. Viele HTML-Editoren haben bereits einen eingebauten Linkchecker.
Pixel
PC-Monitore bauen Bilder immer aus einzelnen Farbpunkten auf. Am Bildschirm sehen Sie typischerweise 640 x 480 oder 1024 x 768 oder 1200 x 1024 Farbpunkte. Jeder Farbpunkt oder Bildpunkt ist ein Pixel.
Java-Applet: Es fhrt komplexe Aufgaben in einer Site aus. Hier lsst es die Schrift um die Weltkugel rotieren
PNG
Das Dateiformat PNG (Portable Network Graphics) fr Bilder beruht auf einem offenen Standard. Es vereint viele Eigenschaften von 2 GIF und 2 JPG. Wie JPG kann es Bilder in Echtfarben speichern, wie bei GIF erfolgt die Komprimierung verlustfrei, und es gibt Transparenzeffekte. Obwohl alle modernen 2Browser das PNG-Format untersttzen, hat es sich in der Praxis bisher nicht durchsetzen knnen.
allen Computern, die eine Java-VM bereitstellen. Java-Applets sorgen oft fr aufwendige Animationen oder Sound, aber auch fr sichere Homebanking-Lsungen. Um zu verhindern, dass ein bswilliger Programmierer mit einer scheinbar harmlosen Web-Seite heimlich ein Programm auf den Anwender-PC bertrgt, das etwa Passwrter stiehlt oder gar die Festplatte formatiert, laufen Java-Applets in einer so genannten Sandbox unter berwachung ab. Ein Java-Applet kann keine Dateien auf Ihren PC kopieren oder Systemprogramme aufrufen. Das Konkurrenzprodukt Active X von Microsoft ist wesentlich gefhrlicher.
Meta-Tag
Die meisten HTML-Tags (2 HTML, 2 Tag) beeinflussen das Aussehen der Web-Seite im Browser. Eine Web-Seite kann aber auch andere Infos enthalten, zum Beispiel ihren Autor, ihr Entstehungsdatum, Stichwrter (Keywords) fr Suchmaschinen und so weiter. Fr solche Informationen gibt es den Tag <meta>. Um die verschiedenen Informationen auseinander zu halten, gibt es das 2Attribut name=. Die Information selbst steckt im Attribut content=. Stichwrter fr eine Suchmaschine sehen zum Beispiel so aus: <meta name="keywords" content="Stichwort1, Stichwort2, ...">
Streaming
Sound- und Videodateien sind meist gro und eignen sich deshalb kaum fr den Einsatz im Web, vor dem Abspielen mssen die Daten erst komplett bertragen werden. Die Streaming-Technologie umgeht das: Bereits whrend der bertragung zeigt ein Player die Videos an oder spielt Sounddateien. Zwei Standards streben nach der Marktherrschaft: Real Player von Real Media und Media Player von Microsoft.
Javascript
hnlich wie Word oder Excel besitzen auch 2 Browser eine Makrosprache: Javascript. Javascript-Programme trgt der Programmierer direkt in den 2 HTML-Code einer Web-Seite ein. Internet Explorer, Netscape/Mozilla und Opera untersttzen Javascript, unterscheiden sich aber in Details. Weil Javascript als Klartext bertragen wird, ist die Ausfhrung langsamer als bei Java-Applets (2Java, 2Applets). Auch Javascript-Programme knnen theoretisch wenig Schaden auf dem Anwender-PC anrichten, weil sie etwa nicht auf Dateien zugreifen drfen. Doch werden immer wieder Browser-Sicherheitslcher bekannt, die unter Umstnden doch gefhrliche Aktionen erlauben. Nicht zuletzt deshalb gibt es alle paar Monate neue Windows-Updates.
Perl
Diese einfache Programmiersprache (Practical Extraction and Report Language) ist auf die Verarbeitung von Texten spezialisiert. Perl-Interpreter, die Perl-Programme abarbeiten, sind im Internet kostenlos zu haben. Deshalb erfreut sich Perl groer Beliebtheit fr den Einsatz auf 2 Webservern zum Verfassen von 2 CGI-Scripts.
Tag
Die Web-Seiten im Internet sind mit der Beschreibungssprache 2 HTML formatiert. Die einzelnen Kommandos bezeichnet man als Tags (Markierung oder Fhnchen). Mit Tags kann man zum Beispiel Textteile fett oder kursiv auszeichnen.
PHP
Wie 2 Perl ist PHP (PHP Hypertext Preprocessor) eine Scriptsprache, die auf dem 2 Webserver abluft. Sie ist mittlerweile sogar beliebter als Perl. Die Steuerbefehle von
Textur
Die kleinen Kachelbilder (meist 100 x 100 Bildpunkte), die sich als Hintergrund einer Web-Seite nahtlos aneinanderfgen, werden oft als Textur bezeichnet.
JPG
Das JPG-Dateiformat (Joint Photographic Experts Group) fr Grafiken kommt im Web dann zum Zug, wenn der Programmierer Bilder mit vielen Farben stark komprimieren mchte. Denn die vielen Farben
Bilder komprimieren: Das JPG-Dateiformat fr Grafiken kommt im Web dann zum Einsatz, wenn der Programmierer Bilder mit vielen Farben stark komprimieren mchte. Darunter leidet aber die Bildqualitt
42
pGrundlagen
P Workshops
P Utilities
Homepage-Lexikon
W3C
Das World Wide Web Consortium (W3C) ist das zentrale Entscheidungsgremium fr Standards im Web (www.w3c.de). Es arbeitet auf ehrenamtlicher Basis, mittlerweile sind viele Firmenvertreter daran beteiligt. Das W3C entscheidet zum Beispiel ber Erweiterungen des 2 HTML-Standards.
AOL stellen ihren Kunden begrenzt Platz fr eine Homepage zur Verfgung.
World Wide Web

Das weltumspannende Netzwerk von WebSeiten, die mit 2 Hyperlinks verknpft sind. Der Name entstand, weil die Struktur mit den Hyperlinks an ein Spinnennetz (auf Englisch: Web) erinnert und das Netz weltumspannend ist (World Wide). Die Infrastruktur (Hardware und Software) dazu ist das Internet. Es verbindet die beteiligten Computer physikalisch miteinander.
Wallpaper
2 Browser knnen eine Web-Seite mit einem Hintergrundbild hinterlegen. Dabei kommen meist sehr kleine Bilder zum Einsatz, die der Browser wie Kacheln oder Tapetenstreifen aneinander reiht, um eine grere Flche zu erhalten. Deshalb ist oft von Wallpaper (Tapete) die Rede.
Bewegte Bilder: Mit Streaming erscheinen auf der Web-Seite Videos, noch whrend sie geladen werden
XHTML
XHTML ist der Nachfolger von 2 HTML, hat sich aber in der Praxis noch nicht durchgesetzt. Wesentlicher Unterschied: XHTML ist streng an den Regeln von 2 XML ausgerichtet. So lsst sich XHTML mit anderen XMLkompatiblen Formatsprachen wie SVG (Vektorgrafik) oder MathML (mathematische Gleichungen) verknpfen. Da XHTML kaum 2 Tags und 2 Attribute fr die Gestaltung von Web-Seiten untersttzt, ist der Einsatz von 2 CSS unerlsslich.
WAV
Digitale Klnge speichert Windows standardmig im WAV-Format (Wave File Format). Dabei ist das Tonsignal wie auf der Audio-CD digital abgelegt. Je nach Qualitt knnen WAV-Dateien sehr gro sein. Deshalb eignet sich WAV nur fr Kurzsounds, etwa Effekte beim Anklicken eines Links. Fr lange Musikstcke bietet sich das sehr platzsparende Midi-Format (Musical Instrumental Digital Interface) an.
Thumbnail
Die bertragung von groen Bilddateien dauert im Internet recht lange. Wer dies dem Besucher seiner Website ersparen will, setzt verkleinerte Vorschaubilder ein, von denen der Gast sich nur die gewnschten Bilder im Originalformat anzeigen lsst. Die Vorschaubilder heien ihrer Gre wegen Thumbnails (Daumennagel).
XML
Die Extensible Markup Language (XML) ist wie 2 HTML ein Standard des 2 W3C. Beide Sprachen haben einen gemeinsamen Ursprung, die Structured Generalized Markup Language (SGML), die fr die Archivierung von Texten entwickelt wurde. Da sie sehr kompliziert ist, haben sich die einfacheren Ableger HTML fr das Internet und XML fr die Textarchivierung durchgesetzt. XML ist brigens nicht Nachfolger von HTML: Beide Sprachen verfolgen unterschiedliche Ziele und ergnzen sich.
Upload
Beim Upload zu deutsch: Hochladen bertragen Sie eine Datei von Ihrem PC auf einen anderen Computer, etwa die Dateien Ihrer Website auf den 2 Webserver eines Online-Dienstes. Meist kommt dafr das 2 FTPProtokoll zum Einsatz.
Webserver
Im Internet gibt es spezialisierte Computer, die 2 HTML- und Bilddateien speichern, die Webserver. Will ein Anwender eine bestimmte 2 Homepage sehen, so nimmt sein 2 Browser Verbindung zum passenden Webserver auf und lsst sich von ihm die HTML-Dateien und Bilder schicken.
URL
Der Uniform Resource Locator (URL) ist die komplette Adresse einer Datei im Internet. So knnte http://www.homepage.de/index.htm etwa die Homepage eines Web-Angebots sein. ftp://ftp.uni-augsburg.de/tools/psps5.exe beispielsweise ist die URL einer Programmdatei auf einem 2 FTP-Server. Heute spricht man allgemein von URI (Uniform Resource Identifier).
Website
Der Sammelbegriff fr den ganzen Internet-Auftritt eines privaten Anwenders oder eines Unternehmens, also alle Web-Seiten inklusive der 2 Homepage, lautet Website.
Webspace-Provider
Ein Webspace-Provider stellt Anwendern kostenlos oder kostenpflichtig Platz fr ihre Homepage bereit. Bekannte Provider sind etwa 1&1 (www.1und1.de) oder Strato (www.strato.de). Auch die meisten Internet-Zugangs- World Wide Web Consortium: Die unabhngige Organisation W3C sorgt fr provider wie T-Online oder weltweit anerkannte Standards rund ums Web
VB-Script
Als Konkurrenz fr 2 Javascript hat Microsoft im Internet Explorer die Makrosprache VB-Script eingebaut. VB-Script basiert auf Visual Basic, das auch bei den Programmen Word und Excel als Makrosprache dient. In der Praxis hat sich VB-Script kaum durchgesetzt, weil es alle Benutzer von anderen 2Browsern ausschliet. PC-WELT SONDERHEFT 2/2004
43
ten sind heute die Interpreter fr die beiden Scriptsprachen Perl und PHP (2 Seite 42). Dabei ist das jngere PHP leichter einzubinden. Zudem ist die Sprache an sich sehr viel einfacher zu erlernen.
2. Unverzichtbar: Webserver mit Testprogramm berprfen

Mittlerweile bieten nahezu alle Internet Service Provider (ISP) einen PHP-Interpreter an. Ob Ihr ISP dies auch tut und welche PHP-Version bei ihm installiert ist, knnen Sie leicht prfen. Erstellen Sie mit Homesite, Phase 5 oder mit dem Windows-Editor eine Textdatei mit dem Namen test.php (ohne Anfhrungszeichen). Anhand der Endung erkennt der Webserver, dass es sich um eine Datei handelt, die sowohl HTMLTags als auch PHP-Code enthlt. Geben Sie dann in der Datei folgende drei Zeilen ein:
Homepage interaktiv
Webserver-Scripts sind die hohe Schule eines Web-Auftritts. Sie geben damit Ihren Besuchern die Mglichkeit, sich interaktiv zu beteiligen, zum Beispiel in einem Gstebuch oder Forum.
Von Ingo Bhme
<?PHP phpinfo(); ?>

Im Gegensatz zu einer einfachen HTML-Datei knnen Sie PHP-Scripts nicht einfach mit einem Doppelklick im Browser ffnen. Laden Sie die Datei test.php mit einem FTP-Programm auf Ihren Webserver (2 Seiten 96 und 126), zum Testen am besten in das Hauptverzeichnis. Lautet die URL Ihres Internet-Auftritts etwa www.meinname.de, geben Sie danach im Browser die Adresse www.meinname.de/test. php ein. Fhrt dies zu einer Fehlermeldung oder wird nur der eingegebene Text angezeigt, kann Ihr Webserver PHP-Scripts nicht ausfhren. In diesem Fall empfehlen wir Ihnen: Wechseln Sie Ihren ISP. Meistens wird am Bildschirm jedoch eine farblich formatierte Tabelle erscheinen (2 Abbildung rechte Seite oben). Hier erfahren Sie ganz oben, welche PHP-Version auf Ihrem Server installiert ist. Anhand dieser Information finden Sie heraus, ob eines der im Folgenden erwhnten kostenlosen Scripts auch bei Ihnen luft. Nach Lektre dieses Beitrags sollten Sie die Datei test. php unbedingt lschen, da sonst Besucher, die zufllig die Datei ffnen, alle Informationen ber Ihren Webserver sehen. Tipp: Manche Webserver knnen PHP-Code auch innerhalb von HTML-Dateien ausfhren. Das ist aber eher die Ausnahme. Daher sollten Sie PHP-Dateien auch mit der Endung .php (ohne Anfhrungszeichen) kennzeichnen. Sie knnen Ihre gesamte
HTML-Seiten sind statisch. Mit Hilfe von Javascript oder VB-Script knnen Sie Ihrer Site einen pseudodynamischen Touch geben. Wirklich interaktiv wird der Web-Auftritt aber erst dann, wenn ihm WebserverAnwendungen zu Grunde liegen. Dabei handelt es sich um Programme, die durch den Aufruf der URL gestartet werden. Sie werden auf dem Webserver ausgefhrt und geben als Ergebnis reinen HTMLCode an den Browser des Benutzers zurck. Der merkt gar nicht, dass im Hintergrund ein Script gestartet wurde, das vielleicht sogar eine Datenbankabfrage ber mehrere Millionen Datenstze ausgefhrt hat. Um diesen Beitrag gut nachvollziehen zu knnen, brauchen Sie Grundkenntnisse in HTML, wie sie Ihnen der 2 Artikel ab Seite 34 vermittelt. Und Sie sollten mit einem Text-Editor umgehen knnen. Theoretisch reicht der Windows-eigene Editor Notepad. Optimaler ist ein spezialisiertes HTMLTool wie Homesite 5.5 (www.macrome
dia.com/de/software/homesite, ab Windows 98, 142 Euro, Trial-Version auf der Website). Eine kostenlose und noch dazu deutschsprachige Alternative ist Phase 5.3 fr Windows 98/ME, NT 4, 2000 und XP (www.ftp-uploader. de/ftp-download.php4 und auf C Heft-CD, Details 2 auf Seite 113).
1. Webserver-Scripts: Dynamische Inhalte

Webserver-Scripts liefern Inhalte dynamisch an den Browser des Benutzers anders als HTML-Dateien, die, einmal auf den Webserver geladen, ihre Gre und die bermittelten Daten nicht mehr verndern. Dabei kommen beim Benutzer selbst nur reine HTML-Tags an. Scripts werten Daten aus und bauen aus den Ergebnissen eine HTML-Seite zusammen, die vom Webserver an den Browser bertragen wird. Die Scripts werden auf dem Webserver von einem so genannten Interpreter ausgefhrt. Am gebruchlichs-
44
pGrundlagen
P Workshops
P Utilities
Webserver-Anwendungen
tenlosen Webserver-Anwendungen whlen knnen, etwa den Visyte Alpha Counter (www.visyte.com/products/ acounter.zip und auf C HeftCD). Dieser Besucherzhler ist mit einer Reload-Sperre ausgestattet. Das bedeutet, dass er sich die IP-Adresse des Besuchers merkt und so verhindert, dass jemand die Besucherzahl mit der Aktualisieren-Schaltflche in die Hhe treibt. Der Einsatz des Counters ist denkbar einfach. Extrahieren Sie die Datei acounter.php aus dem ZIP-Archiv, und kopieWebserver-Infos: Mit Hilfe eines kleinen eigenen Scripts bringen Sie alle ren Sie sie in Ihr Homepagewichtigen Informationen ber Ihren Webserver in Erfahrung (Punkt 2) Verzeichnis auf Ihrem PC. ffnen Sie dann Ihre HomeWebsite umstellen, indem Sie berall die page-Quelldatei, also beispielsweise index. Endungen htm oder html gegen php php, und tragen Sie an der Stelle, an der tauschen. Den Inhalt knnen Sie gleich lasder Zhler erscheinen soll, den Code sen, da PHP-Dateien auch normale statische <?PHP HTML-Seiten sein knnen. Achten Sie nur include("acounter.php"); darauf, dass Sie die Links in Ihren Seiten ?> entsprechend anpassen.
Inhalt 1. Dynamische Inhalte 2. Webserver berprfen 3. Homepage-Besucherzhler 4. Gstebuch anlegen 5. Datenbanken auf dem Webserver 6. Kr fr Ihre Website: Ein Forum
Seite
44 44 45 45 46 47
Ksten Hier finden Sie kostenlose Scripts 45 Datei-Attribute per FTP-Programm ndern 47
3. Homepage-Besucher: Ein Counter zhlt

Es gibt viele Anbieter, die die Besucherzahl aufzeichnen, etwa http://topsites.onlinehost. de/rank_top.cgi?cat=7. Dort wird Ihre Seite in ein Verzeichnis eingetragen. Sie erhalten ein Mini-Banner, das Sie auf Ihrer Site einbinden und das die Besucherzahl anzeigt. Wollen Sie Ihre Besucher selbst zhlen, knnen Sie auch ohne PHP-Kenntnisse vorgefertigte und kostenlose PHP-Scripts einsetzen. Der 2 Kasten unten fhrt Anlaufstellen auf, wo Sie aus Hunderten von kos-
anzahl eine Fehlermeldung in der Form Warning: fopen ... Permission denied, haben Ihre Scripts nicht die ntigen Schreibrechte. Dann mssen Sie die Attribute des Homepage-Ordners im Web mit Ihrem FTPProgramm auf 755 ndern. Das erlaubt Ihrem Script, die Counter-Dateien zu verndern. Wie dies funktioniert, erfahren Sie exemplarisch im 2 Kasten Datei-Attribute mit dem FTP-Programm ndern. Sollte Ihnen das lapidare Du der Anzeige nicht gefallen, oder Sie wollen generell einen anderen Text anzeigen, ffnen Sie die Datei acounter.php im Editor. In der vorletzten Zeile steht der Befehl
ein. Erstellen Sie dann im selben Verzeichnis noch zwei leere Textdateien mit den Namen Stat.dat und IPs.dat (ohne Anfhrungszeichen). Achten Sie dabei genau auf die Schreibweise bei den Dateinamen, da die meisten Webserver zwischen Gro- und Kleinschreibung unterscheiden. bertragen Sie dann alle genderten Dateien mit Ihrem FTP-Programm auf den Webserver. Wenn Sie nun Ihre OnlineHomepage ffnen, erhalten Sie an der entsprechenden Stelle die Anzeige Du bist Besucher Nr. 1. Erscheint statt der Besucher-
echo "<html><body> ...

ndern Sie die gesamte Zeile um in
echo $CurrentCount;
Nun wird nur noch die Anzahl der Besucher ausgegeben, und Sie knnen in Ihrer Homepage-Datei beliebigen Text vor der Ausgabe anzeigen lassen und diesen auch nach Ihren Vorstellungen formatieren.
4. Gstebuch anlegen: Erste Form der Interaktion

Die erste Form der Interaktion mit Ihren Besuchern ist ein Gstebuch. Neben zahlreichen Lsungen, die eine Datenbank voraussetzen, gibt es auch kostenlose Scripts, die alle Gstebuch-Eintrge in einer Textdatei verwalten. Ein besonders flexibles und leicht zu installierendes Beispiel ist A-N Gstebuch 1.1 (unter www.code-box.de und auf C Heft-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 in Ihrem Editor. Hier nehmen Sie alle Ihre in-
Hier finden Sie kostenlose Scripts

Webmastermind: ber 1000 kostenlose Scripts gibt es unter www.php-free.de. Sie sind in Rubriken wie Counter, Email oder Suche eingeteilt. In den Rubriken werden die Scripts kurz beschrieben, jedoch ohne Angabe, ob das jeweilige Script deutschsprachig ist. Am oberen Rand der bersicht finden Sie die Top-5-Scripts der jeweiligen Kategorie. Developer Channel: Auf dem etwas langsamen Developer Channel (www.developerchan nel.de) finden Sie nicht nur PHP-Scripts, sondern auch solche zu ASP und Perl sowie Java-Applets und Javascripts, die auf dem Browser des Besuchers laufen. Die knapp 300 PHP-Scripts sind 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 ausfhrlichen Beschreibung bei jedem Script die Sprache in Form einer kleinen deutschen oder britischen Flagge anzeigt.
45
pGrundlagen
P Workshops
P Utilities
stallierte, weil kostenlose Datenbank heit mySQL. Ob diese bei Ihrem Webserver installiert ist, knnen Sie ermitteln, indem Sie das Test-Script aus 2 Punkt 2 auf Ihrem Server ausfhren lassen. Wenn neben Abschnitten wie PHP Core, Zend Optimizer und ftp auch mysql auftaucht, ist die Datenbank mySQL installiert. Von Ihrem ISP bentigen Sie nun noch drei Angaben: Wie lautet der Name der Datenbank selbst, wie der Benutzername und wie sein Passwort? Eventuell gibt Ihr Provider Ihnen die Mglichkeit, via Browser eigene Datenbanken anzulegen. Dann knnen Sie die drei Angaben selbst bestimmen. Egal, welche Art von Datenbankanwendungen Sie auf Ihrer Homepage einrichten wollen, diese Daten brauchen Sie immer.
Eins zwei drei: ber ein Mini-Banner, das Sie auf Ihre Website integrieren, werden bei Onlinehost Topsite Ihre Besucher gezhlt. Sie knnen aber auch einen eigenen Script-Counter direkt in Ihre Site einfgen (Punkt 3)
dividuellen nderungen vor. Als erstes passen Sie das Passwort an, mit dem Sie als Administrator die Gstebuch-Eintrge bearbeiten und gegebenenfalls lschen knnen. ndern Sie dazu die Zeile
$password = "password";
in
$password = "hubabuba";
wobei hubabuba fr Ihr persnliches Passwort steht. Weiter unten findet sich ein Eintrag, in dem Sie statt your@email.de Ihre eigene Mailadresse eintragen. Bei jedem neuen Eintrag veranlasst das Script, dass der Webserver an diese Adresse eine Benachrichtigung verschickt. Noch weiter unten finden Sie zahlreiche Anpassungsvarianten und die Mglichkeit, gewisse Wrter zu sperren. Ebenso knnen Sie Emoticons, wie :-) oder 8-) durch grafische Smileys ersetzen lassen. Haben Sie alle nderungen durchgefhrt, laden Sie den Ordner gb komplett auf Ihre Homepage hoch. Auf das Gstebuch knnen Sie dann mit dem Link www. <meinname.de>/gb/gb.php zugreifen <meinname.de> ist der Platzhalter fr Ihren Domain-Namen (2 Abbildung rechts). Mit einem Klick auf Eintragen gelangen Sie zur Eingabemaske, in der Sie den Text eintragen sowie fakultativ die Homepage, Mailadresse und ICQ-Nummer und ber die Schaltflche absenden. Ihr Eintrag
wird verschlsselt in der Datei entries.txt abgelegt. Wenn Sie nach dem Absenden des Gstebuch-Eintrags eine Fehlermeldung erhalten, haben Ihre Scripts nicht die ntigen Schreibrechte. Dann mssen Sie entweder die Attribute des Ordners gb im Web mit Ihrem FTP-Programm auf 755 oder das Attribut der Datei entries.txt auf 666 ndern. Das erlaubt Ihrem Script, Gstebuch-Eintrge in die Textdatei zu schreiben. Wie dies funktioniert, erfahren Sie exemplarisch im 2 Kasten Datei-Attribute mit dem FTP-Programm ndern. Wollen Sie einzelne Gstebuch-Eintrge kommentieren oder ganz herausnehmen, ffnen Sie www.<meinname.de>/gb/gbadmin.php (<meinname.de> steht fr Ihren DomainNamen). Nach Eingabe des Passworts, das Sie weiter oben gendert haben, sehen Sie alle Eintrge und knnen sie kommentieren, ndern oder lschen.
Datenbankstruktur Wenn Sie noch gar keine Vorstellung haben, wie eine Datenbank strukturiert ist, kann ein vergleichendes Bild beim Verstndnis helfen. Stellen Sie sich eine ExcelArbeitsmappe vor. Diese ist vergleichbar mit einer Datenbank. Beide knnen zahlreiche Tabellen enthalten. Jede Tabelle hat einen eindeutigen Namen und besteht aus einer oder mehreren Spalten. In jeder Spalte befinden sich immer gleiche Informationen, also etwa in Spalte A die Nachnamen, in Spalte B die Vornamen und so fort. Die Spaltenberschriften nennt man in der Sprache der Datenbanken Feldnamen. Die einzelnen Zeilen, in denen sich die Daten selbst also etwa die Adressen befinden, heien Datenstze. Das komfortabelste und noch dazu kostenlose Werkzeug zur Verwaltung von mySQL-Datenbanken
5. Datenbanken auf dem Webserver

Kleinere Datenbankanwendungen wie ein Gstebuch lassen sich noch mit einfachen Textdateien bewerkstelligen. Wenn aber viele Eintrge auf unterschiedliche Weise sortiert, selektiert und angezeigt werden sollen, kommen Sie um den Einsatz einer Datenbank nicht herum. Die auf Web- Gstebuch im Nu: Mit Hilfe so genannter Templates passen Sie das A-N servern am hufigsten in- Gstebuch 1.1 an nahezu jedes beliebige Layout an (Punkt 4)
46
pGrundlagen
P Workshops
P Utilities
heit phpMyAdmin. Sie finden es auf C Heft-CD oder laden es unter http://phpmy admin.sourceforge.net herunter.
6. Kr fr Ihre Website: Ein Forum

Die Kr fr Ihre Website stellt zweifelsohne ein eigenes Forum dar. Diese in einzelne Kategorien eingeteilten schwarzen Bretter dienen der raschen Kommunikation zwischen Menschen, die sich fr dieselben Themen interessieren. Eines der professionellsten Tools zur Forum-Erstellung ist das Open-Source-Projekt php BB, das in vielen Hundert Websites eingesetzt wird. Die Installation ist selbst ohne HTMLoder PHP-Kenntnisse kinderleicht. Laden Sie das Tool unter www.phpbb.de/mods/php BB2-2.0.6-deutsch.zip herunter, und entpacken Sie das Archiv in den Homepage-Projektordner auf Ihrem PC. Danach sollte dort ein Ordner namens phpBB2 existieren. Laden Sie diesen Ordner mit Ihrem FTP-Client ins Internet auf Ihre Homepage. Zur Installation ffnen Sie dann in Ihrem Browser die URL www.<meinname.de>/ phpBB2/install/install.php (wobei Sie <meinname.de> wieder durch Ihren Domain-Namen ersetzen). Belassen Sie es bei der Sprache Deutsch (German), und whlen Sie dann den Datenbanktyp (2 Abbildung rechts oben). Welche Version von mySQL Ihr Server untersttzt, erfahren Sie in der PHP-Info-Abfrage (2 Punkt 2) im Abschnitt
Forum erstellen: Eines der professionellsten Tools zur Erstellung eines Forums ist php BB. Die Installation lsst sich selbst ohne HTML- oder PHP-Kenntnisse einfach bewerkstelligen (Punkt 6)
mysql rechts neben Client API version. Sind Sie sich nicht sicher, zum Beispiel, weil Sie es einfach noch nicht gemacht haben, belassen Sie den Eintrag bei mySQL 3.x. Tragen Sie dann in der Datenbankkonfiguration den Datenbank- sowie den Benutzernamen und das Passwort ein. Wichtig ist auch, dass Sie einen Admini-
stratornamen und dessen Passwort festlegen. Damit knnen Sie sich spter einloggen und erhalten dann Zugriff auf den Administrations-Bereich. Forum anpassen Belassen Sie alle bereits ausgefllten Eingabefelder bei den Vorgaben. Schlieen Sie dann mit einem Klick auf die entsprechende Schaltflche die Installation ab. Nun knnen Sie in Ihrem FTP-Programm die beiden Unterverzeichnisse install und contrib lschen und sich erstmalig als Administrator anmelden. ffnen Sie dazu www.<meinname.de>/php BB2 (<meinname.de> steht wie blich fr Ihren Domain-Namen), und melden Sie sich mit dem eben gewhlten Administratornamen und dem zugehrigen Passwort an. Immer wenn Sie sich als Administrator angemeldet haben, erscheint am unteren Rand der Startseite der Link Administrations-Bereich. Klicken Sie darauf, und Sie haben die Administrator-Konsole vor sich, in der Sie neue Foren anlegen, Benutzerrechte einschrnken oder erweitern und die Gestaltung des gesamten Forums vornehmen. Unter www.phpbb.de finden Sie neben einer umfangreichen Dokumentation ein Forum fr Einsteiger und Fortgeschrittene, in dem Sie erfahren, wie Sie das Forum weiter einrichten und erweitern.
Datei-Attribute mit dem FTP-Programm ndern

Auf einem Webserver soll nicht jeder Besucher die Mglichkeit haben, Daten zu ndern. Daher sind die Dateien standardmig mit einem Schreibschutz versehen. Mit einem FTP-Programm geben Sie ganze Ordner oder einzelne Dateien zum Schreiben frei. Starten Sie zum Beispiel den FTP-Client Filezilla (ausfhrliche Infos dazu 2 ab den Seiten 96 und 126), und loggen Sie sich auf Ihrem Webserver ein. Navigieren Sie dann im rechten Fenster zu der Datei oder zu dem Ordner, fr die Sie Schreibrechte erteilen wollen. Klicken Sie mit der rechten Maustaste darauf, und whlen Sie im Kontextmen den Punkt Dateiattribute (2 Abbildung). In der Dialogbox vergeben oder entfernen Sie nun die Schreibrechte, Attribute ndern: In der Dialogbox knnen Sie Schreibrechte vergeben oder entfernen indem Sie die Kontrollkstchen an- oder abwhlen. Versuchen Sie immer erst, lediglich minimale Rechte zu vergeben, also beispielsweise das Schreibrecht nur fr den Besitzer. Sollte das Script dann nicht laufen, aktivieren Sie nach und nach die brigen Berechtigungen, bis es luft. Der Grundsatz lautet: so wenig Rechte wie mglich vergeben.
47
so mit, wann er seine erste Liebe getroffen hat, wie den Zeitpunkt des ersten Kusses, den Tag der Vermhlung, die Geburt des ersten Kindes, aber auch die erste Ehekrise und deren Bewltigung. Bei anderen Weblogs handelt es sich zum Beispiel um Reiseberichte wie jener eines Schlers, der sich im Rahmen eines Austauschs in Sdafrika befindet und seine Familie und Freunde tglich ber seine Erlebnisse auf dem Laufenden hlt. Meinungsforum Daneben finden sich Weblogs, die kommentierte Links enthalten. Beispiel: das Thema Kochen. Samt Fotos von appetitlich angerichteten Speisen stellen sie manchmal eine wahre Fundgrube fr Hobbykche und Genieer dar. Zunehmend betreiben auch Firmen und Organisationen Weblogs, die in Form von Meinungsforen der internen Kommunikation dienen. Auerdem eignen sich Weblogs zur Dokumentation von Projekten und knnen eine kostengnstige Alternative zu kommerziellen Knowledge-Management-Systemen oder Content-Management-Systemen (CMS) darstellen. Gleichgltig, ob es sich um ein InternetTagebuch, um eine kommentierte LinkSammlung zu Spezialthemen oder um Kommentare auf einer Community-Plattform handelt: Selten sind die Eintrge trocken und strikt auf maximalen Informationsgehalt ausgerichtet. Vielmehr enthalten sie oft witzige, ironische oder sarkastische Anmerkungen, die chronologisch fortlaufend auf einer einzigen Website aufgelistet werden. Dabei mssen die Beitrge nicht von einem einzigen Autor stammen:
Weblogs: So gehts
Weblogs sind Online-Tagebcher mit kommentierten Links zu anderen Sites. Doch es gibt noch mehr Einsatzmglichkeiten. Welche das sind und wie Sie selber bloggen, erfahren Sie hier.
Von Achim Beiermann
Vor etwa zehn Jahren begann der damals 19-jhrige Amerikaner Justin Hall damit, seinen kompletten Alltag im Internet zu protokollieren. Dabei ging er mit seinen tglichen Online-Schilderungen so weit, dass ihm angeblich so manche Freundin den Laufpass gab. Weil es damals noch keine speziellen Programme gab, die die Fhrung eines Tagebuches im Internet vereinfachten, musste Justin sein Web-Tagebuch noch per Hand codieren.
geladen, vielmehr verfasst und publiziert der Autor sie unmittelbar im Web. Inhaltlich decken Weblogs eine beachtliche Bandbreite ab. So gibt es Weblogs, die sich wie eine Familienchronik lesen. Der Verfasser teilt in diesem Fall der Welt eben-
1. Ein Weblog bietet sich fr viele Inhalte an

Seit etwa zwei bis drei Jahren gibt es entsprechende Programme auf dem Markt, mit denen sich persnliche Schilderungen dieser Art, im Fachjargon Weblogs genannt, mit wenigen Handgriffen ohne groen Aufwand erstellen und professionell aufmachen lassen. Der wichtigste Unterschied zu den klassischen Websites: Die Beitrge werden nicht erst offline erstellt und anschlieend auf einen Server hoch-
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 Ursprngen des Bloggens
48
pGrundlagen
P Workshops
P Utilities
Weblogs
Grundlagen PpP S. 48 S. 51
fang oft auf das Wesentlichste beschrnkt, so dass auch unbedarfte Anwender ihre Beitrge problemlos und schnell ins Netz stellen knnen. Die fr die Erstellung von Weblogs erforderliche Software wird von vielen Firmen kostenlos zum Download angeboten und ist in der Regel rasch installiert. Solche Tools sind etwa GreyBloghaus: Eine Community fr deutschsprachige Blogger, in der neue Web- matter, Sunlog, Livejournal logs vorgestellt und aktuelle Themen aus der Szene diskutiert werden oder Movable Type (2 Kasten Ausgewhlte WeblogDie Seite kann auch Beitrge mehrerer AuSoftware). Daneben finden sich web-batoren mit unterschiedlichen Themen entsierte Werkzeuge, die Sie unmittelbar auf halten, die aufeinander Bezug nehmen, so dem Server des Anbieters kostenlos nutzen dass eine Art von ffentlichem Gesprchsknnen. Dazu melden Sie sich bei einem protokoll entsteht. Blockspace-Anbieter wie 20six (www.20six. de) an, legen in wenigen Schritten ein paar 2. Diese Software Einstellungen fest, und schon knnen Sie brauchen Sie Ihren Beitrag schreiben und in der Die Inhalte eines Weblogs werden meist Netzwelt verffentlichen. mit Hilfe entsprechender Systeme erstellt Haben Sie jetzt Lust auf Ihr eigenes Webund verwaltet, die im weitesten Sinne mit log bekommen? Wir zeigen Ihnen im FolContent-Management-Systemen vergleichgenden, wie Sie in wenigen Minuten zum bar sind. Allerdings ist der FunktionsumWeblogger werden.
Inhalt 1. Ein Weblog bietet sich fr viele Inhalte an 2. Diese Software brauchen Sie 3. So legen Sie Ihr eigenes Weblog an 4. So machen Sie Ihr Weblog bekannt Ksten Ausgewhlte Weblog-Beispiele Ausgewhlte Blogspace-Anbieter Ausgewhlte Weblog-Software
Seite
48 49 49 51
49 51 51
3. So legen Sie Ihr eigenes Weblog an

Der kostenlose Dienst Blogger.com, den der Suchmaschinenanbieter Google zu Beginn des Jahres 2003 bernommen hat, war sicher einer der Auslser fr den vor etwa drei Jahren aufgekommenen WeblogBoom. Blogger ist ein einfaches, englischsprachiges, web-basiertes Werkzeug, mit dem Sie eigene Weblogs ohne Programmierkenntnisse auf dem Blogspot-Server oder ber ASP-Funktionen auf Ihrem eigenen Webspace-Server einrichten. Account einrichten: Auf der Homepage des Bloggers (www.blogger.com) drcken Sie den Button Start Now, um im darauf folgenden Fenster einen Account einzurichten. Dort vergeben Sie einen beliebigen Account-Namen und tragen Ihren Vor- und Nachnamen, Ihre Mailadresse sowie ein Passwort ein. Nachdem Sie die Nutzungsbedingungen gelesen und mit einem Hkchen in der Checkbox I Accept akzeptiert haben, klicken Sie auf Sign up. Weblog benennen: Im ersten von vier weiteren Schritten benennen Sie Ihr Weblog und beschreiben es kurz im Eingabefeld Description. Belassen Sie es bei der Frage Public Blog? bei der Standardeinstellung Yes, wird Ihr Weblog in einem ffentlichen Blogger-Verzeichnis gefhrt. Der Button Next fhrt Sie zum nchsten Schritt. Server auswhlen: Nun haben Sie die Wahl: Entweder legen Sie Ihr Weblog auf einem so genannten Blogspot ab, oder Sie laden es per FTP auf Ihren eigenen Webspace-Server. Letzteres funktioniert allerdings nicht bei Zugangs-Providern wie T-Online oder AOL, da deren Standardeinstellungen keine neuen Eintrge von Bloggern in ihrem Bereich zulassen. Bietet Ihr Provider keine Mglichkeit fr einen Weblog, bleibt Ihnen nichts anderes brig, als die Option Host
Ausgewhlte Weblog-Beispiele
http://archive.ncsa.uiuc.edu/SDG/Softwa re/Mosaic/Docs/old-whats-new/whats-new0693.html Das erste Weblog wurde unter diesem Link fr die Nachwelt archiviert. http://dmoz.org/World/Deutsch/Computer/ Internet/WWW/Weblogs/ Auf dieser Seite sind deutschsprachige Weblogs aufgelistet. www.bloghaus.net Das Bloghaus ist eine Community fr deutschsprachige Blogger, in der neue Weblogs vorgestellt und aktuelle Blocktree.com: Hier tragen Blogger ihr Weblog ein und erklren, welche Weblogs sie beeinflussten Themen aus der Szene diskutiert werden. www.blogtree.com Hier tragen Blogger ihr Weblog ein und erklren, welche anderen Weblogs sie veranlasst haben, selbst eines zu erstellen. So entsteht mit der Zeit ein berdimensionaler Stammbaum, aus dem ersichtlich ist, wie sich die Weblogs gegenseitig beeinflusst haben. www.dienstraum.com Dienstraum ist ein Weblog ber Medien. Es befasst sich insbesondere mit Telekommunikation, Internet, Medien, Entertainment und Software, daher kurz: TIMES. www.moving-target.de Die Autorin und Web-Designerin Carola Heine zhlt mit ihrem Moving Target, das sie seit 1996 betreibt, bereits zu den ltesten deutschsprachigen Bloggern. www.schockwellenreiter.de Eines der bekanntesten deutschen Weblogs ist der Schockwellenreiter, der nach eigener Aussage fr die tgliche Ration Wahnsinn steht. www.technorati.com Hier finden Sie die Top 100 der meistgelinkten Weblogs. www.weblogs.com Der Weblog-Monitor prsentiert tglich neu eingerichtete Weblogs. www.weblogverzeichnis.de Das Verzeichnis gibt einen berblick ber Weblogs, die von deutschsprachigen Autoren betreut werden.
49
P Grundlagen
pWorkshops
P Utilities
Weblogs
Workshops PPp S. 48 S. 51
Design-Vorlage auswhlen: Hier steht Ihnen eine Reihe fertiger Weblog-Designs zur Verfgung, die Sie sich im Einzelnen ber den Link Example nher anschauen knnen, bevor Sie ein Design auswhlen und den Button Finish drcken. Die Design-Vorlagen basieren brigens auf HTML-Templates, die sich jederzeit individuell anpassen oder komplett austauschen lassen. Up to date: Damit Sie Ihr Weblog auch unterwegs aktualisieren knnen, Bloggen Sie los! Den Text ermglichen manche Anbieter, etwa 20six, das Bloggen per SMS/MMS schreiben Sie ins groe Eingabefeld des folgenden Fensit at BlogSpot zu whlen. Bei einem Proviters. Zur Formatierung stehen Ihnen als der-Wechsel knnen Sie jederzeit mit allen Buttons die HTML-Tags Bold und Italic zur Archiven auf Ihre neue Website ziehen. Verfgung. Eine Rechtschreibprfung gibt Entscheiden Sie sich fr FTP-Publishing es jedoch nur fr englischsprachige Texte. auf eigenem Server, tragen Sie in die entSobald Sie die Eingabe abgeschlossen sprechenden Formularfelder den FTP-Serhaben, drcken Sie die Schaltflche Post ver, den internen Pfad sowie den Dateina& Publish. Ihr Beitrag wird nun gespeimen ein, den die Startseite des Weblogs hachert und gleichzeitig im Web verffentben wird. Das Unterverzeichnis fr Ihr licht. Das fertige Ergebnis knnen Sie sich Weblog mssen Sie aber zuvor angelegt haunter der von Ihnen vervollstndigten URLben! Zum Schluss geben Sie als URL die Adresse ansehen. knftige Web-Adresse des Bloggers an, be4. So machen Sie vor Sie den Button Next drcken und diIhr Weblog bekannt rekt zu den Design-Vorlagen gelangen. Wie beschrieben, ist es eine einfache Sache, Internet-Adresse festlegen: Die Blogspot-Anein Weblog zu starten. Aber viele Autoren wender vervollstndigen beim vorletzten mssen bereits nach kurzer Zeit feststellen, Schritt die URL-Adresse, unter der ihr Webdass es nicht der erhoffte Publikumslog zu finden ist, und erklren sich mit den magnet ist. Im Gegenteil: Oft herrscht ghNutzungsbedingungen fr den Blogspotnende Leere, niemand liest die Beitrge, so Service einverstanden. Danach geht es mancher Blogger verliert deshalb rasch die auch fr diesen Nutzerkreis ber Next Lust, seinen Weblog dauerhaft fortzuweiter zum letzten Schritt.
Ausgewhlte Blogspace-Anbieter
Weblog-Communities bieten Fertiglsungen an: Sowohl Software als auch Webspace sind vorhanden. Sie brauchen nichts weiter zu tun, als sich in einer Community zu registrieren und anzufangen. Bei den folgenden Blockspace-Anbietern erstellen Sie ohne Programmierkenntnisse kostenlos Ihr eigenes Weblog: http://new.blogger.com www.20six.de www.antville.org www.blogger.de www.bloggingnetwork.com www.diaryland.com www.yourblog.de
Ausgewhlte Weblog-Software
Wenn Sie auf Ihren eigenen Seiten ein Weblog erstellen wollen, bentigen Sie eine spezielle Weblog-Software. In diesem Fall sollten Sie sich vorab informieren, welche Datenbankformen und welche Optionen der eingesetzte Hostserver untersttzt. So sind beispielsweise oft PHP und eine MySQL-Datenbank erforderlich, damit die Software sich verwenden lsst.
Software Greymatter 1.3 Livejournal Movable Type 2.64 P-Machine Free 2.21 Download http://noahgrey.com/greysoft/ www.livejournal.com www.movabletype.org www.pmachine.com www.projectsteveguttenberg.org www.sunlog.org
C C
Project Steve Guttenberg (PSG) 1.8.1 Sunlog 2.3
C auf Heft-CD
schreiben. Zurck bleiben dann Ruinen, deren letzte Eintrge ziemlich lange her sind. Um das mglichst zu verhindern, sollten Sie Ihr Weblog wie jede andere Site auch bei Suchdiensten anmelden. Dies ist vor allen Dingen dann sinnvoll, wenn Sie sich in Ihrem Weblog mit einem speziellen Thema von allgemeinem Interesse befassen. Auch der Eintrag in so genannten Weblog-Listen wie etwa Weblogcheckup (www. weblogcheckup.de) kann die Besucherzahl nachhaltig erhhen. Eigene Favoriten anzeigen: Es gibt eine Vielzahl von Websites, die dadurch von allgemeinem Interesse sind, dass sie umfangreiche, qualifizierte Link-Listen anbieten. Auch Sie knnen Ihr Weblog zum Einstiegstor in die Blogger-Welt machen, indem Sie ber andere Weblogs informieren. So mancher Blogger, von der einen expliziten Erwhnung geschmeichelt, revanchiert sich gerne, indem er seinerseits in einem Eintrag auf Ihr Weblog verweist. Links hinterlassen: Eine weitere Mglichkeit, Ihr eigenes Weblog bekannter zu machen, ist diese hier: Verfassen Sie in anderen Weblogs Beitrge, in denen ein Link zu Ihrem eigenen Weblog auftaucht. Dabei sollten Sie sich allerdings ein wenig Zurckhaltung auferlegen, weil Weblog-Experten diesen Trick rasch durchschauen und davon genervt sein knnten. Verzichten Sie deshalb darauf, den Link unmittelbar in Ihrem Beitrag zu erwhnen. Eleganter und effektiver ist es, den Link in Ihre persnlichen Angaben zu integrieren.
51
bung sind Pop-up-Fenster. Hierbei handelt es sich um kleine Fenster, die parallel zur eigentlich vom Besucher gewnschten Web-Seite aufgehen. Zuweilen werden sie hinter die Site gelegt, damit sie erst dann sichtbar werden, wenn der Benutzer die Web-Seite schliet. Pop-up-Fenster werden in die Web-Seite als Javascripts eingefgt. Untersttzt der Browser des Besuchers Javascript nicht oder ist die Untersttzung ausgeschaltet, erscheinen auch die Pop-ups nicht. Werbeblocker Viele Anwender haben mittlerweile Tools installiert, mit denen sich Werbung blockieren lsst. Dazu gehrt etwa die GoogleToolbar (www.google.de/toolbar), die Pop-upFenster unterdrckt. Der Webwasher (www. webwasher.de) geht noch einen Schritt weiter und kann sogar Banner in den Standardgren ausblenden (2 Abbildung unten). Sie knnen diesen Werbeblocker allerdings berlisten. Verwenden Sie Banner, die nicht den Standards entsprechen und die der Webwasher aus diesem Grund als Bilder der Web-Seite ansieht. Haben Sie eine grere Community zum Beispiel im Rahmen eines Forums aufgebaut, knnen Sie auch die so gesammelten Mailadressen zu Geld machen, etwa mit Hilfe von Newslettern. Dies setzt allerdings voraus, dass sich die Besucher dazu bereit erklrt haben, von Ihnen solche Newsletter zu erhalten. Allen Werbeformen ist gemeinsam, dass ein Klick auf das Banner oder Pop-up-Fenster oder auf einen Werbe-Link zum Werbetreibenden fhrt, wo registriert wird, dass der Besucher von Ihrer Site kommt.
Geld fr Ihre Website

Ihre Homepage muss Sie nicht nur Geld kosten Sie knnen auch welches damit verdienen! Lesen Sie, wie Sie ohne groen Aufwand fr stetige Einnahmen sorgen.
Von Ingo Bhme
Lassen Sie Ihre Homepage fr Ihr Portemonnaie arbeiten. ber so genannte Partnerprogramme seriser Firmen und Vermittler sowie gesponserte Verkufe flieen Monat fr Monat Provisionen auf Ihr Konto. Reich werden knnen Sie so in aller Regel nicht. Aber als kleiner Zuverdienst, der zumindest Ihre Homepage-Kosten deckt, langt es meist allemal. Als Homepage-Besitzer haben Sie die Wahl zwischen vielen Anbietern, sofern Ihre Homepage nicht gegen gngiges Recht verstt oder unerwnschte Inhalte aufweist und sofern Sie fr einen Anbieter als Geschftspartner interessant sind.
1. So knnen Sie werben

Als Website-Anbieter steht Ihnen eine Vielzahl an Werbeformen zur Verfgung. Zum einen gibt es die bekannten Banner in mehreren genormten Gren. Die gebruch-
lichsten sind das so genannte Full-Size-Banner, eine Grafik, die 468 x 60 Pixel gro ist, sowie das Half-Size-Format mit 234 x 60 Pixeln. Wenn Sie ein solches Banner platzieren mchten, sollten Sie bei der Gestaltung Ihrer Website an markanten Stellen entsprechend Platz lassen. Auerdem knnen Sie mit Text-Links auf das Angebot des Werbetreibenden verweisen, dessen Partner Sie sind. Vorteil: Die TextLinks lassen sich in den normalen Flietext Ihrer Site einbauen, die Werbung tritt nicht mehr so offensichtlich als solche in Erscheinung. Eine fr Website-Besitzer (Nicht) werbefrei: Tools wie Webwasher unterdrcken Werbeeinblendungen sehr gute Form der Wer- anhand der Banner. Es gibt aber Tricks, die Tools zu berlisten (Punkt 1)
52
pGrundlagen
P Workshops
P Utilities
Homepage-Einnahmen
1 bis 20 Cent die Norm. Wer aber glaubt, er bruchte sich nur noch hinzusetzen und den ganzen Tag auf das Banner zu klicken, um so steinreich zu werden, wird enttuscht. Denn anhand von Cookies und der IPAdresse merkt das berwachungssystem, dass der Klick von ein und demselben Besucher kommt, und zhlt ihn nur einmal. Umsatzbeteiligung Einen Schritt weiter gehen Finden: Bei Partnerprogramm.de kann man neben Suchbegriffen auch Ver- manche Online-Shops. Hier gtungsart, Bannergre und Mindestverdienst angeben (Punkte 3 und 5) werden Sie in der Regel mit einem Prozentsatz am Umsatz des Besuchers beteiligt, der von Ihrer 2. So wird Ihre Werbung vergtet Website zum Shop gelangt ist. Achten Sie Bei der Vergtung gibt es die unterschieddarauf, ob Sie auch bei Folgekufen partilichsten Varianten. Das reine Anzeigen der zipieren oder wenn der Besucher nicht Werbung auf Ihrer Website bringt in der gleich beim ersten Mal seinen EinkaufswaRegel kein Geld, es sei denn, Sie haben ein gen zur virtuellen Kasse schiebt. Diese KonWerbebanner direkt verkauft. ditionen sind in der Regel im Rahmen der Wenn Sie beispielsweise eine Seite ber Partnerprogramme genau festgelegt. Weine betreiben, hat der Entwickler einer Whrend Sie bei den Klicks anhand der Weindatenbank mglicherweise Interesse Webserver-Protokolle noch selbst berprdaran, dauerhaft bei Ihnen angezeigt zu fen knnen, ob der Ihnen gutgeschriebene werden. Bei solchen Konstellationen liegen Betrag auch wirklich stimmt, sind Sie bei die Preise je nach Besucherzahl zwischen der Umsatzbeteiligung auf die Aussagen 10 Euro und im absoluten Extremfall des Shops angewiesen. Zu etwas mehr Vermehreren 1000 Euro pro Monat. trauen verhelfen Ihnen die Vermittler, die so genannten Partnerprogramm-NetzwerPay-per-Click ke, denn sie haben Mglichkeiten, die VerBei Partnerprogrammen erhalten Sie dagekufe im Shopsystem des Werbetreibenden gen nur eine erfolgsabhngige Vergtung. zu berwachen. Das heit, der Werbetreibende zahlt nur Tipp: Wenn Sie als Website-Anbieter dann, wenn er auch tatschlich etwas daselbst etwas ber das bei Ihnen geschaltete von hat, wenn der Besucher nmlich auf Banner einkaufen, partizipieren Sie ebendas Banner klickt. Bei diesem so genannten falls am Umsatz. Sie kaufen also gewisserPay-per-Click (PPC) sind Vergtungen von maen mit Prozenten ein.
Inhalt 1. So knnen Sie werben 2. So wird Ihre Werbung vergtet 3. Direkte Partnerprogramme 4. Bcher & Co. verkaufen mit Amazon 5. Partnerprogramm-Netzwerke Ksten Tipps fr bessere Ergebnisse Partnerprogramm-Netzwerke Klick-Verhalten kontrollieren
Seite
52 53 53 53 57
53 54 57
Lead hnlich wie beim Shop wird auch beim so genannten Lead (englisch fr Vermittlung) nur im Erfolgsfall gezahlt, zum Beispiel, wenn ein Besucher einen Newsletter abonniert. Da fallen dann schon mal 25 Cent bis hin zu mehreren Euros ab. Aber lassen Sie sich nicht von zu hohen Fallpauschalen blenden: lieber eine interessante Teilhabe an einem lukrativen Gewinnspiel, mit dem Sie 100 Leads pro Tag fr 25 Cent generieren, als 20 Euro fr die Vermittlung eines Angebots, das keinen interessiert. Das setzt natrlich eine gewisse Besucheranzahl auf Ihrer Website voraus.
3. Direkte Partnerprogramme
Viele groe Firmen bieten selbst Partnerprogramme an. So knnen Sie beispielsweise beim Internet-Serviceprovider 1&1 an dessen Programm Kunde wirbt Kunde teilnehmen (http://hosting.1und1.com, 2 groe Abbildung auf Seite 52). Voraussetzung ist, dass Sie mindestens ein WebAngebot von 1&1 nutzen. ber allgemeine Suchmaschinen wie Google sind solche Partnerprogramme schwer zu finden. Aber es gibt Spezialsuchmaschinen, etwa www.partnerprogramm.de. Wenn Sie dort nach einem Begriff suchen beispielsweise nach Foto, falls sich Ihre Website um die Fotografie dreht , erhalten Sie etliche Eintrge von Unternehmen, die Partnerprogramme anbieten. Auerdem finden Sie in den Link-Listen der Site weitere Suchmaschinen und bersichten zu Partnerprogrammen.
Tipps fr bessere Ergebnisse

Banner und Pop-up-Fenster alleine werden Sie sicher nicht reich machen. Sehr viel mehr Besucher werden auf Ihre Partner-Links klicken, wenn Sie folgende Tipps bercksichtigen: 1. Integrieren Sie die beworbenen Produkte und Dienstleistungen im redaktionellen Teil Ihrer Website. Eine persnliche Meinung ist zehnmal mehr wert als das tollste Banner. 2. Suchen Sie bei Verbraucherportalen etwa www.ciao.de oder www.dooyoo.de nach Informationen ber die Produkte, und verweisen Sie auf entsprechende Testberichte. 3. Achten Sie auf die Inhalte der Werbung, die auf Ihrer Website prsentiert wird. Sie sollten thematisch zu Ihrem Auftritt passen. 4. Assoziieren Sie Themen, die Ihre Besucher ber den speziellen Inhalt der Homepage hinaus auch interessieren knnten. Bei einer Seite ber Fotografie ist davon auszugehen, dass die Besucher meist auch gerne reisen.
4. Bcher & Co. verkaufen mit Amazon

Das vielseitigste und fr so gut wie jede Website mgliche Partnerprogramm bietet der Internet-Buchhndler Amazon. Wer mit seiner Partner-ID den Verkauf eines Buches vermittelt, erhlt zwischen 5 und 15
53
Homepage-Einnahmen
pGrundlagen
P Workshops
P Utilities
schrift und Kontoverbindung an. Nach der letzten Anmeldeseite erhalten Sie Ihre eindeutige Partner-ID. Anhand dieser Kennung werden Verkufe Ihrem Partnerkonto zugerechnet. Partner-Links generieren Haben Sie sich unter http:// partnernet.amazon.de neu eingeloggt, gelangen Sie zur Partner-Net-Startseite. Hier knnen Sie fr jedes Produkt, das bei Amazon erAmazon-Link: Den richtigen Link samt Verweis auf Ihre Partner-ID und das hltlich ist, einen individukorrekte Buchcover erstellt Amazons Link-Generator automatisch (Punkt 4) ellen Link erzeugen lassen. Klicken Sie dazu im oberen Prozent des Buchpreises das ist mehr als Bereich der Web-Seite auf Link-Generator. die meisten Fachbuchautoren bekommen. Auf der nun erscheinenden Seite sehen Sie Weil es zu jedem Themenbereich Bcher jetzt so genannte dynamische Links. Das gibt, ist auch fr Ihre Website sicher etwas sind Verknpfungen zu Bestsellern, die tgdabei. Und da es bei Amazon nicht nur lich oder wchentlich aktualisiert werden. Bcher, sondern auch Musik-CDs, VideofilHaben Sie einen solchen Link erstellt und me, DVDs und mittlerweile sogar Elektroauf Ihrer Homepage eingebunden, ndert nikartikel zu kaufen gibt, sind die Werbeer immer dann sein Aussehen, wenn Amamglichkeiten vielfltig. zon eine neue Bestsellerliste verffentlicht. Interessanter sind jedoch die statischen Als Partner anmelden Links. Klicken Sie oben rechts auf das oranUm sich bei Amazon als Partner zu regisgefarbene Kstchen Statische Links. Auf trieren, gehen Sie zunchst auf die Startseider Seite, auf die Sie nun gelangen, finden te www.amazon.de. Am linken Rand sehen Sie Sie im unteren Bereich den Abschnitt Einden Kasten Entdecken. Klicken Sie darin zeltitel-Link. Klicken Sie dort auf die auf den ersten Link Partnerprogramm. Schaltflche Link erstellen. Auf der nchsAuf dieser Seite registrieren Sie sich ber ten Seite mssen Sie in dem Textfeld die die Schaltflche Jetzt mitmachen! als neuAmazon-eigene Bestellnummer ASIN geer Partner. Folgen Sie den Anweisungen auf nannt eingeben. Bei Bchern entspricht den Folgeseiten, und geben Sie Ihre Andiese Nummer der ISBN, die auch auf den
Integriert: Als Empfehlung wirkt das beworbene Buch (links) nicht mehr wie Werbung (Punkt 4)
Buchrckseiten steht. In jedem Fall finden Sie die ASIN bei allen Artikel-Detailseiten innerhalb von Amazon.de. Tipp: Machen Sie ein zweites Fenster auf, um die einzelnen Bcher und Produkte innerhalb von Amazon.de zu recherchieren, fr die Sie dann die Links erstellen lassen. Partner-Links in Website einbauen Wenn Sie beispielsweise das Buch Digitalfotografie. Das groe Einsteigerbuch auf Ihrer Website vorstellen mchten, tragen Sie die ISBN 3899940105 ein (ohne Anfhrungszeichen). Achtung: Die Eingabe darf keine Leer- oder Sonderzeichen enthalten. Nachdem Sie auf Link erstellen geklickt haben, erhalten Sie den HTMLCode fr einen Text- und separat fr einen Bilder-Link (2 Abbildung oben links). Klicken Sie im Eingabekasten unter Bild-Link HTML dreimal schnell hintereinander mit der linken Maustaste, um den gesamten Inhalt zu markieren, und kopieren Sie mit <Strg>-<C> in die Zwischenablage. ffnen Sie den Quelltext der HTML-
Ausgewhlte Partnerprogramm-Netzwerke
Internet www.affili.net Charakteristik vielfltiges Angebot von ber 500 Werbetreibenden Auszahlung Anfangsguthaben Sonstiges ab 25 Euro ab 25 Euro 5 Euro gut strukturiert; einfach zu bedienende Oberflche; hervorragende Statistikfunktion gute Suchfunktion auch nach Werbeform; einfach zu bedienende Oberflche; passable Statistik; Qualittsindex der Werbetreibenden anhand Berechnungsformel keine Suchfunktion; hervorragende Werbemittel-Vorschau aller Anbieter; die besten Statistiken und Berichte aller PartnerprogrammNetzwerke funktioniert zustzlich zur Internet-Prsenz auch per SMS, Fax, Telefon und Mail Programmsuche nur nach Rubriken und Stichwrtern; sehr ausgefeilte und flexible Statistik
www.partnerprogramm.de sehr bersichtlicher Anbieter mit vielfltigem Portfolio von ber 650 Werbeprogrammen www.tradedoubler.com Partnernetzwerk mit rund 100 Werbekunden
ab 25 Euro
www.vitrado.de www.zanox.de
kleines deutsches Partnerprogramm mit wenigen Partnern und konkreten Produkten Partnernetzwerk mit rund 300 nationalen und internationalen Werbekunden
ab 25 Euro ab 25 Euro
2,50 Euro
54
pGrundlagen
P Workshops
P Utilities
Homepage-Einnahmen
Seite, auf der das Bild erscheinen soll. Fgen Sie an der passenden Stelle den Inhalt der Zwischenablage mit <Strg>-<V> ein. Amazon geht davon aus, dass Sie das Cover-Bild im selben Verzeichnis wie die HTML-Datei speichern. Dazu klicken Sie mit der rechten Maustaste auf das kleine Cover-Bild und speichern es im HTML-Verzeichnis ab. Alternativ knnen Sie den generierten Link so erweitern, dass sich die HTML-Seite das Bild direkt vom Amazon-Server holt. Suchen Sie im Link den HTML-Code
So kontrollieren Sie das Klick-Verhalten

Um zu entscheiden, ob sich eine Werbung dem Fall sollten Sie dann einmal etwas andelohnt, mssen Sie wissen, wie oft Ihre Besures probieren einen anderen Anbieter, andecher das Banner gesehen, wie oft sie darauf re Produkte oder andere Banner. geklickt und bei Pay-per-Sale-Vergtung welche der Klicks dann auch zu einem Einkauf gefhrt haben. Dazu bieten alle in diesem Beitrag genannten Anbieter Statistiken an. Klickt so gut wie niemand auf das angezeigte Banner, scheint es fr Ihren typischen Besucher kein interessantes Thema zu sein, oder das Banner ist schlecht. Klicken hingegen viele Besucher auf das Banner und keiner kauft etwas, kann das auch Durchblick: Die Tradedoubler-Werbemittel-Matrix an der Qualitt der Online-Shops liegen. In je- zeigt sofort, wer mit welchen Werbeformen arbeitet
<IMG SRC="
und erweitern Sie dies um die ULR http:// images-eu.amazon.com/images/P/ (ohne Anfhrungszeichen):
<IMG SRC="http://imageseu.amazon.com/images/P/
Wollen Sie statt des kleinen das groe Cover angezeigt haben, ndern Sie im BilderDateinamen .TZZZZZZZ.gif in .MZZ ZZZZZ.gif um.
des Partnerprogramms teil. Sollten Sie trotzdem Banner auf anderen Sites einblenden, zhlen die Klicks und Sales nicht.
Werbepartner auswhlen Haben Sie sich registriert, steht die Auswahl der Werbepartner auf dem Programm. Dazu sind alle Werbetreibenden in 5. Partnerprogramm-Netzwerke Kategorien wie Hardware, Reise oder UnPartnerprogramm-Netzwerke sind virtuelterhaltung eingeteilt. Alternativ verwenle Vermittlungsagenturen fr Werbemaden Sie die Suche. Bei den meisten Partnernahmen im Internet. Wie Sie als Homeprogramm-Netzwerken lassen sich nur page-Besitzer vorgehen, ist bei allen PartSuchbegriffe recherchieren. Partnerpronerprogrammen gleich. gramm.de bietet dagegen auch die SelekAls erstes registrieren Sie sich. Neben tion nach Bannergre, Vergtungsart Ihren persnlichen Daten melden Sie auch (Klick, Sale, Lead) und Mindestverdienst. einen oder mehrere Domain-Namen an. Bei allen Partnerprogrammen gilt: WolNur Banner auf den angemeldeten Dolen Sie smtliche Anbieter angezeigt bemains nehmen an den Werbemanahmen kommen, um sich etwa offline in Ruhe fr die passenden Angebote zu entscheiden, geben Sie als Suchbegriffe a ein (ohne Anfhrungszeichen). Haben Sie ein interessantes Angebot fr Ihre Website gefunden, gehen Sie auf die Detailseite des Anbieters. Gefllt Ihnen das Angebot, so knnen Sie sich mit Ihrer Homepage beim Anbieter bewerben. Der besucht dann Ihren Internet-Auftritt und entscheidet, ob dieser zur Werbekampagne passt. Je nach Anbieter bekommen Sie innerhalb weniger Minuten oder auch erst nach einiNackte Zahlen: Anhand der Statistiken, hier von Zanox.de, erhalten Sie eigen Tagen eine Zu- oder Abnen berblick, welche Partnerprogramme sich fr Sie lohnen (Punkt 5) sage. Erst wenn Sie eine po-
sitive Rckmeldung erhalten haben, drfen Sie die Werbung auch auf Ihrer Site anzeigen. Tipp: Bewerben Sie sich besonders am Anfang bei vielen Programmen. Dadurch entstehen Ihnen keine Kosten, und Sie knnen gleich mit dem reaktionsschnellsten Werbetreibenden anfangen. HTML-Code einfgen Haben Sie die Zusage erhalten, besuchen Sie erneut im Partnerprogramm-Netzwerk die Detailseite des Werbetreibenden. Dort finden Sie unter Linkauswahl oder Werbemittel alle Werbeformen, die der Anbieter zur Verfgung stellt. Ebenso steht dort der HTML-Code fr die entsprechende Werbung. Kopieren Sie diesen in die Zwischenablage und fgen Sie ihn im HTML-Quellcode Ihres Dokuments an der Stelle ein, an der das Banner erscheinen soll. In diesem Code ist bereits alles enthalten Sie brauchen nur noch auf den warmen Geldregen zu warten.
Mehr Infos
Internet/Buch Das ausschlielich werbefinanzierte E-Book Homepage Erfolg (www.homepage-erfolg.de) von Stefan Rttinger, das es auch in gedruckter Form fr 39,90 Euro (ISBN 3-833-00643-9) gibt, bietet zahlreiche Infos, wie Sie Ihre Homepage zu einem kommerziellen Erfolg fhren oder Ihre private Homepage mit Hilfe von Partnerschaften finanzieren. Zudem bietet das rundum empfehlenswerte Buch Checklisten, Link-Listen und rechtliche Tipps.
57
Grundlagen Grundkurs I: Die erste Homepage WORKSHOPS PPpPPP

S. xx S. xx
pGrundlagen
P Workshops
P Utilities
58 ERSTE HOMEPAGE
So erstellen Sie eine Site
64 LAYOUT MIT ZELLEN

So platzieren Sie Elemente
68 FOTOS IM WEB
Arbeiten mit Fotogalerien
76 JAVASCRIPT
Effekte mit Javascript
80 SEITEN MIT STYLE

Cascading Stylesheets
84 BILDER OPTIMIEREN
So kommen Bilder ins Web
88 FLASH
Pep mit Flash-Animationen und viele weitere Themen
WORKSHOPS
Grundkurs I
Die erste Homepage

Im Verlauf dieses fnfteiligen Grundkurses zeigen wir Schritt fr Schritt, wie Sie eine einfache Website erstellen. Das Beispielmaterial finden Sie zum Nachbauen auf der Heft-CD.
Ihre erste Homepage ist in ein paar Stunden fertig. Ganz bestimmt. Wir zeigen Ihnen detailliert und nachvollziehbar, wie Sie die Seite mit Text, Bildern sowie Links gestalten und online stellen. Auf der C Heft-CD finden Sie die Beispieldateien. Als Thema haben wir die Website eines Landrover-Autoclubs ausgewhlt. Die Inhalte sind jedoch austauschbar, nach demselben Schema lsst sich also beispielsweise auch eine private Familien-Site, eine Vorstellung des eigenen Hobbys oder die WebPrsenz eines Sportclubs gestalten. Im ersten Teil gestalten Sie eine einzelne Web-Seite mit berschrift, Text, ausgerichteten Abstzen, einem Hintergrundbild und einer Logo-Grafik. Danach bertragen Sie die Dateien, aus denen die fertige Web-
Seite besteht, auf den Webserver beim Provider. Damit ist die Website online, und jeder Surfer kann sie abrufen. Im zweiten Teil des Grundkurses platzieren Sie mit einem unsichtbaren Tabellen-Layout Navigationsleiste, Logo sowie berschrift und geben so Ihrer ersten WebSeite den Feinschliff. Im dritten Teil erstellen Sie eine Fotogalerie, im vierten eine Link-Liste und im fnften ein Gstebuch.
1. Gratis-Web-Editor besorgen: Netscape Composer

Als Editor fr die Web-Seiten kommt bei uns der kostenlose Browser Netscape 7 zum Einsatz. Sie laden das Programm unter www.netscape.de herunter (2 Abbildung rechte Seite). Mit identischen Menbefeh-
XX
pGrundlagen
P Workshops
P Utilities
Grundkurs I: Die erste Homepage Grundlagen PPPpPP S. xxx S. xxx
Inhalt 1. Gratis-Web-Editor besorgen 2. INDEX.HTML: Der Name der Startseite 3. Text formatieren 4. Schriftart und Farben 5. Seitenhintergrund: Farbe oder Muster 6. Gegenprfung 7. Bild einbauen 8. HTML-Tags einfgen 9. Seite publizieren: Parameter eintragen 10. Dateien hochladen per FTP Ksten WYSIWYG, Tags, HTML oder Vorschau? Das richtige Format fr Bilder CSS-Modus: Fehler in Composer
Seite
58 59 60 60 61 61 62 62 63 63
len kommt die Open-Source-Software Mozilla (www.mozilla.org). Die Installation ist jedoch umstndlicher, und die Programmoberflche sieht ein bisschen anders aus. Zu diesen beiden Browsern gehrt ein cleverer Web-Editor, der Composer. Damit entwerfen Sie Web-Seiten, ohne HTML, die Programmiersprache des Web, kennen zu mssen. Wie in Word geben Sie Texte ein, formatieren Abstze und berschriften, klinken Bilder ein und so weiter. Nach der Installation von Netscape rufen Sie im Start-Men den Eintrag Programme, Netscape 7.1, Composer auf. Es
erscheint ein typisches Windows-Fenster mit Men- und Symbolleiste sowie einem groen Eingabebereich. Bevor Sie die erste Web-Seite in Angriff nehmen, sollten Sie Composer anpassen. Dazu rufen Sie den Menpunkt Bearbeiten, Einstellungen auf und whlen links die Kategorie Composer. Auf der rechten Seite lschen Sie das Hkchen vor Verwenden von CSS-Stilen anstelle von HTML-Elementen und -Attributen. Damit stellen Sie sicher, dass der Editor nur HTML erzeugt. Mehr ber den CSS-Modus (CSS steht fr Cascading Style Sheets) und kleine Fehler lesen Sie im 2 Kasten CSS-Modus: Fehler in Composer.
61 62 63
2. INDEX.HTML: Der Name der Startseite

Fangen Sie einfach damit an, den gewnschten Text fr die Web-Seite einzutragen (2 Abbildung folgende Seite oben). Die berschrift oder einen Absatz schlieen Sie mit der <Return>-Taste ab. Zwischendurch oder sptestens am Ende der Texteingabe ist es sinnvoll, den aktuellen Zustand auf der Festplatte zu sichern. Dazu ru-
Homepage-Bauer: Mit einem Web-Editor wie dem kostenlosen Composer entwerfen Sie Web-Seiten, ohne HTML kennen zu mssen (Punkt 1)
fen Sie den Menpunkt Datei, Speichern auf. Composer zeigt eine Dialogbox, die nach dem Titel der neuen Web-Seite fragt. Der Titel erscheint zwar nicht auf der WebSeite, aber in der Titelleiste des Browsers, mit dem die Seite geladen wird. Tragen Sie einen sinnvollen Text ein, in unserem Beispiel etwa Landrover-Club Mnchen. Besttigen Sie mit einem Klick auf OK. Nun erscheint die gewohnte Speichern-Dialogbox von Windows. Als Dateiname tragen Sie INDEX.HTML ein und besttigen mit Speichern. Diesem Dateinamen kommt eine besondere Bedeutung zu, ein anderer Name funktioniert nicht. Wenn Sie im Browser eine Adresse wie www.pcwelt.de eintippen, dann fordert der Browser beim Webserver die Startseite an. Da Sie den Dateinamen der Startseite in der Adresse weggelassen haben, verwendet der Webserver seine Standardeinstellung und schickt die Datei INDEX.HTML. Was die Erweiterung des Dateinamens betrifft, so sind sowohl HTML als auch HTM erlaubt beide funktionieren mit allen Webservern und Browsern. Sie sollten sich nur auf eine Schreibweise festlegen, sonst
59
Workshops Grundkurs I: Die erste Homepage PPpPPP S. 58 S. 63
P Grundlagen
pWorkshops
P Utilities
Menpunkt Absatz, Schriftformat auf. Composer zeigt daraufhin ein langes Men mit allen Schriften an, die auf Ihrem System installiert sind. Je nachdem, welche anderen Programme, etwa Corel Draw oder Microsoft Office, Sie installiert haben, enthlt diese Liste unterschiedliche Schriften. Klicken Sie eine bestimmte Schrift an, so zeigt Composer den Text sofort entsprechend formatiert an. Standardschriften Genau hier lauert die Falle: Damit ein WebBrowser diese Schrift verwenden kann, muss sie auf dem jeweiligen PC installiert sein. Fehlt diese Schrift, so whlt der Browser eine hnliche Schrift aus das geht in der Praxis oft vllig daneben, statt der Buchstaben sieht der Surfer dann zum Beispiel nur Sonderzeichen. Am oberen Ende der Schriftliste finden Sie drei abgetrennte Eintrge: Helvetica, Arial, Times und Courier. Diese Schriften gibt es praktisch auf jedem Computersystem. Damit sind Sie weitgehend auf der sicheren Seite. Fr das Beispiel verwenden wir trotzdem die Schrift Comic Sans MS, die auf fast jedem Windows-PC zu finden ist (2 Abbildung unten). Belassen Sie die Markierung der Wrter, und klicken Sie auf das Symbol Schrift vergrern. Bei jedem Klick wird die Schrift etwas grer, mit dem Symbol daneben verkleinern 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 fr die Web-Seite einzutragen (Punkt 2)
machen Sie ber kurz oder lang Fehler. Auch auf die Gro- und Kleinschreibung im Dateinamen sollten Sie achten mehr darber lesen Sie 2 ab Seite 38. Betreiben Sie mehrere Websites, sollten Sie fr jede davon ein eigenes Verzeichnis anlegen. Sie kommen sonst schnell durcheinander, da eine Site aus vielen verschiedenen Dateien besteht. Sptestens beim Hochladen der Dateien auf den Webserver wre die Gefahr gro, eine Datei zu vergessen.
Zeilen und lschen jeweils das Komma am Ende. Vor der Mailadresse fgen Sie eine Leerzeile ein. Nun markieren Sie alle sechs Zeilen mit der Maus und zentrieren sie.
4. Schriftart und Farben: Vorsicht walten lassen

Die Einladung zum Grillabend muss etwas aufflliger werden. Der Text soll in einer anderen Schriftart, etwas grer und unterstrichen erscheinen. Fgen Sie zunchst nach dem Doppelpunkt einen Zeilenumbruch ein. Markieren Sie nun die ersten Wrter einschlielich Doppelpunkt, und rufen Sie den
3. Wie in Word: Text formatieren

Nach dem Speichern markieren Sie mit der Maus die berschrift. Ein einzelnes Wort lsst sich brigens, wie von Word gewohnt, mit einem Doppelklick markieren. Danach klappen Sie in der unteren Symbolleiste die Auswahlliste ganz links auf. Whlen Sie den Eintrag berschrift 1 aus. Der Text erscheint in grerer, fetter Schrift. Nun rufen Sie den Menpunkt Absatz, Ausrichten, Zentriert auf. Damit erscheinen die berschriften immer zwischen dem linken und dem rechten Rand des Browser-Fensters zentriert. Schneller geht es ber das Symbol Zentrieren in der unteren Symbolleiste. Der nachfolgende Absatz ist soweit in Ordnung, ein bisschen mehr Abstand zur berschrift knnte aber nicht schaden. Setzen Sie den Cursor an den Anfang der Zeile, und drcken Sie einmal die <Return>Taste. Der zweite Absatz mit der Kontaktund der Mailadresse wirkt unbersichtlich. Hinter dem Doppelpunkt fgen Sie einen Zeilenumbruch ein. Die Adresse samt Telefonnummer verteilen Sie ebenfalls auf vier
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)
60
P Grundlagen
pWorkshops
P Utilities
Workshops PPPpPP S. 58 S. 63
be whlen Sie ber Absatz, Textfarbe aus. Ein Dialogfeld zeigt eine Reihe vordefinierter Farben, im Beispiel wird ein krftiges Rot eingestellt. Schlieen Sie mit OK, und zentrieren Sie abschlieend den Einleitungssatz. Nun fgen Sie in den Text der Einladung ein paar Zeilenumbrche ein und zentrieren dann ebenfalls alle Zeilen. In der letzten Zeile der Beispielseite ist das Datum der letzten nderung eingetragen. Das ist zwar keine Pflicht, aber ein Service gegenber den Besuchern. Damit die Zeile das Layout nicht strt, verkleinern Sie die Schrift um einen Schritt.
5. Seitenhintergrund: Farbe oder Muster

Jetzt kann sich die Homepage schon sehen lassen, jedoch ist alles immer noch sehr schwarzwei gehalten. Hier wirkt eine Hintergrundfarbe fr die ganze Web-Seite Wunder. Dazu rufen Sie den Menpunkt Absatz, Seitenfarben und Hintergrund auf. Ein Dialogfeld zeigt als Einstellung Standardfarben des Browsers. Damit berlassen Sie die Wahl der Farben dem Surfer, der seinen Browser entsprechend einstellen kann. Schalten Sie stattdessen die Option Benutzerdefinierte Farben verwenden ein (2 Abbildung oben rechts). Jetzt lassen sich die Farben fr Text, Verknpfungen (Links) und eben den Hintergrund einzeln einstellen. Klicken Sie auf die Farbschaltflche rechts neben Hinter-
grund, um den Auswahldialog anzuzeigen. Bei der Farbauswahl mssen Sie behutsam vorgehen, damit der Text auf der Web-Seite gut lesbar bleibt. Im Regelfall fahren Sie mit Pastelltnen recht gut. Fr die Beispiel-Landrover-Seite bietet sich etwa ein erdfarbener Ockerton an. Im Vorschaufeld der Dialogbox sehen Sie auch gleich, wie die Schriftund Link-Farben mit dem Hintergrund zusammenpassen. Fr den normalen Text whlen wir im Beispiel ein Farbe statt Schwarzwei: ber Absatz, Seitenfarben und Hintergrund ndern Sie die Farben fr Text, Links und die ganze Web-Seite (Punkt 5) sehr dunkles Grn aus. Hintergrundbild statt -farbe Die Alternative zu einer Hintergrundfarbe ist ein Hintergrundbild. Dazu brauchen Sie eine kleine Grafik, die sich wie Kacheln nebeneinander setzen lsst, ohne dass ein bergang sichtbar ist. Solche Grafiken sind als Wallpaper (englisch fr Tapete) oder Textur bekannt. Sie knnen diese Texturen mit einem Grafikprogramm wie Xara Webstyle selbst herstellen (2 ab Seite 116). Im Web gibt es aber viele freie Grafiken zum Download. Ein guter Startpunkt fr die Suche ist der Webkatalog Dmoz unter http://dmoz.org/World/Deutsch/Computer/Grafik/ Web. Wenn Sie die Grafikdatei auf der Festplatte haben, kopieren Sie sie in das Verzeichnis mit den Homepage-Dateien. Das ist wichtig, weil Sie die Datei zusammen mit der HTML-Datei am Ende auf den Webserver kopieren mssen. Anschlieend rufen Sie den Menpunkt Absatz, Seitenfarben und Hintergrund auf. Klicken Sie auf Datei whlen, und markieren Sie die gewnschte Hintergrundgrafik. Achten Sie darauf, dass die Option URL ist relativ zur Seitenadresse aktiviert ist. Warum, beschreibt der 2 Kasten CSS-Modus: Fehler in Composer.
6. Gegenprfung: ffnen im Internet Explorer

Es lohnt sich, zwischendurch immer mal wieder die Web-Seite mit dem Internet Explorer anzuzeigen. Zwischen Netscape/Mozilla und dem Microsoft-Browser gibt es Unterschiede in der Darstellung. Da Composer keinen Menbefehl bietet, mit dem sich ein anderer Browser zur Vorschau starten liee, ffnen Sie den Internet Explorer und rufen dann Datei, ffnen auf. Nach einem Klick auf die Schaltflche Durchsuchen erscheint der normale Windows-Dialog zum ffnen von Dateien. Whlen Sie INDEX.HTML aus, und besttigen Sie mit ffnen und dann OK. Gleich auf den ersten Blick fllt auf, dass der Internet Explorer eine grere Grundschrift als Netscape/Mozilla benutzt. Die Proportionen zwischen berschrift und Text stimmen jedoch. Auch die letzte Zeile, die Sie um einen Schritt verkleinert haben, ist beim Internet Explorer grer. Die Ursache: Composer fgt HTML-Befehle ein, die relative Grenangaben ent-
WYSIWYG, Tags, HTML oder Vorschau?

Der Web-Editor Composer, den wir fr diesen Grundkurs verwenden, bietet vier Ansichten, zwischen denen Sie mit vier Karteireitern unten am Programmfenster umschalten. Im Workshop setzen wir ausschlielich den grafischen Editor ein, auch WYSIWYG-Modus genannt. Die Abkrzung steht fr What you see is what you get, frei bersetzt etwa Das Endergebnis sieht so aus wie die Anzeige im Programm. Wenn Sie sich mit HTML auskennen oder einfach nur neugierig sind, dann rufen Sie das Register HTML-Tags auf. Hier Modus HTML-Tags: Composer zeigt Tags als gelbe Grafiken fgt Composer in die Web-Seite gelbe Markierungen fr die einzelnen Tags ein. So sehen Sie sofort, wo die wichtigen Tags sind und was sie bewirken. Mit einem Doppelklick auf ein Tag-Symbol oder ber das Kontextmen, 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 in der 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 endgltige Ergebnis. In der Praxis unterscheidet es sich kaum vom WYSIWYG-Modus, sinnvoller ist es, Sie laden die Web-Seite zur Vorschau mit dem Internet Explorer. Ausfhrliche Erluterungen zum Thema HTML-Tags finden Sie 2 ab Seite 34.
61
Workshops Grundkurs I: Die erste Homepage PPPPpP S. 58 S. 63
P Grundlagen
pWorkshops
P Utilities
Bilddatei einfgen: Hier fgen Sie mit Datei whlen eine Bilddatei ein und geben ihr einen alternativen Text als Kurzbeschreibung (Punkt 7)
fgung. Das Bild soll ganz oben auf der Web-Seite ber dem Text stehen. Fr Logos und hnliche Grafiken mit groen, einfarbigen Flchen bieten sich das GIF- und das PNG-Format an. Durch die groen Flchen lsst sich solches Bildmaterial sehr gut komprimieren. Mehr ber das richtige Bildformat finden Sie im 2 Kasten rechts. Wie Sie grere Bilder fr den Einsatz im Web vorbereiten, erfahren Sie im 2 Beitrag ab Seite 84.
Das richtige Format fr Bilder

Fr Web-Seiten sind nur drei Grafikformate tauglich: JPG, GIF und PNG. Alle drei haben Strken und Schwchen, je nachdem, um was fr Bildmaterial es sich handelt. JPG: Fr grere Bilder und vor allem Fotos ist das JPG-Format die erste Wahl. Es komprimiert die Bilddaten extrem, die Bildqualitt hngt aber vor allem vom Motiv und dem Komprimierungsgrad ab. Bei sehr starker Komprimierung, bei einfarbigen Flchen oder bei geraden Linien sind die Bildfehler bei JPG-Dateien allerdings deutlich sichtbar. GIF: Fr kleine Grafiken, Hintergrundbilder, Schaltflchen, Trennlinien und hnliches hat sich deshalb das GIF-Format etabliert. Es komprimiert nicht so gut wie JPG, lsst aber die Bilddaten unverndert. Das grte Manko: Es sind maximal 256 Farben pro Bild vorgesehen. Bei einem Sonnenuntergang beispielsweise entstehen so hssliche, grobe Farbbergnge. Dafr lassen sich mit GIF kleine Trickfilme, so genannte animierte GIFs, erzeugen. Auerdem kennt das GIF-Format Transparenz, also durchsichtige Bereiche im Bild. PNG: Als Nachfolger von GIF platziert sich PNG. Das Format beherrscht alles, was GIF kann, und erlaubt darber hinaus beliebig viele Farben. Die aktuellen Web-Browser untersttzen allesamt das PNG-Format. Trotzdem hat es sich in der Praxis bisher kaum durchgesetzt.
Alternativtext integrieren Setzen Sie die Schreibmarke an den Anfang der berschrift, und fgen Sie mit der <Return>-Taste einen Zeilenumbruch ein. Anschlieend rufen Sie den Menpunkt Einfgen, Grafik auf. Alternativ klicken Sie auf das Grafik-Icon in der Symbolleiste. Im Dialogfeld Eigenschaften bestimmen Sie zunchst mit Datei whlen die Bilddatei. Im Bereich Bildvorschau sehen Sie jetzt den Bildinhalt und daneben die Abmessungen in Pixel. Wenn Sie jetzt auf OK klicken, fordert Composer mit einer Dialogbox auf, einen Alternativtext anzugeben. Tragen Sie im 7. Bild einbauen: entsprechenden Eingabefeld eine kurze Logo muss sein Beschreibung des Bildes ein, im Beispiel etEine Landrover-Seite ohne das Logo des Offwa Landrover-Firmenlogo (2 Abbildung road-Gefhrts ist natrlich nur eine halbe oben links). Dieser Text erscheint nur Sache. Fr das Beispiel steht das Logo links dann, wenn der Browser, etwa wegen eines in einem langen dunklen Balken zur Verbertragungsfehlers, das Bild nicht anzeigen kann. Sehbehinderte Menschen surfen ebenfalls, ihre speziellen Lesegerte zeigen den Inhalt einer WebSeite in Blindenschrift an, inklusive Alternativtext. Schlieen Sie anschlieend den Eigenschaften-Dialog der Grafik mit OK. Jetzt ist die Grafik sichtbar. Ein Bild behandelt der Web-Browser wie einen Textabsatz, deshalb erscheint automatisch ein Zeilenumbruch, die berschrift bleibt mittig. Wenn Sie etwas am Bild verndern mchten, klicken Sie es einfach doppelt an, Seitenrnder ausblenden: Den Seitenrand der Web-Seite schalten Sie mit um den Eigenschaften-Diaden zustzlichen Attributen topmargin und leftmargin aus (Punkt 8) log aufzurufen. halten. Die kleine Schrift ist einfach eine Stufe kleiner als die normale Schrift. Auch die Gre der berschrift bestimmt der Browser. Das ist wichtig, weil damit beispielsweise ein Surfer, der nicht so gut sieht, eine besonders groe Grundschrift im Browser whlen kann. Daher sollten Sie es vermeiden, Schriftgren zu verwenden, obwohl HTML und CSS diese Option bieten. Auerdem knnen Sie sowieso nicht genau sagen, wie gro eine Schrift auf einem anderen PC erscheint das hngt nmlich ganz von dessen Monitor und Grafikauflsung ab.
8. HTML-Tags einfgen: Seitenrnder ausblenden

Allerdings steht die Grafik nicht am Rand, vielmehr ist links und oben ein schmaler Streifen des Hintergrundmusters sichtbar. Um das zu ndern, rufen Sie den Menpunkt Absatz, Seitenfarben und Hintergrund auf und klicken dort auf Fortgeschrittene Bearbeitung. Im Register HTML-Attribute sehen Sie alle Zusatzangaben, die der Tag <body> momentan hat (2 Abbildung links). Dieser Tag (auf Deutsch etwa Etikett oder Marke) ist fr die Gestaltung der gesamten Web-Seite zustndig (body bedeutet Krper). Hier sind beispielsweise die Farben fr den Text oder das Hintergrundbild aufgefhrt. Ausfhrliche Erluterungen zu HTML-Tags finden Sie 2 ab Seite 34. PC-WELT SONDERHEFT 2/2004
62
P Grundlagen
pWorkshops
P Utilities
Workshops PPPPPp S. 58 S. 63
Im Eingabefeld unter Attribut tragen Sie topmargin ein, rechts daneben tragen Sie den Zahlenwert 0 ein (jeweils ohne Anfhrungszeichen). Composer nimmt das Attribut in die Liste mit auf. Damit lassen Sie den oberen Rand verschwinden. Dasselbe machen Sie mit leftmargin und dem Wert 0. Beenden Sie die Dialogfelder dann mit zweimal OK. Nun ist der hssliche Zwischenraum verschwunden. Wenn Sie mchten, knnen Sie noch den Abstand zwischen Logo und berschrift mit einem Zeilenumbruch vergrern.
9. Seite publizieren: Parameter eintragen

Jetzt ist Ihre erste Web-Seite fertig. Damit sie jeder Surfer im Web abrufen kann, mssen Sie die Dateien auf den Webserver Ihres Providers hochladen. Das funktio-
Parameter eintragen: Mit diesen Parametern laden Sie Ihre erste Web-Seite bei T-Online hoch (Punkt 9)
niert bei allen Providern im Prinzip gleich, Sie brauchen allerdings die FTP-Adresse, Benutzername und Passwort. Das regelt jeder Provider individuell, ber die Online-Hilfetexte des Providers finden Sie die Angaben aber leicht heraus. Wenn Sie die notwendigen Daten zur Hand haben, rufen Sie in Composer den Menpunkt Datei, Publizieren auf. Eine Dialogbox fragt jetzt die einzelnen Parameter ab (2 Abbildung oben). Bei Name der Web-Site tragen Sie einen beliebigen Text ein, er dient nur zur Kennzeichnung. Das Eingabefeld Publizierungs-Adresse nimmt die FTP-Adresse Ihres Webservers auf. Das Feld HTTP Adresse Ihrer Homepage lassen Sie leer. Bei Benutzername tragen Sie den FTP-Benutzernamen beim Provider ein. Das Passwort lassen Sie weg, dann fragt Composer bei jedem Verbindungsaufbau erneut nach. Es ist einfach sicherer, Passwrter nicht in einer Datei auf der Festplatte abzulegen. Bei T-Online beispielsweise tragen Sie als FTP-Adresse home-up.t-on-
line.de ein. Diese Adresse ist fr alle T-Online-Kunden gleich. Der Benutzername ist ftp, als Passwort geben Sie einen Punkt (.) an. In diesem Fall knnen Sie ruhig das Passwort speichern. Eine individuelle Anmeldung beim FTP-Server von T-Online ist nicht erforderlich, weil die Prfung von Benutzer und Passwort bereits bei der Einwahl in T-Online erfolgt ist. Andersherum bedeutet dies allerdings auch: T-Online-Kunden knnen Seite verffentlichen: Composer kopiert die drei Dateien der ersten Webauf ihre Homepage nur Seite auf den Webserver bei T-Online (Punkt 10) dann zugreifen, wenn sie alle darin referenzierten, also eingebundesich mit ihrem T-Online-Zugang eingenen Dateien (Logo- und Hintergrundgrafik) whlt haben. auf den Webserver (2 Abbildung oben). 10. Zum Schluss: Dateien Nach dem Ende der bertragung rufen hochladen per FTP Sie im Browser die Web-Adresse auf, die IhWenn Sie alle Parameter eingetragen hanen der Provider zugeteilt hat. Bei T-Online ben, wechseln Sie zum Register Publizieist das beispielsweise www.<wunschname>.pri ren. In der Auswahlliste Name der Webvat.t-online.de. Statt <wunschname> tragen site ist jetzt der neue Eintrag vorbelegt. Sie den Namen ein, den Sie sich selbst bei Die Felder Seitentitel und Dateiname der Anmeldung auf den Service-Web-Seiten enthalten ebenfalls schon die richtigen von T-Online ausgesucht haben. Werte. Die restlichen Einstellungen lassen Zum Hochladen der HTML- und BilddaSie unverndert. teien auf den Webserver mssen Sie nicht Vor dem nchsten Schritt bauen Sie eiunbedingt Composer benutzen. Wie Sie ne Online-Verbindung auf. Dann klicken mit dem FTP-Programm Filezilla vorgehen, Sie auf die Schaltflche Publizieren. Comlesen Sie 2 ab Seite 96. Eine Auswahl an poser meldet sich beim FTP-Server an und verschiedenen spezialisierten FTP-Tools finkopiert dann die Datei INDEX.HTML und den Sie 2 ab Seite 126.
CSS-Modus: Fehler in Composer

Standardmig ist der Web-Editor Composer so eingestellt, dass er in die HTML-Tags CSS-Befehle fr die Formatierung einfgt. Dagegen ist im Prinzip nichts einzuwenden, alle modernen Web-Browser kommen damit zurecht (Web-Editoren-Test 2 ab Seite 102 und Workshop zu Cascading Style Sheets 2 ab Seite 80.) Abgesehen davon, dass CSS den HTML-Code der Web-Seiten unbersichtlich macht, hat Composer in puncto CSS einen kleinen Fehler: Fgen Sie ein Hintergrundbild ein, notiert Composer in der CSS-Anweisung den kompletten Pfad und nicht nur den Dateinamen der Grafikdatei. Statt MUSTER.GIF steht hier zum Beispiel C:\HOMEPAGE\MUSTER.GIF. Das funktioniert, solange Sie die Web-Seite im Browser von der lokalen Festplatte aufrufen. Dann ist die Bilddatei unter dieser Adresse gespeichert. Kopieren Sie die Web-Seite aber auf den Webserver, ist das Verzeichnis C:\HOMEPAGE nicht mehr da. Der Browser findet die Bilddatei nicht und zeigt einen Bildfehler an. Die Option URL ist relativ zur Seitenadresse im Dialogfeld fr die Hintergrundgrafik (2 Punkt 5) sorgt dafr, dass nur der Dateiname und nicht der ganze Pfad im HTML-Attribut erscheint. Das funktioniert aber nur im HTML-Modus, nicht im CSS-Modus. Um den CSS-Modus abzuschalten, rufen Sie den Menpunkt Bearbeiten, Einstellungen auf und whlen links die Kategorie Composer. Auf der rechten Seite lschen Sie das Hkchen vor Verwenden von CSS-Stilen anstelle von HTML-Elementen und -Attributen.
63
Navigationsleiste. Rechts soll ein groer Bereich entstehen, der Text, Bilder und dergleichen aufnimmt. Und am unteren Fensterrand nimmt ein Querstreifen das Datum der letzten nderung auf. Dieses Datum soll am rechten Rand des BrowserFensters ausgerichtet sein.
2. Vier Zellen: Das Roh-Layout entsteht

Insgesamt brauchen Sie fr das Beispiel also vier Zellen. In der Praxis bentigen Sie dafr eine Tabelle mit zwei Spalten und drei Zeilen. Die berflssigen zwei Zellen spielen keine Rolle. Starten Sie Composer, und beginnen Sie mit einer leeren Web-Seite. Rufen Sie den Menpunkt Tabelle, Einfgen, Tabelle auf, oder klicken Sie das Icon Tabelle in der Symbolleiste an. Im Dialogfeld Tabelle einfgen tragen Sie nun die Eckwerte ein (2 Abbildung unten). Bei Zeilen ndern Sie den Wert in 3, bei Spalten bleibt der Vorgabewert 2. Die Breite ist auf 100 Prozent des BrowserFensters eingestellt auch das ist korrekt. Das Eingabefeld Rand gibt eine Pixelbreite von 1 fr die Rahmenlinien vor. Diesen Wert belassen Sie zunchst, Composer zeigt als Rahmenlinien sonst hssliche, rot gestrichelte Linien. Erst wenn alles fertig ist, schalten Sie die Rahmenlinien aus. Klicken Sie auf OK, um die Tabelle einzufgen.
Grundkurs II
Layouten mit Zellen

Mit einem Tabellen-Layout platzieren Sie Navigationsleiste, Grafiken sowie berschriften und geben so Ihrer Web-Seite den Feinschliff. Das Workshop-Material finden Sie auf der Heft-CD.
Ihre erste Web-Seite haben Sie im vorhergehenden Teil des Kurses (2 Seite 58) gestaltet und online gestellt. Nun erweitern Sie Ihre Site und fgen neben der Startseite noch weitere Web-Seiten fr Kontaktadresse, Neuigkeiten und so weiter hinzu. Dazu bauen Sie eine Navigationsleiste mit Links auf die Teilseiten ein. So entsteht eine sinnvoll organisierte Website, die Sie selbst leicht um weitere Seiten ergnzen. Als Web-Editor setzen Sie wie schon im Grundkurs I den Netscape Composer ein.
1. Navigationsleiste: Platz schaffen mit Tabellen-Layout

Wie Sie im ersten Kursteil gemerkt haben, bietet HTML nicht viele Mglichkeiten, eine Web-Seite zu gestalten: Sie drfen Abstze einfgen, Bilder und berschriften sind automatisch ein eigener Absatz. Aber wie entstehen dann all die tollen Layouts, die man im Web bewundern kann? Die Antwort lautet: mit Tabellen. Fr die Layout-Gestaltung legen Sie eine Tabelle
wie ein Gitter ber die gesamte Web-Seite. Im nchsten Arbeitsschritt bernehmen In die einzelnen Zellen der Tabelle fgen Sie die Bilder und Texte aus dem ersten EntSie Bilder, Texte, Links und sogar weitere wurf in Kursteil I (2 Seite 58). Laden Sie Tabellen ein. Die Rahmenlinien der Tabeldie alte Web-Seite mit Datei, ffnen. le machen Sie danach unsichtbar. Damit Composer zeigt die Web-Seite in einem platzieren Sie Text und Bilder problemlos zweiten Programmfenster. Markieren Sie nebeneinander, oder die Navigationsleiste den Text unterhalb der berschrift, und und den restlichen Inhalt einer Web-Seite. drcken Sie die Tastenkombination <Strg>Als Erstes sollten Sie berlegen, welche Elemente Sie mit dem Tabellen-Layout platzieren wollen. Denn es kann sehr, sehr umstndlich werden, ein solches Layout im Nachhinein zu verndern. Im Beispiel ist oben eine Zelle quer ber das ganze Browser-Fenster erforderlich, die das Logo aufnimmt. Als kleine Erweiterung soll dieser Logobalken auch die berschrift enthalten. Auf der linken Seite brauchen Sie einen Seitenbasis: Diese schlichte Tabelle verrt direkt nach dem Einfgen noch schmalen Streifen fr die nicht, dass sie die Grundlage fr ein Web-Seiten-Layout ist (Punkt 2)
3. Layout befllen: Inhalte kopieren
64
P Grundlagen
pWorkshops
P Utilities
Grundkurs II: Tabellen-Layout
Workshops PpPP S. 64 S. 67
Layout in Arbeit: Beim ersten Speichern der Datei fragt Composer nach dem Seitentitel (Punkt 3)
<C>. Wechseln Sie zum Composer-Fenster mit der Tabelle, und klicken Sie die rechte Zelle in der zweiten Zeile an. Mit <Strg>-<V> fgen Sie den kopierten Text ein. Composer bernimmt automatisch die Textformatierung wie fette Schrift oder zentrierte Darstellung. Beachten Sie aber, dass die Schriftfarbe wieder den Standardwert Schwarz hat. Denn die Schriftfarbe gehrt zu den Seiteneigenschaften und die hat Composer nicht mitkopiert. Markieren Sie jetzt den Text Letzte nderung:, und verschieben Sie ihn per Drag & Drop in die rechte Zelle der letzten Zeile. Die berschrift knnen Sie auch kopieren, neu eintippen geht aber fast genauso schnell. Klicken Sie die Zelle oben rechts an, und tragen Sie die berschrift ein. Markieren Sie den Text, und whlen Sie im Drop-down-Men in der unteren Symbolleiste links den Eintrag berschrift 1. Dann klicken Sie auf das Zentrieren-Icon rechts in der Symbolleiste. Sichern Sie abschlieend die neue WebSeite mit Datei, Speichern unter dem Namen INDEX.HTML in einem neuen, leeren Verzeichnis. Als Seitentitel geben Sie dabei die berschrift an, im Beispiel LandroverClub Mnchen (2 Abbildung oben).
mae, ein Pixel hin oder her spielt keine Rolle. Klicken Sie die linke obere Zelle an, so dass der Cursor darin blinkt. Dann klicken Sie in der Symbolleiste auf das Icon Grafik. Mit der Schaltflche Datei whlen tragen Sie den Dateinamen im Dialogfeld Bildeigenschaften ein (2 Abbildung unten). Beim Eingabefeld Alternativer Text tragen Sie Landrover-Logo ein. Dann das Dialogfeld mit OK schlieen. Nun klicken Sie in die Zelle unter dem Logo. Hier soll die Navigationsleiste entstehen. Frs Erste gengt es, nur den Link-Text einzutragen. Tippen Sie Home, Neuigkeiten, Fotos, Links, Gstebuch und Kontakt ohne Anfhrungszeichen und jeweils durch einen Zeilenumbruch getrennt ein. Um eine ordentliche Gestaltung kmmern Sie sich spter.
Inhalt 1. Platz schaffen mit Tabellen-Layout 2. Das Roh-Layout entsteht 3. Layout befllen 4. Richtige Breite erzwingen 5. Titelzeile anpassen 6. Ausrichtung einstellen 7. Rahmen ausschalten 8. Links einfgen 9. Layout abrunden 10. Verschachtelte Tabelle 11. Musterseite anlegen
Seite
64 64 64 65 65 65 66 66 66 67 67
Ksten: RGB: Wie Sie in HTML Farben definieren 66 Schriftfarbe als Design 67
5. Titelzeile anpassen: Farbige Zellen
4. Logo links: Richtige Breite erzwingen

Nun bauen Sie das Landrover-Logo in die linke obere Zelle ein. Alle Zellen in einer Spalte haben dieselbe Breite. Deshalb sollte die Logografik so breit sein, dass in der darunter liegenden Zelle die Links der Navigationsleiste in einer Zeile ohne Umbruch Platz haben. In der Praxis sollten dafr 140 Pixel ausreichen. Die Hhe der Grafik orientiert sich an der Hhe der berschrift in der Zelle rechts daneben, im Beispiel gengen etwa 70 Pixel. Bringen Sie Ihr Logo mit einem Grafikprogramm auf diese Aus-
Als Erstes nehmen Sie sich die Titelzeile vor. Rechts neben dem Logo ist die berschrift angeordnet. Sie soll dieselbe Hinter6. Links oder rechts: grundfarbe wie die Logografik haben, die Ausrichtung einstellen Buchstaben bekommen eine hellere Farbe. Noch sind Elemente auf der Web-Seite unDadurch wirkt die gesamte erste Zeile der schn platziert: Die berschrift klebt am Tabelle wie ein Block. oberen Rand, die Texte in der Navigationsffnen Sie zunchst die Logografik mit leiste hngen ganz links, das nderungseinem Grafik-Viewer wie dem fr Privatandatum in der untersten Zelle wrde sich wender kostenlosen Irfan View (2 Seite am rechten Rand besser machen. 117). Klicken Sie den Hintergrund mit der Klicken Sie in die Zelle mit der berMaus an, Irfan View zeigt dann in der Titelschrift und auf das Icon Tabelle in der leiste den Farbwert in RGB- und HexadeziSymbolleiste. Alternativ rufen Sie Tabelle, malschreibweise an (2 Abbildung folgende Tabelleneigenschaften auf und wechseln Seite oben links). Notieren oder merken Sie zum Register Zellen (2 Abbildung nchssich die Buchstaben-Zahlen-Kombination te Seite oben rechts). Im Bereich Inhaltsin Klammern hinter HTML:, im Beispiel #00293F. Im Beispiel bentigen wir auch den Farbwert der gelben Schrift: #FFFF99. Klicken Sie in Composer die Zelle mit der berschrift an, um sie zu markieren. Nun rufen Sie den Menpunkt Tabelle, Hintergrundfarbe fr Tabelle oder Zelle auf. Im Eingabefeld tragen Sie die in Irfan View ermittelte Farbe ein. Vergessen Sie dabei nicht das vorangestellte #-Zeichen. Im Feld rechts daneben zeigt Composer eine Vorschau der Farbe. Schlieen Sie das Komplett: Mit Logo und Text in der Navigationsleiste ist die Startseite nun Dialogfeld mit OK. Mar- vollstndig es fehlt nur noch der Feinschliff am Layout (Punkt 4)
kieren Sie jetzt die berschrift, und rufen Sie den Menpunkt Absatz, Textfarbe auf. Tragen Sie im bereits bekannten Eingabefeld den Farbwert der gelben Schrift ein.
65
Workshops PPpP S. 64 S. 67
P Grundlagen
pWorkshops
P Utilities
Farbinfo: Mit einem Grafik-Viewer finden Sie den RGBWert der Hintergrundfarbe im Logo heraus (Punkt 5)
ausrichtung aktivieren Sie die Option Vertikal und stellen die Auswahlliste auf Zentriert ein. Klicken Sie abschlieend auf die Schaltflche Anwenden schon erscheint die berschrift mittig. Sie mssen das Dialogfeld nicht verlassen, um andere Zellen zu markieren. Mit den Schaltflchen Vorige und Weiter wechseln Sie zur vorhergehenden respektive nchsten Zelle. Die jeweils markierte Zelle hat einen breiten grauen Rand. Klicken Sie auf Weiter, bis die Zelle mit der Navigationsleiste markiert ist. Aktivieren Sie die Option Horizontal, stellen Sie die Auswahlliste auf Zentriert ein, und bettigen Sie die Schaltflche Anwenden. Danach wechseln Sie zur Zelle mit dem nderungsdatum und richten den Inhalt mit der Einstellung Rechtsbndig in der Auswahlliste am rechten Rand aus.
die Tabelle unsichtbar zu machen. Klicken Sie irgendeine Zelle in der Tabelle an, und rufen Sie dann den Menpunkt Tabelle, Tabelleneigenschaften auf. Interessant ist der Bereich Rnder und Abstnde. Tragen Sie bei Rand eine 0 ein (ohne Anfhrungszeichen). Auch bei Abstand und Auffllung tragen Sie eine 0 ein. Sonst zeigen Web-Browser zwischen der Logografik und der Zelle rechts daneben einen hsslichen weien Streifen. Wenn Sie jetzt auf die Schaltflche OK klicken, dann sehen Sie in Composer anstatt der Randlinie gestrichelte rote Linien. Um das Layout ohne die roten Markierungen zu betrachten, speichern Sie die WebSeite und ffnen die Datei anschlieend im Internet Explorer. Jetzt kleben allerdings die Texte in der Navigationsleiste und rechts in der groen Hauptzelle am Titelbalken. Fgen Sie in Composer einfach am Textbeginn jeweils mit der <Return>-Taste einen Zeilenumbruch ein.
Einstellungssache: Fr jede Zelle stellen Sie einzeln die vertikale und horizontale Ausrichtung ein (Punkt 6)
8. Navigation komplett: Links einfgen

Jetzt ist der Moment gekommen, um die Texte in der Navigationsleiste zu echten Links zu machen. Beim Anklicken sollen die Links die entsprechenden Unterseiten aufrufen. Markieren Sie zunchst mit einem Doppelklick den Text Home. Dann klicken Sie in der Symbolleiste auf das Icon
7. Rahmen ausschalten: Die Tabelle verschwindet

Das Tabellen-Layout ist nun komplett Zeit, die Rahmenlinien auszuschalten und
RGB: Wie Sie in HTML Farben definieren

Wenn Sie in HTML eine Farbe fr eine Schrift oder den Hintergrund angeben, machen Sie Bekanntschaft mit dem RGB-Farbwert. Ein solcher Farbwert besteht aus dem Rot-, Grn- und Blauanteil der Farbe. Jede Grundfarbe kann einen Wert zwischen 0 und 255 haben, notiert in hexadezimaler Schreibweise. Ein reines Rot hat den Farbwert #FF0000, Ocker #FFCC33. Fr HTML ist es egal, ob Sie Gro- oder Kleinbuchstaben verwenden, die Groschreibung ist aber blich. Es ist natrlich ziemlich mhsam, diese Farbwerte von Hand einzutippen. Deshalb haben Web-Editoren wie Composer einen bequemen Auswahldialog fr Farben. ber das Tool Irfan View (und andere Grafikprogramme) stellen Sie den RGB-Farbwert eines Bildausschnitts fest (2 Punkt 5). Die Alternative zu den RGB-Farbwerten sind Farbnamen. In HTML sind allerdings nur sechzehn Farbnamen festgelegt: black (schwarz), gray (grau), maroon (dunkelrot), red (rot), green (dunkelgrn), lime (hellgrn), olive (braungrn), yellow (gelb), navy (dunkelblau), blue (blau), purple (dunkles Lila), fuchsia (helles Lila), teal (blaugrn), aqua (hellblau), silver (hellgrau) und white (wei). Farbwahl: In Composer whlen Sie Sie tragen diesen Farbnamen ohne #-Zeichen und Farben aus einer Palette aus ohne Anfhrungszeichen ein.
Verknpfung das ist bei Composer der Name fr einen Link. Im Eingabefeld tragen Sie den Dateinamen ein, den der Browser beim Anklicken laden soll. Home ruft INDEX.HTML, die Startseite, auf. Tragen Sie also diesen Dateinamen ein. Das wirkt insofern paradox, als die Startseite damit sich selbst aufruft. Die Navigationsleiste soll aber fr alle Web-Seiten identisch sein. Und auf der Unterseite mit der Kontaktadresse macht der Link sehr wohl Sinn. Nachdem Sie auf OK geklickt haben, zeigt Composer Home in der typisch blauen Linkfarbe mit Unterstrich an. Markieren Sie nun das nchste Wort Neuigkeiten, und rufen Sie den Verknpfungsdialog auf. Tragen Sie als Dateiname NEUIGKEITEN.HTML ein. Diese Datei gibt es noch nicht, aber das spielt keine Rolle. An sich drfen Sie der Datei einen beliebigen Namen geben, er muss nicht mit dem Text des Links bereinstimmen. Sie behalten aber spter leichter den berblick, wenn Link-Text und Dateiname aussagekrftig und bereinstimmend sind. Fahren Sie nach dem beschriebenen Schema mit den restlichen Links fort. Beim Gstebuch ersetzen Sie im Dateinamen durch ae Umlaute sind eine beliebte Fehlerquelle bei Dateinamen, die Sie damit vermeiden (2 Abbildung rechte Seite oben).
9. Letzter Schliff: Layout abrunden

Die Navigationsleiste wirkt noch ein wenig verloren links neben dem Text. Frben Sie den Zellenhintergrund mit dem Farbton der Titelzeile ein: zuerst die Zelle und dann das Symbol Tabelle anklicken, die Schaltflche neben Hintergrundfarbe drcken und den Farbwert eintragen fertig. Auch die unterste Zelle der linken Tabellenspalte frben Sie entsprechend ein.
66
P Grundlagen
pWorkshops
P Utilities
Workshops PPPp S. 64 S. 67
Wenn Sie mchten, ndern Sie auch noch die Farbe der Links wie im 2 Kasten Schriftfarbe als Design unten erklrt. Wie im ersten Kursteil 2 ab Seite 58 bei Schritt 5 ausfhrlich beschrieben, fgen Sie nun das Hintergrundbild ein und setzen die Randabstnde auf Null. Schn wre es jetzt noch, wenn die Navigationsleiste nicht am Ende des Textes aufhren wrde. Damit sie bis zum unteren Fensterrand reicht, muss die gesamte Tabelle 100 Prozent der Fensterhhe einnehmen. Positiver Nebeneffekt: Damit wrde dann auch das nderungsdatum immer am unteren Rand stehen. Das Problem daran ist: Es gibt kein offizielles HTML-Attribut, das die Hhe der Tabelle festlegt. Internet Explorer und Netscape/Mozilla erweitern hier aber den HTML-Standard sinnvoll. Klicken Sie irgendeine Zelle an, whlen Sie Tabelle, Tabelleneigenschaften und dann Fortgeschrittene Bearbeitung. Bei Attribut tragen Sie height ein, bei Wert 100% (ohne Anfhrungszeichen). Schlieen Sie die Dialogfelder mit zweimaligem OK. Jetzt zeigt sich ein hsslicher Streifen Hintergrund zwischen Logo und Navigationsleiste. Um dieses Problem zu beheben, klicken Sie auf die rechte Zelle mit dem Haupttext und dann auf das Symbol Tabelle. Aktivieren Sie die Option Hhe, tragen Sie als Wert 100 ein (ohne Anfhrungszeichen), und stellen Sie die Auswahlliste rechts daneben auf % der Tabelle (2 Abbildung unten). Markieren Sie nun die Zelle darber mit der berschrift. Aktivieren Sie die Option Breite, und tragen Sie daneben 100% ein. Schlieen Sie das Dialogfeld mit OK.
10. Abstand halten: Verschachtelte Tabelle
Ein Problem gibt es jetzt noch: Der Haupttext klebt links an der dunkel eingefrbten Navigationsleiste. Das ist auch klar, schlielich haben wir die Abstnde zwischen Zellen in 2 Punkt 7 auf Null eingestellt. Das Problem lsen wir durch einen Trick, der oft bei Tabellen-Layouts zum Einsatz Link-Funktion: In der Navigationsleiste weisen Sie den Wrtern eine Zielkommt: eine verschachtelte adresse zu, hier den Dateinamen der entsprechenden Web-Seite (Punkt 8) Tabelle. Und so funktioniert Haupttext und tragen stattdessen einen der Trick: Markieren Sie den gesamten Text in der rechten Hauptzelle, und drcken Sie Text wie Baustelle: Hier wird noch geardie Tastenkombination <Strg>-<X>. Damit beitet. ein. Dann speichern Sie die Webverschieben Sie den Text in die ZwiSeite erneut. Diese Musterseite ist ab jetzt die Basis schenablage von Windows. Setzen Sie den fr alle neuen Seiten. Sie laden die MusterCursor in die linke obere Ecke der nun leeren Zelle, und rufen Sie anschlieend Taseite LEER.HTML und sichern sie mit Dabelle, Einfgen, Tabelle auf. tei, Speichern unter mit dem gewnschIm Dialogfeld Tabelle einfgen tragen ten Dateinamen. Auf diese Weise erzeugen Sie nun alle Unterseiten, deren DateinaSie bei Zeilen und Spalten den Wert 1 men Sie in der Navigationsleiste als Ziel anein (ohne Anfhrungszeichen), bei Rand gegeben haben: NEUIGKEITEN.HTML, FOdagegen 0. Schlieen Sie das Dialogfeld mit OK. In der groen Zelle ist nun eine TOS.HTML und so weiter. Wenn Sie jetzt die Startseite INDEX. Tabelle mit nur einer Zelle eingefgt, eine HTML mit dem Internet Explorer ber Daso genannte verschachtelte Tabelle. Klicken tei, ffnen und die Schaltflche DurchSie in diese eine Zelle der inneren Tabelle, suchen aufrufen, funktionieren alle Links und fgen Sie mit <Strg>-<V> den kopierten der Navigationsleiste. In den folgenden Text ein. Jetzt hlt der Text gebhrend AbKursteilen erfahren Sie, wie Sie die Inhalte stand vom blauen Rand. der bisher leeren Web-Seiten nach Ihren Noch besser: Sie drfen den Abstand frei Vorstellungen gestalten knnen. whlen. Dazu klicken Sie in die innere Tabelle und rufen den Menpunkt Tabelle, Tabelleneigenschaften auf. Der Wert neben Auffllung legt den Abstand des Zellinhalts vom Rand in Pixel fest. Tragen Sie Den letzten Schliff geben Sie einer Webhier zum Beispiel eine 10 Seite, wenn Sie die Schriftfarben auf die ein (ohne Anfhrungszeirestlichen Seitenelemente abstimmen. Im chen). Beispiel macht es etwa Sinn, die normale 11. Musterseite: Basis Schriftfarbe an das dunkle Hintergrundfr Erweiterungen blau des Logos anzupassen. Das Layout ist nun fertig siZunchst stellen Sie mit Irfan View den chern Sie daher als Erstes RGB-Farbwert des blauen Hintergrunds die Startseite mit Datei, fest (2 Punkt 5). Dann rufen Sie in ComSpeichern. Jetzt ist es Zeit, poser den Menpunkt Absatz, Seitenfardass die anderen Seiten an ben und Hintergrund auf. Aktivieren Sie die Reihe kommen. Erzeudie Option Benutzerdefinierte Farben gen Sie zuerst eine leere verwenden, und klicken Sie auf die Musterseite, rufen Sie DaSchaltflche hinter Normaler Text. Im tei, Speichern unter auf, Farbauswahldialog tragen Sie den zuvor und geben Sie als Dateiermittelten dunkelblauen RGB-Farbwert Anpassen: Die Hhenangabe 100% sorgt dafr, dass die Navigationsname LEER.HTML an. Jetzt ein das Zeichen # nicht vergessen. leiste immer bis zum unteren Fensterrand reicht (Punkt 9) lschen Sie den gesamten
Schriftfarbe als Design
67
Grundkurs III
Fotos ins Web stellen

Mit einer Fotogalerie prsentieren Sie die Bilder Ihrer Digitalkamera oder des Scanners im Web. Wies perfekt funktioniert, zeigen dieser Workshop und das Beispielmaterial auf der Heft-CD.
durch und whlen die Bilder frs Web aus. Diese kopieren Sie dann ins eben angelegte leere Verzeichnis. Irfan View verfgt ber pfiffige Funktionen, die Ihnen dabei helfen. Nach dem Starten des Programms rufen Sie den Menpunkt Datei, Thumbnails auf. In einem Extrafenster zeigt das Tool nun links einen Ordnerbaum wie der Explorer. Stellen Sie hier das Verzeichnis mit den Bilddateien ein. Rechts zeigt Irfan View Thumbnails der Bilder aus diesem Verzeichnis (2 Abbildung unten). Um eine Datei in ein anderes Verzeichnis zu bertragen, rufen Sie Datei, Selektierte Dateien kopieren auf oder drcken die Taste <F8>. Es erscheint das Dialogfeld Kopiere (2 Vordergrund Bild unten). Hier finden sich Eingabefelder fr zehn Zielverzeichnisse. Klicken Sie hinter dem Eingabefeld 1 auf Durchsuchen, und stellen Sie Ihr bisher leeres Bilderverzeichnis ein. Drcken Sie nun die Taste <1>, oder klicken Sie auf die entsprechende Schaltflche, so kopiert Irfan View die markierte Bilddatei ins Zielverzeichnis 1. Statt umstndlich mit der Maus zu hantieren, brauchen Sie nur die zwei Tasten <F8> und <1> zu drcken. Mit der Kopieraktion stellen Sie sicher, dass nur die gewnschten Bilder in der Fotogalerie im Web erscheinen und dass Ihre Originaldateien unangetastet bleiben. Falls Sie also etwa in Jojothumb versehentlich ein Bild lschen, so knnen Sie immer noch auf das Originalbild zurckgreifen.
Bei einem Ausflug ins Grne sind nette Fotos entstanden. Unsere Beispiel-Website soll deshalb eine Fotogalerie bekommen. Wir zeigen Ihnen, wie das mit dem kostenlosen Galeriegenerator Jojothumb funktioniert (fr Windows 95/98/ME, NT 4, 2000 und XP, auf C Heft-CD und unter www.jo jotsch.de, 2,2 MB; mehr Details 2 Seite 117).
1. Fotos prsentieren: Diashow oder Galerie

Wenn Sie im Web Fotos prsentieren wollen, knnen Sie sich an der klassischen Diashow orientieren: Auf der Web-Seite ist ein Foto fensterfllend sichtbar. ber zwei Links blttert der Besucher vor und zurck. Nachteil: Bei einer langsamen Online-Verbindung dauert der Seitenaufbau sehr lange, weil die Bilder trotz JPG-Format recht gro sind. Und um die Bilder weiter hinten zu sehen, mssen sich die Surfer alle davor platzierten Fotos anzeigen lassen, auch wenn sie diese vielleicht gar nicht interessant finden.
Deshalb hat sich in der Web-Praxis eine andere Lsung durchgesetzt: die Galerie mit Vorschaubildern (englisch: Thumbnails). Die Thumbnail-Seite zeigt sechs bis zehn kleine Vorschaubilder. Ein Mausklick auf ein Bild ffnet eine neue Web-Seite, die das angeklickte Bild gro zeigt. Technisch ist das nicht weiter schwer, bedeutet aber eine Menge Handarbeit. Deshalb gibt es jede Menge Tools, die diese Aufgabe bernehmen, zum Beispiel Jojothumb.
3. Projekt einrichten: Profil anlegen und speichern

Sie starten das Indexprogramm nach der Installation ber das Start-Men und Programme, JoJoSoftware, JoJoThumb. Das Hauptfenster zeigt links einen Ordnerbaum wie im Windows-Explorer (2 Abbil-
2. Vorarbeiten: Fotos auswhlen und kopieren

Bevor Jojothumb zum Einsatz kommt, legen Sie mit dem Windows-Explorer ein leeres Bilderverzeichnis auf der Festplatte an. Danach blttern Sie mit einem Grafikbetrachter wie dem Gratis-Tool Irfan View (2 Seite Bildauswahl: Der Grafikbetrachter Irfan View hilft mit Thumbnails und 117) die Bildersammlung schneller Kopierfunktion, die Galeriebilder zusammenzustellen (Punkt 2)
68
P Grundlagen
pWorkshops
P Utilities
Grundkurs III: Fotogalerie
bearbeiten, sollten Sie zwischendurch die Schaltflche Speichern anklicken.
Inhalt 1. Diashow oder Galerie 2. Fotos auswhlen und kopieren 3. Profil anlegen und speichern 4. Bilder verkleinern und kopieren 5. Thumbnail-Seite gestalten 6. Layout bernehmen 7. Bildseiten anpassen 8. Fein-Tuning
Seite
4. Klon-Funktion einschalten: Bilder verkleinern und kopieren
Quelle whlen: Im Ordnerbaum links whlen Sie das Quellverzeichnis mit den Bilddateien aus (Punkt 3)
dung oben). Stellen Sie den Ordner mit den Bildern fr die Galerie ein. Rechts ist aufgelistet, wie viele Bilddateien sich in dem Ordner befinden. In der Voreinstellung zhlen fr das Tool brigens nur JPG-Bilder. Falls Ihre Fotos ein anderes Dateiformat haben, passen Sie Jojothumb in der Kategorie Dateifilter an. Verwenden Sie ausschlielich JPG-Bilder, belassen Sie die Voreinstellung jpg, ansonsten schalten Sie zustzlich das Format Ihrer Bilddateien ein. Wie Sie sehen, fehlt das GIF-Format Bilder dieses Formats wandeln Sie vorher mit Irfan View und Datei, Batchkonvertierung/Umbenennung in das PNG-Format um. Alle weiteren Einstellungen nehmen Sie im Optionen-Dialog vor. Dazu klicken Sie die gleichnamige Schaltflche an. Wie Sie sehen, bietet das Tool eine ganze Menge Optionen, die Sie auf der linken Seite auswhlen. Bleiben Sie zunchst bei Profile. Mit der Schaltflche Profilverzeichnis whlen Sie den Ordner aus, den Jojothumb zum Speichern der Projektdatei benutzt. Stellen Sie hier das Bildverzeichnis ein. Whlen Sie anschlieend unter aktuelles Profil den Eintrag Profilbeispiel_Schatten, damit das Tool fr jedes Vorschaubild einen Schatteneffekt erzeugt. Wenn Sie das nicht wollen, belassen Sie die Voreinstellung. Wer ganz sicher gehen will, kann auch noch eine Beschreibung eintragen. Diese ist auch ntzlich als TodoListe, wenn Sie geplante nderungen vormerken wollen. Klicken Sie nun auf Speichern als, und geben Sie dem Profil einen aussagekrftigen Namen, etwa Club-Fotogalerie. Whrend Sie die anderen Kategorien des Profils
Digitalkamera-Originalbilder sind in der Regel viel zu gro fr die Darstellung auf einer Web-Seite. Eine Breite von 500 Pixeln ist hier die praktische Obergrenze. Die meisten Surfer nutzen einen Monitor mit 1024 x 768 Pixeln Auflsung. Von den 1024 Pixeln Breite gehen etwa 250 Pixel fr den Kasten: Rahmen des Browser-Fensters und die LeseStempel in Bilder einfgen 71 zeichen verloren, die viele Surfer stets eingeblendet haben. Links auf der Web-Seite muss Platz fr die Navigationsleiste bleition Exif/IPTC-Informationen und Komben, im Beispiel 140 Pixel. Es bleiben maximentare erhalten bernimmt Jojothumb mal 630 Pixel Breite fr das Bild. Bei einer die Daten in die verkleinerte Bilddatei. AkBildbreite von 500 Pixeln ist dann links tivieren Sie die Funktion nur, wenn Sie Teiund rechts noch ein kleiner Rand brig. le der Exif-Daten ber einen Stempel indiJojothumb verkleinert die Bilddateien viduell in jedes Bild einfgen wollen. Anauf Wunsch automatisch fr Sie. Klicken sonsten verringern Sie die Dateigre der Sie dazu die Kategorie Clonen an, und akBilder, indem Sie die Infos weglassen. Auf tivieren Sie ganz oben die gleichnamige Wunsch knnen Sie einen Stempel in die Option, um die Eingabefelder freizuschalverkleinerten Bilddateien einfgen (2 Kasten (2 Abbildung unten rechts). Entscheiten Stempel in Bilder einfgen). dend ist das Cloneverzeichnis. Damit ist 5. Thumbnail-Seite gestalten: das Zielverzeichnis gemeint, in dem JojoAnzahl der Bilder festlegen thumb die verkleinerten Bilddateien, In den Kategorien JoJoScript beziehungsThumbnails und HTML-Dateien ablegt. weise Thumbnails mssen Sie nichts verKlicken Sie auf die Schaltflche Clonendern. Klicken Sie nun links auf die Kateverzeichnis, und stellen Sie das Homegorie HTML. Das Eingabefeld HTML-Verpage-Verzeichnis ein. In diesem Verzeichnis zeichnis enthlt den Namen des Verzeichlegt das Tool spter drei Unterverzeichnisnisses, in dem Jojothumb die HTML-Dateise fr die Galeriedateien an, so dass keine en fr die Thumbnail-Seiten und die einbestehenden Dateien versehentlich berzelnen Bilderseiten ablegen wird. schrieben werden. Im Bereich Bildsortierung bestimmen Aktivieren Sie nun die Option Original Sie die Reihenfolge der Thumbnails. Sinn als JPEG kopieren. Im Bereich Ausdehmacht etwa die Einstellung Datum. nung/Qualitt schalten Sie die Einstellung Wenn Sie eine bestimmte Reihenfolge erndern auf Pixel fr die ein. Im Eingabefeld tragen Sie 500 fr die gewnschten 500 Pixel Breite ein. Die Einstellung lngste Seite belassen Sie. Damit werden die Bilder maximal 500 Pixel breit oder 500 Pixel hoch, je nach Bildausrichtung. Falls Sie die Bilder mit einer Digitalkamera aufgenommen haben, enthalten die JPG-Dateien zustzliche Informationen, die Exif/ IPTC-Daten. Darin sind Details wie Belichtungszeit, Brennweite oder auch das Aufnahmeda- Die Klonfabrik: Mit diesen Einstellungen erzeugt Jojothumb auf 500 Pixel tum gespeichert. Mit der Op- Breite oder Hhe reduzierte Bilder fr die Galerie (Punkt 4)
68 68 68 69 69 70 71 71
69
P Grundlagen
pWorkshops
P Utilities
fehl Bearbeiten, Kopieren auf. Wechseln Auch die Links zum Blttern Sie zurck zu Jojothumb, und fgen Sie im zwischen den ThumbnailEingabebereich ganz am Anfang mit der Seiten fgt das Tool ein. <Return>-Taste einen Zeilenumbruch ein Klicken Sie nun auf die Un(2 Abbildung unten). Setzen Sie die terkategorie SeitendefinitiSchreibmarke in die leere Zeile, und on bei Thumbnail-Seite. drcken Sie die Tastenkombination <Strg>Auf der rechten Seite zeigt <V>. Mit der Schaltflche Syntaxtest undas Tool eine schematische ter dem Eingabebereich prfen Sie briDarstellung des Seiteninhalgens, ob Sie beim Kopieren etwas falsch getes. Wenn Sie eines der Elemacht haben. mente der Vorschau ankliKlicken Sie nun im Vorschaubereich auf cken, erscheinen im EingaSeitenabschluss. Wechseln Sie zu Compobefeld unten die dem Eleser, und markieren Sie hinter dem Hauptment zugeordneten HTMLtext ab dem schlieenden Tag der Zelle Tags. In der fertigen HTML</td> alles bis vor den Tag </body> am Datei sind diese HTML-Tags HTML-Tags kopieren: Markieren Sie in Composer den Teil der HTML-Tags, Ende der Datei. bertragen Sie den Text in eingefgt. An manchen Stelder vor dem Haupttext der Web-Seite liegt (Punkt 6) die Zwischenablage. Wechseln Sie zu Jojolen stehen Angaben in gethumb, und fgen Sie den Text mit <Strg>schweiften Klammern wie reichen wollen, mssen Sie die Dateina<V> in den Eingabebereich ein. {count_pages}. Es sind interne Variablen, men der Bilder im Windows-Explorer um die bei der Ausgabe durch Texte oder Zaheine laufende Nummer ergnzen, etwa 01Hintergrundbild ergnzen len ersetzt werden. Das Beispiel zeigt die ..., 02-.... Ganz unten steuern Sie mit JoJetzt fehlt nur noch das Hintergrundbild. Gesamtzahl an Thumbnail-Seiten an, so JoThumb Copyrightnotiz, ob auf jeder Klicken Sie im Vorschaubereich auf eine dass sich eine berschrift wie Seite 1 von Thumbnail-Seite ein Hinweis aufs Tool einfreie Stelle, so erscheinen im Eingabebe3 generieren lsst. geblendet wird. Die Option Browser autoreich zwei Attribute fr Hintergrund und 6. Layout bernehmen: matisch starten bewirkt, dass nach ErzeuTextfarbe. Galerie an Website anpassen gen der Galerie sofort Ihr Standard-Browser Wechseln Sie jetzt zu Composer, und suDamit das Layout der Galerie zur Landromit der ersten Thumbnail-Seite startet. chen Sie am Anfang die Zeile, die mit <bover-Website passt, sollen berschrift, Logo Die Kategorien Deko-Angaben, Startdy beginnt. Kopieren Sie den Text danach und die Navigationsleiste auftauchen. Daseite und Index-Seite lassen Sie unvernbis vor die abschlieende spitze Klammer zu fgen Sie den HTML-Code Ihrer Web-Seidert. Die Deko-Angaben sind fr den Schat(im Beispiel: topmargin="0" leftmargin="0" te aus Composer in Jojothumb ein. Klicken teneffekt zustndig, eine Startseite ist unbackground="28.gif") in die ZwischenablaSie in Jojothumb im Vorschaubereich auf ntig, schlielich binden Sie die Galerie in ge. Wechseln Sie nun zu Jojothumb, lSeitentitel. Unten erscheinen die HTMLIhre Website ein. Eine Index-Seite enthlt schen Sie den Inhalt des Eingabebereichs, Tags fr eine berschrift: <h2 align="cen direkte Links zu den Thumbnail-Seiten, und fgen Sie mit <Strg>-<V> die Zwiter">JoJoThumb {profile}</h2>. Ersetzen was nur bei sehr vielen Seiten sinnvoll ist. schenablage ein. Sie die berschrift durch <h2 align="cen Klicken Sie nun auf die Kategorie Standardmig zeigt Jojothumb norter">Ausflug ins Gruene</h2> (ohne die geThumbnail-Seite. Das Eingabefeld Dateimale Links in Schwarz an. Um die Stanschwungenen Anfhrungszeichen) oder einame-Basis nimmt den Anfang des Dateidardfarbe fr Links einzustellen, klicken nen anderen sinnvollen Text. Wechseln Sie namens fr die Thumbnail-Seiten auf. JojoSie im Vorschaubereich den gelben Balken jetzt zu Composer, und lathumb hngt eine laufende Nummer an, den Sie die Web-Seite FOfalls fr viele Bilder mehrere Seiten ntig TOS.HTML. Aktivieren Sie sind. Tragen Sie hier thumb ein. Damit ber die Registerkarte unten entstehen spter die Dateinamen THUMBdie Ansicht HTML-Quelle. 1.HTML und so fort. Suchen Sie die Stelle, die unDie Thumbnailverteilung regelt, wie mittelbar auf die schlieenviele Vorschaubilder auf einer Seite stehen. de spitze Klammer des <boIm Beispiel sollen es sechs Vorschaubilder dy>-Tags folgt. Die Stelle sollsein, also tragen Sie bei Thumbnails je Zeite mit <table beginnen (2 le den Wert 3 (ohne AnfhrungszeiAbbildung oben). Markieren chen) ein. Aktivieren Sie die Option neue Sie ab dieser Stelle den Text Seite nach Zeilen, und tragen Sie den Wert bis zur Tabellenzelle, die 2 ein (ohne Anfhrungszeichen). Die restden Haupttext der Web-Seite lichen Werte lassen Sie unverndert. Weil enthlt. Im Beispiel beginnt die zehn Bilder im Beispiel auf einer dieser Text mit <b>Baustel- HTML-Tags einfgen: In Jojothumb fgen Sie die im Bild oben kopierten Thumbnail-Seite nicht Platz haben, erzeugt le:. Rufen Sie den Menbe- HTML-Befehle im Bereich fr den Seitentitel ein (Punkt 6) Jojothumb zwei Seiten fr Thumbnails.
70
P Grundlagen
pWorkshops
P Utilities
am oberen Rand an. Lschen Sie nun im Eingabebereich alle Angaben ab <style >.
7. Bildseiten anpassen: Kopieren wiederholen

Nun kmmern Sie sich um die Detailseiten, die beim Anklicken eines Thumbnails jeweils ein groes Bild anzeigen. Auch hier soll das Layout der Website entsprechen. ffnen Sie die Unterkategorie Seitendefinition bei Bild-Seite. Der Aufbau ent-
Stempel in Bilder einfgen

Damit es Bilderdiebe schwerer haben, fgen Sie in die verkleinerten Bilddateien (2 Punkt 4) einen Stempel ein. Klicken Sie dazu in Jojothumb Clonen an, und aktivieren Sie die Option Stempel erzeugen. Nun erscheint links die neue Kategorie Stempel, die Sie anklicken. Sie haben die Wahl zwischen einem Text- und einem Bildstempel (oder beiden). Beim Bildstempel blenden Sie eine Grafikdatei, etwa das Firmenlogo, ins Bild ein. Frs Beispiel nehmen wir einen Textstempel. Dazu schreiben Sie LandroverClub Mnchen ins Eingabefeld Text. Dann whlen Sie Art und Gre der Schrift aus; standardmig ist die Schrift wei. Um die Schriftfarbe zu verndern, klicken Sie ins Eingabefeld nun erscheint der Farbauswahl-Dialog von Windows. Im Bereich Position legen Sie fest, wo der Stempel im Bild erscheint. Jede grn markierte Stelle steht fr eine Position, die Sie mit einem Mausklick setzen oder lschen. Der Stempel darf auch mehrfach vorkommen. Frs Beispiel whlen wir die Ecke links unten. Die Offset-Werte legen fest, wie weit der Stempel vom Bildrand entfernt ist. Die Deckkraft bestimmt, ob die Schrift das Bild durchscheinen lsst je geringer die Deckkraft, desto strker ist der Hintergrund sichtbar.
Erster Versuch: Die Thumbnail-Seiten von Jojothumb passen sich ans Site-Layout an. Aber es fehlen noch die Logografik und das Hintergrundbild, auch funktionieren die Links der Navigationsleiste noch (Punkt 7)
spricht exakt dem Gegenstck bei Thumbnail-Seite. Wiederholen Sie die Anweisungen aus 2 Punkt 6. Wechseln Sie nun in die Kategorie Profile, und klicken Sie auf Speichern. Schlieen Sie den OptionenDialog mit der Schaltflche OK. Klicken Sie auf Starten, damit Jojothumb die Galerie erzeugt. Je nach Material und Anzahl der Bilder kann es etwas dauern, bis die Bilder verkleinert und die Thumbnail- sowie die HTML-Dateien erzeugt sind. Danach ffnet sich Ihr Standard-Browser. Sie sehen die erste Galerieseite mit den Vorschaubildern. Die Navigation funktioniert, auch die Detailbilder lassen sich aufrufen. Allerdings fehlen die Logografik und das Hintergrundbild, und die Links der Navigationsleiste funktionieren noch nicht (2 Abbildung oben).
8. Fein-Tuning: Bilder kopieren und Links anpassen

Das Grafikproblem hat eine einfache Ursache: Die HTML-Tags erwarten, dass die beiden Bilddateien im selben Verzeichnis wie die HTML-Datei gespeichert sind. Starten Sie den Windows-Explorer, und wechseln Sie zum Homepage-Verzeichnis. Darin sind drei neue Unterverzeichnisse angelegt: DECO_SCHATTEN, HTML_SCHATTEN und THUMBS. Der erste Ordner enthlt die Grafiken fr den Schatteneffekt, der zweite smtliche HTML-Dateien (Thumbnail- und Bilderseiten), der dritte die Thumbnails.
Bildstempel: Links unten in der Bildecke steht der Text, den Jojothumb eingefgt hat
Die Bilddateien fr die Groansicht selber sind im Homepage-Verzeichnis gelandet. Kopieren Sie mit dem Windows-Explorer die beiden Bilddateien fr Hintergrundgrafik und Logo aus dem HomepageVerzeichnis ins HTML-Verzeichnis. Danach wechseln Sie wieder zu Jojothumb, klicken auf Optionen und ffnen die Unterkategorie Seitendefinition bei Thumbnail-Seite. Klicken Sie im Vorschaubereich auf Seitentitel. Durchsuchen Sie die HTML-Tags im Eingabebereich, bis Sie den ersten Link-Tag finden. Er lautet im Beispiel <a href="index.html">. Der erste Link in der Navigationsleiste ruft die Homepage auf. Er erwartet die Zieldatei INDEX.HTML im selben Verzeichnis. Sie ist aber im bergeordneten Homepage-Verzeichnis gespeichert. Ergnzen Sie deshalb den Link so: <a href="../index. html">. Verfahren Sie so auch bei allen folgenden Links. Wechseln Sie zur Seitendefinition bei Bild-Seite, und wiederholen Sie die nderung bei den Links. Speichern Sie das Profil, und beenden Sie das Dialogfeld. Erzeugen Sie die Galeriedateien erneut ber die Schaltflche Starten. Jetzt sind die Thumbnail- und Bildseiten ins normale Layout eingebunden, alle Links der Navigationsleiste funktionieren. Um die Galerieseite ber die Navigationsleiste zu starten, mssen Sie einen zustzlichen Link setzen. Wie Sie dabei vorgehen, zeigt der nchste Kursteil (2 Seite 72).
71
net Explorer rufen Sie den Menpunkt Datei, Importieren und exportieren auf. Die erste Seite des Import/Export-Assistenten verlassen Sie mit Weiter. HTML-Datei erstellen Im nchsten Schritt markieren Sie den Listeneintrag Favoriten exportieren und klicken auf Weiter. Nun whlen Sie in einer Baumstruktur den Favoriten-Ordner aus, den Sie exportieren wollen, und besttigen mit Weiter. Der Internet Explorer exportiert wahlweise direkt in die Favoritenliste des Netscape-Browsers. Um eine HTML-Datei zu erhalten, whlen Sie allerdings die Option In Datei oder Adresse exportieren. ber die Schaltflche Durchsuchen stellen Sie die Zieldatei ein. Den Vorgabewert BOOKMARK.HTM belassen Sie, und als Zielverzeichnis geben Sie Ihr HomepageVerzeichnis vor. Besttigen Sie mit der Schaltflche Speichern. Ein Klick auf Weiter und anschlieend auf Fertig stellen schliet den Export ab.
Grundkurs IV
Link-Liste anfertigen
Eine ordentliche Website braucht eine Liste mit Links. Wir zeigen, wie Sie diese ganz einfach aus dem Internet Explorer bernehmen. Das Beispielmaterial finden Sie auf der Heft-CD.
2. Sauber formatierte Links: Explorer-Export kopieren

Laden Sie nun mit Datei, Datei ffnen die aus dem Internet Explorer exportierte Datei BOOKMARK.HTM in Composer, wo Sie sie in einem zweiten Programmfenster sehen. Das Ganze sieht schn sauber formatiert aus, die Themengebiete sind als Zwischenberschriften eingefgt. Im Prinzip knnen Sie die Link-Liste direkt bernehmen. Markieren Sie mit der
Jeder Surfer sammelt eine mehr oder weniger umfangreiche Liste mit Favoriten. Wenn Ihre Favoriten-Liste bereits die Links enthlt, die Sie auf Ihrer Homepage integrieren mchten, haben Sie das Verlinken schon halb erledigt. Hier zeigen wir Ihnen, wie Sie eine Liste mit Favoriten aus dem Internet Explorer in Ihre Homepage bertragen und eine Sprungleiste mit internen Links einrichten, mit deren Hilfe sich die einzelnen Themengebiete schneller erreichen lassen.
an, und ziehen Sie die Favoriten per Drag & Drop in den jeweils passenden Ordner. Das geht im Explorer wesentlich schneller als spter in Composer und die Suche in der Favoritenliste ist auch einfacher. Im Inter-
Link auf eine andere Web-Seite

Einen Link auf eine andere Web-Seite Ihres Internet-Auftritts setzen Sie genauso leicht wie einen internen Link auf einen benannten Anker. Dazu ein praktisches Beispiel: Im dritten Teil dieses fnfteiligen Grundkurses (2 ab Seite 68) haben Sie ein Fotoalbum zusammengestellt. Es fehlt noch die Verbindung zwischen der bestehenden Fotoseite und der Galerie. Laden Sie zunchst die Web-Seite FOTOS.HTML in Composer. Lschen Sie den bekannten Baustellen-Text im Hauptbereich, und fgen Sie mit der <Return>-Taste eine Leerzeile ein. Anschlieend tragen Sie in der zweiten Zeile den Text ein, der spter als Link dienen soll, in unserem Beispiel Ausflug ins Grne, August 2003. Wenn Sie mehrere Fotoalben planen, sollten Sie die Links als Liste formatieren. Setzen Sie den Cursor irgendwo in den Text, und rufen Sie den Menpunkt Absatz, Liste, Auflistung auf. Um einen neuen Listenpunkt anzufgen, gehen Sie einfach ans Ende der Zeile und drcken <Return>. Markieren Sie jetzt den gesamten Text, und klicken Sie auf das Icon Verknpfung in der Symbolleiste. Im einzigen Eingabefeld tragen Sie den Namen der Zieldatei ein. Im Beispiel ist das THUMB-1.HTML. Diese Web-Seite liegt allerdings im Unterverzeichnis HTML_SCHATTEN. In das Eingabefeld tragen Sie deshalb html_schatten/thumb-1.html ein (ohne Anfhrungszeichen). Nach dem Schlieen des Dialogfelds ist der Link funktionsfhig.
1. Internet Explorer: Favoriten exportieren

Der Internet Explorer speichert die gesammelten Links unter dem Titel Favoriten. Sie mssen diese Favoriten nicht mhsam einzeln ber die Zwischenablage in Composer, den Web-Editor, den wir fr diesen fnfteiligen Grundkurs verwenden, bernehmen. Stattdessen exportieren Sie die Favoriten oder einen Teil davon als HTML-Datei. Es ist sinnvoll, die Favoriten gleich im Explorer nach Themen zu sortieren. Legen Sie fr jedes Thema einen neuen Ordner
72
P Grundlagen
pWorkshops
P Utilities
Grundkurs IV: Externe Links
Workshops
Stelle der Web-Seite, an der die Links des Themengebiets beginnen. Zunchst tragen Sie am Beginn des Hauptbereichs mit den Links die Themengebiete durch einen Bindestrich getrennt ein: Clubs Hndler Private Homepages Reisen. Das klingt einfacher, als es ist. Denn die Listendefinition beginnt direkt am Anfang der Zelle, und Composer lsst nicht zu, dass Sie die Schreibmarke vor der Markierung platzieNicht ohne Trick: Die verbleibende Leerzeile vor der ersten Zwischenberren. Also wechseln Sie wieschrift lschen Sie am besten im HTML-Modus (Punkt 2) der ber die Registerkarte in die Ansicht HTML-Quelle Tastenkombination <Strg>-<A> die gesamund suchen den ersten Tag <dl>. Unmitten Links inklusive berschrift, und rufen telbar davor sollte der Tag <td ... > stehen. Sie Bearbeiten, Kopieren auf (bezieFgen Sie zwischen beiden Tags mit der hungsweise <Strg>-<C>). Mit Datei, Datei <Return>-Taste eine Leerzeile ein, und tipffnen laden Sie jetzt die Datei pen Sie die Themenberschriften ein. LINKS.HTML aus Ihrem Website-Projekt. Anschlieend wechseln Sie ber die ReHier lschen Sie den bestehenden Baustelgisterkarte zurck in die Normalansicht. len-Text im Hauptbereich rechts. Dann fOben auf der Web-Seite sind jetzt in Grundgen Sie mit Bearbeiten, Einfgen die Linkschrift die Texte zu sehen. Liste aus der Zwischenablage ein; schneller 4. Interne Links setzen: gehts mit <Strg>-<V>. Anker als Sprungziel Die berschrift Bookmarks und die Bevor Sie die Wrter der Sprungleiste in nachfolgende Leerzeile sind berflssig. Links umwandeln, definieren Sie das Ziel Setzen Sie den Cursor vor die berschrift, fr die Links. Klicken Sie die erste Zwiund lschen Sie mit der Taste <Entf>, bis schenberschrift Clubs doppelt an, um nur noch die Leerzeile vorhanden ist. Diesie zu markieren. ses etwas umstndliche Verfahren stellt siNun rufen Sie den Menpunkt Einfcher, dass Sie nicht irrtmlich einen Teil gen, Benannter Anker auf. In einem Diader Listenformatierung mit lschen. Jetzt bleibt noch eine Leerzeile am Anfang vor der ersten Zwischenberschrift (2 Abbildung oben). Am einfachsten lschen Sie diese im HTML-Modus. Klicken Sie auf das Register HTML-Quelle unten im Composer-Fenster. Gehen Sie die HTML-Tags durch, bis Sie eine Zeile mit <dl> finden. Hier beginnt die Liste mit den Links. Die folgenden Zeilen bis zum Tag <h3> lschen Sie. Wechseln Sie ber die Registerkarte zurck in die Normalansicht die Leerzeile ist verschwunden.
logfeld geben Sie dem Anker einen Namen, als Vorgabewert trgt Composer den markierten Text ein. Den knnen Sie bernehmen und mit OK besttigen. Achten Sie aber darauf, dass der Text keine Leerzeichen und Sonderzeichen wie Umlaute enthlt und am Anfang keine Zahl steht. Weisen Sie nach diesem Schema auch den brigen Zwischenberschriften einen benannten Anker zu. In Composer ist jeder Anker mit einem gelben Ankersymbol markiert. Im Browser dagegen sind die Anker spter unsichtbar. Verknpfung Klicken Sie jetzt in der Sprungleiste den ersten Begriff Clubs zur Markierung doppelt an. Aus diesem Wort soll ein Link werden, der als Ziel den benannten Anker der entsprechenden Zwischenberschrift hat. Klicken Sie auf das Icon Verknpfung in der Symbolleiste. ffnen Sie die Auswahlliste, darin sind smtliche benannten Anker der Web-Seite aufgelistet. Stellen Sie das passende Ziel ein, und besttigen Sie danach mit OK. Wiederholen Sie die Aktion fr die anderen Links der Sprungleiste (2 Abbildung unten). Um die Links innerhalb der Web-Seite auszuprobieren, speichern Sie die Datei und ffnen sie mit dem Internet Explorer. Ein Klick auf einen der Links sorgt dafr, dass der Browser die Web-Seite bis zur jeweiligen Zwischenberschrift hochscrollt. Wenn Sie mchten, knnen Sie die Sprungleiste noch komplett markieren und dann ber den Menpunkt Absatz, Ausrichten, Zentriert in die Mitte stellen.
3. Leichtere Suche: Sprungleiste einfgen

Die Liste mit den Links kann ziemlich lang werden. Um leichter zu einem bestimmten Thema zu kommen, bauen Sie am Seitenanfang eine kleine Sprungleiste ein. Die Links fhren in diesem Fall direkt zu der
Sprungziel auswhlen: Whlen Sie im Dialogfeld Link-Eigenschaften einen benannten Anker als Ziel aus. Wiederholen Sie die Aktion anschlieend fr die anderen Links der Sprungleiste (Punkt 4)
73
Grundkurs V
Gstebuch erstellen
Ein Gstebuch rundet Ihre Website ab. Besucher knnen ihre Meinung loswerden und Beitrge von anderen durchstbern. Das Beispielmaterial finden Sie zum Nachbauen auf der Heft-CD.
befelder User und Passwort Ihre Daten ein und klicken auf Login. Sie befinden sich jetzt im Konfigurationsbereich Ihres Gstebuchs. Sie whlen die gewnschte Aufgabe ber die Navigationsleiste aus, rechts zeigt die Web-Seite eine kurze Erklrung zu den einzelnen Punkten. Klicken Sie zunchst auf die Schaltflche Layout. Neben der Farbe fr verschiedene Elemente legen Sie hier auch das Hintergrundbild der Web-Seite fr das Gstebuch fest. Dazu muss sich die Bilddatei bereits auf dem Webserver bei Ihrem Provider befinden. Wenn Sie die Website bereits hochgeladen haben, ist das der Fall. Der Grund: Das Script von 123gb.de holt sich das Bild direkt von Ihrem Webserver. Tragen Sie im Eingabefeld Hintergrundbild die komplette Web-Adresse des Bildes ein, also zum Beispiel http://<www. domain.de>/<muster.gif>. Statt <www.do main.de> verwenden Sie die Web-Adresse Ihrer Homepage, statt <muster.gif> den Dateinamen Ihres Hintergrundbildes. Anschlieend klicken Sie am Ende der WebSeite auf die Schaltflche Speichern. Um das Gstebuch auszuprobieren, ffnen Sie ein zweites Browser-Fenster. Tippen Sie zum Aufruf des Gstebuchs die WebAdresse ein, die Sie in der Besttigungsmail finden. Das Gstebuch zeigt einen Eintrag und Ihr Hintergrundbild.
2. Eigenes Layout kopieren: Header und Footer festlegen

ten Anbieter ein Werbebanner ein. Achten Sie daher im eigenen Interesse darauf, dass es sich um serise Angebote handelt. Bei www.kostenlos.de finden Sie in der Rubrik Internet, Homepage-Tools eine ganze Reihe entsprechender Anbieter. Fr das Beispiel haben wir uns fr www.123gb.de entschieden. Das Gstebuch lsst sich sehr vielfltig anpassen, und fr fnf Euro pro Jahr werden Sie auch die Werbung los. Klicken Sie jetzt auf Sonstige Einstellungen. Fr das Layout interessieren vor allem die Eingabefelder Header und Footer (2 Abbildung rechte Seite oben). Hier tragen Sie den HTML-Code ein, den das Gstebuch am Anfang beziehungsweise am Ende einfgen soll. Damit stlpen Sie sozusagen das Layout Ihrer Website ber das Gstebuch auf dem fremden Server. Dieselbe Technik kommt brigens bei der Fotogalerie in Teil III dieses Grundkurses zum Einsatz (2 ab Seite 68). Laden Sie in Composer mit Datei, Datei ffnen GAESTEBUCH.HTML. Wechseln Sie ber die Registerkarte HTML-Quelle die Ansicht. Suchen Sie die Stelle, die unmittelbar auf die schlieende spitze Klammer des <body>-Tags folgt. Die Stelle sollte mit <table beginnen. Markieren Sie ab dieser Stelle den Text bis zur Tabellenzelle, die den Haupttext der Web-Seite enthlt. Im Beispiel beginnt dieser Text mit <b>Baustelle:. Rufen Sie den Menbefehl Bear-
Im fnften und letzten Teil des Homepage-Grundkurses, in dem wir Schritt fr Schritt den Bau einer einfachen Website erklren, erhlt Ihre Web-Prsenz mit dem Gstebuch ein interaktives Feature. Davon haben nicht nur Ihre Besucher etwas, sondern auch Sie: Sie bekommen Feedback zu Ihrem Web-Auftritt und knnen diesen weiter verbessern und den Wnschen der Gste entsprechend anpassen. Damit ein Gstebuch funktioniert, bentigen Sie ein CGI-Script auf dem Webserver (2 Seite 44). Es muss die neuen Kommentare entgegennehmen und in die Liste der Gstebucheintrge aufnehmen. Wenn Ihr Provider keine eigenen Scripts erlaubt oder Sie nicht programmieren knnen: kein Problem! Binden Sie einfach ein fertiges Gstebuch ein, das viele Anbieter sogar kostenlos zur Verfgung stellen. Das Script luft dann auf dem Server des Anbieters. Zur Finanzierung blenden die meis-
1. Hintergrundbild: Die Datei muss online sein

Auf der Startseite von 123gb.de klicken Sie auf Anmelden und fllen dann die gewnschten Eingabefelder aus. Wichtig sind dabei vor allem der Benutzername, das Passwort und die Mailadresse. Mit Gstebuch einrichten schlieen Sie den Vorgang ab. Nach kurzer Zeit erhalten Sie eine Besttigungsmail. Unter der Navigationsleiste von 123gb.de tragen Sie in die Einga-
74
P Grundlagen
pWorkshops
P Utilities
Grundkurs V: Gstebuch
Workshops
wir zu einem Trick: Setzen Verknpfung in der Symbolleiste. LSie die Schreibmarke im schen Sie im Eingabefeld GAESTEBUCH. Eingabefeld Header ganz HTML, und tragen Sie den Link zum 123gb. an den Anfang, und fgen de-Gstebuch ein. Diese Prozedur mssen Sie mit der <Return>-Taste Sie auf allen Web-Seiten durchfhren. eine Leerzeile ein. In diese 4. Verwaltung: Kommentare Leerzeile tragen Sie <body freigeben und lschen topmargin="0" leftmargin Als Verwalter des Gstebuchs sind Sie auch ="0"> ein. Das ist laut HTMLfr den Inhalt verantwortlich. StandardmStandard nicht erlaubt, ig schickt Ihnen der Webserver deshalb jefunktioniert aber zuminden neuen Eintrag als Mail zu. Um einen dest mit dem Internet ExEintrag zu lschen, loggen Sie sich auf der plorer und mit Opera, allerLayout kopieren: In die Eingabefelder Header und Footer fgen Sie den dings nicht mit Mozilla/NetHomepage von 123gb.de mit BenutzernaHTML-Code aus Ihrer Web-Seite ein (Punkt 2) me und Passwort ein. Klicken Sie auf die scape. Benutzer der letztgeSchaltflche Eintrge eine Liste zeigt nannten beiden Browser beiten, Kopieren auf. Wechseln Sie nun dann alle Eintrge des Gstebuchs an. knnen das Gstebuch trotzdem problemzurck zum Web-Browser, und klicken Sie ber die Links rechts neben jedem Einlos nutzen. Schlieen Sie die Eingabe wiedas Eingabefeld Header an. Mit dem trag fgen Sie einen Kommentar hinzu, der mit der Schaltflche Speichern ab. Menpunkt Bearbeiten, Einfgen oder verndern den Eintrag oder lschen ihn der Tastenkombination <Strg>-<V> fgen (2 Abbildung unten). ber die Rubrik Gstebuch mit Website verknpfen Sie den HTML-Code ein. Sonstige Einstellungen lsst sich die MailUm das Gstebuch mit Ihrer Website zu Wechseln Sie zurck zu Composer, und benachrichtigung abstellen. In diesem Fall verknpfen, laden Sie die Seite GAESTEmarkieren Sie hinter dem Haupttext ab mssen Sie das Gstebuch im Browser aufBUCH.HTML in Composer. Lschen Sie den dem schlieenden Tag der Zelle (</td>) alrufen, um neue Eintrge zu sehen. Baustellen-Text, und tippen Sie stattdessen les bis vor den Tag </body> am Ende der Wenn Sie nicht wollen, dass neue Eineinen Text ein wie Tragen Sie sich in unser Datei. Kopieren Sie diese Zeichen wie betrge sofort verffentlicht werden, klicken Gstebuch ein .... Markieren Sie das Wort schrieben in das Eingabefeld Footer im Sie in der Navigationsleiste auf SicherGstebuch im Composer, und klicken Sie Browser. Dann klicken Sie am Ende der heit. Stellen Sie die Option Gstebuch das Icon Verknpfung in der SymbolleisWeb-Seite auf die Schaltflche Speichern. moderieren auf Ja ein. Von nun an mste an. Tragen Sie im Eingabefeld den Link sen Sie neue Eintrge persnlich freischalzum Start des Gstebuchs aus der Bestti3. Logo: Direkt von Ihrem ten. Dazu erhalten Sie eine Mail mit dem gungsmail von 123gb.de ein fertig. Webserver laden Text des Eintrags und zwei Links zum VerAlternativ passen Sie die NavigationsWenn Sie das Gstebuch jetzt zur Kontrolwerfen oder Freigeben. Nun viel Spa beim leiste an: Setzen Sie die Schreibmarke auf le aufrufen, sieht das Ergebnis schon ganz Nachbauen unserer Beispiel-Website! das Wort Gstebuch, und klicken Sie auf gut aus. Allerdings fehlt das Logo links oben. Das ist nicht verwunderlich, denn der HTML-Code sucht die Bilddatei auf dem Webserver von 123gb.de. Und dort ist sie natrlich nicht vorhanden. Klicken Sie auf der Konfigurationsseite von 123gb.de auf Sonstige Einstellungen. Im Eingabefeld Header ist im HTML-Code auch der Tag <img ...> enthalten, der das Bild einbindet. Suchen Sie nach diesem Tag und dem Attribut src="logo.gif" darin (selbstverstndlich kann der Dateiname bei Ihnen anders lauten). Ergnzen Sie den Dateinamen wie in 2 Punkt 1 beim Hintergrundbild zu einer kompletten Web-Adresse, also etwa http:// <www.domain.de>/<logo.gif>. Jetzt strt noch der Rand auf der linken und oberen Seite, wie Sie es bereits aus Kursteil II kennen (2 ab Seite 64). In der Konfiguration gibt es keine MgGstebuch verwalten: ber die Konfigurationsseite bei www.123gb.de, dem Anbieter, dessen Gstebuch wir auf lichkeit, Attribute fr den Tag <body> anunserer Beispiel-Website einsetzen, lschen oder kommentieren Sie jeden Eintrag (Punkt 4) zugeben. Um das Problem zu lsen, greifen
75
Das entspricht dem Standardaufbau einer Web-Seite. Der fr Javascript relevante Teil ist nur fnf Zeilen lang. Das Attribut type= "text/javascript" im einleitenden <script>Tag legt fest, dass das Script die Sprache Javascript benutzt. Das ist praktisch immer der Fall, es gibt aber noch andere Sprachen wie VB-Script beim Internet Explorer. In lteren Web-Seiten finden Sie statt des typeAttributs oft die Angabe language="Java Script". In den Anfangstagen von HTML war das die gltige Schreibweise, sie funktioniert auch heute noch. Eine Zeile sagt alles Wie bei HTML spielen Zeilenumbrche keine Rolle. So knnen Sie ein Javascript ordentlich formatieren und zu lange, unbersichtliche Zeilen vermeiden. Eine Zeile endet immer mit einem Strichpunkt. Das Script selbst besteht nur aus einer Zeile: document bezieht sich auf die aktuelle Web-Seite, die der Browser gerade anzeigt. Und write sorgt dafr, dass der Browser an dieser Stelle der Web-Seite den in Klammern angegebenen Text schreibt. Sobald der Browser beim Einlesen des HTML-Quelltextes an dieser Stelle angekommen ist, arbeitet er das Script ab. Dadurch mischen Sie normalen Text auf der Web-Seite mit den Ausgaben von Javascript.
Javascript: So gehts
Javascript sorgt fr Effekte auf Ihrer Homepage. Falls Sie Scripts nicht selber programmieren mchten, holen Sie sich fertige aus dem Internet. Die Workshop-Beispiele finden Sie auf der Heft-CD.
Javascript ist eine einfache Programmiersprache, die Ihre Homepage intelligent macht. Sie knnen sie fr simple Effekte nutzen, etwa um das aktuelle Datum und die Uhrzeit auf Ihrer Website anzeigen zu lassen. Aber auch ganze Spiele wie Javascript-Schach (2 Abbildung oben) lassen sich mit Javascript realisieren. Im Internet gibt es zahlreiche fertige Scripts zum Download (2 Kasten Hier bekommen Sie fertige Scripts). Dieser Artikel zeigt Ihnen, wie Sie fertige Scripts an den richtigen Stellen in Ihren HTML-Code einbauen und kleinere Modifikationen vornehmen. Wenn Sie mit HTML-Tags nicht klarkommen, hilft ein Blick in den Grundlagen-Artikel 2 ab Seite 34.
untersttzen Javascript. Das Programm ist mit den Tags <script> und </script> eingefasst. Ein klassisches Beispiel zum Erlernen einer Programmiersprache ist das Hello-World-Programm. Es hat nur eine Aufgabe: den Text Hello World! am Bildschirm auszugeben (2 Abbildung unten). Gleich das komplette Beispiel:
2. Kommentarzeichen: Das Script verstecken

Diese eine Scriptzeile ist als Kommentar markiert:  weist ltere Browser ohne Javascript-Untersttzung an, diesen Text zu ignorieren. Wrde diese Angabe fehlen, wrde der Browser das Script als Text auf der Web-Seite ausgeben. Moderne Browser begehen solche Fehler nicht, es macht also in der Praxis auch nichts, wenn
<html> <head> <title>JavaScript minimal</title> </head> <body> JavaScript sagt: <script type="text/ javascript"> <!-document.write ("Hello World!"); //--> </script> </body></html>
1. Das erste Programm: Hello World!

Lernen Sie am besten ohne lange theoretische Erklrungen anhand eines Beispiels: Javascript-Programme tragen Sie direkt in den HTML-Text einer Web-Seite ein. Alle wichtigen Browser von Netscape/Mozilla ber den Internet Explorer bis zu Opera
Klassisch: Ein Beispiel zum Erlernen einer Programmiersprache ist das Hello-World-Programm (Punkt 1)
76
P Grundlagen
pWorkshops
P Utilities
Javascript
3. Event-Handler: Script auf Mausklick

Grundstzlich ist es egal, an welcher Stelle des HTMLQuelltextes Sie das Script einbauen. Es drfen auch mehrere Scripts ber den Quelltext verteilt vorkommen. Der Browser fhrt Event-Handler: Sie sorgen dafr, dass ein Script nicht gleich beim Laden dann die Scripts jeweils aus, der Web-Seite aktiv wird, sondern erst nach einer Aktion (Punkt 3) wenn er an der entsprechenden Stelle in der HTMLSie den Kommentar weglassen. Die SchreibDatei angekommen ist. Wollen Sie nicht, weise hat sich aber eingebrgert. dass ein Script gleich beim Laden der WebInnerhalb des Scripts sind ebenfalls Seite aktiv wird, verwenden Sie EventKommentare erlaubt. Den Beginn markieHandler (auf Deutsch in etwa Ereignisrouren Sie mit /*, das Ende passend dazu mit tine). In einem normalen HTML-Tag wie */. Geht es nur um einen einzeiligen Kom<input type=button mentar, so beginnen Sie mit //. Das wirkt value="Klick mich!"> bis zum Zeilenende, ein Abschlusszeichen ist nicht erforderlich. fgen Sie einen Event-Handler ein: onClick=alert ("Angeklickt!"). Der Tag erzeugt Verschiedene Kommentarzeichen eine Schaltflche. Sobald jemand die Warum gibt es zwei verschiedene KomSchaltflche anklickt, zeigt der Javascriptmentarzeichen? Die Variante  ist Befehl alert im Browser ein Dialogfeld im HTML-Standard festgelegt. Viele Anwenmit dem Text Angeklickt! (2 Bild oben). der gebrauchen diese Zeichen auch in HTML 4.0 definiert eine ganze Reihe von Scripts, die Browser akzeptieren das stillEvent-Handlern. Im 2 Kasten Javascript schweigend. Im Javascript-Standard gelten starten: Event-Handler finden Sie eine Lisdagegen /* und */ sowie //. te der Handler, der auslsenden Aktionen Moderne Browser wie der Internet Exund der HTML-Tags, in denen sie erlaubt plorer 6 und Mozilla/Netscape 7 erlauben sind. Sehr beliebt ist es zum Beispiel, ein innerhalb des Scripts nur noch diese JaScript im Hintergrund beim Laden der vascript-Kommentarzeichen. Am Anfang Web-Seite zu starten. Dazu ist in den Tag und Ende des Scripts ist aber weiterhin die <body> der Handler onload="" eingefgt. HTML-Variante  erlaubt.
Inhalt
Seite
1. Das erste Programm: Hello World! 2. Kommentarzeichen: Das Script verstecken 3. Event-Handler: Script auf Mausklick 4. Hyperlink: Script statt Web-Seite 5. Eigene Funktionen: Befehle zusammenfassen 6. Fertige Scripts: Zuerst analysieren 7. Javascript gefunden: Texte kopieren 8. Inhalt anpassen: Nachrichten ndern Ksten: Hier bekommen Sie fertige Scripts Javascript starten: Event-Handler
76 76 77 77 77 78 78 78
77 79
4. Hyperlink: Script statt Web-Seite

Es gibt noch eine weitere Methode, um Scripts durch eine Aktion des Web-SeitenBesuchers aufzurufen. Bei einem normalen Link geben Sie als Verweisziel zum Beispiel Folgendes an:
<a href="javascript:alert ("Verweisziel noch nicht verfgbar!")"> Ein Link </a>

Damit zeigt der Browser beim Anklicken des Verweises das Dialogfeld mit dem Text. Statt des Textes Ein Link drfen Sie natrlich auch ein Bild als Link definieren.
Hier bekommen Sie fertige Scripts

Im Internet gibt es eine Vielzahl fertiger Javascripts, die Sie gratis in Ihre eigene Homepage einbauen knnen. Das ist oft viel einfacher, als selbst ein Script zu entwickeln. Mit dem Grundwissen aus diesem Artikel haben Sie den Einbau der Scripts und kleine Anpassungen im Griff. Fr Anwender, die weiter in Javascript einsteigen mchten, ist das Tutorial SelfHTML empfehlenswert (http://selfhtml.teamone.de). Name der Website Dr. Web Gatescript Javascript City Javascripts Java Script Station Javatop.de Pigasus Scriptindex.de The Javascript Source Internet-Adresse www.drweb.de/javascript www.gatescript.com www.javascriptcity.com http://webdeveloper.earthweb.com/webjs www.javascriptstation.com www.javatop.de www.pigasus.de www.scriptindex.de www.javascript.com
5. Eigene Funktionen: Befehle zusammenfassen

Weil es ziemlich unbersichtlich und umstndlich ist, hinter einem Event-Handler ein lngeres Script anzufgen, drfen Sie eigene Funktionen definieren. Eine Funktion besteht aus mehreren Javascript-Befehlen, die Sie unter einem Namen zusammenfassen. Spter fgen Sie in den EventHandler oder in ein Script nur den Funktionsnamen ein, damit alle Befehle abgearbeitet werden. Auch eine Funktion knnen Sie irgendwo in der HTML-Datei notieren. Am sichersten ist es aber, die Funktion zwischen <head> und </head> einzubauen. Dann knnen Sie sie an beliebiger Stelle im HTML-Code aufrufen. Beachten Sie: Die Befehle in einer Funktion fhrt der Browser nicht automatisch aus. Sie mssen eine
77
Javascript
P Grundlagen
pWorkshops
P Utilities
<form> <input type=" button" value="Quadrat von 7 berechnen" onClick=alert (Quadrat(7))> </form>
Natrlich muss nicht jede Funktion Quadrat: Hier hat die Funktion Quadrat das Ergebnis fr 7 gelieFunktion einen Rckgabefert, das die Alert-Dialogbox ausgibt (Punkt 5) wert haben; lassen Sie einfach return weg. Auch PaFunktion zum Beispiel ber einen Eventrameter sind keine Pflicht, Sie mssen aber Handler ausdrcklich starten. Die Definitiimmer die leeren Klammern () angeben. on einer eigenen Funktion, die eine Zahl Innerhalb einer Funktion ist der Aufruf anmit sich selbst multipliziert, sieht so aus: derer Funktionen erlaubt.
und suchen Sie nach dem Start der Funktion durch einen Event-Handler oder einen Javascript-Link. Bei langen HTML-Dateien hilft die Suchfunktion des Editors, der Sie den Namen der Funktion bergeben.
7. Javascript gefunden: Texte kopieren

Nun bertragen Sie den Scriptbereich in Ihre eigene HTML-Datei. Markieren Sie einschlielich der Zeile <script> bis zum abschlieenden </script> den gesamten Text, und rufen Sie Bearbeiten, Kopieren auf. Wechseln Sie anschlieend zu Ihrem Web-Editor, und schalten Sie ihn in den HTML-Modus. Bei Netscape/Mozilla Composer nutzen Sie dazu die Registerkarten am unteren Fensterrand. Funktionen fgen Sie am besten im Kopfbereich zwischen <head> und </head> ein. Javascript-Befehle ohne Funktionsklammern wirken sofort beim Laden der Web-Seite. Hier mssen Sie sich berlegen, an welcher Stelle Ihrer Web-Seite die Ausgabe erfolgen soll. Im Beispiel enthlt das Script zwar Funktionen, aber auch Befehle auerhalb von Funktionen. Das Script erzeugt ein Eingabefeld, in dem der gewnschte Text durchluft. Aus diesem Grund fgen Sie den Scriptbereich an derjenigen Stelle Ihrer Web-Seite ein, an welcher der Nachrichtenticker erscheinen soll.
<script type="text/ javascript"> <!-function Quadrat(Zahl) { /* Quadrat berechnen */ Ergebnis = Zahl*Zahl; return Ergebnis; } //--> </script>
Das Schlsselwort function teilt dem Browser mit, dass die folgenden Zeilen eine Funktion definieren. Darauf folgt der Name der Funktion, im Beispiel Quadrat. Danach stehen in runden Klammern die Parameter, die die Funktion beim Start erhlt. Im Beispiel muss die Funktion natrlich wissen, welche Zahl sie quadrieren soll. Sie bergeben der Funktion Quadrat die Variable Zahl. Die Namen fr die Funktion und die Variable sind brigens beliebig, meist nutzen Programmierer aber aussagekrftige lngere Namen. Beliebige Verwendung Die geschweiften Klammern { und } schlieen in Javascript immer einen Anweisungsblock ein. Der Programmcode selbst interessiert uns hier nicht weiter. Er multipliziert im Beispiel Zahl mit sich selbst und speichert das Resultat in der Variablen Ergebnis. Anschlieend macht return Ergebnis den Inhalt dieser Variablen zum Rckgabewert der Funktion. Diese Funktion verwenden Sie an beliebiger Stelle und beliebig oft in der Web-Seite. Beispielsweise mit dem Event-Handler onClick= einer Schaltflche:
6. Fertige Scripts: Zuerst analysieren
Spielen Sie an einem Beispiel durch, wie Sie ein fertiges Script in Ihre Homepage einbauen. Ein Nachrichtenticker soll auf der Startseite aktuelle Meldungen hervorheben. Bei einer Vereinsseite knnte das der Termin der Weihnachtsfeier sein oder ein Hinweis auf eine neue Rubrik. Bei Javatop.de (www.javatop.de) gibts das fertige Script gratis unter der Rubrik Diverses als Newsticker. Klicken Sie den Link an, so erscheint im linken Bereich eine Demoseite mit dem Script. Um das Script zu kopieren, rufen Sie beim Internet Explorer mit der rechten 8. Inhalt anpassen: Maustaste das Kontextmen auf und Nachrichten ndern whlen den Eintrag Quelltext anzeigen. Haben Sie das Script in Ihre Homepage einEs erscheint der normale Windows-Editor gefgt, sollten Sie einen ersten Testlauf starmit der geladenen HTML-Datei. ten. Damit stellen Sie sicher, dass die berScrollen Sie im Editor nach unten, bis tragung im Prinzip funktioniert hat. Erst Sie die Zeile finden, die mit <script...> beginnt. Meistens enthalten die ersten Zeilen des Scripts einen Kommentar, der die Verwendung und Anpassung beschreibt. Sonst mssen Sie sich selbst auf die Suche machen. Sind bis zum abschlieenden </script> nur Funktionen enthalten, so wird das Script an anderer Stelle in der HTML-Datei gestartet. Das gilt auch, wenn sich der Scriptbereich komplett innerhalb des Kopfbereichs zwischen <head> und </head> befindet. Gehen Sie die restli- Newsticker: Dieses Script, zu finden etwa unter www.javatop.de, erzeugt chen HTML-Befehle durch, ein Eingabefeld, in dem der gewnschte Text durchluft (Punkte 6 bis 8)
78
P Grundlagen
pWorkshops
P Utilities
Javascript
Ticker bertragen: Markieren Sie den Scriptbereich, und fgen Sie das Script an der Stelle Ihrer Web-Seite ein, an der die Ausgabe erfolgen soll
danach machen Sie sich an die Anpassung. Im Nachrichtenticker-Beispiel ist es natrlich sinnvoll, den angezeigten Text zu ndern. Blttern Sie im Scriptbereich bis zur Zeile "tl=new textlist". In den folgenden Zeilen stehen in Anfhrungszeichen die Texte, die der Ticker nacheinander erscheinen lsst. Die Anfhrungszeichen sind unbe-
dingt notwendig, damit der Browser die Zeichenketten erkennt. ndern Sie die Texte nach Belieben. Wenn Sie mehr oder weniger Texte bentigen, lschen Sie einfach Textzeilen oder fgen welche ein. Sie mssen nur darauf achten, dass die Zeilen jeweils am Ende durch ein Komma getrennt sind (mit Ausnahme der letzten Zeile). Wenn Sie wollen, verndern Sie auch die Wartezeiten zwischen der Anzeige der einzelnen Texte oder die Gestaltung der Ausgaben. Die Kommentare im Script weisen Ihnen den Weg.
Javascript starten: Event-Handler

Wenn Sie nicht wollen, dass ein Script gleich beim Laden der Web-Seite aktiv wird, verwenden Sie so genannte Event-Handler. HTML 4.0 definiert eine ganze Reihe von Event-Handlern, die durch unterschiedliche Aktionen aktiviert werden. Die Tabelle unten listet die Handler, die auslsende Aktion und die HTML-Tags, in denen sie erlaubt sind, auf. Ein einfaches Beispiel: Fgen Sie in einen normalen HTML-Tag wie <input type=button value="Klick mich!"> den Event-Handler onClick=alert ("Angeklickt!") ein, erzeugt das Tag eine Schaltflche. Sobald ein Anwender die Schaltflche anklickt, zeigt der Javascript-Befehl alert im Browser ein Dialogfeld mit dem Text Angeklickt! (2 Beispieldatei handler.htm auf C Heft-CD).
Handler onBlur= onChange= onClick= Erklrung Beim Verlassen eines Elements Wert eines Elements ndert sich Beim Anklicken mit der Maus Erlaubt in <a>, <area>, <button>, <input>, <label>, <select>, <textarea> <input>, <select>, <textarea> <a>, <abbr>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <field set>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <no frames>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var> wie onClick= wie onBlur= wie onClick= wie onClick= wie onClick= <frameset>, <body> wie onClick= wie onClick= wie onClick= wie onClick= wie onClick= <form> <input>, <textarea> <form> <body>, <frameset>
onDblClick= onFocus= onKeyDown= onKeyPress= onKeyUp= onLoad= onMouseDown= onMouseMove= onMouseOut= onMouseOver= onMouseUp= onReset= onSelect= onSubmit= onUnLoad=
Beim Doppelklick mit der Maus Beim Selektieren des Elements Beim Drcken einer Taste Beim Drcken und anschlieenden Loslassen einer Taste Beim Loslassen einer Taste Beim Laden der Web-Seite Bei gedrckter Maustaste Beim Bewegen der Maus Wenn die Maus den Elementbereich verlsst Wenn die Maus den Elementbereich erreicht Beim Loslassen der Maustaste Beim Zurcksetzen eines Formulars Beim Selektieren von Text Vor dem Abschicken eines Formulars Beim Verlassen einer Web-Seite oder eines Framesets
79
2. Bereiche bearbeiten: Div und Span

Eine CSS-Deklaration ist an einen HTMLTag gebunden. Daher gibt es in HTML zwei besondere Tags <div> und <span> , die beide nur dazu dienen, Bereiche fr CSS zu markieren. <div> entspricht dem normalen Absatz-Tag: Vorher und nachher macht der Browser automatisch einen Zeilenumbruch. Mit <span> markieren Sie ein einzelnes Wort oder auch mehrere im Flietext (2 Abbildung rechte Seite oben), es gibt dadurch keinen Umbruch. Haben Sie den gewnschten Text mit <span> markiert, knnen Sie ihn danach per CSS formatieren. Das Beispiel formatiert den ganzen <div>-Absatz mit einer Schriftgre von 20 Punkt und einem Zeilenabstand von 30 Punkt. Zwei Abschnitte im Text haben eine blaue 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>
Web-Seiten mit Style

Cascading Stylesheets sind Stilvorlagen fr die Homepage. Sie geben Ihren Web-Seiten den letzten Schliff und vereinfachen die Pflege. Das Workshop-Material finden Sie auf der Heft-CD.
3. Stylesheet-Bereich einrichten
Wenn Sie die CSS-Deklaration direkt in den HTML-Tag einfgen, verschenken Sie etwas. Besser ist es nmlich, die Deklarationen gesammelt an den Anfang der HTML-Datei zu schreiben. Die Angaben gelten dann fr die gesamte Web-Seite. Wenn Sie etwas ndern wollen, mssen Sie nur eine Stelle bearbei-
Mit Cascading Stylesheets kurz: CSS steuern Sie die Gestaltung Ihrer Web-Seiten genauer als mit HTML. Zudem drfen Sie den Zeilenabstand ndern, die Hintergrundfarbe einzelner Wrter regeln oder die erste Zeile in einem Absatz einrcken. Haben Sie eine CSS-Regel einmal am Anfang der HTML-Datei definiert, gilt die Regel fr die ganze Web-Seite. Noch besser: Sie lagern die CSS-Angaben in eine Extradatei aus, die alle Seiten Ihrer Web-Prsenz gemeinsam nutzen. Eine nderung in der CSS-Datei wirkt dann auf alle Web-Seiten.
Eigenschaft und den Wert trennen Sie durch einen Doppelpunkt, ein Strichpunkt am Ende schliet die Deklaration ab. Im einfachsten Fall fgen Sie die CSS-Deklaration direkt in den HTML-Tag ein: <p style="color: green;"> Textabsatz .... </p> Mit dem Attribut style geben Sie die CSSDeklaration in Anfhrungszeichen an. Damit frbt der Browser alle Texte zwischen <p> und </p> ein. (Grundlagen-Infos zu HTML finden Sie 2 ab Seite 34.) Sie drfen mehrere CSS-Deklarationen in einem style-Attribut angeben (mit Strichpunkt getrennt). Das folgende Beispiel ergibt eine Schrift von 18 Punkt in grner Farbe: <p style="color: green; font-size: 18pt;">
Bequem: CSS-Programme
Wenn Sie CSS-Regeln nicht in einem TextEditor tippen wollen, greifen Sie zu einer Software, die Ihnen hilft. Die CSS-Eigenschaften und die erlaubten Werte whlen Sie ber Dialogfelder aus. Sie mssen also nur wissen, was Sie erreichen wollen, der CSS-Editor kennt die passenden Eigenschaften. Weil CSS-Format und HTMLDateien getrennt sind, mssen Sie fr eine nderung im Editor nur die CSS-Datei anpassen. Ein guter Tipp ist der kostenlose Morphon CSS-Editor 1.3.6 fr Java-fhige Betriebssysteme wie Windows, dessen Bedienerfhrung sehr bersichtlich ist (nhere Infos zum Tool 2 Seite 123).
1. CSS im HTML-Tag
Sie fgen eine CSS-Eigenschaft und den gewnschten Wert in HTML ein. Fr die Farbe nennt sich die Eigenschaft color. Erlaubt sind wie in HTML Farbnamen (zum Beispiel red fr rot) oder RGB-Zahlenangaben (etwa #0000FF fr blau). Eine vollstndige CSS-Deklaration sieht so aus: color: blue; (ohne Anfhrungszeichen). Die
80
P Grundlagen
pWorkshops
P Utilities
Workshops PpP S. 80 S. 83
wird bersichtlicher, wenn Sie jede Deklaration in eine eigene Zeile schreiben. <style type="text/ css"> p { font-family: sans-serif; font-size: 9pt; text-indent: 5mm; text-align: justify; } </style>
Inhalt 1. CSS im HTML-Tag 2. Bereiche bearbeiten: Div und Span 3. Stylesheet-Bereich einrichten 4. Selektoren und Deklarationen 5. Einzelne Elemente formatieren 6. Individuelle Klassen 7. CSS-Regeln in Extradatei auslagern 8. Praktischer Einsatz 9. Links einfrben Ksten: Bequem: CSS-Programme Initial am Satzanfang
Seite
80 80 80 81 81 81 83 83 83
Markant: Mit dem Tag <span> markieren Sie Bereiche fr eine besondere Formatierung mit Cascading Stylesheets (Punkt 2)
80 83
ten. Dazu definieren Sie im Kopf der HTMLDatei einen Stylesheet-Bereich: <head> <style type="text/css"> h1 {color: red;} </style> </head> Das Tag-Paar <style> und </style> schliet den Bereich ein. Alles dazwischen interpretiert der Browser nicht als Text oder HTML-Tag, sondern als CSS-Angaben. Das Beispiel enthlt die CSS-Deklaration color: red. Sie ist in geschweifte Klammern eingefasst, davor steht ein Selektor. Er sagt dem Browser, auf welche Teile der Web-Seite der Browser die CSS-Angaben anwenden soll. h1 im Beispiel bedeutet, dass der Browser alle berschriften erster Ordnung (die mit dem Tag <h1> markiert sind) im Dokument rot einfrben soll. Selektor und CSS-Deklaration zusammen nennt man CSS-Regel.
Die CSS-Regel bewirkt, dass Abstze (Tag <p>) eine Schriftart ohne Serifen mit 9 Punkt Gre haben. Die dritte CSS-Angabe text-indent rckt die erste Zeile im Absatz um 5 Millimeter ein allein mit HTML wre dieser Effekt viel umstndlicher zu realisieren (mit einer unsichtbaren Grafik als Platzhalter). text-align: justify sorgt schlielich fr Blocksatz, also einen sauberen linken und rechten Rand beim Text (2 Abbildung unten).
Sie in jedes HTML-Attribut ein, das roten Text haben soll. Dabei muss es sich nicht unbedingt um eine berschrift handeln.
6. Individuelle Klassen
Wenn Sie mit CSS und dem Klassenselektor arbeiten, mssen Sie gut planen. Sonst sind hinterher grere nderungen genauso umstndlich wie mit HTML-Attributen. Denken Sie sich etwa folgenden Fall: Sie haben ein CSS-Format .rot definiert und wenden es per class-Attribut auf berschriften und einzelne Wrter im Text an. Wollen Sie spter die Farbe der berschriften verndern und passen dazu die CSS-Regel am Datei-Anfang an, beeinflusst das auch alle anderen Stellen mit class=rot. Daher ist es im Beispiel sinnvoll, von Anfang an zwei CSS-Regeln fr rote berschriften und rote Textstellen zu definieren, beispielsweise .rotH und .rotText. Beachten Sie auerdem, dass in den Klassennamen ausschlielich die Buchstaben a-z und A-Z erlaubt sind, nicht jedoch Zahlen oder Sonderzeichen. Damit Sie bei vielen Klassenselektoren den berblick nicht verlieren, drfen Sie Kommentare einfgen. Ein Kommentar be-
5. Einzelne Elemente formatieren

Fr Flle, in denen man nicht alle Abstze einheitlich gestalten, sondern bestimmte Abstze besonders hervorheben will, kennt CSS auer dem Tag-Selektor (2 Punkt 4) den Klassenselektor. Dafr ndern Sie eine CSS-Regel ein wenig ab: .rot {color: red;} Entscheidend ist der Punkt am Beginn der Zeile, er ist zwingend ntig. Diese CSS-Regel hat keinen Hinweis, welche Tags der Browser so formatieren soll. Deshalb mssen Sie selbst die betroffenen Tags markieren: <h1 class="rot">Text</h1>
4. Selektoren und Deklarationen

In vielen Fllen werden Sie auf unterschiedliche HTML-Tags eine CSS-Deklaration anwenden wollen. Statt mehrere komplette CSS-Regeln einzutippen, tragen Sie einfach alle HTML-Tags als Selektor ein: h1, h2, h3, h4, h5, h6 {color: red;} Damit erfassen Sie alle berschriften von <h1> bis <h6> und frben sie rot ein. Sie drfen auch andere Tags so kombinieren, etwa <p>, <table> und <div>. hnlich gehen Sie vor, wenn Sie mehrere CSS-Deklarationen einem Selektor zuweisen wollen. Trennen Sie die einzelnen Angaben durch einen Strichpunkt. Der Quelltext
Damit ist auch klar, warum es Klassenselektor heit. Sie fgen in den Tag das Attribut class ein und geben als Wert in Anfhrungszeichen den Namen des Klassenselektors an, im Beispiel rot (ohne den Punkt am Anfang). Der Browser wei nun, dass er die berschrift mit der CSS-Deklaration color: red formatieren soll. Neue Effekte: ber eine globale CSS-Regel sind Abstze eingerckt und im Das class-Attribut fgen Blocksatz dargestellt. Allein mit HTML wre das umstndlicher (Punkt 4)
81
P Grundlagen
pWorkshops
P Utilities
Workshops PPp S. 80 S. 83
Windows 2000 und XP im Startmen unter Programme, Zubehr. Die erste CSSRegel betrifft das Hintergrundbild. Sie bentigen also einen Tag-Selektor, der sich auf den Tag <body> bezieht. Die CSS-Eigenschaft fr das Hintergrundbild ist Extra: In einer ausgelagerten CSS-Datei werden die Einstellungen fr das background-image (2 ersHintergrundbild sowie die Text- und Link-Farben geregelt (Punkt 7) te vier Zeilen der Abbildung oben). Einen Dateinamen ginnt mit /* und endet mit */. Alle Zeichen oder eine komplette Web-Adresse drfen dazwischen ignoriert der Browser. Auf den Sie bei CSS nicht einfach so angeben. Wie ersten Blick wirkt das vielleicht lcherlich. im Beispiel mssen Sie den Namen mit Aber wenn Sie nach einem halben Jahr eiurl(...) einfassen. Die Schriftfarbe legen ne umfangreiche CSS-Datei laden, werden Sie mit der Eigenschaft color fest, darauf Sie froh ber die Kommentare sein. folgt in der bei HTML blichen Schreibweise der RGB-Farbwert (2 ab Seite 64).
7. CSS-Regeln in Extradatei auslagern
Die CSS-Regeln im Stylesheet-Bereich vereinfachen die Pflege einer HTML-Datei. Das Problem: Eine Website besteht meist aus vielen HTML-Dateien. Damit Sie diese nicht fr eine nderung einzeln anpassen mssen, ermglicht es Ihnen CSS, die CSS-Regeln in eine Extradatei auszulagern, die alle Web-Seiten gemeinsam nutzen. Dazu erzeugen Sie zuerst eine neue Datei namens FORMAT.CSS fr die CSS-Regeln. In diese Datei kopieren Sie den Inhalt des Stylesheet-Bereichs, also ohne die HTML-Zeilen <style ...> und </style>. In der HTML-Datei fgen Sie in den Kopf zwischen den HTML-Tags <head> und </head> eine Zeile ein: <link href="format.css rel= "stylesheet" type="text/css"> Anstelle von format.css tragen Sie hinter dem Attribut href den Namen Ihrer CSSDatei ein. Sie drfen auch mehrere CSS-Dateien einbinden, schreiben Sie einfach fr jede Datei einen <link>-Tag.
9. Links einfrben
Jetzt geht es noch darum, die Farbe der Links zu definieren. Der Haken dabei ist, dass ein Link mehrere Zustnde kennt: normaler Link, angeklickter Link, bereits besuchter Link. Es reicht also nicht, einfach einen Tag-Selektor fr <a> zu benutzen. Die Lsung fr das Problem sind die Pseudoformate, wie sie in den letzten drei Zeilen der 2 Abbildung oben stehen. Das Pseudoformat a:link wirkt auf normale Links, die noch nicht angeklickt wurden. a:visited bezieht sich auf Links, die Sie bereits besucht haben. Dabei ist es egal, ob es sich um andere Web-Seiten Ihres Internet-Auftritts oder um Seiten auf einem fremden Webserver handelt. a:active
betrifft den Link, den Sie gerade anklicken. Denn erst wenn Sie die Maustaste loslassen, ldt der Browser die Zielseite. Die 2 Abbildung links zeigt die CSS-Datei komplett. Speichern Sie die Textdatei im Windows-Editor mit Datei, Speichern unter als FORMAT.CSS im selben Verzeichnis wie die HTML-Dateien. Jetzt bleibt noch die Aufgabe, die CSSDatei in die verschiedenen Web-Seiten der Beispiel-Site einzubinden. Laden Sie die erste Datei INDEX.HTML mit Datei, Datei ffnen im Web-Editor Composer (Bestandteil von Netscape, 2 ab Seite 58). Da Composer keine Menbefehle anbietet, um eine externe CSS-Datei einzubinden, gehen Sie wie folgt vor: Wechseln Sie ber den Karteireiter HTML-Quelle zur Textansicht. Fgen Sie unmittelbar vor dem Tag </head> Folgendes ein: <link href="format.css" rel="stylesheet" type="text/css"> Anschlieend gehen Sie eine Zeile weiter zu <body ...>. In dem Tag gibt es eine ganze Reihe von Attributen, beispielsweise background. Lschen Sie alle Attribute bis auf topmargin und leftmargin. Fhren Sie diese Aktion bei allen anderen Web-Seiten ebenfalls durch bercksichtigen Sie dabei auch die Vorlage LEER.HTML. Ab jetzt gengt eine nderung in FORMAT.CSS, um beispielsweise den Hintergrund auszutauschen oder eine andere Schriftfarbe zu whlen.
Initial am Satzanfang
Mit CSS lsst sich eine Menge anstellen. So erzeugen Sie beispielsweise ein Klassenformat, das automatisch den ersten Buchstaben in einem Absatz als Initial grer darstellt. Der normale Text fliet um das Initial herum. 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 Absatz mit dem Attribut class: <p class="ErsterAbsatz"> Wir sind ... </p>
8. Praktischer Einsatz
Als praktisches Beispiel rsten Sie nun die Website aus dem ersten Teil des HomepageGrundkurses (2 ab Seite 58) mit einer externen CSS-Datei aus. Dabei sollen die Einstellungen fr das Hintergrundbild und die Text- und Link-Farben per CSS geregelt werden. Fr die CSS-Datei brauchen Sie einen einfachen Editor, der Textdateien speichern kann. Im einfachsten Fall ist das der Editor aus dem Windows-Zubehr. Starten Sie das Programm, Sie finden es etwa bei
83
TIF Das Profi-Dateiformat fr die Druckvorstufe kann Bildinhalte zwar komprimieren, doch die finalen Dateien sind immer noch viel zu gro fr die Online-Darstellung. Auerdem sind die meisten Browser nicht in der Lage, TIF-Bilder darzustellen. Fr die Bereitstellung von TIFs verwenden Sie deshalb die gleiche Verfahrensweise wie fr BMP-Grafiken (2 Abschnitt BMP). Die Gre der Beispielgrafik im TIF-Format: 1400 KB. JPG Das beliebteste Grafikformat fr das Internet zeichnet sich durch eine extrem hohe Datenkompression aus. Als JPG-Grafik mittlerer Qualitt (Komprimierungsfaktor: 50) schrumpft das Beispielbild auf 64 KB zusammen, whrend die gleiche Datei bei einem hohen Komprimierungsfaktor von 90 gerade mal 30 KB umfasst. Vorteil neben der geringen Dateigre ist die Farbtiefe von ber 16 Millionen Farbtnen. Sie macht das JPG-Format besonders geeignet fr Fotos. Zu den Nachteilen von JPG zhlen deutlich sichtbare Pixel-Artefakte und Farbsume an Kontrastkanten, die mit hheren Komprimierungsfaktoren immer strker zunehmen. GIF Das Graphic Interchange Format (GIF) ist der Klassiker unter den Dateiformaten frs Internet. Aufgrund der geringeren Farbtiefe von maximal 256 Farbtnen und einer verlustfreien Komprimierung entstehen beim Speichern im GIF-Format relativ kleine Dateien, die sich fr den Einsatz auf der Website eignen. Ideal ist dieses Format fr Zeichnungen, Computergrafiken oder Cliparts weniger gut geeignet dagegen fr Fotos mit vielen Farbnuancen. Drei Besonderheiten machen das GIFFormat besonders web-tauglich: Erstens kann eine Farbe transparent geschaltet werden, wodurch Sie auf Ihrer Homepage freigestellte Grafiken realisieren knnen. Zweitens lassen sich mehrere Bilder zu einer animierten GIF-Grafik zusammenfassen mehr dazu in unserem Workshop 2 ab Seite 92. Drittens lassen sich GIF-Grafiken Interlaced anlegen dieses Zeilensprungverfahren sorgt dafr, dass die Grafik auf der Homepage nicht etwa von oben nach unten aufgebaut wird, sondern zunchst grob erscheint und dann allmhlich immer de-
Bilder optimieren
Von der Digitalkamera oder vom Scanner direkt auf die Homepage wir zeigen Ihnen, wie Sie Ihre Fotos und Grafiken optimal fr die Darstellung im Web vorbereiten.
Von Michael Schmithuser
Ein Bild sagt mehr als tausend Worte so liee sich eine Grundregel frs Web formulieren, wo textlastige Seiten den Betrachter noch eher abschrecken als in Printmedien. Ebenso abschreckend wirken allerdings zu groe Grafiken, falsch dargestellte Farben oder zu lange Ladezeiten. Um solche Fehler zu vermeiden und Ihre Homepage optisch attraktiv zu gestalten, bentigen Sie nur ein Bildbearbeitungsprogramm wie Paint Shop Pro 8.0 und die Tipps auf den folgenden vier Seiten. Eine voll funktionsfhige, auf 30 Tage Laufzeit beschrnkte Version von Paint Shop Pro finden Sie auf C Heft-CD, so dass Sie sofort loslegen knnen. Weitere Web-taugliche Pixelknstler finden Sie im gleichnamigen Kasten auf Seite 87.
von Browsern wie dem Internet Explorer oder dem Navigator untersttzt werden. Welches Format das richtige fr Ihre Bilder ist, hngt von der Art der Bilder und vom Einsatzzweck ab. BMP Das Windows-eigene Bitmap-Format BMP wird beispielsweise zum Speichern von Hintergrundbildern fr den WindowsDesktop verwendet. Da BMP-Dateien unkomprimierte Informationen enthalten, sind sie aufgrund der riesigen Dateigre fr das Web denkbar ungeeignet. Wenn Sie BMP-Dateien zum Beispiel Desktop-Hintergrnde auf Ihrer Homepage anbieten mchten, dann sollten Sie die Bilder in ein ZIP-Archiv packen und dieses ber einen Link mit kleiner Vorschaugrafik zum Download anbieten. Wie Sie eine solche Vorschaugrafik erzeugen, erfahren Sie in 2 Punkt 2. Das groe Beispielbild am Anfang dieses Beitrags ist im BMP-Format 3140 KB gro.
1. So whlen Sie das richtige Dateiformat aus

BMP, GIF, JPG, PNG beim Speichern Ihrer Grafiken haben Sie die Qual der Wahl unter einer Vielzahl von Dateiformaten, die
84
P Grundlagen
pWorkshops
P Utilities
Bilder aufbereiten
zunchst einmal entsprechend verkleinern. Das Foto WATER.JPG finden Sie auf der C Heft-CD. Es wurde mit einer 2-Megapixel-Kamera geknipst und verfgt deshalb ber eine Auflsung von 1024 x 1280 Bildpunkten viel zu gro fr die Homepage. Damit auch ein Anwender, der eine Bildschirmauflsung von 800 x 600 Bildpunkten verwendet, Erster Eindruck: GIF- oder PNG-Grafiken im Interlaced-Modus bauen sich in der Lage ist, das kompletzunchst grob auf und werden dann immer detaillierter (Punkt 1) te Foto zu sehen, sollte es in der Vertikalen 500 Bildtaillierter dargestellt wird. Auf diese Weise punkte nicht berschreiten schlielich erhlt der Betrachter rasch einen ersten mssen ja auch noch Windows-Elemente Eindruck von der Grafik, bevor sie komwie Fensterrahmen oder die Startleiste in plett geladen wird (2 Abbildung oben). Das die Kalkulation mit einflieen. Beispielbild besitzt als GIF eine Dateigre von 640 KB. Richtig kalkulieren Laden Sie das Foto mit Datei, ffnen in PNG Paint Shop Pro, und whlen Sie Bild, Das Portable Network Graphics Format Gre ndern. Im Dialogfenster, das dar(PNG) ist sozusagen der Nachfolger des GIFaufhin erscheint, ffnen Sie das Pull-downFormats allerdings fllt die BeschrnMen im Bereich Pixelgre und whlen kung auf 256 Farben weg. Merkmale wie die Option Pixel. Transparenz auf Wunsch auch mehrstuAnschlieend markieren Sie das Eingafig und Interlace-Darstellung bleiben dabefeld Hhe und tragen dort den Wert gegen erhalten. 500 ein. Der Wert fr die Breite wird auDa jedoch die geringe Komprimierung tomatisch angepasst, vorausgesetzt, die von Bildern mit mehr als 256 Farben zu Checkbox Seitenverhltnis beibehalten sehr groen Dateien fhrt (Beispielbild mit ist aktiv. Im Pull-down-Men Resampling 2000 KB), eignet sich auch das PNG-Format wie GIF eher zur bermittlung von Grafiken oder Cliparts. Auf 256 Farben gestutzt, reduziert sich die Dateigre des Beispielbildes auf 550 KB.
Inhalt 1. So whlen Sie das richtige Dateiformat aus 2. So bestimmen Sie die richtige Bilddateigre 3. So optimieren Sie Ihre Fotos blitzschnell 4. So stellen Sie Bildelemente frei 5. So reduzieren Sie die Farben 6. So stellen Sie die Transparenz ein 7. Analysieren ist besser als Warten Ksten: Hintergrnde im Handumdrehen Web-taugliche Pixelknstler
Seite
84 85 86 86 86 87 87
86 87
mit: klicken Sie auf die Option Smart Size. Dabei handelt es sich um eine Berechnungsmethode zum Hinzufgen oder Entfernen einzelner Pixel, die sowohl beim Vergrern als auch beim Verkleinern von Bilddateien optimale Ergebnisse erzielt. Nach einem abschlieenden Klick auf OK liegt das Bild in der neuen Gre vor und kann dann fr das Heraufladen auf die Homepage im gewnschten Format gespeichert werden. Mit der gleichen Technik knnen Sie auch Miniatur-Vorschaubilder (Fachbegriff: Thumbnails) fr Download-Links erzeugen. Reduzieren Sie dazu einfach die Bildgre auf 100 Pixel oder weniger.
2. So bestimmen Sie die richtige Bilddateigre

Wenn Sie Ihre Lieblingsfotos auf der Homepage prsentieren mchten, sollten Sie darauf achten, nicht in die Formatfalle zu tappen. Denn moderne 3-Megapixel-Kameras liefern Bilddateien mit einer horizontalen Auflsung von ber 2000 Pixeln. Solche Riesenbilder treiben nicht nur die Download-Zeiten in die Hhe, sondern finden auch auf keinem Monitor Platz. Ergebnis: Entweder der Browser zeigt nur einen Ausschnitt des Fotos, oder die automatische Darstellung verkleinert das Bild auf ein passendes Format dabei htte die Hlfte an Daten locker fr die gleiche Darstellungsgre gereicht. Deshalb sollten Sie Ihre Originaldateien fr den Web-Einsatz
Klick und schn: Die Funktion Fotokorrektur in einem Schritt macht aus fahlen Bildern brillante Aufnahmen. Das Rot der Haare, die Frbung des Wassers und die Kontraste im Bild wirken wesentlich strker (Punkt 3)
85
Bilder aufbereiten
P Grundlagen
pWorkshops
P Utilities
Variante Ellipse. Nun bewegen Sie den Mauscursor ins Zentrum der Radnabe und ziehen bei gedrckt gehaltener Maustaste eine runde Markierung auf, die den gesamten Reifen einschliet (linker Bereich der 2 Abbildung links). Um alle Bereiche auerhalb des Reifens auszuwhlen, verwenden Sie den Befehl Umkehren aus dem Men Auswahl. Rund: Per Auswahlwerkzeug markieren Sie die gewnschten Objekte und Definieren Sie nun im Fensfllen bestimmte Bereiche mit einer Kontrastfarbe (Punkt 4) ter Materialien die Hintergrundfarbe neu, indem Sie mit der rechten Maustaste auf die ge3. So optimieren Sie Ihre wnschte Farbe in der Palette klicken. Fotos blitzschnell Whlen Sie eine Farbe aus, die im Bild Mit dem im vorhergehenden Abschnitt vernicht vorkommt zum Beispiel ein leuchkleinerten Foto fhren Sie die nchste Optendes Rot. Anschlieend drcken Sie die timierungsmanahme durch. Paint Shop <Entf>-Taste, um alle markierten Bereiche Pro bietet eine automatische Fotokorrekzu lschen und durch die Hintergrundfartur, die durch Anpassung der Kontraste, be zu ersetzen (rechter Bereich der 2 AbFarben und Helligkeitsstufen fr eine webildung oben). Diese Farbe definiert nachsentlich brillantere Darstellung sorgt. folgend die transparenten Bereiche im Bild, Klicken Sie in der Symbolleiste auf das die fr die sptere Verarbeitung in Schritt Feld Fotokorrektur und im Pull-down6 final festgelegt werden. Men auf Fotokorrektur in einem Schritt. Nun analysiert Paint Shop Pro das Bild und Unregelmig geformte Objekte fhrt alle ntigen Optimierungsschritte Die wenigsten Bildelemente sind hnlich automatisch durch. Nach dieser Prozedur einfach geformt wie der Reifen im Beispielwirken das Rot der Haare, die Frbung des foto. Oft verfgen Objekte ber unregelWassers und die Kontraste im Bild wesentmige Kanten oder ganz feine Elemente, lich strker (2 Abbildung auf der vorhergedie ber den Hintergrund hinausragen, henden Seite unten rechts). wie der Adventskranz in der 2Abbildung Ist der eine oder andere Effekt nach auf Seite 87 oben links (als KRANZ.JPG auf Ihrem Geschmack zu stark ausgefallen, opC Heft-CD). timieren Sie beispielsweise mit der Option Wollen Sie solche kniffligen Elemente Automatische Kontrastkorrektur aus als transparente Grafiken auf Ihrer Homedem Fotokorrektur-Men lediglich die Konpage einbinden, greifen Sie auf das Hintraste im Bild, whrend Sie die Farben untergrundlschwerkzeug von Paint Shop angetastet lassen. Pro zurck. Dieses verbirgt sich auf der Werkzeugleiste im Ausklappmen hinter 4. So stellen Sie dem normalen Radiergummi. Stellen Sie Bildelemente frei in der Optionsleiste oben eine Gre von Es muss nicht immer rechteckig sein. Da al130 ein, und bewegen Sie den runden le Browser die Mglichkeit bieten, transpaMauscursor ber das Bild. Achten Sie darrente Bildbereiche auszublenden, knnen auf, dass sich die Spitze des inneren RaSie problemlos zum Beispiel herzfrmige diergummi-Symbols ber einem grauen Fotos von Ihrer Liebsten oder runde GrafiHintergrundbereich befindet, und klicken ken als Buttons verwenden. Letzteres knSie einmal, um den Hintergrund zu lnen Sie gleich mit der Beispielgrafik REIschen, ohne dass andere Bildelemente wie FEN.TIF auf C Heft-CD ausprobieren. Zweige oder Bnder beschdigt werden. ffnen Sie das Reifenfoto, und aktivieAls Besttigung fr die erfolgreiche Eliren Sie mit der <S>-Taste das Auswahlwerkminierung des Hintergrunds erscheint in zeug. In der Optionsleiste oben klicken Sie den gelschten Bereichen eine grauwei in das Feld Auswahltyp und whlen die gekachelte Flche. Bearbeiten Sie auf diese
Weise das gesamte Bild mit einzelnen Klicks. Vorsicht: Machen Sie keinesfalls Wischbewegungen bei gedrckter Maustaste, sonst radieren Sie womglich auch andere Bildelemente weg.
5. So reduzieren Sie die Farben

Hufig enthalten auch Fotos nur sehr wenige Farben so etwa der bereits ausgeschnittene Reifen. Diese Farbarmut knnen Sie nutzen, um die Dateigre einer Grafik zugunsten einer schnelleren bertragungsgeschwindigkeit zu reduzieren. Aktivieren Sie das Fenster mit dem Reifenfoto, und whlen Sie Bild, Bildfarben zhlen. Der vermeintlich hohe Wert von ber 93.000 eindeutigen Farben sollte Sie nicht irritieren das ist sehr wenig, wenn man den Wert mit der maximalen Farbzahl von 16,7 Millionen in einem True-
Hintergrnde im Handumdrehen
Wenn Sie auf der Suche nach einem ansprechenden Hintergrundmuster fr Ihre Homepage sind, hilft Ihnen die Kachelfunktion von Paint Shop Pro ganz bestimmt weiter. Als Ausgangsbild dienen dabei Fotos mit einer bestimmten Struktur zum Beispiel Gras, Sand, Meerwasser oder ein Himmel mit Wolken (2 Abbildung unten). Markieren Sie den gewnschten Bildausschnitt mit dem Auswahlwerkzeug, und schneiden Sie das gesamte Foto mit <Shift>-<R> auf die Auswahl zu. Dann rufen Sie den Filterdialog Effekte, Bildeffekte, Nahtloses Kacheln... auf. Belassen Sie die Grundeinstellungen, und besttigen Sie mit OK. Nun hat Paint Shop Pro die Bildvorlage durch geschicktes berblenden an allen vier Seiten in ein Bild verwandelt, das sich in alle Richtungen nahtlos aneinanderfgen lsst ideal zum Beispiel als gekacheltes Hintergrundmuster fr Ihre Homepage.
86
P Grundlagen
pWorkshops
P Utilities
Bilder aufbereiten
zu reduzieren. Sie werden feststellen, dass sich bis hinunter zu nur 20 Farben keine merklichen Unterschiede zwischen Original (links) und modifiziertem Bild (rechts) ergeben immerhin ber 100 KB Speicherplatz gespart!
verwandelt sich in eine Pipette, die Sie ber den roten Bereich im Foto bewegen und mit der Sie die Farbe durch einmaliges Klicken aufnehmen. Nach kurzer Berechnungszeit sehen Sie im rechten Vorschaufenster den perfekt freigestellten Reifen.
6. So stellen Sie die Transparenz ein

Im Dialog Optimierung finden Sie auf der RegisterMagisch: Die bereits transparenten Bereiche zeigt die karte Transparenz alle Software durch ein Schachbrettmuster an (Punkt 6) Funktionen, um jene Bereiche zu definieren, die spter color-Bild vergleicht. Ein solch niedriger im Browser durchsichtig Wert ist Indiz dafr, dass zum Beispiel eine erscheinen sollen. Die OptiGIF-Version mit weitaus weniger als 256 mierungsfunktion ist ber Farben auskommen kann, ohne dass die die Schaltflche OptimieBildqualitt gro darunter leidet. rung ausfhren im SpeiWhlen Sie Datei, Speichern unter, cher-Fenster auch fr viele und klicken Sie in der Liste Dateityp auf andere Dateiformate in hnCompuServe Graphics Interchange (*.gif). licher Form verfgbar, etwa Ein Klick auf die Schaltflche Optionen fr PNG und JPG. und anschlieend auf Optimierung ausDie Option Bestehende fhren bringt Sie in den Dialog GIF-OptiBild- oder Ebenentranspamierung. Wechseln Sie zur Registerkarte renz eignet sich fr bereits Farben, und verkleinern Sie die Vortransparent gestaltete Bildschauansicht mit dem Minuslupen-Symbol vorlagen, etwa den mit dem Weniger Farben: Bilder mit wenigen und/oder sehr hnlichen Farben lasauf 30%, so dass Sie einen groen AusHintergrundradierer bear- sen sich problemlos auf eine Hand voll Farbtne reduzieren (Punkt 5) schnitt des gesamten Bildes im berblick beiteten Adventskranz. Was haben (2 Abbildung rechts). von Ihnen im Bild ausradiert und von Paint 7. Analysieren ist besser als Warten Nun klicken Sie neben der Option Wie Shop Pro mit dem grauweien SchachNachdem Sie sowohl die Farben reduziert viele Farben mchten Sie verwenden? auf brettmuster versehen wurde, wird autoals auch die Transparenz korrekt eingeden blauen Pfeil nach unten und bewegen matisch transparent. Im Falle des Autoreistellt haben, steht dem Speichern der die Maus bei gedrckt gehaltener Taste fens verwenden Sie die Option Bereiche, Grafik fr die Verwendung im Web-Editor kontinuierlich nach links, um die Farbzahl die dieser Farbe entsprechen. Der Cursor nichts mehr im Wege. Auf der Registerkarte Format knnen Sie sowohl fr GIFs als auch fr PNGs zwischen der Interlaced- und Non Interlaced-DarstelNeben Paint Shop Pro sind auch viele andere Bildlung whlen (2 Punkt 1), bevor Sie auf bearbeitungsprogramme mit praktischen Funktioder Registerkarte Download-Zeiten einen nen zur Optimierung von Web-Grafiken ausgestatBlick auf die Ladezeiten werfen, die tet. Hier zwei besonders ntzliche Pixelknstler fr Paint Shop Pro anhand der Dateigre die Gestaltung Ihrer Homepage: berechnet. Ulead Photo Impact: Die Software bietet sowohl Die vier angegebenen Mittelwerte zahlreiche klassische Bildbearbeitungswerkzeuge decken das ganze Spektrum vom Analogals auch eine Reihe leistungsstarker Web-GrafikModem (56K) bis zur DSL-Verbindung Tools. Der Bildoptimierer erleichtert die Vorberei(720K) ab. Wie viel Ladezeit Sie Ihren Besutung der Grafiken fr den Web-Einsatz. Mit den inchern zumuten wollen, liegt letztlich in teraktiven Diashows bringen Sie mehr Leben auf Ihre Homepage. Sogar Bildeffekte per JavaIhrem Ermessen die 33 Sekunden fr die script macht das vielseitige Programm mglich. Info: www.ulead.de, Preis: 111 Euro. 180 KB des Beispielbildes stellen die Geduld Adobe Photoshop Elements: Der kleine Bruder des Profi-Bildbearbeiters Photoshop bietet eines Modem-Besitzers je nach Anschluss ebenfalls eine Vielzahl leicht zu bedienender Bearbeitungsfunktionen fr Digitalfotos sowie ei mglicherweise auf eine harte Probe. nen interaktiven Dialog zur Vorbereitung von Grafiken frs Web. Auerdem lassen sich mit PhoHier knnten Sie zum Beispiel in Erwtoshop Elements im Handumdrehen Internet-Fotoalben und animierte GIF-Grafiken erstellen. gung ziehen, das Foto weiter zu verkleiInfo: www.adobe.de, Preis: 110 Euro. nern (2 Punkt 2) oder es als stark komprimierte JPG-Grafik anzulegen.
Web-taugliche Pixelknstler
87
2. So bringen Sie den Ball zum Springen

Am Beispiel eines springenden Balls lsst sich die grundlegende Arbeitsweise von Flash sehr gut veranschaulichen. Objekt zeichnen Aktivieren Sie mit der <O>-Taste oder per Klick auf das Kreis-Symbol in der Werkzeugleiste das Ellipsen-Werkzeug. Ziehen Sie auf der Bhne oben mittig einen kleinen Kreis auf. Damit es auch wirklich ein Kreis wird, halten Sie whrend des Aufziehens die <Shift>-Taste gedrckt. Sobald der Kreis vollendet ist, aktivieren Sie das PfeilWerkzeug mit der <V>-Taste und klicken damit den Kreis an, um ihn zur weiteren Bearbeitung auszuwhlen. Objekt einfrben Im Dialog Eigenschaften ganz unten klicken Sie nun auf das Farbfeld neben dem Farbeimer-Symbol, um die Farbpalette einzublenden. In der Palette ganz unten finden Sie eine Reihe vorgefertigter Farbverlufe; klicken Sie mit dem Pipettencursor aufs Feld mit den Regenbogenfarben. Ebene umbenennen Die folgenden Schritte finden in der Zeitleiste auf dem Bildschirm ganz oben statt. Diese Leiste stellt quasi das Drehbuch fr die Animation dar. In der Zeitleiste links sehen Sie den Namen der aktuellen Ebene, auf der sich unser bunter Ball befindet, derzeit standardmig als Ebene 1 betitelt. Da aufwendige Flash-Filme Dutzende von Ebenen enthalten knnen und dabei rasch die bersicht verloren gehen kann, sollten Sie jeder Ebene stets gleich beim Anlegen einen aussagekrftigen Namen zu-
Peppen Sie Ihre Website mit Flash-Animationen auf! Mit unserem Schnellkurs fr Einsteiger zaubern Sie schon nach kurzer Zeit ansprechende Filme auf den Bildschirm.
Flash-Filme sind der Quasi-Standard fr Animationen im Web. Das liegt erstens daran, dass sich das Flash-Format durch geringe Dateigren auszeichnet. Zweitens verfgen die meisten ambitionierten Websurfer ber das zur Wiedergabe ntige Plug-in. Und drittens sind die Gestaltungsmglichkeiten fr Flash-Filme nahezu grenzenlos. Die einzige Hrde zwischen begabten Einsteigern und einer Bibliothek eigener Flash-Filme ist die auf den ersten Blick etwas umstndliche Bedienung von Macromedia Flash MX (30-Tage-Testversion auf C Heft-CD). Doch keine Sorge mit unserem Workshop meistern Sie den Einstieg in die Flash-Welt mhelos.
1. So legen Sie die Grundeinstellungen fest

Los gehts: Nach dem Start von Flash MX sehen Sie einen leeren, weien Arbeitsbereich vor sich. Klicken Sie in der Optionsleiste unten im Feld Eigenschaften auf die Schaltflche Gre (2Abbildung rechts). Hier
definieren Sie die Darstellungsgre Ihres Flash-Films. Dabei gilt: je kleiner, desto schneller und kompakter. Flash-Dateien, die grer als 500 Punkte in der Horizontalen ausfallen, laufen auf langsameren Systemen nur sehr ruckelig ab. Geben Sie eine Gre von 320 x 200 px (Abkrzung fr Pixel) vor, setzen Sie dann im zentralen Ausklappmen die Hintergrundfarbe auf Schwarz, und erhhen Sie anschlieend die Bildrate auf 20 BpS. BpS steht fr Bilder pro Sekunde je hher dieser Wert ausfllt, desto flssiger luft spter die fertige Animation ab. Besttigen Sie Ihre Eingaben mit OK. Per Ansicht, Skalierung, Bild einblenden vergrern Sie den Vorschaubereich exakt auf die Abmessungen des Films. So, Schnell eingestellt: Im Dialog Dokumenteigenschaften legen Sie das der erste Schritt wre getan. Grundgerst fr Ihren Flash-Film fest (Punkt 1)
88
P Grundlagen
pWorkshops
P Utilities
Tweening durchfhren lassen
Flash
Inhalt Seite Markieren Sie in der Zeitleis1. Grundeinstellungen festlegen 88 te per Mausklick die Zelle 1, 2. Springenden Ball animieren 88 halten Sie die <Shift>-Taste 3. Text am Pfad animieren 90 gedrckt, und klicken Sie 4. Bitmap-Grafiken animieren 90 auf Zelle 20, um den gesam5. Sound hinzufgen 91 ten Bereich in der Zeitleiste 6. Flash-Film exportieren 91 zu markieren. Dann whlen Sie im Men Einfgen den Kasten Befehl Bewegungs-Tween Flash-Filme richtig verffentlichen 91 erstellen. Nun erscheint in der Zeitleiste zwischen Zelle Der Schlssel zum Film: Erst das Einfgen von Schlsselbildern erlaubt 1 und 20 ein Pfeil als Symbol Flash die Berechnung von Animationssequenzen (Punkt 2) fr die Animationssequenz. der Zeitleiste mit der rechten Maustaste auf Mit einem Druck auf die Zelle 20 (die den unverformten Ball am unordnen. Fhren Sie einen Doppelklick auf <Return>-Taste lassen Sie die fertige Seteren Bildrand enthlt), um im Kontextdie Bezeichnung Ebene 1 aus, und geben quenz abspielen der Ball fllt vom oberen men die Option Bilder kopieren zu Sie stattdessen Ball ein. Im Moment beBildrand nach unten (2Abbildung unten). whlen. Klicken Sie dann mit der rechten steht die Animation nur aus einem einziMaustaste auf Zelle 30, und whlen Sie Bilgen Bild, das in der Zeitleiste durch ein Objektverformung animieren der einfgen. Damit ist das Stauchen und Rechteck mit einem Punkt an Position 1 Fgen Sie jetzt in die Zelle 25 ein neues Entstauchen des Balls am unteren reprsentiert wird. Die Ziffern ber der Schlsselbild ein. Flash erkennt automaBildrand erledigt. Zeitleiste geben nicht die Zeit in absoluten tisch, dass das neue Schlsselbild an eine Abschlieend fgen Sie in die Zelle 50 Sekunden wieder, sondern stehen fr die Animation anschliet, und fgt deshalb eiein neues Schlsselbild ein. Kopieren Sie Bildnummern in der Animation. nen weiteren Bewegungs-Tween zwischen den Ball am oberen Bildrand aus Zelle 1, Zelle 20 und 25 ein. In Bild 25 soll der Ball und fgen Sie diesen in Zelle 50 ein. Ein Schlsselbild einfgen durch die Kraft der Gravitation zusamDruck auf die <Return>-Taste, und Sie knWenn wie in unserem Beispiel eine mengequetscht erscheinen. nen Ihre erste komplette AnimationsseBildrate von 20 Bildern pro Sekunde eingeMarkieren Sie dazu die Zelle 25 in der quenz bewundern. stellt ist, ist eine Sekunde beim Erreichen Zeitleiste, und rufen Sie mit der <Q>-Taste der Marke 20 verstrichen. Der Ball soll in eidie Funktion Frei transformieren auf. Rotationseffekt hinzufgen ner Sekunde vom oberen Bildrand auf den Durch Klickziehen des oberen mittleren BeJetzt gehts ans Fein-Tuning: Damit die AniBoden am unteren Bildrand fallen. Dazu arbeitungsquadrats nach unten stauchen mation bewegter aussieht, lassen Sie den mssen Sie zunchst in der Zelle 20 ein Sie den Ball nun auf etwa 50 Prozent seiner Ball sich drehen, whrend er fllt. Einen Schlsselbild einfgen. Gre (2 Abbildung nchste Seite oben). solchen Rotationseffekt bekommen Sie in Klicken Sie mit der rechten Maustaste in Anschlieend verschieben Sie das Objekt Flash mit wenigen Mausklicks hin. der Ebene Ball auf die Zelle 20, und mit der <Cursor unten>-Taste wieder an Markieren Sie in der Zeitleiste die Zelwhlen Sie aus dem Kontextmen die Opden unteren Bildrand, um den vertikalen le 1, und klicken Sie dann im Eigenschaftion Schlsselbild einfgen (2 Abbildung Flchenverlust auszugleichen. ten-Dialog ganz unten auf den blauen Pfeil oben). Damit haben Sie den Grundstein fr Tipp: Um das Ergebnis des Tweens ohne neben dem Eingabefeld Drehen. Im Pulldie nachfolgende Animation gelegt, die Wiedergabe der kompletten Animationssedown-Men whlen Sie die Option UZS jetzt durch einen grauen Balken zwischen quenz zu begutachten, kliZelle 1 und 20 symbolisiert wird. cken Sie einfach in das rote Rechteck am oberen Rand Inhalt des Schlsselbildes verndern der Positionslinie in der ZeitAktivieren Sie nun das Pfeilwerkzeug, und leiste und verschieben dieklicken Sie den Ball auf der Bhne an. Mit ses bei gedrckt gehaltener der Taste <Cursor unten> verschieben Sie Maustaste hin und her. den Ball an den unteren Bildrand. Damit haben Sie die Endposition des Objekts in Animation umkehren Zelle Nummer 20 definiert. Nun soll die ganze Sequenz Wenn Sie jetzt in der Zeitleiste auf Zelwieder rckwrts laufen, le 1 klicken, erscheint der Ball immer noch der Ball also wieder seine am oberen Bildrand. Zwischen diesem Ausrunde Form annehmen und gangsbild in Zelle 1 und dem Endbild in zurck zum oberen BildZelle 20 soll Flash automatisch die erforderrand springen. Dazu erzeulichen Zwischenschritte berechnen; diese gen Sie in Zelle 30 ein neues Ball im Spiel: Die erste Animationssequenz wird in der Zeitleiste oben Technik heit im Fachjargon Tweening. Schlsselbild und klicken in durch einen Pfeil zwischen den Schlsselbildern symbolisiert (Punkt 2)
89
Flash
P Grundlagen
pWorkshops
P Utilities
Text linear animieren Tipp: Um den Pfad fr das Auge des BeUm den Text linear zu anitrachters unsichtbar zu machen, klicken mieren, verschieben Sie den Sie in der Ebene Pfad: Text auf den Text zunchst mit dem Pfeilschwarzen Punkt unterhalb des Augenwerkzeug ber den linken symbols. Der Punkt verwandelt sich darBhnenrand hinaus. Dann aufhin in ein rotes Kreuz, und die Ebene fgen Sie in der Textebene wird unsichtbar geschaltet. in die Zelle 50 ein neues Schlsselbild ein. Aktivieren Ebenen umschichten Sie die Zelle 50, und verMomentan verdeckt der Schriftzug beim schieben Sie den Text ber Durchlauf durch die Mitte des Bildes teilVirtuelle Presse: Mit dem Werkzeug Frei transformieren sorgen Sie dafr, den rechten Bhnenrand weise den Ball. Um den Schriftzug hinter dass der Ball gestaucht wird, sobald er auf den Boden trifft (Punkt 2) hinaus. Halten Sie dabei die dem Ball vorbeisausen zu lassen, mssen <Shift>-Taste gedrckt, so Sie lediglich die Ebenen in der Zeitleiste aus (das Krzel steht fr im Uhrzeigersinn dass der Schriftzug beim Verschieben verumschichten. Klicken Sie auf die Ebenendrehen). Genau die gleiche Option stellen tikal auf gleicher Hhe bleibt. bezeichnung Ball, halten Sie die MaustasSie fr die Zelle 30 ein, und schon rotiert Markieren Sie in der Zeitleiste bei gete gedrckt, und verschieben Sie die Ebene der Ball munter auf seinem Weg zur Erde drckter <Shift>-Taste gemeinsam die Zelin der Liste ganz nach oben. und wieder zurck. len 1 und 50, und whlen Tipp: Um den Ball noch schneller rotieren Sie Einfgen, Bewegungszu lassen, knnen Sie im EigenschaftenTween erstellen. Nun wanDialog den Wert 1 mal beliebig erhhen. dert der Schriftzug bei der Wiedergabe als Laufschrift 3. So animieren Sie von links nach rechts ber Text am Pfad die Bhne (2 groes Bild am Im nchsten Schritt fgen Sie dem sprinAnfang dieses Beitrags). genden Ball einen animierten Text hinzu, der sich entlang eines von Ihnen definierBewegungspfad hinzufgen ten Pfades schlngelt. Dazu erzeugen Sie Klicken Sie jetzt mit der mit dem Befehl Einfgen, Ebene zurechten Maustaste in der nchst eine neue Ebene, der Sie den NaZeitleiste direkt neben den men Text verleihen. Ebenennamen Text, und whlen Sie im Kontextme- Einfach himmlisch: Auch Bitmaps wie hier ein Wolken-Hintergrund lasText eingeben und formatieren n die Funktion Pfad hin- sen sich in Flash importieren und problemlos animieren (Punkt 4) Mit der <T>-Taste oder per Klick auf das Azufgen. Darauf erscheint Symbol in der Werkzeugleiste aktivieren direkt ber der Textebene eine neue Ebene 4. So animieren Sie Sie das Textwerkzeug. Klicken Sie dann mit mit der Bezeichnung Pfad: Text. Bitmap-Grafiken der Eingabemarke auf eine beliebige Stelle Klicken Sie in der Werkzeugleiste auf Bislang haben Sie lediglich mit Vektorobinnerhalb der Bhne. Geben Sie das Wort das Stift-Symbol, um den Freihand-Zeijekten gearbeitet, die Speicherplatz spaBallsaison! ein, und formatieren Sie den chenmodus zu aktivieren. Damit zeichnen rend als Koordinatenpaare von Flash verText anschlieend mit Hilfe der FormatfelSie eine sanft geschwungene Linie, die weit waltet werden. Doch das Flash-Format ist der im Dialog Eigenschaften in der entfernt vom linken Bhnenrand beginnt auch in der Lage, Bitmap-Grafiken in vielen Schriftfarbe Rot, der Schriftart Arial und und ebenso weit auerhalb des rechten Formaten in Filme zu integrieren und dort der Schriftgre 40 Punkt. Bhnenrandes endet (2 Abbildung unten fachgerecht zu animieren. links). Der Schriftzug schnappt nun automatisch Bitmap importieren am rechten Endpunkt der Erzeugen Sie mit Einfgen, Ebene eine Pfadlinie ein und kann bei neue Ebene, und benennen Sie diese als Bedarf mit Hilfe des PfeilHimmel. Verschieben Sie sie in der Ebewerkzeugs am Pfad entlang nenliste ganz nach unten, so dass sie im verschoben werden das Hintergrund liegt. Whlen Sie Datei, Imgleiche gilt auch fr den Beportieren, und wechseln Sie in das entginn der Animation in Zelsprechende Verzeichnis auf der C Heft-CD. le 1. Wenn Sie jetzt den Film Markieren Sie die Datei SKY.JPG, und beper Druck auf die <Shift>-Tassttigen Sie mit ffnen. Klicken Sie in der te wiedergeben, gleitet die Kurviges Vergngen: Der animierte Text folgt automatisch dem von Ihnen Zeitleiste auf die Zelle 1 in der Ebene HimSchrift wie auf Wellen gezeichneten Pfad auf der Unterebene Pfad: Text (Punkt 3) mel, und verschieben Sie die Bitmap-Gradurchs Bild.
90
P Grundlagen
pWorkshops
P Utilities
Flash
fik so weit nach links und oben, bis die untere rechte Ecke des Fotos deckungsgleich mit der unteren rechten Ecke der schwarzen Bhnenmarkierung zum Liegen kommt (2 Bild linke Seite, rechte Spalte). Animation mit Zoom-Effekt Nun knnten Sie die Wolken im Hintergrund wie den Schriftzug von rechts nach links durchs Bild wandern lassen. Doch fr die Hintergrundgrafik verwenden Sie einen weiteren Tweening-Kniff von Flash: das gleichzeitige Bewegen und Zoomen eines Objekts. Tipp: Um den berblick ber alle Elemente eines Projekts zu behalten, whlen Sie Ansicht, Skalierung, Alles zeigen. Markieren Sie in der Ebene Himmel die Zelle 50 am Ende der Animation, und fgen Sie dort ein neues Schlsselbild ein. Verschieben Sie die Bitmap-Grafik nach rechts unten, bis sich die oberen linken Ecken von Foto und Bhne berlappen. Jetzt erstellen Sie einen neuen BewegungsTween zwischen Zelle 1 und 50 der Himmels-Ebene. Anschlieend verkleinern Sie die Bitmap-Grafik in Zelle 50 mit dem Werkzeug Frei transformieren auf eine
Inklusive Sound: Der Soundeffekt fr das Auftreffen des Balls befindet sich ebenfalls auf einer eigenen Ebene. Durch Verschieben in der Zeitleiste synchronisieren Sie ihn mit der Animation (Punkt 5)
Hhe von 200 Bildpunkten und korrigieren die Bildlage entsprechend. Nun wird beim Tweening nicht nur das Bild verschoben, sondern gleichzeitig eine stufenlose Verkleinerung animiert das Endergebnis wirkt jetzt viel dynamischer.
5. So fgen Sie Sound hinzu

Fehlt zur perfekten Flash-Animation nur noch der richtige Sound. Erzeugen Sie eine neue Ebene mit dem Titel Sound, markieren Sie in der Zeitleiste die Zelle 1, und
Flash-Filme richtig verffentlichen

Mit den Grundeinstellungen des Dialogs Einstellungen fr Verffentlichungen aus dem Datei-Men fahren Sie bei kleineren und unkomplizierten Animationen meist richtig. Doch dank der vielfltigen Optionen knnen Sie vor dem finalen Export der FlashDatei noch ordentlich Fein-Tuning betreiben. Registerkarte Formate: Hier legen Sie fest, welche Dateitypen Flash bei der Verffentlichung erzeugt und im Arbeitsordner speichert. Flash und HTML Finale: Hier knnen Sie vor dem Export der Flash-Datei noch Fein-Tuning betreiben bezeichnen den eigentlichen Film und das dazugehrige HTML-Script zur Einbindung in Ihr HomepageScript. Die drei Grafikformate GIF, PNG und JPEG erzeugen ein Vorschaubild, das als Basis fr einen Link auf den Flash-Film dienen kann. Windows-Projektor und Macintosh-Projektor packen den Flash-Film samt Player in eine ausfhrbare EXE-Datei so luft die Prsentation auch auf Systemen ohne Flash-Player. Und die Option Quick Time erzeugt eine Videodatei zur direkten Wiedergabe in Quicktime oder im Windows Media Player. Registerkarte Flash: Die wichtigsten Einstellmglichkeiten in diesem Dialog sind die Checkbox Film komprimieren, die fr eine mglichst kleine SWF-Datei sorgt, sowie der Regler JPEG-Qualitt. Wenn Sie groe Bitmap-Grafiken in Ihren Film integriert haben, fhrt eine Reduzierung der JPEG-Qualitt in der Regel zu einer drastischen Verkleinerung der fertigen Filmdatei. hnlich bedeutend fr die finale Filmgre sind die Einstellungen fr die AudioStreams und Audio-Ereignisse. Registerkarte HTML: Hier geben Sie die Inhalte des HTML-Scripts vor. So knnen Sie die Gre unabhngig von der in Flash gewhlten Filmgre ndern, die automatische Wiederholung aktivieren oder ausschalten, oder die Darstellungsqualitt und die Ausrichtung auf der Web-Seite nach Belieben verndern.
ffnen Sie anschlieend den Dialog Importieren aus dem Men Datei. Von der C Heft-CD importieren Sie die Datei BUMM.WAV. Dann ffnen Sie im Eigenschaften-Dialog unten das Pull-down-Men Ton und whlen dort die eben importierte Datei aus. In der Zeitleiste sehen Sie jetzt in der Sound-Ebene eine Wellenform. Nun mssen Sie das Gerusch nur noch mit dem Auftreffen des Balls synchronisieren. Dazu klicken Sie in der Zeitleiste an den Anfang der Wellenform in der Sound-Ebene, halten die Maustaste gedrckt und ziehen den Startpunkt nach rechts bis zur Zelle 20 (2 Abbildung oben).
6. So exportieren Sie den Flash-Film

Nun speichern Sie den fertigen Film per Dialog Datei, Speichern unter als FlashMX-Dokument mit der Bezeichnung BALL. FLA. Diese FLA-Datei dient nur zur spteren Verwendung, etwa zur Korrektur der Inhalte. Die Datei fr das Internet mit der Endung SWF mssen Sie erst noch generieren diesen Vorgang bezeichnet Macromedia als Verffentlichung (2 Kasten links). Zunchst einmal begutachten Sie, wie die fertige Datei im Browser aussehen wird. Dazu whlen Sie Datei, Vorschau fr Verffentlichungen, Standard (HTML). Flash startet daraufhin Ihren Browser und prsentiert die fertige Animation im BrowserFenster. Sind Sie mit dem Ergebnis zufrieden, klicken Sie im Men Datei auf den Befehl Verffentlichen. Nach einer kurzen Wartezeit finden Sie die fertige FlashDatei im SWF-Format sowie eine HTML-Datei mit allen ntigen Tags fr die Integration in Ihren Webeditor im gleichen Verzeichnis, in das Sie zuvor die FLA-Datei abgelegt haben fertig. Sie drfen sich nun mit dem Titel Flash-Regisseur schmcken.
91
on besteht darin, mehrere Einzelbilder als virtuelle Diashow abzuspielen. Diese Animationen eignen sich zum Beispiel hervorragend dazu, ein Produkt auf einer Website zu prsentieren oder eine Ebay-Auktion zu illustrieren. Mit Animation Shop 3 stellen Sie auf diese Weise blitzschnell eine ansprechende Bildsequenz mit attraktiven berblendeffekten her. Grundeinstellungen festlegen Starten Sie Animation Shop 3, und whlen Sie Datei, Neu. Im Dialog Neue Animation geben Sie eine Breite von 320 Bildpunkten und eine Hhe von 200 Pixeln vor. Die Bilder mssen vergleichsweise klein sein, denn das GIF-Format zeichnet sich nicht gerade durch eine hohe Datenkompression aus 2-Megapixel-Fotos kommen also fr eine Diashow nicht in Frage. Unter Leinwandfarbe aktivieren Sie die Option Gedeckt fr einen soliden, einfarbigen Hintergrund. Mit einem Klick auf das Farbfeld rechts ndern Sie die Hintergrundfarbe in unserem Fall auf Wei. Besttigen Sie mit OK, um das neue Animationsfenster zu erstellen. Bilder einfgen Jetzt fllen Sie das Animationsfenster mit den gewnschten Einzelbildern. Verwenden Sie dazu den Befehl Animation, Bild hinzufgen, aus Datei. Im nun erscheinenden Dialog (2 Abbildung unten) klicken Sie auf die Schaltflche Datei hinzu und wechseln in das Verzeichnis auf C Heft-CD. Whlen Sie die fnf enthaltenen Beispielbilder mit der Tastenkombination <Strg>-<A> gemeinsam aus, und klicken Sie auf ffnen. Nun zeigt die bersichtsliste oben die ausgewhlten Dateien an. Im un-
Lebendige Homepage
Sorgen Sie fr mehr Bewegung auf Ihrer Homepage ohne komplizierte Flash-Movies und lstige Plug-ins. Mit Animation Shop gestalten Sie im Handumdrehen Diashows und Animationen.
Bewegte Bilder, die sich blitzschnell gestalten lassen, wenig Speicherplatz beanspruchen und auf jedem Browser ohne zustzliche Plug-ins dargestellt werden eine brandneue Web-Technologie? Mitnichten! Animierte GIFs haben schon ein paar Jhrchen auf dem Buckel und erfllen dennoch alle Anforderungen an eine moderne Animationstechnologie. Natrlich kann man mit Flash & Co. weitaus beeindruckendere und komplexere Trickfilme auf den Bildschirm zaubern, doch fr einfache Diashows und kleine Animationssequenzen reicht das unkomplizierte GIF-Format vollends aus.
bedienenden GIF-Animators finden Sie auf C Heft-CD. Ebenfalls auf C Heft-CD beigelegt ist eine Demoversion (61,7 MB) des Bildbearbeitungsprogramms Paint Shop Pro 8.0 (fr Windows 98/ME, NT 4, 2000 und XP), das gleichfalls aus dem Hause Jasc Software stammt und sich hervorragend als Bilderlieferant fr Animation Shop eignet. Die einfachste Variante einer GIF-Animati-
1. Bild fr Bild: Diashow erstellen

In diesem Workshop zeigen wir Ihnen, wie Sie mit Animation Shop 3 von Jasc Software (fr Windows 95/98, NT 4, 2000, unter www.jasc.de, 39 Euro) in nur wenigen Minuten Ihre eigenen Web-Filmchen gestalten. Eine auf 30 Tage Laufzeit beschrnkte, voll funktionsfhige Demoversion (10,9 MB) des leistungsstarken und zugleich leicht zu
Vom Bild zum Film: Zu Beginn importieren Sie die Einzelbilder fr die Animationssequenz (Dialogbox rechts). In der Animationsvorschau sind smtliche Einzelbilder mit attraktiven bergngen versehen (Punkt 1)
92
P Grundlagen
pWorkshops
P Utilities
Animierte GIFs
V unter jedem Bild gibt Inhalt Seite die Verzgerungszeit und 1. Bild fr Bild: Diashow erstellen 92 damit die Anzeigedauer an. 2. Animationseffekte fr die Homepage 94 Sie knnen schon jetzt einen Blick auf die Animation Ksten: werfen fr die AnimatiVideobilder als animierte GIFs 94 onswiedergabe klicken Sie Weitere Software 95 einfach aufs Icon mit dem Filmstreifen in der Symbolleiste ganz rechts. Nun ffnet sich ein Vorschaufenster, stellungsdialog die Umbltter-Variante von das die Animationssequenz Unten links auszuwhlen. Besttigen Sie in einer Endlosschleife anzwei Mal mit OK, schon errechnet Anizeigt. Beim Betrachten des mation Shop automatisch die ZwischenbilFilmchens fallen die direkder fr den bergangseffekt, die es als Zelten Sprnge von Bild zu Bild len E2 bis E6 mit einer Verzgerungsunangenehm auf. Um die zeit von jeweils 0,2 Sekunden in den AniSequenz optisch aufzumationsstreifen einfgt. lockern, nutzen Sie die vielseitige berblendungsfunkMetamorphosen tion von Animation Shop. Wiederholen Sie nun den Vorgang fr das Klicken Sie auf die erste Zelnchste Einzelbild E7, und suchen Sie Effektvoll: Die bergangseffekte von Animation Shop machen jeden Bildle, und rufen Sie die Dialogsich dafr eine andere bergangsvariante wechsel zu einem visuellen Erlebnis (Punkt 1) box Bildbergang einfaus, zum Beispiel das sehr effektvolle Vergen aus dem Men Effekdrehen. Danach verpassen Sie dem Foto teren Fensterbereich erhhen Sie zunchst te auf (2 Abbildung oben links). Im Fensvon der Innenausstattung, das nun an die die Verzgerungszeit (2 Abbildung linke ter links sehen Sie das Startbild, in der MitZellennummer E13 vorgerckt ist, einen Seite unten). Als Maeinheit verwendet te die Effektvorschau, rechts das Endbild. Metamorphose-Effekt. Die Frontansicht Animation Shop Hundertstelsekunden, eiAktivieren Sie zunchst in der Sektion E19 blenden Sie im nchsten Schritt per ne Verzgerungszeit von 300 bewirkt alEndbild die Option Animationsbild, so Jalousie in die Heckansicht ber. so eine Anzeigedauer von 3 Sekunden pro dass der bergang zwischen den jeweiligen Das letzte Bild, jetzt an der Stelle E25, Bild. Unter Position innerhalb des RahFotos in der Animationssequenz erfolgt. Bei blenden Sie nach Wei aus. Dazu whlen mens whlen Sie die Option Zentriert, den voreingestellten Effektparametern unSie im Dialog Bildbergang einfgen unum jedes Einzelbild zentriert anzuordnen. ter bergangseigenschaften mit einer ter Endbild die Option Leinwandfarbe, Besonders wichtig ist die Checkbox bergangslnge von zwei Sekunden und die Sie zuvor als Wei definiert haben, und Gre anpassen im Dialog ganz unten zehn Bildern pro Sekunde wrde ein einziden bergang Metamorphose. links. Nur wenn Sie hier ein Hkchen setger bergang 20 Einzelbilder bentigen Nun sind smtliche Einzelbilder mit atzen, werden die Bilder automatisch auf das damit wre die Datei am Schluss zu gro traktiven bergngen versehen da von Ihnen vorgegebene Format von 320 x fr einen effizienten Einsatz im Internet. kommt schon mehr Freude beim Betrach200 Pixel herunterskaliert. Reduzieren Sie deshalb diese beiden Werte ten der Animationsvorschau auf, wie 2 die Besttigen Sie Ihre Eingaben abschlieauf eine Sekunde und fnf Bilder pro Segroe Abbildung oben auf der ersten Seite end mit OK, um die Fotos in den Anikunde. Die Zahl der bentigten Zwidieses Beitrags anschaulich zeigt. mationsstreifen einzufgen. schenbilder reduziert sich dadurch auf fnf. berblendungen gestalten Im Pull-down-Men berVergrern Sie nun den Animationsstreigang finden Sie viele interfen auf Bildschirmbreite, und whlen Sie essante berblendeffekte. gegebenenfalls einen kleineren ZoomfakAuflsen zerlegt das Bild tor, um alle Einzelbilder der Animation im in einzelne Pixelkrnchen, berblick zu haben. Das vormalige, leere Irisblende bewirkt einen Startbild mit der Bezeichnung E6 ist ans Foto-Effekt, whrend UmEnde der Animation gewandert. blttern die einzelnen BilAktivieren Sie es per Mausklick, und beder wie die Seiten einer Zeitfrdern Sie es mit einem Druck auf die schrift ineinander berge<Entf>-Taste in den Papierkorb. Nun behen lsst. Whlen Sie letztesteht die Animationssequenz aus fnf Zelren Effekt aus, und klicken len mit den Bezeichnungen E1 bis E5, Sie auf die Schaltflche Qualittsprfung: Vor dem Speichern der fertigen GIF-Animation legen Sie wobei E fr Einzelbild steht. Der Wert Konfigurieren, um im Ein- den Kompromiss zwischen Bildqualitt und Dateigre fest (Punkt 1)
93
Animierte GIFs
P Grundlagen
pWorkshops
P Utilities
setzen Sie die Anzahl der tei sowie die fertige Animation im GIF-ForFarben auf den Maximalmat finden Sie auf der C Heft-CD. wert und aktivieren den Pa2. Animationseffekte fr lettenyp: Octree, optidie Homepage miert. Bei Bildern mit einEine zu statisch wirkende Homepage lsst heitlichen Farben kann sich durch animierte Aufzhlungszeichen auch die Farbreduktions(neudeutsch Bullets), bewegte Initialen methode: hnliche Farben oder Trennbalken im Trickfilm-Stil deutbessere Ergebnisse bringen. lich aufwerten. Bevor Sie loslegen und Ihre Im letzten Fenster des OptiWeb-Seiten mit den im Folgenden erklrmierungs-Dialogs erhalten ten Effekten versehen, sollten Sie sich allerSie Informationen ber die dings ganz genau berlegen, wie viele AniDateigre und die vorausGut angezeigt: Im Vorschaumodus der Qualittsoptimierung knnen Sie mationen Ihre Homepage vertrgt. sichtliche bertragungszeit die Auswirkungen der Kompressionseinstellungen begutachten (Punkt 1) Viele Homepage-Betreiber sind einer bei verschiedenen bertrawahren GIF-Manie verfallen und haben ihgungsraten vom 14,4-KBaudDie richtigen Einstellungen re Seiten mit Dutzenden von bewegten Modem bis hin zur ISDN-Verbindung. AufDie eigentliche Diashow ist damit vollenBildchen ausgeschmckt solch vergrund der bergnge bringt es die Beidet, doch bevor Sie sie in Ihre Website einschwenderischer Umgang mit animierten spieldatei auf 512 KB das ist kein Problem binden, mssen Sie noch die richtigen GIFs zeugt nicht gerade von Professionafr Anwender mit ISDN- oder DSL-VerbinSpeicheroptionen whlen. Gehen Sie unter litt. Wie in vielen Gestaltungsbereichen dung, bedeutet jedoch Wartezeiten zwiDatei, Speichern unter, und geben Sie der gilt auch hier die Devise: Weniger ist mehr schen 1,5 und 6,5 Minuten fr die Besitzer Datei einen aussagekrftigen Namen (2 Beitrag ab Seite 26). langsamerer Modems. Deshalb sollten Sie zum Beispiel AUTO_SHOW.GIF. Sobald Sie solch eine aufwendige Animation nicht diIhre Eingaben mit einem Klick auf SpeiAnfangsbuchstaben animieren rekt auf Ihre Homepage stellen, sondern sie chern besttigt haben, gelangen Sie autoEin animierter, groer Anfangsbuchstabe zum optionalen Download mit einem Hinmatisch in den Assistenten fr die Animazur Einleitung eines Textblocks lsst sich weis auf die Dateigre anbieten. tionsqualitt (2 Abbildung vorhergehende mit Animation Shop in wenigen Schritten Um die Datei zur spteren NachbearbeiSeite unten rechts). erstellen. Erzeugen Sie eine neue Datei, tung im Originalzustand zu speichern, Animation Shop schliet in der Stanund geben Sie eine Breite und Hhe whlen Sie Datei, Speichern unter und dardeinstellung einen Kompromiss zwivon 100 x 100 Pixeln sowie die Leinwandden Dateityp: Animation Shop Animatischen Bildqualitt und Dateigre, den Sie farbe: Transparent vor. Setzen Sie nun on mit der Datei-Endung MNG. Diese Dajedoch mit dem Schieberegler links und dem Dialog Konfigurieren an Ihre eigenen Vorstellungen anpassen knnen. Als Faustregel gilt, dass bei Bildern mit Mit Animation Shop verwandeln vielen Farben also auch bei unserer BeiSie Einzelbilder aus Ihren Videospieldatei die Stufe 4 eingestellt sein sequenzen im AVI-, MPEG- oder sollte, der Schieberegler sich also ganz WMF-Format im Handumdrehen oben bei Hhere Bildqualitt befinden in animierte GIFs. Dazu whlen sollte. Alle niedrigeren Einstellungen spaSie einfach Datei, ffnen und ren Speicher, indem sie Farben weglassen, Importoptionen: In diesem Dialog legen Sie die Optionen fr die selektieren die gewnschte Viwas bei Fotovorlagen zu unbefriedigenden deodatei. Daraufhin erscheint der Umwandlung von Videomaterial in animierte GIFs fest Ergebnissen fhren kann. Dialog Importoptionen. Im obeNach einem Klick auf Weiter berechren Fensterbereich legen Sie fest, ob smtliche Einzelbilder oder nur Bilder aus einem ganz benet Animation Shop die gewhlten Umstimmten Bereich des Videos eingefgt werden sollen. Da Videodateien oftmals aus Hunderten rechnungsmanahmen. Bei einer kleinen oder gar Tausenden von Einzelbildern bestehen, ist der Bereich Sampling in der unteren Datei geht dies recht flott vonstatten. Fensterhlfte von groer Bedeutung. Hier geben Sie beispielsweise an, dass Sie nur jedes Klicken Sie erneut auf Weiter, und bezehnte oder zwanzigste Bild verwenden mchten, damit die Dateigre der fertigen GIF-Animatrachten Sie die Animation in der Optition nicht ins Unermessliche steigt. mierungs-Vorschau (2 Abbildung oben). Nach dem Import empfiehlt sich natrlich auch eine Verkleinerung des Bildformats imWenn Sie mit dem Ergebnis zufrieden merhin 720 x 576 Pixel im DV-Vollformat mit dem Befehl Animation, Animationsgre versind, bernehmen Sie die Einstellungen ndern. Grer als 320 Pixel in der Breite sollte keine GIF-Animation ausfallen. Damit die Einmit Weiter, andernfalls klicken Sie auf zelbilder nicht zu schnell abgespielt werden, markieren Sie alle Zellen im Animationsstreifen Zurck und ndern die Werte im Dialog mit <Strg>-<A> und rufen mit <Alt>-<Eingabe> den Dialog Einzelbildeigenschaften auf, in dem Konfigurieren. Sollte es zum Beispiel bei Sie die Wiedergabezeit entsprechend erhhen. einer niedrigen Qualittsstufe zu deutlich sichtbaren Farbflchen gekommen sein,
Videobilder als animierte GIFs
94
P Grundlagen
pWorkshops
P Utilities
Animierte GIFs
der Zelle aus und betten ihn zunchst unkenntlichen Wirbel entsteht, per Mausklick ein. Um aus aktivieren Sie die Checkbox Effekt in entdem Buchstaben ein wirkgegengesetzter Richtung einfgen, bevor lich bewegendes Initial zu Sie die Berechnung mit einem Klick auf machen, greifen Sie auf die OK starten. Nun ist ein AnimationsstreiFunktion Spezialeffekt einfen mit 21 Zellen entstanden, in dem das fgen aus dem Men Efursprngliche A ganz nach hinten in die fekte zurck. Als StartZelle E 21 gewandert ist. bild legen Sie das AnimatiKlicken Sie diese Zelle an, und whlen onsbild fest, im Pull-downSie erneut Effekte, Spezialeffekt einfgen. Men Effekt haben Sie die Deaktivieren Sie die Checkbox Effekt in Qual der Wahl unter mehr entgegengesetzter Richtung einfgen, so als 20 animierten Spezialefdass die Verwirbelung des Buchstabens Letternwirtschaft: Buchstaben und Texte lassen sich auf vielfltige Weise in fekten. Bildrauschen lsst jetzt am Ende der Transformation steht, eine Animation einfgen, die der Website Pep verleiht (Punkt 2) den Buchstaben im Look eiund besttigen Sie mit OK. nes gestrten Fernsehbildes mit dem Werkzeug Referenzpunkt (Faerscheinen, Dehnen zoomt das A an Nahtloser bergang denkreuz-Icon in der Werkzeugleiste) einen den Betrachter heran, Drehen rotiert den Wenn Sie nun die Animationsvorschau Punkt exakt in der Mitte der AnimationsBildinhalt um 360 Grad, whrend Kratstarten, gehen beide Animationssequenzen zelle bei den Koordinaten 50,50. zer dem Bild typische Streifen wie bei eibei der Endloswiedergabe nahtlos ineinanDabei ist Ihnen die Koordinatenanzeige nem alten Film hinzufgt. der ber. Nur am Schnittpunkt zwischen am unteren linken Fensterrand behilflich. Im Beispiel whlen Sie den Effekt Wirder letzten und der ersten Animationszelle Solche Referenzpunkte helfen Ihnen beim bel in der Liste ganz unten aus (2 Abbiltritt eine unschne Pause ein, die Sie eliexakten Ausrichten von Objekten wie dem dung unten links). Die Effekteigenschafminieren, indem Sie die Zelle E41 mit der Initial, das Sie nachfolgend per Textwerkten im Dialog sind im Wesentlichen iden<Entf>-Taste lschen. zeug (A-Symbol in der Werkzeugleiste) tisch mit den Einstellmglichkeiten des Speichern Sie jetzt die Datei zunchst einfgen. berblendungs-Fensters aus dem ersten im Animation-Shop-Format MNG und Beispiel dieses Beitrags. Fr eine optimale nachfolgend im GIF-Format ab. Belassen Spezialeffekte einsetzen Wiedergabe der Spezialeffekte stellen Sie Sie die automatisch ermittelten StandardKlicken Sie mit dem Textcursor in die Anidie Effektlnge auf 2 Sekunden und die einstellungen weil die Animation nur mationszelle, und geben Sie im nun erBilder pro Sekunde auf 10 EpS ein. Daber drei Farben verfgt, beansprucht sie scheinenden Dialogfenster Text einfgen durch enthlt die fertige Animation 20 Eintrotz der hohen Zahl an Einzelbildern lefolgende Parameter ein: Schriftart: Arizelbilder. Damit der Buchstabe aus einem diglich 18 KB Speicherplatz. al, Schriftschnitt: Fett, Schriftgrad: 72 und Darstellung: Antialiasing (2 Abbildung oben). Klicken Sie danach ins weie EingabeNeben Jasc Animation Shop gibt es zahlreiche weitere Tools, um animierte GIFs zu erstellen. feld, um dort den Buchstaben A einzugeHier eine Auswahl: ben. Ignorieren Sie die Warnung, dass der ULead GIF Animator 5: Preiswertes Tool fr Windows 95/98/ME, NT 4 und 2000, 45,95 Euro, Text fr die Animation zu gro sei. Mit Hilvoll funktionsfhige 15-Tage-Testversion (10,3 MB, Download unter www.ulead.de), mit fe des zuvor gesetzten Referenzpunktes eingngiger Benutzerfhrung und vielen Zusatzfunktionen, zum Beispiel leistungsstarken richten Sie den Buchstaben exakt mittig in Grafikwerkzeugen mit Ebenenfunktion und automatischem Tweening zum Gestalten aufwendiger Animationen per Mausklick. KoolMoves 4.2.3: Dieses englischsprachige Tool fr Windows 95/98/ME, NT 4, 2000 und XP, 49 Dollar, Demoversion (3 MB) unter www.koolmoves.com und auf C Heft-CD, glnzt durch viele Spezialeffekte, Ebenenverwaltung und die Mglichkeit, Animationen auf Wunsch als Flash-Film im Shockwave-Format abzuspeichern. Xara 3D 5.0: Leicht zu bedienendes Programm fr 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 auf C HeftCD, 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 als Bildschirmschoner exportieren. Animake 2.7: Einfaches, kostenloses Programm fr Windows 95/98/ME, NT 4, 2000 und XP, Download (2,1 MB) unter www.rms.to und auf C Heft-CD zum Importieren, Verknpfen und Animieren von vorbereiteten Einzelbildern. Die Freeware kann auch Videodateien im MPEGRundherum: Der Effekt Wirbel ist einer von ber 20 Format importieren.
Weitere Software
spektakulren Spezialeffekten (Punkt 2)
95
wir T-Online ein. Auf der rechten Seite des Dialogfelds erscheinen nun die leeren Eingabefelder fr diesen Eintrag. Im Feld Host tragen Sie die Adresse ein, zum Beispiel home-up.t-online.de (ohne Anfhrungszeichen) fr T-Online. Die in Ihrem Fall richtige Adresse finden Sie auf der Website Ihres Providers in den Hilfetexten. Im Bereich Logontyp aktivieren Sie die Option Normal. Jetzt gibt Filezilla die Eingabefelder fr Benutzername und Passwort frei. Tragen Sie die Daten ein, fr T-Online als Benutzer ftp (ohne Anfhrungszeichen) und als Passwort einen Punkt (.). Weil die Surfer bei T-Online bereits bei der Einwahl identifiziert werden, ist hier kein extra Passwort erforderlich. Zahlreiche ffentliche FTP-Server beispielsweise ftp.netscape.com erlauben es, eine anonyme Verbindung aufzunehmen. Falls Sie so einen ffentlichen FTP-Server verwenden, belassen Sie einfach die Einstellung Anonym.
Daten hochladen
Um Ihre Homepage-Dateien vom PC auf den Webserver zu bertragen, verwenden Sie am besten ein FTP-Tool. Wie der Upload funktioniert, zeigen wir am Beispiel von Filezilla.
Mit einem FTP-Programm bertragen Sie Dateien und ganze Verzeichnisse von Ihrem PC auf Ihren Webserver. Auf dem Server lschen und verschieben Sie damit auerdem Dateien oder erzeugen neue Verzeichnisse. Wie Sie dabei vorgehen, zeigt Ihnen dieser Artikel am Beispiel der ausgereiften Freeware Filezilla 2.2.1a fr Windows 95/98/ME, NT 4, 2000 und XP (Download unter http://filezilla.sourceforge.net). Weitere Informationen ber dieses Tool enthlt der Beitrag ber FTP-Programme, den Sie 2 ab Seite 126 finden. Die Grundlagen der Vorgehensweise lassen sich auch auf andere FTP-Tools als Filezilla bertragen, auch wenn die Menpunkte und Eingabefelder oft anders bezeichnet sind. Bei der Installation von Filezilla bernehmen Sie am besten smtliche Vorgaben des Setup-Programms. Dann sind alle notwendigen Module installiert, und es kann nichts schief gehen.
1. FTP-Server einrichten: Adresse, Name, Passwort

Wenn Sie einen bestimmten FTP-Server fter benutzen, tragen Sie dessen Verbindungsdaten in die Adressverwaltung von Filezilla ein. Danach whlen Sie zum Verbindungsaufbau nur noch den passenden Eintrag in einem Drop-down-Men aus. Rufen Sie den Menpunkt Datei, Seiten Verwaltung auf. Seite gibt hier das englische site wieder eine nicht besonders gelungene bersetzung. Im Dialogfeld Servermanager sehen Sie links eine Liste mit den vorhandenen FTP-Servern. Sie sollte zunchst leer sein, nur der Ordner Eigene FTP Seiten ist vorhanden. Mit der Schaltflche Neue Seite erzeugen Sie einen leeren Eintrag. Als Erstes ndern Sie den vorgegebenen Namen, dazu klicken Sie den Listeneintrag einmal mit der Maus an. Im Beispiel tragen
Sicherheit frs Passwort Die Mglichkeit, das Passwort zu speichern, ist zweischneidig. Einerseits ist es sehr bequem, wenn Sie zum Verbindungsaufbau nur einen Mausklick brauchen. Andererseits ist das Sicherheitsrisiko recht hoch, denn Filezilla speichert die Verbindungsdaten und andere Programmoptionen in der Datei Filezilla.XML in seinem Programmverzeichnis. Das Passwort ist zwar verschlsselt abgelegt, doch ein Angreifer kann diesen Schutz leicht umgehen, indem er die ganze Datei kopiert und auf seinem PC mit Filezilla ffnet. Standardmig sollten Sie deshalb Passwort nicht speichern aktivieren. Damit sind die Eingaben komplett, und Sie schlieen das Dialogfeld mit der Schaltflche Speichern.
2. Oberflche anpassen: Schaffen Sie mehr Platz

Die Verbindung zu dem neu angelegten Server bauen Sie ber das Drop-downMen in der Symbolleiste ganz links auf. Whlen Sie aus dem Men den gewnschten Eintrag, im Beispiel T-Online. Danach schickt Filezilla entsprechende Kommandos an diesen FTP-Server und meldet sich an. Wenn Sie das Passwort nicht gespeichert haben, fragt ein Dialogfeld danach. Die FTP-Kommandos und Antworten des Servers erscheinen im Bereich unterhalb der Symbolleiste (2 Abbildung oben). PC-WELT SONDERHEFT 2/2004
96
P Grundlagen
pWorkshops
P Utilities
FTP-Upload
Workshops
Schnelle FTP-Verbindung
Wenn Sie nur schnell eine Verbindung zu einem FTP-Server aufbauen wollen, ist es nicht notwendig, dass Sie umstndlich den Servermanager bemhen. Unter der Symbolleiste zeigt Filezilla mehrere Eingabefelder fr Adresse, Benutzer und Passwort an. Tragen Sie hier die Verbindungsdaten fr den FTP-Server ein, und klicken Sie ganz rechts auf die Schaltflche Verbinden. Das macht vor allem bei anonymen FTP-Servern Sinn, die ohne Passwort frei zugnglich sind. brigens speichert Filezilla die eingetippten Daten: Wenn Sie rechts neben der Verbinden-Schaltflche auf das Pfeilsymbol klicken, ffnet das Tool ein Men mit vorhandenen Adressen.
hin auf, Sie mssen zur Ansicht den Bereich nur wieder einblenden. Auch den Dateibaum bei der Lokalen Seite bentigen Sie nicht schalten Sie ihn ber Ansicht, Lokale Ordneransicht aus. ber das Men Ansicht stehen noch weitere Optionen bereit probieren Sie ruhig ein wenig herum.
3. File-Transfer: Dateien und Verzeichnisse bertragen

Die bertragung einer Datei oder eines Ordners ist denkbar einfach: Ziehen Sie das Objekt per Drag & Drop von der Lokalen Seite auf die Serverseite oder umgekehrt. Filezilla reiht das Objekt daraufhin in die Warteschlange ein und beginnt mit der bertragung. Beachten Sie, dass sich aus der Ordneransicht keine Objekte in das andere Fenster ziehen lassen. Das klappt nur im Dateibereich. Sie knnen natrlich mit den bei Windows blichen Methoden mehrere Dateien oder Verzeichnisse markieren. Wenn Sie die <Strg>-Taste gedrckt halten, markieren Sie mit einem Mausklick zustzliche Dateien. Mit gedrckter <Shift>-Taste markieren Sie alle Verzeichniseintrge, die zwischen dem aktuell markierten Eintrag und dem angeklickten Eintrag liegen. Mit der Tastenkombination <Strg>-<A> markieren Sie alle Daten und Unterverzeichnisse. Zustzliche Befehle ber das Kontextmen eines Objekts, das Sie mit der rechten Maustaste ffnen, stehen einige zustzliche Befehle bereit. Der genaue Wortlaut ist bei der lokalen Festplatte und dem FTP-Server etwas unterschiedlich, die Wirkung aber identisch. Die Men-Eintrge Upload beziehungsweise Download starten sofort die
bertragung. Zur Warteschlange hinzufgen bernimmt das Objekt zunchst in die Warteschlange. Der Transfer beginnt allerdings noch nicht, Sie mssen ihn ber das Icon in der Symbolleiste oder den Menpunkt Warteschlange, Warteschlange abarbeiten extra starten. Mit Upload als fragt ein Dialogfeld nach einem besonderen Benutzernamen samt Passwort. Fr die Pflege einer Website ist diese Funktion nicht notwendig.
4. Datei-Operationen: Attribute und Kopieroptionen

Wenn eine Datei auf dem Ziel bereits existiert, dann fragt Filezilla mit einem Dialogfeld nach, was passieren soll. Standardmig schlgt das Tool vor, die vorhandene Datei zu ersetzen (2 Abbildung unten). Die Option Fortsetzen verwenden Sie bei abgebrochenen Datei-bertragungen. Umbenennen ruft ein Dialogfeld auf, in dem Sie einen neuen Datei- oder Ordnernamen eingeben. Bei berspringen macht Filezilla einfach mit der nchsten Datei in der Warteschlange weiter. Als Standardeinstellung macht berschreiben falls neuer Sinn. Damit markieren Sie auf der lokalen Festplatte einfach alle Dateien, Filezilla kopiert aber nur die genderten Dateien auf den FTP-Server. Zustzlich aktivieren Sie unten rechts Immer diese Aktion bentzen, wenn eine Datei bereits existiert sonst nervt Filezilla bei jeder einzelnen Datei. Sie ndern das Verhalten jederzeit ber Transfer, Datei existiert Einstellungen. Server-Dateien verwalten Die Verwaltung von Dateien funktioniert im Bereich Serverseite genau wie auf der lokalen Festplatte. ber das Kontextmen stehen Befehle zur Verfgung, die fr sich sprechen: Ansehen/bearbeiten, Lschen oder Verzeichnis erstellen und so weiter. Der Befehl Eigenschaften ruft auf der Lokalen Seite den bei Windows blichen Eigenschaftendialog auf. Auf der Serverseite gibt es allerdings eine Besonderheit, hier nennt sich der Menpunkt Dateiattribute. Weil die meisten Web- und FTP-Server mit Unix arbeiten, zeigt das Dialogfeld mehr Optionen fr Zugriffsrechte, als bei Windows blich sind. Normalerweise mssen Sie daran nichts ndern, es sei denn, Sie bertragen ein ausfhrbares CGI-Script. Mehr hierzu lesen Sie 2 ab Seite 44.
Darunter sehen Sie links die Dateien auf Ihrer Festplatte (Lokale Seite), rechts erscheinen die Verzeichnisse und Dateien des FTP-Servers (Serverseite). Ganz unten zeigt Filezilla die gerade laufenden Dateibertragungen und die noch ausstehenden in der Warteschlange an. berflssiges ausblenden Um Platz im Programmfenster zu schaffen, lassen sich die verschiedenen Elemente ber die Symbolleiste ausschalten und bei Bedarf wieder einschalten. Die FTP-Kommandos interessieren normalerweise nicht. Nur wenn Fehler auftreten, lsst sich damit leichter die Ursache ermitteln. Blenden Sie den Bereich ber das entsprechende Symbol oder Ansicht, Nachrichten Log aus. Die Kommandos zeichnet Filezilla im Hintergrund weiter-
Rckfrage: Ist eine Datei in der Warteschlange im Zielverzeichnis bereits vorhanden, will das FTP-Programm Filezilla wissen, wie es verfahren soll. Als Standardeinstellung macht berschreiben falls neuer Sinn (Punkt 4)
97
bung. Da Sie fr Ihr Hobby-Projekt wohl kaum eine professionelle Online-Redaktion engagieren werden, mssen Sie eben Ihr eigener Redakteur sein. Dazu gehren die Auswahl und Bearbeitung von Texten und Abbildungen ebenso wie der sorgfltige Korrekturgang am Schluss. Denn auch im Web wirken Fehler alles andere als professionell. Sie knnen auch Freunde oder Bekannte bitten, Ihre Texte vor der Verffentlichung noch einmal durchzulesen.
3. Texte gezielt frs Web aufbereiten

Negativ-Beispiel: Sie haben eine Seite mit interessanten Inhalten gefunden, doch das Lesen der Informationen ist qulend. Die Schrift ist zu klein, die Abstze kleben zu dicht aneinander. Die Texte dehnen sich lang wie Kaugummi. Das Lesen ermdet Sie, denn es fehlt die Abwechslung. So machen Sies besser: Lesen am Monitor ermdet schneller als das Lesen von Texten auf Papier. Oft werden die Texte am Bildschirm nur berflogen, gescannt. Fassen Sie sich deshalb mglichst kurz. Lockern Sie Ihre Texte auf, beispielsweise durch hufige Absatzumbrche, Zwischenberschriften, Farben und kleine Symbolgrafiken (2 Abbildung rechte Seite oben). Vermeiden Sie Phrasendrescherei und Fllfloskeln. Wenn Sie im Medium Web nicht nur publizieren, sondern auch wirklich gelesen werden wollen, heit das Motto: In der Krze liegt die Wrze.
Besuchermagnet
Ein guter Web-Auftritt ist ansprechend und bedienerfreundlich gestaltet und bietet spannende Inhalte. Wir verraten Ihnen, wie Sie Ihre Site so konzipieren, dass Besucher gern wiederkommen.
Von Johann-Christian Hanke
Liebe zu einem Thema, PC-Begeisterung und etwas HTML reichen lngst nicht mehr aus, um eine erfolgreiche Website zu erstellen. Die Surfer sind anspruchsvoll geworden, der <Back>-Button ist schlielich nur einen Mausklick entfernt. Lernen Sie also aus den Negativ-Beispielen, die es im Internet zuhauf zu besichtigen gibt, und machen Sie Ihre Homepage zu einem Besuchermagneten.
1. Zielgruppenspezifische und aktuelle Inhalte bieten

Negativ-Beispiel: Sie gelangen auf eine viel versprechende und vielleicht noch aufwendig gestaltete Seite. Die Inhalte halten allerdings nicht, was das schicke Design, die Top-URL und aufwendige Bildschirmeffekte versprechen. Die Informationen sind beraus drftig, schlecht recherchiert und darber hinaus auch noch uralt fr Besucher ist wenig zu holen. So machen Sies besser: berlegen Sie sich als (knftiger) Webmaster, welchen Zweck
Sie mit Ihrer Site verfolgen. Erstellen Sie ein Konzept fr die Inhalte. Worber mchten Sie Ihre Besucher informieren? An wen wollen Sie sich wenden? Ihre Site kann nicht fr alle Surfer interessant sein: Suchen Sie sich eine bestimmte Zielgruppe, die Sie adquat mit Inhalten versorgen. Egal ob Familien-, Firmen- oder Vereins-Homepage: Pflegen und aktualisieren Sie Ihre Inhalte in regelmigen Abstnden. Dabei sollten Sie allerdings den Eindruck vermeiden, dass es sich bei Ihrer Seite um eine endlose Baustelle handelt.
4. Angemessene Typographie fr den Bildschirm beachten

Negativ-Beispiel: Auf manchen Seiten klicken Sie auf ein unterstrichenes Wort, und es passiert nichts. Denn der vermeintliche Link war gar keiner. Auch sonst ist die Typographie vieler Seiten mangelhaft, da die Gestalter die Eigenheiten des Mediums Web nicht beachtet haben. So machen Sies besser: Unterstreichungen sollten Sie ausschlielich fr Hyperlinks reservieren das ist eine eiserne Regel. Aber auch die Formate kursiv oder fett wirken im Web anders als im Druck: Am Bildschirm sehen schrg gestellte Textpassagen lngst nicht so gut aus wie auf dem Papier. Auf Web-Seiten eignet sich zur optischen Hervorhebung eher das Format fett. Im Druck wiederum besitzen die so genannten Serifenschriften (etwa Times, Ga-
2. Texte sorgfltig auswhlen und redigieren

Negativ-Beispiel: Auf manchen Seiten hat sich jemand mit der Beschreibung seines Hobbys sehr viel Mhe gegeben. Doch die Texte wirken nicht lebendig, sondern hlzern, und wimmeln nur so von Fehlern. So machen Sies besser: Legen Sie beim Erstellen der Inhalte die gleiche Sorgfalt an den Tag wie beim Schreiben einer Bewer-
98
P Grundlagen
pWorkshops
P Utilities
6. Navigationspfad angeben
Negativ-Beispiel: Nicht immer ist bei Websites klar, wo oben und unten ist. Dann kann es leicht passieren, dass Besucher sich hoffnungslos in einer Kategorie verirren und schwer zu bergeordneten Kategorien zurckfinden.
Tipps & Tricks
Inhalt 1. Zielgruppenspezifische und aktuelle Inhalte bieten 2. Texte sorgfltig auswhlen und redigieren 3. Texte gezielt frs Web aufbereiten 4. Angemessene Typographie fr den Bildschirm beachten 5. Ein einheitliches Erscheinungsbild schaffen 6. Navigationspfad angeben 7. Per Home-Logo zur Startseite zurck fhren 8. Tagline den Zweck der Seite beschreiben 9. Die rechte obere Ecke fr ein Suchen-Feld nutzen 10. Auf Frames verzichten 11. Hyperlinks richtig kennzeichnen 12. Alternativtexte fr Grafiken nutzen 13. Den richtigen Seitentitel whlen 14. <Back>-Button nicht deaktivieren 15. Korrekte Grafiknamen whlen
Seite
98 98 98 98 99 99 99 100 100 100 100 100 101 101 101
So machen Sies besser: Eine Lsung heit Breadcrumb Navigation (deutsch Brotkrumennavigation). Fgen Sie auf jeder Seite einen aus Kurze Abstze, Farben, Symbole und sachliche Schrift: Hier sind die Texte Hyperlinks aufgebauten, optimal fr die Darstellung am Bildschirm aufbereitet (Punkte 3 und 4) hierarchischen Navigationspfad ein. Dieser kann etwa ramond) einen hohen Stellenwert. Ihre so aussehen: Home Musik Jazz. Zeigen kleinen Fchen betonen die Leselinie Sie Ihren Besuchern also die jeweils berund erleichtern das Lesen. Auf Web-Seiten geordneten Kategorien und zum Schluss dagegen sind sachliche, serifenlose Schrifdie aktuelle Position. So knnen sie sich ten (zum Beispiel Arial, Helvetica) angesagt, besser orientieren (2 Abbildung unten). da sie auf den Bildschirmen besser zur GelSolch ein Navigationspfad lsst sich dynatung kommen (2 Abbildung oben). misch mit Hilfe einer Programmiersprache Druckmedien und das Web gehen auch erzeugen, aber auch von Hand auf jeder mit dem Thema Farbe anders um: Wheinzelnen HTML-Seite einbauen. Eine anrend etwa die meisten Bcher aus Kostendere mgliche Lsung: Heben Sie die entgrnden in Schwarzwei gedruckt werden sprechende Position in Navigationsleisten mssen, sollten Sie Ihre Bildschirmtexte optisch hervor, zum Beispiel durch verruhig durch Farben auflockern. schiedenfarbige Registerzungen.
steckt, und der Navigationspfad ist nicht besonders klickfreundlich platziert. So machen Sies besser: Platzieren Sie auf jeder Unterseite eine Grafik in der linken oberen Ecke, die Sie in einen Hyperlink umwandeln. Dieser Hyperlink fhrt stets zur Startseite zurck (2 Abbildung auf der folgenden Seite oben). Der Einsatz solch eines Home-Logos ist lngst zu einem Muss fr professionelle Websites geworden. Haben Sie sich einmal daran gewhnt, fallen Ihnen jene Seiten umso unangenehmer auf, die diese Technik nicht verwenden.
5. Ein einheitliches Erscheinungsbild schaffen

Negativ-Beispiel: Der Zustand so manchen Web-Auftritts lsst sich nur als gestalterisches Chaos bezeichnen: Das Layout der einzelnen Unterseiten ist nicht aufeinander abgestimmt. Manche Seiten ffnen sich in einem Extra-Fenster, andere dagegen nicht. Beim Surfen verlieren Besucher leicht die Orientierung und erkennen nicht, dass sie sich innerhalb von ein und derselben Prsenz bewegen. So machen Sies besser: Achten Sie auf ein einheitliches Erscheinungsbild, auf Ihr so genanntes Corporate Design. Sie mssen kein Grafiker sein, um das zu erreichen. Sie brauchen nur Folgendes zu beherzigen: Verwenden Sie berall eine einheitliche Schriftart. Nutzen Sie aufeinander abgestimmte Farben. Schon das auf jeder Seite platzierte Logo oder die einheitliche Navigationsleiste sorgen dafr, dass der Benutzer Ihren Web-Auftritt als Ganzes erfasst.
7. Per Home-Logo zur Startseite zurckfhren

Negativ-Beispiel: Sie befinden sich auf einer Web-Prsenz und mchten von Unterseiten mglichst schnell wieder zur Startseite zurck. Doch der Home-Link ist ver-
Orientierung leicht gemacht: Ein Navigationspfad wie bei Web.de fhrt schnell zurck zu bergeordneten Kategorien. Der Besucher wei jederzeit, wo innerhalb der umfangreichen Website er sich gerade befindet (Punkt 6)
99
Tipps & Tricks
P Grundlagen
pWorkshops
P Utilities
schlagen. Die Suchfunktion muss ran. Doch manchmal ist es ausgerechnet das Suchen-Feld, welches die SiteMacher besonders gut vor ihren Besuchern versteckt haben.
So machen Sies besser: Platzieren Sie das Suchen-Feld PC-WELT-Site: Egal, wo Sie sich gerade befinden ein Klick auf das Home- an prominenter Stelle, zum Logo in der linken oberen Ecke fhrt stets zurck zur Startseite (Punkt 7) Beispiel in der rechten oberen Ecke (2 Abbildung rechts unten). Diese Stelle nehmen die Be8. Tagline den Zweck der Seite 11. Hyperlinks richtig sucher am schnellsten wahr. Deshalb platbeschreiben kennzeichnen zieren zahlreiche Webmaster an dieser Negativ-Beispiel: Sie gelangen durch Zufall Negativ-Beispiel: Auf manchen Seiten erStelle brigens nicht nur das Suchen-Feld, auf eine bestimmte Seite. Worum es geht, kennen Sie nicht, ob sich hinter einer Textsondern hufig auch einen Link zu einer lsst sich aber nicht auf Anhieb verstehen. passage oder einer Grafik ein Hyperlink beHilfeseite. Schlielich ist das Hilfe-Men Auf vielen Seiten mssen Sie das Thema erfindet. Nichts deutet auf den weiterfhrenauch bei den meisten Programmen rechts raten. Die entsprechenden aussagekrftiden Querverweis hin. oben zu finden. gen Informationen werden Ihnen auf der 10. Auf Frames Startseite vorenthalten, die Site-Betreiber verzichten fallen gleich mit der Tr ins Haus. Negativ-Beispiel: Sie gelangen durch den direkten Link So machen Sies besser: Beschreiben Sie einer Suchmaschine auf eiden Zweck Ihrer Seite. Das gelingt beine interessante Web-Seite. spielsweise durch einen gut sichtbaren Allerdings vermissen Sie jegknappen Text, den Sie auf der Startseite liche Navigationsmglichplatzieren (2 Abbildung unten). Der amerikeit. Der berblick ber die kanische Usability-Experte Jakob Nielsen weitere Struktur der Prredet von einer Tagline. Solch ein Slogan senz bleibt Ihnen verwehrt. Blickfang: Die rechte obere Ecke wird von den Besuchern bevorzugt. Desoder Untertitel hilft dem Besucher bei Der Grund: Sie sind auf halb platzieren viele Site-Betreiber Suchen-Felder an dieser Stelle (Punkt 9) der Orientierung. Verzichten Sie auf solch die isolierte Unterseite eieine Tagline nur dann, wenn Sie oder Ihre So machen Sies besser: Heben Sie Hyperner Frame-Struktur gelangt. Firma so bekannt sind, dass jeder wei, links optisch hervor. Das kann zum einen worum es bei Ihnen geht. durch das klassische Blau und die typische So machen Sies besser: Verzichten Sie ganz 9. Die rechte obere Ecke fr ein Unterstreichung erfolgen. Zum anderen einfach auf Frames! Bei Frames wird die SeiSuchen-Feld nutzen helfen auch kleine Grafiken oder Symbole te in mehrere (zu) kleine Unterseiten geNegativ-Beispiel: Bei vielen Seiten werden als Eyecatcher (2 Abbildung auf der rechstckelt, die teilweise individuell gescrollt Sie von der Wucht der Infos geradezu erten Seite oben). Das zustzliche Hervorhewerden mssen. Das Lesen wird dadurch ben durch Mouseover-Effekte kann den Link-Charakter erhhen. Whlen Sie sinnvolle Texte fr die LinkBeschreibung. Anstatt Weiterfhrende Informationen zum Thema Usability finden Sie hier zu schreiben, fomulieren Sie besser: Hier finden Sie weiterfhrende Informationen zum Thema Usability.
gerade auf kleinen Bildschirmen zur Qual. Mit einem Verzicht auf Frames befinden Sie sich brigens in guter Gesellschaft, denn die vor Jahren so hochgelobten Frames finden heutzutage immer weniger Anhnger. Selbst Frame-Vorreiter T-Online hat vor wenigen Monaten seine ehemals frame-gesteuerte Site in eine frame-freie Variante umgewandelt (2 groe Abbildung am Anfang dieses Beitrags). Auch die Firma Data Becker beispielsweise verzichtet auf ihrer Website seit einiger Zeit auf die RahmenTechnologie.
12. Alternativtexte fr Grafiken nutzen

Negativ-Beispiel: Auf vielen Seiten warten Sie oft lange auf den Aufbau eines Bildes, ohne vorher zu erfahren, was sich dahinter verbirgt. Vielleicht lohnt sich das Warten ja gar nicht? Besonders rgerlich ist es, wenn
Klare Ansage: Whlen Sie einen aussagekrftigen Slogan (Tagline) fr Ihre Seite. Die Abbildung zeigt die Tagline des Kommunikations-Designers Thomas Wirth auf www.kommdesign.de (Punkt 8)
100
P Grundlagen
pWorkshops
P Utilities
Tipps & Tricks
Buttons durch Grafiken dargestellt werden. In diesen Fllen knnen Sie erst klicken, wenn der Button voll geladen ist. So machen Sies besser: Verzichten Sie nie auf die Alternativtexte fr Ihre Grafiken. Geben Sie den Abbildungen einen beschreibenden Text mit auf den Weg. Dieser ist schon dann sichtbar, wenn die Grafik noch nicht geladen wurde. Viele Browser zeigen diesen Alternativtext auch als Tooltip an, wenn Sie den Mauszeiger ber einer Grafik parken. Auch Suchmaschinen knnen sich am Alternativtext orientieren, da reine Grafiken nicht indiziert werden. Fgen Sie den Alternativtext mithilfe des Attributs alt in den Tag <img> ein (mehr zu HTML-Tags lesen Sie im 2 Beitrag ab Seite 34). Schreiben Sie zum Beispiel innerhalb von <img>:
Hervorhebung: Heben Sie Hyperlinks optisch hervor. Das kann zum einen durch das klassische Blau und die typische Unterstreichung erfolgen. Zum anderen helfen auch kleine Symbole, wie hier unter www.pcwelt.de (Punkt 11)
HTML-Dokuments zwischen den Tags <title></title>. Schreiben Sie beispielsweise:
CODE: <title>Tipps und Tricks fuer Open Office</title>
CODE: alt="Zum Bestellformu lar"
14. <Back>-Button nicht deaktivieren

Negativ-Beispiel: Vielleicht ist Ihnen das auch schon einmal passiert: Sie klicken auf den <Back>-Button Ihres Browsers, weil Sie eine Seite verlassen wollen. Doch das gelingt Ihnen nicht Sie werden zurck auf diese Seite gezwungen. Schuld ist meist der Einsatz zweifelhafter Javascripts. So machen Sies besser: Vermeiden Sie Scripts, die den <Back>-Button deaktivieren und somit Besucher in Ihrer Prsenz gefangen halten. Ein derartig bevormundeter Besucher kommt so bald nicht wieder.
13. Den richtigen Seitentitel whlen

Negativ-Beispiel: Viele Seiten werden von Suchmaschinen nicht richtig prsentiert. Statt einer sinnvollen berschrift finden Sie den Text Kein Titel, Untitled Document, Neue Seite 2 oder etwas hnlich Nichtssagendes vor (2 Abbildung unten). So machen Sies besser: Vergessen Sie nie einen aussagekrftigen und beschreibenden Seitentitel. Daraus erzeugen die meisten Suchmaschinen die berschrift der Fundstelle. Schuld am hufigen Vergessen sind die HTML-Editoren. Sie setzen oft uninformative Platzhalter, ohne Sie ber die Wichtigkeit des Seitentitels zu informieren. Den Seitentitel platzieren Sie im Kopf des
die Schreibung der Grafiknamen. Im Unterschied zu Windows-Dateisystemen unterscheiden die meisten Webserver sehr penibel zwischen Gro- und Kleinschreibung. Wenn die Grafik Logo.gif heit, drfen Sie im Verweis also auch nicht logo.gif schreiben. Leerzeichen, Umlaute und andere Sonderzeichen haben in Grafik-Dateinamen grundstzlich nichts zu suchen. Wenn Sie solche solche Zeichen trotzdem einsetzen, fhrt das nmlich in vielen Fllen dazu, dass die Abbildung in manchen InternetBrowsern nicht korrekt angezeigt werden kann.
Mehr Infos
Internet Der Usability-Papst Jakob Nielsen ist unter www.useit.com im Internet, seine berhmte Kolumne Alertbox steht unter www.usabili ty.ch/alertbox/main.htm in deutscher bersetzung zur Verfgung. Die Themen Psychologie, Ergonomie, Usability und Kommunikation behandelt der Kommunikations-Designer Thomas Wirth auf seiner Website www.kommdesign.de. Bcher Jakob Nielsen, Homepage Usability. 50 enttarnte Websites, Markt+Technik, www.mut.de, 318 Seiten, ISBN: 3 827 26290 9, 49,95 Euro. Der Usability-Experte Nielsen analysiert in diesem Buch 50 internationale Sites. Thomas Wirth: Missing Links. ber gutes Webdesign, Hanser, www.hanser.de, 300 Seiten, ISBN: 3 446 22009 7, 49,90 Euro. Das flssig zu lesende Buch zur Website-Usability bietet viele Praxisbeispiele.
15. Korrekte Grafiknamen whlen

Negativ-Beispiel: Auf manchen Seiten werden Grafiken nicht richtig eingebunden. Statt dessen erscheinen an dieser Stelle lediglich rote Kreuze. Oft sind die Site-Betreiber ratlos, in der Vorschau hatte alles bestens funktioniert. So machen Sies besser: Whlen Sie immer nur Formate, die im Web auch problemlos darstellbar sind. Wir empfehlen entweder GIF oder JGP, das PNG-Format knnen nmlich noch nicht alle Browser darstellen. Beachten Sie auerdem
Unverzichtbar: Geben Sie Ihrer Seite einen aussagekrftigen Seitentitel, damit Suchmaschinen ihn als berschrift nutzen knnen (Punkt 13)
101
Grundlagen Profi-Web-Editoren UTILITIES PPpPPPPP

S. xx S. xx
P Grundlagen
P Workshops
pUtilities
102 TEST: WEB-EDITOREN

Profi-Web-Editoren
110 HTML-EDITOREN
Preiswerte Alternativen
114 LINKCHECKER
So finden Sie tote Links
116 TOP-GRAFIK-TOOLS
12 Programme vorgestellt
120 HOMEPAGE-TOOLS
18 Spezial-Utilities
126 FTP-PROGRAMME
UTILITIES
Test: Web-Editoren
Je professioneller die Homepage, desto hher die Anforderungen an den Web-Editor. Wir haben Dreamweaver MX, Frontpage 2002 und Golive 6 getestet und auch schon ihre Nachfolger betrachtet.
Von Johann-Christian Hanke
Golive, Dreamweaver und Frontpage sind die drei fhrenden HTML-Editoren auf dem Markt. Sie stehen in dem Ruf, schlanken Quellcode zu erzeugen und vorhandene Dokumente nicht zu verndern. Sie sind weniger fr Anfnger, sondern vorrangig fr HTML-Profis und Entwickler konzipiert. Wir haben die drei einem grndlichen Praxistest unterzogen und informieren Sie ber Strken und Schwchen der Testkandidaten. Zustzlich werfen wir auch schon einen Blick auf ihre Nachfolgeversionen.
1. Das knnen alle: Bearbeiten im Layout

Auch anspruchsvolle Web-Arbeiter schtzen Komfort. Mit allen drei Testkandidaten knnen Sie Ihre Web-Seiten deshalb kom-
plett in einer Layoutansicht erstellen ganz ohne HTML-Kenntnisse. Frontpage bietet Ihnen dabei die gewohnt kompakte Umgebung aus Microsoft Office. Die einzelnen Funktionen erreichen Sie ber Befehle oder Symbolleisten. In Dreamweaver und Golive mssen Sie sich mit einem Dokumentfenster auseinandersetzen, um das herum eine mehr oder minder groe Flut an Schwebefenstern angeordnet wird. Das wirkt auf den ersten Blick ziemlich unbersichtlich, aber man gewhnt sich schnell an die entsprechende Arbeitsweise. Dabei kommt zwei Bedienelementen beziehungsweise Paletten die grte Bedeutung zu. Sie heien in Dreamweaver Einfgen und Eigenschaften, in Golive Ob-
XX
P Grundlagen
P Workshops
pUtilities
Grundlagen Grundkurs I: Die PPPpPPPP S. xxx S. xxx
Inhalt 1. Das knnen alle: Bearbeiten im Layout 2. Wichtig fr Profis: HTML-Ansicht 3. Drei Programme drei unterschiedliche Anstze 4. Selbstverstndlichkeiten: SiteVerwaltung und Upload-Funktion 5. Vorschau: Das bringen die neuen Versionen Im Test: Dreamweaver MX Im Test: Frontpage 2002 Im Test: Golive 6 Ksten Keine Konkurrenz: Netobjects Fusion Die Frontpage-Server-Erweiterungen Wie wir testen Die Programme im berblick
Seite
102 103 103 104 104 106 107 108
jekt-Palette und Eigenschaften-Inspektor. Die Philosophie ist klar: Mit dem einen Bedienelement fgen Sie die Objekte ein, mit dem anderen bearbeiten Sie sie.
2. Wichtig fr Profis: HTML-Ansicht

Ein professioneller HTML-Editor muss selbstverstndlich mehr knnen als nur Web-Seiten generieren. Dieser Anforderung
entsprechend kommen alle drei Programme mit einer Code-Ansicht. Damit sehen Sie sofort, was ein per Schaltflche beziehungsweise Symbol eingefgtes Objekt im HTML-Quellcode bewirkt. Aber auch die umgekehrte Richtung ist mglich und fr ein flssiges Arbeiten wichtig: Jede nderung im Quellcode wird soweit mglich sofort im Layout umgesetzt (2 Abbildung unten).
104 104 105 109
3. Drei Programme drei unterschiedliche Anstze

Dreamweaver, Frontpage und Golive verfolgen drei unterschiedliche Anstze. Grund: Ihre Entwickler sprechen damit drei verschiedene Anwendergruppen an. Dreamweaver Das Programm hat von Anfang an den Quelltextkenner glcklich gemacht. Schon in der Version 1 von 1997 konnte man von Hand erstellte Seiten bedenkenlos dem Traumweber so die deutsche Bedeutung des Namens anvertrauen, ohne dass dem Quellcode ein Hrchen gekrmmt wurde. Dieser Tradition ist das Programm bis heute treu geblieben. Golive Im Lager der Mac-Anhnger eroberte zu der Zeit das Cyberstudio, spter umbenannt in Golive, die Herzen der Web-Arbeiter im Sturm. Ganz im Adobe-Stil wendet sich Golive an Designer und Layouter, die in Photoshop und Indesign zu Hause sind.
Alles im Griff: Dreamweaver bietet volle Kontrolle ber Quellcode (oberer Bildbereich) und Layout (unten). Die Code-Referenz (kleines Fenster im Vordergrund) informiert ber die Bedeutung der Tags (Punkte 1 und 2)
103
Utilities Profi-Web-Editoren S. 102 S. 109 PPpPPPPP
P Grundlagen
P Workshops
pUtilities
Aufgeblht: Frontpage erweitert den HTML-Kopf ohne Zustimmung des Anwenders mit eigenen Meta-Tags. Das ist nicht zu ndern (Punkt 3)
den Frontpage-Server-Erweiterungen beziehungsweise Team Services. Mehr dazu lesen Sie im 2 Kasten Die Frontpage-Server-Erweiterungen unten links auf dieser Seite. Problematisch war und ist allerdings immer noch die Code-Qualitt, die nicht immer allen strengen Mastben gengt (2 nebenstehende Abbildung).
Keine Konkurrenz: Netobjects Fusion

Der Hersteller von Netobjects Fusion wirbt damit, dass der Anwender kein HTML knnen muss. Entsprechend ist die Software ein typischer Generator, der praktisch keine nderungen von Hand im Quellcode zulsst. Fusion wendet sich damit an Gelegenheits-Homepage-Bastler und Webworker, die ohne viel Mhe eine gut aussehende Site generieren mchten. Fr Profis ist dieser Ansatz jedoch problematisch, denn sie brauchen an jeder Stelle die volle Kontrolle ber den HTML-Quellcode und genau das bieten Dreamweaver, Golive und Frontpage.
Das zeigt sich vor allem an der Bedienung, die fast ausschlielich auf die Maus setzt. Inzwischen gelingt es Golive immer besser, auch die Quellcode-orientierten Anwender zufrieden zu stellen. Frontpage Frontpage zielte von Beginn an auf den ambitionierten Einsteiger. Wer aber seinen Vorstellungen gem aus dem von Microsoft vorgegebenen Code-Schema ausbrechen wollte, hatte schlechte Karten. Erst seit Version 2000 widersetzt sich das Programm nicht mehr den Vernderungen im Quellcode, und langsam schliet Frontpage zu den professionellen Web-Editoren auf. Wer jedoch das volle Leistungsspektrum von Frontpage nutzen mchte, bentigt einen Dienstleister mit
4. Selbstverstndlichkeiten: Site-Verwaltung und Upload-Funktion

Alle drei Programme bieten eine leistungsfhige Site-Verwaltung. Die Handhabung der HTML-Dateien, Stilvorlagen und Grafiken wird damit einfach. Spren Sie fehlerhafte Hyperlinks auf. Blenden Sie eine grafische Site-bersicht ein, von der aus Sie jedes Dokument bearbeiten knnen (2 Abbildung unten). Fgen Sie Objekte mit Drag & Drop in Ihre Web-Seiten ein. Mit dabei ist selbstverstndlich auch ein Tool zum Hochladen der Seiten auf den Webserver.
die nur die wichtigsten Befehle bietet, beispielsweise zum Einfgen von Grafiken und Tabellen. So mssen Sie nicht erst die jeweilige Untergruppe aufrufen. Frontpage 2003 Auch Frontpage 2003 geht strker auf Quelltextfreunde ein. Neu ist die in der getesteten Version noch schmerzlich vermisste geteilte Ansicht. Das Wechseln zwischen Code und Design wird einfacher. Auch die Funktion Layouttabelle zur einfacheren Tabellenzuweisung ist neu hier war Dreamweaver Vorbild (2 Abbildung auf der rechten Seite oben). In punkto Code-Qualitt notierten wir fr die uns vorliegende Beta-Version die gleichen Kritikpunkte, die wir in unserem Test bei Frontpage 2002 festgestellt haben.
5. Vorschau: Das bringen die neuen Versionen

Whrend unserer Testphase im Sptherbst 2003 waren die Hersteller gerade dabei, neue Versionen auf den Markt zu bringen. Wir haben uns diese angesehen, beziehen sie aber nicht in die Testurteile ein, weil es sich um Vorabprodukte handelt.
Die Frontpage-ServerErweiterungen
Wenn Sie die Mglichkeiten von Frontpage optimal ausnutzen mchten, brauchen Sie einen Dienstleister, der die Frontpage-Server-Erweiterungen oder neuerdings auch Team Services anbietet. (Team Services ist praktisch die neue Version der FrontpageServer-Erweiterungen mit erweitertem Funktionsumfang.) Das sind spezielle Erweiterungen auf dem Webserver, die auf Frontpage-Sites abgestimmt wurden. Erst dadurch wird das Hochladen der Seiten mit Frontpage sehr einfach. Und erst dann knnen Sie Gstebuch, Besucherzhler, Suchmaschine und anderes mehr einbinden. Vor allem Datenbank-gesttzte Seiten bentigen diese Microsoft-Erweiterung auf dem Webserver. Das schrnkt Sie in Ihrer Dienstleisterwahl ein, da die Mehrzahl der Webhoster den frei verfgbaren Apache-Webserver einsetzt.
Dreamweaver MX 2004 Dreamweaver MX 2004 (Demo auf C HeftCD) wartet mit einer integrierten Prfung fr Browser-Vertrglichkeit auf. Bestimmte, auf die jeweiligen Browser bezogene Syntaxfehler werden auf Wunsch rot unterkringelt und lassen sich sofort berichtigen. Hinzugekommen sind Code-Referenzen fr PHP und SQL. Bedienung und Oberflche wurden nur behutsam berarbeitet: Nach dem Aufruf prsentiert Dreamweaver nun eine attraktive Startseite. Von hier aus ffnen Sie Dokumente, erstellen neue oder rufen das Lernprogramm auf. Neu ist die Symbolleiste berblick: Golive verfgt ber eine leistungsfhige Site-Verwaltung. Die Common (Allgemein), Navigationsansicht (vorne) zeigt die Struktur der Website (Punkt 4)
104
P Grundlagen
P Workshops
pUtilities
Utilities Profi-Web-Editoren PPPpPPPP S. 102 S. 109
Golive CS Die fr Dezember 2003 angekndigte neue Golive-Version (CS steht fr Creative Suite) integriert die einzelnen Produkte Acrobat, Photoshop, Illustrator und Indesign strker. Golive erstellt aus Web-Seiten PDF-Dateien, importiert Photoshop- und Illustrator-Dokumente und wartet mit etlichen Detailverbesserungen in Bezug auf CSS und XML auf. Nicht verbessert wurde offenbar die katastrophale Rckgngig-Funktion (2 Einzeltestbericht auf Seite 108). Dafr gab die Qualitt des Quellcodes keinen Anlass zur Kritik mehr. Erheblich verbessert wurde der Stylesheet-Editor: Hier sind alle Elemente endlich bersichtlich innerhalb eines Fensters angeordnet. Mehr noch: Das neue Register Source (Quellcode) ermglicht sogar das direkte Arbeiten 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 testen

Die PC-Welt untersucht HTML-Editoren nach mehreren Kriterien. Dabei gewichten wir so: Leistung Bedienung Qualitt des Quellcodes Site-Verwaltung Spezialfunktionen Installation Dokumentation Preis-Leistungs-Verhltnis 25% 20% 20% 10% 10% 5% 5% 5% und 4. Formulardesign. Dabei prfen wir vor allem, wie das Zusammenspiel zwischen Layout-Ansicht und Quellcode funktioniert. Bedienung Ist die Bedienung einfach, intuitiv oder zumindest logisch? Stehen dem Anwender viele Vorlagen und Assistenten zur Verfgung? Qualitt des Quellcodes Hlt der Quellcode der von unseren Prflingen erzeugten Musterseiten der offiziellen Prfung durch das World Wide Web Consortium (W3C) stand (2 Abbildung unten rechts)? Wir testen mit dem Online-Prfprogramm des W3C unter http://validator. w3.org. Als Vergleich ziehen wir die in Handarbeit erstellte mustergltige Version unserer Seite heran (2 Abbildung unten links; Download auf der Website des Testers unter www.jchanke.de/ pcwelt). Site-Verwaltung Hier prfen wir, wie einfach oder kompliziert die Verwaltung komplexer Sites ist, die der Tester zum Beispiel fr seine Bcher erstellt hat. Dazu zhlt auch der Upload, das Hochladen der Seiten. Spezialfunktionen Unsere Testkandidaten warten mit einer Flle von Spezialfunktionen auf. Das geht von der Untersttzung dynamischer Projekte mit DHTML bis hin zur Einbindung von FlashAnimationen. Negativ bewerten wir, wenn ein Tool Zusatzfunktionen nur dann anbietet, wenn der Anwender einen bestimmten Webserver verwendet. Installation Die Software sollte sich einfach und problemlos installieren (und de-installieren) lassen. Dokumentation Von einem professionellen Web-Editor ist nicht zu erwarten, dass er selbsterklrend ist. Was taugt die mitgelieferte Hilfe-Funktion? Bekommt der Nutzer weiterfhrende Hinweise zu HTML & Co.? Preis-Leistungs-Verhltnis Wir berprfen, ob das Verhltnis zwischen Verkaufspreis und Leistungsspektrum in Ordnung ist. Als Verkaufspreis gilt der von uns recherchierte Marktpreis der Vollversion.
Leistung Die Leistung testen wir anhand eines kleinen Projekts: Wir planen eine anspruchsvoll aufgemachte HTML-Musterseite, die wir Schritt fr Schritt zusammensetzen. Sie beinhaltet: 1. Tabellenlayout mit verschachtelten Tabellen (Spaltensatz); 2. Grafiken (auch als Hintergrund); 3. selbst erstellte Stylesheets (CSS)
Die manuell erstellte Referenzseite: Die Testkandidaten mssen diese mglichst fehlerfrei nachbilden
Der HTML-Test des World Wide Web-Consortiums: Bei validator.w3.org fallen viele Web-Seiten durch
105
Utilities Profi-Web-Editoren S. 102 S. 109 PPPPpPPP
P Grundlagen
P Workshops
pUtilities
Dreamweaver MX
Dreamweaver MX berzeugt als anspruchsvolle Entwicklungsumgebung fr Quellcode-Kenner und erstellt sauberen HTML-Code. Bedienung Wer in fnf Minuten eine Homepage zusammenklicken mchte, wird enttuscht: Dreamweaver ist weder einfach noch intuitiv zu bedienen. Doch wenn erst einmal alle schwebenden Fenster gebndigt sind, erscheint die Bedienung logisch. Die Bedienfeldgruppe Einfgen hilft beim Einfgen der gewnschten Elemente, ber das Eigenschaften-Fenster lassen sich die entsprechenden Attribute und Werte nachbearbeiten. Der HTML-Profi erkennt sofort, welche Attribute und Werte bei der markierten Tabelle oder beim Bild eingestellt sind. Grund: Dreamweaver bildet bei der Darstellung dieser Eigenschaften exakt die Mglichkeiten der jeweiligen HTML-Tags ab. berhaupt ist die HTML-Untersttzung hervorragend, das zeigt die auf Wunsch teilbare Ansicht. Im oberen Bereich wird der Code eingeblendet, unten arbeiten Sie am Entwurf und behalten so die volle Kontrolle ber den Quellcode. Tastaturbefehle Dank vieler Tastaturbefehle geht die Arbeit zgig voran: <Strg>-<F3> ffnet beziehungsweise schliet das EigenschaftenFenster, mit <F8> kommt die Site-Ansicht auf den Bildschirm. Fast jeder Befehl lsst sich mit einer schnellen Tastenkombination ansteuern. Die Rckgngig-Funktion ist hervorragend, alle Schritte lassen sich in einem Verlaufsfenster sichtbar machen und sogar einzeln zurckrufen. Dabei knnen Sie ausgewhlte Schritte sogar als eine Art Sammelbefehl abspeichern. Musterprojekt Das Einrichten der verschachtelten Tabellen allein in der Layout-Ansicht war zwar schwierig, aber es gelang: Die Inline-CSSAnweisungen fr die Hintergrundgrafiken mussten wir von Hand im Quellcode eintragen. Grafiken lassen sich schnell und reibungslos einfgen. Der Klick auf die entsprechende Schaltflche oder das Tastenkrzel <Strg>-<Alt>-<I> gengt. Die CSS-Untersttzung ist perfekt und macht Spa: Selbst das Erstellen einer separaten CSS-Datei und auch das Einbinden der Datei in HTML klappte auf Anhieb. Auf Wunsch hilft ein separates Design-Fenster beim Erstellen der Regeln. Auch das Erstellen des Formulars wurde zum Kinderspiel. Selbst durch das nachtrgliche Einfgen des Formularbereichs lie sich das Programm nicht aus der Ruhe bringen. Die zuvor erzeugte Tabelle zum Ausrichten der einzelnen Formularfelder konnten wir ohne Probleme nachtrglich in diesen Bereich verschieben. HTML-Untersttzung Der Wechsel zwischen Layout- und HTML-Ansicht gelingt reibungslos, die nderungen werden sofort bernommen. Kleine Klappmens im bersichtlich eingefrbten Quelltext helfen, die richtigen Befehle und Attribute zu finden. Wer bei einem Befehl nicht weiter
Dreamweaver MX
GESAMTNOTE PREIS: 450 Euro
GESAMTERGEBNIS
Installation (5%) 1,2 Spezialfunktionen (10%) 1,2 Site-Verwaltung (10%) 2,0 Qualitt des Quellcodes (20%) 1,0 Dokumentation (5%) 1,2 Preis-Leistungs-Verhltnis (5%) 3,0 Leistung (25%) 1,0
1,5
Bedienung (20%) 2,2
SYSTEMVORAUSSETZUNGEN BETRIEBSSYSTEME Windows 98/ME, 2000, XP, Mac-OS PROZESSOR Pentium II 300 RAM 64 MB AUFLSUNG 1024 x 768 Pixel PLATTENPLATZ 275 MB www.macromedia.com/de
wei, verwendet einfach die Tastenkombination <Shift>-<F1>: Schon erscheint ein Referenz-Fensterchen, das genau den aktuellen HTML-Befehl erklrt. Diese OnlineCode-Referenzen stammen aus Bchern der Verlage OReilly und Wrox. HTML-Quellcode Dreamweaver war und ist berhmt fr die Qualitt des im Hintergrund entstehenden Quellcodes. Bei unserem Beispielprojekt wurde nach Setzen aller Grafik-Alternativtexte der Code als gltig validiert. Dabei kam das Programm sogar mit weniger Zeilen aus als das handgeschriebene Musterbeispiel. Ebenfalls berzeugen kann der eingebaute HTML-Markup-Test (Datei, Seite berprfen, Markup). Dieser erkannte unseren im Beispiel absichtlich doppelt gesetzten Ausschalt-Tag </p></p>. Fazit Dreamweaver wendet sich vorrangig an engagierte Quellcode-Kenner, lsst sich aber auch von Einsteigern nach einer gewissen Einarbeitungszeit benutzen. Die Bedienung ist logisch. Das Programm punktet durch hervorragenden HTML-Code und die vielen mitgelieferten Referenzen.
Das Elemente-Fenster von Dreamweaver: Hier werden Links, Farbschemata, Grafiken und andere Elemente angezeigt
106
P Grundlagen
P Workshops
pUtilities
Utilities Profi-Web-Editoren PPPPPpPP S. 102 S. 109
Frontpage 2002
Frontpage ist einfach zu bedienen, doch der HTML-Code entspricht nicht immer dem strengen Standard. Assistenten und Stilvorlagen Die Oberflche im Stil von Microsoft Office ist bersichtlich und drfte den meisten Anwendern daher vertraut vorkommen. Unzhlige Muster-Layouts, Assistenten und Stilvorlagen helfen auch dem unerfahrenen Anwender, in kurzer Zeit eine ansprechende Seite zu erstellen. Wenn Ihr Webserver ber die Frontpage-Server-Erweiterungen beziehungsweise die Team Services verfgt (2 Kasten Frontpage-Server-Erweiterungen), ist auch das Verwalten, Testen und Hochladen der Seiten komfortabel gelst. Doch die Frage ist, ob diese Funktionen gengen, um im Rahmen unseres Praxistests das anspruchsvolle Musterprojekt umzusetzen. Musterprojekt Wir begannen mit dem Erstellen der separaten CSS-Datei. Dies gelang dank der entsprechenden CSS-Vorlage sofort. Doch schon beim Zuweisen der Schriftarten zum Selektor body folgte die erste Enttuschung ber das Programm. Statt sinnvoller Schriftenbndel wie Verdana, Arial, Helvetica, sans-serif band Frontpage jeweils nur eine einzige Schriftart ein. Zwangslufig schrieben wir den Rest der Datei von Hand und vermissten dabei die aus Dreamweaver gewohnte praktische CSS-Syntax-Farbhervorhebung. Das Verlinken auf die CSS-Datei gelang jedoch mhelos. Allerdings strte uns hierbei und auch beim Einbinden von Grafiken, dass Frontpage immer erst in einem Web-Ordner nach dem Objekt sucht. Hintergrund: Das Programm erwartet, dass der Nutzer zuerst ein Web einrichtet, aber das haben wir uns bei diesem kleinen Projekt erspart. Tabellen formatieren Die Schwierigkeiten setzten sich beim Erstellen der geschachtelten Tabellenkonstruktion fort. Erst nachdem automatisch eingebundene CSS-Attribute entfernt worden waren, kam der Schatteneffekt der ueren Tabelle zur Geltung. Insgesamt fiel uns folgender Widerspruch auf: Das Einfgen von Objekten ganz gleich, ob Tabellen oder Grafiken ist sehr einfach. Das Nachbearbeiten jedoch entwickelt sich zum Zeit raubenden Geduldsspiel. Der so wichtige Alternativtext bei Grafiken wurde zum Beispiel in ein Unterregister des Fensters Bildeigenschaften verbannt. Eine weitere Schwche: Die von uns in Handarbeit geschriebenen freien CSS-Stile zeigte Frontpage nicht an. Und auch die Arbeit im Quelltext ist kein Vergngen: Die geteilte Ansicht fehlt. In Frontpage 2002 lsst sich lediglich zwischen den Registern Normal und HTML hin- und herschalten so verliert man als Anwender leicht den berblick ber seine Position. Auch sonst ist Frontpage nicht flexibel: Das Verschieben der Formulartabelle in den absichtlich hinterher eingefgten Formularbereich zerstrte das gesamte Layout. Zum Glck funktionierte die Rckgngig-Funktion.
Frontpage 2002
GESAMTERGEBNIS
2,2
Bedienung (20%) 2,0
SYSTEMVORAUSSETZUNGEN BETRIEBSSYSTEME Windows 98/ME, 2000, XP PROZESSOR Pentium I 133 RAM 64 MB AUFLSUNG 800 x 600 Pixel PLATTENPLATZ 180 MB www.microsoft.de
HTML-Quellcode Beim Test auf validator.w3.org (2 Kasten Professionelle Web-Editoren: Wie wir testen) fiel die von Frontpage generierte Seite mit Pauken und Trompeten durch. Der einfache Grund: Die Dokumenttyp-Deklaration fehlte. Aber auch nachdem wir diese von Hand eingesetzt hatten, war das Prfprogramm des World Wide Web Consortiums (W3C) nicht zufrieden das Attribut bordercolor entspricht nicht dem HTML-4-Standard. Wer validen Code wnscht, kommt ums Nachbearbeiten nicht herum. Nachbearbeiten mussten wir auch den Formularbereich, da unser PHP-Formmailer mit den webbot-HTML-Kommentaren nichts anfangen konnte. Fazit Frontpage 2002 ist das ideale Programm fr den HTML-Einsteiger, der dank attraktiver Vorlagen und Designs schnell zu Ergebnissen gelangt. Doch bei komplexen Projekten mit intensiver Quelltextarbeit zeigen sich die Schwchen. Die Qualitt des HTML-Codes entspricht nicht den strengen Vorgaben des World Wide Web Consortiums, das Bearbeiten ist umstndlich.
Suchmaschine und Zugriffszhler: Diese Frontpage-Funktionen knnen Sie nur dann nutzen, wenn Ihr Dienstleister die Server-Erweiterungen bietet (2 Kasten Die Frontpage-Server-Erweiterungen)
107
Utilities Profi-Web-Editoren S. 102 S. 109 PPPPPPpP
P Grundlagen
P Workshops
pUtilities
Golive 6
Golive wendet sich an Designer und Quellcode-Kenner, die Bedienung ist jedoch oft gewhnungsbedrftig. Bedienung Wer Adobe-Programme kennt, wird sich in Golive sicherlich zu Hause fhlen. Fr alle anderen Anwender ist die Einarbeitung ein hartes Stck Arbeit. Zugegeben, fr den Anfang gibt es etliche Assistenten und sogar fix und fertig vorbereitete Musterseiten. Doch sptestens bei fortgeschrittenen Techniken fngt die Sucherei in den Paletten, Registern und Kontextmens an. Externe CSS-Datei einbinden Das Anlegen einer externen CSS-Datei (die Details beschreibt der 2 Beitrag ab Seite 80) glckte dank des Mens Spezial noch relativ gut. Doch das Einbinden dieser Datei ist ein Geduldsspiel: Dazu ffnen Sie zuerst den CSS-Editor. Dort klicken Sie mit der rechten Maustaste, um das Kontextmen zu aktivieren. Hier whlen Sie den Befehl Neuer Link zu externem CSS. Markieren Sie das Symbol mit dem Text Empty Reference. Schlielich suchen Sie das Schwebefenster Inspector, um hier die externe CSS-Datei auszuwhlen. Viele Wege in Golive sind hnlich verschlungen, und Quelltextkennern reit irgendwann der Geduldsfaden. Oft geht es schneller, den Code fix von Hand zu notieren. Und so haben wir es auch beim Zuweisen unserer Stile gehalten, da etliche der von uns erstellten Regeln nicht im CSSKontextmen angezeigt wurden. Zweigeteilte Ansicht Der Quelltextfreund wird dafr allerdings gut bedient: Neben den Registern Layout und Quellcode gibt es auch eine Gliederungsansicht. Hier erscheinen die Tags als aufklappbare Symbolzeichen, die sich sogar bearbeiten lassen. Noch besser ist die zweigeteilte Ansicht. Dank dieser Funktionen gelang uns das weitere Erstellen und Bearbeiten der Tabellen und Grafiken beinahe spielend. Eine andere Eigenschaft kam uns dabei allerdings mehrmals in die Quere. Nach Besuch der Ansicht Quellcode leidet das Programm unter einem UndoGedchtnisverlust. Sprich: Der komplette Verlauf wird gelscht, und kein einziger Schritt lsst sich mehr zurcknehmen. Trotzdem gelang der weitere Testablauf, auch mit dem Einbinden der Formularelemente gab es keinen rger. Syntaxcheck berzeugen konnte der eingebaute Syntaxcheck, den Sie in der Quellcode-Ansicht durch Klick auf das Blitz-Symbol aktivieren. Dieser Check erkannte zuverlssig unser im Beispiel absichtlich doppelt gesetztes Ausschalt-Tag </p></p>. Daneben besitzt Golive einen hervorragenden Hyperlink-Tester und leistungsstarke Site-Tools zum Verwalten einer komplexen Site. Achten Sie darauf, dass die Schaltflche Link-Warnungen eingerastet ist. Es handelt sich um den Knopf mit dem Kfersymbol rechts in der Werkzeugleiste. Nun zeigt Ihnen Golive bei defekten Links stets einen roten Rahmen an.
Golive 6
GESAMTERGEBNIS
2,5
Bedienung (20%) 3,0
SYSTEMVORAUSSETZUNGEN BETRIEBSSYSTEME Windows 98/ME, 2000, XP Mac-OS PROZESSOR Pentium II 400 RAM 96 MB AUFLSUNG 1024 x 768 Pixel PLATTENPLATZ 320 MB www.adobe.de
HTML-Quellcode Von der Qualitt des Quellcodes wurden wir enttuscht. Das Programm wurde seinem Ruf nicht gerecht, die Seite fiel beim strengen Test des World Wide Web Consortiums (W3C) unter validator.w3.org (2 Kasten Professionelle Web-Editoren: Wie wir testen) durch. Die Dokumenttyp-Deklaration war vorhanden, woran lag es dann? Die Ursache war banal: Die <input>Formularfelder wurden zustzlich mit dem Attribut border versehen. Doch dieses Attribut hat an dieser Stelle absolut nichts verloren. Fazit Der Funktionsumfang ist enorm, die Bedienung ist aber in vielen Punkten gewhnungsbedrftig und umstndlich. Golive spricht Layouter und Designer an, die sich in Photoshop zu Hause fhlen, die Maus lieben und den Mac als ihre eigentliche Heimat ansehen. An Windows gewhnte Tastaturfreunde werden dagegen schwer einsehen, dass es fr bestimmte Aktionen eben keine Tastaturbefehle gibt. Das Programm glnzt durch seine Prf- und Verwaltungsfunktionen, erzeugte im Test jedoch keinen absolut sauberen HTML-Code.
HTML-Syntaxprfung: berzeugen konnte der eingebaute Syntaxcheck, den Sie in der Quellcode-Ansicht durch Klick auf das Blitz-Symbol aktivieren. Diese Golive-Funktion findet viele Quelltextfehler
108
P Grundlagen
P Workshops
pUtilities
Utilities Profi-Web-Editoren PPPPPPPp S. 102 S. 109
berblick: Professionelle Web-Editoren
PRODUKT
Dreamweaver MX
Frontpage 2002
Golive 6
GESAMTNOTE
Platz 1
Preis GESAMTERGEBNISSE 450 Euro
Dokumentation 5% 1,2 Installation 5% 1,2 Spezialfunktionen 10% 1,2 SiteVerwaltung 10% 2,0
1,5
Preis-LeistungsVerhltnis 5% 3,0 Leistung 25% 1,0 Bedienung 20% 2,2 Qualitt des Quellcodes 20% 1,0
Platz 2
200 Euro
2,2
Platz 3
450 Euro
2,5
Windows-Betriebssysteme Andere Betriebssysteme INSTALLATION problemlose Installation BEDIENUNG allgemeine Bedienung Assistenten allgemeine Vorlagen Stilvorlagen (Designs) LEISTUNG Tabellensatz Grafik einfgen CSS-Untersttzung Frame-Untersttzung Einbinden externer CSS-Dateien Hochladen (FTP) TOOLS ZUM TESTEN HTML-Check Link-Check HTML-CODE-QUALITT W3C-Test XHTML-kompatibel untersttzte Standards
98/ME, 2000, XP Mac-OS
98/ME, 2000, XP nein
98/ME, 2000, XP Mac-OS
ja, einfach
ja, einfach
ja, einfach
mit Einarbeitung verbunden nein ja ja
relativ einfach ja ja ja, sehr groe Auswahl
mit Einarbeitung verbunden ja ja ja
sehr gut einfach sehr gut gut einfach aus Site und Dateisystem
gut einfach zufrieden stellend gut einfach nur aus Frontpage-Web
gut etwas kompliziert zufrieden stellend sehr gut kompliziert aus Site und Dateisystem
ja ja
nein ja
ja ja
bestanden ja HTML, XHTML, CSS, PHP, ASP, JS, JSP, Java, SSI, WML
nicht bestanden ja, mit Einschrnkungen HTML, SSI, ASP
nicht bestanden ja HTML, XHTML, CSS, PHP, ASP, JS, JSP, Java, SSI, WML, SMIL
SPEZIALFUNKTIONEN DHTML-Untersttzung Datenbankanbindung Suchfunktion Zhler Gstebuch XML-Untersttzung Weitere Besonderheiten Software-Beigabe DOKUMENTATION Online-Hilfe Code-Referenzen
ja mglich nein nein nein ja Einbinden eines lokalen Test-Servers mglich Quellcode-Editor Homesite (bei Win-Version)
ja mglich ja, mit Server-Erweiterungen ja, mit Server-Erweiterungen ja, mit Server-Erweiterungen eingeschrnkt wiederkehrende Hyperlink-Leisten erstellbar nein
ja mglich nein nein nein ja separater Visual-Tag- und Javascript-Editor nein
Format HTML-Help, ausfhrlich und hilfreich HTML, CSS, Javascript, ASP, JSP
Format HTML-Help, ausfhrlich nein
HTML-Format (Web-Seite), weniger hilfreich nein
Web-Adresse
www.macromedia.com/de
www.microsoft.de
www.adobe.de
109
HTML-Editoren light
Wer Web-Seiten erstellt, kommt um HTML-Editoren nicht herum. Es muss aber nicht zwangslufig ein teures Produkt sein. Wir stellen Ihnen 12 preiswerte Alternativen und Gratis-Tools vor.
Von Dirk Wischmann
Neulinge in diesem Metier Programme, die eine so genannte WYSIWYG-Funktion (What you see is what you get) bieten. Dabei sehen Sie das aktuelle Projekt in einem extra Fenster immer so, wie es die Besucher der Seite spter auch sehen werden (2 Abbildung rechte Seite). Sie knnen auf diesem Wege immer sofort kontrollieren, ob nderungen sinnvoll sind. Eine allerdings nicht so komfortable Alternative sind Programme, die eine separate Vorschaufunktion aufweisen. Zwar verfgen Sie damit ebenfalls ber eine visuelle Kontrolle, Sie mssen diese aber in der Regel immer erst nach nderungen manuell starten, was sich, speziell bei Einsteigern, kontraproduktiv auf die Arbeitsgeschwindigkeit auswirkt. Erfahrene Anwender, die schon einige bung im Umgang mit HTML haben, werden auch mit reinen text- beziehungsweise code-basierten Lsungen klarkommen, vor allem dann, wenn diese mit sinnvollen Eingabehilfen und Tastaturkrzeln fr hufig verwendete Standard-Tags aufwarten.
Ein Muss: Drag & Drop, Linkcheck, Assistent und Upload-Funktion

Wenn es darum geht, Bilder oder Dateien zu platzieren, ist die Untersttzung von Drag & Drop ein weiteres ntzliches Leistungsmerkmal. Hierbei werden die Bilder und Dateien mittels gedrckter Maustaste einfach in das Dokument gezogen, das Pro-
Das Angebot an Programmen, die Ihnen beim Erstellen Ihrer Website mehr oder minder effektiv hilfreich unter die Arme greifen, ist beraus vielfltig. So bieten inzwischen sogar fast alle Textverarbeitungsund Layout-Programme oder Tools fr die digitale Bildbearbeitung irgendwo einen Schalter, mit dem man als Anwender in die Lage versetzt wird, das eben Produzierte sofort internet-fhig exportieren zu lassen. Der dabei im Automatikverfahren erzeugte Code ist allerdings in den meisten Fllen alles andere als optimal. Allenfalls reicht das fr geringe Ansprche und einfache private Einsatzzwecke. Wenn Sie mehr Wert auf ein ansprechendes Design legen und dabei kein vorgefertigtes Layout verwenden mchten, dann greifen Sie fr optimierten Code zu Spezial-Tools, die als Schnittstelle zwischen Text- und Layout-Programm und der fertigen Website fungieren.
ren wollen, mssen Sie die vorbereiteten Texte und/oder Grafiken internet-tauglich und ansprechend aufbereiten. Als hilfreich erweisen sich dabei insbesondere fr
Sehr hilfreich: Vorschaufunktionen

Sind Sie sich darber im Klaren, wie die sptere Struktur der Website aussehen soll und welche Inhalte Sie knftig prsentieNetscape Composer: Das einfach zu bedienende Gratis-Tool erlaubt neben der direkten code-basierten WebsiteErstellung auch eine intuitive Vorgehensweise mit Grafik-, Text- und Verknpfungswerkzeug
110
P Grundlagen
P Workshops
pUtilities
Preiswerte HTML-Editoren
Utilities PpPP S. 110 S. 113
gramm erstellt daraufhin nachdem es einige Angaben wie Gre, Position, Textfluss oder Rahmen abgefragt hat selbstndig den dazugehrigen Code. Ein HTML-Editor sollte zudem eine Linkchecker-Funktion integriert haben, auerdem fr die Verwaltung grerer Websites eine Projektverwaltung und einen Publishing-Assistent sowie eine direkte Upload-Funktion der fertigen Site inklusive der bentigten Dateien.
Leistungsfhige Tools
Fr diesen Mittelweg zwischen komfortablen Automatiken und direktem Eingriff in den Code gibt es auf dem Markt eine Reihe von Tools, mal mehr, mal weniger teuer.
Dabei bedeutet preiswert oder gar gratis keinesfalls, dass die Programme nicht leistungsfhig sind oder dass sie nur wenige Funktionen bieten. Wie Sie auf den nchsten Seiten erfahren, knnen es einige sogar mit deutlich teureren Produkten aufnehmen. Viele der preiswerten beziehungsweise kostenlosen Einfache Kreation: Hotdog Professional bietet alle wichtigen Funktionen HTML-Editoren finden Sie wie hier die interne Vorschau zum Anlegen von Web-Seiten brigens auf C Heft-CD. Die 2 Tabelle unten verschafft Ihnen einen formationen zu 14 weiteren Tools. Einen berblick ber die 12 vorgestellten ProTest professioneller, kommerzieller Webgramme und gibt Ihnen die wichtigsten InEditoren finden Sie ab 2 Seite 102.
Web-Editoren: 26 ntzliche Tools im berblick

Produkt 1st Page 2000 2.0 C Ace HTML 5.08.5 C AFSS HTML Designer 2.3 Arachnophilia B3 HTML Studio 4.1.500 C BAT HTML Editor 3.0 C Edit4Win 1.70 Hotdog Professional 7.03 HTML Format 7 C HTML Studio C HTML Toolbox 3.1 C Manfreds HTML Creator Namo Web Editor 5.5 Netscape 7.1 C Note Tab Light 4.95 C Phase 5.3 Quick Editor 2.1 Red Sky HTML Editor 1.10 Scribe 2.1 C Site Aid 1.3 C Sothink HTML Editor 2.5 C Super HTML 7.0 C Ultra Edit 32 Web Notepad 1.02 Web Master Pro 2.0 Preis gratis gratis gratis1) gratis 30 Dollar gratis Betriebssysteme Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP, Linux Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Internet www.evrsoft.com/download.shtml http://freeware.acehtml.com/download.html www.afss.de/designer/index.htm www.arachnoid.com/arachnophilia www.htmldialogs.com/downloadstuff.htm www.bat-html-editor-3.de.vu www.coffeecup.com/software www.edit4win.de www.sausage.com/professional/overview.html www.christian-diekmann.de/software/ index.htm www.htmlstudio.de http://delphi-soft.de www.e-school4you.com www.namo.com www.netscape.de/netscapeprodukte/ netscape71/download.html www.notetab.com www.qhaut.de www.daniels-freeware.de/freeware/index.htm www.8ung.at/redsky/e_down_programs.htm www.scribe.de/deutsch/index.html www.amiasoft.com/freeware/download.html www.srctec.com/htmleditor/download.htm www.superhtml.de www.ultraedit.com/downloads/index.html www.digicraft.com.au/webnotepad www.galttech.com/webmaster.shtml#Download Download 4,9 MB 3,7 MB 3,6 MB 1,7 MB 5,2 MB 2,8 MB 7,0 MB 0,6 MB 11,3 MB 0,7 MB 2,0 MB 0,7 MB 2,4 MB 38,3 MB 29,2 MB 1,8 MB 1,8 MB 0,7 MB 109 KB 1,8 MB 2,3 MB 4,2 MB 9,5 MB 2,8 MB 0,9 MB 1,4 MB Sprache Englisch Englisch Deutsch Englisch Englisch Deutsch Englisch Deutsch Englisch Deutsch Deutsch Deutsch Deutsch Deutsch Deutsch Englisch Deutsch Deutsch Deutsch Deutsch Englisch Englisch Deutsch Deutsch Englisch Englisch
Coffee Cup HTML Editor 9.5 50 Dollar 10 Euro 99 Dollar gratis gratis gratis gratis 99 Dollar gratis gratis2) gratis gratis gratis gratis gratis gratis 50 Euro 35 Dollar gratis 59 Dollar
1) Kostenloses Freischaltpasswort ber die Homepage anfordern 2) Standard-Version 10 Dollar, Pro-Version 20 Dollar
111
Utilities Preiswerte HTML-Editoren S. 110 S. 113 PPpP
P Grundlagen
P Workshops
pUtilities
WYSIWYG-EDITOR
auf C Heft-CD
AUCH FR WAP
auf C Heft-CD
CODE-BASIERT
AFSS HTML Designer 2.3

Preis: Download: gratis www.afss.de/designer/index.htm (3,59 MB)
BAT HTML Editor 3.0

Preis: Download: gratis www.bat-html-editor-3.de.vu (2,84 MB)
Coffee Cup HTML Editor 9.5

Preis: Download: 50 Dollar www.coffeecup.com/software/ (6,99 MB)
Diese Freeware bietet zahlreiche Textformatierungen, Formularsteuerelemente, Listen und Javascript. Damit erleichtert das Tool besonders solchen Anwendern die Arbeit, die die ersten Schritte hin zur eigenen Homepage wagen. Damit Sie das Design einer Web-Seite besser in Augenschein nehmen knnen, besitzt das Programm einen WYSIWYG-Modus. Sie sehen das aktuelle Projekt also so, wie es Besucher der Seite spter auch sehen werden. Hilfreich fr die praktische Arbeit ist berdies ein Tabellenassistent. Eine gute Grafik-Einbindung, der Include-Explorer und der Meta-Tag-Generator runden die Funktionen ab.
Der HTML-Editor hat viele Tools, mit denen sich Farben, Tags und HTML-Elemente einfgen lassen. Zudem bietet er Funktionen, mit denen Sie das Tempo einer Seite testen und ein Backup erstellen. Mit dem Projekt-Manager knnen Sie auf einfache Weise grere Projekte mit mehreren Seiten bearbeiten. Ein integrierter Debugger prft HTML und CSS. Auch ein kleiner Browser ist dabei. Ein Assistent hilft beim Programmieren und gibt Infos zu allen Dialogfenstern, der Upload-Assistent ist beim Hochladen behilflich. Mit BAT lassen sich auch WAP-Seiten programmieren und mit einem internen WAP-Emulator testen.
Um diesen Editor verwenden zu knnen, bentigen Sie gewisse Grundkenntnisse in HTML. Zahlreiche ntzliche Zusatzfunktionen wie mehrere HTML- und Script-Hilfen machen die Arbeit an einem HTML-Dokument erheblich komfortabler, als sie es gewhnlich ist. Zum direkten Upload der Dateien beinhaltet das Programm den FTP-Client Expresso-FTP, ber einen Splitscreen lassen sich nderungen optisch betrachten. Auerdem liefert der Hersteller eine umfassende HTML-Dokumentation und stellt einen Live-Support ber Chat zur Verfgung. Auf der Website steht eine 45Tage-Testversion zum Download bereit.
SYSTEMBERGREIFEND
ALLROUNDER
auf C Heft-CD
KREATIV
auf C Heft-CD
HTML Format 7
Preis: Download: gratis www.christian-diekmann.de/ software/index.htm (0,659 MB)
HTML Studio
Preis: Download: gratis www.htmlstudio.de (2,01 MB)
Manfreds HTML Creator

Preis: Download: gratis www.e-school4you.com (2,38 MB)
HTML Format kommt mit Syntaxhervorhebung und vielen weiteren ntzlichen Funktionen. Etliche Dialoge und Eingabehilfen erleichtern die Arbeit. Fr die wichtigsten Tags gibt es Tastaturkrzel, Makros lassen sich abspeichern. Weitere Funktionen sind mehrzeiliges Suchen und Ersetzen sowie Autotext-Funktionen zum automatischen Aktualisieren von Datum und Zeit an Textmarken. Die jngste Version der Freeware beinhaltet auch eine automatische Tag-Vervollstndigung, eine offene Plug-in-Schnittstelle, Perl- und PHP-Syntaxhervorhebung sowie automatische Umlautumwandlung beim Speichern und Laden.
Das Programm eignet sich sowohl fr Einsteiger, die HTML erlernen mchten, als auch fr Profis, die die vollen Mglichkeiten von HTML und seinen Erweiterungen ausschpfen wollen. Die Oberflche ist einfach zu bedienen und bietet dennoch viele Funktionen: Mit der Code Completion bearbeiten Sie Tags, mit HTML Tidy formatieren und korrigieren Sie den Quelltext, und per Syntaxcheck prfen Sie den Quelltext. Die HTML-Referenz erklrt kompakt die einzelnen HTML-Elemente, eine Projektverwaltung untersttzt den Anwender bei umfangreicheren Websites. Die Freeware lsst sich durch Plug-ins noch erweitern.
Ausgestattet ist die Freeware mit einem Formular-Assistenten und HTML-Tags, deren Eigenschaften sich per Mausklick bearbeiten lassen, sowie speziellen Dialogfeldern fr folgende Elemente: neue HTMLSeite, formatierter Text, berschriften, Hyperlinks, Listen, Tabellen, Vorlagen mit Text und Bildelementen, Navigationselemente mit vielen Optionen und Bilder. Per Mausklick lassen sich Abstze, Zeilenumbrche, horizontale Linien, Sonderzeichen, Farben, Kommentare und Meta-Tags erstellen. ber die Vorschau im integrierten Browser-Fenster knnen Sie die erstellten Seiten jederzeit berprfen.
112
P Grundlagen
P Workshops
pUtilities
Preiswerte HTML-Editoren
Utilities PPPp S. 110 S. 113
VISUELLES WEB-AUTHORING
NOTEPAD-ERSATZ
auf C Heft-CD
KOSTENLOSES MULTITALENT auf C Heft-CD
Namo Web Editor 5.5

Preis: Download: 99 Dollar www.namo.com (38,3 MB)
Note Tab Light 4.95

Preis: Download: gratis www.notetab.com (1,75 MB)
Phase 5.3
Preis: Download: gratis www.qhaut.de (1,78 MB)
Dieser WYSIWYG-Web-Editor ist komfortabel ausgestattet. Er untersttzt DHTML und ist besonders stark beim genauen Platzieren mit Hilfe von Layern. Mit Hilfe der Time-Line lassen sich freie Animationen leicht erstellen, beim Java Scripting hilft ein Script Wizard. Damit gelingen MausRollovers, Animationen und Drop-downMens im Handumdrehen. Auch Imagemaps definiert Namo unkompliziert im Edit-Fenster. Tabellen lassen sich mit Werkzeugen wie Bleistift und Radiergummi leicht erstellen. Zu den weiteren Funktionen zhlen zahlreiche Layout-Vorlagen, ein GIF-Animator und eine Site-Verwaltung.
Note Tab ist ein praktischer Ersatz fr das Windows-Notepad und gleichzeitig ein HTML-Editor. Die Freeware kann mehrere groe Dateien in einer Oberflche ffnen, vielseitig Text formatieren, Wortstatistiken anzeigen und Dokumente als Lesezeichen ablegen. Die Werkzeugleiste von Note Tab ist frei konfigurierbar. Sie knnen sogar selbst Buttons erstellen und mit eigenen Scripts versehen. Auerdem ist Note Tab in der Lage, mathematische Ausdrcke auszuwerten und direkt in den Text einzufgen. Der Editor ermglicht es, eigene Kommandos mittels einer eigenen Scriptsprache zu erstellen.
Zu den vielen Funktionen dieses HTMLQuelltext-Editors zhlen eine interne Vorschau, Syntax-Highlighting, Projektverwaltung, Cascading Stylesheets, Java (Script), HTML-Formulare sowie ein integrierter Bildbetrachter und Syntax-Debugger. Phase 5.3 beherrscht zudem die automatische Umlautkonvertierung, glnzt mit einem Funotenassistent und hat einen Dateimanager zum schnellen Wechsel zwischen einzelnen Dokumenten. Ein Tabellenassistent, ein FTP-Client und ein Ressourcenmen runden die Freeware ab. Die Benutzerfhrung ist praktischer und logischer als die manch kommerzieller Programme.
FLOTTER EDITOR
GUTER GESAMTEINDRUCK
RUNDE SACHE
auf C Heft-CD
Quick Editor 2.1

Preis: Download: gratis www.daniels-freeware.de/free ware/index.htm (0,65 MB)
Scribe 2.1
Preis: Download: gratis www.scribe.de/deutsch/index. html (1,8 MB)
Super HTML 7.0

Preis: Download: 50 Euro www.superhtml.de (9,46 MB)
Quick Editor 2.1 ist ein HTML-Editor mit vielen Funktionen. So bietet das Programm etwa den Multi-Editor, mit dem sich beliebig viele Dateien auf einmal editieren lassen. Ferner beinhaltet die Freeware eine komplette Syntaxsammlung aus HTML 4.0 sowie den Quick Editor, der vorgegebene Quelltexte fr mehrere Funktionen aufweist. Dieses Tool ergnzt den WindowsEditor etwa um Umlautumschrift, viele Syntaxbeispiele zum schnellen Einfgen in den Quelltext und eine Farbpalette, bei der die von Ihnen ausgewhlte Farbe in Hexadezimalcode konvertiert wird. Das Programm untersttzt HTML und CSS.
Scribe 2.1 besitzt einen integrierten Browser sowie einen CSS-Editor und untersttzt Javascript. Fr jeden Tag bietet die Freeware einen Assistenten, der die Arbeit erleichtert. Ntzlich sind auch ein Dateiund Projektmanager und Werkzeuge wie Syntaxcheck, Stylesheet-Editor, Konvertierung, Download-Zeitcheck, Linkcheck, Thumbnail-Generator, Grafikkatalog, FTPTransfer und Makro-Erstellung. Dank der Plug-in-Schnittstelle ESP lsst sich Scribe mit vielen Plug-ins erweitern. Die umfangreiche Hilfe, das moderierte Website-Forum und die bersichtliche Benutzerfhrung tragen zum guten Gesamteindruck bei.
Dieser Quellcode-basierte, mit vielen Assistenten ausgestattete Web-Editor kommt ohne WYSIWYG-Funktion, bietet aber eine Vorschaufunktion, die auch DHTML untersttzt. Verschiedene Bildschirmauflsungen sind ohne Wechsel des Grafikmodus simulierbar. Mit dem komfortablen Projektmanagement-Tool fassen Sie HTML-Dateien und andere Ressourcen zusammen, Dateien fgen Sie per Drag & Drop als Links direkt in den Code ein. Mit Profi-Web-Editoren kann sich Super HTML nicht messen, im Vergleich dazu ist das Tool fr erste Schritte aber eine kostengnstige Alternative und besser als viele Gratisangebote.
113
meisten prfen die Homepage gleich online auf dem Webserver. Sie geben nur Ihre Web-Adresse an und erhalten abschlieend ein Protokoll. Eine Online-Verbindung ist sowieso notwendig, damit die Tools externe Web-Adressen berprfen knnen. Ein sehr gutes Tool dieser Kategorie ist Xenu Link Sleuth. Die Komfortklasse der Linkchecker prft auch HTML-Dateien auf der Festplatte. Damit bgeln Sie tote Links aus, noch bevor Sie die Homepage online stellen. Sehr bequem sind beispielsweise CSE HTML Validator und HTML Link Validator. Sie haben einen integrierten Editor: Sobald Sie in der Ergebnisliste einen toten Link anklicken, zeigt der Editor die passende Stelle im HTML-Quelltext an. Das spart den Wechsel zum HTML-Editor und eine langwierige Suche.
Tote Links finden

Um tote Links auf Ihrer Homepage zu finden, mssen Sie nicht alle Links eigenhndig berprfen. Linkchecker bernehmen diese lstige, aber notwendige Aufgabe fr Sie.
Online-Services
Die Alternative zu Linkcheckern, die Sie auf Ihrem PC installieren, sind Online-Services. Sie stellen auf einer Web-Seite ein Eingabefeld fr die Homepage-Adresse zur Verfgung (2 Abbildung oben links). Dann sucht ein Script nach fehlerhaften Links und gibt das Ergebnis als Web-Seite aus. Die Liste drucken Sie aus oder kopieren sie. Hier finden Sie gute Online-Services: http:// validator.w3.org/checklink, www.law.utulsa.edu/lc und watson.addy.com. Ein anderer Weg zum Aufspren von Link-Fehlern fhrt ber die Server-Protokolle, die Provider wie 1&1 oder Strato fr jede Domain fhren. Bei Strato etwa loggen Sie sich in den Kundenbereich ein (Link Kundenservice oben auf der Homepage). Dann rufen Sie den Link Statistikabfrage auf sowie Statistics for the last 12 months. Im Navigation Window whlen Sie einen Monat aus und klicken dann auf den Link Not Found. Jetzt listet das Hauptfenster fehlerhafte Zugriffe auf.
Sicher kennen Sie das: Auf einer Homepage haben Sie eine interessante LinkSammlung gefunden, die genau Ihr Hobby betrifft. Sie klicken den ersten Link an und erhalten eine Fehlermeldung. So ergeht es Ihnen mit jedem dritten Link in der Liste. Logisch, dass Sie dann genervt sind und die Website verlassen. Wie kann man seinen Web-Auftritt nur so miserabel pflegen, fragen Sie sich. Die Erklrung ist in den meisten Fllen einfach: Je grer eine Website wird, desto schwieriger ist die Pflege. Wer klickt schon Dutzende von Links durch, um festzustellen, ob es die Zieladresse noch gibt? Oft finden sich tote Links auf andere Web-Seiten auch in Projekten oder bei Bilddateien.
spezialisierten Tools lesen HTMLDateien ein, gehen sie Zeile fr Zeile durch und suchen nach den Verweiszielen. Ein Verweisziel ist dabei jede verlinkte externe Datei: Web-Seiten im eigenen Projekt, Bilddateien, Video- und Musikdateien, FlashAnimationen und hnliches sowie selbstverstndlich auch die Adressen fremder Homepages. Dann prft das Tool, ob das Ziel existiert. Auf der folgenden Seite stellen wir Ihnen sechs Programme vor. Die
Linkchecker im berblick
Produkt Windows-Betriebssystem 95/98/ME, NT 4, 2000 und XP 95/98/ME, 2000 und XP 95/98/ME, NT 4, 2000 und XP 95/98/ME, NT 4, 2000 und XP 95/98/ME, NT 4, 2000 und XP 95/98/ME, NT 4, 2000 und XP Sprache englisch englisch englisch englisch englisch englisch
C* C* C* C C C
* Testversion
CSE HTML Validator 6.01 HTML Link Validator 3.58 Link Checker Pro 3.1.33 Mihov Link Checker 0.3 Rel Link Checker Lite 1.0 Xenu Link Sleuth 1.2e
Linkchecker: Die gute Alternative zur Handarbeit

Wenn Sie den Besuchern Ihrer Homepage einen besseren Service bieten mchten als im eben beschriebenen Fall, dann setzen Sie am besten einen Linkchecker ein. Diese
114
P Grundlagen
P Workshops
pUtilities
Linkchecker
Utilities
LINKCHECKER
auf C Heft-CD
LINKCHECKER
auf C Heft-CD
LINKCHECKER
auf C Heft-CD
CSE HTML Validator 6.01

Preis: Download: 69 Dollar www.htmlvalidator.com (2,7 MB)
HTML Link Validator 3.58

Preis: Download: 25 Dollar http://lithopssoft.com (840 KB)
Link Checker Pro 3.1.33

Preis: Download: 39,95 Dollar www.linkcheckerpro.com (4 MB)
Der CSE HTML Validator macht viel mehr als nur Links prfen. Wie ein Editor zeigt er HTML- und CSS-Dateien an und markiert darin fehlerhafte Stellen, die nicht dem HTML-Standard entsprechen. Diese Fehler ndern Sie direkt im HTML Validator, ein zustzliches Programm ist unntig. Bei der Prfung erfasst das Tool auch gleich interne und externe Links auf Dateien und Web-Seiten. Klickt man in der Ergebnisliste einen Eintrag doppelt an, so zeigt das Editorfenster den entsprechenden Ausschnitt der Datei. Ein Haken ist jedoch, dass sich jeweils immer nur die Links einer HTML-Datei berprfen lassen.
Das Tool checkt HTML-Dateien wahlweise auf der lokalen Festplatte oder auf einem Webserver. Die Ergebnisliste lsst sich nach verschiedenen Kriterien sortieren. Klicken Sie in der Liste einen Eintrag an, ffnet das Tool den Editorbereich und zeigt die zugehrige Stelle der HTML-Datei an. Dort nehmen Sie direkt nderungen vor und korrigieren so den Fehler. Ein typischer Fehler wird durch gemischte Gro- und Kleinschreibung in Dateinamen verursacht. Link Validator wandelt in einem Rutsch alle Dateinamen in Kleinbuchstaben um. Es gibt auch eine Funktion zum Suchen und Ersetzen in allen Projektdateien.
Mit professionellem Funktionsumfang wartet Link Checker Pro auf. Das Tool prft interne Links auf andere Web-Seiten und Bilder wie auch Links zu fremden Adressen. Die Ergebnisliste lsst sich vielfltig konfigurieren, so knnen Sie etwa nur fehlerhafte Links auf Bilder einblenden. Doch mssen die HTML-Dateien bereits auf dem Webserver gespeichert sein, Dateien auf der Festplatte bleiben auen vor. Eine Besonderheit ist die grafische Darstellung der einzelnen Seiten und Verbindungs-Links innerhalb einer Site. Ihre Einstellungen speichern Sie als Vorlage so sind wiederholte Prfungen rasch erledigt.
LINKCHECKER
auf C Heft-CD
LINKCHECKER
auf C Heft-CD
LINKCHECKER
auf C Heft-CD
Mihov Link Checker 0.3

Preis: Download: gratis www.mihov.com (226 KB)
Rel Link Checker Lite 1.0

Preis: Download: gratis www.relsoftware.com (730 KB)
Xenu Link Sleuth 1.2e

Preis: Download: gratis http://home.snafu.de/tilman/ xenulink.html (292 KB)
Betont einfach gibt sich die Oberflche von Mihov Link Checker. Sie geben eine Web-Adresse oder den Namen einer Datei auf der lokalen Festplatte ein. Leider lassen sich nur HTML-Dateien auswhlen, keine HTM-Dateien. Der Linkchecker stellt dann eine Liste aller vorhandenen Links auf. Dabei zhlen nur echte Links, keine Verweise auf Bilddateien oder hnliches. Sie speichern diese Liste als Textdatei oder lassen sofort alle Links auf der Liste prfen. Das Tool kann auch eine Liste von Links in einer Textdatei auf Erreichbarkeit prfen. Ferner lassen sich die Antwortzeiten beim Zugriff auf einen Webserver ermitteln.
Rel Link Checker ist anzumerken, dass er die abgespeckte Version eines Profi-Tools ist. Zunchst importieren Sie die Links von Ihrer Website oder aus einer Textdatei. Dann fhrt Rel Link die Prfung durch. Die Ergebnisliste lsst sich nach Fehlern, Adressen und weiteren Kriterien sortieren. Es gibt eine einfache Projektverwaltung, so dass Sie die eingestellten Adressen und Optionen spter leicht wiederherstellen. Das Tool berprft HTML-Seiten nur auf einem Webserver. Dafr kann es mit Proxy-Servern im Firmennetzwerk umgehen und Adressen aus der Zwischenablage von Windows automatisch importieren.
Die Freeware kommt aus Deutschland, hat aber eine englischsprachige Oberflche. Xenu Link Sleuth berprft Websites im Internet ebenso wie HTML-Dateien auf der Festplatte. Dabei sucht es nach fehlerhaften Links zu externen Adressen und Dateien. Mehrere Adressen lassen sich als Textdatei einlesen. Das Ergebnis erscheint als Liste, lsst sich aber als Report im HTMLFormat speichern. Das Tool erkennt auch Web-Seiten, die zu einer neuen Adresse weitergeleitet werden. Verwaiste Dateien auf dem Webserver stellt Xenu Link Sleuth nach Eingabe des Passworts ebenfalls fest. Die Angaben sind als Projekt speicherbar.
115
(2 Seite 118) wiederum setzen auf einfache Bedienung: Aus den Vorlagen whlen Sie die gewnschte Form fr Buttons, Banner oder Hintergrundmuster aus. Dann stellen Sie die Parameter wie Farbe neu ein und exportieren die fertigen Grafiken.
Galerien
Ein Kapitel fr sich sind gut gestaltete Fotogalerien. Der Surfer soll zunchst eine bersicht der Bilder mit kleinen Vorschaubildern (Thumbnails) erhalten. Klickt er ein Bild an, erscheint die groe Version des Bildes im Browser. Digitalfotos sind meist auch dafr viel zu gro, so dass gleich zwei verkleinerte Versionen ntig sind. Das klingt nach jeder Menge Handarbeit. Galerie-Tools wie Jojothumb (2 Seite 117) bernehmen die komplette Arbeit. Sie whlen nur die originalen Bilddateien aus und stellen die Parameter ein.
Wasserzeichen
12 Top-Grafik-Tools
Gut gemachte Grafikelemente geben Ihrer Homepage den letzten Schliff. Mit den richtigen Tools sparen Sie sich viel Zeit und erzielen professionelle Ergebnisse.
Wer Fotos online stellt, kann nicht verhindern, dass jedermann diese Bilddateien auf seinen PC kopiert. Ein deutliches Wasserzeichen als Grafik oder Text, wie es beispielsweise Bildschutz Pro (2 Seite 117) erstellt, sorgt aber wenigstens dafr, dass der Copyright-Inhaber nicht vergessen wird. Inhalt Bildschutz Pro 2.5 Wasserzeichen-Tool Irfan View 3.85 Bildbetrachter Jojothumb 2.8 Galeriegenerator Photo Impact XL Bildbearbeitung Studioline Photo Basic Bildverwaltung Xara Webstyle 4 Galeriegenerator Advanced Gif Animator GIF-Animations-Tool Anmaniesmp 2.4i Bildverzerrer Deknop 4.2j Button-Designer Geohtml 2.1 Image Mapper Gifclean 32 2.6d Bildbereiniger Vallen J-Pegger 4.32 Bildbetrachter
Seite
117 117 117 118 118 118 119 119 119 119 119 119
Auf einer Homepage gibt es mehr Grafik, als es auf den ersten Blick den Anschein hat. Hintergrundmuster, Schaltflchen, Logos, Fotos von Produkten oder aus dem letzten Urlaub. Die nachfolgenden Tools helfen Ihnen dabei, diese Grafiken zu erzeugen, ihre Dateigre fr den Einsatz im Web zu optimieren und sie zu verwalten. Die meisten der vorgestellten zwlf Utilities sind kostenlos, und etliche davon konnten wir fr Sie auf C Heft-CD packen.
Bildbetrachter
Bildbetrachter leisten oft viel mehr, als nur Grafikdateien anzuzeigen. Vallen J-Pegger (2 Seite 119) etwa zeigt die EXIF-Infos, die Digitalkameras in JPG-Bildern speichern, ausfhrlich an. Und Irfan View (2 Seite 117) erzeugt einfache Bildergalerien frs Web und bearbeitet im Batchmodus ganze Bildverzeichnisse in einem Rutsch.
Design-Tools
Die Dateigre von Bildern fr das Web zu optimieren ist nicht einfach. Einfache Tools entfernen etwa aus GIF-Bilddateien Kommentare. Ein komplettes Bildbearbeitungsprogramm wie Photo Impact XL (2 Seite 118) nimmt eine automatische Optimierung vor. Es reduziert zum Beispiel die Farbpalette oder hilft beim Komprimieren von JPG-Bildern mit einer Vorschau auf das Endergebnis. Tools wie Xara Webstyle 4
GIF mit Lizenz

Manche Share- und Freeware-Programme knnen Bilddateien im GIF-Format nicht bearbeiten. Grund: Die amerikanische Firma Unisys hat ein weltweites Patent (auer USA) auf den Komprimier-Algorithmus, den GIF einsetzt. Jeder Anbieter eines GIFtauglichen Programms muss Lizenzen zahlen. Als Alternative zu GIF bietet sich das freie PNG-Format an.
116
P Grundlagen
P Workshops
pUtilities
Grafik-Tools
Utilities PpPP S. 116 S. 119
WASSERZEICHEN-TOOL
BILDBETRACHTER
auf C Heft-CD
GALERIEGENERATOR
auf C Heft-CD
Bildschutz Pro 2.5

Preis: Systeme: Sprache: Download: gratis Win 95/98/ME, NT 4, 2000 und XP deutsch www.web-profi-tools.de (1,4 MB)
Irfan View 3.85

Preis: Systeme: Sprache: Download: gratis (10 Euro fr kommerzielle Anwender) Win 95/98/ME, NT 4, 2000 und XP deutsch www.irfanview.de (931 KB)
Jojothumb 2.8
Preis: Systeme: Sprache: Download: gratis Win 95/98/ME, NT 4, 2000 und XP deutsch www.jojotsch.de (2,2 MB)
Bei im Internet verffentlichten Bildern lsst sich kaum verhindern, dass jedermann die Datei kopieren kann. Es gibt eine Reihe von Tricks, um Fotodieben die Arbeit schwer zu machen, wer technisch versiert ist, umgeht aber alle Hindernisse. Mit Bildschutz Pro verhindern Sie zwar keinen Download, erschweren jedoch die Weiterverwendung von Bildern oder Fotos mit hoher Auflsung.
Es gibt kaum ein Grafikformat, das Irfan View nicht ffnen, anzeigen und in einem anderen Format speichern kann. Einfache Bildbearbeitungsfunktionen wie Filter sind ebenfalls integriert, Bilder lassen sich beschneiden oder Ausschnitte anfertigen.
Batchkonvertierung
Besonders ntzlich frs Web ist die Batchkonvertierung. Dabei wandelt das Tool mehrere Bilddateien in einem Rutsch in ein neues Format um, verkleinert oder vergrert sie, wendet Filter an und vergibt neue Dateinamen. Beim Bearbeiten von JPG-Dateien behlt Irfan View die EXIFoder ITPC-Infos im Bild bei. Darin speichern viele Digitalkameras Infos wie Brennweite oder Belichtungszeit. Die Batchkonvertierung entfernt auf Wunsch diese Angaben. Die Funktion Slideshow zeigt nacheinander ausgewhlte Bilder an. Das Tool kann eine solche Show als ausfhrbares Programm oder Bildschirmschoner speichern oder direkt als Daten- oder VideoCD brennen. Es gibt ein einfaches Modul fr die Gestaltung von HTML-Bildgalerien mit Vorschau. Es lohnt sich, von der Homepage des Herstellers die zustzlichen GratisPlug-ins herunterzuladen und zu installieren. Sie enthalten Extrafunktionen wie die verlustlose Bearbeitung von JPG-Dateien. Tipp: ber Datei, Batchkonvertierung/ Umbenennung verkleinern Sie ein ganzes Verzeichnis mit Bildern. Fgen Sie zunchst die Bilder in die Dateiliste ein. Dann whlen Sie die Option Batchkonvertierung und stellen das Zielverzeichnis ein. ber den Button Spezialoptionen legen Sie die neue Bildgre fest. In den meisten Fllen ist eine prozentuale Verkleinerung sinnvoll, weil Sie damit das Seitenverhltnis der Bilder erhalten und Hoch- und Querformat bercksichtigen.
Langfinger abschrecken
Bildschutz Pro kopiert einen beliebigen Text oder eine Logografik als sichtbares Wasserzeichen in die Bilddatei. Damit ist auf den ersten Blick erkennbar, dass es sich um Ihr Bild handelt. Position und Transparenz des Wasserzeichens lassen sich beliebig einstellen. Sie whlen getrennt fr Textund Grafikwasserzeichen zwischen neun Positionen aus. Dabei ist es erlaubt, ein Wasserzeichen auch mehrfach an verschiedenen Positionen einzufgen. Das Grafikwasserzeichen passt Bildschutz Pro auf Wunsch an die Gre des Bildes an. Damit erscheint es auch bei Bildern unterschiedlicher Gre immer gut sichtbar. Auf diese Weise lsst sich eine Raubkopie leicht identifizieren. Das Tool setzt auch das Kommentarfeld in der Bilddatei sofern das Dateiformat dies untersttzt und kopiert bei JPG zustzliche Bildinformationen (EXIF und ITPC). Die kostenpflichtige Version fr 19,95 Euro bearbeitet nicht nur Einzelbilder, sondern ganze Verzeichnisse am Stck. Tipp: Wenn Sie fter Bilder bearbeiten, ist es sinnvoll, die Einstellungen als Profil zu sichern. Dazu rufen Sie Datei, Konfiguration speichern unter auf. Tragen Sie einen Dateinamen ein fertig. Beim nchsten Mal holen Sie alle Details mit Datei, Konfiguration erneut laden zurck.
Wenn Sie die besten Fotos aus dem letzten Urlaub auf der Homepage als Bildergalerie verffentlichen mchten, nimmt Jojothumb Ihnen die einzelnen Handgriffe ab. Das Programm liest die Bilddateien ein, verkleinert sie auf die gewnschte Gre, erzeugt die Vorschaugrafiken (Thumbnails) und erstellt die ntigen HTML-Dateien. Die Ausgabe lsst sich auf vielfltige Weise konfigurieren. Sie bestimmen etwa, wie gro die Thumbnails sind oder wie viele davon auf einer Web-Seite erscheinen. Wahlweise erzeugt Jojothumb auch eine Start- und eine Indexseite mit Links auf alle Galerieseiten. Interessant ist die Option, die verkleinerten Bilder mit einem Stempel zu versehen. Das kann ein einfacher Text sein oder auch ein Bild, etwa ein Firmenlogo. Zwei vordefinierte Layouts arbeiten mit Schatteneffekt sowie mit Rahmen. Weitere Anpassungen sind erlaubt.
Bilder manipulieren
Wer besondere Ergebnisse erzielen will, kann auf die ausgefeilte Scriptsprache Jojoscript zurckgreifen. Damit ist es beispielsweise kein Problem, in die Bilder individuelle Texte einzufgen. Diese knnen zum Beispiel aus den EXIF-Daten einer Bilddatei wie Belichtungszeit, Blende oder Brennweite stammen, die Digitalkameras in JPG-Dateien speichern. Scriptbefehle sind in geschweiften Klammern auch in den Seitendefinitionen erlaubt so lsst sich etwa der Dateiname einfgen. Tipp: Fr eine Bildunterschrift mit Dateiname und Dateigre klicken Sie auf Optionen und whlen das Register Seitendefinition aus. Klicken Sie in der Vorschau auf Bildbeschreibung. Im Eingabefeld unten tippen Sie {file_ext}, {format (%3.2,size_kbyte)} (ohne Anfhrungszeichen) ein.
117
Utilities Grafik-Tools S. 116 S. 119 PPpP
P Grundlagen
P Workshops
pUtilities
BILDBEARBEITUNG
auf C Heft-CD
BILDVERWALTUNG
auf C Heft-CD
GALERIEGENERATOR
auf C Heft-CD
Photo Impact XL
Preis: Systeme: Sprache: Download: 99,95 Euro Win 95/98/ME, NT 4, 2000 und XP deutsch www.ulead.de (42,8 MB)
Studioline Photo Basic

Preis: Systeme: Sprache: Download: gratis Win 95/98/ME, NT 4, 2000 und XP deutsch www.studioline.net/de/ (28,9 MB)
Xara Webstyle 4
Preis: Systeme: Sprache: Download: 69 Dollar Win 98/ME, 2000 und XP englisch www.xara.com (13,9 MB)
Ein ausgewachsenes Bildbearbeitungsprogramm mit ausgefeilten Web-Funktionen ist Photo Impact XL. Die neue Version XL ist strker auf Digitalfotos ausgerichtet. So kann die Shareware etwa blasse oder dunkle Fotos mit einem Sonnenlicht-Filter aufhellen. In Nachtaufnahmen fgt Photo Impact XL realistische Darstellungen des Mondes ein. Bildverfremdungen erreichen Sie mit Kreativeffekten, mit denen Sie in geeignete Fotos etwa blauen Himmel, Wolken, Regen oder ein Feuerwerk einfgen. Designer entwerfen mit dem Programm komplette grafische Web-Seiten. Photo Impact erzeugt im Hintergrund den ntigen HTML-Code. Im Bildarchiv stehen ber 2000 Grafikelemente und Animationen fr den Einbau in Web-Seiten bereit.
Ein Bildarchiv mit Bildbearbeitungsfunktionen ist Studioline Photo Basic. Nach dem Import der Bilder organisieren Sie die Dateien in Kategorien, die Sie selbst anlegen. Jedes Bild bekommt einen Namen und lsst sich mit beliebig vielen Beschreibungstexten versehen. Neue thematische Kategorien erzeugen Sie aus den Bildern vorhandener Kategorien. So knnen Sie etwa Kategorien mit den einzelnen Urlaubsreisen anlegen und dann in einer weiteren Kategorie alle Sonnenuntergnge zusammenfassen, egal, in welchem Urlaub Sie die einzelnen Fotos geschossen haben.
Digitalkamerabilder nachbearbeiten
Die Software leistet vor allem bei der Nachbearbeitung von Fotos aus Digitalkameras gute Dienste. Eine Reihe von Filtern wie Rote-Augen-Korrektur oder Schwarzwei-Umwandlung stehen hierfr bereit. Studioline verndert nicht die Originalbilder, sondern speichert die darauf angewendeten Filter. So bleibt das Original immer erhalten, einzelne Filteroptionen lassen sich jederzeit wieder rckgngig machen. Die Ausgabe der Bilder erfolgt unter anderem als Web-Galerie, in der Basic-Version stehen zwei ansehnliche Layouts zur Auswahl. Die Vorschauseiten stattet Studioline mit animierten Thumbnails aus, die auf Mausberhrung reagieren. Die eingetippten Beschreibungstexte und Bildnamen erscheinen in der fertigen Galerie. Studioline ist empfehlenswert fr Anwender, die komplexe Galerien mit Zusatztexten und aufwendigem Layout gestalten wollen. Zwei wesentliche Einschrnkungen der Freeware-Version: GIF-Bilder und komprimierte TIFF-Bilder lassen sich nicht ffnen. Auerdem verkraftet die Datenbank maximal 200 Bilder. Die Vollversion Studioline Photo 2 kostet 44 Euro.
Auf besonders einfache Bedienung setzt die Shareware Xara Webstyle 4. Mit dem Tool erzeugen Sie praktisch alle Arten von Grafiken inklusive kompletter Web-Seiten: Navigationsleisten und Mens, Werbebanner, Logos, Trennlinien, Aufzhlungspunkte (Bullets), berschriften, 3D-berschriften, Hintergrundmuster und Buttons. Zustzlich erzeugt Webstyle komplette Themen-Sets, alle ntigen Grafiken (Hintergrund, Buttons und so weiter) fr eine Website, die farblich und im Design aufeinander abgestimmt sind. Fr ganz Eilige gibt es komplette Web-Seitenvorlagen, die nur noch angepasst werden mssen.
Einfachste Bedienung
Die Arbeit folgt in allen Kategorien demselben Schema und ist ganz leicht: Sie whlen aus den Vorlagen ein Objekt aus, das Ihren Vorstellungen entspricht. ber Schaltflchen auf der linken Seite passen Sie die Gestaltung an: Text, Farben, Hintergrundmuster, 3D-Effekt, Schatten und Gre. Bei den 3D-berschriften knnen Sie eine beliebige Schrift verwenden, die auf Ihrem PC unter Windows installiert ist. Abschlieend erzeugt ein Mausklick auf Save die gewnschten Dateien. Bei Grafiken stehen die Formate JPG, GIF und PNG zur Auswahl. Komplette WebSeiten speichert Webstyle inklusive HTMLDatei. Auf Wunsch fgt die Software dabei spezielle Markierungen fr Frontpage und Dreamweaver ein (2 ab Seite 102). Ein eigenes Modul ist fr die Gestaltung von Bildergalerien zustndig. Gleich beim Import der Bilddateien bringt Webstyle sie auf eine web-taugliche Gre. Alle Thumbnails landen auf einer Web-Seite, fr jedes Bild lassen sich eine berschrift und eine Beschreibung eintragen. Das Layout whlen Sie aus den vorhandenen Seitenvorlagen.
Diashow-Funktion
Ein Highlight ist die Diashow-Funktion. Aus etlichen Grafikvorlagen lsst sich das gewnschte Design auswhlen. Das Tool bringt Ihre Fotos auf die richtige Gre und blendet optional Beschreibungstexte ein. Auf einer Web-Seite sind auch mehrere Diashows erlaubt. Dass Photo Impact XL auch den HTML-Code fr Image Maps erzeugen kann, erscheint schon fast selbstverstndlich. Dynamic HTML fr animierte Mens, Mouseover-Schaltflchen und andere Effekte erzeugt das Tool ebenfalls. Sie geben nur die Grafiken an, Photo Impact XL erzeugt den ntigen Programmcode. Tipp: Mit der <F4>-Taste rufen Sie den Bildoptimierer fr das Web auf. Er hilft Ihnen dabei, die Dateigre eines Bildes zu reduzieren. Im Vorschaubereich sehen Sie genau, welche Spuren die eingestellte Komprimierung im Bild hinterlsst. Auf diese Weise gelangen Sie rasch zur optimalen Einstellung. Als Ausgabeformate stehen GIF, JPG und PNG zur Verfgung.
118
P Grundlagen
P Workshops
pUtilities
Grafik-Tools
Utilities PPPp S. 116 S. 119
GIF-ANIMATIONS-TOOL
auf C Heft-CD
BILDVERZERRER
auf C Heft-CD
BUTTON-DESIGNER
auf C Heft-CD
Advanced Gif Animator

Preis: Download: 35 Dollar http://gif.creabit.com (2,7 MB)
Anmaniesmp 2.4i
Preis: Download: gratis www.anmanie.de (739 KB)
Deknop 4.2j
Preis: Download: gratis http://home.hccnet.nl/s.j.francke/ deknop/deknop.htm (2,7 MB)
Das GIF-Format bietet eine Besonderheit: In einer Datei lassen sich mehrere Bilder speichern, die bei der Anzeige im Browser wie ein Trickfilm ablaufen. Advanced Gif Animator fr Win 95/98/ME, NT 4, 2000 und XP hilft, solche kurzen Bildsequenzen zu gestalten. Mit dem eingebauten Zeichenprogramm gestalten Sie die Einzelbilder. Als Rohmaterial importiert das Tool neben GIF auch AVI-Videos und animierte Windows-Cursor. Die fertige GIF-Datei komprimiert das Programm auf Wunsch zustzlich, indem es die Farbpaletten vereinheitlicht und unntige Infos lscht.
Partyfotos auf der Homepage sind ja ganz nett. So richtig amsant sind sie aber oft erst dann, wenn die abgebildeten Gesichter mit Anmaniesmp retuschiert worden sind. Das kleine Tool fr Win 95/98/ ME, NT 4, 2000 und XP bietet eine Reihe von Werkzeugen. Sie drfen einzelne Bereiche wachsen oder schrumpfen lassen, verdrehen, ziehen oder pltten. Sie sehen in Echtzeit, wenn das Werkzeug ein berbreites Grinsen auf ein Gesicht zaubert. Sogar Animationsvideos erzeugt Anmaniesmp, die sich etwa mit Advanced Gif Animator (2 links) aufbereiten lassen.
Deknop fr Win 95/98/ ME, NT 4, 2000 und XP erzeugt rechteckige Buttons etwa fr Navigationsleisten auf Web-Seiten. Mit dem Tool lassen sich ansprechende 3D-Buttons gestalten, Flche und Schrift erscheinen einfarbig, mit Verlauf oder mit Grafiktextur. Besonders einfach ist es, einen ganzen Satz von Buttons mit unterschiedlicher Beschriftung zu erstellen. Sie tragen die Texte ein, Deknop generiert mit einem Menaufruf alle Grafiken (GIF, JPG, PNG oder BMP). Wichtig: Die deutsche Sprachdatei mssen Sie extra herunterladen und ins Programmverzeichnis kopieren.
IMAGE MAPPER
auf C Heft-CD
BILDBEREINIGER
BILDBETRACHTER
Geohtml 2.1
Preis: Download: gratis www.fegi.ru/geohtml (1,2 MB)
Gifclean 32 2.6d
Preis: Download: gratis http://members.tripod.com/ mharing/gifclean.html (396 KB)
Vallen J-Pegger 4.32

Preis: Download: gratis www.vallen.de (1,8 MB)
HTML 4.0 untersttzt Image Maps. Diese Technik ermglicht es, dass ein Surfer eine bestimmte Stelle eines Bildes anklickt und damit eine bestimmte Web-Adresse aufruft. Welche Bereiche der Grafik als Link funktionieren, legen Sie fest. Als Bereich sind Rechtecke, Kreise und beliebige Umrisse erlaubt. Mit Geohtml fr Win 95/ 98/ME, NT 4, 2000 und XP laden Sie das Bild und zeichnen die gewnschten ImageMap-Bereiche mit der Maus ein. Daraus erzeugt das englischsprachige Tool die erforderlichen HTML-Tags. Bestehende Image Maps importiert Geohtml problemlos.
GIF-Bilder enthalten oft Infos wie Kommentare zum Bildinhalt oder CopyrightHinweise. Beim Einsatz auf Web-Seiten kommt es entscheidend auf die Dateigre an, bei vielen Bildern lassen sich rasch ein paar KB einsparen. Gifclean 32 fr Win 95/98/ME, NT 4, 2000 und XP entfernt alle Zusatzdaten aus GIF-Bildern. Das englischsprachige Tool mit der etwas eigenwilligen Bedienung kann aber auch Kommentare in die Bilder einfgen. Auf Wunsch sichert Gifclean 32 die gesuberten Bilddateien nach einigen Sekunden automatisch. Dabei berschreibt es die Originaldatei.
Einen schnellen berblick ber Bilddateien verschiedenster Formate verschafft Vallen J-Pegger fr Win 95/98/ME, NT 4, 2000 und XP. Links sehen Sie einen Dateibaum wie im Windows-Explorer oder kleine Vorschaugrafiken. Rechts zeigt das Tool das markierte Bild gro an. Wahlweise erscheinen die Thumbnails ebenfalls rechts, das Vollbild ist dann via Karteireiter erreichbar. Die EXIF-Infos in JPG-Bildern. werden ausfhrlich angezeigt. Praktisch fr Besitzer eines USB-Sticks: Vallen J-Pegger muss nicht installiert werden das Tool ist sofort auf jedem PC einsatzbereit.
119
pern nmlich das Web genau nach solchen Mailto-Links ab. Verschlsseln Sie die Mailadresse so, dass sie Besucher im Browser problemlos lesen knnen, die Suchroboter aber nichts erkennen. Diese Aufgabe erledigt Mailto-Encrypter fr Sie (2 Seite 125). Suchmaschinen wie Google oder Altavista sind so etwas wie die Gelben Seiten des Webs. Sorgen Sie dafr, dass diese und andere Suchmaschinen Ihre Website indexieren. Nur so knnen Interessenten sie auch finden. Dazu versehen Sie die HTMLDateien mit aussagekrftigen Meta-Informationen wie Stichwrtern und Beschreibung. Hierbei hilft Ihnen Meta Master (2 Seite 125). Und Anmelde-Software wie Adaurl (2 Seite 124) teilt den Suchmaschinen Ihre Internet-Adresse mit.
Websites pflegen: Content Management System
18 Homepage-Tools
Auch wer mit seinem HTML- oder Web-Editor zufrieden ist, kann sich den Alltag beim Homepage-Design noch erleichtern. Wir haben 18 wichtige Spezial-Tools fr Sie zusammengestellt.
Falls Sie schon einen guten HTML- oder Web-Editor haben, mit dem Sie gerne arbeiten, lohnt es sich trotzdem, andere Tools in Augenschein zu nehmen. Denn kein Programm deckt alle Bereiche gleich gut ab. Manche Aufgaben lassen sich mit den groen Design-Werkzeugen nur umstndlich und zeitaufwendig lsen, whrend ein kleines Spezial-Tool das Problem in wenigen Minuten im Griff hat. Die Mehrzahl der vorgestellten 18 Utilities ist brigens kostenlos, die meisten konnten wir fr Sie auf die C Heft-CD packen. Ein weites Feld ist die Bearbeitung von HTML-Dateien. Oft ist das Problem, dass es nicht nur um fnf oder zehn Dateien geht, sondern ein paar Hundert zu bearbeiten sind. Sie wollen beispielsweise auf den Web-Seiten Ihre Mailadresse anpassen oder einen neuen Link in die Navigationsleiste einfgen. Das Suchen & Ersetzen erledigen Tools wie Info Rapid (2 Seite 122) automatisch in Hunderten von Dateien, die sogar ber mehrere Verzeichnisse verstreut sind.
HTML-Tools: Quelltext schnell optimieren
Auch sonst bietet HTML viel Raum zum Optimieren. Das Textformat HTML erlaubt beliebig viele Leerzeichen und Kommentare, die der Browser bei der Anzeige aber nur berliest. Wenn Sie diese Zeichen entfernen, so verkleinert sich die Datei und die Ladezeit im Internet verkrzt sich. Oder Sie wollen andersherum eine Datei fr die Ansicht im TextEditor formatieren die einschlgigen Tools wie Mhs HTML Tool (2 Seite 125) erledigen beides. Im Zeitalter massenhaften Mail-Spams ist es nicht ratsam, seine Mailadresse ffentlich auf der Website zu publizieren. Automa- Effekt mit Text: Wem das Originalprogramm fr Flash-Animationen zu teuer tische Suchroboter klap- ist, der nimmt Swish Lite, dessen Strke Textanimationen sind
Nicht immer ist ein normaler Web- oder HTML-Editor die beste Wahl fr die Pflege einer Homepage. Sie wollen etwa ein Tagebuch (englisch: Weblog) publizieren, das Sie tglich oder alle paar Wochen um neue Eintrge ergnzen. Ein spezieller WeblogEditor kmmert sich automatisch um die Verwaltung, Sie tippen nur Ihre Tagesbeitrge ein. ltere Eintrge wandern so zum Beispiel automatisch auf eine Archivseite. Auf Seite 124 stellen wir Ihnen fr diesen Einsatzzweck Blog vor. Wenn Sie eine Vereins- oder Firmenseite betreuen, sind Sie es sicher bald leid, auch kleinste nderungen selbst durchfhren zu mssen. Mit einem einfachen Content Management System (CMS) wie Zeta Producer (2 Seite 123) verlagern Sie Arbeit auf
120
P Grundlagen
P Workshops
pUtilities
Utilities Homepage-Tools PpPPPP S. 120 S. 125
die Verursacher. Diese mssen gar nichts ber HTML und die Erstellung von Web-Seiten wissen, sondern tragen nur ihren neuen Text in das System ein. Das erzeugt daraus eine normale Web-Seite und bertrgt diese zum Webserver. Sogar Teamarbeit ist mit solchen kostenlosen Tools machbar. Profis in Sachen Website-Gestaltung nutzen oft Cascading Style Sheets (CSS), um die Gestaltung und das Layout zu vereinheitlichen. Smtliche Angaben stecken in einer einzigen CSS-Datei, die Sie ber einen Link in alle HTML-Dateien einbinden. Eine nderung an den CSSRegeln wirkt dann automatisch auf alle Web-Seiten. Viele Web-Editoren untersttzen CSS aber nur mangelhaft. Besondere CSS-Editoren beispielsweise Morphon CSS Editor (2 Seite 123) helfen Ihnen, die Eigenschaften und Regeln zu entwerfen und zu pflegen.
nen Sie die Gestaltung einer Web-Seite steuern knnen. Diese Aufgabe sollen Stylesheets bernehmen. Es wird zwar noch einige Jahre dauern, bis sich XHTML durchsetzt, aber CSS lsst sich auch mit dem aktuellen HTML 4.0 gut einsetzen. CSS Level 2 Der aktuelle Standard fr CSS heit CSS Level 2. Neben Eigenschaften fr die Schriftgestaltung und Farbgebung kann er vor allem beliebige Elemente wie Bilder oder Abstze frei im Browser-Fenster platzieren. Diese positionierbaren Bereiche sind zum Beispiel die Grundlage fr aufklappbare Mens oder Animationen. Solche Effekte, bei denen auch Javascript zum Einsatz kommt, sind unter dem Namen Dynamic HTML oder kurz DHTML bekannt. Die Browser von Internet Explorer ber Mozilla/Netscape 7 bis Opera untersttzen die allermeisten CSS-Eigenschaften. Es gibt ziemlich viele CSS-Eigenschaften und noch mehr gltige Werte. So kennt CSS Level 2 beispielsweise Farbwerte, die sich auf die Systemumgebung des Surfers beziehen. Mit color: windowtext; stellen Sie beispielsweise eine Schriftfarbe ein, die
Mehr Infos
Internet Eine der aktuellsten und umfangreichsten Sammelseiten fr Free- und Shareware rund um das Thema Internet ist www.webattack. com. Dort finden Sie bersichtlich sortiert vor allem englischsprachige Programme. Eine kleine, aber feine Sammlung an kostenlosen Programmen finden Sie bei www.freeware-ar chiv.de. Die Rubrik Internet + DF listet einschlgige Tools auf, viele davon mit deutschsprachiger Bedienerfhrung. Auch das Archiv unter der Adresse www.freeware.de hat sich auf kostenlose, groteils deutschsprachige Software spezialisiert.
Stylesheets im Griff: CSS-Editoren helfen

CSS gehrt die Zukunft, denn die knftige Version von HTML, XHTML 2.0, ist schon fast fertiggestellt. Und bei XHTML 2.0 gibt es keine Tags und Attribute mehr, mit de-
der normalen Textfarbe in einem Windows-Fenster entspricht. Da sich niemand diese vielen Details merken kann, helfen die CSS-Editoren auf den folgenden Seiten weiter. Sie bieten die Eigenschaften und erlaubten Werte bequem ber Dialogfelder und Auswahllisten an. Auch die Umrechnung von Farben in die RGB-Farbwerte nehmen Ihnen diese Tools ab.
Im berblick: 18 Homepage-Tools
Produkt C Adaurl 2.02 C Blog 7.1 C Color Fazer 1.0 Exactmapper Lite 1.2 HTML bulk 4.0 HTML Calendar Generator 4.02 C Info Rapid 3.1f Mailto-Encrypter C Meta Master 1.1 C Mhs HTML Tool 2.11 Morphon CSS Editor 1.3.6 Robot Pack 1.2 C Speedcms 1.3d Swish Lite 1.52 C Webexe 1.5 C Zeta Producer 4.0
* 25 Euro fr kommerzielle Anwender
Kategorie Suchmaschineneintrag Weblog-Autorensystem Farbgenerator Sitemap-Generator HTML-Konvertierung Kalender-Tool
Preis gratis gratis gratis gratis 9 Euro gratis 10,22 Euro gratis* gratis gratis gratis gratis gratis
Betriebssysteme Win 95/98/ME, NT 4, 2000, XP Win 98, ME, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Java Win 98/ME, NT 4, 2000, XP Win ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP Win 95/98/ME, NT 4, 2000, XP
Internet www.adaurl.com/de www.farook.org http://coscorrosa.com/ programs/cfazer www.exacttrend.com www.mettlerweb.de www.dbhsoftware.com www.cadkas.de www.inforapid.de www.dark-street.com www.modernbytes.cjb.net www.rms.to www.mhsoft.de www.morphon.com/ csseditor www.soho-it.com http://speedcms.de.vu www.swishzone.com www.aw-soft.de www.zeta-producer.de
Download Seite 840 KB 1,9 MB 1,7 MB 1,1 MB 1,7 MB 1,6 MB 378 KB 1 MB 840 KB 197 KB 851 KB 348 KB 12 MB 5,8 MB 521 KB 1,6 MB 1,6 MB 15,1 MB 124 124 124 122 124 122 124 122 124 125 125 125 123 125 125 123 125 123
C HTML Verschlsseler 1.2 Dateischutz Suchen & Ersetzen Spam-Schutz Meta-Tag-Generator HTML-Formatierung CSS-Editor C Javascript Utility Suite 1.0 Javascript-Generator
Suchmaschinensteuerung gratis Content Management System Flash-Animationen Offline-Browser Content Management System gratis 19,95 Dollar 39,95 Euro gratis
121
Utilities Homepage-Tools S. 120 S. 125 PPpPPP
P Grundlagen
P Workshops
pUtilities
SITEMAP-GENERATOR
KALENDER-TOOL
SUCHEN & ERSETZEN
auf C Heft-CD
Exactmapper Lite 1.2

Preis: gratis Systeme: Windows 95/98/ME, NT 4, 2000, XP Sprache: englisch Download: www.exacttrend.com (1,1 MB)
HTML Calendar Generator 4.02

Preis: gratis Systeme: Windows 95/98/ME, NT 4, 2000, XP Sprache: englisch (Ausgabe deutsch) Download: www.dbhsoftware.com (1,6 MB)
Info Rapid 3.1f

Preis: gratis (25 Euro fr kommerzielle Anwender) Systeme: Windows 95/98/ME, NT 4, 2000, XP Sprache: deutsch Download: www.inforapid.de (1 MB)
Je umfangreicher eine Website ist, desto schwieriger wird es fr Besucher, sich zu orientieren. Besonders stark strukturierte Angebote mit mehreren Hierarchie-Ebenen sind schwer zu durchschauen. ber die Navigationsleiste ist immer nur eine Ebene sichtbar. Davon abgesehen, haben die Menschen ein ganz unterschiedliches Ordnungsempfinden: Was der eine logisch findet, ist fr einen anderen Dschungel pur. Abhilfe schafft eine Sitemap, ein Verzeichnis aller Web-Seiten, aus denen die Web-Prsenz besteht. In einer langen Liste findet ein Besucher oft schneller das Gewnschte. Es ist sehr mhsam, eine Sitemap von Hand anzulegen und vor allem bei nderungen zu pflegen. Diese Aufgabe bernimmt Exactmapper Lite.
Assistenten helfen
Sie whlen ber einen Assistenten nur die Basisseite aus, das Tool ermittelt selbst die Links zu den anderen Seiten und baut daraus eine hierarchische Liste auf. Die Liste lsst sich bearbeiten, beispielsweise knnen Sie ste lschen, hinzufgen oder die Ebene ndern. In mehreren Registern bestimmen Sie das genaue Layout und den Inhalt der Sitemap. Abschlieend erzeugt Exactmapper Lite eine HTML-Datei, die Sie nur noch hochladen mssen. Der SitemapGenerator kommt auch mit sehr groen Web-Angeboten zurecht: Die Self-HTMLReferenz von Stefan Mnz (http://selfhtml. teamone.de) hat ber 2000 HTML-Dateien kein Problem fr Exactmapper Lite. Tipp: ber das Register Style legen Sie das Layout fest. Die Option Index Page erzeugt eine alphabetisch sortierte Liste. Mit der Schaltflche Preview Site Map starten Sie eine Vorschau mit den aktuellen Einstellungen in Ihrem Standard-Browser.
Es ist eine ziemlich mhsame Angelegenheit, einen Kalender mit Terminen als Web-Seite zu pflegen. Der HTML Calendar Generator ist Ihnen dabei behilflich. Sie verwalten die Termine in bersichtlichen Dialogboxen. Zu jedem Tag drfen Sie zehn Eintragungen machen. Jeder Eintrag lsst sich mit einem Link hinterlegen. Ein Tageseintrag kann zustzlich mit einem Bild etwa einem animierten Ausrufezeichen ausgestattet sein. So ruft beispielsweise ein Klick auf einen Eintrag direkt eine Web-Seite mit den Details auf. ber die Optionen legen Sie wiederkehrende Ereignisse fest, zum Beispiel Geburtstage. Das Programm erzeugt aus den Terminen eine Serie von HTML-Dateien mit Jahres- und Monatskalender und zwar nicht nur in Englisch, sondern auch in Deutsch und in neun weiteren Sprachen.
Das Problem: Eine Website ist auf ber hundert HTML-Seiten angewachsen. Und nun mchten Sie einen neuen Link in die Navigationsleiste einsetzen. Oder Sie suchen eine bestimmte Mailadresse auf irgendeiner der Seiten, um sie zu ndern. Oder Sie wollen eine Ladung Word-Dokumente in ordentliche HTML-Dateien ohne Ballast umwandeln. Da ist Handarbeit gefragt oder Info Rapid Suchen & Ersetzen.
Vielseitige Suchoptionen
Das Tool bearbeitet beliebig viele Dateien in einem Rutsch, Sie whlen nur das Verzeichnis und die Dateimaske (*.html und dergleichen) aus. Als Suchbegriff geben Sie entweder ganz normalen Text ein, oder Sie verwenden die hnlichkeitssuche, wenn Sie sich mit der Schreibweise nicht sicher sind. Der Mustervergleich ist etwas fr Profis, dafr gibt es nichts, was sich damit nicht exakt finden lsst. Auch Sonderzeichen wie Zeilenumbruch oder Tabulator sind erlaubt. Optional beschrnken Sie auf Grooder Kleinschreibung, suchen nur nach ganzen Wrtern oder nur in einer Zeile. Ein anderer Einsatzzweck von Info Rapid besteht darin, im lokalen Cache des Web-Browsers nach Stichwrtern zu suchen, die sich dann offline anzeigen lassen. Die Software verwaltet mehrere Suchauftrge gleichzeitig, Sie schalten wie bei Excel ber Karteireiter um. Tipp: Mit dem Mustervergleich formulieren Sie komplexe Suchauftrge. Uwe&Udo& Rolf findet beispielsweise alle Dateien, in denen diese drei Namen vorkommen. M[ae][iy]er findet viele Schreibweisen des Namens, etwa Maier, Mayer, Meier oder auch Meyer. Die Buchstaben in eckigen Klammern sind eine Aufzhlung der an dieser Stelle erlaubten Buchstaben.
Freie Konfiguration
Die Gestaltung des Kalenders bestimmen Sie ber viele Optionen weitgehend selbst. Sie whlen die Elemente aus, stellen die Farben und das Hintergrundbild ein und legen Meta-Tags fr Suchbegriffe und Autor fest. Sogar externe Cascading Style Sheets und HTML-Includes fr professionelle Anwender sind vorgesehen. Alle Angaben speichern Sie als Profil, so dass Sie mehrere Kalendertypen pflegen knnen. Mit einem einfachen FTP-Client bertragen Sie einen neuen Kalender sofort zu Ihrem Webserver. Tipp: Mit dem Button Configure rufen Sie den Einstellungsdialog auf. Im Register Language stellen Sie in der Auswahlliste German ein. Damit erzeugt der Generator einen deutschen Kalender. ber Add new language legen Sie Ihre eigenen Texte fest, etwa fr einen Dialektkalender.
122
P Grundlagen
P Workshops
pUtilities
Utilities Homepage-Tools PPPpPP S. 120 S. 125
CSS-EDITOR
FLASH-ANIMATIONEN
CONTENT MANAGEMENT SYSTEM auf C Heft-CD
Morphon CSS Editor 1.3.6

Preis: gratis Systeme: Java Sprache: englisch, deutsch mit Zusatzdatei Download: www.morphon.com/csseditor (12 MB)
Swish Lite 1.52

Preis: 19,95 Dollar Systeme: Windows 95/98/ME, NT 4, 2000, XP Sprache: englisch Download: www.swishzone.com (1,6 MB)
Zeta Producer 4.0

Preis: gratis Systeme: Windows 95/98/ME, NT 4, 2000, XP Sprache: deutsch Download: www.zeta-producer.de (15,1 MB)
Ein Werkzeug fr Profis ist Morphon CSS Editor. Das Tool ist in Java programmiert und luft somit mit praktisch allen Betriebssystemen, sofern dort eine Java Virtual Machine (JVM) installiert ist. Die JVM gibt es unter www.java.com kostenlos. Das Tool bietet alle Optionen von CSS Level 1 und 2, CSS Mobile sowie SVG in Dialogboxen an. In einer hierarchischen Liste whlen Sie aus, welche CSS-Eigenschaft Sie in die aktuelle CSS-Datei einfgen wollen. Dabei orientiert sich der Editor am offiziellen W3C-Standard. Die Details zu den Eigenschaften und die erlaubten Werte sind in den Dialogfeldern vorgegeben, Sie whlen nur die passenden Einstellungen aus.
Flash-Animationen sind vor allem fr Einfhrungen auf eine Homepage beliebt. Das Originalprogramm Macromedia Flash ist allerdings recht teuer. Die preiswerte Alternative heit Swish Lite, das sich auf Textanimationen konzentriert. Die erzeugten Dateien haben dasselbe Format wie die mit Macromedia Flash erstellten und funktionieren daher auf rund 95 Prozent aller PCs mit Internet-Anschluss.
Fertige Effekte
Sie geben den Text ein, whlen Art und Farbe der Schrift sowie weitere Details. Dann fgen Sie der Animation fertige Effekte hinzu, die die Schrift etwa langsam aus- oder einblenden, quetschen, explodieren oder dreidimensional rotieren lassen. ber die Vorschau begutachten Sie die Animation zwischendurch. Auer Text sind als Elemente Pixelbilder, Sounddateien (Formate WAV oder MP3) und Buttons erlaubt. Damit gestalten Sie zum Beispiel eine Jukebox oder ein animiertes Auswahlmen. Beim Export entsteht nicht nur eine SWF-Datei, das Tool erzeugt nach Ihren Vorgaben auch die HTML-Tags, mit denen Sie die Animation auf der Web-Seite einbinden. Die Tags kopieren Sie ber die Zwischenablage von Windows. Neben rechteckigen Animationen sind auch Transparenzeffekte mglich. Damit scheint auf der Web-Seite der Hintergrund an transparenten Stellen der Flash-Animation durch. Tipp: ber das Register Actions realisieren Sie Reaktionen auf Mausklicks. Damit etwa nach dem Anklicken eine bestimmte WebSeite erscheint, klicken Sie zuerst auf Add Event und whlen On Press aus. Dann klicken Sie auf Add Action und whlen Goto URL. Jetzt tragen Sie nur noch die Web-Adresse ein fertig.
Mit diesem Tool gestalten Sie komplette Websites ohne HTML-Kenntnisse und ohne zustzliche Werkzeuge. Die Bedienung ist einfach, gelungen ist auch die deutschsprachige Online-Hilfe, die das Tutorial fr den Einstieg in das Programm ergnzt. Zunchst legen Sie die Seitenstruktur fest, der Ihre Site folgen soll. Die Hierarchie setzt das Tool spter automatisch in eine Navigationsleiste um. Sie knnen jederzeit Seiten ergnzen, verschieben oder lschen.
Layout nach Kapiteln

Eine Seite besteht aus einer beliebigen Zahl von Kapiteln. Ein Kapitel ist ein Element auf der fertigen Web-Seite, etwa eine berschrift oder ein Absatz. Jedes Kapitel hat ein eigenes Layout, das Sie aus einer Reihe von Vorlagen whlen. Fr die gesamte Site gibt es ebenfalls eine austauschbare Design-Vorlage. Auch ein Editor fr Formulare und eine automatische Sitemap-Funktion sind enthalten. Wer selbst Kapitel- und Sitevorlagen gestalten mchte, braucht dafr jedoch HTML-Kenntnisse. Ist alles fertig gestellt, so bernimmt Zeta Producer auch den Upload zum Webserver. Die Freeware-Version des Programms drfen Sie unbeschrnkt nutzen, allerdings lassen sich maximal 20 Web-Seiten damit pflegen. Die kommerzielle Version 5.0 hebt diese Einschrnkung auf und bietet viele zustzliche Funktionen. Tipp: Oft ist es sinnvoll, Web-Seiten eine Zeitlang vor dem Termin zu gestalten, zu dem sie online stehen sollen. Per Doppelklick auf einen Seiteneintrag rufen Sie dessen Eigenschaftendialog auf. Im Register Standard entfernen Sie das Hkchen vor Diese Seite im Internet anzeigen. Wenn Sie die Site verffentlichen, bertrgt Zeta Producer so markierte Seiten nicht mit.
Nah am Standard
Die Entwickler haben die Vorgaben der W3C-Standards fast komplett bercksichtigt. So sind zum Beispiel auch die CSS-Einstellungen fr die Druckausgabe vorhanden, auch wenn der Internet Explorer 6 und die meisten anderen Browser damit nichts anfangen knnen. Damit Sie die bersicht behalten, zeigt die Ansicht Summary alle CSS-Eigenschaften der aktuellen CSS-Datei an. ber die Ansicht Source prsentiert der Editor den Quelltext zur gerade markierten CSSRegel. Beim Speichern erzeugt er eine separate CSS-Datei, die Sie ber einen Link in beliebig viele HTML-Dateien einbinden. Tipp: Um die deutschsprachigen Texte fr die Programmoberflche zu erhalten, laden Sie auf der Homepage des Herstellers die Sprachdatei CSSEditor_de.properties herunter (rechte Maustaste im Browser, dann im Kontextmen Speichern unter). Diese Datei kopieren Sie in das Programmverzeichnis, standardmig ist das C:\Programme\Morphon CSS Editor 1.3.6.
123
Utilities Homepage-Tools S. 120 S. 125 PPPPpP
P Grundlagen
P Workshops
pUtilities
SUCHMASCHINENEINTRAG
auf C Heft-CD
WEBLOG-AUTORENSYSTEM
auf C Heft-CD
FARBGENERATOR
auf C Heft-CD
Adaurl 2.02
Preis: Download: gratis www.adaurl.com/de (840 KB)
Blog 7.1
Preis: Download: gratis www.farook.org (1,9 MB)
Color Fazer 1.0

Preis: Download: gratis http://coscorrosa.com (1,7 MB)
Damit viele Besucher Ihre Website finden, muss sie in Suchmaschinen vertreten sein. Um sicherzustellen, dass die Suchmaschinen die Seite auch in ihre Datenbank aufnehmen, melden Sie am besten Ihre Web-Adresse dort an. Bei einer Suchmaschine ist das noch okay, aber bei zwei Dutzend richtig lstig. Delegieren Sie diese Aufgabe an Adaurl. Sie stellen nur die passenden Infos zusammen und whlen die Kategorien sowie Suchmaschinen aus. Adaurl meldet Ihre Site bei den Suchmaschinen an und prft die Resultate. So fllt es leicht, die Anmeldung auch bei einer greren nderung am Inhalt zu wiederholen.
Weblogs sind ffentliche Tagebcher im Web. Da sich stndig etwas ndert, ist die Pflege eines Weblogs mit einem normalen Web-Editor recht aufwendig. Die Freeware Blog nimmt Ihnen diese Aufgabe ab. Die Einrichtung eines neuen Weblogs (bei Blog: Journal) ist etwas langwierig. Danach wird es aber bequem. Sie whlen nur das Journal und den Tag aus, fr den Sie ergnzen wollen. Dann tippen Sie berschrift und Text wie bei Word ein. ber Icons fgen Sie Links, Bilder und Download-Dateien ein. Zum Abschluss bertrgt Blog die HTML- und sonstige Dateien wie eingefgte Bilder an die eingestellten Webserver.
Die Wirkung von Color Fazer 1.0 ist einfach, doch wirkungsvoll. Das Programm frbt Text wie einen Regenbogen ein. Sie geben den Text, die Schriftart, die Start- und die Endfarbe an. Bis zu zehn Zwischenfarben sind mglich. Nach einem Mausklick berechnet das Tool den passenden HTMLCode und zeigt eine Vorschau. Dabei beruht alles auf dem normalen HTML-Tag <font>. Deshalb funktioniert der Trick mit allen Browsern. Und wenn der Browser den Tag ignoriert, bleibt der Text dennoch erhalten; er erscheint dann eben ohne Farben. ber die Zwischenablage bernehmen Sie den Code in Ihren HTML-Editor.
HTML-KONVERTIERUNG
DATEISCHUTZ
auf C Heft-CD
JAVASCRIPT-GENERATOR
auf C Heft-CD
HTML bulk 4.0

Preis: Download: 9 Euro www.mettlerweb.de (1,7 MB)
HTML Verschlsseler 1.2

Preis: Download: 10,22 Euro www.cadkas.de (378 KB)
Javascript Utility Suite 1.0

Preis: Download: gratis www.dark-street.com (840 KB)
HTML bulk hilft, viele HTML-Dateien auf einmal zu verndern. ber Hinzufgen nehmen Sie beliebig viele Dateien in die Liste auf. Dann knnen Sie in einem Durchgang HTML-Codes suchen und ersetzen, Mailto-Links verstecken, Meta-Tags einfgen, Dateinamen umwandeln und Umlaute konvertieren. Alle Angaben samt Dateiliste lassen sich als Vorlage speichern, so dass wiederholte Aufgaben schnell von der Hand gehen. Besonders praktisch: Mit der Umwandlung von Dateinamen umgehen Sie Probleme mit der unterschiedlichen Handhabung von Gro- und Kleinschreibung unter Windows und Webservern.
Sobald Sie HTML-Dateien auf den Webserver kopieren, kann jeder darauf zugreifen. Mancher Zeitgenosse ldt die Dateien auf seinen PC und kopiert einfach Ihr Layout. HTML Verschlsseler codiert die Dateien, so dass in einem HTML-Editor nur Buchstabensalat zu sehen ist. Auch wandelt das Tool einzelne Buchstaben in ihren Zeichencode um. Beim Laden im Browser ndert ein Script den Salat wieder in normale HTML-Tags. Nachteil: Hat jemand Javascript deaktiviert, sieht er nur einen kurzen Hinweis. HTML Verschlsseler bietet keinen perfekten Schutz, Sie machen es damit aber unerfahrenen Datendieben schwerer.
Viele pfiffige Funktionen auf Web-Seiten lassen sich nur mit Javascript realisieren: aufklappende Mens, Pop-up-Fenster, animierte Schaltflchen oder eine automatisch ablaufende Diashow. Die Javascript Utility Suite erzeugt die dafr notwendigen Scripts mageschneidert nach Ihren Vorgaben. Sie tragen zum Beispiel die einzelnen Menpunkte ber ein Dialogfeld ein und sortieren sie in die gewnschte Reihenfolge. Ein Mausklick erzeugt das zugehrige Script, das Sie ber die Zwischenablage in Ihre HTML-Dateien einfgen. Als Ergnzung ist noch ein einfacher Javascript-Editor integriert.
124
P Grundlagen
P Workshops
pUtilities
META-TAG-GENERATOR auf C Heft-CD
Utilities Homepage-Tools PPPPPp S. 120 S. 125
SPAM-SCHUTZ
HTML-FORMATIERER
auf C Heft-CD
Mailto-Encrypter
Preis: Download: gratis www.modernbytes.cjb.net (197 KB)
Meta Master 1.1

Preis: Download: gratis www.rms.to (851 KB)
Mhs HTML Tool 2.11

Preis: Download: gratis www.mhsoft.de (348 KB)
Falls Sie pltzlich Massen an Spam-Mails in Ihrem Posteingang finden, obwohl Sie Ihre Mailadresse nur Freunden gegeben haben, liegt es vermutlich daran, dass Sie sie auch auf Ihrer Website verffentlicht haben. Spam-Versender lassen Robots das Web wie Suchmaschinen nach Adressen durchsuchen. Mailto-Encrypter verhindert, dass diese Programme Ihre Adresse finden. Das Tool wandelt eine normale Mailadresse in eine Folge von Zahlencodes um. Browser stellen die Adresse korrekt dar, SpamRoboter knnen damit nichts anfangen. Die verschlsselte Adresse kopieren Sie per Zwischenablage in Ihren Web-Editor.
Mit Meta Master erzeugen Sie bequem die wichtigen Meta-Tags fr Ihre HTML-Dateien. ber Meta-Tags geben Sie beispielsweise den Autor an oder halten Stichwrter und Beschreibungstext fr Suchmaschinen bereit. Auch eine automatische Weiterleitung zu einer anderen Adresse lsst sich damit bewerkstelligen. Sie whlen zunchst die HTML-Dateien aus, die das Tool bearbeiten soll. Bereits vorhandene Meta-Daten liest Meta Master aus den HTML-Dokumenten ein. Dann tragen Sie in Eingabefelder die Texte fr die Meta-Tags ein. Die automatische Aktualisierung fgt die genderten Werte direkt in die Dokumente ein.
HTML-Dateien mssen nicht besonders formatiert sein, im Prinzip drfen auch alle Tags und Texte in einer Zeile stehen. Mhs HTML Tool nutzt das auf zwei Arten: Es kann fertige HTML-Dateien komprimieren, so dass sich die Ladezeit im Web verringert. Dabei lscht die Freeware alle Zeilenumbrche und Kommentare, auf Wunsch auch Tabulator- und Leerzeichen. Zum anderen kann das Programm HTML-Dateien auch sauber mit Umbrchen und Einrckungen formatieren, damit sie im Editor leichter zu bearbeiten sind. Zustzlich wandelt das Tool Umlaute in die bei HTML erforderlichen Umschreibungen um.
SUCHMASCHINENSTEUERUNG
CONTENT MANAGEMENT SYSTEM auf C Heft-CD
OFFLINE-BROWSER
auf C Heft-CD
Robot Pack 1.2

Preis: Download: gratis www.soho-it.com (5,8 MB)
Speedcms 1.3d
Preis: Download: gratis http://speedcms.de.vu (521 KB)
Webexe 1.5
Preis: Download: 39,95 Euro www.aw-soft.de (1,6 MB)
Suchmaschinen nutzen spezielle Suchprogramme, um neue oder vernderte Web-Seiten zu finden und in ihre Datenbank aufzunehmen. Ob und wie diese so genannten Robots Ihre Web-Seiten indexieren, steuern Sie ber die Datei ROBOTS. TXT, die Sie im Wurzelverzeichnis Ihres Webspace ablegen. Diese Datei legt fest, welche Verzeichnisse Robots durchsuchen drfen. Genau diese Datei erzeugt Robot Pack automatisch. Sie whlen nur die Verzeichnisse direkt auf dem Webserver aus und geben an, was damit jeweils passieren soll. Auch das Hochladen der fertigen ROBOTS.TXT bernimmt das Tool.
Mit Speedcms lsst sich eine Website verwalten, ohne dass dafr HTML-Befehle oder ein komplexer Editor ntig sind. Das macht vor allem Sinn, wenn Laien die Site aktualisieren sollen. Sie richten HTML-Vorlagen ein, die Textlieferanten tippen nur ihren Beitrag in Speedcms ein. Das Tool fgt die Texte dann in die HTML-Vorlagen ein und kopiert die Seiten per FTP auf den Webserver. Speedcms kann die Textdateien und Vorlagen mit auf den Webserver kopieren. Das ist praktisch, falls mehrere Leute bei einem Projekt zusammenarbeiten: Will jemand was ndern, so ldt er zunchst die aktuellen Dateien auf seinen PC herunter.
Sie wollen HTML-Dateien nicht nur im Web verffentlichen, sondern auf CD brennen und weitergeben, aber zugleich verhindern, dass jemand Texte und Bilder von der CD kopiert und verwendet. Webexe erzeugt aus einem normalen HTML-Projekt eine groe Programmdatei. Beim Start dieses Programms erscheint ein Browser, der wie gewohnt die Web-Seiten anzeigt, alle Links funktionieren. Erscheinungsbild und Eigenschaften der Ausgabedateien konfigurieren Sie wie gewnscht. Eine Besonderheit ist die integrierte Volltextsuche, die alle HTML-Dateien des Projekts erfasst und eine exakte Trefferliste ausgibt.
125
weitert das Kontextmen und den Befehl Senden an beim Windows-Explorer, so dass Sie Dateien direkt aus dem Windows-Explorer auf den FTP-Server hochladen knnen. Smtliche Tools haben wir fr Sie auf C Heft-CD gepackt.
Virtual Private Network: Verschlsselte Datenpakete

Das normale FTP-Protokoll bertrgt Dateien ungeschtzt ber das Internet. Mit einem IP-Sniffer kann ein Angreifer die bertragung mitlesen und die Dateien auf seiner Festplatte speichern. Das gilt bedauerlicherweise auch fr das Passwort. Ein Angreifer knnte dann Ihren Webspace bernehmen und darber zum Beispiel illegale Downloads anbieten. Es gibt aber Optionen, um dieses Problem anzugehen: Firmen nutzen dazu oft eine gesicherte Verbindung im Internet, ein so genanntes Virtual Private Network (VPN). Beim VPN sind die einzelnen Datenpakete verschlsselt, ein potenzieller Lauscher kann lediglich wertlosen Datenmll abfangen. Die Einrichtung eines VPN ist allerdings nicht trivial, und die Gegenstelle muss dasselbe Verfahren untersttzen.

Wer eine Homepage haben will, der braucht ein FTP-Programm. Nur so lassen sich Dateien auf den Webserver hochladen und dort pflegen. Wir haben die besten Tools fr Sie ausgewhlt.
Wenn es um die bertragung von Dateien im Internet geht, dann ist das File Transfer Protocol kurz: FTP gefragt. Fr Homepage-Betreiber ist FTP wichtig, da die bertragung von HTML- und Bilddateien auf den Webserver blicherweise mit diesem Protokoll erfolgt.
Komfortablerer Abgleich: Festplatte und Webserver

Mit einem FTP-Programm sehen Sie die Verzeichnisse und Dateien auf dem Web- oder FTP-Server wie im Windows-Explorer. Sie erzeugen neue Verzeichnisse oder lschen und verschieben Dateien. Auerdem lassen sich die Homepage-Dateien auf der Festplatte mit der Version auf dem Webserver dank paralleler Darstellung beider Verzeichnisse direkt und schnell vergleichen. Auf der gegenberliegenden Seite stellen wir Ihnen fnf klassische FTP-Clients und ein Spezial-Tool vor: Sendtoftp 2.8. Es er-
Secure FTP: Sichere bertragung

Eine andere Methode ist Secure FTP (SFTP). Dabei wird die gesamte Datenbertragung zum FTP-Server verschlsselt, einschlielich des Passwortes selbstverstndlich. Sie brauchen dafr nur ein SFTP-fhiges Programm, etwa Filezilla oder Smartftp. Der FTP-Server auf der Gegenseite muss ebenfalls SFTP beherrschen. Beim Webspace-Provider Strato beispielsweise ist ein SFTP-Zugang bei den teureren Premium-Paketen mglich. Beachten Sie, dass Sie hier im Gegensatz zum normalen FTP-Zugang einen anderen FTP-Server einstellen mssen: ssh.strato.de.
FTP-Client: Mehr Funktionen nutzen

Auf Ihrem PC mssen Sie dazu einen FTPClient installiert haben, der mit dem FTPServer auf der anderen Seite kommuniziert. Darber werden Dateien in beide Richtungen bertragen. Auch Datei-Operationen auf dem FTP-Server wie Lschen oder Verschieben lassen sich vom heimischen PC aus fernsteuern. Komfortabel: Moderne FTP-Server und FTP-Clients sind dazu in der Lage, eine abgebrochene bertragung spter fortzusetzen. Damit gehren endlose Wiederholungen bei einer schlechten Modemverbindung der Vergangenheit an. Praktisch jeder Web-Editor hat eine eingebaute FTP-Funktion, mit der sich die fertige Homepage direkt hochladen lsst. Wozu dann noch ein besonderes FTP-Programm?
FTP-Programme im berblick
Produkt Windows-Betriebssystem 98/ME, 2000, XP 95/98/ME, NT 4, 2000, XP 95/98/ME, NT 4, 2000, XP 98/ME, 2000, XP 95/98/ME, NT 4, 2000, XP 98/ME, NT 4, 2000, XP Sprache englisch deutsch mehrsprachig deutsch englisch deutsch
Bob 1.3 Boostftp 1.1.12 Filezilla 2.2.1a
C C
FTP Watchdog 1.5 Sendtoftp 2.8 Smartftp 1.0.979
126
P Grundlagen
P Workshops
pUtilities
FTP-Tools
Utilities
FTP-CLIENT
auf C Heft-CD
FTP-CLIENT
FTP-CLIENT
Bob 1.3
Preis: Download: gratis www.farook.org (2,7 MB)
Boostftp 1.1.12
Preis: Download: gratis www.boostftp.de (2,7 MB)
Filezilla 2.2.1a
Preis: gratis Download: http://filezilla.sourceforge.net (3 MB)
Das FTP-Tool Bob konzentriert sich auf eine einzige Aufgabe: beliebige Dateien mit einem Mausklick auf mehrere FTP-Server hochzuladen. In jenen Fllen, in denen Sie Ihre Homepage auf mehreren Webservern anbieten, erleichtert das die Aktualisierungsarbeit erheblich. Bob lsst sich denkbar einfach bedienen: Das Hauptfenster zeigt links die Liste mit Dateien und rechts die Liste der FTP-Server, die als Ziel eingestellt sind. Der Pfeil-Button startet die bertragung, im Statusfeld erscheint fr jede erfolgreich bertragene Datei eine Meldung. Abgesehen von der Einstellung fr einen Proxy finden sich in dem Tool keine weiteren Optionen. FTP-CLIENT auf C Heft-CD
Wenn Sie Ihren Web-Auftritt pflegen, geht es oft darum, Dateien und Verzeichnisse auf der lokalen Festplatte und einem FTP-Server abzugleichen. Boostftp prft auf Mausklick, welche Dateien veraltet oder noch gar nicht vorhanden sind, und bertrgt die neuen Dateien. Dabei kopieren Sie wahlweise von der lokalen Festplatte auf den FTP-Server oder in die umgekehrte Richtung. Ein Auftrag kann beliebig viele Verzeichnisse mit jeweils eigenen Optionen enthalten. Was mit verwaisten Dateien auf dem Ziel-Server passiert, lsst sich ebenso einstellen wie eine Dateimaske (*.htm und so weiter). Die Einstellungen sichern Sie als Profildatei fr eine Wiederholung. FTP FR WIN-EXPLORER
Filezilla lsst als FTP-Client kaum Wnsche offen. Die Verzeichnisse auf der lokalen Festplatte und auf dem FTP-Server erscheinen bersichtlich in zwei Fensterbereichen nebeneinander. Das Tool, das auer in Deutsch auch in anderen Sprachen vorliegt, kann mehrere FTP-bertragungen gleichzeitig verwalten und setzt unterbrochene Downloads fort. Die Datenbertragung wird auf Wunsch per SSL gesichert. Mit Drag & Drop fllen Sie die Warteschlangen fr Up- und Downloads. Die Programmoptionen sind sehr vielfltig, so lassen sich zum Beispiel die Geschwindigkeiten fr Up- und Download begrenzen (siehe auch den Beitrag 2 ab Seite 96). FTP-CLIENT auf C Heft-CD
FTP Watchdog 1.5

Preis: Download: gratis www.lab1.de (4,7 MB)
Sendtoftp 2.8
Preis: Download: gratis www.pclightning.com (360 KB)
Smartftp 1.0.979
Preis: Download: gratis www.smartftp.com (6,5 MB)
FTP Watchdog automatisiert die bertragung von Dateien per FTP im Hintergrund. Das Tool berwacht ein einstellbares Verzeichnis, wobei sich die berwachten Dateitypen sowie Ausnahmen festlegen lassen. Verndert sich eine Datei, baut der Wachhund eine FTP-Verbindung auf und bertrgt nur die betroffene Datei. Sie mssen also nach nderungen an Ihrer Site nicht umstndlich den Upload starten, alles passiert automatisch. Der Transfer erfolgt sofort oder in einem einstellbaren Zeitraum von bis zu drei Tagen. Auf Wunsch wandelt das Tool alle Dateinamen und Gro- oder Kleinbuchstaben um.
Das kleine Tool Sendtoftp erweitert den Windows-Explorer um eine FTP-Funktion. Markieren Sie die Dateien und Verzeichnisse im Explorer, und rufen Sie mit der rechten Maustaste das Kontextmen auf. Unter dem Menpunkt Senden an finden Sie den Eintrag SendToFTP. Damit ffnen Sie ein kleines Dialogfeld, das es Ihnen erlaubt, den gewnschten FTP-Server auszuwhlen. Die Dateien landen auf Wunsch in einem einstellbaren Unterverzeichnis. Wenn es ganz schnell gehen soll, stellen Sie Ihren Standard-Server ein. Dann startet die bertragung sofort, ohne dass Sie auf OK klicken.
Die Oberflche von Smartftp hnelt dem Windows-Explorer. Beim Funktionsumfang kann der einfache FTP-Client aber beispielsweise mit Filezilla (2 oben) nicht mithalten, dafr lassen sich Dateien allerdings per Drag & Drop verschieben. Ein Geschwindigkeitstest misst die bertragungsraten, ein Zeitplaner fhrt bertragungen automatisch durch. Als Besonderheit ist Smartftp in der Lage, Verbindungen zu 16 FTP-Servern gleichzeitig aufzunehmen. Sogar Kopien zwischen zwei FTP-Servern mit FXP-Support sind machbar. Dabei schickt ein FTP-Server die Daten direkt an den anderen.
127
Impressum / Inserentenverzeichnis
P Grundlagen
P Workshops
P Utilities
Impressum
Redaktion
Leopoldstrae 252b, 80807 Mnchen leserbrief@pcwelt.de 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-Httl (rdh), Heide Kuhlmann (hk) Freie Mitarbeiter: Achim Beiermann, Ingo Bhme, Andreas Borchert, Johann-Christian Hanke, Michael J. Humann, Wolfgang Nefzger, Thomas Pelkmann, Michael Schmithuser, Dirk Wischmann Freie Mitarbeiter Schlussredaktion: Evelyn Khler, Marion Linssen, Franz Mayer CD-/DVD-Produktion: Anja Laubstein Redaktionsassistenz: Ursula Istavrinos (Leitung), Heike Meironk, Bianca Springer, Thamar Thomas-Ibrcker, Christa Vetter www.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 Frth (leitend) DTP-Layout: Bianca Aumeyer, Snez ana Dejanovi c, Anton Paunert, Hans Weber Design: h2Design.de Copyright: Das Urheberrecht fr angenommene und verffentlichte Manuskripte liegt beim IDG Magazine Verlag. Eine Verwertung der urheberrechtlich geschtzten Beitrge und Abbildungen, insbesondere durch Vervielfltigung und/oder Verbreitung, ist ohne vorherige schriftliche Zustimmung des Verlages unzulssig und strafbar, soweit sich aus dem Urheberrechtsgesetz nichts anderes ergibt. Eine Einspeicherung und/oder Verarbeitung der auch in elektronischer Form vertriebenen Beitrge in Datensysteme ist ohne Zustimmung des Verlages unzulssig.
Anzeigenverkaufsleitung Markenartikel: Marcus Schardt (-219) Mediaberatung Print, CD-ROM, Online: PLZ 3, 6, 7 Thomas Strhlein (-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: Hypovereinsbank Mnchen, Konto 322 460 95, BLZ 700 202 70; Postbank Mnchen, Konto 220 977-800, BLZ 700 100 80 Anschrift fr Anzeigen: siehe Anschrift des Verlags Erfllungsort, Gerichtsstand: Mnchen IGS Anzeigenverkaufsleitung fr auslndische Publikationen: Tina lschlger (-116); fr inlndische Publikationen: Peter L. Townsend (Leitung) (-299) Verlagsreprsentanten fr Anzeigen Frankreich: 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. Grobritannien: Shane Hannam, 29/31 Kingston Road, GB-Staines, Middlesex TW 18 4QG, Tel.: 0044-1-784210210. USA East: Chip Zaborowski, 500 Old Connecticut Path, P.O. Box 9377, Framingham, MA 01701-9377, Tel.: 001-508-87907 00. USA West: Larry Arthur, 501 Second Street, S. 114, San Francisco, CA 94107, Tel.: 001-415-2434141. Taiwan: The Infopro Group, Sophia Yu, 8F, 131 Sec 3 Nanking E Road, Tel.: 00886-22715-3000. Japan: Noriko Nozaki, 8th Floor 3-4-5, Hongo Bunkyo-Ku, Tokio 113-0033, Japan, Tel. 0081-3-5800-4851. Singapur: J. Yu, No. 80 Marine Parade Road, #17-01A Parkway Parade, 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, Choongjungro, Seodaemun-ku, Seoul, Tel.: 0082-2364-4182/3
Vertrieb
So abonnieren Sie die PC-WELT: 01805/999-801, Fax 07132/959-166 Vertriebsleitung: Josef Kreitmair (-243) Leitung Vertriebsmarketing: Peter Priewasser (-154) Vertrieb Handelsauflage: MZV Moderner Zeitschriften Vertrieb GmbH, Breslauer Strae 5, 85386 Eching, Tel. 089/31906-0, Fax 089/31906-113, E-Mail: mzv@mzv.de, Internet: www.mzv.de Produktion: Heinz Zimmermann (Leitung) Druck: Mayr Miesbach Am Windfeld 15 83714 Miesbach Tel. 08025/294-267 Haftung: Eine Haftung fr die Richtigkeit der Beitrge knnen Redaktion und Verlag trotz sorgfltiger Prfung nicht bernehmen. Die Verffentlichungen in der PC-WELT erfolgen ohne Bercksichtigung eines eventuellen Patentschutzes. Auch werden Warennamen ohne Gewhrleistung einer freien Verwendung bentzt. Copyright: IDG Magazine Verlag GmbH, Leopoldstrae 252b, 80807 Mnchen, Tel. 089/36086-02, Fax 089/36086-267
Verlag
IDG Magazine Verlag GmbH, Leopoldstrae 252b, 80807 Mnchen, Tel. 089/36086-02, Fax 089/36086-267 Geschftsfhrer: York von Heimburg Verlagsleitung (Mitglied der Geschftsleitung): Stephan Scherzer Verffentlichung gem 8, Absatz 3 des Gesetzes ber die Presse vom 8.10.1949: Alleiniger Gesellschafter der IDG Magazine Verlag GmbH ist die IDG Communications Verlag AG, Mnchen, eine 100%ige Tochter der IDG Inc., Boston, Mass., USA. Vorstand: Keith Arnot, York von Heimburg, Pat Kenealy Aufsichtsratsvorsitzender: Pat McGovern
Anzeigenabteilung
Tel. 089/36086-210, Fax 089/36086-263 E-Mail: media@pcwelt.de Anzeigenleitung (Associate Publisher): Christoph Burkhart (-294) (verantwortlich fr Anzeigen, Anschrift des Verlags) Stellvertretende Anzeigenleitung: PLZ 0, 1, 8, 9 Reinhard Baum (-516) (verantwortlich fr die Vorstellung der New-Media-Inhalte im Promotion-Teil der PC-WELT und auf CD-ROM; Anschrift des Verlags)
Inserentenverzeichnis
D 1 L S Inserenten Digital World domainfactory 1 & 1 Internet AG Lycos Europe Strato Medien PC-WELT-Service Mini-Abo Sonderheft Abo Premium Fax 07132/959166 0831/59188-22 02602/96-1010 05241/80-6071 030/88615-113 Fax 089/20028111 089/20028111 089/20028111 Telefon 01805/999801 0831/59188-0 0180/500-1535 05241/8071000 01805/055-055 Telefon 089/20959132 089/20959132 089/20959132 Online-/E-Mail-Adresse http://www.digital-world.de/shop http://www.domain-go.de http://www.1und1.de/webhosting http://www.webcenter.de http://www.strato.de Online-/E-Mail-Adresse http://www.pcwelt.de/shop http://www.pcwelt.de/shop http://www.pcwelt.de/premium Seite 4 3. US 2. US, 3 4. US 24/25 Seite 50 8 82
Das Inserentenverzeichnis ist eine Serviceleistung der Anzeigenabteilung der PC-WELT. Kontakt: media@pcwelt.de, Tel. 089/36086-210, Fax 089/36086-263
128

Sprache

Willkommen bei Scribd!

PC - PC Welt - Sonderheft - Die Perfekte Homepage

Hochgeladen von

Dokumentinformationen

Datum des Uploads

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Beschreibung:

Copyright:

Verfügbare Formate

PC - PC Welt - Sonderheft - Die Perfekte Homepage

Hochgeladen von

Beschreibung:

Copyright:

Verfügbare Formate

Verwandte Titel

Deutschland 7,60 | Schweiz sfr 15,20 | sterreich 8,60 | Benelux 8,60 | AOL-Stichwort pcwelt

Die perfekte Homepage

Die besten Tools fr Homepage-Bastler

Die eigene Homepage

Alles, was Sie brauchen

Roland Bischoff Stellv. Chefredakteur

PC-WELT SONDERHEFT 2/2004

PC-WELT Sonderheft 2/2004

p AktuellPp Heft-CD/DVDPp ThemenPp TestcenterPp Praxis

Die eigene Domain

Geld fr Ihre Website

Grundkurs II: Layouten mit Zellen

Grundkurs III: Fotos ins Web stellen

Grundkurs IV: Link-Liste anfertigen

Die erste Homepage

Grundkurs V: Gstebuch erstellen

PC-WELT Sonderheft 2/2004

Web-Seiten mit Style

Tote Links finden

Die besten FTP-Tools

Das ist auf der Heft-CD Leserumfrage Impressum

Auf CD: Top-Tools fr Ihre Website

Die Bedienerfhrung der PC-WELT-CD: So gehts los

PC-WELT SONDERHEFT 2/2004

Grundlagen Webspace GRUNDLAGEN PPpPPP

1. Vor der Provider-Wahl: Grundstzliche berlegungen

PC-WELT SONDERHEFT 2/2004

Webspace Grundlagen PPPpPP S. xxx S. xxx

Provider-Suche im Internet: Webhostlist.de

2. Die Art der Domain whlen

Auswahl: Bei www.webhostlist.de knnen Sie gezielt suchen

PC-WELT SONDERHEFT 2/2004

Grundlagen Webspace PPpPPP S. 10 S. 15

Webspace bei Internet-Zugangsanbietern

PC-WELT SONDERHEFT 2/2004

4. Diese Merkmale sollte ein Webserver untersttzen

5. So vermeiden Sie die Traffic-Kostenfalle

All inclusive: Webspace plus die bentigten Programme

PC-WELT SONDERHEFT 2/2004

Grundlagen Webspace PPPPpP S. 10 S. 15

Im berblick: Ausgewhlte Webspace-Provider

Fortunecity Freenet Geocities Heim.at Fortgeschrittene

www.fortunecity.de www.freenet.de/dienste /homepage/index.html www.geocities.de www.heim.at

1,49 Euro 6,99 Euro 15 Euro 0 Euro 0 Euro 0 Euro

10 MB 100 MB 200 MB 10 MB 100 MB 50 MB 250 MB 250 MB 1 MB 50 MB 5 MB 20 MB 2 MB 25 MB 100 MB

1 50 200 50 250 unbegrenzt 100 50 1 10 1 10 12 50 85

1) pro Monat 2) mit Weiterleitungsdienst k. A. = keine Angabe Stand: November 2003

PC-WELT SONDERHEFT 2/2004

6. Profi-Alternative: Einen eigenen Server mieten

Sonstiges Bannerwerbung, nur fr Einsteiger

Perl, eigene PHP

1 MySQL (1MB) MySQL

500 MB fair use

Sperrung bei Errei- chen des Limits k. A. werbefinanziert

3 x MySQL 1 x MySQL 1 x MySQL 1 x MySQL

2 GB 7,5 GB 15 GB 10 GB 15 GB unbegrenzt / fair use 25 GB 10 GB 5 GB 10 GB unbegrenzt unbegrenzt 4 GB 4 GB 7,5 GB

PC-WELT SONDERHEFT 2/2004

Die eigene Domain