Webdesign mit NVUDreamweaver-Alternative
Multiplattform-Talent
Webdesign mit NVU
Wer Webseiten gestalten will, ist entweder auf fundierte HTML-Kenntnisse oder auf zum Teil sehr teure Programme wie Frontpage oder Dreamweaver angewiesen. Wer sich zudem nicht nur in der Windows-Welt heimisch fühlt, sondern auch Linux und Mac zur Erstellung heranzieht, hatte bislang schlechte Karten. Das Open-Source-Project NVU (sprich: »En wiu«) füllt genau diese Lücke. Basierend auf der Gecko-Engine von Netscape und Mozilla stellt NVU eine Weiterentwicklung des im Browser enthaltenen Moduls Composer als eigenständige Applikation dar. Dank der emsigen Open-Source-Gemeinde ist die zur Drucklegung aktuelle Version 0.7 nicht nur in deutscher Sprache, sondern neben Windows auch für die Plattformen Linux, MacOS X und sogar für OS/2 verfügbar.
Vollwertiges Entwicklungs-Tool
Webdesign mit NVU
NVU ist ein vollwertiges Entwicklungs-Tool, mit dem HTML-Dateien genauso einfach erstellt werden können wie ein Word-Dokument. Dabei steht jede HTML-Seite sowohl in der Vorschau als auch in verschiedenen anderen Darstellungen bis hin zum reinen HTML-Quellcode zur Verfügung. Wird in der Layout-Ansicht formatiert oder geändert, trägt die Software den zugehörigen HTML-Code automatisch ein. Doch können auch jederzeit im Quellcode Änderungen durchgeführt werden, die dann wiederum in der Layout-Ansicht angezeigt und verändert werden können.
Im Gegensatz zu vielen anderen Tools hält sich das System streng an die W3C-Normen und erzeugt einen sehr kompakten Code. Auch wenn der Benutzer direkt im Quelltext Änderungen vornimmt, werden unnötige Formatierungen wie beim Speichern eliminiert. Mit Rechtschreib-Wörterbüchern, die bereits in Deutsch vorliegen, Themen zur individuellen Gestaltung der Oberfläche und Erweiterungen des Funktionsumfangs mit Plug-ins lässt sich NVU beliebig konfigurieren und erweitern. In der Version 0.7 ist die Einbindung der Themen und Erweiterungen jedoch noch nicht ganz ausgereift.
Neben der Erstellung der Webseiten ist in NVU auch ein FTP-Client enthalten, so dass die Seiten automatisch ins Internet gestellt und dort auch direkt bearbeitet werden können.
Installation und Erweiterung
Webdesign mit NVU
Die jeweils aktuellen deutschsprachigen Installationsdateien finden Sie unter www.mozilla.nightrat.net/nvu. Laden Sie auch die erforderlichen Wörterbücher. Nach der Installation entpacken Sie die Wörterbücher und kopieren die beiden Dateien mit den Erweiterungen DIC und AFF in das Verzeichnis components\myspell, das sich unterhalb des NVU-Programmordners befindet. Starten Sie dann die NVU-Umgebungen. Um die Sprache festzulegen, wählen Sie im Menü Bearbeiten den Menüpunkt Rechtschreibprüfung und wählen den passenden Eintrag unten links im Dialogfeld.
In diesem Beitrag entwickeln wir exemplarisch eine kleine Website mit simplem Aufbau: Kopf- und Fußzeile und im mittleren Bereich links das Menü und rechts der Platz für den eigentlichen Content. Bevor Sie beginnen, die einzelnen Webseiten zu gestalten, erstellen Sie zunächst eine Vorlage. Dabei handelt es sich um eine Schablone, die als Basis für die weiteren Seiten dient. NVU besitzt bereits ein Vorlagen-System. Dessen Idee ist, dass sich Änderungen an der Vorlage auf alle HTML-Dateien auswirken, die auf dieser Vorlage beruhen, wie es etwa bei Dreamweaver und Frontpage der Fall ist. In der aktuellen Version ist dieses Prinzip jedoch erst ansatzweise umgesetzt und führt häufig zu Problemen, weshalb wir in diesem Workshop als Basis eine konventionelle HTML-Vorlage verwenden.
Vorlage erstellen
Webdesign mit NVU
Wählen Sie im Menü Datei den Punkt Neu und klicken Sie im Dialog auf die Schaltfläche Erstellen, um eine neue leere Datei anzulegen. Als Erstes bestimmen Sie die generellen Einstellungen über Format, Seitentitel und -einstellungen. Bei der Formulierung des Titels sollten Sie darauf achten, dass dieser besonders Suchmaschinen-relevant ist und die verwendeten Begriffe typische Suchwörter darstellen. Gleiches gilt auch für die Ländereinstellungen Sprache und Zeichensatz, die ebenfalls von Suchmaschinen ausgewertet werden und das Ranking beeinflussen. Die übrigen Angaben sollten Sie machen, diese haben aber keine Auswirkungen auf die Optimierung der wichtigen Suchmaschinen.
Legen Sie für den Web-Auftritt und die einzelnen HTML-Seiten einen separaten Ordner an und speichern Sie dort die Dateivorlage, beispielsweise als vorlage.html . Dieses Speichern ist wichtig, weil sich die folgenden Bildverweise relativ am Ort der verwendeten HTML-Datei orientieren. Kopieren Sie alle Hintergrundbilder, Logos und sonstige Grafiken in diesen Ordner. In NVU legen Sie dann über Format, Seitenfarbe und -hintergrund die farbliche Gestaltung von Text-, Link- und Hintergrundfarbe sowie eventuell eine Hintergrundgrafik fest.
Tabellen erstellen und formatieren
Webdesign mit NVU
Als Nächstes bestimmen Sie die Aufteilung der Seite über eine Tabelle. Klicken Sie in der Symbolleiste auf das Icon Tabelle. Markieren Sie im Dialogfeld eine Tabelle mit zwei Spalten und drei Zeilen und erstellen Sie sie mit OK. In der Layout-Ansicht erscheint die Tabelle nun mit dicken Rändern. Als Erstes verbinden Sie die beiden horizontalen Zellen der Kopfzeile und die der Fußzeile. Dazu klicken Sie auf die Zelle links oben, halten die Maustaste gedrückt und verschieben die Maus nach rechts. Sind beide oberen Zellen hinterlegt, klicken Sie mit der rechten Maustaste in die Markierung und wählen im Kontextmenü Gewählte Zellen verbinden. Wiederholen Sie dies für die Fußzeile.
Als Nächstes passen Sie die Größe der Tabelle sowie der einzelnen Zeilen und Spalten an. Ist die Tabelle noch markiert, sehen Sie an den Ecken und in der Mitte der Ränder kleine Quadrate. Mit diesen können Sie die Größe der gesamten Tabelle verändern. Klicken Sie auf das Quadrat an der rechten unteren Ecke und ziehen Sie die Tabelle so, dass sie ungefähr die Größe 750 x 600 hat. Die genaue Größe sehen Sie am Rand der Tabelle oder in dem kleinen Fenster, das beim Vergrößern angezeigt wird.
Die Höhe und Breite der Zeilen und Spalten lassen sich über die Schieberegler am Rand bestimmen. Klicken Sie in eine beliebige Zelle der zweiten Zeile, wird am oberen Rand ein zweigeteilter weißer Balken dargestellt. Bewegen Sie den Mauszeiger über den Zwischenraum, verändert sich dieser und wird zu einem horizontalen Doppelpfeil. Sobald dies der Fall ist, können Sie bei gedrückter Maustaste die Breite der linken Spalte auf einen Wert zwischen 150 und 180 verkleinern. Auf dieselbe Weise passen Sie mittels des vertikal dreigeteilten Balkens am linken Rand die Höhe der Kopf- und der Fußzeile an.
Speichern Sie Ihre Arbeit in regelmäßigen Abständen. Leider ist NVU noch nicht so stabil, dass man ihm blindlings vertrauen könnte.
Um den Rahmen der Tabelle zu entfernen, führen Sie einen Doppelklick auf einer beliebigen Zelle aus. In dem Dialog Tabelleneigenschaften wechseln Sie in das erste Register Tabelle. Hier legen Sie über den Wert Rand die Dicke der sichtbaren Zellbegrenzung fest. Geben Sie 0 ein, werden die einzelnen Zellen nicht umrandet. Lediglich zur Kennzeichnung wird in der Layout-Vorschau eine gepunktete rote Linie dargestellt.
Grafik und Text einfügen
Webdesign mit NVU
Im Kopfbereich der Tabelle soll lediglich das Seitenlogo rechtsbündig stehen. Markieren Sie die obere Zelle und klicken Sie auf Grafik in der Symbolleiste. Im Dialog Grafik-Eigenschaften wählen Sie mit Durchsuchen das entsprechende Logo. Achten Sie darauf, dass das Kontrollfeld URL relativ zur Seitenadresse markiert ist, weil ansonsten absolute Dateiverweise auf Ihre Festplatte eingefügt werden, die natürlich später im Internet nicht mehr gültig sind. Tragen Sie als Tooltipp und als Alternativtext eine kurze Beschreibung ein. Verwenden Sie möglichst für beide Felder denselben Satz, weil Internet Explorer und W3C-konforme Browser diese beiden Attribute unterschiedlich verwenden. Sind beide Inhalte gleich, erscheint der Text in jedem Fall als Hilfestellung, wenn der Besucher mit dem Mauszeiger über die Grafik fährt.
Verwenden Sie auch hier wichtige Schlagwörter, da insbesondere der Alternativtext suchmaschinenwirksam ist. Wechseln Sie dann in das Register Link und tragen Sie den entsprechenden URL ein. Damit nach dem Einfügen die Grafik rechts angezeigt wird, wählen Sie im Register Erscheinungsbild den Eintrag Links umbrechen .
Markieren Sie dann die beiden Zellen der mittleren Zeile, in denen später Menü und Content stehen sollen. Klicken Sie auf die Symbolschaltfläche Tabelle und wählen Sie im Abschnitt Inhalt ausrichten die Attribute Oben und Links. Nun können Sie im Content-Bereich beliebigen Dummy-Text einfügen, der später dann durch den tatsächlichen Inhalt ersetzt wird. Sollen im Fließtext Bilder rechts- und linksbündig eingefügt werden, gehen Sie genauso vor wie zuvor beim Logo.
Um die einzelnen Links des Menüs einzutragen, markieren Sie die linke Zelle und wählen im Menü Einfügen, Link. Tragen Sie im Dialog die Bezeichnung und den Dokumentennamen ein, auf den der Menüpunkt später verweisen soll, also beispielsweise index.html oder impressum.html. Bleibt abschließend nur noch ein Copyright-Vermerk in der Fußzeile, und der inhaltliche Rahmen der Vorlage ist fertig.
Webseite formatieren
Webdesign mit NVU
Als Nächstes formatieren Sie die Schrift. Um diese generell statt in der Serifenschrift Times etwas schnörkelloser mit einer geradlinigen Helvetica-Schrift zu formatieren, markieren Sie alle Zellen der Tabelle und wählen Sie in der Symbolleiste die Schriftart Helvetica, Arial . Alle anderen Bereiche formatieren Sie wie in einer Textverarbeitung, indem Sie die Zeichen oder den Absatz markieren und aus der Symbolleiste die entsprechende Formatierung anwenden. Soll beispielsweise das Menü in einer kleineren Schrift als der Fließtext erscheinen, markieren Sie alle Links und klicken auf die Schaltfläche Kleinere Schriftgröße in der Symbolleiste.
Es ist empfehlenswert, die Überschrift im Content-Bereich auch als solche zu formatieren, weil Suchmaschinen dies entsprechend würdigen und die einzelnen Wörter der Überschrift besser indizieren. Markieren Sie die erste Zeile und wählen Sie in der Symbolleiste links oben statt Normaler Text das Format Überschrift 1. Sollte Ihr Layout einen Vorspann vorsehen, können Sie diesen als Überschrift 2 formatieren, um auch diesen Wörtern besondere Bedeutung zu geben.
Webseiten erstellen und ändern
Webdesign mit NVU
Um die einzelnen Webseiten zu erstellen, laden Sie jeweils die Datei Vorlage.html und speichern sie unter neuem Namen. Auch hier ist es derzeit noch nicht empfehlenswert, die Funktion Neue Datei basierend auf vorlage.html zu verwenden.
Diese Vorgehensweise fügt im HTML-Code einen absoluten Verweis auf die Template-Datei ein, also beispielsweise c:\cool-tools\vorlage.html. Das wiederum führt im Internet dazu, dass dem Besucher ein Fehler angezeigt wird, weil bei ihm diese Vorlage nicht existiert.
Nun ändern Sie die Texte auf der entsprechenden Seite. Erstellen Sie in jedem Fall jede der HTML-Dateien, auf die Sie im Menü verwiesen haben. Vergessen Sie abschließend nicht, jeder Seite über Format, Seitentitel und -Einstellungen einen eigenen, individuellen Namen zu geben. Dies ist nicht nur für die Übersicht wichtig, sondern auch für die Indizierung durch Suchmaschinen.
Webseiten publizieren
Webdesign mit NVU
NVU besitzt einen integrierten FTP-Client, mit dem Sie Ihre Seiten per Knopfdruck auf Ihren Webspace hochladen können. Wählen Sie im Menü Datei den Eintrag Publizieren als. Als Seiten-Name tragen Sie die Bezeichnung Ihrer Website, also den Oberbegriff für alle Ihre Seiten, ein. Unter Server-Informationen tragen Sie den URL ein, über den die Website erreicht werden soll.
Der Publizierungs-URL ist die FTP-Adresse samt dem Unterverzeichnis, das zu den HTML-Dokumenten führt, also zum Beispiel ftp://ftp.meinedomain.de/html. Nun fehlen nur noch Ihre Zugangsdaten, und die Angaben sind komplett und Sie können die Dateien über die Symbolschaltfläche Publizieren hochladen.
Webseiten im Web ändern
Webdesign mit NVU
NVU macht keinen Unterschied, ob sich HTML-Dateien auf Ihrer Festplatte oder auf einem entfernten FTP-Server befinden. Einmal publiziert, sehen Sie links im Site-Manager die Bezeichnung Ihrer Site, die Sie im Publizieren-Dialog eingegeben haben.
Führen Sie darauf einen Doppelklick aus, wird eine FTP-Verbindung hergestellt und alle Dokumente werden dargestellt. Mit einem Doppelklick auf ein Dokument wird dieses direkt aus dem Internet geöffnet und steht zur Bearbeitung bereit.
Statt es ? wie bei einer lokalen Datei ? über die Speichern -Schaltfläche zu sichern, klicken Sie auf Publizieren in der Symbolleiste, und die Änderungen sind sofort online.
Alle Listings zum Workshop finden Sie auf der Heft-CD und unter
listings.internet-pro.de.