Webseitengestaltung, Seite 1
      Zurück zur Startseite       Weiter zur Seite 2       Die Begleitung zur Nvu Anleitung  bis Blatt 6 mit Nvu / KompoZer DE

Diese Kurs-Webseiten werden mit Nvu erstellt, verwaltet und auf den Webserver hoch geladen. Ab 7.1.2007 wird der KompoZer DE 0.77 als die Nvu-Verbesserung unter Windows eingesetzt. Die Kurs-Webseiten sind immer selbst ein Beispiel für das bis an der jeweiligen Stelle Erklärte. So sieht der Kursanfang recht bescheiden aus, denn die Kenntnisse an dieser Stelle sind nun einmal bescheiden. Was immer du auf den Kursseiten siehst, kannst du auch am Ende der Seite. Der Kurs kann jederzeit von jeder/jedem begonnen werden und läuft solange, bis auf der Startseite eine Pause oder ein Ende mitgeteilt wird.
Wie im Internet üblich, werden alle geduzt. Der Kurs wird erstellt und betreut vom Webmaster der eLeW, Hans U. Scholz (huscholz). Der Kurs wird ständig verbessert. Zu jedem Abschnitt und Auftrag kann per eMail oder Kurs-Gästebuch gefragt und verbessert werden. eMails sind mit der Anrede Hans oder du korrekt und werden zeitnah per eMail beantwortet. Das Kurs-Gästebuch steht zur Verfügung, wenn Scheu besteht, die eigene eMail-Adresse oder Identität preiszugeben.
Zum Nachschlagen für HTML werden die Seiten von Stefan Münz und für CSS die alphabetische CSS-Referenz. Einzelne Begriffe sollten sich auch im Wiki klären lassen.

Voraussetzungen:

