Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3

Willkommen

Die drei im Rahmen mit weißem Hintergrund untergebrachten Container haben einen Hauch von Rosa als Hintergrundfarbe, wie body auch. Dafür gibt es keine Begrenzungen drumherum. Was in der Navi fast wie eine Schaltfläche aussieht, ist auch nur Hintergrundfarbe plus etwas Abstand zum Text in der allgemeinen Regel a für alle <a>-Tags. Der Flattersatz, der sich durch die unterschiedlichen Linktexte ergibt wird behoben werden. Bei der Gelegenheit erhalten die Links noch Schatteneffekte. Hierzu werden die Links im Menü zu Listenelementen ergänzt und mit CSS gestylt.
Als einzelne Webseite erhält auch diese Einheit kein externes Stylesheet. Würdest du mit dieser Seite als Vorlage eine Homepage bauen, wäre für dich das "Stylesheet exportieren und auf externes Stylesheet umstellen" sicher keine Hürde. Das steht ja jedesmal auf der Schaltfläche, wenn [F11] gedrückt wird.

Das Geschehen kann in der geteilten Ansicht verfolgt werden. Mir fällt da ein Vergleich ein. Laien können prima Autofahren, auch wenn ein Blick unter die Motorhaube oder das Chassis auf Verständnislosigkeit trifft. Heutige Autos machen diesen Blick auch überflüssig. Zu Beginn der Motorisierung wurden Autos aber nicht von Laien, sondern Chauffeuren gefahren, die ständig am Auto schrauben mussten und das konnten. Benzinautos waren 1900 so unzuverlässig, dass Taxifahrer damals dem heute wiederkehrenden Elektroauto den Vorzug gaben, damit sie überhaupt zum Geldverdienen kamen. KompoZer ist das Benzinauto von 1900 und braucht den Blick unter die Motorhaube, was hier einen Blick in den unteren Teil mit dem Quelltext bedeutet. Wer also sich mit HTML nicht beschäftigen will, kann KompoZer guten Gewissens fahren, nur wird dann oft der Ruf nach dem Reparateur erforderlich. Im Quelltext schrauben holt aber mit Sicherheit mehr aus der Kiste.

Aufträge:

a) Sichern, bevor es losgeht

Diese Einheit wird mit dem Titel "Seite 9" und deinem Namen als Autor unter dem Dateinamen "seite09.html" für alle folgenden Veränderungen gespeichert. Löschen findet immer in diesem Container #inhalt statt.

| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog 'Seiteneigenschaften', 'Titel:' Seite 9, 'Autor:' Dein Name | OK | Menü 'Datei' | 'Speichern unter' "seite09.html" | Den Auftrag und weiter oben bis zum Willkommen alles löschen |

b) Textlinks werden zu Listenelementen

Das Menü ist eine Reihe von durch Zeilenumbrüche <br> getrennten Textlinks. Automatisch liefern die Absätze <p>, <h1> bis <h6> und <div> einen Zeilenvorschub, so dass bei deren Verwendung das <br> entfallen kann. Umgekehrt nimmt KompoZer ein <br> immer zum Anlass, an der Stelle ein schließendes Tag und ein öffnendes Tag für den gewünschten Absatz zu codieren. Werden 5 Zeilen mit <br>s markiert und in einen Container gepackt, ergibt das nicht einen sondern fünf Container.

Die Listenelemente bilden ebenso einen Absatz. Eine Liste beginnt mit dem Tag <ul> (unsorted list = unsortierte Liste), gefolgt von den in den Pärchen <li> und </li> eingeschlossenen Listenelementen und dem schließenden Tag </ul> am Ende. KompoZer soll das bitte sehr für dich Codieren.

Wird mit einem Klick in der Statuszeile auf <div class="navi"> der ganze Container markiert, lassen sich mit dem Schaltsymbol 'Unsortierte Liste anwenden oder entfernen', in der Format-Symbolleiste 1 zu finden, alle Textlinks in eine unsortierte Liste einpacken. Jedes <br> führt dazu, dass die Textlinks einzeln zu Listenelementen werden.  Kann zur Beobachtung einfach mit [Strg]+[z] im Quelltext aufgehoben und mit [Strg]+[y} wiederholt werden. (Mac-User nehmen Apfel+z und Shift+Apfel+z).

Die öffnenden und schließenden Tags <li> und </li> sind wie gewünscht richtig verteilt. In der Statuszeile erscheinen links vom Ankertag das neue <li> und links davon <ul>.

