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 diese mit Sprungmarken versehen und intern verlinkt. Als Anwendung 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 Inlinestyles angefasst werden, mit denselben 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 für ausgewählte Elemente.

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' 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.

Wenn nun, wie immer, das Erledigte oben gelöscht wird, ist dabei die Ansicht 'HTML-Tags' ganz hilfreich. Die Tags werden ausgewählt und dann das Element komplett mit [Entf] entfernt. Da die Seite kein eigentliches Layout hat, soll die HTML-Tagsansicht für die Aufträge genommen werden. Auch dabei ist unten die Quelltext-Teilansicht erwünscht.

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.

| Menü 'Format' | 'Seitentitel und - einstellungen' | Dialog 'Seiteneigenschaften' | Titel: "Seite 5" | Autor: dein Name | Menü 'Datei' | 'Speichern unter...' | 'Name:' "seite05.html" | Ort auf der Festplatte aufsuchen, Schaltfläche 'Speichern' |

b) Die Liste schwebt nach oben rechts

Der zu bearbeitende Text befindet sich wieder in einem <div>-Container, "Liste" genannt, unterhalb des hiesigen mit den Aufträgen, "Text" genannt. 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.

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

c) Der "Text"-Container bekommt Klasse

Werden die Inline-Styles des "Text"-Containers aus dem <div>-Tag extrahiert und zur allgemeinen Regel für alle <div>s, würde das zweite <div> mit der "Liste" auf der rechten Seite zwar den hellgrauen Untergrund auch von dieser Regel beziehen, die weiße Schrift der "Liste" wäre aber wohl kaum zu sehen. Die dunkelblaue Schriftfarbe der möglichen allgemeinen Regel würde durch den 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 nur das <div>-Element formatiert werden, für das die Regel gedacht ist. Im Kontextmenü von "Text" 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 dann <div class="text">, wie im Quelltext auch. Von nun an kann die Style-Regel im CSS-Editor geändert werden. Zusätzlich können aber weiterhin auch noch Inlinestyles für das jeweilige Element eingesetzt werden.

| 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 gleicher Höhe im Fenster. Die Fragen über den Antworten in der Liste erhalten Anker, die vom Besucher angesteuert werden können. 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" der 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. Probe danach: Auf das neue Ankersymbol klicken und in der Quelltext-Teilansicht steht der Code des neuen Ankers <a name="Im_Menue"></a>.

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

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

Die dicke Überschrift und die erste Frage unter diesem Auftrag werden 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, was nach Platzieren der Einfügemarke in die Frage durch Linksklick auf <h3> in der Statuszeile simpel und sicher funktioniert, 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 Überschrift und die erste Frage tabu, denn diese bilden das obere Ende der fertigen Webseite.

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 Anker "Ist_der" und "Wie_kann" werden eingerichtet

Wie im Dialog 'Link-Eigenschaften' beim Aufblättern der Eingabezeile für die Link-Adresse gesehen, könnten auch interne Links gesetzt werden, ohne zuvor den Anker als Zielmarke einzubauen. KompoZer trägt dann sofort den fehlenden Anker ein und nimmt einem diese Arbeit ab. Die Vorschläge nimmt KompoZer von den Absatz-Anfängen. 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 Zeile markiert und diese als Namen für die Anker verwendet. Die Anker heißen "Ist_der" und "Wie_kann".

| 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 beiden Anker "Antwort4" und "fuenf" bei den letzten beiden Antworten wird nichts markiert und 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".

| 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, 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. 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> linksklicken | Das Bearbeitungssymbol 'Link' klicken | Im Dialog 'Link-Eigenschaften' die Eingabezeile für die 'Link-Adresse' aufblättern | Den passenden Anker auswählen | OK | Nochmal von vorn, dreimal |

i) Eine Zielmarke "top" ersetzt das Scrollen

Das im Kurs nach 5 Einheiten erworbene Können ist das Abbilden eines gegliederten Textes, wie er mit einer Textverarbeitung auch entstehen kann. Nur dass die Seite jetzt auch für das Web geeignet ist. Zu dem Können gehört natürlich auch das Handhaben des KompoZers zu diesem Zweck. Es fehlen eigentlich nur noch Grafiken zum Text. Für das Web fehlt aber bei langen Seiten wie hier ein notwendiger interner Verweis, ein Link nach ganz oben, damit der Besucher nicht die Bildlaufleiste bemühen muss, wenn er nach oben will.

