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 6 -
Ziele:
Die Seite 5a wird durch Umstellung des festen Layouts mit Größen in Pixeln auf "flüssig" mittels Größen in Prozent geändert. Das zweispaltige Layout erhält drei Spalten mit einem senkrechtem Menü als Navigation rechts.Aufgabe:
a) Die Routine wie bei Seite 3 oben gilt auch hier, jedoch mit dem Speichern von "seite06a.html". Das externe Stylesheet ist als "seite06.css" schon dabei. Wer die Aufgabe 6 ganz von vorne beginnen möchte, löscht sein inzwischen verändertes Stylesheet und erzeugt eine Kopie von "seite05.css" als "frisches" Stylesheet "seite06.css". Erledigte Aufträge nur in diesem Container löschen.Der <div>-Container für außen wird auf die Breite: 90% und Höhe: 90% des zur Verfügung stehenden Fensters "verflüssigt":
CSS Editor öffnen mit der Palette CaScadeS / die Klasse '.aussen' anklicken und im Register 'Allgemein' die Breite "width: 900px;" auf "width: 90%;" und die Höhe "height: 600px;" auf "height. 90%" ändern / Register 'Hintergrund' Farbe: #ffffdd wählen / OK
b) Die Höhe von 90% für diesen Container ergibt eine Pleite. In Firefox und Opera reicht der soeben hellgelb gefärbte Bereich knapp unter das Menü. Im Internet Explorer wird der hellgelbe Container in der Höhe soweit gestreckt, dass die ganze Seite mit allen Aufträgen hineinpasst.
Damit die Höhe in Firefox und Opera funktioniert, wird 'body' auf 100% Höhe und eine neue Style-Regel 'html' zusätzlich auf die Höhe 100% eingestellt:
CSS Editor öffnen mit Menü Extras /CSS Editor / 'body' anklicken / Register 'Box' Höhe: 100%, kein OK sondern gleich weiter mit einer neuen Regel / Palette links oben im Stylesheet-Fenster anklicken / obersten Radiobutton 'Style-Regel für Elemententyp' setzen / "html" in die Eingabezeile schreiben / Schaltfläche 'Style-Regel erstellen' / Register 'Box' Höhe: 100% / kein OK / 'html' anklicken und der Ordnung halber mit dem Nach-Oben-Pfeil im Stylesheet-Fenster gleich links oben neben dem 'Register 'Allgemein' nach oben befördern, bis 'html' als oberste Regel über 'body' steht. / OK. Bild 1. Die erledigten Aufträge löschen, aber Bild 1 wird noch kurz für die Erklärungen benötigt.
c) Der <div>-Container mit der Klasse '.rechts' ist mit der festen Breite 480px rechts gefloated. Das in ihm eingesperrte Bildschirmfoto 1 wird vom Microsoft IE anders behandelt als von KompoZer, Firefox oder Opera.
Besagter Container erhält jetzt die "flüssige" Breite von 50%:
CSS Editor öffnen / Klasse '.rechts' anklicken / Register 'Box' Breite: 50%, Puffer: Links, Außenabstand Links: 10px / OK.
d) Ist das Bildfenster ausreichend für das Küstenfoto links und den 50% breiten rechten Container?
Wenn nicht, rutscht der rechte Container unter das Foto. Wie auch immer, das Foto wird gelöscht: In das Foto klicken, in der Statuszeile rechts den <img>-Tag linksklicken und den Text "Foto" über das Bild schreiben. Das Foto ist weg und durch Text ersetzt.
Der linke Rahmen hatte seine Breite vom Bild bezogen. Jetzt fällt er in sich zusammen und macht dem anderen Container Platz.
e) Im Bild 1 nennt der CSS Editor bei den Radiobuttons als obersten Typ den Elemententyp. Verwendet auf dieser Seite für html, body, a und li. Solche Regeln gelten dann immer für alle gleichlautenden Tags im Körper einer Seite. Diese Regeln sind aber keine Tags wie <body> oder <li>, sondern Selektoren. Die vier soeben genannten Regeln für Elemententypen sind Typ-Selektoren. Im Körper erhalten die HTML-Tags keinen Hinweis auf diese Selektoren. Die Verbindung geschieht über den Typ-Selektor automatisch.
f) Dann gibt es die Klassen. (Anleitung - Blatt 77 - 4.2.3.1) KompoZer listet alle aktuell vorhandenen Klassen in der Auswahlliste für das Zuweisen auf. Die Zuweisung ergibt im <div>-Tag zum Beispiel den Eintrag <div class=".rechts">. Egal ob sinnvoll oder nicht, Klassen lassen sich vielen verschiedenen Tags, nicht nur dem <div> zuweisen. Das darf auch so oft wie gewünscht innerhalb einer Seite erfolgen. Deshalb der KompoZer-Luxus mit der eben erwähnten Auswahlliste zum häufigen Zuweisen. Im Bild 1 sind die Klassen ".aussen", ".oben", ".links" und ".rechts" zu sehen. Soll ".rechts" nur für <div>s gelten und nie für andere Tags, dann lautet die Schreibweise des Klassen-Selektors "div.rechts" und ein mögliches weiteres "p.rechts" kann ganz andere Styles für die Absätze <p> mit der Klasse ".rechts" enthalten.
g) Der dritte Radiobutton im Stylesheet-Fenster gehört zu den ID-Selektoren. Bei der Schreibweise <div id="rechts"> erhält dieser <div>-Container die Formatierung einer individuellen Style-Regel namens "#rechts". Das wurde noch nicht eingestzt. Solch eine ID-entifikation darf nur einmal auf einer Webseite vorkommen. Eine ID soll eindeutig sein. Dann ist es möglich, z.B. mit Java darauf zuzugreifen und das Element zu verändern.
Für das Layout wäre für aussen, oben, links und rechts ein ID die richtige Wahl, denn diese Container sind "einmalig".
Das war der letzte Einsatz von Bild 1, das kann jetzt auch gelöscht werden.
Speicher diese Seite. Nimm Notepad oder einen anderen Texteditor, lade seite06.css und ersetze die vier Punkte vor den Klassenselektoren durch das Gatterzeichen #. Ersetze dabei gleichzeitig ".rechts" durch "#mitte", damit diese breite Spalte einer dritten Spalte rechts außen Platz machen kann und keinen irreführenden Namen behält. Speicher seite06.css und schließe den Texteditor. Aus ".aussen" ist nun "#aussen" geworden und die anderen drei wurden genauso zu ID-Selektoren. Das war vielleicht ein abenteuerlicher Eingriff, aber ein work-around, weil CaScades nicht das Umbenennen kennt. Damit das editierte Stylesheet nicht von KompoZer zurückgeändert, stattdessen aber neu eingelesen wird, schließe diese Seite ohne zu speichern und lade sie neu.
h) Das Layout ist weg. Die Klasse-Selektoren sind es ja auch.
Wechsel in den Editiermodus 'Quelltext'. Ersetze alle vier "class=" durch "id=" und dabei class="rechts" durch id="mitte". [Strg]+[S]. Das Layout ist wieder da. In der Statuszeile steht unten auch statt "class" beim Anklicken eines <div>s das "id". Dadurch, dass aus "rechts" der Container "mitte" wurde, kann später ein weiterer für "rechts" in den Quelltext eingefügt werden.
i) Die linke Spalte mit dem Text "Foto" wird auf die Breite 28% gesetzt und die Höhe wird gelöscht:
CSS Editor öffnen / #links anklicken / Register 'Box' Breite: 28% eintragen und Höhe löschen / OK. Da hinein kommen Fotos.
Hole drei Fotos und eine Pixelgrafik von http://www.elew.de/kurs1/foto02.html mit deinem Browser und speicher sie auf der Festplatte
Füge die Zebras und den Pavian nacheinander in die linke Spalte ein und ersetze damit den Text "Foto".
Foto mit Doppelklick markieren / Menü Einfügen / Grafik /Dialog 'Grafik-Eigenschaften' / mit Durchsuchen die Zebras finden, Öffnen / Alternativtext: "Zebras" / OK / Menü Einfügen usw. wiederholen für Pavian, Alternativtext: "Pavian / OK.
j) Es folgt ein neuer ID-Selektor, #rechts. Der zugehörige <div>-Tag wird per Hand direkt in den Quelltext eingefügt:
Wechsel in den Quelltext. Ganz unten steht
</div>
</div>
</body>
</html>
In diesem Quelltext gilt, das letzte schließende div-Tag in diesem Code gehört zu #aussen, das davor zu #mitte. Zwischen diese beiden wird
<div id="rechts">RECHTS</div> von hier in eine neue Leerzeile hineinkopiert. [Strg]+[S]. Sollte KompoZer das übel nehmen und das Layout zerschießen, dann das externe Stylesheet in #links (float: left; width: 30%;) und #mitte (text-align: justify; width: 50%; float: left; margin-left: 10px;) reparieren. Regel: Wenn KompoZer zickt, dann abspeichern und KompoZer neu starten.
k) Ohne Auszeichnung (Mark up) nimmt sich die neue dritte Spalte von der Fensterbreite, was der Browser ihr gibt. Zum Einfügen des neuen ID-Selektors '#rechts', der ja noch im externen Stylesheet fehlt, wieder den CSS Editor öffnen / die Palette links oben anklicken / "#rechts" in die Eingabezeile setzen / Schaltfläche 'Style-Regel erstellen' / #rechts anklicken / mit Pfeil-nach-oben unter #mitte anordnen / Register 'Box' Puffer: Rechts, Breite 12% / OK.
Damit ist das Layout mit drei Spalten "verflüssigt".
l) Die dritte Spalte erhält die senkrechte Navigation:
In die Navigation klicken / in der Statuszeile <ul> anklicken / die unsortierte Liste <ul> mit einem Bearbeiten / Ausschneiden in die Zwischenablage nehmen / in der rechten Spalte "RECHTS" markieren (Doppelklick darauf) und das RECHTS durch <ul> aus der Zwischenablage mit Bearbeiten / Einfügen ersetzen.
m) Für das Menü werden die Bullets wieder aktiviert. Der Typ-Selektor "li" erhält quadratische Bullets und Abstände untereinander mit 10px Zwischenraum. Alles andere wird gelöscht. Vorschlag:
list-style-type: square;
margin-bottom: 10px;
n) Die Grafik mit dem Verlauf von Weiß nach Grau für den Hintergrund von <body> wird abgelöst durch eine Pixelgrafik "bg03.png" aus foto02.html:
CSS Editor öffnen mit [F11] / den Typ-Selektor 'body' anklicken / im Register 'Hintergrund' das bg02 in bg03 ändern und horizontal und vertikal kacheln / OK.
o) Bis jetzt wurde die Schrift dem Browser des Besuchers überlassen. Der Vorschlag für den Typ-Selektor 'html' zum Kopieren lautet:
height: 100%;
font-family: Arial,Helvetica,sans-serif;
color: #003300;
font-size: 0.9em;
p) Mit dem Grün und Gelb soll auch '#aussen' einen grünen Rand und einen hellgelben Hintergrund bekommen. Kopiervorlage:
border: 1px solid #006600;
margin: auto;
padding: 10px;
background-color: #ffffdd;
height: 90%;
width: 90%;
q) Das Hintergrundbild für '#oben' ist das breite Foto aus "foto02.html". Vorschlag:
border: 1px solid #006600;
margin: 2px 5px 5px 6px;
padding: 20px;
font-weight: bold;
text-align: center;
background-image: url(img/rehe.jpg);
background-position: center top;
color: white;
background-repeat: repeat-x;
height: 95px;
r) Nun wieder etwas ausführlich. Durch das Einfügen der Fotos hat KompoZer von sich aus deren <img>-Tags Inline Styles mitgegeben. Diese sollen extrahiert werden. Abschließend wird das interne Stylesheet geplündert und gelöscht.
Zuerst wird im CSS Editor der Typ-Selektor img erstellt:
CSS-Editor öffnen und externes Stylesheet "seite06.css" wählen / Palette anklicken / Typ-Selektor "img" erstellen. Der bleibt leer. / OK
Dann wird ein internes Stylesheet erzeugt. Dazu in ein Foto klicken / <img> in der Statuszeile rechtsklicken / Inline Styles extrahieren / umwandeln in 'alle Elemente' 'des gleichen Elemententyps' / OK.
Dann wird 'img' des externen Stylesheets mit den ehemaligen Inline Styles gefüllt: Den CSS Editor öffnen, es gibt jetzt zwei Stylesheets / das Interne Stylesheet mit Klick auf das + öffnen und den vom Internen Stylesheet soeben extrahierten Selektor 'img' wählen / im Register 'Allgemein' die Größenangaben kopieren und in den leeren Selektor 'img' vom externen Stylesheet einfügen / kein OK.
Bei der Gelegenheit dort noch
border: 1px solid #006600;
float: left;
margin-bottom: 10px;
ergänzen / da aber die Fotos verschieden hoch sind die Höhe von <img> löschen / 'Internes Stylesheet' wählen und mit dem dicken roten X oben löschen / OK.
s) Damit wurde von einem Image <img> die Formatierung in das interne Stylesheet und dann in das externe Stylesheet geholt. Aber das zweite Bild hat immer noch seine internen Styles. Diese im Quelltext löschen.
Der ganze Code für den Container kann schrumpfen auf:
<div id="links">
<img src="img/zebras.jpg">
<img src="img/pavian.jpg">
</div>
t) Glückwunsch zur fertigen Seite. Zum Vergleich steht das Ergebnis auch hier:
Seite 6a. Es ist mit einem flüssigen Layout optimal bei 1024 x 768 Pixel Bildschirmauflösung bei allen drei Browsern und passt sich an andere Auflösungen an.
Ist dein Layout anders, kannst du Fehler im externen Stylesheet suchen. Lade mein Ergebnis direkt vom Internet in den KokmpoZer. Es macht ihm nichts, gleichnamige Seiten darzustellen. Mit dem CSS-Editor kannst du bei beiden Seiten dann vergleichen.
Jetzt alle restlichen Aufträge und das hier Löschen und nur den Lorem-ipsum-Text übrig lassen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac ante sed ante imperdiet auctor. Fusce dignissim, magna eu feugiat tincidunt, nibh metus tincidunt augue, quis ullamcorper lorem pede a ante. Proin congue nisl a arcu. Donec et elit. Etiam ac eros nec metus molestie aliquam. Nullam vestibulum molestie magna. In varius quam in nulla luctus tristique. Nam et eros. Sed vitae sem a velit mattis dapibus. Sed blandit, sapien auctor adipiscing viverra, purus urna fermentum wisi, id luctus tortor augue et ligula. In quis libero. Sed urna arcu, malesuada in, adipiscing vitae, vehicula vitae, magna. Phasellus sit amet nisl at erat aliquet eleifend. Quisque malesuada porta elit.
Aenean vel mi. Donec blandit mauris convallis lacus. Sed a urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit. Curabitur libero leo, laoreet nec, lobortis in, auctor malesuada, metus. Vivamus ultrices eros eget pede. Morbi facilisis leo ut elit. Fusce viverra iaculis risus. Pellentesque posuere faucibus sem. Praesent et felis ac lorem laoreet venenatis.
Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum. Etiam varius iaculis nunc. Curabitur et metus in lectus malesuada venenatis.