Zurück zur Startseite

Webseitengestaltung mit KompoZer 0.8b1 (vers. 6 - 15.1.2010)

Übung 5, Verlinkung mit anderen Seiten

Willkommen:

Es geht um die Verzweigung, diesmal extern, aus der Seite heraus. Das Einfügen einer Grafik wird nebenbei erledigt, es kommt zum ersten Mal im Kurs vor. Die Homepage (Homepage wird hier als Bezeichnung eines kompletten Webauftritts verwendet) besteht am Ende der Übung aus vier untereinander verlinkten Seiten. Der Inhalt ist eine Grafik einer Tabelle in vier Sortierungen, mehr nicht.
Die Startseite wird diese Tabelle mit Web-Farben enhalten, sortiert nach Namen und ihren Hex-Werten. Die Nebenseiten erhalten die gleiche Tabelle, nur entsprechend der Hexwerte nach R, G und B sortiert. Meine Exceltabelle, die ich zum Erstellen der Grafiken benutzt habe, findest du unter http://huscholz.bplaced.net/htmlfarben.xls, falls du damit etwas anfangen möchtest.

Aufträge:

a) Eine Homepage mit 4 Seiten anlegen

Speicher diese Seite als ziel05b.html ab, dann als ziel05c.html, ziel05d.html und ziel05a.html. Die Startseite ist die Datei ziel05a.html, mit der weitergearbeitet wird. Aller Text oberhalb dieser Zeile ist obsolet, verschwindet aber jetzt nur hier in ziel05a.html und bleibt bei den Nebenseiten als im Moment zu unwichtig für ein Extra-Löschen bislang unverändert.

Hinweis zum Namen einer Startseite. Eine Homepage wird oft nicht mit einem xxxx.htm oder xxxx.html aufgerufen, sondern mit dem Domainnamen, z.B. www.ard.de. In so einem Fall erhält dann der Besucher die Seite index.htm oder index.html von dem angesprochenen Webspace. Für den Betreiber der Webseite stellt sich damit die Aufgabe, eine Startseite auch dementsprechend index.html zu nennen. Wer also zum Test nach der Übung die 4 Seiten des Ergebnisses auf seinen Webspace hochlädt, muss die Startseite index.html nennen. Und die Links zurück auf die Startseite entsprechend einrichten. Ende des Hinweises.

| Menü 'Datei' | 'Seite speichern unter...' "ziel05b.html" | Dreimal wiederholen mit ..c.., ..d.. und ..a.. |

b) Drei Textlinks werden eingerichtet

Weil jetzt 4 verschiedene Seiten zur Verfügung stehen, können die Textlinks per Klick erzeugt werden. Sie stehen als extra Zeile unter der mit <h1> ausgezeichneten Überschrift hierfür bereit. Beim Löschen der erledigten Aufträge lasse die Überschrift mit ihrem Anker und die Zeile mit den Textlinks zum Bearbeiten immer ganz oben stehen, ohne sie zu löschen. Geht beim Löschen das <h1> der Überschrift verloren, einfach mit zwei Klicks reparieren, nicht immer wieder [Strg]+[y] benutzen.

Farbtabellen für Webseiten

Startseite Farbtabelle Rot Farbtabelle Grün Farbtabelle Blau

Der Text "Farbtabelle Blau" wird markiert. Mit einem Klick auf das Bearbeitungsymbol 'Link' geht der Dialog 'Link-Eigenschaften' auf. Rechts neben der Eingabezeile 'Link-Adresse' kann mit dem Durchsuchen-Symbol auf der Festplatte die soeben gespeicherte Datei "ziel05d.html" ausgewählt werden. Nach der Bestätigung Öffnen und OK schließt sich der Dialog. Zum nächsten Menü "Farbtabelle Grün" gehört "ziel05c.html" und zur "Farbtabelle Rot" die Datei 'ziel05b.html". Warum folgt der neue Link nicht der allgemeinen Regel "a" für alle <a>-Tags und erscheint in blauer Schrift? Er tut es, nur ist der neue Link noch immer markiert, bis du woanders hin klickst.

