Kurs 1a, Webseitengestaltung mit KompoZer 0.8b1

Übung 4, Interne Verweise, vers. 6, 11.1.2010

Willkommen:

Diese Seite muss zum Bearbeiten mit KompoZer 08 geladen sein. Spätestens also jetzt Kompozer 0.8b1 starten und die Aufgabe "http://www.elew.de/kurs1a/uebung04.html" aus dem Web laden. Bevor die Übung beginnt, bitte diese Seite mit dem Titel "Ziel 4" unter dem Namen "ziel04.html" auf der Festplatte sichern. So kann die Übung immer unterbrochen und als "Ziel 4" fortgesetzt werden.
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 und die vierte bei der Arbeit mit der 0.8b1 entstandene. Das in der 3. Übung eingeführte interne Stylesheet wird immer wenn Inlinestyles angefasst werden, mit denselben weiter ausgebaut.
Wenn nun, wie immer, das Erledigte oben gelöscht wird, ist die Ansicht 'HTML-Tags' ganz hilfreich. Die Tags werden ausgewählt und dann das Element komplett mit [Entf] entfernt. Ansonsten während der ganzen Übung mit der geteilten Ansicht arbeiten, es reicht aber ein Fünftel der Fensterhöhe für den Quelltext.

Aufträge

a) Die Liste schwebt nach oben rechts

Der zu bearbeitende Text befindet sich wieder in einem <div>-Container, "Liste" genannt, unterhalb des hiesigen, "Text" genannt. Damit er nach rechts oben ins Blickfeld schweben kann, erhält der "Text" eine Breite von 48% und das "float: left" im Register 'Box' mittels 'Puffer:' Links.

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

b) 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 <div> der Liste auf der linken Seite zwar den hellgrauen Untergrund auch von dieser Regel beziehen, die weiße Schrift der Liste wäre aber 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 im Dialog beim Extrahieren jedoch mit einer Klasse jedes <div> gezielt formatiert werden. Im Kontextmenü von "Text" wird 'Inline-Styles' gwä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 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 Klasse div.text {....} und in der Statuszeile wird aus dem Tag dann <div class="text">, wie im Quelltext auch. Von nun an kann die Klasse 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 |

c) Das Sprungziel "Im_Menue" wird eingerichtet.

Der Auftrag c) und die "Liste" stehen auf gleicher Höhe im Fenster. Die Fragen in der Liste werden zu Ankern, die vom Besucher angesteuert werden können. In der Bearbeitungssymbolleiste ist die Schaltfläche 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 die Schaltfläche "Ziel", - die mit dem Anker -, geklickt, richtet KompoZer den Anker "Im_Menue" am Anfang des Absatzes ein. Probe: In die "Liste" klicken und in der Quelltext-Teilansicht steht hinter dem öffnenden <h4>-Tag der neue Anker <a name="Im_Menue">.

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

d) 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 Übung sein. Ein Besucher wird die Frage anklicken können und damit zum passenden Frage-Antwort-Block in der "Liste" verzweigen. Hierzu wird der Text der ganzen Frage 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 durch Linksklick auf <h3> in der Statuszeile simpel und sicher funktioniert, kann per Klick auf das Schaltsymbol '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 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 Übung.

Fragen und Antworten zum Kurs 1a und KompoZer 0.81b

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 |

e) Die Anker "Ist_der" und "Wie_kann" werden eingerichtet

Wie 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. In dieser Übung jedoch kommen die Fragen zweimal vor und die Methode eignet sich nur, wenn Eindeutigkeit vorliegt. Für die nächsten beiden Anker werden deshalb wieder 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 |

f) Der Anker "Antwort4" wird eingerichtet

Für den Anker der vierten Antwort wird nichts markiert und der Mauszeiger direkt vor "Ständig .." 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 |

g) Weitere interne Verweise werden verlinkt

