Vorbereiten Abheben Fahren Einpacken Zurück zur Kurs-Startseite

Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1

Übung 6, Externes Stylesheet

Willkommen:

Mit der letzten Aufgabe wurde eine mögliche für KompoZer typische Behandlung mehrseitiger Websites nachvollzogen: Zuerst dient eine Seite der Entwicklung des Designs und der Navigation. Dann wird das fertige Gerüst auf jede Unterseite komplett übertragen und abschließend jede Unterseite einzeln fertiggestellt.
Nachträgliche Änderungen und Erweiterungen der Navigation, etwa durch weitere neue Unterseiten werden dann ebenfalls auf einer Seite erstellt und als Ganzes auf andere Seiten übertragen.

Nicht so in dieser Übung bei Formaten und in gewisser Weise beim Layout. Sind die Regeln hierfür in einer eigenen einzelnen CSS-Datei enthalten, ergeben einmalige Änderungen dort, dass alle Seiten, die auf diese CSS-Datei verlinken, gleichzeitig die Änderungen erfahren.

Das interne Stylesheet wird als eine eigene Datei ausgelagert, als externes Stylesheet. Abschließend werden alle Seiten der Homepage darauf umgestellt.

Aufträge:

a) Die erste Seite der Homepage erhält ihren Titel und eine eigene Beschreibung

Diese Seite als "ziel06a.html" mit dem Titel "Vorbereitung" und der Beschreibung "Ballon entfalten" speichern. Lösche allen Text oberhalb von hier, bis der Auftrag b) unterhalb der Navigation steht. Die Navigation oben bleibt für die ganze Übung erhalten.

| Menü 'Format' | 'Seitentitel und Einstellungen' | Dieser Seite den Titel "Vorbereitung" geben. Die Beschreibung der Seite lautet: "Ballon entfalten" | OK | Menü 'Datei' | 'Speichern unter...' "ziel06a.html" |

b) Export der Regeln

Die ganze Übung enthält keine Inline-Styles mehr. Die ganze Formatierung ist im internen Stylesheet im Header enthalten. So kommt es gleich zu Beginn zum Höhepunkt dieser Übung: Das interne Stylesheet wird aus dem Header entfernt und in eine CSS-Datei exportiert.
Vielleicht hast du beim Öffnen des CSS-Editors die Schaltfläche 'Stylesheet exportieren und auf externes Stylesheet umstellen' schon bemerkt. Mit der geht es. Alles was zu tun ist, ist das Verzeichnis auf der Festplatte zu finden und den Dateinamen anzugeben. Als Name ist alles erlaubt, aber das Einfache kommt dem Genialen näher und nach längerer Abwesenheit ist jeder froh, wenn der übliche Suffix "css" die CSS-Datei kenntlich macht. Sie soll also schlicht "ziel06.css heißen.  Der CSS-Editor erledigt auch den Umbau im Header. Er löscht im Header das interne Stylesheet und fügt stattdessen einen Link auf die CSS-Datei ein.

| CSS-Editor per Symbol 'CSS' aufrufen | Schaltfäche 'Stylesheet exportieren und auf externes Stylesheet umstellen' | Zielverzeichnis auf der Festplatte ansteuern | Dateiname "ziel06.css" eingeben | Speichern | Aus dem Eintrag im Dialog unter 'Sheets und Regeln' wurde nun "ziel06" mit einem Plus davor. Das Plus anklicken | Alle Regel sind erhalten | OK |

c) Änderung von Regeln

Nach dem Sichern der Arbeit ist im Header kein internes Stylesheet vorhanden. Dafür gibt es im Header den Link auf das externe Stylesheet: <link rel="stylesheet" href="ziel06.css" type="text/css">.
Und auf der Festplatte findet sich die Textdatei "ziel06.css" mit allen Regeln.
Die Bedienung des CSS-Editors ändert sich nicht. Das Format sollte es aber schon. Hier die Vorschläge:

c1 ) Die neue Regel "body" erhält einen Hintergrund mit background-color: #ffffcc;

| CSS-Editor | Linksklick auf die Palette oben links für den Dialog 'Neue Style-Regel' | Eintrag von "body" | 'Style-Regel erstellen' | Register 'Hintergrund' | 'Farbe:' #ffc | OK |

c2) Als Nächstes werden ohne den CSS-Editor zwischendurch mit OK zu schließen drei Regeln hintereinander im Register 'Allgemein' umgeschrieben. Es sind die Regel "a" für alle Links die mit dem ganzen Paket über die Zwischenablage ausgewechselt wird, das Paket folgt hier,

