Alle folgenden Anleitungen basieren hier drauf. Es wird auch sofort mit CSS gearbeitet da alles andere keinen Sinn macht.
Die Seitennummern in den Titeln verweisen auf das NVU-Handbuch von J.Klose, welches ihr sicherlich gelesen habt.
Die blaue Schrift zeigt euch die welche Menüpunkte ihr klicken müsst und die grüne Schrift ist für die Pfade (Verzeichnisse, Ordner) da. Rot ist halt wichtig.
1. Installieren von NVU (KompoZer)
Achtet darauf das ihr immer die neueste Version installiert, zu finden unter Downloads (Sprachpaket nicht vegessen) hier (Link). Und das entsprechend Sprachpaket hier (Link).
Damit wir wissen worüber wir sprechen hier mal ein Screenshot von NVU mit den Bezeichnungen der Bereiche:
2. Installieren von NVU-Erweiterungen
Die wichtigsten Erweiterungen sind die von Kaze da sie den Umgang mit NVU erleichtern.
- Von dieser Seite ladet ihr folgende Erweiterung auf euren Desktop (oder in ein Verzeichnis): NsmConText und HandCoder. Sollte es Probleme mit dem Handcoder geben nehmt bitte diesen hier.
- Danach geht ihr in der NVU-Menüleiste auf Extras /Erweiterungen und klickt im folgenden Fenster auf Installieren. Hier geht ihr dann auf euren Desktop (oder entsprechendes Verzeichnis) und installiert die beiden Erweiterungen.
- Dann müsst ihr NVU neu starten.
Sonstige NVU-Erweiterungen findet ihr hier.
Das deutsche Wörterbuch für NVU findet ihr hier.
Die wichtigste Einstellung findet ihr in der NVU-Menüleiste unter Extras /Einstellungen /Erweitert.
- Hier bitte anklicken *HTML4 und *Strict.
Die Anweisung "Strict erhöht eure Browserkompatibilitaet ernorm, da sie z.B. den Internet Explorer zwingt HTML-konform zu arbeiten. - Unter dem Reiter allgemein noch einen Haken bei Formatierung des Quelltextes erhalten und CSS-Stile statt html verwenden.
Alles andere ist mehr oder weniger dem eigenen Geschmack nach zu gebrauchen. - NVU schliessen.
- Legt euch bitte unter Eigene Dateien" ein Ordner an (rechter Mausklick /Neu /Ordner) mit dem Namen Mein Web.
- In diesem neuen Ordner legt ihr noch ein Ordner mit dem Namen Bilder an. Wichtig alle Ordner und Dateien im Ordner Mein Web" dürfen keine Leerzeichen und Sonderzeichen mehr im Dateinamen haben.
Am besten ist wenn ihr auch keine Grossbuchstaben mehr verwendet. Ausserdem müssen alle Dateien sich im gleichen Ordner wie eure Startseite, oder in Ordnern darunter, befinden.
Solltet ihr viele Unterseiten planen so legt gleich Ordner für diese Seiten an. Benennt die Ordner so wie eure Unterseiten heissen sollen. Auch hier ist es sinnvoll in den jeweiligen Ordner ein Ordner Bilder zu erstellen.
Eure Ordnerstruktur sieht nun wie folgt aus:
- Nun kopiert ihr alle Dateien wie z.B. Bilder in die neu angelegten Ordner. Also alle Bilder für eure Startseite (index.html) in den Ordner Mein Web/bilder und die Bilder für die Unterseiten in Mein Web/unterseite1/bilder.
5. Einrichten des Seitenmanager (FTP)(Seite 76-78, 86)
Man geht in der Menüleiste auf Bearbeiten und dann auf Publizierungseinstellungen im folgenden Fenster gebt ihr eure FTP-Zugangsdaten (vom Provider erhalten) ein.
- Unter "Seitenname" irgendeinen Namen z.B. Meine Webseite
- Unter "HTTP Adresse" euren Domainnamen wie http://www.JPO2005.de/
- Unter "Publizierung-URl" die FTP Adresse eurer Domain wie ftp://JPO2005.de/
- Unter Namen und Kennwort die vom Provider mit geteilten Daten und Haken setzen bei Passwort merken.
Nun seht ihr links in der Seitenverwaltung (wenn nicht da F9 drücken) den oben vergebenen Namen, in diesem Fall "Meine Webseite". Wenn ihr darauf Doppelt klickt seit ihr mit eurem Server verbunden und seht die Dateien die schon hochgelden sind.
Hier nochmal bemerkt: Das hochladen mit NVU funktioniert nicht immer richtig macht das bitte mit einem FTP-Programm wie Filezilla.
Dazu gehen wir im Seitenmanager auf Seiten bearbeiten dann auf Neue Seite und als Namen z.B. Meine Seite (lokal)
- unter "HTTP Adresse gebt ihr nichts ein
- unter "Publizierung-URl" geht ihr auf Durchsuchen und im folgenden Menü auf Eigene Dateien/Mein Web und speichert da mit OK ab.
So nun habt ihr links in der Seitenverwaltung zwei Hauptordner, einmal Meine Webseite und einmal Meine Webseite (local).
Anleitungen für verschiedene Provider findet ihr bei Hans hier
Öffnet NVU und klickt auf in der Menüleiste auf Format /Seitenfarben und Hintergrund.
- Hier setzt ihr eine Haken bei Eigene Farben verwenden.
- Jetzt vergebt ihr eine Hintergrundfarbe für eure Seite und eine Textfarbe und klickt auf "OK". Wenn eure Seite weiss sein soll vergebt bitte im Feld Hintergrund explizit weiss.
- Danach geht ihr in NVU ganz unten links (Statuszeile), mit einem rechten Mausklick auf <body> und dann auf Inlinestyles/Extrahieren und allgemeine Style anlegen.
Im folgenden Fenster setzt ihr ein Haken bei *all Elements und *of same elements type und OK.
Merkt euch unbedingt die Statuszeile da unten, da könnt ihr bequem viel zuweisen. - Jetzt speichert ihr eure Startseite, in der Menüleiste unter Speichern unter, mit dem Namen index.html ab und zwar im Ordner Mein Web.
Das speichern der Seite ist sehr wichtig weil NVU sonst beim Einfügen von Bildern diese Pfade absolute macht. - NVU schliessen.
Was haben wir nun erreicht damit:
Dass unsere Seiten einigermaßen HTML konform werden.
Dass einige kleine Ungereimtheiten in NVU nicht mehr auftreten.
Dass die Pfade im Quelltext "relative" angegeben werden.
Dass unsere Seite in verschiedenen Browsern einigermaßen gleich aussieht.
Und das unsere Seite dank CSS wunderbar gestaltet werden kann und wir diese Gestaltung mit in andere Seiten übernehmen können.
Begleitende Themen:
