KompoZer Kurs1 Seite 4

Webseitengestaltung mit KompoZer und der Cooke/Klose-Anleitung
unter Windows für Firefox ab 2, Opera ab 9 und Internet Explorer ab 6 oder Ubuntu für Firefox ab 2 und Opera ab 9
- Seite 4 -

Die Seite 3a wird zentriert, das Stylesheet wird ausgelagert zum externen Stylesheet, die Seite kriegt etwas Farbe.

a) Lösche diesen Auftrag und alles darüber, damit von nun an der zu gestaltende Teil der Webseite immer über dem nächsten Auftrag liegt. Der Link hier drunter soll das oberste Element sein. Darauf folgen die zwei Rahmen des Ergebnisses von Aufgabe 3. Der grüne Rahmen ist nicht mehr grün, sondern gehorcht der Regel für den Elementtyp div.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril 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.

b) Dieser Auftrag steht in einem Absatz. Zu erkennen am <p>-Tag in der Statuszeile, wenn der Mauszeiger hier hinein geklickt wird.
Ist das Browserfenster zur Zeit breit genug für diesen Text an der rechten Seite, dann umfließen jetzt alle Absätze die vorhandenen Bilder. Sie sollen aber unterhalb der Bilder bleiben. Dazu wird mit Hilfe des CSS-Editors die Regel für alle Absätze ergänzt. Bild 1.

Öffne den CSS-Editor mit [F11]. Klicke links auf 'p'. Schreibe per Hand unter den ersten Style im Register 'Allgemein' den nächsten Style mit " clear: left; " und dann OK.
Der Absatz taucht noch vor dem abschließenden Semikolon unter die beiden gefloateten Rahmen. Der Browser startet ab jetzt bei jedem Absatz mit der Aufhebung von "float: left;" und geht wieder zum standardmäßigen untereinander Anordnen über. Aber nur bei vorangehendem " float: left ". Bei " float: right; " zuvor hebt der Absatz mit dieser Regel nicht ein " float: right; " auf.

c) Bild 1 zeigt/zeigte das interne Stylesheet vor der letzten Ergänzung. Dieses Stylesheet besteht zur Zeit nur aus 228 Zeichen. Dessen Umfang nimmt mit größer werdender Seite jedoch schnell zu.
Für Suchmaschinen, deren Zeit knapp ist, bedeutet das lästiges Lesen. Deshalb lieber diese 228 und alle weiteren Zeichen in eine Textdatei auslagern. Vorteil 1.
Sind die Regeln erst einmal in dieser ausgelagerten Textdatei, können alle weiteren Seiten einer website darauf zugreifen. Einmal vom Browser geladen, entfällt dann das wiederholte Laden. Das macht die Seiten schneller. Vorteil 2.
Und schließlich ist das Layout und Design einer Website viel leichter zu pflegen, wenn es nur diese eine Textdatei zu ändern gilt. Vorteil 3.

Zum Auslagern wird der CSS Editor benutzt. Im CSS-Editor steht dann links unter 'Sheets und Regeln' nicht mehr 'Internes Stylesheet' sondern der Name der Textdatei, der Name des externen Stylesheets. Bild 2.

Bitte den CSS-Editor aufrufen mit [F11]. (Anleitung - Blatt 82 - 4.2.4.4)
Die Schaltfläche 'Stylesheet exportieren und auf externes Stylesheet umstellen' rechts springt sofort ins Auge. Anklicken und als Dateiname "seite04.css" verwenden. Die Zeile links 'Internes Stylesheet' hat sich in seite04.css verändert. Was im Bild 2 als URL steht, könnte auch links als kompletter Pfad stehen.

Es bietet sich hier eigentlich als Dateiname "kurs1.css" an, weil die Regeln für die Website Kurs1 gelten. Aber die Kurs-Seiten ändern sich ja laufend in Design und Layout und mit jeder Verbesserung von "kurs1.css" würden rückwirkend alle bestehenden Seiten verfälscht. Deshalb besser ein Sondername. Aber für alle, die etwa mit Seite 5 genug Anregungen für einen eigenen Webauftritt haben, geht es um die eine CSS-Datei, die dann auch für das eigene Projekt "projekt.css" heißen darf, oder wie auch immer. Bild 2.

d) Frage: Muß der Suffix css lauten? Ein Blick in den Quelltext zeigt, dass die 228 Zeichen des internen Stylesheets tatsächlich ausgelagert wurden. Übrig blieb, dass die Textdatei im Header verlinkt wurde. (Anleitung - Blatt 63 - 4.1.33) Würde die Datei "seite04.txt" lauten, müsste das im Header so stehen. Damit hat kein Browser ein Problem. Aber du könntest am Ende die Kontrolle verlieren, wenn du Suffixe auseinander halten willst.
Frage: Kann ich das externe Stylesheet editieren? KompoZer weigert sich, eine CSS-Datei zu öffnen, wozu auch, es gibt ja den CSS Editor. Dein Browser und jeder Texteditor jedoch zeigt sie an. Es steht alles drin, was vorher im internen Stylesheet stand, überschrieben mit einem Kommentar /* Generated by KompoZer */. Das wird gleich festgehalten: Kommentare im externen Stylesheet werden mit /* eingeleitet und mit */ beendet. Änderst du diesen Kommentar, wird er beim nächsten Einsatz des CSS Editors von KompoZer wieder zurückgestellt. Möchtest du die Datei *.css editieren, nimm deinen Texteditor.

