Kurs 1a, Webseitengestaltung mit KompoZer 0.8b3

Kurs-Einheit 5, Interne Verweise, CSS-Klassen

Willkommen:

Nachdem Absätze auch im Kurs angewendet werden können, (Kursprinzip seit Beginn 2005: Es wird nur verwendet, was eingeführt ist) werden Absätze in dieser Einheit mit Sprungmarken versehen und intern verlinkt. Als Anwendung hierzu dient eine Liste mit Fragen zu KompoZer. In der Aufgabe sind es drei im August 2009 bei der Arbeit mit der 0.8a4 ausgedachte Fragen, die vierte ist bei der Arbeit mit der 0.8b2 entstanden und die fünfte Frage kam mit der 0.8b3 im März 2010 dazu. Das in der 4. Einheit eingeführte interne Stylesheet wird immer, wenn neue Inlinestyles auftreten, mit den neuen weiter ausgebaut. Dabei entstehen nicht nur neue allgemeine Regeln, sondern auch eine CSS-Klasse. Das ist eine Regel, die mehrmals eingesetzt werden kann, aber nur bei ausgewählten Elementen wirkt .

Die Kurs-Einheit 5 kann nur erarbeitet werden, wenn sie mit KompoZer 08b3 geladen wird. Wenn noch nicht geschehen, Kompozer 0.8b3 also starten und die Einheit 5 von der Webadresse http://www.elew.de/kurs1a/einheit05.html laden. Falls nicht alle Symbolleisten zu sehen sind, per Menü 'Ansicht - Anzeigen/verstecken' alle auswählen. Während der ganzen Aufgabe wird mit der geteilten Ansicht gearbeitet, ein Fünftel der Fensterhöhe für den Quelltext soll aber reichen.

Da die Seite kein besonderes Layout hat, soll ab jetzt die 'HTML-Tagsansicht' genommen werden. Unten rechts in der Auswahlliste 'HTML-Tags' einschalten. Die gelben Marker machen die Anfangstags deutlich und zerstören ja in dieser Kurseinheit kein Design, da es keines gibt.
Wird nun wie immer das Erledigte gelöscht, ist dabei die Ansicht 'HTML-Tags' ganz hilfreich. Die gelben Marker der Tags werden einfach linksgeklickt und dann das Element komplett mit [Entf] gelöscht.

Zur Übung, bevor es mit den Aufträgen los geht, das gleich probieren und die hier drüber befindlichen gelben Marker H5, H5, H5, H4, H2 und H1 anklicken und entfernen. Dabei ist aber das DIV tabu, da würden ja alle Aufträge sofort verschwinden. Falls aber das passiert, KompoZer holt das Gelöschte zurück per Schaltsymbol "Rückgängig", wie bei vielen anderen Programmen auch üblich. Die Zeile "Auträge" rückt dabei aber noch nicht nach ganz oben, da lasen sich auch noch ein paar Zeilenumbrüche mit [Backspace] löschen und dann geht es los:

Aufträge:

a) Seite sichern

Diese Seite auf der Festplatte speichern, z.B. auf dem USB-Stick unter "F:\kurs1a\seite05.html". Der Titel der Seite ist "Seite 5". Der Autor bist du.

Bei Erfolg steht oben im Tab der Seite der neue Titel "Seite 5", wo voher noch "KompoZer Kurs1a Einheit 5" stand.

| Menü 'Format' | 'Seitentitel und - einstellungen' | Dialog 'Seiteneigenschaften' | Titel: "Seite 5" | Autor: dein Name | OK |
Menü 'Datei' | 'Speichern unter...' | 'Name:' "seite05.html" | Ort auf der Festplatte aufsuchen, Schaltfläche 'Speichern' | Alle Absätze hier drüber und diesen als letzten per gelbem Marker und [Entf] löschen. Evtl. Zeilenumbrüche oberhalb von Auftrag b) auch löschen

b) Die Liste schwebt nach oben rechts

Die künftige Seite 5 befindet sich in einem <div>-Container verpackt unterhalb des hiesigen Containers mit den Aufträgen der Kurseinheit. Dieser hiesige Container wird im Folgenden immer "Text" genannt. Der Container mit der künftigen Seite wird als "Liste" angesprochen. Damit die "Liste" nach rechts oben ins Blickfeld schweben kann, erhält der "Text" eine Breite von 46% und das "float: left" im Register 'Box' mittels 'Puffer:' Links.

Bei Erfolg schwebt ein weißer Text, die Liste, auf blauem Grund an dem 46%breiten "Text"-Container vorbei nach oben. Nach wie vor erledigte Aufgaben mit den gelben Markern auswählen und löschen.

