Webseitengestaltung mit KompoZer 0.8b3
Kurs-Einheit 6, 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 Kurs-Einheit aus vier
untereinander verlinkten Seiten. Der Inhalt ist die Grafikform einer
Tabelle in vier Sortierungen, verteilt auf 4 Webseiten, mehr nicht.
Die Startseite
wird die 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 "seite06b.html" ab, dann als "seite06c.html", "seite06d.html" und schließlich als die weiter zu bearbeitende
"seite06a.html".
Die Startseite ist die Datei "seite06a.html". Aller Text oberhalb dieser
Zeile ist obsolet, verschwindet aber jetzt nur hier in "seite06a.html" und
bleibt
bei den
Nebenseiten als im Moment zu unwichtig für ein Extra-Löschen vorläufig
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 Kurs-Einheit
die 4 Seiten des Ergebnisses auf seinen Webspace hochlädt, muss die
Startseite index.html nennen. Und die Links zurück auf diese Startseite
entsprechend einrichten. Ende des Hinweises.
| Menü 'Datei' | 'Seite speichern unter...' "seite06b.html" | Dreimal
wiederholen mit ..c.., ..d.. und ..a.. | Bei geöffneter Seite "seite06a.html" alles über Auftrag b) löschen |
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 mit "Startseite bis Farbtabelle Blau" unter der mit <h1>
ausgezeichneten Überschrift "Farbtabellen... " hierfür bereit. Beim Löschen der
erledigten Aufträge lasse die Überschrift mit ihrem Anker "top" 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.
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 "seite06d.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 "seite06c.html" und zur
"Farbtabelle Rot" die Datei 'seite06b.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 irgendwo anders hinklickst.
|
Den Text "Farbtabelle Blau" markieren | Bearbeitungssymbol 'Link' |
Dialog 'Link-Eigenschaften | Mit Hilfe des Durchsuchensymbol rechts von
der Eingabezeile das Ansteuern der Datei "seite06d.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 "Startseite" geht es
auf der Startseite gar nicht darum, dem Besucher einen Sprung einzurichten. Befindet sich
der Besucher auf einer Seite, braucht ihm gar kein Link zu dieser Seite angeboten zu werden. Es geht darum, das Menü immer
gleich aussehen zu lassen. An ein und derselben Stelle findet der
Besucher im Menü immer den gleichen Link im gleichen Format aller Links auf allen Seiten mit diesem Menü. 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 ein 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
Eingabezeile "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) Dem Besucher die aktuelle Seite im Menü hervorheben
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 die aktuelle Seite, hier der "Startseite", erhält seine eigene Farbe.
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 Kurs-Einheit. 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 <h4> verwenden.
FARBTABELLE
sortiert nach Farbnamen mit
zugehörigen Hexadezimal-Werten
Füge unter der Inhaltsangabe nach
einer Leerzeile die Grafik "farben1.gif" ein. Die Einfügemarke 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 in der Vorschau unten 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) Nachtrag zum Dialog 'Grafik-Eigenschaften'
Ein Doppelklick auf die soeben eingefügte Garfik bringt den Dialog
zurück. Wichtig ist ein Blick auf das Häkchen unter dem Grafik-Namen
für 'URL relativ zur Seitenadresse'. Wird das Häkchen gelöscht, ist die
absolute
Adresse zu sehen, die dann auch im HTML verwendet wird. Bei der
Bearbeitung einer Webseite, die mit KompoZer im Internet abgeholt
wurde, ist das die Internetadresse und damit in Ordnung. Aber jetzt und
hier ist die Adresse auf deiner Festplatte zu lesen. Würde die so
stehen bleiben, kann kein Besucher-Browser deine Grafik abholen.
Stattdessen erscheint dann wenigstens der Alternativtext aus dem
Dialog. Auf diesen Alternativtext nicht verzichten, er wird auch von
Suchmaschinen ausgewertet. Auf jeden Fall aber immer das Häkchen für
'URL relativ zur Seitenadresse' setzen. Wurde die Webseite von KompoZer
schon einmal gespeichert, weiß KompoZer den Pfad und setzt das Häkchen
von sich aus ein.
| Doppelklick auf die Grafik, damit sich der Dialog öffnet| Häkchen
bei 'URL relativ zur Seitenadresse' entfernen, URL beobachten und
Häkchen wieder setzen |
i) 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 in einer ersten Überlegung auf die feste Breite von 721px geändert wird,
rückt die Grafik theoretisch in die Mitte des Handtuch-Layouts. Wird im CSS-Editor jedoch im
Register 'Allgemein' die Breite der Regel "div.text" tatsächlich 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 | Soweit Löschen bis der Auftrag j) unter der Grafik steht | [Strg]+[S] |
j) Sicherstellen einer
einheitlichen Navigation und Form
Zu Beginn der Kurs-Einheit wurde die Seite unter vier Namen gespeichert.
Der Grund war, die Namen der Zieldateien zum Anklicken auf der Festplatte zur Verfügung zu
haben. Jetzt werden alle vier Seiten mit dem jetzigen Ergebnis (die
Überschrift, das Menü und der Titel stehen oben und die Grafik mit dem Auftrag j) und den
folgenden darunter) wieder gespeichert und überschrieben. Der Grund
ist jetzt, dafür zu sorgen, dass das Menü auf allen vier Seiten ohne weitere Mühen sofort gleich
ist und auch das Layout. Als ob diese Seite eine Vorlage sei und nur
noch Anpassungen bei den Folgeseiten vorgenommen werden.
Speicher diese
Seite als "seite06b.html", "seite06c.html", "seite06d.html" und
schließlich "seite06a.html" ab. Den Titel
"Seite 6b" und die Beschreibung "Farbtabelle b" usw. dabei anpassen und jeweils die bisherige Seite
beim Speichern einfach
überschreiben.
Menü 'Format' | 'seitentitel und -einstellungen' | Dialog
'Seiteneigenschaften', 'Titel:' "Seite 6b" , 'Autor:' du selbst,
'Beschreibung:' Farbtabelle b" | OK | Menü 'Datei' | 'Seite
speichern unter...' "seite06b.html" | Seite ersetzen mit Ja beantworten
| Dreimal
wiederholen mit ..c.., ..d.. und ..a.. |
k) Verzweigen auf den nächsten Auftrag
Beim Speichern wurden alle Seiten mit j) als oberstem
Auftrag gesichert. Je nach Seite geht es mit einem anderen
Auftrag weiter:
Ist das hier die Seite "seite06b.html", lösche alles unterhalb des Menüs bis an das l) und
arbeite da weiter.
Ist das hier die Seite "seite06c.html", lösche alles unterhalb des Menüs bis p)
einschließlich und arbeite bei q) weiter.
Ist das hier die Seite "seite06d.html", lösche alles unterhalb des Menüs bis u)
einschließlich und arbeite bei v) weiter.
Diese Seite muss nun die übriggebliebene Seite
"seite06a.html" sein. Diese ist komplett und bis auf das folgende
Säubern schon fertig. Doppelklicke noch einmal auf die Grafik, ob das
Häkchen auch die relative Adresse liefert. Dann auf dieser Seite
hier alles unterhalb der Grafik löschen, die
Seite sichern und weiterarbeiten mit "seite06b.html". Der Quelltext
ist sehr kurz und hat weniger Zeilen als das interne Stylesheet. Ein
Blick in den Quelltext zeigt, dass KompoZer die Grafikgröße als
Inlinestyle eingetragen hat. Das macht KompoZer immer und den
Inlinestyle löscht du bei der Durchsicht. Browser brauchen den nicht.
Das <img...> könnte bei dir innerhalb des <h4> stehen. Dann
versetze den schließenden Tag </h4> im Quelltext vor das
<img...>. <br>s braucht die Seite auch nicht. Tauchen noch
<br> im Quelltext auf, dann weg damit. Fertig ist die Startseite
des Quartetts. Zum Vergleich gibt es meineauf http://www.elew.de/kurs1a/seite06a.html
| Kein Auftrag ohne Aktionszeile, je selbstsicherer du wirst, desto
weniger schaust du hin | Unterhalb der Grafik mit relativer Adresse alles entfernen | Seite
sichern | Quelltext checken | Weiter mit "seite06b.html" und diese hier nicht schließen |
l) Die 2. Seite der Homepage
Steht im Tab wirklich "Seite 6b"? Wenn ja, vielleicht noch nach
Autor und Beschreibung sehen. Wenn nicht, dann über das Menü Format den
Titel auf "Seite 6b" ändern. Dabei gleich dem Autor deinen Namen geben
und die Beschreibung auf das "b" hin ändern. Die Tabelle mit 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:' "Seite 6b" | 'Autor:' dein Name |
'Beschreibung:'"Farbtabelle b" | OK |
m) Anpassung der Navigation
Das Oliv der Startseite wechselt nun zur "Farbtabelle Rot", indem
per Kontextmenü dem Verweis "Startseite" die Klasse "a.hier" entzogen
und der "Farbtabelle Rot" zugewiesen wird. Ausserdem führt ein Klick
des Besuchers auf "Startseite" den Besucher auf die Seite
"seite06a.html",
was durch Doppelklick auf "Startseite" und Änderung im Dialog erledigt
wird. KompoZer kennt den Pfad und hat das Häkchen für die relative URL
gesetzt. Und bei "Farbtabelle Rot" wird der Verweis auf "#top"
geändert. Die Vorgehensweise hier, ein Menü auf jeder Seite an
Änderungen
individuell anzupassen, ist typisch für die Arbeit mit KompoZer, weil
das Programm
nicht die Verweise verwaltet und eine Änderung in der Navi nicht 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
"seite06a.html" finden | 'Öffnen' | OK | "Farbtabelle Rot" doppelklicken
| Dialog
'Link-Eigenschaften' | Per Aufblättern der Eingabezeile den Anker
"#top" eintragen | OK | [Strg]+[S] |
n) 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
noch 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' | Überholte alte Inhaltsangabe (ganz oben) markieren | Menü
'Bearbeiten' | 'Einfügen' | Bei Auftrag o) weiterarbeiten |
o) 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.
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 |
p) Zweite Seite fertigstellen
Allen Text unter der Grafik löschen, nach Belieben den Quelltext in
der Vollansicht säubern, bei mir gibt es den Inlinestyle bei
<img>, ein leeres <span>- und <h5>-Element und
ein <br> zum Löschen, das </h4> kommt noch vor das
<img>, dann die Seite speichern, schließen und mit
"seite06c.html" weiterarbeiten.
| Allen Text unter der Grafik löschen, die Seite speichern, schließen und mit "seite06c.html" weiterarbeiten |
q) Die 3. Seite der Homepage
Steht im Tab wirklich "Seite 6c"? Wenn ja, vielleicht noch nach
Autor und Beschreibung sehen. Wenn nicht dann über das Menü Format den
Titel auf "Seite 6c" ändern. Dabei gleich dem Autor deinen Namen geben
und die Beschreibung auf das "c" 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:' "Seite 6c" | 'Autor:' dein Name |
'Beschreibung:'"Farbtabelle c" | OK |
r) 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 "seite06a.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
"seite06a.html" finden | 'Öffnen' | OK | "Farbtabelle Grün"
doppelklicken | Dialog 'Link-Eigenschaften' | Per Aufblättern der
Eingabezeile den Anker "#top" eintragen | OK | [Strg]+[S] |
s) 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 markieren | Menü
'Bearbeiten' | 'Einfügen' | Bei t) weiter arbeiten |
t) 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 |
u) Dritte Seite fertigstellen
Allen Text unter der Grafik löschen, den Quelltext säubern, die
Seite speichern, schließen und mit "seite06d.html" weiterarbeiten.
| ditto |
v) Die 4. Seite der Homepage
Steht im Tab wirklich "Seite 6d"? Wenn ja, vielleicht noch nach
Autor und Beschreibung sehen. Wenn nicht dann über das Menü Format den
Titel auf "Seite 6d" ändern. Dabei gleich dem Autor deinen Namen geben
und die Beschreibung auf das "d" ä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:' "Seite 6d" | 'Autor:' dein Name |
'Beschreibung:'"Farbtabelle d" | OK |
w) 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 "seite06a.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
"seite06a.html" finden | 'Öffnen' | OK | "Farbtabelle Blau"
doppelklicken | Dialog 'Link-Eigenschaften' | Per Aufblättern der
Eingabezeile den Anker "#top" eintragen | OK | [Strg]+[S] |
x) 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 markieren | Menü
'Bearbeiten' | 'Einfügen' | Bei y) weiter arbeiten |
y) 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 |
z) Letzte Seite fertigstellen
Allen Text unter der Grafik löschen, den Quelltext wieder säubern,
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/seite06a.html mit deren Nebenseiten.
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, seine eigenen Schriftarten und Anordnungen und jeder Browser
gibt diese damit 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 Unterseite umbenannt, sind alle Verweise von Hand zu ändern.
Wird eine Unterseite neu erstellt, sind alle betroffenen Menüs darauf
einzurichten. Die Methode der Verwaltung der Navi wurde hiermit 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.