| Den Text "Farbtabelle Blau" markieren | Bearbeitungssymbol 'Link' | Dialog 'Link-Eigenschaften | Mit Hilfe des Durchsuchensymbol rechts von der Eingabezeile das Ansteuern der Datei "ziel05d.html" einleiten | Die Datei finden und auswählen | 'Öffnen' | OK | Zweimal diese Aktion für die anderen Seiten wiederholen. | Beim Löschen von b) die <h1>-Überschrift und das Menü stehen lassen |

c) Textlink von der Startseite zur Startseite

Das Abspeichern der Startseite unter vier verschiedenen Namen erlaubte, die Festplatte nach vorhandenen Dateien zu durchsuchen und diese ohne Eingabe des Dateinamens zu verlinken. Das Verlinken geht auch, wenn Namen nicht vorhandener Seiten eingetragen werden.  So wie hier jedoch mit Durchsuchen der Festplatte werden Adressfehler eher vermieden.
Beim vordersten Link geht es gar nicht darum, dem Besucher einen Sprung einzurichten. Befindet sich der Besucher auf der Startseite, braucht ihm gar kein Link zu dieser Startseite angeboten zu werden. Es geht darum, das Menü immer gleich aussehen zu lassen. An ein und derselben Stelle findet der Besucher auch immer den gleichen Link im Format aller Links. Deshalb ist das vom Format her ein echter Link, wenn auch ein interner, hier zum Anker "top" vor der Überschrift. Zum Verlinken wird der Text "Startseite" markiert und mit dem Anker "top" verknüpft.

Wenn das Menü verlinkt ist, blendet KompoZer bei Mausberührung den Namen der Zieldatei an und beim internen Verweis den Ankernamen.

| Den Text "Startseite" doppelklicken zum Markieren | Bearbeitungssymbol 'Link' | Dialog 'Link-Eigenschaften | Die Eingabezeile aufblättern und den Anker "top" auswählen | OK |

d) Hover

Wenn der Mauszeiger des Besuchers den Link berührt, soll aus dem Kastanienbraun des Hintergrundes ein Blaugrün werden. Im CSS-Editor wird hierzu zusätzlich zur allgemeinen Regel "a" für alle <a>-Tags diese mit der zusätzlichen Regel a:hover ergänzt. Wird im CSS-Editor auf die Palette oben links geklickt. öffnet sich der Dialog für die Einrichtung einer neuen Style-Regel. Wird in die Eingabzeile "a:hover" geschrieben, setzt KompoZer von sich aus den Radiobutton auf 'Neu erstellen einer erweiterten individuellen Style-Regel'. Nach dem Betätigen der Schaltfläche 'Style-Regel erstellen' kann die neue Regel a:hover ausgewählt werden und im Register' Hintergrund' die Hintergrundfarbe "teal" (teal, Engl.=Blaugrün) eingetragen werden.

Den Hover-Effekt zeigt KompoZer an, sowohl in der Vorschau- als auch in der Normalansicht. Der Effekt gilt auch für den internen Link, benutzt wird ja eine allgemeine Regel für alle <a>. Nur den Einfügezeiger zu einer Hand ändern macht KompoZer nicht, denn im KompoZer lassen sich keine Links ausführen, auch nicht in der Vorschauansicht. KompoZer ist kein Browser.

| CSS-Editor öffnen, z.B. mit [F11] | Palette links oben anklicken, damit sich der Dialog 'Neue Style-Regel' öffnet | In die Eingabezeile "a:hover" eintragen | Schaltfläche 'Style-Regel erstellen' | Die neue Regel 'a:hover' links auswählen | Register 'Hintergrund' | 'Farbe:' "teal" | OK |

e) Anzeige der aktuellen Seite im Menü

Nach dem Laden einer Seite kann mit einer Hervorhebung im Menü dem Besucher gezeigt werden, wo er sich befindet. Der Link mit dem Verweis auf einen Anker oben auf der aktuellen Seite, hier der "Startseite", kann somit per Inlinestyle die Farbe erhalten. Aber mit einem Stylesheet hat Mensch alle Regeln zusammen und muss nicht im <body> auf die Suche gehen, um etwas zu ändern.