| Irgendwo in den Auftrag b) linksklicken | In der Statuszeile das Kontextmenü von <div> öffnen | 'Inline-Styles' | Register 'Box' | 'Breite:' 46% | 'Puffer:' Links | OK | Seite speichern

c) Der "Text"-Container bekommt Klasse

Würden die Inline-Styles des "Text"-Containers aus dem <div>-Tag extrahiert und zur allgemeinen Regel für alle <div>s gekürt werden, bekäme das zweite <div> mit der "Liste" auf der rechten Seite zwar den hellgrauen Untergrund durch diese Regel, die weiße Schrift der "Liste" würde jedoch bleiben und wäre wohl kaum zu sehen. Denn die dunkelblaue Schriftfarbe stünde in der allgemeinen Regel. Sie würde jedoch durch den weiter existierenden Inlinestyle der "Liste" ausgehebelt. Ein Inlinestyle hat das letzte Wort.

Anders als mit einer allgemeinen Regel für alle div-Elemente kann mit einer Style-Regel einer Klasse gezielt nur das <div>-Element formatiert werden, für das die Regel gedacht ist. Im Kontextmenü des "Text"-Containers wird 'Inline-Styles' gewählt und auf 'Extrahieren und allgemeinen Style anlegen' geklickt. Der Radiobutton für 'alle Elemente' gilt weiterhin. Zusätzlich zum Häkchen für alle Elemente 'des gleichen Elemententyps' wird mit einem Häkchen bei 'der Klasse' nun noch eine Klasse eingerichtet, zum Beispiel "text".

Das Wort "text" könnte auch anders lauten. Die Style-Regel der Klasse "text" wird dann auf alle <div>s angewendet, denen diese Klasse zugewiesen wird. KompoZer setzt eine solche Zuweisung bei demjenigen Container automatisch und sofort ein, dessen Inlinestyles gerade für die Klasse extrahiert werden. Im Quelltext steht dann statt <div style="...."> ein <div class="text">. Im Header steht im internen Stylesheet die neue Regel div.text {....} und in der Statuszeile wird aus dem Tag <div> dann ein <div class="text">, wie im Quelltext auch. Von nun an kann die Style-Regel im CSS-Editor geändert werden.
Zusätzlich und parallel können aber weiterhin auch noch Inlinestyles für das jeweilige Element eingesetzt werden.

Bei Erfolg steht im internen Stylesheet die neue Regel "div.text" und in der Statuszeile wird das auch für das div angezeigt.

| In den "Text"-Container linksklicken | Kontextmenü für <div> | 'Inline-Styles' | 'Extrahieren und allgemeinen Style anlegen' | Im Dialog den Radiobutton 'alle Elemente' setzen | Zwei Häkchen bei 'der Klasse: und 'des gleichen Elemententyps' setzen | In die Eingabezeile "text" eintragen | OK |

d) Das Sprungziel "Im_Menue" wird eingerichtet.

Der Auftrag d) und die "Liste" stehen auf fast gleicher Höhe im Fenster. Die Fragen über den Antworten in der Liste werden Anker erhalten, die vom Besucher angesteuert werden können. Dazu werden alle Fragen oben auf der Webseite gelistet.

In der Bearbeitungssymbolleiste ist das Bearbeitungssymbol mit dem Anker zu sehen. Ein Anker ist immer das Ziel eines Verweises und der zugehörige Tag ist der Anker-Tag <a>.

Wird in der "Liste" oben rechts im Zeilenanfang "Im Menue" markiert und auf das Bearbeitungssymbol "Ziel", - das mit dem Anker -, geklickt, richtet KompoZer beim OK den Anker "Im_Menue" am Anfang des Absatzes ein.

Bei Erfolg steht (in der 'HTML-Tags'-Ansicht) ein gelbes Ankersymbol vor "Im Menue. Wird auf das neue gelbe Ankersymbol linksgeklickt erscheint in der Quelltext-Teilansicht unten der Code des neuen Ankers <a name="Im_Menue"></a>.

| In der "Liste" oben die beiden Wörter "Im Menue" markieren | Schaltfläche 'Ziel' | OK |

e) Ein Link wird auf den Anker "Im_Menue" gesetzt

Die dicke H1-Überschrift und die erste Frage unter diesem Auftrag werden später die obersten Zeilen der fertigen Seite am Ende der Kurs-Einheit sein. Ein Besucher wird die Frage "Im Menue Format ist die Titeleingabe...." anklicken können und damit zum passenden Frage-Antwort-Block, dem ersten in der "Liste" verzweigen. Hierzu wird der Text der ganzen Frage "Im Menue Format ist die Titeleingabe...." zu einem Link. Da der Link nicht aus der Seite herausführt, ist das ein interner Link oder interner Verweis.