Der Verweis nach oben heißt "Nach oben". Das Ziel soll "top" heißen und kommt direkt vor die Überschrift ganz oben. Und damit aus der Überschrift kein Link wird, muss die Einfügemarke vor das <h1> der Überschrift gesetzt werden. Das gelingt trotz HTML-Ansicht wohl kaum. Deshalb den HTML-Code der Zielmarke "top" von hier in die Zwischenablage nehmen, "<a name="top"></a>", in der HTML-Ansicht auf den DIV-Anzeiger klicken, damit in der Quelltextansicht die beiden Elemente <div class="text"> und <h1> erscheinen, und dann die Zielmarke dazwischen einfügen. Die passenden Links, die darauf verweisen, kommen erst nach Bedarf zum Schluss, wenn die fertige Seite überblickt werden kann.

| Den Link "<a name="top"></a>" in die Zwischenablage kopieren | In der HTML-Ansicht das oberste <div> anklicken | Den Link hinter <div class="text"> einfügen' | In die HTML-Ansicht klicken und nach oben scrollen | Das oberste <div> anklicken und Quelltext kontrollieren, eventuelle neue Leerzeilen löschen |

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. 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.

| 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' | 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. Die "Liste wird 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 oben rechts vorhanden, da kann hinein geklickt werden. Im Register 'Allgemein' das"color: white;" entfernen. Zuvor aber erst einmal in die "Liste" klicken, damit in der Statuszeile das zugehörige <div> erhältlich ist.

| 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 Standardeinstellungen abhängig. Das soll vermieden werden, und die "Liste" wird mit der Klasse "text" formatiert. Dazu den <div>-Tag in der Statuszeile rechtsklicken und im Kontextmenü 'Klassen' nach rechts rutschen und 'text' zuweisen.

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. Hier geht es also 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.

| 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 eine unnötige doppelte Linie aus beiden Rahmen. Eine Möglichkeit, die zu entfernen ist, die Trennung in 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.

| Die Trennlinie zwischen den Ansichten mehr nach oben schieben | In der Quelltext-Teilansicht bis zu </div><div class="text"> scrollen | </div><div class="text"> entfernen | Trennline wieder runter schieben | In die HTML-Tagsansicht klicken |

o) 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 notwendig ist.

Hinter einen Absatz kann die Einfügemarke platziert werden, und wenn dann auf das Bearbeitungssymbol 'Horizontale Linie' geklickt wird, fügt KompoZer darunter diese ein. Eine solche Linie soll direkt unter der Überschrift folgen. Und 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 die 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.

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.
Außer unter der Überschrift soll eine horizontale Linie samt vorläufigen Inlinestyles den Fragenblock oben abschließen und unten auf der Seite nach jeder Antwort die Antwortblöcke voneinander optisch trennen.

| Einfügemarke hinter die Überschrift setzen | Bearbeitungssymbol 'Horizontale Linie' | Wechsel in die Normalansicht | Einfügemarke nach Vorschlag im unteren Teil bei den Antwortblöcken hinter den Antworten einsetzen und noch fünf weitere Linien einfügen |

p) Nachbesserung für <a>

Vielleicht ist der kleine Rahmen um den Anker herum schon aufgefallen. Wird das bisherige Ergebnis im Browser betrachtet, fällt das ganz bestimmt auf, denn dann ist das Ankerbildchen weg. Mit der allgemeinen Regel "a" für alle <a> haben auch die Zielmarken das Format. Deshalb ist eine  Style-Regel einer Klasse besserals 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-Tagformate, denn im Quelltext gibt es ja nirgends eine Zuordnung dieser Klasse zu irgendeinem <a>. Die Zuordnung erfolgt erst jetzt für jedes <a> der Fragen oben per Kontextmenü in der Statuszeile.

| 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. Der Text hier "Nach oben" wird zum Link mit dem Markieren, dem [Strg]+[L] für den Dialog 'Link-Eigenschaften und dem Aufsuchen 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 kompletten Link markieren, kopieren und dann hinter jeder Antwort einfügen.

| 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 in die Zwischenablage nehmen und hinter jeder Antwort einfügen |

r) Groß Reinemachen

Fertig. In der Quelltext-Vollansicht mit Suchen und Ersetzen dem <hr> alle Styles rauben, für die Farbe gibt es ja schon die allgemeine Regel "hr". Was den Inhalt der Beispielseite mit Fragen und Antworten angeht, das feine Programm KompoZer braucht manchmal etwas Nachsicht. Der Entwickler 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 nächste Übung ist in Arbeit, bis dahin kann die Vorversion der 0.8b2 genutzt werden und hier weiter gearbeitet werden: http://www.elew.de/kurs1a/uebung05.html

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 + + +