Kurs 1a, Webseitengestaltung für KompoZer 0.8b3

Kurs-Einheit 12, Validierung

KompoZer-Link
HTML-Validierung
CSS-Valisierung
Validome-Link

Die Verkleinerungen hier oben übernehmen ihre Größe von Inline- Styles, die per Dialog 'Grafik- Eigenschaften' (Öffnen per Doppel- klick auf die Grafik) im Register 'Größe' beliebig einstellbar sind.

Ist bekannt, welchen Weg durch die Website ein Besucher nehmen wird, kann für ihn die Ladezeit umfangreicher Grafiken vorverlegt und dem Besucher ein schneller Bildaufbau von dessen Festplatte geboten werden.

Hierzu das Laden der Grafik in die Zeit legen, wo der Besucher mit Lesen aufgehalten wird. Auf der Leseseite wird die Grafik mit der Größe 1x1px eingebunden. Damit ist sie unsichtbar nach dem Laden vorhanden.
Beim Aufrufen der erwarteten Seite wird dann  die Grafik oder das Bild sofort angezeigt. Die Verweilzeit zum Betrachten kann dann schon wieder mit dem nächsten, 1x1px großen Bild genutzt werden.

Das Ganze ist aber eher eine Kunst aus vergangenen Tagen mit langsamem Internet. Bedenklich ist dabei heute, dass der Besucher vielleicht über sein Mobilphone auf die Seite gelangt oder mit einem USB-Stick und Flatrate ins Internet geht. Da wird der Besucher bei ungenutzten großen Bildern unnötig zur Kasse gebeten oder eventuell nach Überschreiten eines festen Daten-Volumens auf 56kbit/s runtergetaktet.
Ausserdem gibt es Situationen, wo CSS vom Besucherbrowser nicht ausgewertet wird. Dann erscheint das Bild in voller Schönheit und sinnlos, weil unpassend zu früh.

• Diese Seite
• Startseite
• Vorige Einheit
• Voriges Ergebnis

Willkommen:

Vor einer Veröffentlichung einer Seite sollte auch das Überprüfen auf korrekten Code nicht vergessen werden. Hier wird dokumentiert, dass die Seite standardkonform ist, also validen Code enthält. Dazu wird an der Seite nicht mehr viel verändert, nur überprüft. Nach dem Testen erhält die Seite badges, über die ein Besucher die Konformität selbst abfragen kann. Die für diese Aufgabe verwendeten badges sind oben in der rechten Spalte verkleinert enthalten. Und die für diese Seite verwendeten Farben sind für R,G, und B aus 00, 45 und 8a zusammengesetzt worden plus Weiß.

Aufträge:

a) Vor Beginn die Datei speichern

Diese Datei wird als "seite12.html" gesichert. Der Titel wird "Seite 12" lauten und der Autor bist du.

| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog 'Seiteneigenschaften', 'Titel:' Seite 12, 'Autor:' Dein Name | OK | Menü 'Datei' | 'Speichern unter' "seite12.html" |

b) Absolute und relative Adresse

Unter 'Extras' findet sich im KompoZer-Menü 'Quelltext säubern'. Von den dort angebotenen Problemlösern soll das Ersetzen einer lokalen Adresse getestet werden.

Lokal bedeutet, die Adresse der Seite bezeichnet eine Datei auf der Festplatte. Die Adressen von aufzurufenden Seiten können absolut und relativ angegeben werden.

Absolut: Enthält die lokale Adresse die Bezeichnung des Festplattenverzeichnisses und die Laufwerksangabe, dann ist das eine absolute Adresse. Es ist egal, wo die verweisende Seite sich befindet, die Zielseite wird unabhängig vom Speicherort der verweisenden Seite gefunden.

Relativ: Eine relative Adresse geht vom Speicherplatz der Seite, die die Adressangabe enthält aus. Es ist nicht egal, wo sich die verweisende Seite befindet, die Adresse der Zielseite wird wie ein Weg aus Blickrichtung der verweisenden Seite beschrieben. Befindet sich die Zielseite im gleichen Verzeichnis wie die Seite mit der Adresse, gibt es gar keinen Weg, die relative Adresse nennt dann nur den Dateinamen der Zielseite.

Der Unterschied soll mit der Navi und deiner Festplatte mit KompoZer gezeigt werden.

Der oberste Link in der Navi "Diese Seite" ist der interne Verweis auf den äußeren Rahmen mit dem ID-Selektor #rahmen. Dieses Ziel kann im Dialog 'Link-Eigenschaften' (Öffnen des Dialogs mit einem Doppelklick auf "Diese Seite"), relativ oder absolut angeben werden. Hierzu das Häkchen im Dialog bei 'URL relativ zur Seitenadresse' setzen und entfernen. Die absolute Adresse ist die mit der Festplattenangabe. Diese wird für den nächsten Auftrag benötigt, also so stehen lassen.