Wird die ganze Zeile markiert, (Einfügemarke irgendwo in die Frage setzen und dann Linksklick auf <h3> in der Statuszeile), kann per Klick auf das Bearbeitungssymbol 'Link' in der Bearbeitungssymbolleiste der Dialog 'Link-Eigenschaften' geöffnet werden.

Unter 'Link-Adresse' findet sich die Eingabezeile für den Verweis. Dort lässt sich eine Auswahl aufblättern und der Anker "#Im_Menue" muss erst noch gesucht werden, soviele mögliche Anker schlägt KompoZer von sich aus vor. Wird auf "Im_Menue" geklickt, fehlt nur noch ein OK und der interne Verweis ist eingefügt.

Beim Löschen der erledigten Aufträge ist die H1-Überschrift und die erste Frage tabu, denn diese bilden das obere Ende, den Anfang der fertigen Webseite. Darunter die Aktionszeile kommt aber weg und f) rutscht hoch.

Bei Erfolg zeigt sich wegen der "HTML-Tags"-Ansicht vor der Frage der gelbe Marker mit dem 'A' und die Frage ist ein unterstrichener Textlink geworden.

Fragen und Antworten zu KompoZer 0.8b

Im Menue Format ist die Titeleingabe abgeblendet und damit unmöglich. Was kann ich tun?

| In die Frage hier drüber klicken | In der Statuszeile den Tag <h3> linksklicken | Das Eingabesymbol 'Link' klicken | Im Dialog 'Link-Eigenschaften' die Eingabezeile für die 'Link-Adresse' aufblättern | Den Anker "Im_Menue" linksklicken | OK |

f) Die beiden Anker "Ist_der" und "Wie_kann" werden eingerichtet

Wie im Dialog 'Link-Eigenschaften' beim Aufblättern der Eingabezeile mit den vielen Absatzanfängen für die Link-Adresse gesehen, könnten auch interne Links gesetzt werden, ohne zuvor den Anker als Zielmarke einzubauen. KompoZer schlägt die Absatzanfänge für einen möglichen internen Verweis vor und trägt dann sofort den fehlenden Anker ein. Die kleine Mühe des Zielmarkierens nimmt KompoZer einem somit ab.

Aber die selbst gewählten Namen können sinnfälliger und zumindest kürzer sein. Für die nächsten beiden Anker werden deshalb nur die ersten zwei Wörter der (weißen) Frage (auf dem dunkelblauen Grund) markiert und diese als Namen für die Anker verwendet. Die Anker heißen "Ist_der" und "Wie_kann".

Bei Erfolg sind zwei neue Anker-Marken vor den Fragen zu sehen. Wird die Einfügemarke in den anderen <h4>-Absatz geklickt, wird der Quelltext unten in der geteilten Ansicht auch aufgefrischt und zeigt dann auch den Zielmarken-Code im <h4>-Absatz.

| In der "Liste" den Beginn der zweiten Frage "Ist der" markieren | Bearbeitungssymbol 'Ziel' | OK | In der "Liste" den Beginn der dritten Frage "Wie kann" markieren | Eingabesymbol 'Ziel' | OK |

g) Die Anker "Antwort4" und "fuenf" werden eingerichtet

Für die kommenden beiden Anker "Antwort4" und "fuenf" bei den letzten beiden Antworten wird nichts markiert. Stattdessen wird die Einfügemarke direkt vor "Ständig .." und "In der Q..." gesetzt. Da muss KompoZer erst fragen, wie denn der Anker benannt werden soll, wenn auf das Schaltsymbol mit dem Anker geklickt wird. Die vierte Sprungmarke heißt "Antwort4". Die fünfte heißt "fuenf" mit ue statt ü, so wie bei Menue auf der fertigen Webseite, um im Code nicht über ein Ü zu stolpern.

Bei Erfolg sind auch die Zielmarken im Quelltext hinter dem <h4> zu finden.

| Einfügemarke vor "Ständig habe ich.." in der "Liste" platzieren | Schaltfläche 'Ziel' | "Antwort4" eintragen | OK | Einfügemarke vor "In der Quelltext..." in der "Liste" platzieren | Schaltfläche 'Ziel' | "fuenf" eintragen | OK |

h) Weitere interne Verweise werden verlinkt

