Danke PeterG für das Zusenden des ehemaligen Codes. Alles zurück, frames werden nicht unterstützt.
Lade ich den Code, gibt es die besagte Fehlermeldung. Überschreibe ich den Quelltext einer Nvu-Seite mit diesem Code und speicher ich ihn mit Nvu, zeigt Nvu seine Stärke im Quelltextändern und erzeugt, wie immer, validen Code. Aber ohne frames. Warum da nun ein Unterschied besteht, soll jemand anders untersuchen, frames sind für mich Zeitverschwendung. Ich schreibe dir lieber was zu div-Containern auf:
Basis-Layout mit div
1. Wähle in der Auswahlliste ganz unten für das Absatzformat (die Auswahlliste direkt unter der Öffnen-Schaltfläche) den 'Generic container (div)' aus.
Nvu-Anwender schalten noch Menü Ansicht / Bereichskonturen ein, KompoZer und Nvu zeigen nun einen Bereich an, den (ersten) div-Container.
2. Schreibe in diesen Bereich A D B C E hinein, in 5 Zeilen untereinander. Die Höhe wächst mit und seine Pixel-Größe wird in den beiden Linealen angezeigt.
3. Ziehe die untere Kante des Lineals links auf 500px runter und schiebe die obere danach um 20px runter, so dass 480px die Höhe des Containers ist. Schiebe das waagerechte Lineal links um 100px nach rechts und dann die rechte Kante um 100px nach links, so dass die Breite jetzt 200px schmaler ist als vorher und links und rechts ein 100px breiter Rand bleibt.
4. Markiere die 4 Zeilen D bis E und wähle wieder wie bei 1. 'Generic container (div)' aus.
5. Wechsel in den Editiermodus 'Quelltext' (3. Register von links, unten) und siehe dir mal dein A bis E an:
Du hast mit deiner Maus per Auswahlliste öffnende tags <div> vor deine Buchstaben und das schließende tag </div> jeweils dahinter einsetzen lassen. (tag, Englisch = Preisschild, Etikett, Auszeichnung). In der Auszeichnungssprache (tag-Sprache) HTML ist das div ein Blockelement. So eines kann auch sich selbst enthalten. Es wird auch div-Container genannt. Der erste Container hat per Maus und Lineal seine Abstände nach oben und links erhalten und Höhe und Breite. Er enthält das A und einen Zeilenumbruch <br>. Ausserdem umfasst er noch 4 weitere Container mit je einem Buchstaben. Speicher das ab, du wirst nach dem Titel der Seite gefragt und nach dem Speicherort. Danach wechselt Nvu/KompoZer aus dem Editiermodus Quelltext immer zurück in den Editiermodus Normal.
6. Klicke an das B. Unten in der Statusleiste siehst du <body> <div> <div>. Linksklicke in das rechte <div> und der Container mit dem B wird in Gänze markiert. Schiebe dessen Breite auf 100px nach links zusammen.
7. Damit B und C auf gleiche Höhe schweben, werden sie gefloatet (to float, Englisch = treiben, schweben, flößen, in Umlauf setzen) Markier wieder das B und diesmal rechtsklicke in das zughörige <div> in der Statuszeile.
8. Per Kontextmenü kommst du über Inline Styles über Box (KompoZer: Register Box)(Nvu: Sub-Kontextmenü Box-Eigenschaften) zu Puffer. Wähle Puffer:Links. Sofort schwebt das C daran hoch. Die Breite von 100px hst du per Maus eingetragen und kannst sie evtl jetzt nachbessern.
9. Kopiere beliebigen Text (z.B. von hier die Nr. 1 und 2) hinter das C. Damit der Container links seine Kante behält markiere C und rechtsklicke unten das zugehörige <div>.
10. Per Kontextmenü kommst du über Inline Styles über Box zu den Außenabständen.(Bei Nvu: Raender) Wähle Außenabstände, bzw. Raender mit links und rechts jeweils 110px. Schiebst du den Dialog zur Seie, kannst du die Wirkung sofort beobachten.
11. Klicke an das D und schiebe diesen Container auch auf 100px Breite nach links zusammen. So wie B links floatet, soll D die anderen Container rechts floaten. Linksklicke an das B und rechtsklicke unten das zugehörige <div>.
12. Per Kontextmenü kommst du über Inline Styles über Box (KompoZer: Register Box)(Nvu: Sub-Kontextmenü Box-Eigenschaften) zu Puffer. Wähle Puffer:Rechts. Sofort schwebt D nach rechts auf gleiche Höhe mit B und C.
13. Der Ordnung halber soll bei E das Floaten aufhören. Linksklicke an das E und rechtsklicke in der Statuszeile auf das zugehörige div. Per Kontextmenü kommst du diesmal über Inline Styles über Box (KompoZer: Register Box)(Nvu: Sub-Kontextmenü Box-Eigenschaften) zuR Aufhebung (bei Nvu: Clear). Wähle Aufhebung bzw. Clear: Links.
14. Abschließend speichern. Fertig ist ein Layout für ein Banner bei A, ein Menü in B, die Botschaft in C, die Google-Ads in D und eine Fußleiste in E. Die Seiten lassen sich per Maus und Lineal in den Breiten deinen Zwecken anpassen. Die Mitte nimmt immer an Breite was übrig bleibt, so dass verschiedene Besucher ruhig verschiedene Bildschirmbreiten haben können. Das Layout passt sich dem immer an.
Eine Anzeige mit deinem Browser zeigt die schwebenden Buchstaben als Platzhalter.
P.S. So ist auf die Schnelle fast ein Tutorial entstanden, das gar nicht hierher gehört. Seit langem warte ich (vergeblich) auf einen Wunsch, was im Kurs als Nächstes dran kommen kann/sollte. Da nehme ich mal dieses "tut" und mach daraus Aufgabe 7, das Arbeiten mit Nvu/KompoZer-Vorlagen. Hier erst mal FF (viel Vergnügen).
Ergänzung am 27.1.09: Heute ist die
1. Fassung davon fertig geworden. Da sind dann auch Bilder dazu zu sehen.