e.1) Die Klasse für die aktuelle Seite im Menü

Die Hintergrundfarbe "olive" kommt in die Klasse "a.hier". Mit dem Punkt im Namen ".hier" ist ausgewiesen, dass diese Regel eine Klasse ist. Mit dem "a" vor dem Punkt ist festgelegt, dass diese Klasse nur auf Elemente <a> angewendet werden kann. Richte die neue Style-Regel ein.

| CSS-Editor öffnen | Palette links oben für den Dialog 'Neue Style-Regel' | In die Eingabezeile "a.hier" eintragen | Schaltfläche 'Style-Regel erstellen' | Die neue Regel 'a.hier' links auswählen | Register 'Hintergrund' | 'Farbe:' "olive" | OK |

e.2) Die Klasse ".hier" wird dem Link auf die aktuelle Seite zugewiesen

Wird auf "Startseite" geklickt, steht rechts in der Statuszeile der zugehörige <a>-Tag. Per Kontextmenü können unter 'Klassen' die vorhandenen Klassen aufgeblättert werden. Es sind "hier" und "text". Ein Häkchen ("hier" anklicken) bei "hier" ergibt die Zuweisung und in der Statuszeile lautet die Anzeige nun <a class="hier">. Mit dem gleichen Verfahren kann übrigens das gesetzte Häkchen wieder entfernt werden. Dann wird die Klasse dem Tag entzogen. Das lässt sich sofort in der Quelltext-Teilansicht auch beobachten.

| In das Wort "Startseite" klicken | Kontextmenü für <a> | Mauszeiger auf 'Klassen' halten | In der Auswahl das "hier" nehmen |

f) Die verwendeten Grafiken

Für das weitere Vorgehen benötigst du vier Grafiken. Rufe die erste aus dem Internet mit deinem Browser unter der Adresse http://www.elew.de/kurs1a/farben1.gif auf, und speicher sie mit deinem Browser in das gleiche Verzeichnis wie diese Übung. Die Grafiken sind vier verschieden sortierte Exceltabellen gleichen Inhalts in je drei Spalten. Die anderen drei heißen "farben2.gif", "farben3.gif" und "farben4.gif".

| Die URL "http://www.elew.de/kurs1a/farben1.gif" in die Adresszeile des Browsers eintragen | Das Bild auf der Festplatte sichern | Die Ziffer "1" in der Adresszeile in eine "2" ändern und diese Grafik laden | Sichern und weiter Laden, bis alle 4 Bilder auf der Festplatte sind |

g) Grafik einfügen

Hier drunter steht die Inhaltsangabe der Startseite, die direkt unter das Menü der Startseite gehört. Lösche alles was dazwischen steht, so dass die Seite oben die Überschrift mit dem Anker trägt, darunter dann das Menü folgt und dann die <h4>-Inhaltsangabe. Geht beim Aufrücken das <h4> verloren, nicht suchen, einfach ein neues verwenden.

FARBTABELLE sortiert nach Farbnamen mit zugehörigen Hexadezimal-Werten

Füge unter der Inhaltsangabe nach einer Leerzeile die Grafik "farben1.gif" ein. Der Mauszeiger wird platziert und mit dem 'Menü 'Einfügen' und dann mit 'Grafik' öffnet sich der Dialog 'Grafik-Eigenschaften'. Bei KompoZer bietet es sich an, die Grafikdatei immer über das Durchsuchen-Symbol auf der Festplatte zu orten und dann den Dateinamen mit 'Öffnen' in die Eingabezeile zu übernehmen. Das vermeidet nicht nur Tippfehler und Fehlangaben über das Verzeichnis, es stellt auch sicher, dass es die Datei wie angegeben gibt. Der Alternativtext lautet "Web-Farbtabelle nach Namen sortiert". Damit sind für diesen Auftrag g) genug der Angaben gesammelt, aber bevor das OK kommt kann im Register 'Größe' noch schnell die Breite der Grafik abgelesen werden: 701px. OK. Die Grafik erscheint an der Einfügemarke. Wurde etwas vergessen, oder soll etwas ergänzt werden, lässt sich der Dialog 'Grafik-Eigenschaften' mit einem Doppelklick auf die Grafik wieder öffnen. So wie beim Doppelklick auf einen Link auch dort der passende Dialog aufgeht.

