Auftrag 01: Du wirst Nvu  einsetzen und als ein Ergebnis eine Webseite erstellen, die in der Ausstattung der ersten Kursseite entspricht. Bitte arbeite die Anweisungen durch.

Dieser Auftrag 1 muss mit Nvu geladen sein und du liest das jetzt auch im Nvu-Fenster durch.

Du hast die Kursseite 1 gesehen und jetzt diese hier. Das Versprechen ist, alles was du siehst, kannst du am Ende auch.

a) Speicher diese Seite ab als "index.html" in deinem neuen Verzeichnis auf deiner Festplatte. Ich nenne das Verzeichnis "ergebnisse" und es befindet sich seinerseits im neuen Verzeichnis "kurs1". Überschreibe dabei die schon vorhandene Datei index.html:
Menü Datei / Speichern unter... / 'Speichern in: den Verzeichnissen "kurs1/ergebnisse" unter Dateiname "index.html" / Speichern.


Der Titel "Auftrag01" wird angezeigt und muss nicht der Dateiname sein.
Als Dateiname wird "index.html" verwendet. Der Grund: Wenn ein Besucher deine Domainadresse aufruft, dann verlangt sein Browser nach der Datei index.htm oder index.html. Es ist nötig, eine Startseite "index.htm" oder "index.html" zu nennen. Von der Startseite aus kann dann der Besucher anhand der Links sich weiter bewegen. Der Auftrag01 ist aber noch ungeeignet als Startseite.

b) Jetzt zur Vorgehensweise. Diese Seite kannst du jetzt bearbeiten. Solltest du von vorne anfangen wollen, lädst du dir Auftrag01 aus dem Internet und speicherst das als index.html in \ergebnisse. Solltest du nur unterbrechen, fängst du hier mit index.html wieder an. Deshalb wird jede erledigte Aufgabe a), b) usw. nach Erledigung gelöscht. Das machst du bitte gleich mal: Also vom Kopf der Seite bis Aufgabe b) hier einschließlich jetzt alles löschen. Ich erwähne das jetzt noch ein paar Mal, bei den nächsten Aufgaben vielleicht gelegentlich.

c) Vor dem Titel auf dem Tab siehst du eine kleine rote Diskette - ein Hinweis, dass deine letzte Änderung - das Löschen von oben bis inklusive b) -noch nicht gesichert ist. Klicke auf die Schaltfäche 'Datei lokal speichern' und die kleine rote Diskette verschwindet und die Schaltfläche verblasst.
Für deine erste Seite holen wir nun die Grafik auf deine Festplatte und danach hier herein. Wenn ich schon Verzeichnisse empfehle, dann immer für die Grafiken das neue Unterverzeichnis "img" im Verzeichnis "ergebnisse". So lassen sich die verschiedenen Dateien getrennt leichter verwalten. Das wird auch von Nvu unterstützt.
Falls du die Seite 1 nicht oder nicht mehr geladen hast (www.elew.de/kurs1/kurs1-1.html) hole sie mit deinem Browser. Kopiere vom Browser das Bild 2, rechts 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".
Lösche c) und lass noch eine leere Zeile über BILD 1 stehen.


BILD 1
d) Füge die Grafik "6_21_2.png" hier in die Leerzeile über "BILD 1" ein. Dazu den Cursor in die Leerzeile setzen, Menü Einfügen / Grafik... / Dialog 'Grafik-Eigenschaften' Durchsuchen-Schaltfläche. (Die Grafik "6_21_2.png" muss von deiner Festplatte stammen.) / 6_21_2.png markieren / 'Öffnen' / Radiobutton 'Keinen Alternativtext verwenden' setzen / OK.
Aufgabe d) wieder löschen, aber Bild 1 stehen lassen.


BILD 2
e) Jetzt kommen noch Details zur Grafik, die du immer gleich erledigen wirst, nur eben war es erst einmal wichtig, das Bild einzufügen, um deinen Bildschirm durch Löschen aufräumen zu können.
Details lassen sich aber nachträglich auch einfügen oder ändern. Ein Doppelklick auf Bild 1 lässt den Grafik-Dialog wieder erscheinen. Packe ihn mit der Maus am blauen Balken oben und schiebe ihn etwas zur Seite.
Unter dem Register 'Adresse' setzt Nvu ein Häkchen bei 'URL relativ zur Seitenadresse', wie bei Bild 2. Nimm spaßeshalber das Häkchen raus und die Grafik erhält die absolute Adresse von deiner Festplatte. Dann steht da genau auf welchem Laufwerk die Grafik liegt. Würdest du die Adresse so lassen und so ins Internet laden, dann könnte kein Besucher die Grafik sehen. Normalerweise kann nämlich kein Browser auf deine Festplatte zugreifen. Deshalb hilft die relative Angabe der Adresse. Das heißt, das Verzeichnis der Grafik ist nur vom aktuellen Verzeichnis der Webseite aus gesehen richtig adressiert.