background-color:#666666;
color:white;
font-size:0.9em;
margin-right:0.5em;
padding-left:0.5em;
padding-right:0.5em;
text-decoration:none;

die Regel "a.hover", die umgefärbt wird zu background-color: #000099;

und die Regel "a.hier", bei der aus "olive" ein "green" werden soll.

| Die komplette Regel von "a" aus dem Auftrag in den Zwischenspeicher kopieren | CSS-Editor | Regel "a" wählen | Register 'Allgemein' | Alle Styles zum Überschreiben markieren | Alle Styles mit dem Inhalt des Zwischenspeichers ersetzen | ohne OK weiter mit Regel "a.hover" im gleichen Register | Die Hintergrundfarbe mit "#009" auswechseln | Ebenfalls die Farbe wechseln bei "a.hier" mit "green" | OK | [Strg]+[s] | Bis zum Auftrag d) alles löschen und die Navi stehen lassen |

d) Eine Regel wird umbenannt

Die Klasse ".text" eignet sich wie jede Klasse für wiederholte Anwendungen bei allen möglichen Elementen. Durch die Erweiterung im Namen zu "div.text" eignet sich sich wenigstens für alle möglichen <div>-Container. Auf alle Fälle sind Klassen für eine wiederholte Anwendung gedacht.
Anders, wenn der Punkt im Namen der Regel durch das Doppelkeuz # ersetzt wird. Dann darf auf einer Seite diese Regel nur einmal angewendet werden. Dann ergibt auch ein vorangestelltes "div" keinen Sinn. Denn wird die Regel mit dem vorangestellten # einmal für ein  <div> verwendet, steht sie für kein anderes <div> zur Verfügung.

Erreicht wird dadurch, dass das Element ganz eindeutig gefunden wird, wenn es von einer Scriptsprache wie Java angesprochen wird, oder wenn ein Link darauf verweist. Aus der Regel "div.text" soll jetzt die Regel "#rahmen" werden.  #rahmen ist dann keine Klasse mehr, sondern ein Identifier, genauer, ein ID-Selektor. #rahmen selektiert das Element mit der ID "rahmen".

Im CSS-Editor wird die Regel "div.text" ausgewählt. Mit dem dritten Symbol 'Bearbeiten' in der Reihe, wo die Palette links sitzt, wird eine Eingabezeile geöffnet und die Regel kann umbenannt werden. Wenn das geschieht, verliert der Container sofort sein Format, denn die zugewiesene Klasse ".text" existiert ja nicht mehr.

Aber so wie mit dem Kontextmenü das Häkchen für die Zuweisung einer Klasse entfernt werden kann, kann es auch für die Zuweisung einer ID wieder gesetzt werden.

| CSS-Editor | Regel "div.text" auswählen | Symbol 'Bearbeiten' | "#rahmen" ohne Anführungszeichen eintragen | OK | OK | In der Statuszeile <div class="text"> rechtsklicken | Kontextmenü 'Klassen' | Häkchen für "text" entfernen | <div> wieder rechtsklicken | Kontextmenü 'ID' | Häkchen für "rahmen" setzen | Strg]+[s]

e) Viererpack als Übungs-Homepage bilden

Damit aus dieser Übung die kleine Homepage mit vier einfachen Seiten wird, ist diese Seite noch als "ziel06b.html", "ziel06c.html" und "ziel06d.html" zu speichern. Die Navigation wird dann auf jeder einzelnen Seite erstellt. Mit KompoZer ist das für ein Menü mit 4 x 5 Links noch erträglich, bei größeren Homepages ist die Methode der vorigen Aufgabe, die komplette Navigation auf alle Unterseiten zu kopieren und etwas anpassen, eher anzuraten. Die Nebenseiten b bis d erhalten die Titel der Navigation von "Abheben" bis "Einpacken". Die Beschreibungen stehen in der Aktionszeile.

| Diese Seite sichern | Menü 'Format' | 'Seitentitel und Einstellungen' |
Dieser Seite den Titel "Abheben" geben |
Die Beschreibung der Seite lautet: "Die Fahrt beginnt" | OK | Als "ziel06b.html" speichern |

Jetzt der Seite den Titel "Fahren" geben. Die Beschreibung der Seite lautet: "Über Land" | OK | Speichern als "ziel06c.html" |

Abschließend der Seite den Titel "Einpacken" und die Beschreibung "Der Ballon wird eingepackt" geben | OK | Als "ziel06d.html" speichern |

f) Anpassung der Navi