| Menü 'Einfügen' | 'Grafik' | Dialog 'Grafik-Eigenschaften (falls Grafik im KompoZer-Menü ausgegraut und daher im Moment unerreichbar ist, kann die volle Normalansicht KompoZer auf die Sprünge helfen, ansonsten sichern und KompoZer neu starten) | Grafik-Adresse per Durchsuchen-Symbol mit farben1.gif übernehmen | Öffnen | Alternativtext "Web-Farbtabelle nach Namen sortiert" eingeben | Register 'Größe' | Originalbreite der Grafik merken | OK | Unterhalb der Grafik mit h) fortsetzen |

h) Seitenbreite festlegen

Die Grafik hat 701px Breite. Der Container hat die Klasse "div.text" mit 75% Breite und einen Innenabstand von 10px auf jeder Seite. Wenn der Container also theoretisch die feste Breite von 721px bekommt, rückt die Grafik theoretisch in die Mitte des Handtuch-Layouts. Wird im CSS-Editor im Register 'Allgemein' die Breite der Regel "div.text" von 75% auf 721px geändert, sieht die Seite aber unsymmetrisch aus. Im Register 'Box' kann die Breite mit der Maus schrittweise verkleinert werden, bis die Grafik in der Mitte ruht. Breite merken, Aha-Effekt kassieren und OK. Wird die Seite gesichert und im Browser getestet, ergibt sich, dass der Container offensichtlich die Innenabstände zu der eingetragenen Breite dazunimmt. Das machen der IE8, Opera und Firefox alle gleich.

| CSS-Editor | Register 'Allgemein' | Die Klasse ".text" auswählen | In der Breite 'width' die "75%" mit "721px" überschreiben | Register 'Box' | Die Breite mit der Maus schrittweise  durch Klick auf den Abwärts- oder Aufwärtspfeil solange verändern, bis die Grafik in der Mitte ruht | OK |

i) Sicherstellen einer einheitlichen Navigation und Form

Zu Beginn der Übung wurde die Seite unter vier Namen gespeichert. Der Grund war, die Namen als Zieldateien zum Anklicken zur Verfügung zu haben. Jetzt werden alle vier Seiten mit dem jetzigen Ergebnis (die Überschrift und das Menü stehen oben und der Auftrag i) und die folgenden darunter), wieder gespeichert und überschrieben. Der Grund ist jetzt, dafür zu sorgen, dass das Menü auf allen vier Seiten gleich ist und das Layout. Als ob diese Seite eine Vorlage sei und nur noch Anpassungen bei den Folgeseiten vorgenommen werden.
Speicher diese Seite als "ziel05b.html", "ziel05c.html", "ziel05D.html" und "ziel05a.html" ab. Den Titel und die Beschreibung dabei anpassen und jeweils die bisherige Seite einfach überschreiben.

Menü 'Datei' | 'Seite speichern unter...' "ziel05b.html" | Dreimal wiederholen mit ..c.., ..d.. und ..a.. |

j) Verzweigen auf den nächsten Auftrag

Beim Speichern wurden alle Seiten mit i) als oberstem Auftrag gesichert. Je nach Seite geht es mit einem anderen Auftrag weiter:
Ist das hier die Seite "ziel05b.html", lösche alles unterhalb des Menüs bis an das k) und arbeite da weiter.
Ist das hier die Seite "ziel05c.html", lösche alles unterhalb des Menüs bis o) einschließlich und arbeite bei p) weiter.
Ist das hier die Seite "ziel05d.html", lösche alles unterhalb des Menüs bis t) einschließlich und arbeite bei u) weiter.