| Klicke einen Link an | Linksklicke in der Statuszeile auf <div class="navi"> | Klicke in der Format-Symbolleiste 1 oben auf die Schaltfläche 'Unsortierte Liste anwenden oder entfernen' | Klicke einen Link an | Klicke in der Statuszeile auf <ul> und hole damit die ganze Liste in die Quelltextansicht |

c) In der Quelltext-Teilansicht wird geputzt

Wähle die geteilte Ansicht mit einem Drittel der Höhe für den Quelltext. Ein Linksklick auf <div class="navi"> in der Statuszeile holt den Quelltext des Menüs ins Bild. Zuerst wird der Quelltext mit Hilfe von [Enter], zwei vorangestellten Leerzeichen je Listenelement und einigen Löschaktionen aufgeräumt, die Listenelemente, die nur <br> enthalten werden entfernt, bis der Quelltext so aussieht:
<div class="navi">
<ul>
  <li><a class="hier" href="#rahmen">Einheit 9</a></li>
  <li><a href="http://www.dradio.de/dlf/">Deutschlandfunk</a></li>
  <li><a href="http://www.tagesschau.de/">Tagesschau</a></li>
  <li><a href="http://de.wikipedia.org/wiki/Hauptseite">Wikipedia</a></li>
  <li><a href="index.html">Zurück zur<br>Startseite</a></li>
</ul>
<div>

Durch die geteilte Ansicht lässt sich dieser Auftrag und der Quelltext prima vergleichen. Kaum aber, dass in der Vorschauansicht irgendwohin anders geklickt oder gespeichert wird, und dann über den <ul>-Tag in der Statuszeile dessen Quelltext ins Bild geholt wird, erscheint alles in einer Zeile. Jedenfalls in der Beta 0.8b1 am 27.11.09, in der Beta 0.8b2 am 11.2.10 und in der Beta 0.8b3 am 15.3.10.

Aktionszeile entfällt, hier wird KompoZer nur vorgeführt

d) Im Quelltext, Vollansicht, wird geputzt

Wechsel in den Quelltext und repariere dort die Liste, indem du die beiden Leerzeichen vor jedem Listenelement entfernst. Speicher das dann und du wirst automatisch wieder hier landen.

Nun zeigt auch die geteilte Ansicht im Quelltext die von Hand gestaltete Form der unsortierten Liste. Dies ist eine Errungenschaft der Beta 0.8b2, denn wer in den Foren stöbert, wird seit 2005 die Klage lesen, dass der Quelltext durch Nvu und ab 2007 von KompoZer zerschossen wird. Wer von den Klägern wird aber jemals Geld an Linspire und ab 2007 an Kaze überwiesen haben?
Dass der Quelltext in der geteilten Ansicht die Syntaxhervorhebung hat und nicht in der Vollansicht, zeigt doch, dass KompoZer weiterentwickelt wird. Kostenlos, auch für die Meckerer. In der Beta 0.8a4 vorher war es umgekehrt und davor gab es noch nie eine geteilte Ansicht. KompoZer ist gut und wird immer besser.

Aktionszeile entfällt, hier wird KompoZer nur vorgeführt

e) Die Punkte vor der Liste werden entfernt

Listen haben im CSS-Editor ein eigenes Register. Die Punkte vor den Elementen gehören zum Listentyp und können dort sogar durch Grafiken ersetzt werden. Bevor es aber soweit ist, wird eine Regel für die Listenelemente eingeführt. Da auf dieser Kursseite keine Vielfalt an Listen besteht, genügt die allgemeine Regel "li". Wird für diese der Listentyp auf "kein" gesetzt, wirkt sich das sofort auf die Normalansicht aus. Die Punkte verschwinden. Wenn es noch nicht aufgefallen ist, die Liste braucht links Platz und ragt rechts aus dem Container heraus. Das wird ihr mit einem negativen Außenabstand links im Register Box abgewöhnt. Vorschlag: -2.5em. Der CSS-Editor erlaubt, negative Werte mit der Abwärtspfeiltaste einzustellen.

| CSS-Editor |  Neue Regel erstellen | Der Name der Regel ist "li" | 'Style-Regel' erstellen' klicken | Register 'Listen' | 'Listentyp (Stil):' per Auswahl auf 'kein' stellen | Register 'Box', 'Außenabstand: Links:' -2.5em | OK |

f) Styles werden von "a" auf "li" übertragen und "li" komplettiert

f1) Bisher gab es keine Listenelemente zum Formatieren. Da diese nun als Schaltflächen dienen, wird die allgemeine Regel "a" von den ansonsten doppelten Styles bereinigt. Die Regel "a" behält nur noch
font-size: 0.9em;
text-decoration: none;
color: #444444;