e) Nach allem bisher Gezeigtem würde ein neuer Rahmen mit einem <div>-Container aus der Auswahlliste 'Absatzformat auswählen' erzeugt werden, der dann per Inline Style formatiert würde. Schließlich müsste dieses Format irgendwie in das externe Stylesheet gelangen. Das wird jetzt andersherum gemacht. Zuerst wird die Regel gestaltet und dann der Container gebaut.

Zuvor noch: Wie können verschiedene Regeln gezielt bei verschiedenen Containern eingesetzt werden? Hierzu werden jetzt Klassen benutzt. Klassen erlauben die Definition verschiedener Formatierungen für ein- und dasselbe Tag. Die Rahmen werden gebraucht für Container für aussen, oben, links und rechts. So sollen 4 Klassen auch heißen. (Anleitung - Blatt 65 - sinngemäß 4.2.1)

CSS- Editor aufrufen / Im Stylesheet-Fenster auf die Palette links oben klicken / unter 'Neue Style-Regel die zweite Option wählen 'Style-Regel einer Klasse' / KompoZer setzt die Kennzeichnung für eine Klasse sofort in das Eingabefeld ein, den vorangestellten Punkt / Hinter den Punkt "aussen" schreiben / Schaltfläche 'Style-Regel erstellen' .

Im Gegensatz zu body, div und p, den Style-Regeln für Elementtypen, hat "aussen" den Punkt davor. Womit "aussen" als Klasse registriert ist.

f) Erzeuge die Regeln .oben, .links und .rechts hintereinander weg und dann OK. Bild 3 zeigt den Moment vor dem letzten Klick auf die Schaltfläche 'Style-Regel erstellen'. Style-Regeln werden erstellt

g) Im Allgemeinen kommt der Entwurf vor der Programmierung. Ein Rahmen um alles herum mit der Klasse .außen würde zuerst codiert werden und dann käme alles Weitere da hinein. Hier handelt es sich um eine Anpassung oder Reparatur. Da wird direkt in den Quelltext eingegriffen. Hierzu wird im Quelltext gleich unter <body> mit der neuen Zeile <div class="aussen"> ein neuer Container erstellt. So ist die Schreibweise, wenn einem <div> die Klasse "aussen" zugewiesen wird.

Nimm die neue Zeile von hier <div class="aussen"> in die Zwischenablage und kopiere sie im Quelltext hinter oder unter <body>. Speicher mit [Strg]+[S], das bringt dich wieder hierher zurück.

h) Dieser neue Container folgt der Regel für alle divs, die Klasse ist ja noch leer. Klicke hinein und in der Statuszeile ist der Tag zu "<div class="aussen"> ergänzt. Das hat geklappt. Etwas anderes hat KompoZer dazugetan. Der neue Container hat kein schließendes Tag bekommen. Deshalb hat KompoZer diesen "Fehler" korrigiert und als letzten Tag vor dem schließenden </body> das fehlende </div> von sich aus nachgetragen. War aber kein Fehler sondern eine "Demo".

Mit "width: 400px;" und "height: 300px;" hat der neue Rahmen nicht genug Platz für die Seite. Die Klasse ".aussen" wird dennoch erst später gestylt.

i) Für das Design heute sollen Farbe und Hintergrund des Kurs1-begleitenden Blogs als Vorlage dienen. In diesem Wort Grafi

k ist zwischen i und k die Grafik für den Hintergrund versteckt. Im Dialog wurde die Größe benutzerdefiniert auf 1px mal 1px gesetzt. Um diese zu finden, wechsel in den Editiermodus 'HTML-Tags.
Der Editiermodus 'HTML-Tags' zerschießt das Layout, fügt aber alle öffnenden Tags ein.

Klicke dort kann auf den Tag <img> im Wort Grafik, damit der Tag auch in der Statuszeile erscheint und erreicht werden kann. Rechtsklicke auf <img> in der Statuszeile. Ändere von <img> die Inline Styles mit der Bildhöhe und -Breite auf 20px. OK.

Nun erscheint der Farbverlauf etwas größer zwischen i und k. Doppelklicke in die Grafik. Der Dialog 'Grafik-Eigenschaften' erscheint. Du siehst die Angabe der tatsächlichen Größe: 34px x 1057px. Ein Verlauf von Weiß nach Grau. Nimm das Häkchen von 'URL relativ zur Seitenadresse' weg und du siehst, wo die Grafik "bg02.png" gespeichert ist.