Die drei Fragen hier drunter werden den Kopf der fertigen Seite ergänzen. Darunter folgt dann die "Liste" mit den vier 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" sind also nicht zu verwechseln. Nach dem Erledigen von g) 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 erledigen.

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 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, zweimal |

h) Ein externer Link heraus aus der Seite

Das Ergebnis der Übung ist ein mögliches Beispiel für eine Hilfeseite, eine Regelseite für ein Kartenspiel, oder für x Varianten eines gegliederten Textes mit mehreren Abschnitten zur Auswahl. Zwei typische Vertreter für Links fehlen aber noch. Ein Link aus der Webseite heraus zu einer anderen Datei und ein Link nach ganz oben, damit der Besucher nicht die Bildlaufleiste bemühen muss, wenn er nach oben will. Der Sprungnach oben kommt noch in Auftrag m). Den Link aus der Webseite heraus bitte von hier mit der Maus nach oben verlagern: Zurück zur Startseite

| "Zurück zur Startseite" anklicken | Den <a>-Tag in der Statuszeile anklicken | Menue 'Bearbeiten' | 'Ausschneiden' | Einfügemarke ganz oben links platzieren | Menue Bearbeiten' | 'Einfügen' |

i) Eine allgemeine Regel für <a>

Der Inlinestyle für den Link zur Startseite wird zur allgemeinen Regel für alle Links. In dem Moment, wo das mit OK abgeschlossen wird, müssen die drei Absprungfragen oben auch der Regel gehorchen. Die Prozedur ist, über das Kontextmenü des Links die Styles extrahieren und als Regel für alle Elemente verwenden.

| Kontextmenü für das <a> von "Zurück zur Startseite" | 'Inline-Styles' | 'Extrahieren und allgemeinen Style anlegen' | Radiobutton 'alle Elemente' | Häkchen bei 'des gleichen Elemententyps' |

j) 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 wird gelöscht, die weiße Schrift der "Liste". Das geht genau so, einfach im Register 'Allgemein' das"color: white;" entfernen.

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

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

l) Handtuch

Entstanden ist ein zweispaltiges Layout, das gar nicht gebraucht wird. Auf dem du aber aufbauen kannst und mit dem CSS-Editor bei der Regel  div.text im Register 'Box' noch einen linken Außenabstand von 1px dazu setzen kannst.  Wird  die Breite in der Regel div.text von 48% auf 75% erhöht, nutzt das Floaten nichts, aus Platzmangel rutscht der rechte Container nach unten. Rückt die Seite in die Mitte und hat links und rechts einen leeren Streifen, entsteht das häufig vertretene Handtuch. Nur muss der leere Streifen links und rechts auch gleich breit sein. Dazu verhelfen im Register 'Box' des CSS-Editors bei der Regel div.text die beiden Außenabstände von links und rechts namens "auto", ganz unten in der Auswahl.

| CSS-Editor | Regel 'div.text' | Register 'Box' | 'Breite:' 75% | 'Außenabstand: Rechts:' und 'Links:' jeweils "auto" | OK |

m) 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 class="text"> im Quelltext mit der Suchfunktion [Strg]+[F] zwischen den Containern finden und das dann dort löschen. [Strg]+[S] speichert dann die Seite und bringt einen in die Normalansicht zurück.

| 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 Normalansicht klicken |

n) Das Bearbeitungssymbol "Horizontale Linie"

Die Trennline bringt den Layouter auf eine Idee.
Von anderen Programmen sind Bearbeitungssymbole für Kopieren und Einfügen geläufig. Auch KompoZer hält sie bereit, sie müssen aber, wenn gewünscht, vom Nutzer selbst in die Bearbeitungssymbolleiste eingefügt werden. Ebenso kann ein Bearbeitungssymbol für horizontale Linien sichtbar gemacht werden und soll nun erscheinen. Neben die Palette des CSS-Editor kann rechtsgeklickt werden und der Dialog 'Symbolleiste anpassen' erscheint, wenn die gleichnamige Schaltfläche betätigt wird. Aus dem Dialog heraus können weitere Bearbeitungssymbole per Maus in die Leiste geschoben werden. Hier geschieht das mit derjenigen für die horizontale Linie.