Diese Seite muss nun die übriggebliebene Seite "ziel05a.html" sein. Diese ist komplett und bis auf das folgende Säubern schon fertig. Auf dieser Seite hier alles unterhalb der Grafik löschen, die Seite sichern und weiterarbeiten mit "ziel05b.html".

| Kein Auftrag ohne Aktionszeile, je selbstsicherer du wirst, desto weniger schaust du hin | Unterhalb der Grafik alles entfernen | Seite sichern | Weiter mit "ziel05b.html" |

k) Die 2. Seite der Homepage

Steht im Tab wirklich "Ziel 5b"? Wenn ja, vielleicht noch nach Autor und Beschreibung sehen. Wenn nicht dann über das Menü Format den Titel auf "Ziel 5b" ändern. Dabei gleich dem Autor deinen Namen geben und die Beschreibung auf das Rot hin ändern. Die Tabellemit den drei Spalten wurde nach den beiden Stellen im Hexcode für Rot sortiert, inhaltlich hat sich nichts geändert.

| Menü 'Format' | 'Seitentitel und -einstellungen...' | Dialog 'Seiteneigenschaften' | 'Titel:' "Ziel 5b" | 'Autor:' dein Name | 'Beschreibung:'"Webfarben nach Rot sortiert" | OK |

l) Anpassung der Navigation

Das Oliv der Startseite wechselt nun zur "Farbtabelle Rot", indem per Kontextmenü dem "Startseite" die Klasse "a.hier" entzogen und der "Farbtabelle Rot" zugewiesen wird. Ausserdem führt ein Klick des Besuchers auf "Startseite", diesen auf die Seite "ziel05s.html", was durch Doppelklick auf "Startseite" und Änderung im Dialog erledigt wird. Genauso wird bei "Farbtabelle Rot" der Verweis auf "#top" geändert. Die Vorgehensweise, eine Menü auf jeder Seite an Änderungen individuell anzupassen, ist typisch für KompoZer, weil das Programm nicht die Verweise verwaltet und eine Änderung in der Navi auf alle betroffenen Seiten automatisch verteilt.

| "Startseite" anklicken | Kontextmenü für <a> | 'Klassen', Häkchen bei "hier" entfernen |"Farbtabelle Rot" anklicken | Kontextmenü für <a> | 'Klassen', "hier" zuweisen | "Startseite" doppelklicken | Dialog 'Link-Eigenschaften' | Per 'Durchsuchen' die Datei "ziel05a.html" finden | 'Öffnen' | OK | "Farbtabelle Rot" doppelklicken | Dialog 'Link-Eigenschaften' | Per Aufblättern der Eingabezeile den Anker "#top" eintragen | OK | [Strg]+[s] |

m) Inhaltsangabe auswechseln

Die <h4>-Zeile hier drunter ist die Inhaltsangabe der zweiten Seite. Diese wird ausgeschnitten und ersetzt die Inhaltsangabe, die von der ersten Seite oben übrig geblieben ist.

FARBTABELLE sortiert nach Rot bzw. den Hexadezimal-Werten

| "Farbtabelle sortiert nach Rot.." anklicken | Zugehörigen <h4>-Tag in der Statuszeile anklicken | Menü 'Bearbeiten' | 'Ausschneiden' | Falsche Inhaltsangabe ganz oben anklicken | Zugehörigen <h4>-Tag in der Statuszeile anklicken | Menü 'Bearbeiten' | 'Einfügen' | Bei n) weiterarbeiten |

n) Grafik auswechseln