j) Die Regel body erhält diese Grafik bg02.png als Hintergrund.
CSS Editor öffnen / 'body' wählen / Register Hintergrund, mit Durchsuchen die Grafik lokalisieren / Öffnen und bg02.png von KompoZer einfügen lassen, die Seite erhält sofort diesen Hintergrund. Kacheln: horizontal, um die schmale Grafik über das ganze Browserfenster auszubreiten, Häkchen bei 'Bild scrollt mit der Seite' stehen lassen, Position mit Links und Oben festlegen.OK. Kacheln vertikal entfällt, denn die Grafik ist hoch genug und soll vertikal nicht wiederholt werden.

k ) Klicke in das Foto und linksklicke auf das <div> in der Statuszeile, das links von <img> steht. Dieser Container soll die Klasse .links erhalten. In der Format-Symbolleiste die Auswahlliste 'Zuweisen einer Klasse zur Auswahl' aufklappen. Dort gibt es jetzt die zuvor neu erstellten Klassen im Angebot. Nimm die Klasse .links für den Rahmen mit dem Foto. Nimm die Klasse .rechts für den "Duis-autem-Kasten".

l) Die Klasse .oben wird für den <p>-Container mit dem Textlink "Weiter mit Seite 5" genommen.

m) Die div-Regel und die <p>-Regel werden entfernt. CSS Editor öffen / div links im CSS Stylesheets-Fenster anklicken / gleich darüber das rote fette X anklicken / für <p> wiederholen / OK. Im Editiermodus 'Normal' sind jetzt die roten Hilfslinien die einzige Andeutung der Container. Wechsel in den Editiermodus 'Vorschau'.
Die Rahmen sind weg, das Foto schafft sich seinen eigenen Platz und der "Duis-autem"-Container nimmt die volle Breite ein. Standardmäßig werden alle Elemente brav untereinander angeordnet.

n) Für das Design dienen Farbe und Hintergrund des Kurs1-begleitenden Blogs als Anregung.
Daher erhält .aussen eine graue Begrenzung:
CSS Editor öffnen / '.aussen' wählen / Register 'Begrenzungen' / 'Alle vier Seiten...' Häkchen setzen , Stil: solid, Breite: 1px, Farbe #cccccc / Register 'Box' / Außenabstand alle vier Auswahllisten auf 'auto' (in der Auswahl ganz unten) stellen , Innenabstand alle vier auf 10px setzen , Breite: 900px , Höhe: 500px / Register 'Hintergrund' wählen , Farbe: white / OK.

"margin: auto;" richtet den Rahmen in der Mitte des Browserfensters aus. Die Höhe von 500px wird durch alle die Aufträge, die es jetzt noch gibt, gesprengt, aber am Ende sind die ja alle weg.

o) Die Klasse ".oben". Innerhalb des Außen-Rahmens wird der Absatz mit der Klasse ".oben" über die ganze Breite gehen und benötigt dafür keine Breitenangabe. Weil auch kein Rahmen gezeichnet wird, soll durch den Hintergrund mit der Farbe: #eeeeee ein helleres Grau zum Einsatz kommen. #ffffff wäre weiß mit maximaler "Kraft" für Rot, das erste Paar ff, Grün, das zweite Paar ff, und Blau mit dem letzten Paar ff. Die Hexadezimalangabe #eeeeee nimmt etwas Rot, Grün und Blau weg, wodurch ein leichtes Grau entsteht. Der Außenrahmen mit noch weniger RGB ist dann grauer. Gar kein RGB mit #000000 ist völliges Schwarz.
Die Höhe wird mit 40px festgelegt, und im Register 'Text' der Schriftschnitt mit Fett und die Ausrichtung mit Rechts formatiert. OK

p) Für die Klasse ".links" fügst du im Register 'Allgemein' aus der Zwischenablage den Style von hier ein:
float: left; / OK.
Die Größe des Containers mit der Klasse ".links" wird durch das Foto bestimmt. Das Ermitteln der Bildgröße kann dem Browser des Besuchers überlassen werden und es stellt sich das quadratische Format des Originals von selbst ein. Aber nur, wenn die Inline styles von <img> auch gelöscht werden. Rechtsklicke in der Statuszeile auf den passenden <img>-Tag, und lösche per Kontextmenü 'Inline Styles / Register 'Box' die Höhe und die Breite.

q) Im Register 'Allgemein' fügst du aus der Zwischenablage die beiden Styles von hier für die Klasse ".rechts ein":
width: 480px;
float: right;
text-align: justify;

Glückwunsch, die Aufgabe ist gelöst. Vielleicht geistern noch die eine oder andere Leerzeile mit den <br>-Tags rum oderein paar übriggebliebene <p>-Tags. Das liegt in der Natur der Sache mit dem Löschen der erledigten Aufträge. Lösche alle übrig gebliebenen Aufträge und das hier, was du hier sehen kannst und sieh' dir den Quelltext durch, was an <br>s und <p>s noch weg muss.