Die vier Fragen hier drunter werden den Kopf der fertigen Seite ergänzen, wenn h) als erledigt gelöscht sein wird. Darunter wird dann auf der fertigen Webseite die "Liste" folgen mit den fünf durch Anker versehenen Antwortblöcken zum Hineinspringen.
Das Verlinken geht wie zuvor: Die ganze Zeile markieren, am besten durch Klick auf den zugehörigen Tag in der Statuszeile, (oder heute in der HTML-Tagsansicht auf den gelben Marker), dann ein Klick auf das Eingabesymbol 'Link' und Auswahl des passenden Ankers als Sprungziel. Die Anker lauten wie die zwei Wörter des Zeilenanfangs oder "Antwort4" und "fuenf", sind also nicht zu verwechseln.

Bei Erfolg nach dem Erledigen von h) und dessen Löschen stehen die Überschrift und die vier Fragen als interne Textlinks zusammen und oben. (Ansonsten mit [Strg]+[z] zurückgehen und neu versuchen.)

Ist der Quelltext in der geteilten Ansicht nur zum Ansehen, oder kann ich dort auch editieren?

Wie kann ich in der geteilten Ansicht im Header meine Metatags editieren?

Ständig habe ich meine Arbeit gesichert, aber am nächsten Tag ist alles weg. Was soll ich machen?

In der Quelltext-Teilansicht lösche ich die leeren Zeilen und danach ist die Webseite kaputt. Wie kommt das?

| In die Frage hier drüber klicken | In der Statuszeile den Tag <h3> oder gelbes H3 linksklicken | Das Bearbeitungssymbol 'Link' klicken | Im Dialog 'Link-Eigenschaften' die Eingabezeile für die 'Link-Adresse' aufblättern | Den passenden Anker auswählen - Ist der, Wie kann, Antwort4, fuenf -  | OK | Nochmal von vorn, dreimal |

i) Eine Zielmarke "top" ersetzt das Scrollen

Entstehen für das Web lange Seiten wie ansatzweise auch hier, wird dem Besucher ein interner Verweis, ein Link nach ganz oben, geboten, damit der Besucher nicht die Bildlaufleiste bemühen muss, wenn er zurück nach oben will.

Der Verweis hinter jeder Antwort unten, der künftige Textlink ganz nach oben, heißt "Nach oben". Das Ziel soll "top" heißen und kommt ganz oben gleich hinter das BODY. Die Einfügemarke dort hinzusetzen gelingt nicht mal in der HTML_Tagsansicht. Deshalb hier zum Kennenlernen das Einfügen ohne HTML-Ansicht:

Den HTML-Code der Zielmarke "top" von hier rechts in die Zwischenablage nehmen, "<a name="top"></a>", in der Statuszeile auf <body> klicken und den Anker-Code aus der Zwischenablage in der Quelltextansicht vor dem <div class="text"> einfügen. Damit sitzt die Zielmarke so hoch auf der Webseite, wie es nur geht. Die passenden Verweise/Textlinks zum Ansteuern kommen noch in späteren Aufträgen.

Bei Erfolg sitzt der gelbe Marker mit dem Anker hinter dem Bodymarker auf Dunkelblau vor dem div.

| Den Link "<a name="top"></a>" in die Zwischenablage kopieren | In der Statuszeile das <body> anklicken | Den Link in der Quelltext-Teilansicht unten vor <div class="text"> einfügen' | Den Auftrag i) löschen, die Überschrift und die 5 Fragen aber immer oben für das Endergebnis stehen lassen

j) Eine allgemeine Regel für <a>

Alle Links sollen das gleiche Format erhalten. Das ist ein Fall für eine allgemeine Regel "a". Ein internes Stylesheet gibt es schon für alle <h,,>-Überschriften/Absätze und diesen Textcontainer.
Da sind Inlinestyles ab jetzt eher die individuelle Ausnahme und der CSS-Editor das Standardinstrument für das Formatieren.

Wird der CSS-Editor gestartet [F11], dann öffnet ein Linksklick auf die Palette links oben den Dialog 'Neue Style-Regel'. Der oberste Radiobutton verzweigt zu den allgemeinen Regeln und ist schon gesetzt. In die Eingabezeile komt "a". Dass das "a" nicht in der Auswahl zum Aufblättern steht, deutet an, dass es sehr ungewöhnlich ist, alle Links einheitlich zu formatieren. Dennoch bringt jetzt ein Klick auf die Schaltfläche 'Style-Regel erstellen' dich weiter. Und das sind die Vorschläge:
border: 1px solid #000033;
color: #000033;
font-size: 0.8em;
font-weight: normal;
text-decoration: none;
padding-right: 0.3em;
padding-left: 0.3em;
Jeder Link erhält einen Rahmen in der Farbe des Hintergrundes. Die bei Links übliche Unterstreichung wird mit "text-decoration: none" im Register 'Text' bei 'Textattribute: keine' mit einem Häkchen abgeschaltet. Die anderen Styles brauchen sicher keine Erklärung mehr. Ansonsten, es werden die Register 'Text', 'Begrenzungen' und 'Box' gebraucht.