Mit einem Doppelklick auf die Grafik öffnet sich der Dialog 'Grafik-Eigenschaften'. Da bietet es sich an, in der Eingabezeile einfach die 1 zum neuen Namen "farben2.gif" mit einer 2 zu ersetzen. Wie schon vorher erwähnt, lohnt es sich, die Grafik mit Durchsuchen in die Eingabezeile zu holen. Viele Anfragen zum Kurs behandeln die Frage, warum eine Grafik nicht auf der Webseite erscheint. Der Vorschlag hier stellt sicher, dass es die Grafik so gibt, wie eingetragen.
Etwas zum gleichen Problem lässt sich mit dem Häkchen bei 'URL relativ zur Seitenadresse auch beantworten. Das Häkchen kann KompoZer setzen, wenn die Webseite mit KompoZer gespeichert wurde und KompoZer die Festplattenadresse kennt. Kommt dann die Grafik von der Festplatte dazu, zeigt sich das Häkchen beim erneuten Öffnen des Dialogs von alleine. Wird das Häkchen herausgenommen, setzt KompoZer die Festplattenadresse ein und mancher wundert sich nach dem Hochladen, dass die Grafik im Internet nicht erscheint, obwohl auch diese hochgeladen wurde. Wie auch, wenn der Browser des Besuchers der URl auf die Festplatte nicht folgen kann.
Hier also per Durchsuchen die Grafik "farben2.gif" eintragen und fertig. Der Balken oben in der Grafik wechselt auf Rot.

| Doppelklick auf die Grafik | Im Dialog per Durchsuchendie Grafik "farben2.gif" finden | 'Öffnen' | OK |

o) Zweite Seite fertigstellen

Allen Text unter der Grafik löschen, die Seite speichern, schließen und mit "ziel05c.html" weiterarbeiten.

| Allen Text unter der Grafik löschen, die Seite speichern, schließen und mit "ziel05c.html" weiterarbeiten |

p) Die 3. Seite der Homepage

Steht im Tab wirklich "Ziel 5c"? Wenn ja, vielleicht noch nach Autor und Beschreibung sehen. Wenn nicht dann über das Menü Format den Titel auf "Ziel 5c" ändern. Dabei gleich dem Autor deinen Namen geben und die Beschreibung auf das Grün hin ändern. Die Tabelle mit den drei Spalten wurde nach den beiden mittleren Stellen im Hexcode für Grün sortiert.

| Menü 'Format' | 'Seitentitel und -einstellungen...' | Dialog 'Seiteneigenschaften' | 'Titel:' "Ziel 5c" | 'Autor:' dein Name | 'Beschreibung:'"Webfarben nach Grün sortiert" | OK |

q) Anpassung der Navigation

Das Oliv der Startseite wechselt nun zur "Farbtabelle Grün", ein Klick darauf hält den Besucher auf der Seite und der Verweis bei "Startseite" muss nach "ziel05a.html" gelenkt werden.

| "Startseite" anklicken | Kontextmenü für <a> | 'Klassen', Häkchen bei "hier" entfernen |"Farbtabelle Grün" anklicken | Kontextmenü für <a> | 'Klassen', "hier" zuweisen | "Startseite" doppelklicken | Dialog 'Link-Eigenschaften' | Per 'Durchsuchen' die Datei "ziel05a.html" finden | 'Öffnen' | OK | "Farbtabelle Grün" doppelklicken | Dialog 'Link-Eigenschaften' | Per Aufblättern der Eingabezeile den Anker "#top" eintragen | OK | [Strg]+[s] |

r) Inhaltsangabe auswechseln

Die <h4>-Zeile hier drunter ist die Inhaltsangabe der dritten Seite. Diese wird ausgeschnitten und ersetzt die Inhaltsangabe, die von der ersten Seite oben übrig geblieben ist.

FARBTABELLE sortiert nach Grün mit zugehörigen Hexadezimal-Werten

| "Farbtabelle sortiert nach Grün.." anklicken | Zugehörigen <h4>-Tag in der Statuszeile anklicken | Menü 'Bearbeiten' | 'Ausschneiden' | Falsche Inhaltsangabe ganz oben anklicken | Zugehörigen <h4>-Tag in der Statuszeile anklicken | Menü 'Bearbeiten' | 'Einfügen' | Bei s) weiter arbeiten |

s) Grafik auswechseln

Mit einem Doppelklick auf die Grafik öffnet sich der Dialog 'Grafik-Eigenschaften'. Dann per Durchsuchen die Grafik "farben3.gif" eintragen und fertig. Der Balken oben in der Grafik wechselt auf Grün.

| Doppelklick auf die Grafik | Im Dialog per Durchsuchendie Grafik "farben3.gif" finden | 'Öffnen' | OK |

