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 die Aufträge mit KompoZer nicht
ausführen. 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/aufg02.html
/
Schaltfläche 'Erstellen'.
Speicher diese Seite mit KompoZer auf deiner Festplatte, z. B. auf dem
USB-Stick unter "F:\kurs1\aufg02.html" als Original für einen Neustart
der Aufgabe 2.
Speicher diese Seite an gleicher Stelle mit dem Titel "Ergebnis 2" und
dem Dateinamen "erg02.html" als
Ergebnisseite und für eine Fortsetzung, falls du einfach mal während
der Aufgabe ab- und ausschalten willst:
KompoZer Menü 'Format' / 'Seitentitel und -einstellungen' / Titel
"Ergebnis 2" / OK / Menü 'Datei' / 'Speichern unter...'
"erg02.html" / 'Speichern'.
Lösche alles hier drüber inklusive dieser Zeile und immer während der
Aufgabe alle erledigten Aufträge a), b), c) usw.
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
Textfarbe-Dialog:
Rechtsklick auf <body> in der Statuszeile /
für Nvu: / 'Inline styles' und dann 'Texteigenschaften' wählen ...
für KompoZer: / 'Inline
Styles' / Dialogfenster 'Inline Styles', Register 'Text' /...
Gemeinsam: auf die Taste rechts vom Eingabefeld für Farbe, siehe Bild 1
roter
Kreis, klicken. Bei Nvu ist das im Dialog oben rechts. 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 Webfarben 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 beim Ergebnis 1 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, auch einmal 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 beim Wikipedia-Link in einem weiteren Browserfenster!
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. Auch soeben mit der Rücksetzung auf die RGB-Werte. 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. Insbesondere, wenn der Autor seinen Code mit Leerzeichen und Zeilenumbrüchen so richtig schön angeordnet hat und KompoZer diese Gliederung dann zerstört.
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.
Öffne den Dialog....
Für Nvu: 'Text properties' über den Weg Statuszeile /
Rechtsklick auf <body> / Inline styles /
Texteigenschaften.
Für KompoZer: 'Inline Styles' über den Weg Statuszeile /
Rechtsklick auf <body> / Inline Styles.
Gemeinsam: Bild 2. Siehe
da, der Hexadezimalwert #0000666 für die Textfarbe wird doch verwendet.
e) Wähle im Dialog 'Inline
Styles', Bild 2, das 'Extrahieren und allgemeinen Style anlegen'.
Für
Nvu: Über den Rechtsklick auf den <body>-Tag in der
Statuszeile und das Kontextmenü 'Inline styles' geht es direkt zum
Dialog 'Extrahieren und allgemeinen Style anlegen' ganz unten im
Unter-Kontextmenü. Der Dialog ist auch in der deutschen
Nvu-Version in Englisch und hier im Bild 3 gibt es als Bildschirmkopie
vom KompoZer die deutsche Übersetzung dazu. Alles andere ist
gleich.
Gemeinsam: 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) bis hierher kann jetzt weg. Und der Titel sollte bei dir auch "Ergebnis 2" lauten.)
f) Die zwei blauen Rahmen aus dem Ergebnis 1 sind ganz unten
für die Weiterarbeit an der neuen Webseite eingefügt 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 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 oben in 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". Floaten, auf
Deutsch treiben, schweben, ist vielleicht schon der deutsche
Fachbegriff.
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 /...
Für Nvu: Kontextmenüs 'Inline styles' - 'Box-Eigenschaften' / Dialog
'Box properties' Puffer: Links
auswählen / OK.
Für KompoZer: 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.
i)
Durch das Floaten des Containers nach links wird der Platz daneben
freigegeben und der Text, der standardmäßig unter dem
Container stand, kann rechts daneben hoch "schweben", wenn das
Bildfenster noch Platz dafür hat.
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 auf gleicher Höhe stehen 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]. Aber viel besser: Markiere den
oberen
Container und wechsel in den Editiermodus 'Quelltext'. Dem markierten
<div>-Container folgt im Quelltext der
<br>-Tag für den
line-"break",
den Zeilenumbruch.
Lösche das oder die <br> im Quelltext zwischen den
Containern 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, lade dein Ergebnis in den Browser und probiere das, ordnen
sich die Rahmen untereinander an und der Text umfließt
sie rechts davon.
Markiere in KompoZer die erledigten Aufträge, um sie zu löschen. Deine Markiererei folgt dem floaten. Nach dem Löschen floatet j) nach oben.
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:
In
"Lorem ipsum..." reinklicken / in der Statuszeile in
das <div> rechtsklicken / Inline Styles / Inline
Styles 'Extrahieren und allgemeinen Style anlegen'
/ Dialog
Extrahieren.. / setze 'alle Elemente' und 'des gleichen Elemententyps'
oder auf Englisch 'all elements' 'of same element type' markieren
/ OK.
k) Erstaunt das Erscheinen eines dritten Rahmens?
Der
Textlink "Weiter mit..."erhielt in Aufgabe 1 seinen eigenen
<div>-Container wegen des
Ausrichtens
nach rechts. Jetzt gibt es im header eine allgemeine Regel für div
und
die gilt jetzt auch für den Textlink inklusive Größe,
Rahmen usw., da die Regeln des ersten Containers nun zu allgemeinen
Regeln für alle Elemente des gleichen Typs, hier alle divs, wurden.
Der zweite Rahmen gehorcht aber seinem eigenen Inline Style. KompoZer
hat nur die Inline Styles vom ersten Container entfernt. Ein Inline
Style im Tag hebelt die allgemeine Regel aus.
l) Damit der Textlink-Container nicht der allgemeinen Regel folgt, könnte er Inline Styles erhalten. Besser ist es, im Körper <body> keine Formatierungen auftauchen zu lassen, also dem Textlink eine eigene Regel zu geben. Um eine weitere Containerart kennen zu lernenhen, wird der Textlink in einen anderen Typ von Container gesetzt. Aus <div> soll <p> werden. p steht für Paragraph oder Absatz.
Zuvor soll der dritte 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 beliebig viele 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 zusätzlich 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> steht jetzt
ohne div und ohne dessen Regeln da.
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 für body. Das Format der div-Container
ebenfalls.
Dabei wurde der bis dahin nur rechts ausgerichtete Textlink dieser
neuen Regel unterworfen und erhielt einen Rahmen und die allgemeine
Größe. 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. Bei dieser
Aufgabe
2 wurden alle Aufträge in einen eigenen Absatz gesetzt. Das Umfließen
von diesem Absatz o)
kann mit einem Inline Style aufgehoben werden:
Klicke in den Absatz mit dem Auftrag o). Rechtsklicke
in <p> des Auftrags o) / Kontextmenü Inline Styles
/
Für Nvu: / 'Box-Eigenschaften /
Im Dialog 'Box properties' bei 'Clear:' ein Links eingeben..
Für KompoZer: / Register 'Box' / Bei 'Aufhebung:' Links auswählen /
Wechsel zum Register 'Allgemein / prüfendes Angucken vom neuen " clear:
left; "
Gemeinsam: /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. Die Regeln dazu wurden bis auf float:left in Aufgabe 1 zusammengeklickt. Padding ist der Innenabstand vom Rahmen zum Text.
p) Jetzt zum der zweiten Container mit dem "Duis
autem..."-Text.
Der
gehorcht der allgemeinen Regel nicht, 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 zu dieser Markierung und lasse nur einen Inline Style für
einen 1px dicken grünen
Rahmen des div-Containers ü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 entnimmt der Browser dem Stylesheet.
q) Kompozer hat zum Editieren dieser Regeln einen eingebauten
CSS-Editor. Im Menü wird er gestartet mit Menü Extras / CSS Editor.
Für KompoZer: Per
Button lässt er sich öffnen mit der CSS Palette in der
Bearbeitungssymbolleiste und per Tastaturkürzel mit [F11].
Gemeinsam: Bild 6 (Nvu oben, KompoZer darunter) 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 width: 300px im Register
'Allgemein' für
alle <div>s von 'width: 300px' auf 400px durch
Auswechseln einer 3 mit einer 4, in Nvu im Register Box, OK oder
Schließen.
Das zeigt, du kannst in den einzelnen Registern zusammenklicken, was
dort alles möglich ist. In KompoZer kannst du aber auch schnelle
Änderungen unter
'Allgemein'
selbst schreiben oder editieren.
Lösche alle Aufträge bis hierher einschließlich
aller Bilder.
r)
In den Rahmen links kommt ein
Bild. Hole dir mit
dem Browser http://www.elew.de/kurs1/img/ufer.jpg
und speicher
das Bild "ufer.jpg" auf deiner Festplatte im Unterverzeichnis img.
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. 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.) Ein vorhandener 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 reicht "Ufer".
Die Grafikvorschau zeigt das Foto und damit, dass
KompoZer über das Bild verfügt. OK. Ist die Grafikvorschau
leer, klappt es mit der Grafik nicht.
t) Das Foto ist quadratisch, der Rahmen
des Containers 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 richtet sich mit dem Container
nach der Grafik, so dass der Rahmen
passend wird. Besucher mit verschiedenen Browsern sehen hier
unterschiedliches Layout. Das wird jetzt per Code repariert.
Der Fotograf wird nachträglich in die Hocke gezwungen, indem
das Foto flacher
eingestellt wird. Dazu wird KompoZer den Inline Style für das Foto
ändern.
Bild 8.
In
das Foto doppelklicken, damit das Dialogfenster wie beim Bild 8
aufgeht. Beim Register
'Größe' wird 'Benutzerdefinierte Größe' gesetzt, das
Häkchen von 'Proportional' entfernt und die Höhe auf 300 Pixel
verringert. Eine andere Art von Anpassung
wäre
die entsprechende
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:
CSS Editor aufrufen / links das 'div' markieren / Register 'Box' / ...
Für Nvu: Raender: Links:
10px / Schließen.
Für KompoZer: 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) Gemeinsam: 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, ist ab IE 7.0 behoben.
Firefox und Opera verhalten sich dagegen wie erwartet und zeigen die
Webseite wie dein KompoZer sie auch darstellt.
Wird das Browserfenster schmaler
und breiter verstellt, floaten die Rahmen.
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 Ergebnisseite 2, so wie sie sein sollte.
Weiter geht es mit Aufgabe 3.