Arbeiten mit dem KompoZer unter Windows, Seite 6
  Tabelle mit Hintergrundbild
Meta-Infos zu dieser Seite

War das nötig, wegen einer kleinen Vorführung 5 Seiten Vorlauf zu verfassen? Eigentlich nicht, nur hat sich angeboten mit der Vorlage aus Kurs1 mal ein mehrseitiges Web wirklich nur mit KompoZer zu erstellen und dabei mal an den KompoZer-Neuling zu denken.

Fazit, was die Störanfälligkeit von KompoZer angeht:
Die gibt es. Zweimal beim Speichern auf die Festplatte war die CSS-Formatierung verschwunden. Seite schließen und neu laden, kein KompoZer-Neustart, war Abhilfe genug.

Fazit, was die Bedienung angeht, sehr komfortabel.

Fazit dauerndes Hochladen und gelegentliches Runterladen:
Ein Fehler. Auf Publizieren geklickt ergab keine Reaktion. Seite schließen und neu laden war Abhilfe genug.

Seite 6: KompoZer läuft, das Projekt Webprojekt 1 ist für das Hochladen von test.html und clown.jpg erfolgreich benutzt worden. Doppelklicke auf test.html in der Seitenverwaltung und lösche das Foto. Bei mir befindet sich der Text in der zweiten Zeile. Speicher die Seite auf der Festplatte mit Menü 'Speichern unter...' / test1.html / Speichern.

Klicke irgendwo in Hallo Welt hinein. In der Statuszeile erscheint <span>. Linksklicke in dieses <span>. Dadurch wird Hallo Welt zu 100% markiert und nur das Hallo Welt allein.In der Bearbeitungs-Symbolleiste auf das Symbol Tabelle klicken und  im Dialog die Einstellungen wie im Bild wählen. OK. Eine Tabelle mit zwei Zeilen und einer Spalte ist entstanden.

Tabelle mit zwei Zellen-Vorbereitung
Wenn jetzt in Hallo Welt geklickt wird, steht in der Statuszeile rechts nicht mehr <span> sondern <td>. Die Wörter stehen jetzt in einer Zelle <td> der Tabelle.  Klicke eine Zeile höher in die leere Zelle und in linksklicke in dessen <td> davon in der Statuszeile. Das <td> ist markiert, in Gänze, und der Mauszeiger ist verschwunden. Rechtsklicke in dieses <td>. Im Kontextmenü wähle 'Inline Styles'. Es erscheint der Dialog 'Inline Styles' für das gewählte Format <td>.

Wähle das Register 'Hintergrund'. Durchsuche die Festplatte nach dem Bild.
In dem Moment, wo du das Bild angibst, wird es in der Vorschau und in der Zelle angezeigt. Überlagert der Dialog diese Stelle, schiebst du ihn am oberen blauen Balken mit der Maus weg. Wähle das Kacheln und das Häkchen wie im Bild. Die Bildadresse ist wieder absolut, was gleich geändert wird. OK.

Hintergrundbild einfügen

Um die absolute Bildadresse von deiner Festplatte zu lösen, linksklicke auf das <td> mit dem Hintergrundbild. Wechsel nun in den Quelltext. Das markierte <td> ist auch im Quelltext markiert und daher leicht zu finden. Lösche aus der Adresse von url-Klammer alles Absolute, so dass nur noch stehen bleibt url(clown.jpg). Damit ist das die gewünschte relative Adresse. Lasse alles andere im Code wie es ist und speicher die Seite. KompoZer wechselt beim Speichern immer in den Editiermodus von vorher zurück.

Schiebe mit den beiden Linealen die Breite und die Höhe auf 400px. Bei etwas mehr siehst du weißen Überstand, bei etwas weniger lasse es dabei.

Klicke in das Bild und schreibe "Let's get down and party!" (Die rote Diskette sagt, speicher mal wieder, also klick auf das Symbol 'Datei lokal speichern'.)
Die Schrift wird noch mit Inline Styles formatiert. Vorschlag: siehe mein Bildschirmfoto. Um zu diesem Dialog zu finden, rechtsklicke auf <td>, wähle Inline Styles und im Dialog das Register 'Text'. / OK. Blinken kann der IE7 nicht. Aber Firefox und Opera bringen es.

Textformatierung

Zum Abschluss wird noch Hallo Welt vernichtet. Linksklicke in Hallo Welt und linksklicke in das zugehörige <tr> (table row). Mit [Entf] wird die ganze Tabellenzeile gelöscht. Speicher das Ganze als test2.html und publiziere test2.html ohne die Grafik hinzuzufügen. Glückwunsch!

Meine Kontrollseite ist http://huscholz.bplaced.net/test2.html. Sie hat noch zusätzlich die Web badges von KompoZer.

Weiter mit E-Mail an tut at huscholz punkt de. Dann geht es weiter. Ich weiß von vielen Schwierigkeiten, ich hätte da auch einen Bonus-Pack zu diesem Tutorial, aber wozu? Nur wenn du einen Wunsch, einen Vorschlag, Kritik oder Fragen hast, geht es weiter oder nach oben.

Gästebuch zum Kurs1 Blog mit Hintergründen zum Kurs1 Weiter zum Kurs1 Startseite