Ziele:
Ein Bild wird in einem <div>-Containern
platziert,
die <div>-Container werden verschieden
angeordnet.
Inline styles werden im Stylesheet zusammengefasst.
<p> wird eingeführt.
Wichtig:
Routine:
Dieser Text wird von dir im großen Fenster von KompoZer
betrachtet. Wenn du diesen Text stattdessen mit deinem Browser
betrachtest, kannst du nicht die Aufträge in KompoZer ausführen. Der
Text im
Browser kann aber als Merkzettel mit dem ursprünglichen gesamten Text
dienen, warum nicht. Lade spätestens jetzt mit KompoZer diese Seite aus
dem Internet:
KompoZer Menü 'Datei' / 'Webadresse öffen' / Dialog 'Neue Seite oder
Vorlage erstellen' URL eingeben www.elew.de/kurs1/seite03.html /
Schaltfläche 'Erstellen'.
Speicher diese Seite mit KompoZer auf deiner Festplatte, z. B. auf dem
USB-Stick unter "F:\kurs1\seite03.html als Original für einen Neustart
der Aufgabe 3.
Speicher diese Seite an gleicher Stelle als seite03a.html als
Ergebnisseite und für eine Fortsetzung, falls du einfach mal während
der Aufgabe unterbrechen willst.
Lösche alles hier drüber inklusive dieser Zeile und immer während der
Aufgabe alle erledigten Aufträge.
Aufgabe:
a) Diese Seite hat nicht die blaue Schrift von der vorigen. Ein dunkleres Blau wäre schöner.Statt des Farbnamens wähle das dunkle Blau aus dem
Text-Farbe-Fenster.
(Anleitung - Blatt 71 - Bild unten):
Rechtsklick auf <body> in der Statuszeile / 'Inline
Styles' / Dialogfenster 'Inline Styles', Register 'Text' /
auf die Taste rechts vom Eingabefeld für Farbe, siehe Bild 1 roter
Kreis, klicken. Es erscheint das Text-Farbe-Fenster. Das Kästchen mit dem dunklen Blau anklicken. Unten drittes Kästchen von
rechts. KompoZer setzt die
sechstellige Hexadezimalzahl #000066 ein. Dort kann dieser Wert
verändert werden. 'OK' klicken.
Wenn aber die Hexadezimalzahl mit dem vorangestellten #-Zeichen ohnehin
bekannt ist, kann sie ja gleich in das Farbeingabefeld einen Dialog
zuvor eingegeben werden. Noch einmal 'OK' klicken.
Auskunft über Farben gibt die Wikipedia.
b) Der Link zur Wikipedia kann hier im KompoZer nicht benutzt
werden. Auch nicht im Editiermodus Vorschau. Es muss zum Testen von
Links, aber auch zum Ausführen von Skripten, immer ein Browser benutzt
werden.
Wird der Link zur Wikipedia im Browserfenster angeklickt, öffnet sich
ein neues Browserfenster.
Bei dem Link, wie er auf Seite 2a benutzt
wird, wechselt der Inhalt, das Fenster jedoch bleibt.
Klicke hier im
Kompozer doppelt auf den Wikipedia-Textlink. (Ach der ist schon mit dem
erledigten Absatz weggelöscht? Brav, brav. Dann eben einfach mit
[Strg]+[Z], auch mehreren, zurückholen.)
Es öffnet sich das
Dialogfenster 'Link-Eigenschaften' sofort. Das funktioniert bei
existierenden Links, z.B. für eine Änderung. Suche das Häkchen für
"Link wird geöffnet: In einem neuen Fenster". Das bewirkt
den Unterschied, ob im selben Fenster die neue Seite erscheint
oder wie bei Wikipedia in einem weiteren!
Einfach nur
ansehen und merken. 'Abbrechen'.
c) KompoZer hat bei der Farbwahl für dunkelblauen Text den Code für die RGB-Werte in den inline style gesetzt: <body style="color: rgb(0, 0, 102);"> Wechsel in den Editiermodus 'Quelltext' und ersetze bei <body> diese RGB-Eingabe durch den Hexadezimalwert in dieser Form: <body style="color: #000066;"> . Speicher das dann, z.B. mit [Strg]+[S]. Beim Speichern im Quelltext wechselt KompoZer immer in den Editiermodus 'Normal'. Ergebnis deines Editierens im Quelltext: Die Textfarbe bleibt. Kontrolliere nun im Quelltext, ob die Hexadezimalwerte beibehalten oder von KompoZer rückgeändert wurden und komm zu d) in 'Normal' zurück.
d) KompoZer korrigiert den Quelltext, wenn KompoZer das für erforderlich hält. Manchmal stört es nicht, so wie bei den RGB-Werten, meistens ist es nützlich wegen der Fehlerbeseitigung, manchmal ist es aber auch des Guten zuviel und die Absichten des Autors werden hintertrieben. Dafür wird gelegentlich KompoZer kritisiert.
Jetzt soll der Inline Style vom <body>-Tag zu
einer CSS-Regel werden. (CSS=Cascading Style Sheet) KompoZer
unterstützt sehr stark die Verwendung
von CSS. (Anleitung - Blatt 61)
Öffne das Dialogfenster 'Inline Styles' über den Weg Statuszeile /
Rechtsklick auf <body> / Inline Styles . Bild 2. Siehe
da, der Hexadezimalwert für die Textfarbe wird doch verwendet.
e) Wähle im Dialog 'Inline
Styles', Bild 2, das 'Extrahieren und allgemeinen Style anlegen'.
Es
gibt nur einmal <body> und so kann der Style für alle
Elemente des gleichen Elemententyps extrahiert werden. Bild 3. OK.
Das Bild 4 zeigt im Vergleich den Quelltext einmal mit Inline Style, Quelltext links Zeile 8, und einmal mit dem extrahierten Style, der neuen Regel, Quelltext rechts, Zeilen 7.-10. KompoZer hat den Inline Style von <body> in Zeile 12, vorher Zeile 8, entfernt.
Ganz allgemein, im gesamten Körper
braucht dank CSS überhaupt nicht formatiert zu werden. Die Formatierung
der Textfarbe
ist jetzt mit CSS in den Kopf der Webseite verlagert worden. Dieser
Bereich, header genannt, wird mit dem Tag <head> geöffnet
und mit </head> geschlossen. Zeilen 3 und 11. Dazwischen
befindet sich jetzt die neue Regel für alle Elemente des Typs
<body>.
(Nicht vergessen, alles inklusive e) kann jetzt weg.)
f) Die zwei blauen Rahmen aus der Seite 2a sind ganz unten
für die Weiterarbeit an der neuen Webseite wiederverwendet worden. Sie
haben beide gleichlautende Inline Styles.
Mit einer gemeinsamen Regel für
die gleiche Formatierung, die jetzt kommen wird, kann Code gespart
werden. Vorteil 1.
Und
sollte einmal
das Format geändert werden, reicht es, an einer einzigen Stelle zu
ändern. Vorteil 2.
Und im Körper (body) gibt es eine
Formatierung
weniger, da gehören ja keine hinein. Vorteil 3.
Lösche alles hier drüber weg und lasse drei Leerzeilen oben
stehen.
g) Weil
die Weiterarbeit mit den Containern am Fuß der Seite und dem Lesen der
Aufträge unpraktisch ist, sollen die Teile unten
ausgeschnitten
und ganz oben eingefügt werden.
Was jetzt kommt, ist quasi ein Blindflug, aber sicher leicht zu merken?
Klicke
in ganz unten auf der Seite in den Container mit dem Lore-ipsum-Text, markiere das Ganze mit Linksklick auf
<div> in der Statuszeile, hole es mit Ausschneiden in die
Zwischenablage und füge es ganz obenin die dritte Leerzeile ein. Also:
Linksklick in den Lore-ipsum-Text, Linksklick
auf <div> in
der Statuszeile, Menü Bearbeiten / Ausschneiden, Mauszeiger in
die dritte Leerzeile setzen, Menü Bearbeiten / Einfügen.
Hole den zweiten Rahmen auch nach oben und setze ihn unter den
ersten. Lösche dann die erledigten Aufträge.
h) Standardmäßig werden <div>-Container vom
Browser untereinander
gesetzt. Um sie anders anzuordnen, werden sie "gefloatet". Float, auf
Deutsch Fließen, Schweben, ist schon ein deutscher Begriff.
Die Rahmen
werden also gefloatet. Klicke in den unteren Duis-autem-Text und
ergänze den
Inline Style:
In den Container klicken / <div> in der
Statuszeile rechtsklicken / Kontextmenü 'Inline Styles' /
Dialogfenster Register 'Box' wählen / Puffer: Links
auswählen / (Achtung, der Text umfließt jetzt den Rahmen) kein OK dafür
Register 'Allgemein'. Unten steht der neue Style "float: left". Gucken
und OK. h) löschen.
i)
Durch das Floaten des Containers nach links wird der Platz daneben
freigegeben und der Text, der standardmäßig unter dem Container stand,
wird hochgerückt rechts daneben.
Floate den oberen Container durch Ergänzen des Inline Styles auch nach
links. Wegen einer oder mehrerer Leerzeilen zwischen den Containern
könnte der zweite nicht die gleiche Höhe haben wie der erste. Falls das
so ist, lösche die Leerzeile/n.
Geht
das Löschen schief, z.B. rutscht der Text aus dem Container,
hilft das Rückgängigmachen mit [Strg]+[Z]. Rückgängig von
Rückgängig geht auch mit [Strg]+[Y]. Oder besser: Markiere den oberen
Container und wechsel in den Editiermodus 'Quelltext'. Dem markierten
<div>-Container folgt der <br>-Tag für den line-"break",
den Zeilenumbruch. Lösche <br> im Quelltext und komm hierher
zurück.
Jetzt sind die beiden Container
nebeneinander und der Text umfließt sie rechts davon, falls der
Bildschirm breit genug ist. Wird das Browserfenster noch schmaler
gemacht, ordnen sich die Rahmen untereinander an und der Text umfließt
sie rechts davon.
j) So wie aus dem Inline Style von <body>
eine Regel wurde, soll auch der Inline Style des linken Rahmens zur
Regel extrahiert werden.
Klicke in den Lorem-ipsum-Text, um in der Statuszeile den
passenden
<div>-Tag anklicken zu können. Führe das Extrahieren der
Inline Styles durch:
Lorem ipsum reinklicken / in der Statuszeile in
das <div> rechtsklicken / Inline Styles / Dialog Inline
Styles 'Extrahieren und allgemeinen Style anlegen'
/ Dialog
Extrahieren.. / setze 'alle Elemente' und 'des gleichen Elemententyps'
/ OK
k) Erstaunt das Erscheinen eines dritten Rahmens? Der
Textlink erhielt in Aufgabe 2 ein <div> wegen des
Ausrichtens
nach rechts. Nun gibt es im header eine allgemeine Regel für div und
die gilt jetzt auch für den Textlink inklusive Größe, Rahmen usw.
Der zweite Rahmen gehorcht aber seinem eigenen Inline Style. Ein Inline
Style hebelt die allgemeine Regel aus.
l) Damit der Textlink nicht der allgemeinen Regel folgt, könnte er Inline Styles erhalten. Besser wäre, damit im Körper <body> keine Formatierungen auftauchen, dem Textlink eine eigene Regel zu geben. Um das zu vermeiden, wird der Textlink in einen anderen Typ von Container gesetzt. Aus <div> soll <p> werden. p steht für Paragraph, Absatz. Zuerst soll der Container mit dem Textlink nach oben in die oberste Leerzeile geschoben werden. (Gibt es bei dir über den Containern keine zwei Leerzeilen, dann füge sie oben ein. Klappt das nicht, dann füge im Quelltext über dem obersten <div> zweimal <br> ein. Das wäre gleich hinter der Zeile mit <body>.)
Gehe nun so
vor:
Klicke in den Textlink., markiere
den Textlink durch Linksklicken des <div> in der
Statuszeile,
packe den Textlink-Container mit der Maus und schiebe ihn in die oberste
Leerzeile. Das spart das Ausschneiden, die Zwischenablage und das Einfügen.
Mit [Strg]+[Z] und [Strg]+[Y] hast du mehrere Versuche frei.
m)
Markiere wieder den Textlink durch Linksklicken in der Statuszeile. Das
stellt sicher, dass beim Markieren nicht irgendein Zipfel vergessen
wird. Wähle aus der Liste 'Absatzformat auswählen' in der
Format-Symbolleiste links das zweite Element 'Absatz'. In der
Statuszeile ist jetzt nach dem <div> der
gewünschte
<p>-Tag erschienen. Der <a>-Tag
gehört zum Link. a
steht für Anker.
n) Lösche das unnötige <div>, in dem
der Absatz steckt. Rechtsklick in der Statuszeile auf das
<div>
und im Kontextmenü 'Tag entfernen' wählen.<p> hat
<div>
abgelöst.
Eventuell richtest du den Textlink per Button oben nach links aus. Das
ist der Anfang
einer sehr einfachen Navigation
Ist der Link noch markiert, steht in der Statuszeile
<body> <p> <a>.
o) Was ist bis jetzt erledigt worden? Das Format der Textfarbe
wurde
zur allgemeinen Regel. Das Format der <div>-Container
ebenfalls.
Dabei wurde der bis dahin nur rechts ausgerichtete Textlink dieser
neuen Regel unterworfen. Durch Umwandlung des <div> in
ein
<p> wurde der Textlink wieder von Größe und Rahmen
befreit. Die
Rahmen wurden gefloatet. Der Text umfließt die gefloateten Elemente.
Weiter: Dieser Auftrag o) ist auch ein Absatz. Das Umfließen von diesem Absatz
kann mit einem Inline Style aufgehoben werden:
Klicke in den Absatz mit dem Auftrag o). Rechtsklicke
in <p> des Auftrags o) / Kontextmenü Inline Styles /
Dialog
Register 'Box' / Aufhebung: Links / Wechsel zum Register 'Allgemein /
Angucken vom neuen " clear: left; " /OK.
Auf float: left; ist zur Aufhebung ein clear: left; nötig.
Demgemäß bei float: right; ein clear: right.
Bild 5 zeigt den vergößerten header mit den
zwei Regeln, Zeilen 8-17. Zuerst steht das Element, dann
gefolgt von der in
geschweiften Klammern eingeschlossenen Regel.
Die Regeln im header ergeben ein sheet, ein Blatt auf deutsch, mit den Styles. Da es intern, in der Webseite vorkommt, haben wir den Begriff dafür zusammen: Internes Stylesheet, eingeschlossen von den Tags <style> und </style>, Zeilen 7 und 18.
p) Jetzt zum der zweiten Container mit dem Duis-autem-Text.
Der
würde einer Änderung der eben gewonnenen Regel nicht gehorchen, weil er
noch seine Inline Styles hat. Inline Styles übertrumpfen die allgemeinen Regeln im Stylesheet.
Markiere den Container in der Statuszeile mit
Linksklick, damit du ihn im Quelltext leichter findest. Wechsel in den
Quelltext und lasse nur einen Inline Style für einen 1px dicken grünen
Rahmen des <div>-Container übrig:
<div style="border: 1px solid green;">. Speicher das und
komm
dadurch automatisch für i) wieder nach 'Normal' zurück. Stören die
gepunkteten Hilfslinien kannst du auch in den Editiermodus 'Vorschau'
wechseln. Dort kann auch editiert werden. Wechsel nach 'Vorschau'. Der
grüne Rahmen weicht nur in der Farbe vom andern Rahmen ab. Die anderen
Formate entmimmt der Browser dem Stylsheet.
q) Kompozer hat zum Editieren dieser Regeln einen eingebauten
CSS-Editor. Im Menü wird er gestartet mit Menü Extras / CSS Editor. Per
Button lässt er sich öffnen mit der CSS Palette in der
Bearbeitungssymbolleiste und per Tastaturkürzel mit [F11].
Bild 6 zeigt im CSS Editor links das Interne Stylesheet mit zwei
Regeln. Öffne den CSS Editor wie eben beschrieben und klappe die Regeln
ein: Klicke dazu auf das kleine Minus links. Klappe die Regeln wieder
auf. Siehst du keine Regeln, dann stöberst du hier nur rum. Wer die
Aufträge ausführt, hat diese Webseite soweit verändert, dass ein
internes Stylesheet im header steht, wo vorher keines war.
Klicke auf <div> links im CSS-Editorfenster und du siehst
die Regel für alle
<div>s. Ändere die Breite im Register 'Allgemein' für
alle <div>s von 'width: 300px' auf 400px durch Auswechseln einer 3 mit einer 4. OK.
Das zeigt, du kannst in den einzelnen Registern zusammenklicken, was
dort alles möglich ist. Du kannst aber auch schnelle Änderungen unter
'Allgemein'
selbst schreiben.
Lösche alle Aufträge bis hierher einschließlich
Bilder bis 6.
r)
In den Rahmen links kommt ein
Bild. Hole dir mit
dem Browser die Seite http://www.elew.de/kurs1/foto01.html und speicher
das Bild "ufer.jpg" auf deiner Festplatte.
s) Lösche den kompletten
Lorem-ipsum-Text, um Platz zu schaffen. Darauf folgt:
Menü Einfügen / Grafik / Dialog 'Grafik-Eigenschaften' / Register
'Adresse' . Bild 7. Mit Durchsuchen lässt du KompoZer die Adresse des
Fotos auf deiner Festplatte selbst einfügen. Meine Grafiken sind immer
ein Verzeichnis tiefer mit dem Namen "img". Als Tooltip kannst du einen
Text einsetzen, den deine Besucher sehen, wenn sie mit der Maus auf dem
Foto verweilen.(Opera setzt von sich aus noch das Wort "Titel:" vor
deinen Text.) Der Alternativtext wird vom Browser angezeigt, wenn er
das Bild nicht findet, z.B. weil die Adresse nicht mehr stimmt. Der Alternativtext wird auch
von manchen Suchmaschinen gewertet. Hier lautet er "Ufer".
Die Grafikvorschau zeigt, dass
KompoZer über das Bild verfügt. OK.
t) Das Bild ist quadratisch, der Rahmen
nicht. Firefox und Opera halten den Rahmen in der von der Regel
vorgesehenen Höhe fest und das Foto ragt unten über den Rahmen hinaus,
Microsofts Internet Explorer vergrößert die Höhe, so dass der Rahmen
passend wird. Besucher mit verschiedenen Browsern sehen hier
unterschiedliches Layout. Das wird
per Code repariert.
Der Fotograf wird nachträglich in die Hocke gezwungen, indem das Foto flacher
eingestellt wird. Dazu wird KompoZer einen Inline Style für das Foto setzen.
Bild 8.
In
das Foto doppelklicken, damit das Dialogfenster aufgeht. Beim Register
'Größe' wird 'Benutzerdefinierte Größe' gesetzt, das
Häkchen von 'Proportional' und die Höhe auf 300 Pixel verringert.
Die andere Anpassung, der Rahmen erhält die Höhe des Fotos, wäre
eine
Regeländerung für <div> mit dem CSS Editor.
u)
Das Bild mit 400px Breite passt mit Abstand in den Rahmen.
Offensichtlich bedeutet 'padding: 10px' = der Innenabstand: 10px, dass
der Rahmen um den Innenabstand beiderseits verbreitert wird. Das
erledigen die drei vorhin genannten Browser alle gleich.
Gebe nun mit dem CSS
Editor allen <div>s den Außenabstand links 10px:
F11 / links das 'div' markieren / Register 'Box' / Außenabstand: Links: 10px / Vor dem
Schließen des CSS Editors lohnt noch ein Blick beim Register
'Allgemein' wie denn der neue Style angenommen wurde, bzw. wie
er geschrieben wird, 'Register 'Allgemein' / siehe unten 'margin-left: 10px; / OK.
v) Damit der Textlink oben
fluchtet, erhält der <p>-Container auch
einen Außenabstand links 10px. Allerdings nur als Inline Style.
Dann ist die Webseite
fertig.
Dass der Internet Explorer den Außenabstand des
<p>-Containers nicht beachtet und der blaue Rahmen den
grünen
etwas überragt, soll als Kuriosum bestehen bleiben.
Firefox und Opera verhalten sich dagegen wie erwartet und zeigen die Webseite wie dein KompoZer sie auch darstellt..
Bitte alles löschen außer dem Link oben und die beiden Rahmen.
Glückwunsch zu der Seite. Zum Vergleich gibt es im Kurs1 im Internet auch die Seite Seite 3a, so wie sie sein sollte.
Weiter geht es mit Seite 4.