Kurs 1-08

Für diese Seite wurden 7 Tabellen 1x2 mit blauem Rand und eine blinde in eine große Blindtabelle, 3x11, gesetzt.
1. Die große Blindtabelle: In der obersten Reihe wurden die 11 Zellen zu einer verbunden und mit einer horizontal gekachelten Grafik verziert. Per inline style kann jeder der vier Ränder einzeln formatiert werden. Hier gibt es nur eine solide blaue Linie von 1 px, diejenige darunter.
Es gibt noch eine weitere Grafik auf der Seite, als Hintergrund zu <body>, auch horizontal gekachelt.
Die zweite Reihe dient der horizontalen Navigations-Leiste. Die 10 Zellen rechts enthalten nur die verlinkten Texte. Die Farbe wurde auf blau, grün und rot gesetzt (wie Blatt 34 oben erklärt). Die linke Zelle, die erste von 11 Zellen, enthält ein 1x1 Pixel großes transparentes Gif, das per inline style (Dialog Grafik Eigenschaften) auf 80px Breite und 1px Höhe vergrößert wurde. Ein solches Blindgif stabilisiert das Tabellengerüst und kostet mit 49Byte, die nur einmal geladen werden, kaum Ladezeit. Hier hält es die linke Spalte konstant auf 100 Pixel Breite. Das geht auch anders, aber ich wollte mal eine 1x1 pixel große transparente Grafik endlich mal verwenden.
In die dritte Reihe wurde in die linke Zelle eine Blindtabelle 1x8 für die senkrechte Navigation gesetzt. Diese Blindtabelle hat in jeder Zelle einen Text als Link. Das eben erwähnte Blindgif sorgt für die ganze Spalte dafür, dass die Spalte und damit die Navi immer gleich breit aussieht.
Zellen 2 bis 4 der dritten Reihe wurden zu einer Zelle verbunden und erhielten diese Tabelle 1x2, in der dieser Text steht.
Zellen 5 bis 7 wurden auch zu einer verbunden und erhielten vier Kopien dieser Tabelle im Quelltext, genauso wie in die zu einer Zelle verbundenen Nr. 8 bis 11 der dritten Reihe zwei dieser Tabellen kopiert erhielten. Alle drei "Überzellen" wurden per inline style auf 30% gesetzt.

2. Diese Tabelle, in der dieser Text hier steht, hat per inline style einen blauen Rand von 1px erhalten und Abstände von 3px nach außen (genannt margin) und 1px nach innen (genannt padding). Die Abstände werden von Firefox und IE verschieden bewertet.

Für den Firefox ließen sich alle Texte auf Blocksatz ausrichten. Damit das aber auch beim IE einen Blocksatz ergibt, wurden die Tabellen innerhalb der großen Zellen jeweils in einen div-Container mit align=justify gesetzt.

Im Laufe der Arbeit an dieser Seite zeigte sich, dass die perfekte Seitenaufteilung im Firefox vom IE nicht präsentiert wurde. Deshalb wurden die drei großen Zellen mit den Tabellen drin per inline style und Box-Eigenschaft auf 30% eingestellt. Bitte mit schmaler werdendem Browserfenster das Layout testen.
Der blaue Rand der zwei Tabellen rechts wollte beim IE partout nicht erscheinen (Boxfehler im IE !?). Als Workaround erhielt der div-Container ganz außen rechts ein padding von 10px und drückt die Tabelle nun nach innen nach links.

Wo steht der Mensch mit dem Gelernten

Was kann denn Seite 7 nun nützen? Da gab es den schon erwähnten Besucher im Nvu-Forum mit dem Ladeproblem von 1GB für eine Seite. Meine Lösung damals steht jetzt hier und in Schottland auf dem Server, war also brauchbar. Da ändere ich sie gerne mal auf das Jahr 2007. Beim Stundenplan weiß ich das nicht, der bleibt so, aber als ich noch selbst in Schule tätig war, habe ich immer für Ankündigungen im Internet plädiert. Der Hotel-Belegungsplan hat als Besonderheit eine Bildlaufleiste, um das Kalenderfenster einzugrenzen. Siehe die Klasse "scroll" für den umgebenden div-Container. Dadurch kommt das Formular ins Blickfeld des Nutzers. Nur dass da noch kein Formular zu sehen ist, denn das kommt erst jetzt dran.

Weiter im Kurs

Blatt 31 bis 35 nur durchlesen, angewendet wurde das alles schon und Frames auf Blatt 36 wird weggelassen.