1. Nvu/KompoZer in deutsch, fertig installiert. Als Download ist es hier erhältlich: http://www.nvu-composer.de/.
Eine bebilderte Anleitung zur KompoZer-Installation für Windows XP folgt, kann aber auch von dir übernommen werden, wenn du schneller bist.
Eine bebilderte Anleitung für Linux kann nur von dir kommen, ich würde mich freuen, sie unter deinem Namen einzubinden.
2. Die von Jürgen Klose übersetzte Nvu-Anleitung von Charles Cooke: http://www.nvu-composer.de/doku/nvuanl101.pdf.
Deren letzter Stand vom 26.7.2005 reicht aus, um sich Nvu/KompoZer zu erarbeiten. Dieser Kurs hier liefert dazu die Praxis.
3. Ein Internetzugang, es muss aber kein DSL sein.
4. Browser Firefox. (Hier erhältlich: http://www.firefox-browser.de/.)
5. Erfahrung im Umgang mit dem Browser und Fähigkeiten, wie sie zur Erstellung von Textdokumenten mit einem PC erforderlich sind.

Ziele:

Die auf jeder Kursseite unten genannten Ziele werden in einem Beispiel erarbeitet und ergänzend in mindestens einer Anwendung vorgeführt.

Erfolgskontrolle:

Zu jeder Kursseite gehört mindestens ein Auftrag. Aufträge werden mit Nvu/KompoZer geladen und bearbeitet. Am Ende des Auftrags kann das eigene Ergebnis mit einer Vorgabe/Lösung verglichen werden. Jede Kursseite schließt mit einer Aufstellung, was mit der Seite gelernt werden konnte.

Ablauf

Kursseiten werden im Browser betrachtet und nicht verändert. Kursseiten verweisen mit Blatt xxx auf die Nvu-Anleitung von Cooke/Klose. Die zu Beginn des Kurses im Oktober 2005 schon bestehende Cooke/Klose-Anleitung zu Nvu wird mit diesem Kurs so ergänzt, dass sie mit nachvollziehbaren Beispielen umgesetzt wird. Zeitlich gibt es keine Vorgaben. Ob eine Kursseite eine oder drei Stunden oder sogar drei Wochen dauert, ist allen selbst überlassen. Es gibt keine Klassen und Teilnehmerlisten, denn wer wann wie mitarbeitet, bleibt, da die Teilnehmer sich nicht äußern müssen, immer im Dunkeln. Dennoch ist ein feedback sehr erwünscht.

Die Kursseiten heißen "Seiten" und werden auf dem Bildschirm im Browser durchgenommen.
Die Seiten der Nvu-Anleitung heißen im Kurs zur Unterscheidung "Blatt 1", "Blatt 2" usw. Der Ausdruck der 97 Blätter der Anleitung wird empfohlen.
Die Aufgaben sind nummeriert und werden mit Nvu/KompoZer geladen, als Auftrag ausgeführt und auf der eigenen Festplatte gespeichert.
Die Seiten in den Anwendungen und Ergebnissen heißen "Beispielseiten". Das komplette einzelne Beispiel mit einer oder beliebig vielen Beispielseiten entspricht einer einzelnen gesamten website.

Die Bedienung von Nvu/KompoZer wird so beschrieben:
Menü Bearbeiten / Einfügen und meint: Anklicken von Bearbeiten in der Programm-Menüleiste und dann anklicken von Einfügen.

Vereinbarungen:

Jedwede Haftung ist ausgeschlossen, jedwede Verwendung und Verlinkung erwünscht.
Copyright: Die Kursgestaltung in Form und Ablauf ist Copyright von huscholz als eine seiner Varianten von telelearning.
Die im Kurs erarbeiteten Beispiele können ohne Verweis auf den Kurs komplett für die eigene Webseite kopiert und variiert werden.
Ansonsten bei Kopien und Zitaten einfach auf www.elew.de/kurs1 verweisen.

Bevor es losgeht

Immer wenn Fragen auftauchen, diese bitte per eMail an fragen at huscholz punkt de senden. Im gesamten Kurs bitte jederzeit zu allem Vorschläge liefern oder Fragen stellen. Auf der passenden Seite werden die Fragen unten abgebildet und so gut wie möglich und zeitnah dort und per eMail beantwortet. Vorschläge erhalten bei Verwendung einen namentlichen Hinweis auf den Ideengeber. Wenn du statt eMail lieber das Kurs-Gästebuch benutzt, anonym und oder mit eMail-Adresse, bitte sehr. Dann beantworte ich das genauso, bei anonymen Einträgen eben nur dort, bei vorhandener email doppelt.

Nvu ist ein OpenSource-"Geschenk" und als Nutzer von Nvu freue ich mich, durch diesen Kurs etwas an die Gemeinde zurückgeben zu können.

Jetzt geht es los. Diese Seite hier wird von dir im Browser betrachtet. Die Anleitung liegt ausgedruckt neben dir oder erscheint im Acrobat Reader.

Blatt 5 , 1.1 Lesen. Und bei Nvu sinngemäß auch immer KompoZer mit lesen.

Ergänzungen zum Abschnitt 1.1:

1.1.1 "Die verschiedenen Ansichten der Seiten.." meint vier verschiedene Editiermodi, die am unteren Rand (siehe Bild 1) von Nvu gewählt werden. Auf Blatt 7 heißen sie in der Abbildung Editiermodus-Symbolleiste.

Editiermodus-Symbolleiste
BILD 1

1.1.2 "HTML-Code-Niveau" meint, du kannst direkt mit HTML arbeiten. Dass du davon eine Menge hier lernen wirst, bleibt nicht aus.

1.1.3 W3C ist das World Wide Web Consortium, die Autorität in der Entwicklung des Internet.

1.1.4 Ein Validator überprüft die Gültigkeit.

1.1.5 CSS steht für Cascading Stylesheets und ist die Standardsprache im Web zur Strukturierung von Dokumenten.

Blatt 5, 1.2 bis 1.3 Lesen.

Blatt 6, 2.1 Eine neue Seite erstellen.

Die Bearbeitungs-Symbolleiste beginnt links mit der Neu-Schaltfläche.
Es gibt drei Arten, Befehle zu geben. 1. Per Maus und Schaltfläche, z.B. Linksklick auf 'Neu';  2. Per Tastaturkürzel, z.B. [Strg]-[n] (die Strg-Taste festhalten und die n-Taste betätigen) und 3. per Maus und Menü. So ergeben die Neu-Schaltfläche oder das Festhalten der Steuerungstaste [Strg] plus Drücken der [n]-Taste oder das Anklicken von Datei in der Menüleiste und dann 'Neu..' alle dasselbe. Ich verwende alle drei, hier im Kurs wegen der klaren Beschreibung meistens die Variante 3, die Menüleiste.

NvuStartfenster KompoZer DE 0.77
BILD 2, links 2005 und rechts 2007

Bitte mit Nvu eine neue Seite "(Unbenannt)" erstellen. Hierzu Nvu starten und [F9] drücken. Mit [F9] wird die Nvu-Seitenverwaltung ein- und ausgeschaltet. Dein Nvu erscheint mit oder ohne Seitenverwaltung und die wird erst später behandelt. Deshalb schließlich die Seitenverwaltung mit [F9] abschalten. Es bleibt die leere Seite, wie im Bild 2. Dennoch jetzt also bitte ausführen: Menü Datei / Neu... Es erscheint der abgebildete Dialog wie in der Anleitung auf Blatt 9 oben. Zusätzlich ein Häkchen bei  'Strict DTD' setzen und dann 'Erstellen' und wieder her kommen. Bei KompoZer ist die Schaltfläche 'Durchsuchen' durch ein Icon "Ordner aufblättern" ersetzt.

Blatt 6, 2.2 Eine vorhandene Seite öffnen.

Jede Webseite ohne frames *) im Internet kannst du mit Nvu runterladen, untersuchen, bearbeiten und auf deiner Festplatte speichern. Hochladen ins Internet kannst du sie nur, wenn du Zugriff mit Passwort auf den webserver hast. Für diesen Kurs wäre das eine schöne aber nicht notwendige Ergänzung. Hast du keine eigene domain, schau mal, ob sie nicht im Handy- oder Telefon-Vertrag umsonst mit drin steckt. Durch diesen Kurs habe ich meine kostenlose Arcor-Seite, die ich bis heute nicht brauche, zum Leben erweckt. Oder sieh' dich mal bei werbefinanzierten Kostenlos-Anbietern um. Der Kurs ist entstanden, weil ich meine eigenen Leute ins Internet bringen wollte, und für dich möchte ich das genauso. Auf der Startseite gibt es die Nvu-Rezepte für die Handhabung mit vier webspace-Anbietern. Mail mir eine Anfrage, wenn dein Anbieter noch fehlt oder sende mir deine Anleitung für deinen fehlenden..