| Rechtsklick neben das Palettensymbol des CSS-Editors in die Bearbeitungssymbolleiste | Schaltfläche 'Symbolleiste anpassen' | Mit der Maus das Symbol 'Horizontale Linie' in die Leiste rücken |

o) Horizontale Linien

Hinter einen Absatz kann der Mauszeiger 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. Wenn in der Normalansicht diese angeklickt werden soll, um deren Code im Quelltext zu sehen, findet sich keine Stelle, an der unten in der Statuszeile ein <hr> als Tag der horizontalen Linie erscheint. Da hilft die 'HTML-Ansicht'. Da lässt sich der Tag leicht anklicken. Und siehe da, KompoZer gibt dem Tag Inlinestyles mit. Die zu extrahieren bringt wenig, weil mit jedem Klick auf das Bearbeitungssymbol wieder eine horizontale Linie mit Inlinestyles entsteht. Puristen extrahieren den Inlinestyle, ändern ihn gegebenenfalls im CSS-Editor im Register 'Box', wo die von KompoZer eingetragenen Werte für Breite und Höhe zu finden sind, und bei jedem neuen Auftreten wird der Tag auf ein <hr> verkürzt. Das geschieht auch für die Musterseite auf http://www.elew.de/kurs1a/ziel04.html.
Außer unter der Überschrift soll eine horizontale Linien unter den vier Frage-Links zu den Antwortblöcken und drei weitere zwischen den Antwortblöcken eingefügt werden.

| Einfügemarke hinter die Überschrift setzen | Bearbeitungssymbol 'Horizontale Linie' | Einfügemarke nach Vorschlag versetzen und eine  horizontale Linie einfügen | Noch drei weitere Linien einfügen |

p) Nach oben

Damit ein Besucher die vier Fragen zur Auswahl immer wieder schnell erreichen kann, erhält er Links nach oben  angeboten. Hier reicht einer ganz ganz unten. Um ihn zu erhalten ist Folgendes möglich: In der Quelltextansicht wird hinter dem ersten <div>-Tag sauber gemacht, denn da soll sofort der <a>-Tag für den Rücksprung zur Startseite folgen, und da könnten sich noch <br>s oder anderes von den gelöschten Aufträgen befinden. Zwischen <div> und <a kommt dann die Zielmarke "oben" mit dem Code "< name="oben">. Das Codieren von Hand geht an der richtigen Stelle korrekt vor sich, das Ankersetzen per Bearbeitungssymbol geht schneller, aber ob das dann die gewünschte Stelle ist? Entscheide selbst. Der Text hier "Nach oben" wird zum Link und erhält sein Format von der vorhandenen allgemeinen Regel für alle <a>.

| Einfügemarke vor den Link "Zurück zur Startseite' setzen | Bearbeitungssymbol 'Ziel' | Den Namen "oben" eintragen | OK |

| Den Text "Nach oben" markieren | [Strg]+[L] | Im Dialog in der Auswahl für die Link-Adresse "oben" wählen | OK |

Fertig, Löschen und dabei den Link stehen lassen. Zum Probieren der Sprünge das Browserfenster schmal stellen, damit das Springen nach unten und oben etwas bringt. Danke für die Geduld. Was das feine Programm KompoZer angeht, braucht es ja auch manchmal etwas Geduld. Nachträglich werden die Fragen und Antworten ergänzt, wenn sich zu dem Thema noch was gesagt werden kann. Dadurch ist mein Ergebnis länger als deines und einen Vergleich wert.

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 der Version 0.81b 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. Übung 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.8b1 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 suchen und allen Müll bis zum schließenden Tag </head> löschen.