Setze das Häkchen wieder ein. Die relative Adresse nutzt jedoch im Internet wenig, wenn die Relation - die Adresse der Grafik in Bezug auf die Adresse der Webseite - auch im Internet nicht die gleiche wie auf deiner Festplatte ist. Auch im Internet muss das Unterverzeichnis so heißen, wie im Augenblick dasjenige jetzt auf deiner Festplatte. Lösche e) ohne Bild 2, und damit du das kannst, gib deinem Grafik-Dialog das OK.

f) Für das Bild 1 habe ich einen Alternativtext ausgefüllt. Er ist im Bild 2 zu sehen, "Bildausschnitt oben links von KompoZer". Der Alternativtext wird vom Internet Explorer angezeigt, wenn der Mauszeiger die Grafik berührt, aber nicht vom Firefox. (Stand 2005). Ist ein tooltip eingetragen, zeigt der Internet Explorer den an und nicht den Alternativtext. Firefox zeigt den tooltip bei Grafikberührung mit der Maus an.
Gib jeder Grafik einen Alternativtext. Den berücksichtigen die Suchmaschinen, und vor allem erhält dein Besucher einen Hinweis, was zu sehen sein sollte. Denn er könnte alle Grafiken ausgeschaltet haben oder bei einem Fehler von dir deine Grafik nicht laden können. Kopiere oder tippe den Altenativtext für das Bild 1 ein und lösche dann f) und Bild 2.


BILD 3

g) Doppelklicke wieder Bild 1 und setze wie bei Bild 3 beim Register 'Erscheinungsbild' (= der 3. Reiter im Grafik-Dialog) die Abstände zur Grafik auf 5 Bildpunkte (pixel) und gib der Grafik einen durchgezogenen Rand von 1 pixel. Die Ausrichtung 'Unten' sorgt beim Bild 1 dafür, dass der Text unterhalb der Grafik fortgesetzt wird und nicht links oder rechts. Für Bild 2 und 3 wurde die Ausrichtung 'Rechts' verwendet. Du kannst ja mit diesen Einträgen selbst forschen, was geschieht, und sie ändern. Das Einfügen ist erledigt, jetzt nur noch 'OK'.
Lösche g) und Bild 3. Lasse Bild 1 oben stehen.

h) Der Inhalt der ersten Webseite soll eine Überschrift, einen Text , ein Bild und zwei Links enthalten. Dann hast du schon das Niveau der ersten Kursseite erreicht, und kannst selbst  solche und größere Webseiten mit Texten, Links und Bildern erstellen. Lösche h).

i) Kopiere die unterstrichene Überschrift rechts von hier ganz nach oben. Überschrift: "Die linke obere Ecke von KompoZer". Steht Bild 1 ganz oben in der Ecke, dann setzt du einfach links davon zweimal [Enter] und erzeugts zwei Leerzeilen. Lösche i) und jeden Auftrag, den du erledigt hast.

j) Markiere die Überschrift und klicke in der Format-Symbolleiste von Nvu auf die Schaltfläche 'B' , damit die Überschrift fett (B=bold) erscheint. Klicke auf die Schaltfläche 'U', damit die Unterstreichung verschwindet.

k) Schreibe drei Zeilen Text mit einer Beschreibung, was du auf dem Bild erkennst. Wenn du es bequem liebst, lösche das k) und lass als eine BlaBla-Beschreibung diesen Absatz mit drei Zeilenumbrüchen unter dem Bild 1 stehen.

l) Füge zwei Leerzeilen zwischen deinem Text und dem Bild 1 ein und kopiere den violetten Satz von hier unter das Bild 1:
Das Bild stammt aus einem Kurs über Webgestaltung mit Nvu/KompoZer. Hier.
Passend zur Schrift beim Cursor wechselt die Schaltfläche 'Textfarbe auswählen' (in der Format-Symbolleiste das farbige Quadrat) ihre Farbe. Markiere die ganze violette Zeile "Das Bild..." und wähle mit der passenden Schaltfläche die Farbe Grün.

BILD 4 (senkrecht gestückelt)
m) Markiere am Ende der jetzt grünen Zeile für einen Link das Wort 'Hier'.  Setze einen Link auf diesen Kurs mit Menü Einfügen / Link... / Dialog 'Link-Eigenschaften.
Auf zwei Einträge kommt es mir an, die ich in Bild 4 in einer senkrecht zerhackten Grafik kombiniert habe, 1. die Webadresse und 2. das Häkchen 'Link wird geöffnet'.