Der Auftrag gilt für die Datei "ziel06d.html", die als zuletzt gesicherte Webseite noch offen sein müsste. Das Menü muss den neuen Zielseiten entsprechend angepasst werden.

f1) Zuerst der Link "Einpacken". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Einpacken" linksklicken" | In der Statuszeile <a> rechtsklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

f2) Der Verweis bei "Einpacken" auf #top ist falsch. Er stammt aus der letzten Übung und führt ins Leere. Den Anker gibt es nicht und er wird auch nicht gebraucht. Da es jetzt einen eindeutig identifiziebaren "Rahmen" gibt, kann auf diesen verlinkt werden. Im Dialog'Link-Eigenschaften' findet sich in der Auswahlliste der neue Identifier "#rahmen", der als obere Ecke links gut geeignet ist. Auch für eventuelle "Nach-oben"-Verweise bei anderer Verwendung dieser Seite.

| "Einpacken" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

f3 ) Dann wird der Link "Fahren" mit der Webseite "ziel06c.html" verknüpft.

| "Fahren" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "ziel06c.html" auswählen | 'Öffnen' | OK |

f4) Der Link "Abheben" wird mit der Webseite "ziel06b.html" verknüpft.

| "Abheben" doppelklicken | 'Link-Eigenschaften' | Die Seite "ziel06b.html" auswählen | 'Öffnen' | OK |

f5 ) Als letzter Link wird "Vorbereiten"  mit der Webseite "ziel06a.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "ziel06a.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

g) Die Grafik erhält eine Regel

g1 ) Jetzt alles zwischen der Navigation und dem nächsten Bild löschen.

g2 ) Lautet die Regel "img" (steht für image), gelten die Styles für alle Elemente <img>. Da im Design nur ein Foto je Seite geplant ist, reicht das auch. Diese neue Regel "img" wird im CSS-Editor erstellt und erhält im Register 'Box' vier Innenabstände von 1em, einen Außenabstand rechts von 1em, einen 'Puffer:' links, zu dem gleich noch in h) was geschrieben steht, und im Register 'Begrenzungen' einen soliden (solid) kastanienbraunen (maroon) Rand mit 1px Dicke rundherum. Der erledigte Auftrag wird gelöscht und der Auftrag h) rutsch nach oben neben das Foto.

| CSS-Editor | 'Neue Style-Regel' mit Klick auf die Palette einleiten | Regel "img" ohne Anführungszeichen eintragen | 'Style-Regel erstellen' anklicken | Register 'Box' | Vier Innenabstände auf "1em" festlegen | 'Außenabstand: Rechts:' "1em" | 'Puffer:' Links | Register 'Begrenzungen' | Häkchen bei 'Alle vier Seiten...' | 'Stil:' solid | 'Breite:' 0.1em | 'Farbe:' maroon | OK | Die erledigten Aufträge löschen und das Foto unter der Navi stehen lassen |

h ) Die vierte Seite der HP abschließen

h1) In dem Moment, wo Puffer: Links im CSS-Editor stand, schwebte der Text von unter dem Bild nach rechts neben das Bild. In der Regel heißt der Style "float: left;". Was im Register 'Allgemein' nachgesehen werden kann. Der eingedeutschte Ausdruck Floaten kann durch Schweben ersetzt werden, nur versteht das dann kaum einer. Mit diesem Style wird der Platz rechts vom Element freigegeben und der Browser bricht den Text um. Ist der Text länger als die Spalte neben dem Bild, geht er unter dem Bild dann wieder in die volle Breite über.
Als ein Stück Text neben dem Foto bei der fertigen Seite (die Aufträge kommen neben dem Foto alle weg) dient der nicht in die Navi passende einzelne Link "Zurück zur Kurs-Startseite". Er wird im Ganzen markiert und mit der Maus neben das Bild gezogen. Wenn er stört, kann er auch wegfallen und der Platz neben dem Foto bleibt am Ende leer.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen |

h2 ) Die Bildbeschreibung
Das ist die Bildbeschreibung in vier Wörtern:
"Der Ballon wird eingepackt"
Die vier Wörter kommen in einen Container. Die Bildbeschreibung hat ihre eigene Zeile, damit nur Hineinklicken reicht und nicht alles markiert zu werden braucht. Eine eigene Zeile mit [Enter] abgeschlossen ist ein Absatz. Deshalb reicht der eine Klick anstelle der kompletten Markierung. Deshalb kann vor einer Umwandlung mit einem [Enter] ein Stopp für die Umwandlung gesetzt werden.
Wird die Bildbescheibung nach dem Hineinklicken per Absatzformat-Auswahlliste in den <div>-Container gehüllt, geht das <h5>-Überschriftformat verloren. Deshalb wird der Mauszeiger hineingesetzt und noch einmal die Auswahlliste für das Absatzformat für <h5> bemüht.