Bei Erfolg erscheinen die Links mit Schrift und Rahmen in der Textfarbe.

| CSS Editor mit [F11] öffnen | Dialog für das Erstellen einer neuen Regel mit Linksklick auf die Palette oben links öffnen | "a" in der Eingabezeile eintragen | Schaltfläche 'Neue Style-Regel erstellen' | Register 'Text','Schriftgöße:' 0.8em, 'Farbe:' #003, 'Schriftschnitt:' Normal, 'Textattribute:' Häkchen bei 'keine' | Register 'Begrenzungen', Häkchen für alle vier Seiten, 'Stil: Oben:' solid, 'Breite:' 1px, 'Farbe:' #003 | Register 'Box', Innenabstände links und rechts auf "0.3em" einstellen | OK |

k) Inlinestyles werden gelöscht

<body> hat die dunkelblaue Hintergrundfarbe, die erlaubt, dass die weiße Schrift der "Liste" sichtbar wird. Der zugehörige Inlinestyle wird im Dialog im Register 'Allgemein' gelöscht.

Bei Erfolg wird die "Liste unsichtbar.

| Kontextmenü für <body> | 'Inline-Styles' | "background-color: #000033;" löschen | OK |

Damit die "Liste" wieder zu sehen ist wird noch ein Inlinestyle gelöscht, die weiße Schrift der "Liste". Das geht genau so einfach. Die "Liste ist immer noch vorhanden, wie die Ankermarker zeigen. Da kann hinein geklickt und unten in der Statuszeile das <div> rechtsgeklickt werden. Im Register 'Allgemein' das"color: white;" entfernen.

Bei Erfolg erscheint schwarz auf weiß die "Liste".

| In die unsichtbare "Liste" rechts oben klicken |Kontextmenü für <div> | 'Inline-Styles' | "color: white;" löschen | OK |

l) Der "Liste" wird die Klasse .text zugewiesen

In beiden Spalten gelten die gleichen allgemeinen Regeln für <h1> bis <h6>. Aber die Schriftart ist für den rechten Container unbestimmt. Bei mir ist die Einstellung der Schriftart im Menü 'Extras', Register 'Schriftarten' seit der Installation von KompoZer unberührt das Proportional mit 16 Pixeln und Times New Roman. Hättest du deine Schriftart für KompoZer im Menü 'Extras', Untermenü 'Einstellungen, Dialog 'Einstellungen', Register 'Schriftarten' bei Proportional auf Sans Serif gestellt, würde dir nicht auffallen, dass da ein Unterschied besteht. Eine mit KompoZer erstellte Seite kann daher mal so oder so im KompoZer aussehen, auf jeden Fall ist dann aber das fertige Produkt beim Besucher im Design von dessen Browser-Standardeinstellungen abhängig. Das soll vermieden werden, und die "Liste" wird mit der Klasse "text" formatiert. Dazu den <div>-Tag der Liste in der Statuszeile rechtsklicken und im Kontextmenü 'Klassen' nach rechts rutschen und 'text' zuweisen.

Bei Erfolg bekommt auch "Text" richtig Klasse.

| In den <div>-Tag der Liste in der .... steht alles hier drüber

m) Layout

Entstanden ist ein zweispaltiges Layout, auf dem du aufbauen kannst, wenn bei der Regel div.text im Register 'Box' noch nachgebessert wird. Wird die Breite in der Regel div.text von 46% auf 65% erhöht, nutzt das Floaten nichts, aus Platzmangel rutscht der rechte Container nach unten. Mal Probieren.

Hier geht es einspaltig weiter und das Floaten wird entfernt. Ist das Floaten weg, lassen sich die Außenabstände links und rechts auf "auto" setzen. Dann entsteht das "Handtuchlayout". Bei allen Fensterbreiten rückt die Webseite in die Mitte. Allerdings passt da eine feste Breite besser dazu, z.B. 700px. Das soll die endgültige Breite werden.

Bei Erfolg kann nimmt das Handtuch bei verschiedenen Browserbreiten immer die Mitte ein.

| CSS-Editor | Regel 'div.text' | Register 'Box' | 'Breite:' "700px" | 'Puffer:' "nicht angegeben" | Außenabstände rechts und links mit der Auswahlliste auf "auto" festlegen | OK |

n) Die beiden Container werden vereinigt