Formular

Das Wort MITTEILUNG wird als Platzhalter geschrieben, markiert und dann wieder wie oben im Bild rechts auf Blatt 37. Um das Wort MITTEILUNG liegt jetzt die gestrichelte Formularfeld-Linie und da kommt mit Menü Einfügen / Formular... / Formularfeld.../ Auswahl Feldtyp ein Textfeld und ein Abschicken-Button untereinander hinein und ein Hintergrund dazu. Fertig ist das rosa Formular hier drunter.
Nach Absenden dieses Formulars wird das eMail-Programm mit der Adresse info@weiss.nix gestartet, das die Mitteilung enthält. Mehr nicht. Der Nutzer müsste eine solche eMail extra absenden, das ist also weniger als erwartet. Moderne Browser werden jedoch diese Mitteilung als eMail an info@weiss.nix senden können.

Näheres zu <form>

<form> und </form> begrenzen das Formular. Dazwischen dürfen HTML-Tags für Textabsätze oder Tabellen stehen. Dazwischen gehören aber vor allem die Formfelder verschiedenen Typus, ausgewählt und defniert per Nvu Dialog, nämlich die Textfelder, Auswahllisten, Beschreibungen und Schaltflächen, eingefügt per Nvu-Menü.
Das Formular benötigt einen Empfänger, enthalten in <action="adresse">. Adresse ist die Webadresse, an die die Daten gesendet werden. Unter dieser Adresse muss es auf dem Webserver ein Programm geben, dass die Daten annehmen und verarbeiten kann. Das kann u. a. das Starten eines Suchvorganges, Weiterleiten an eine eMail-Adresse, Verlinken, Auslösen einer Bestellung, Eintragung in ein Gästebuch und v.m. sein.

Zur Formular-Datenübertragung

Der Server muss in der Lage sein, Daten aus dem Formular anzunehmen und zu verarbeiten. Provider stellen hierzu CGIs (CGI = Common Gateway Interface) zur Verfügung. Das Formular sendet z.B. die Daten und die CGI-Anwendung speichert diese Daten als Datei auf dem Server ab. Mit Nvu oder deinem FTP-Programm holst du dir diese Datei auf deine Festplatte. Oder das Formular sendet Daten und die CGI-Anwendung sendet sie als eMail an die angegebene Adresse weiter.
Provider bieten hierzu eine FAQ oder Hilfen für die CGIs an, z.B. auch einen Formularbaukasten. Bei höheren Gebühren ermöglichen sie auch die Einbindung eigener CGIs.
Ein Merkmal ist, dass du mit der Nvu-Seitenverwaltung oder deinem FTP-Programm auf der Serverseite ein Verzeichnis cgi-bin oder cgi-local sehen kannst. Solch ein Verzeichnis muss der Provider selbst einrichten.
So geht eMail-Feedback bei Loomes
So geht eMail-Feedback bei Strato
So geht eMail-Feedback bei Arcor.de
(Das ist keine Werbung und Klicks bringen mir nichts ein. Kopiere mein Nvu-Rezept und ändere es auf deinen Provider, und ich setze es mit deinem Namen hier ein.)
Wenn der Provider serverseitig PHP-Programme unterstützt, ergibt sich mehr Kontrolle durch selbst aufgespieltes PHP. Aber das ist nicht das Anliegen im Kurs1. JPO_2005 hat zu PHP im Nvu-Forum ein Tutorial eingestellt. Viel Spaß, falls du ein kostenloses PHP-Script für ein Formular verwendest.

Auftrag 8

Baue mit Nvu ein Formular auf Tabellenbasis ohne Tabellen nach
(Webadresse öffnen... http://www.elew/kurs1/auftrag08.html) und kehre dann wieder hierher zurück.

Mein Ergebnis habe ich im Quelltext von allen inline styles befreit, mit einer Ausnahme, dem 107px-Abstand des Formularfeldes "Name" und habe sie zum internen style sheet verschoben. Du kannst das als Zusatzaufgabe üben und wirst Schreibfehler ausmerzen müssen. Gib nicht gleich Nvu die Schuld, denn eigentlich soll dich Nvu vom direkten Editieren befreien. Du hast die Möglichkeit, inline styles zu extrahieren und per Mausklick allgemeine styles anzulegen mit Nvu geübt. Aber CSS lernen geht auch per Handarbeit.

Der Kurs wird mit Seite 9 fortgesetzt.