t) Dritte Seite fertigstellen

Allen Text unter der Grafik löschen, die Seite speichern, schließen und mit "ziel05d.html" weiterarbeiten.

| ditto |

u) Die 4. Seite der Homepage

Steht im Tab wirklich "Ziel 5d"? Wenn ja, vielleicht noch nach Autor und Beschreibung sehen. Wenn nicht dann über das Menü Format den Titel auf "Ziel 5d" ändern. Dabei gleich dem Autor deinen Namen geben und die Beschreibung auf das Blau hin ändern. Die Tabelle mit den drei Spalten wurde nach den beiden letzten Stellen im Hexcode für Blau sortiert.

| Menü 'Format' | 'Seitentitel und -einstellungen...' | Dialog 'Seiteneigenschaften' | 'Titel:' "Ziel 5d" | 'Autor:' dein Name | 'Beschreibung:'"Webfarben nach Blau sortiert" | OK |

v) Anpassung der Navigation

Das Oliv der Startseite wechselt nun zur "Farbtabelle Blau", ein Klick darauf hält den Besucher auf der Seite und der Verweis bei "Startseite" muss nach der Seite "ziel05a.html" gelenkt werden.

| "Startseite" anklicken | Kontextmenü für <a> | 'Klassen', Häkchen bei "hier" entfernen |"Farbtabelle Blau" anklicken | Kontextmenü für <a> | 'Klassen', "hier" zuweisen | "Startseite" doppelklicken | Dialog 'Link-Eigenschaften' | Per 'Durchsuchen' die Datei "ziel05a.html" finden | 'Öffnen' | OK | "Farbtabelle Blau" doppelklicken | Dialog 'Link-Eigenschaften' | Per Aufblättern der Eingabezeile den Anker "#top" eintragen | OK | [Strg]+[s] |

w) Inhaltsangabe auswechseln

Die <h4>-Zeile hier drunter ist die Inhaltsangabe der vierten Seite. Diese wird ausgeschnitten und ersetzt die Inhaltsangabe, die von der ersten Seite oben übrig geblieben ist.

FARBTABELLE sortiert nach Blau mit zugehörigen Hexadezimal-Werten

| "Farbtabelle sortiert nach Blau.." anklicken | Zugehörigen <h4>-Tag in der Statuszeile anklicken | Menü 'Bearbeiten' | 'Ausschneiden' | Falsche Inhaltsangabe ganz oben anklicken | Zugehörigen <h4>-Tag in der Statuszeile anklicken | Menü 'Bearbeiten' | 'Einfügen' | Bei s) weiter arbeiten |

x) Grafik auswechseln

Mit einem Doppelklick auf die Grafik öffnet sich der Dialog 'Grafik-Eigenschaften'. Dann per Durchsuchen die Grafik "farben4.gif" eintragen und fertig. Der Balken oben in der Grafik wechselt auf Blau.

| Doppelklick auf die Grafik | Im Dialog per Durchsuchendie Grafik "farben4.gif" finden | 'Öffnen' | OK |

y) Letzte Seite fertigstellen

Allen Text unter der Grafik löschen, die Seite speichern, schließen und alles mit dem Browser testen. Die Webpräsenz mit vier Seiten ist nun fertig eingerichtet. Zum Vergleich dient www.elew.de/kurs1a/ziel05a.html.

Zur Grafik ist 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 jeder Art 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 dann kann der Besucher sie auch nicht kopieren. Meine verwendete Excelschriftart ist Fixedsys.

Zur Navigation ist zu sagen: Mit KompoZer gibt es keine automatische Verwaltung der Links. Wird eine Zielseite umbenannt, sind alle Verweise von Hand zu ändern. Wird eine Unterseite neu erstellt, sind alle betroffenen Menüs darauf einzurichten. Die Methode der Verwaltung wurde hier in etwa schon verwendet. Das komplette Menü wird auf einer Seite erstellt, auf die anderen Seiten als Block kopiert und Seite für Seite soweit erforderlich angepasst.