Zwischen den beiden Containern erscheint weiter unten eine unnötige doppelte Linie aus beiden Rahmen. Eine Möglichkeit, die zu entfernen, ist die Trennung von zwei Container aufzuheben. Der obere hört mit </div> auf und daran schließt sich der untere mit dem öffenden Tag <div class="text"> an. Wer das in der unteren Quelltext-Teilansicht finden kann, kann es dort löschen und dann ist die Trennung aufgehoben. Wer will, kann aber auch </div><div class="text"> in der Quelltext-Vollansicht mit der Suchfunktion [Strg]+[F] zwischen den Containern finden und das dann dort löschen, bzw. mit gar nichts "ersetzen". [Strg]+[S] speichert dann die Seite und bringt einen zu den HTML-Tags zurück, denn in der HTML-Tagsansicht läuft ja diese Kurs-Einheit seit Beginn.

Bei Erfolg verschmelzen die beiden Container zu einem.

| Das Fünftel Bildhöhe für die Suche im Quelltext unten mal verschwenderisch vergrößern | Die Trennlinie zwischen den Ansichten oben ins Bild rücken | In der Statuszeile <body> für den gesamten Quelltext in der Teilansicht wählen | In der Quelltext-Teilansicht bis zu </div><div class="text"> scrollen und </div><div class="text"> entfernen | In das obere Fenster klicken und nach oben scrollend die Trennline vermissen | Die Quelltext-Ansicht wieder schrumpfen |

o1) Das Bearbeitungssymbol "Horizontale Linie"

Die Trennline, die nun weg ist, stiftet den Layouter zu einer Idee an. In der Bearbeitungssymbolleiste gibt es 'Horizontale Linie".

Das Symbol mit dem waagerechten Strich sieht ziemlich blass aus. Wenn es nicht zu finden ist, dann in die Bearbeitungssymbolleiste rechtsklicken und den Text 'Symbolleiste anpassen' wählen. Ein Dialog mit allen verfügbaren Symbolen erscheint. Einfach alle Symbole in die Leiste schieben und in der Auswahlliste im Dialog noch die Variante 'Symbole und Text' wünschen. Wird verlangt, den Standard wieder herzustellen, verschwindet das Bearbeitungssymbol 'Horizontale Linie', weshalb dieser Einschub hier für den Fall der Fälle notwendig ist. Bei der Gelegenheit, für den Auftrag q) weiter unten können die Symbole 'Kopieren' und 'Einfügen' gut gebraucht werden.

Da, wo die Einfügemarke platziert wird, fügt KompoZer, wenn auf das Bearbeitungssymbol 'Horizontale Linie' geklickt wird, eine solche ein. In der 'HTML-Tags'-Ansicht fügt Kompozer auch die gelbe Markierung für den Anfangstag ein. Dadurch wird aus der Linie ein Kasten. Deshalb ist hier die Normal-Ansicht besser. Probieren und Anklicken, damit in der Quelltext-Anicht der Code von <hr> erscheint. Das Probieren dann mit [Strg]-[Z] vergessen machen.

Siehe da, KompoZer gibt der horizontalen Linie Standard-Inlinestyles mit. Die zu extrahieren bringt wenig, weil mit jedem Klick auf das Bearbeitungssymbol wieder eine horizontale Linie mit KompoZer-Inlinestyles entsteht. Im CSS-Editor im Register 'Box' wird deshalb eine allgemeine Regel "hr" erstellt, die im Register 'Hintergrund' nur die Farbe #003 erhält. Bei jedem neuen Auftreten der Linie kann der Tag von den Inlinestyles bereinigt und auf ein <hr> verkürzt werden. Das hilft nicht in der Quelltext-Teilansicht. KompoZer repariert das dann sofort wieder zurück. Dagegen kann, wenn die Seite fertig ist, in der Quelltext-Vollansicht mit Suchen und Ersetzen jedes "<hr style="width: 100%; height: 2px;">" mit <hr> überschrieben werden. Das geschah auch für die Musterseite auf http://www.elew.de/kurs1a/seite05.html. Hier kommen wir im Auftrag r) noch darauf zurück.

Durch die Tag-Anzeiger in der HTML-Tagansicht erscheint die Linie so dick, wie der Tag-Anzeiger hoch ist. Deshalb für die weitere Arbeit wieder die Normalansicht verwenden.

o2)

Die Marker für die Anker erscheinen auch in der Normalansicht. Um die zu entfernen, ist die Vorschau-Ansicht geeignet. Da kann gearbeitet werden, wenn auch auf Hilfslinien verzichtet werden kann. In der Kurseinheit hier erscheinen aber die Zielmarken immer noch.  Auch wenn mit dem Bearbeitungssymbol 'Vorschau' dein hauseigener Browser die Seite anzeigt. Das kommt durch die vorhin geschaffene allgemeine Regel für a. Darum muss noch in p) sich gekümmert werden.

o3)