1. Das Linkziel ist der Kurs. Unter der abgebildeten URL halte ich "index.html" als Kurs-Startseite bereit.
2. Mit dem Häkchen ergibt sich die Wahl, ob dein Besucher den Inhalt der verlinkten Seite im gleichen Fenster wie bisher oder in einem neuen Browserfenster sehen wird. (Mancher Besucher wird genervt, wenn sich neue Fenster von alleine auftun.) Das Häkchen kann im Dialog gesetzt werden, sobald eine Webseiten-Adresse eingegeben ist.

Falls jetzt noch nicht geschehen, schließe den Dialog mit OK.

Platziere oben den Cursor hinter deinem Link "Hier" und füge den Text hier an: " (mit neuem Browserfenster)." Das ist dann eine Vorwarnung für den genervten Besucher. (  Anweisung m) und Bild 4 werden nicht mehr benötigt.)

n) Ein Link zu einer eMail-Adresse wird ähnlich gesetzt. Schreibe einen Hinweis wie: "Einfach an karl@mustermann.de mailen." unterhalb deines Textes zu Bild 1.
Markiere die eMail-Adresse "karl@mustermann.de" und kopiere sie in die Zwischenablage. Die Adresse bleibt markiert.
Jetzt mit Rechtsklick das Kontextmenü aufrufen. 'Link erstellen..'. auswählen und im Dialog in die Zeile mit der Linkadresse diese aus der Zwischenablage einfügen. Gleich darunter das Häkchen setzen für 'Das ist eine E-Mail-Adresse' . Gehst du mit der Maus auf die zwei Links, zeigt Nvu die Adressen an.

o) Verwende einen Zusatz, wie von Jörn per eMail, siehe Seite 1 unten, vorgeschlagen: Erleichter deinem Besucher das Leben, indem du den Betreff zur eMail-Adresse gleich dazu setzt. Wähle noch einmal mit Doppelklick in die eMail-Adresse den Dialog 'Link-Eigenschaften' und ergänze die eMail-Adresse mit "?subject=" für den Betreff und tippe dahinter den Betreff ohne Umlaute und mit je einem %20 für jedes Leerzeichen.
Beispiel: karl@mustermann.de?subject=Hier%20erhaelst%20du%20eine%20schoene%20mail
Das siehst du nicht oft, deine Besucher erhalten von dir den Betreff für ihre eMail gleich mitgeliefert.

p) Die Kursseite 1 und der Auftrag 1 erscheinen in einer Schrift, die dein Browser gewählt hat. Für das Beispiel und den weiteren Kursverlauf möchte ich auf Verdana umschalten. Du siehst in der Statuszeile von Nvu unten den Tag <body>. Rechtsklicke darauf für ein Kontextmenü. Wähle 'Inline styles' und dann 'Texteigenschaften'. Im Dialog 'Texteigenschaften' wähle die benutzerdefinierte Schriftart "Verdana"  mit der Schriftgröße "10pt". Damit erzwingst du mit deinem Inline style für <body>, das heißt für den gesamten Körper der Seite, die Schriftart Verdana mit 10 pt für alle Textstellen, wo nicht ausdrücklich etwas anderes kodiert wird. OK.

q) Damit ist die erste Webseite ist fertig.
Sie enthält farbige und fette Schrift in Verdana 10pt,  ein Bild, einen Link zum Kurs1 und eine fiktive eMail-Adresse.
Diese erste Seite bitte vom Überflüssigen befreien und speichern nicht vergessen.

Speichern ist immer gut. Wenn Nvu irgendwie zickt, d.h. etwas kommt dir komisch vor und funktioniert nicht wie gewohnt, dann alles speichern, Nvu schließen und Nvu neu starten. Bei Nvu nicht erst beim Zicken den Absturz abwarten. Kommt nämlich vor. Hast du fleißig gespeichert, ist ein Absturz aber auch nur noch halb so schlimm. KompoZer hat dem Nvu einiges an Zicken abgewöhnt.

Und mach bitte dein Kursverzeichnis sauber. Die Bilder hast du während des Auftrags gelöscht, aber beim ersten Speichern hat Nvu auch alle Bilder des Auftrags auf deiner Festplatte abgeladen. Im Verzeichnis "ergebnis" solltest du nur "index.html" und im Unterverzeichnis "ergebnis/img" nur die Grafik 6_21_2.png behalten.

Auftrag 1 erfüllt! Weiter mit der Kursseite 1 im Browserfenster.