Abweichend von Blatt 6 öffnest du nicht eine Datei von deiner Festplatte sondern den Auftrag 1 aus dem Internet, kommst dann aber hierher zurück. Den Auftrag 1 also jetzt noch nicht beginnen. Die Seite "auftrag01.html" wird mit Nvu/Kompozer geöffnet. Hierzu bei bestehender Internetverbindung in Nvu mit
Menü Datei / Webadresse öffnen... / Dialog 'Neue Seite oder Vorlage erstellen' / Webadresse eingeben: www.elew.de/kurs1/auftrag01.html / Erstellen.
Nvu ersetzt die leere Seite vom Start durch die geladene Seite. Bild 3. Im jeweiligen Tab erscheint der Titel. Per Klick auf den Tab wird die Seite gewechselt.

Nvu mit auftrag01
BILD 3

Blatt 6, 2.3 Bearbeiten einer Webseite

Cursor auf die Symbole halten und Quickinfos studieren. Quickinfos bleiben bei mir Englisch tooltips. Die zu bearbeitende Webseite ist der Auftrag 1, in den du jetzt wechselst.

Vorbereitung zum Auftrag 1

Mit deinem Browser den Auftrag http://www.elew.de/kurs1/auftrag01.html laden und speichern unter deinem Arbeitsverzeichnis für diesen Kurs. Z.B. in D:\aktuell\kurs1\ergebnisse. Du erhältst mit dem IE oder dem Firefox dort auch das Unterverzeichnis "auftrag01_files" angelegt. Nenne dieses um in "img". Die html-Dateien liegen dann immer unter \kurs1\ergebnisse und die Grafiken immer unter \kurs1\ergebnisse\img . Dein Browser wird meckern, dass du beim Umbenennen die zugehörige HTML Datei eventuell beeinträchtigst. Das ist egal, die Datei soll nicht nur beeinträchtigt, sondern komplett mit Nvu/KompZer geändert werden.

Auftrag 1


Zu Nvu wechseln und den mit Nvu geladenen Auftrag "http://www.elew.de/kurs1/auftrag01.html" in Nvu ausführen. Dann bitte hierher zurückkehren.

Ergebnis 1

Das erste Ergebnis ist fertig. Es muss nicht deinem Ergebnis entsprechen, gilt aber als meine Lösung. Meine Lösung kann auch mit diesem Link in ein neues Browserfenster geladen werden.

Anwendungen dessen, was du jetzt mit Auftrag 1 auch getan hast, sind die Nvu-Rezepte auf der Startseite und natürlich diese Seite selbst.

Weiter im Kurs mit Seite 2 und nicht vergessen: Fragen, Kritisieren, Vorschlagen, alles per eMail oder Gästebuch.

Was jemand, der bisher keine Ahnung hatte, nach dieser Seite getan haben, bzw. können sollte:

Nvu auf dem PC installieren und starten (Können ergibt sich aus dem Vorwissen und der Nvu-Webseite).
Die Nvu-Anleitung herunterladen und mit einem Reader ansehen oder sogar ausdrucken (97 Blätter).
In Nvu die Seitenverwaltung ein- und ausschalten. Anwenden von [F9]. Die Seitenverwaltung wurde noch nicht erklärt.
Eine Seite mit Nvu speichern. (Auftrag 1, a)
Grafiken vom Browserfenster aus dem Internet auf die eigene Festplatte kopieren. (A1, c)
Mit dem Dialog 'Grafik-Eigenschaften eine Grafik in den Text einfügen. (A1, d)
Relative und absolute Adresse für eine eingefügte Grafik unterscheiden. (A1, e)
Einer Grafik einen Alternativtext mitgeben. (A1, f)
Eine Grafik mit einem Rand versehen und Text unter der Grafik ausrichten. (A1, g)
Texte fett, bzw. verschieden farbig erscheinen lassen. (A1, i-l)
Text markieren und dort einen Link setzen. (A1, m)
Eine eMail-Adresse erstellen. (A1, n)
Für die eMail-Antwort einen passenden Betreff mitliefern. (A1, o)
Die Schriftart mit einem Inline Style festlegen. (A1, p)

Garantie: Falls nicht(s) verstanden, erfolgen Zusatzinformationen nach Erhalt einer eMail mit Beschwerde an garantiert at huscholz punkt de senden.
 
Vorschläge, Fragen, Kritik zum Kurs


Frage 18.10.05 H.S.: "Der Link zum download von Nvu hat funktioniert. Aber der 2. download der Anleitung, der funktioniert nicht."
Antwort: "Beim oberen Link zur Nvu-Composer Seite erscheint nach Aufruf links im Menü in der zweiten Zeile 'Neuigkeiten / Weblog'. Das Anklicken führt zum Weblog von Thorsten Fritz. Da habe ich selbst den Link unter dem Datum vom 5.8.2005 gefunden (Download als pdf) . Unter dem gleichen Datum ist auch eine Verknüpfung zu Jürgen Klose, der wiederum selbst unter Nvu seine Anleitung (hier) zum download anbietet. Vielleicht geht es dort besser. (Nachtrag Dezember 05:) Inzwischen habe ich mit Jürgen Kloses Erlaubnis die Anleitung auch auf dieser Webseite. (hier)

Vorschlag 19.10.05 Joern: "An:<1@huscholz.de> Mach doch mal bei deinen eMail Hinweisen immer einen Betreff rein, dann weißt du auch immer, aus welchem Kapitel die Frage kommt. So wie hier:
<a href="mailto:beispiel@example.org?subject=eine%20Mail%20von%20deinen%20Web-Seiten"> (mit %20 wird das Leerzeichen kodiert.) 
Antwort: "Danke, das mit dem Betreff habe ich nicht gewusst. Das ist ein feiner Service. Alle eMail-Adressen sind jetzt mit vorgefertigtem Betreff, wie von Joern vorgeschlagen, versehen. 

Frage  07.11.2005 H.S.: "Ich habe den ersten Auftrag geladen. Hier werde ich verwiesen auf Blatt 5, dann Blatt 6. Wo finde ich diese Blätter ?????
Antwort: "Diese Blätter sind in der Anleitung enthalten: http://www.elew.de/kurs1/nvuanl101.pdf. Die Idee ist, eine bestehende Nvu-Anleitung nicht noch einmal und anders zu schreiben, sondern mit Beispielen begleitend aufzufüllen.

Frage 11.01.2007 K.F.: "Was genau bedeutet der Begriff Strict DTD ?"
Antwort: "DTD steht für Document Type Definition, auf Deutsch Dokumenttyp-Deklaration. Diese teilt dem Browser mit, welche Auszeichnungssprache die Webseite verwendet, z. B. HTML, und in welcher Version. Ohne diese Angabe geht der Browser vielleicht davon aus, dass es sich um einen alten Sprachstandard handelt und wendet vorsichtshalber wegen der Kompatibilität inzwischen überholte Regeln an.
Strict ist eine von drei Varianten für HTML, die anderen sind Transitional und Frameset. Mit Strict wird dem Browser angezeigt, dass knallhart die Regeln eingehalten werden. Strict ist anzuwenden, wenn Stylesheets zum Einsatz kommen. (Wie bei uns beiden hier im Kurs demnächst.)