Die horizontale Line samt der vorläufigen KompoZer-Inlinestyles soll unter der Überschrift und über den Antwortblöcken erscheinen.

Bei Erfolg ist das so.

| Wechsel in die Normalansicht | Einfügemarke hinter die Überschrift setzen | Bearbeitungssymbol 'Horizontale Linie' | Einfügemarke nach Vorschlag im unteren Teil bei den Antwortblöcken vor den Antworten einsetzen und noch fünf weitere Linien einfügen | Beim Löschen der erledigten Absätze auf die <h5>und den <h6>-Tag in der Statuszeile zurückgreifen |

p) Nachbesserung für <a>

Der kleine Rahmen um den Anker herum ist schon aufgefallen. Wird das bisherige Ergebnis im Browser betrachtet, fällt das ganz bestimmt auf, denn dann ist das Ankerbildchen weg und der Rahmen erscheint ohne Sinn. Mit der allgemeinen Regel "a" für alle <a> haben auch die Zielmarken das Format dieser Regel. Deshalb ist eine  Style-Regel einer Klasse besser als eine allgemeine Regel. Dazu wird im CSS-Editor die Regel von "a" in "a.frage" umbenannt. Das geht im CSS-Editor indem die Regel "a" ausgewählt (links angeklickt) wird und das dritte Symbol 'Bearbeiten' rechts oben im CSS-Editor genommen wird. Dann erscheint eine Eingabezeile, in die das "a.frage" eingefügt werden kann. Nach OK verschwinden alle Anker-Tag und Link-Formate, denn im Quelltext gibt es ja nirgends eine Zuordnung dieser Klasse zu irgendeinem <a>. Die Zuordnung erfolgt erst jetzt für jedes <a> der oben anzuklickenden Fragen per Kontextmenü in der Statuszeile und Zuweisen dieser neuen Klasse.

Bei Erfolg haben die Ankertags auch in der Vorschau-Ansicht keinen Rahmen mehr, die Textlinks aber doch.

| CSS-Editor | 'a' linksklicken | 'Bearbeiten'-Symbol | Eintrag "a.frage" | OK | In der Normalansicht eine Frage oben anklicken und in der Statuszeile das zugehörige <a> rechtsklicken | Im Kontextmenü die Klasse 'frage' zuordnen | Die Zuordnung für den Rest der Fragen wiederholen |

q) Nach oben

Damit ein Besucher die Fragen zur Auswahl immer wieder schnell erreichen kann, erhält er Links nach oben unter jeder Antwort angeboten. Die Zielmarke "top" wurde im Auftrag i) schon gesetzt.

Einen Text "Nach oben" hinter die erste Antwort unten auf eine neue Zeile setzen. Er wird zum Link mit Markieren, dem [Strg]+[L] für den Dialog 'Link-Eigenschaften und dem Aufsuchen im Dialog und Zuweisen des Ankers "top" in der Auswahl. Nach dem OK folgt nur noch das Zuweisen der Regel "a.frage". Das Format der Links hat der Besucher sicher schon verstanden, es wäre nicht nett, noch ein weiteres Format ihm dafür zuzumuten.
Den ersten kompletten Link per a-Tag in der Statuszeile markieren, kopieren und dann hinter jeder Antwort einfügen.

Bei Erfolg kann der Besucher mit Klick auf "Nach oben" den Kopf der Seite ins Bild holen.

| Den Text "Nach oben" markieren | [Strg]+[L] | Im Dialog in der Auswahl für die Link-Adresse "top" wählen | OK | In de Statuszeile das <a> rechtsklicken und im Kontextmenü die Klasse "a.frage" zuweisen | Den Link aus der Quelltext-Teilansicht in die Zwischenablage nehmen und hinter jeder Antwort im Quelltext einfügen |

r) Groß Reinemachen

Fertig. In der Quelltext-Vollansicht mit Suchen und Ersetzen dem <hr> alle Styles rauben. Für die Farbe braucht es noch die allgemeine Regel "hr". Aus der Zwischenablage den KompoZer-Tag <hr style="width: 100%; height: 2px;"> in 'Suchen' einfügen und mit <hr> alle diese auf einen Schlag ersetzen.

Bei Erfolg könnten die horizontalen Linien im CSS-Editor augenblicklich mit Ändern der Hintergrundfarbe jede andere Farbe annehmen. Könnten.