| "Der Ballon wird eingepackt" irgendwo anklicken | Per Absatzformat-Auswahlliste ein <div> zuweisen | Ein <h5> zuweisen |

Vorläufig fertig! Das Layout wird noch einmal besprochen.
Bitte alles oberhalb und das hier löschen und nur das Bild, das Menü, den Link rechts vom Bild und die Bildbeschreibung stehen lassen. Dann alles, was unterhalb der Bildbeschreibung steht auch löschen Die folgenden Aufträge sind ja nur für die restlichen drei Seiten gedacht . Der Container #rahmen schrumpft bis unter das Foto hoch, weil der Text nur kurz und gefloatet ist. Diese Seite dann Speichern und und mit "ziel06c.html" und dem Auftrag i) weitermachen. Das bedeutet, nach dem Öffnen der Seite "ziel06c.html" alles bis zum i) außer der Navi zu löschen. Um das Layout kümmern wir uns zum Schluss. Die Seite "ziel06d.html" kann ruhig geöffnet bleiben. Am Tab sind die Seiten dank ihrer eigenen Titel gut zu unterscheiden.

i) Anpassung der Navi

Das ist der Beginn der Abschlussarbeiten an der Seite 3, "ziel06c.html", und alles außer dem Menü ganz oben, was sich jetzt noch hier befindet, wird gelöscht.

i1) Zuerst der Link "Fahren". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Fahren" linksklicken" | In der Statuszeile <a> linksklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

i2) Der Verweis bei "Fahren" auf #top ist falsch und wird auf den neuen Identifier "#rahmen" umgeleitet.

| "Fahren" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

i3 ) Dann wird der Link "Einpacken" mit der Webseite "ziel06d.html" verknüpft.

| "Einpacken" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "ziel06d.html" auswählen | 'Öffnen' | OK |

i4) Der Link "Abheben" wird mit der Webseite "ziel06b.html" verknüpft.

| "Abheben" doppelklicken | 'Link-Eigenschaften' | Die Seite "ziel06b.html" auswählen | 'Öffnen' | OK |

i5 ) Als letzter Link wird "Vorbereiten"  mit der Webseite "ziel06a.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "ziel06.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

Jetzt alles zwischen der Navigation und dem nächsten Bild löschen.

j) Die dritte Seite der HP abschließen

Den Link "Zurück zur Kurs-Startseite" mit der Maus rechts neben das Foto ziehen. Oder löschen, wenn er stört.

Die Bildbeschreibung hat schon ihren Container, da bleibt nichts zu tun. Womit diese Seite nach dem Löschen dieses Auftrags j) und allem anderen darunter außer Menü, Foto, Link und Bildbeschreibung als fertige Seite gesichert werden kann. Auch die Seite "ziel06c.html" kann ruhig geöffnet bleiben. Mit der Seite "ziel06b.html" und dem Auftrag m) dann weiter arbeiten.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen | Nach Anleitung alles löschen | [Strg]+[S] |

m) Anpassung der Navi

Das ist der Beginn der Abschlussarbeiten an der Seite 2, "ziel06b.html", und alles außer dem Menü ganz oben, was sich jetzt noch hier darüber befindet, wird gelöscht.

m1) Zuerst der Link "Abheben". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Abheben" linksklicken" | In der Statuszeile <a> linksklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

m2) Der Verweis bei "Abheben" auf #top ist falsch und wird auf den neuen Identifier "#rahmen" umgeleitet.

| "Abheben" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

m3 ) Dann wird der Link "Einpacken" mit der Webseite "ziel06d.html" verknüpft.

| "Einpacken" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "ziel06d.html" auswählen | 'Öffnen' | OK |

m4) Der Link "Fahren" wird mit der Webseite "ziel06c.html" verknüpft.

| "Fahren" doppelklicken | 'Link-Eigenschaften' | Die Seite "ziel06c.html" auswählen | 'Öffnen' | OK |

m5 ) Als letzter Link wird "Vorbereiten"  mit der Webseite "ziel06a.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "ziel06.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

Jetzt alles zwischen der Navigation und dem nächsten Bild löschen.

n) Die zweite Seite der HP abschließen

