Die äußere Form wird in etwa vom lezten Ergebnis übernommen und nicht geändert oder besprochen. Es geht nur um die Verzweigung. Dabei hat ein Besucher auf einen Text zu klicken, um die Seiten zu wechseln. Das Einfügen einer Grafik wird nebenbei erledigt, weil es hier zum ersten Mal im Kurs vorkommt.
Die Homepage (Homepage wird hier als Bezeichnung eines kompletten Webauftritts verwendet. Die Seite, die mit dem Link "Home" aufgerufen wird, heißt hier immer Startseite. und der dahin führende Link "Start".) besteht aus vier untereinander verlinkten Seiten. Damit nicht jeder Link einzeln formatiert werden muss, rücken die Inline-Styles in ein internes Stylesheet. Die Startseite enthält eine Tabelle mit Farben, auch die ab Aufgabe 2 angesprochenen Farben. Die Nebenseiten enthalten die gleiche Tabelle, nur in einer anderen Sortierung, damit der Benutzer schneller Details finden kann. Meine Exceltabelle, die ich zum Erstellen der Grafiken benutzt habe, findest du unter http://huscholz.bplaced.net/htmlfarben.xls, falls du anders sortieren willst.
a) Speicher diese Seite als farbe1.html ab, dann als farbe2.html, farbe3.html und farbe4.html. Lade die Startseite farbe1.html wieder neu. Aller Text oberhalb dieser Zeile ist obsolet, verschwindet aber nur hier in farbe1.html und bleibt bei den Nebenseiten als im Moment zu unwichtig für ein Extra-Löschen noch erhalten.
b) Weil jetzt 4
verschiedene Seiten zur Verfügung stehen, können die Textlinks erzeugt
werden. Sie stehen als extra Zeile hier drunter. Beim Löschen der
erledigten Aufträge lasse diese Zeile zum Bearbeiten ganz oben auf der
Seite stehen.
Start Farbtabelle
Rot/Hex Farbtabelle Grün Farbtabelle Blau
Markiere "Farbtabelle
Blau" und öffne mit Linksklick auf das Symbol 'Link' den Dialog
'Link-Eigenschaften'. Rechts neben der Eingabezeile öffnest du das
Durchsuchen-Symbol und klickst auf deiner Festplatte die soeben
gespeicherte Datei "farbe4.html" an.
(Der Link erscheint, wenn du KompoZer nichts dazu eingestellt hast,
blau und unterstrichen. Dein Besucher der Seite würde, wenn er seinem
Browser nichts dazu eingestellt hat, das auch so sehen. Beim
Ergebnis 4 war das auch so im Browser, bis du auf die Links geklickt
hast. Danach waren sie violett, weil der Browser sie als besuchte Links
vermerkte.)
c) Ändere die
Link-Farben mit KompoZer:
| Menü Extras | Einstellungen | Dialog 'Einstellungen' Register
'Seiteneinstellungen' | Radiobutton 'Eigene Farben verwenden' setzen |
und eigene, ruhig extreme Farben verwenden | OK. Nichts tut sich. Diese
Einstellungen gelten von jetzt ab für neue mit KompoZer erstellte
Seiten. Öffne eine neue Seite mit dem Symbol 'Neu', schreibe
"Farbtabelle Blau" und verlinke nach farbe4.html. Ändere wie zu Beginn
bei c) die Linkfarben, nur setze sie mit dem Radionbutton
'Standardfarben..." auf die Standardfarben zurück. Deine Farben werden
ausgeblendet. Eine neue Seite, die wir uns hier jetzt ersparen, hätte
die Standardfarben. Ein Wechsel des Radiobuttons bringt aber deine
Farben wieder zurück. Zwischen neuen Seiten für spezielle Webseiten
hast du auf diese Weise eine Umschaltung zur Verfügung. (Verwirre aber
keine Besucher, bleibe bei allen Unterseiten immer bei einem oder
deinem Standard.)
d) Bei den Links soll
CSS angewendet werden. Rechtsklicke auf das <a> in der
Statuszeile, das erscheint, wenn der Link in der Normalansicht
angeklickt wird.
| Kontextmenü Inline-Styles |Register 'Text' Schriftgöße 0.9em, Farbe
"white". Textattribute: (Mitte rechts zu sehen) Häkchen bei 'keine' |
Register 'Hintergrund' Farbe: grau wie die Schrift, so dass der Link
invers erscheint, mit #666666 | OK.
e) Damit dieses Format
für alle Links nicht wiederholt werden muss, wird die Regel für
<a> in den Header verschoben. Dort steht sie dann als internes
style sheet. In diesem Moment sind die Inline-Styles noch unten im
Quelltext zu sehen.
| Kontextmenü Inline-Styles für das <a> | Im Dialog unten klicken
'Extrahieren und ...' | Im Dialog 'Extrahieren und ...' den Radiobutton
'alle Elemente' setzen ' | OK. Wenn nun in der Normalansicht auf den
Link geklickt wird, ist im Quelltext kein Inline-Style mehr vorhanden.
Dennoch werkelt CSS, nur jetzt vom Hintergrund aus. Eine allgemeine
Regel wurde erzeugt, die für alle <a>-Tags der ganzen Seite gilt.
Sollte ein <a> auf der Seite anders aussehen, dann kann es mit
einem Inline-Style eine Regel erhalten, die die allgemeine Regel
ersetzt. Inline-Styles sind als letztes Wort einfach stärker.
f) Verlinke nach dem
Markieren von "Farbtabelle Grün" per Symbol 'Link' mit der beim
Durchsuchen auf deiner Festplatte gefundenen Seite "farbe3.html". Die
Formatierung nach allgemeiner Regel greift sofort, wenn du in der
Normalansicht irgendwo anders hinklickst. Verlinke ebenso "Farbtabelle
Rot/Hex" mit "farbe2.html" und "Start" mit "farbe1.html".
Würde ein Besucher bei der Startseite aus "Start" klicken" wird die
Seite neu geladen. Das wird noch abgeändert. Aber die komplette
Navigation mit den 4 Links soll unbedingt immer gleich aussehen, damit
es der Besucher leichter hat mit dem Zurechtfinden und von Seite zu
Seite sich in der Navigation das Layout nicht verändert.
g) Nachträglich sollen
die Textlinks etwas mehr Innenabstand und Abstand voneinander bekommen.
Doch zuerst wird nachgesehen, wo die Regeln stehen. Schiebe die
Trennlinie zur Quelltextansicht hoch bis in die Mitte. Klicke in der
Statuszeile auf <html> und die siehst im header zwischen
<header> und </header> ein neues Tag-Paar, <style>
und </style>. Daurch, dass ein a vor der geschweiften Klammer mit
den Styles steht, gilt die Regel für alle <a> auf der Seite. Wie
nun aber das mit den Abständen ergänzen?. Wer CSS kennt, kann das
direkt in den Quelltext schreiben, wer aber KompoZer einsetzt nimmt den
eingebauten CSS-Editor.
h) Öffne den
CSS-Editor mit | Menü Extras | CSS-Editor, zu sehen ist die
Farbpalette, die auch nächstes Mal als das Symbol 'CSS' verwendet
werden kann, auch [F11] als Tastaturkürzel öffnet den CSS-Editor |
Dialog 'CSS Stylesheets' | Linksklicken auf das a unterhalb "Internes
Stylesheet". Steht da kein a, dann das Pluszeichen vor "Internes
Stylesheet" anklicken, damit die vorhandenen Regeln aufgeblättert
werden. | Register 'Box' Außenabstand Rechts: 0.5em, Innenabstand
links und rechts auch 0.5em | OK.
i) Wenn der Mauszeiger
den Link berührt, soll aus dem Grau ein leuchtendes Blau werden.
Markiere einen der vier Links und gebe ihm den Inline-Style für einen
blauen Hintergrund mit #000099. Der Inline-Style ist stärker und
ersetzt die allgemeine Regel. Aus diesem Inline-Style wird aber auch
eine allgemeine Regel:
| Blauen Link markieren | Kontextmeü Inline-Styles | Schaltfläche
'Extrahieren und ...' | Dialog 'Extrahieren und...' Radiobutton bei
'alle Elemente'und Häkchen bei 'des gleichen Elemettyps' und auch bei
'hovered by the pointer' (d.h.vom Mauszeiger hervorgehoben werden) |
OK. Der blaue Link ist nicht mehr blau, aber eine Mausberührung aller
Links lässt die Hintergrundfarbe wechseln. Nur dein Einfügezeiger zur
Hand ändern, das lässt KompoZer sein, denn im KompoZer lassen sich
keine Links ausführen, auch nicht in der Vorschauansicht. KompoZer ist
kein Browser.
Im Quelltext steht eine neue allgemeine Regel im Header für a:hover,
wenn du auf <html> in der Statuszeile klickst.
j) Speicher diese
Seite als farbe1.html mit dem neuen Titel "Farbtabelle"
ab, dann als farbe2.html mit dem Titel "Farbtabelle nach Rot und Hex
sortiert", farbe3.html mit "Farbe
nach Grün sortiert" und farbe4.html mit "Farbe nach Blau sortiert".
Auf diese Weise ist die Navigation auf allen Seiten schon vorhanden und
funktioniert auch überall. Lade die Startseite farbe1.html wieder neu.
k) Für das weitere
Vorgehen benötigst du vier Grafiken. Lade sie in den Browser und
speicher sie in das gleiche Verzeichnis wie diese Seite. Die Grafiken
sind http://www.elew.de/kurs1a/farben1.gif und unter gleicher Adresse
farben2.gif, farben3.gif und farben4.gif.
l) Auf der Seite
farbe2.html lösche l) bis m) und arbeite mit n) weiter. Auf der Seite
farbe3.html lösche l) bis n) und arbeite mit o) weiter. Auf der Seite
farbe4.html lösche l) bis o) und arbeite mit p) weiter.
m) Auf dieser Seite
farbe1.html kopiere den fetten Text von der Zeile hier drunter unter
die Navigation.
FARBTABELLE sortiert nach Farbnamen mit
zugehörigen Hexadezimal-Werten
Füge darunter nach
einer Leerzeile eine Grafik mit der Tabelle ein.
| Menü Einfügen | Grafik, Dialog 'Grafik-Eigenschaften (falls Grafik
ausgeblendet und unerreichbar ist, kann die volle Normalansicht helfen,
ansonsten Frage 1 im Ergebnis 4) | Grafik-Adresse per
Durchsuchen-Symbol mit farben1.gif übernehmen | Öffnen | Alternativtext
"Tabelle mit HTML-Farben" eingeben | OK.
Damit ein Besucher der
Startseite diese nicht neu lädt, wenn er "Start" anklickt, auf "Start"
doppelklicken und die Link-Adresse im Dialog mit "#" ohne
Anführungszeichen ersetzen. Wird farbe1.html nur entfernt, ist das kein
Link mehr und der Style fällt flach. Das # als Ankerzeichen lässt den
Link-Zustand erhalten, führt aber intern zu nirgends.
Damit ein Besucher
anhand der vier Links sieht, wo er ist, erhält der Link die blaue Farbe
des "hover" als Inline-Style. Anklicken und per Kontextmenü
Inline-Styles die blaue Hintergrundfarbe "blue" auswählen.
Jetzt allen Text
unterhalb der Grafik entfernen, abspeichern und zur Seite farbe2.html
wechseln.
n) Auf dieser Seite
farbe2.html kopiere den fetten Text von der Zeile hier drunter unter
die Navigation.
FARBTABELLE sortiert nach Rot bzw. den
Hexadezimal-Werten
Füge darunter nach
einer Leerzeile eine Grafik mit der Tabelle ein.
| Menü Einfügen | Grafik, Dialog 'Grafik-Eigenschaften | Grafik-Adresse
per
Durchsuchen-Symbol mit farben2.gif übernehmen | Öffnen | Alternativtext
"Tabelle mit HTML-Farben" eingeben | OK.
Auf "Farbtabelle
Rot/Hex" doppelklicken
und die Link-Adresse im Dialog mit # ersetzen.
Den zweiten Link per
Inline-Style mit der Hintergrundfarbe "blue" ausstatten.
Jetzt allen Text
unterhalb der Grafik entfernen, abspeichern und zur Seite farbe3.html
wechseln.
o) Auf dieser Seite
farbe3.html kopiere den fetten Text von der Zeile hier drunter unter
die Navigation.
FARBTABELLE sortiert nach Grün mit
zugehörigen
Hexadezimal-Werten
Füge darunter nach einer Leerzeile die Grafik farben3.gif ein mit dem Alternativtext "Tabelle mit HTML-Farben" .
Auf den Link
"Farbtabelle
Grün" doppelklicken
und die Link-Adresse im Dialog mit # ersetzen.
Den dritten Link per
Inline-Style mit der Hintergrundfarbe "blue" ausstatten.
Jetzt allen Text
unterhalb der Grafik entfernen, abspeichern und zur Seite farbe4.html
wechseln.
p) Auf dieser letzten
Seite
farbe4.html den fetten Text von der Zeile hier drunter unter
die Navigation kopieren.
FARBTABELLE sortiert nach Blau mit
zugehörigen
Hexadezimal-Werten
Füge darunter nach
einer Leerzeile die Grafik farben4.gif ein mit dem Alternativtext
"Tabelle mit HTML-Farben".
Auf den Link
"Farbtabelle
Blau" doppelklicken
und die Link-Adresse im Dialog mit # ersetzen.
Den vierten Link per
Inline-Style mit der Hintergrundfarbe "blue" ausstatten.
Jetzt allen Text
unterhalb der Grafik bis hier entfernen.
q) Die Webprasenz mit
vier Seiten ist nun fertig. Zum Unterschied hat im Kurs die
Ergebnisseite statt des Links "Start" jeweils den Link "Ergebnis
5/Start" und steht unter www.elew.de/kurs1a/ergebnis05.html. Ansonsten
sollte alles gleich sein.
Zur Grafik noch zu erwähnen: Der Ersatz einer Tabelle durch ein Bild
der Tabelle ist für den Besucher dann ungeeignet, wenn er Inhalte
zum Kopieren in die Zwischenablage übernehmen soll. Für den Webdesigner
dagegen erlaubt die Abbildung von Text in einer Grafik die Festlegung
auf die unmöglichsten, seinen eigene Schriftarten und jeder Browser
gibt diese exakt wieder. Dies ist auch eine Methode, die eigene
E-Mailadresse dem Besucher vor Augen zu führen und sie dennoch vor dem
automatischen Auslesen zu verbergen. Aber wie gesagt, der Besucher kann
sie dann nicht kopieren. Die Excelschriftart ist Fixedsys.
Mit dem Löschen des Resttextes ist die Aufgabe beendet und der Test im
Browser, wenn nicht schon längst probiert, beginnt.