Frage 11.01.2007 K.F.: "Den Unterschied zwischen einer relativen und absoluten Adresse für eine eingefügte Grafik habe ich nicht ganz verstanden. Könntest Du mir das nochmal erläutern? Vielleicht anhand eines Beispiels?"
Antwort: "Relativ sollen beim Auftrag 1 die Grafiken im Unterverzeichnis "/img" stehen.Das Verzeichnis "img" ist ein Unterverzeichnis von "/ergebnisse". Wenn eine Seite also im Verzeichnis "ergebnisse" steht, dann lautet der relative Verweis für die Grafik "a01_1.png" z.B. "img/a01_1.png". Die absolute Adresse könnte lauten"file:///D:/HANS/Sites/Kurs/ergebnisse/img/a01_1.png".
Kopiere ich nun alles von Laufwerk D nach E und lösche auf D die Grafik, dann bleibt die relative Adresse gültig, denn relativ gesehen hat sich gar nichts geändert. Die Grafik ist immer noch im Verzeichnis "img". Aber absolut funktioniert es dann nicht. Auf Laufwerk D habe ich ja gelöscht. Das ist entscheidend, weil die fertige Webseite ja auch ins Internet kopiert wird und daher auch alle Bestandteile dort zu finden sein müssen, nämlich relativ.

Frage 31.01.2007 G.S.: "Mir ist aufgefallen, dass das Aussehen einer neuen NVU-Seite etwas voneinander abweicht, je nachdem, ob man mit dem NVU-composer 2005 arbeitet oder die neueste Version KompoZer 0.77 verwendet. Welche empfiehlst Du konkret?"
Antwort: "Nimm gleich die neueste Version von Nvu und das ist der KompoZer 0.77 DE, (http://www.nvu-composer.de/versionen/kz_077.html). Die unterschiedliche Wiedergabe liegt an den unterschiedlichen Basiseinstellungen der beiden Programme. Auftrag 7 geht darauf ein.

Frage 31.01.2007 G.S.: "Ich komme im Auftrag 1 beim Einfügen des Bildes #2 nicht wie beschreiben weiter.
Die Aufgabenstellung ist eigentlich sonnenklar...Kopiere vom Browser das Bild 2/2007 aus der Kursseite auf deine Festplatte. Rechtsklicke im Browserfenster auf Bild 2/2007. Wähle im Kontextmenü 'Grafik speichern unter...' und füge die Grafik auf deiner Festplatte mit dem Windows-Explorer bei "kurs1/ergebnisse/img" mit 'Speichern' ein. Der Name der Grafik ist "6_21_2.png".....
Bei mir erscheint im Kontextmenü aber keine Möglichkeit die GRAFIK MIT SPEICHERN UNTER an der beschriebenen Stelle zu speichern.... (Das Bild ist markiert und erscheint mit den Anknüpfungspunkten). Ich kann bestenfalls die Kopierfunktion für das Bild benutzten. Wenn ich dann allerdings unter Kurs1/ Ergebnisse/Img einfügen will, erscheint die Einfügefunktion INVERS. Ich kann das Bild also auch nicht wie beschreiben ablegen..... Was mache ich denn da falsch?"
Antwort: "Im Browserfenster wird eine Grafik nie Anknüpfungspunkte zeigen, du hast das Wort "Browser" überlesen und versuchst aus Nvu heraus die Grafik zu kopieren. Da gibt es im Kontextmenü 'Kopieren', aber Einfügen kannst du das in Word z.B., aber nicht als eine Grafikdatei speichern. Deshalb mein Umweg über den Browser, der per Kontextmenü die Datei speichern lässt. Lade den Auftrag also zusätzlich mit Firefox oder IE."

Frage 3.3.2007 V.K.: "Befinde mich gerade bei Auftrag 01, m). Das Fenster Link-Eigenschaften in NVU entspricht nicht dem des KompoZer's und die Auswahl "Link in einem neuen Fenster öffnen" ist nicht möglich."
Antwort: Das Bild ist jetzt noch deutlicher gestückelt, klar dass die Schrumpfdarstellung nicht dem Original entspricht. Die Auswahl besteht darin, ein Häkchen zu setzen oder nicht mehr. Das ist aber erst möglich, wenn die Webadresse steht.

Weiter im Kurs mit Seite 2

*) Frames werden später kurz erwähnt. Mit Nvu/Kompozer können die einzelnen frames bearbeitet werden,  für eine Gesamtseite jedoch mit mehreren frames ist es ungeeignet und hängt sich auf. Solltest du mal mit Nvu so etwas laden, dann bitte Nvu schließen und neu starten.