| Geteilte Ansicht | In der Navigation den obersten Link doppelklicken | Dialog 'Link-Eigenschaften | Das Häkchen  bei 'URL relativ zur Seitenadresse' entfernen. (Jetzt steht die absolute Adresse in der Eingabezeile) | Das Häkchen wieder setzen. (Die relative Adresse ist jetzt komplettiert mit dem Dateinamen mit "seite12.html#rahmen" auch für alle anderen Seiten im gleichen Speicherort als relative Adresse und Sprungziel verwendbar) | Abschließend das Häkchen wieder entfernen, um absolut zu adressieren | OK |

c) Quelltext säubern

Bleibt später einmal die absolute Adresse beim Hochladen der Seite ins Internet erhalten, kann der Browser eines Besuchers den Sprung nicht ausführen, es kommt zu einem Fehler. Den Fehler kann KompoZer bereinigen. Alles Nähere zeigt die Aktionszeile.

| Linksklicken auf den obersten Link der Navi für die Anzeige der absoluten Adresse in der Quelltext-Teilansicht unten | Menü 'Extras' | Dialog 'Quelltext säubern' | Nur das Häkchen bei 'Lokale URLs mit relativen URLS ersetzen' setzen | Schaltfläche 'Säubern'  (Unter 'Bericht' sollte nun im Dialog eine 1 stehen, denn eine lokale URL wurde ersetzt) | 'Schließen |

d) Quelltext überprüfen

Das nächste Untermenü nach 'Quelltext säubern' ist im selben Menü 'Extras' das 'Quelltext überprüfen'. Dies kann angewendet werden, wenn KompoZer eine Internetadresse mit auf den Weg geben kann. Ist die geladene Seite nur auf der Festplatte vorhanden, funktioniert das nicht. Wird aber eine Webseite mit KompoZer geladen oder hochgeladen, dann wird bei dieser Quelltextprüfung der Markup Validation Service vom W3C  Konsortium aufgerufen. Das geschieht auch am Ende dieser Einheit mit Hilfe eines Badges zum Anklicken. Zum Probieren mit KompoZer eine der anderen Kurs-Einheiten als weitere Datei aus dem Internet laden und deren Quelltext mit KompoZer überprüfen.

| [Strg]+[Umschalt]+[F] | Datei "http://www.elew.de/kurs1a/seite11.html" eintragen | Schaltfläche 'Erstellen' | Menü 'Extras' | 'Quelltext überprüfen' | Neues Fenster 'HTML validator' liefert ein Ergebnis | OK | Datei schließen |

e) Badges für die Fußleiste

Unten in der Fußleiste "Sockel" soll der Text mit vier benutzerfreundlichen, weil anklickbaren Badges ergänzt werden. Zuerst erhalten die Badges ihre Originalgröße. Der Auftrag berührt das Verstecken oder Verändern der Größe einer Grafik. Versteckt sind die vier Badges (deutsch Kennzeichen) nicht richtig, nur geschrumpft auf 20x12 Pixel und daher in der rechten Spalte oben noch zu sehen. Beim Schrumpfen auf 1x1px sind sie quasi unsichtbar. Wer achtet schon auf einen Punkt? Mit KompoZers HTMLTag-Ansicht jedoch wird alles sichtbar. Zum Selbstprobieren.
In der Quelltext-Teilansicht können immer die Inlinestyles für width und height gesehen werden, wenn es gelingt das Image <img> anzuklicken. Auch zum Selbstprobieren.
Der Auftrag e) lautet nur: Die vier "Kennzeichen" doppelklicken und im Dialog beim Register 'Größe' den Radiobutton bei 'Originalgröße' setzen.

| Doppelklick auf die Grafik neben dem Text "KompoZer-Link" in der rechten Spalte oben | Dialog 'Grafik-Eigenschaften' | Register 'Größe' | Radiobutton bei 'Originalgröße' | OK | Diese Prozedur bei den drei anderen Badges darunter wiederholen |

f) Die vier Grafiken werden in den Sockel verschoben

Die vier Badges werden in einer Reihe nebeneinander durch ein Leerzeichen getrennt in die Fußleiste ganz unten verlagert. Die Grafiken sind dann aus der rechten Spalte entfernt.

