Webdesign-Workshop
|
WolfdesignProgramme und Tools |
|
Inhalt |
Einführung
Struktur Listen Web-Generatoren WYSIWYG-Editoren HTML-Editoren Beispiele Grafik-Programme Animations-Programme Web-Tools Zusammenfassung Zusammenfassung Quellen Quellen |
|
Einführung |
Über Programme zum Erstellen und Gestalten von Web-Sites gibt es nach wie vor ganz unterschiedliche Auffassungen.
Es behaupten sich drei konkurrierende Ansätze:
Jede der drei Kategorien hat seine Vor- und Nachteile. Die Auswahl des optimalen Werkzeuges hängt unter anderem stark von den HTML-Kenntnissen des Anwenders ab. |
|
Struktur |
Alle Seiten einer WebSite sollten eine gemeinsame Gestaltung haben, einen wiedererkennbaren Stil. Dabei ist zu beachten, dass wir nicht wissen, mit welchem Browser und mit welchem Monitor der Anwender unsere Seiten anschaut. Deshalb sollten wir so viel Gestaltungsmittel wie möglich selbst programmieren und wenig dem Zufall überlassen.
Das Wichtigste ist die gute Lesbarkeit auf unterschiedlichsten Systemen so wie anwenderfreundliche Gestaltung und Navigation. Dazu sind in den Kapiteln Cascading Stylesheets und Navigation einige Themen bearbeitet. |
|
| zum Anfang | ||
Listen |
Listen sind ein sehr geeignetes Mittel, um Aufzählungen automatisch zu strukturieren. Es gibt in HTML verschiedene Listenformen.
Listen |
|
| zum Anfang | ||
Web-Generatoren |
Bei Web-Generatoren positioniert der Anwender Textrahmen und Bilder in einer DTP-artigen Umgebung;
den zur Umsetzung des Layouts nötigen Code schreibt die Software selbstständig.
Der Vorteil: Man muss kein HTML lernen und gelangt recht schnell zu ansprechenden Ergebnissen. Der Nach- teil: Wer kein HTML kennt, kann bei den letztendlich unausweichlichen Darstellungsproblemen weder die Problemursache erkennen noch sie beseitigen. Für pixelgenaue Layouts tricksen die Programme oft mit unsichtbaren Pixe1-Platzhaltern, unhandlichen Tabellenmonstern und redundanten Tags - der Code ist damit sehr schwer zu durchschauen und lässt sich in vielen Fällen auch nicht mit einem anderen Web-Editor nachbearbeiten. Zudem quält er sich meist deutlich länger durch die Leitung als 'normaler' HTML-Code und irritiert durch lange Aufbauzeiten im Browser. Code-Erzeuger dieser Kategorie sind Fusion MX und bis zu einem gewissen Grad Adobe GoLive. |
|
| zum Anfang | ||
WYSIWYG-Editoren |
Moderne WYSIWYG-Editoren wollen das Beste aus zwei Welten bieten:
Einerseits soll die Darstellung der späteren Ansicht im Browser entsprechen,
andererseits erlauben sie auch direkten Zugriff auf den Seiten-Quelltext.
Um diese beiden Aspekte in Einklang zu bringen, arbeiten sie mit proprietären HTML-Parsern. In der WYSIWYG-Ansicht schreibt die Anwendung im Hintergrund bei jeder Änderung den jeweils nötigen Code in die HTML- Datei. Nach einer manuellen Änderung im Quellcode muss das Programm alle Tags wieder einlesen und daraus eine neue grafische Ansicht bauen. Hier liegt die entscheidende Schwachstelle dieser Kategorie: Die WYSIWYG-Darstellung klappt nur, wenn der HTML-Code den Parser fehlerfrei passiert. Jeder Editor reagiert anders, wenn der Quellcode unbekannte Tags und Konstrukte enthält - oder gar Syntax-Fehler. Einige Programme schalten erst dann in die WYSIWYG-Ansicht zurück, wenn der Anwender das Problem von Hand beseitig hat. Andere dichten den Code still und leise in eine ihnen bekannte Form zurück. Da verschwinden schon mal Tags oder es entstehen ungewollte Verschachtelungen. Fortschrittliche WYSIWYG-Editoren sind tolerant, lernen neue Tags oder lassen unbekannte Elemente zumindest unberührt. Zu dieser Gattung gehören Dreamweaver, Front-Page, Namo WebEditor und NetJet. Der Zwitter Adobe GoLive wurde ursprünglich als Web-Generator konzipiert, erlaubt mittlerweile aber auch weitgehende Code-Anpassungen per Hand. |
|
| zum Anfang | ||
HTML-Editoren |
Textbasierende Web-Editoren sind im Wesentlichen um HTML-Funktionen aufgemotzte Text-Editoren.
Grundsätzlich heben sie Syntax-Elemente in verschiedenen Farben hervor, damit der Anwender HTML-Tags und Inhalte besser auseinander halten kann. Andere Werkzeuge vervollständigen Tags automatisch, verwalten Code-Schnipsel und helfen bei der Navigation durch die HTML-Hierarchie. Einige HTML-Text-Editoren überprüfen optional die Gültigkeit des gescbriebenen Quellcodes über einen internen oder eingebundenen Parser. Einen Eindruck über das letztendliche Erscheinungsbild der Seiten gibt erst die interne oder externe Browser-Vorschau. Zur internen Preview binden Windows-Editoren meist den Internet Explorer ein; zur externen Vorschau dient ein beliebiger Browser, der URLs als Kommantlozeilenparameter überaimmt. Allein eine Auflistung aller aus diesem Bereich infrage kommenden Editoren würde den Umfang dieses Artikels sprengen - zumal mittlerweile auch die meisten Text-Editorea HTML-Funktionen enthalten. Zwei Vertreter der Hochleistungsklasse sind 40tude und HomeSite. |
|
| zum Anfang | ||
Beispiele |
Macromedia Dreamweaver 4.01 Ein WYSIWYG-Editor mit Respekt vor handgeschriebenem Code. Der sehr gute HTML-Editor HomeSite ist dem Programm beigelegt bzw. BBEdit für Mac-OS-Rechner. Das Programm erzeugt klaren, eleganten Quelcode und Skripte, die Browser-übergreifend funktionieren und auch zu Modzilla und Netscape 6.x kompatibel sind. Dreamweaver benötigt wegen der vielen Paletten eine sehr hohe Bildschirmauflösung (mindestens 1024 x 768). NetObjekts Fusion MX NetObjekts Fusion war einer der ersten Web-Generatoren am Markt und ist inzwischen einer der letzten, die noch auf deutsch erscheinen. Das Programm speichert alle Site-Bestandteile in einer Datenbank und erzeugt erst HTML-Code bei der Browser-Vorschau bzw. zur Publikation. Die Qualität des Codes ist unnötig umständlich und entspricht weitgehend dem veralteten HTML-Standard 3.2. Darüber hinaus ist er für andere Editoren 'unverdaulich'. Adobe GoLive GoLive gelingt eine delikate Gratwanderung zwischen pixelgenauem Layout und WYSIWYG. Das Site-Management geht weit über den Durchschnitt hiaus: Der lokale Link-Checker ist stets im Hintergrund aktiv. Sites mit tausenden Seiten werden beherrscht. FrontPage 2002 Die aufgeräumt und übersichtlich wirkende Oberfläche von FrontPage 2002 hält sich eng an die Optik der Office-XP-Pakete. Optimal arbeitet es mit einem MS Internet Information Server und MS Internet Explorer zusammen. Diverse Eigenheiten verleiden auf Dauer die Freude am Programm (und das ist vorsichtig ausgedrückt). Die mit FrontPage ausgelieferten Web-Komponenten sind kaum ersetzbar. Wer sich sich einmal auf dies Erweiterungen verlässt, ist von da an auf entsprechend konfigurierte Server angewiesen. Microsoft verbietet in den Lizentbestimmungen den Einsatz von FrontPage für Sites, die Microsoft oder eines seiner Produkte herabsetzt. Namo WebEditor Das koreanische Namo erinnert bei den vielen Befehlsleisten an FrontPage und beim Inspektor an GoLive. 40tude HTML 3.3 Der textbasierte HTML-Editor 40tude (audgesprochen 'Fortitude', engl. Stärke oder Kraft) hat es unter der spartanischen, wenig Einsteiger-freundlichen Oberfläche faustdick hinter den Ohren. Der eigentliche Clou an 40titude sind die Editor Side Includes. Sie unterstützen sogar Auswertungsfunktionen, um etwa tabellarische daten in Webseiten zu wandeln. Xynx NetJet 3.0 Der deutsche WYSIWYG-Editor ist in mancher Hinsicht eigen: Die Standard-Proportionalschrift ist Vardana; die WYSIWYG- und Code-Bearbeitung teilen sich zwei separate Anwendungen. Mit unbekanntem Code geht NetJet geradezu übervorsichtig um, so dass sogar offensichtliche Tippfehler nicht korrigiert werden. Allaire HomeSite 4.5.2 HomeSite assistiert dem Anwender mit zahlreichen 'Tag-Editoren' bei der HTML-Eingabe und bietet auch ein 'Tag-Insight', bei dem sich wärend des Tippens an der Curserposition eine Combobox öffnet und die Tags automatisch ergänzt. |
|
| zum Anfang | ||
Grafik-Programme |
Fast so gut wie das Profi-Grafikprogramm Photoshop ist das Freeware-Programm Gimp, das es für alle Plattformen gibt.
Für Windows-Anwender empfehle ich das Freeware-Programm Infanview, das erstaunlich viele Formate kennt und Grafiken stapelweise gleichartig verändern kann. |
|
| zum Anfang | ||
Animations-Programme |
Hier steht was. | |
| zum Anfang | ||
Web-Tools |
Ab und an kommt es vor, dass der Draht zum Internet fehlt. Doch wer offline browsen mag oder muss, kann die nötigen WebSites mit einem WebSite Grabber auf die Festplatte laden.
Beispielprogramme:
|
|
| zum Anfang | ||
Zusammenfassung |
Tools-Checkliste | |
| zum Anfang | ||
Quellen |
INTERNET INTERN; 2/2001 Gerald Himmelein, Web-Schreibmaschinen, c't 22/2001, S 188 ff |
|
| zum Seitenanfang | zum Workshop-Anfang | zur Inhaltsübersicht |