Das kann im Register 'Allgemein' stehen bleiben, wenn dort alles Überflüssige gelöscht wird.

| CSS-Editor | Regel a in der Liste links anklicken | Im Register 'Allgemein' alles löschen bis auf font-size: 0.9em; text-decoration: none; und color: #444444; | kein OK |

f2 ) Ohne den CSS-Editor zu schließen, kann gleich die Regel "li" ergänzt werden mit der bisherigen Hintergrundfarbe #aaaaaa. In dem Moment sieht das Menü wie ein Kasten aus. Deshalb erhalten die Listenelemente unten einen Außenabstand von 0.3em und lösen sich so voneinander. Der Flattersatz ist auch weg und unten sitzt der zweizeilige Text in einer Fläche.

Damit die Texte in der Fläche nicht gequetscht wirken, kommen noch die Innenabstände oben unt unten von 0.1em und rechts und links von 0.3em dazu. Als Schatten werden die Begrenzungen unten und rechts benutzt. Dazu muss das Häkchen im Register 'Begrenzungen' für alle vier Seiten entfernt werden. Rechts und unten kann dann "solid", "0.15em" und die Farbe #cc0000 erhalten.

| Regel li in der Liste links anklicken | Register 'Hintergrund', 'Farbe:' #aaa | Register 'Box', 'Außenabstand: Unten:' 0.3em | Innenabstände oben und unten auf 0.1em und links und rechts auf 0.3em setzen | Register 'Begrenzungen', das Häkchen "Alle vier Ränder gleich" oben entfernen | Rechts und unten erhalten 'Stil:' solid, 'Breite:' 0.15em und 'Farbe:'  #C00 | OK |

g) Eine Klasse wird von <a> auf <li> übertragen

Der oberste Link hat die Spezialfärbung um zu zeigen, dies ist die Schaltfläche, die sonst an dieser Stelle zu dieser Seite führt, nun aber auf selbiger Seite nur als Platzhalter dient. Damit die Farbe auf das Listenelement als Ganzes übertragen wird, wird die Klasse bei <a> entfernt und dem Listenelement zugewiesen. Die Regel heißt ja nicht "a.hier", dann könnte sie nicht dem <li> zugewiesen werden, sondern nur ".hier". Der Linktext kann bei dieser Gelegenheit gleich in "Seite 9" geändert werden.

| Inder Navi "Einheit 9" durch "Seite 9" ersetzen | In der Statuszeile mit Rechtsklick auf den Ankertag und der Häkchenentfernung die Klassenzuweisung löschen | Auf "Seite 9" klicken | In der Statuszeile <li> linksklicken | Achtung hier jetzt eine Alternative zum Kontextmenü: Mit der Auswahlliste 'Zuweisen einer Klasse zur Auswahl' oben unterhalb des Schaltsymbols 'Vorschau' mit der Lupe, die Klasse 'hier' dem <li>-Tag zuordnen | Irgendwo in den Text-Container klicken | Auftrag löschen | Speichern |

h) Verbesserung von hover

Wird der Mauszeiger in das Menü bewegt, tritt der Hover-Effekt nur bei Berührung des Textes auf. Der Link enthält ja nur den Text. Mit dem Style "display: block;", der im Register 'Anzeige:' eingestellt werden kann , wird das Ankerelement bis zum Ende des Absatzes gestreckt. Mit CSS lässt sich mit "display:block;" ein Element, dass keinen eigenen Absatz erzeugt, genau dazu veranlassen. (Umgekehrt kann auch ein <h,,>-Tag oder ein <div>-Tag innerhalb einer Zeile mit CSS damit so verwendet werden, dass kein Abstand erzeugt wird. Der Style heißt dann "display: inline;". <h1>, <h2> oder <div> sind Beispiele von Blockelemente und erzeugen einen eigenen Absatz. <a>, <span> oder <img> sind Beispiele von Inline-Elemente und erzeugen keine Absätze.)
Danach funktioniert der Hover-Effekt auf der gesamten farbigen Fläche.

| CSS-Editor | Regel a auswählen | Register 'Box' | 'Anzeige:' block | OK |

i) Abschluss

Die Überschrift im "oben-Container wird verkürzt auf "Das Menü etwas in Form gebracht" und mit <h1> als Absatzformat versehen. Den Text in diesem Container bis auf "Lorem.." löschen. Zum Vergleich gibt es http://www.elew.de/kurs1a/seite09.html.

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis atho vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.