Den Link "Zurück zur Kurs-Startseite" mit der Maus rechts neben das Foto ziehen. Oder löschen, wenn er stört. Die Bildbeschreibung hat schon ihren Container, so dass diese Seite auch nach dem Löschen dieses Auftrags n) und allem anderen außer Menü, Foto, Link und Bildbeschreibung als fertige Seite gesichert werden kann. Auch die Seite "ziel06b.html" kann ruhig geöffnet bleiben. Mit der Seite "ziel06a.html" und dem Auftrag o) dann weiter arbeiten.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen | Nach Anleitung alles löschen | [Strg]+[S] |

o) Anpassung der Navi

Das ist der Beginn der Abschlussarbeiten an der Seite 1, "ziel06a.html", und alles außer dem Menü ganz oben, was sich jetzt noch hier darüber befindet, wird gelöscht.

o1) Zuerst der Link "Vorbereiten". Ihm wird per Kontextmenü die Klasse ".hier" zugewiesen.

| Link "Vorbereiten" linksklicken" | In der Statuszeile <a> linksklicken | Kontextmenü 'Klassen' | "hier" |  Irgendwo in die Normalansicht klicken |

o2) Der Verweis bei "Vorbereiten" auf #top ist falsch und wird auf den neuen Identifier "#rahmen" umgeleitet.

| "Vorbereiten" doppelklicken | Dialog 'Link-Eigenschaften' | "#rahmen" mit der Drop-down Liste auswählen | Öffnen | OK | Irgendwo in die Normalansicht klicken |

o3 ) Dann wird der Link "Einpacken" mit der Webseite "ziel06d.html" verknüpft.

| "Einpacken" doppelklicken, der Dialog 'Link-Eigenschaften' öffnet sich | Mit dem Durchsuchen-Symbol die Seite "ziel06d.html" auswählen | 'Öffnen' | OK |

o4) Der Link "Fahren" wird mit der Webseite "ziel06c.html" verknüpft.

| "Fahren" doppelklicken | 'Link-Eigenschaften' | Die Seite "ziel06c.html" auswählen | 'Öffnen' | OK |

o5 ) Als letzter Link wird "Abheben"  mit der Webseite "ziel06b.html" verknüpft.

| "Vorbereiten" doppelklicken | Die Seite "ziel06b.html" auswählen | 'Öffnen' | OK | [Strg]+[S] |

Jetzt alles zwischen der Navigation und dem letzten Bild löschen.

p) Die erste Seite der HP abschließen

Den Link "Zurück zur Kurs-Startseite" mit der Maus rechts neben das Foto ziehen. Oder löschen, wenn er stört. Im Beispiel als Ergebnis der Übung habe ich den Link unterhalb von etwas Text gesetzt. Mit dem Text wollte ich die Übung nicht belasten. Wird die Seite nachgebaut, umfließt der richtige Text das Bild, und das war ja in der Übung selbsterklärend zu sehen.
Die Bildbeschreibung hat schon ihren Container, so dass diese Seite auch nach dem Löschen dieses Auftrags p) und allem anderen außer Menü, Foto, Link und Bildbeschreibung fast fertig wäre, wenn da nicht der Container #rahmen viel zu klein wäre.

| "Zurück zur Kurs-Startseite" anklicken | In der Statuszeile das <a> anklicken, damit der komplette Link markiert wird | Den Link mit der Maus rechts neben das Bild ziehen | Nach Anleitung alles inklusive p) löschen | [Strg]+[S] |

q) General-Verbesserung des Layouts

Bei dieser Seite ist der Rahmen noch nicht zu klein, da ist noch Text übrig, der das Bild umfließt, aber bei den anderen Seiten ragt das Foto aus dem "#rahmen" heraus. Da es ein externes Stylesheet gibt, gibt es auch die gemeinsame Änderung für alle Seiten-Layouts. Da alle vier Seiten geöffnet sind, ist es zum Aha-Erlebnis dank externem Stylesheet nicht mehr weit. Eine neue Regel "div" mit dem einzigen Style aus dem Register 'Box', nämlich 'Aufhebung:' Links reicht aus. Die Aufhebung beendet das Floaten und das Element ordnet sich brav unten wieder an. Damit rahmt der Rahmen-Container auch unten die Bildbeschreibung ein.

|  CSS-Editor | Dialog 'Neue Style-Regel' erstellen | "div" eintragen | Schaltfläche 'Style-Regel erstellen | Register 'Box' | 'Aufhebung:' Links | OK |

Danke für die Geduld. Zum Vergleich gibt es http://www.elew.de/kurs1a/ziel06a.html.