| Die Grafik neben dem Text KompoZer-Link anklicken | Menü 'Bearbeiten' | 'Ausschneiden' | Ganz unten auf der Seite vor das Wort "Mit" klicken | Menü 'Bearbeiten' | 'Einfügen | Leerzeichen rechts daneben setzen | Die restlichen drei Badges auf die gleiche Art rechts daneben einfügen.

g) Die Badges werden verlinkt

Der Text "Mit .." in der Fußnote wird gelöscht. Es fehlen noch die Zieladressen für die Badges. Hierfür enthält der Dialog 'Grafik-Eigenschaften' das Register 'Link'. Wird der Dialog geöffnet, wird das Register 'Adresse' gezeigt. Da kann ein Blick auf die URL nicht schaden. Ist die Adresse nicht relativ, dann einfach per Hand durch Löschen des Absoluten relativieren. Im Register 'Link' sind die vier Zieladressen jedoch absolut, und zwar:

Für KompoZer: (kompozer_80x15_rollover.png)
http://www.kompozer.net/

Für W3C HTML 4.01: (valid_html401_80x15_rollover.png)
http://validator.w3.org/check/referer

Für W3C CSS: (valid_css_80x15_rollover.png)
http://jigsaw.w3.org/css-validator/check/referer

und für Validome HTML 4.01 in einer Zeile ohne Leerzeichen: (valid_html_4_0_1.gif)
http://www.validome.org/lang/ge/get/http://www.elew.de/kurs1a/seite12.html

| Zieladresse in die Zwischenablage kopieren | Auf die zugehörige Grafik doppelklicken | Dialog 'Grafik-Eigenschaften' | Bei der Gelegenheit prüfen, ob die URL relativ adressiert ist, ansonsten per Hand alle Festplattenangaben einfach vor dem Namen der Grafik löschen | Register 'Link' | Zieladresse eintragen | OK | Prozedur noch dreimal wiederholen |

h) Badges Extraklasse

Da in der allgemeinen Regel "a" ein display: block; steht, ordnen sich die Badges untereinander an. Die Links gehen dadurch auch bis zum Zeilenumbruch, also über die ganze Breite. Gut zu sehen beim Hover-Effekt mit dem braunen Hintergrund.

Die Kurs-Einheit soll nicht zu lang werden. Aus dem Typ-Selektor "a" könnte eine Klasse für sich werden, die nur für die Navi gilt. Dann wären die Badges den Effekt los, weil ohne Format. Stattdessen wird die allgemeine Regel für die Badges überschrieben. Dazu gibt es im internen Stylesheet schon die Klassen a.imtext und a.imtext:hover. Bei a.imtext wird display: block; durch display: inline; ersetzt. Damit ist es möglich, den Zeilenumbruch zu vermeiden. Der Hover-Effekt wird auf weißen Hintergrund umgeändert. So muss nur noch die Klasse zugeordnet werden.

| Badge anklicken | In der Statuszeile <a> rechtsklicken | Kontextmenü 'Klassen' | Regel .imtext per Häkchen zuweisen | Prozedur noch dreimal wiederholen |

i) Zum Abschluss ein radikale Layout-Änderung per CSS

Wie zu sehen war, geht eine durch display: block; simulierte Schaltfäche über die ganze Breite. Dadurch kann die Navi auch eine variable Breite einnehmen und ein flüssiges Layout geht dann auch mit zwei Spalten. Eine kräftige Layoutänderung auf zwei Spalten soll mit wenigen CSS Änderungen erreicht werden.

Die linke Spalte erhält 15% der Bildbreite und kommt nach rechts.
Die rechte Spalte erhält 83% der Bildbreite und kommt nach links.

| CSS Editor | Regel #links | Register 'Allgemein' , float:left; zu float: right; und width: 6.6em; zu width: 15%; ändern | Regel #rechts | Register Allgemein , float: right; zu float: left; ändern und width: 20em zu width: 83%%; | OK |

j) Schlusskosmetik

Die Überschrift noch auf das Wort "Validierung" mit dem Format <h2> kürzen und den Text der ehemaligen rechten Spalte am Anfang bis zu "Ist bekannt.." entfernen. Schließlich die nach unten gerutschen Mitte komplett nach Erledigung der Aufträge löschen. Dann nicht vergessen, die Seite mit Hilfe der Badges zu Validieren (deutsch: Gültigkeitskontrolle).

| In die Mitte, (diesen Rest hier), klicken | In der Stautszeile <div#mitte> linksklicken | [Entf] drücken zum Löschen | Text oben auf "Ist bekannt.." kürzen |

Mit KompoZer 0.8b3 mit den in 12 Einheiten erworbenen Techniken am 4.4.2010 erstellt und hochgeladen.