| CSS-Editor öffnen | Eine neue Regel hr erstellen, Radiobutton auf 'Style-Regel für den Elemententyp gesetzt | Schaltfläche 'Style-Regel erstellen' | Register 'Hintergrund', Farbe: "#003" | OK |
Wechsel in die Quelltext-Vollansicht mit Landung am unteren Ende des Quelltextes | Den Dialog 'Suchen und ersetzen' mit [Strg]-[F] öffnen | Bei 'Text suchen:'   <hr style="width: 100%; height: 2px;"> einfügen und bei 'Ersetzen mit:' <hr> | Häkchen bei 'Rückwärts suchen, weil Landung am Ende des Quelltextes | Schaltfläche 'Alles ersetzen' | Schaltfläche 'Schließen' | Wechsel in die Normalansicht |

Was den Inhalt, die ausgedachten Fragen und meine Antworten der Beispielseite angeht, das feine Programm KompoZer braucht manchmal etwas Nachsicht. Der Entwickler Kaze macht das vor den Augen der "Welt" und verkauft ja nicht ein fertiges Produkt. Für was KompoZer gut geht, zeigt wenigstens zum Teil der Kurs, der auch nie perfekt ist. Die Textlinks ganz unten gehören nicht auf dein Ergebnis. Jedoch ist auch die damals erstellte Startseite als Anwendung damit noch erreichbar. Zu sehen daran, dass die verlinkten Kurseinheiten nur bis zur 5 reichen.

Im Menue Format ist die Titeleingabe abgeblendet und damit unmöglich. Was kann ich tun?

Das sollte nicht sein. Genauso wenig wie, dass du von einer anderen Anwendung einen Text nicht aus der Zwischenablage einfügen kannst oder dass die Auswahlliste für das Absatzformat nicht anklickbar ist und was auch sonst immer. Abhilfe 1: Weil KompoZer hängt, die Datei schnell sichern, schließen und neu laden. Hilft das nicht, dann Abhilfe 2: Die Datei schnell sichern und schließen, KompoZer beenden, neu starten und deine Datei wieder laden. Hängenbleiben kommt gelegentlich, bei KompoZer 0.8a4 seltener als bei KompoZer 0.7.20 und jetzt bei den Versionen 0.8xx noch seltener vor.

Ist der Quelltext in der geteilten Ansicht nur zum Ansehen, oder kann ich dort auch editieren?

Im Quelltext kann editiert werden. Ganz ausgereift ist das noch nicht. Das Editieren der exakten Breite von 600px in der 1. Einheit zum Beispiel funktioniert nur in der Quelltextansicht. In der geteilten Quelltextansicht werden die 600px immer auf den vorher bestehenden Wert zurückgesetzt. Dagegen zeigten die nächsten Aufträge, dass es sehr wohl geht, zum Beispiel beim Hinzufügen von <br>. Einen Bereich mit vielen Absätzen in einen einzigen <div>-Container zu verpacken, sowas geht sogar bestens in der geteilten Quelltextansicht und nie per Auswahlliste in der Normalansicht.

Wie kann ich in der geteilten Ansicht im Header meine Metatags editieren?

Mit der Maus in der Statuszeile auf den <html>-Tag linksklicken. Der Header erscheint nun in der Quelltextansicht. Aber eigentlich steht doch ein ganzes Fenster in der Quelltext-Vollansicht zur Verfügung.

Ständig habe ich meine Arbeit gesichert aber am nächsten Tag ist alles weg. Was soll ich machen?

Eine Eigenart der Beta 0.8b2 ist manchmal, dass der öffnende <body>-Tag perfekt über der zuletzt gesicherten Fassung der Arbeit sich befindet, darüber aber der ganze Schrott der zuvor gespeicherten Zwischenschritte sich im Header angesammelt hat. Dadurch erscheint die Arbeit verloren. Was tun? Einfach mal im Fenster bis zur richtigen Darstellung runterscrollen und den Müll löschen. Oder im Quelltext nach dem öffnenden Tag <body> suchen und allen Müll über dem schließenden Tag </head> aus dem Header löschen, der nicht dahin gehört.

In der Quelltext-Teilansicht lösche ich die leeren Zeilen und danach ist die Webseite kaputt. Wie kommt das?

Bei der Beta0.8b2 und b3 kann erlebt werden, dass in der Quelltext-Vollansicht im Header keine Leerzeilen zu sehen sind, jedoch in der Quelltext-Teilansicht bei Linksklick auf <html> in der Statuszeile solche erscheinen. Das Löschen der Leerzeilen, die es ja so nicht gibt, wird bei nicht zu umfangreichem Header das öffnende <body>-Tag und sonst noch was auslöschen. Darauf scheint KompoZer nicht vorbereitet zu sein. Ohne <body> ist die Seite dann wirklich kaputt. Lösung: Einfach das Löschen unterlassen.

+ + + Webseite erstellt mit KompoZer 0.8b3 + + + Kurs1a Startseite 5 als Beispiel einer Anwendung + + +