Layouttabellen vermeiden

[soleil83]

Hallo,
ich habe folgende Frage: Wenn ich eine Seite entworfen habe, die man hauptsächlich durch Grafiken realisieren kann, hab ich es bisher immer durch Tabellen organisiert.
Da dies ja nicht die eleganteste Lösung ist, würde ich gerne das Design vom Inhalt trennen und Layouttabellen vermeiden (mit css).

Aber wie sind denn solche Seiten aufgebaut? Sitzen die Grafiken dann als body-Hintergrund oder in divs auf der Seite? Ordne ich Texte dann auch in div-containern an? Lasse ich Tabellen komplett weg oder setze ich die Texte trotzdem in Tabellen um sie richtig zu platzieren?

Außerdem verzichte ich auf Frames. Muss ich dann jede neue Seite auch immer komplett neu laden lassen (inklusive navi ect.) oder gibt es ne möglichkeit, das ähnlich wie bei Frames, immer nur ein Teil neu geladen wird?

Bräuchte ne kleine Anregung, vielleicht auch links, wie ihr sowas realisiert...

Vielleicht fällt dazu ja jemanden was ein :-)

Liebe Grüße, Antje

[Rinaldo]

Schau Dir mal die Beispiel-Layouts von CSS4You an.

Die Aufteilung erfolgt, wie Du ja bereits vermutet hast, mit DIVs. Texte, Grafiken und sonstiger Inhalt wird in diesen plaziert.

Die DIVs werden, genau wie alle Texte, Links, etc., mit CSS formatiert (Größe, Hintergrund, etc.).

Wenn Du diese Variante des Designs nimmst, wird die komplette Seite immer neu geladen (was aber durch den Cache nicht lange dauern sollte).

Eine Frame-ähnliche Möglichkeit ist diese: mit PHP-Include Seiten einzubinden - aber damit kenn ich mich leider nicht wirklich aus .

Ich hoffe, dass ich Dir dennoch etwas weiterhelfen konnte.

[walter]

Eine gute Entscheidung!

Zu den Frames:
Wenn du keine Frames verwendest machst du schon mal den Schritt in die richtige Richtung. Es wird dann jede Seite neu gelade, naja, eigentlich nur die Grafiken die noch nicht im Cache (Zwischenspeicher) des Browsers sind. Also doch nicht die ganze Seite. Das ist völlig ok so.
Alternativ könnten einzelne Teile der Seite nur ausgetauscht werden (also wie bei Frames). Dies passiert mit PHP, indem verschiedene Teile der Website "includet" werden. Aber vergiss das erst mal.

Zum tabellenlosen Layout:
Bilder werden auch als Bilder, also "img" eingefügt. Layoutbilder werden als Hintergrundbild in Container gepackt. Kontainer, Boxen, Layer = divs.
Texte werden nicht in Tabellen gepackt, außer es sind tabellarische Daten. Texte gehören in p, h1, h2, h3, .. - Tags

Das komplette Design (Abstände, Positionierungen, Schriftfarben...) wird mit CSS festgelegt.

Ein guter Link:
http://www.css4you.de/

Besonders das ist interessant:
http://www.css4you.de/wslayout1/index.html

Viel Spaß!

[soleil83]

cool, danke für eure antworten
was ich jetzt noch nicht ganz verstehe ist, wie ich den text dann an bestimmte stellen kriege, wenn sie nicht in div's stehen. der text muss ja wissen, wo er hingehört. das sagt ihm ja <p> und <h1> nicht. deshalb dachte ich der text wird auch in container gepackt, denen man dann sagt - du stehst jetzt an position x und y.... is das richtig?

ich sende demnächst ma nen link zu ner seite, so wie ich mir das vorstelle. is aber noch nich fertig.

wie groß sollten eurer meinung nach bilder für die hintergrund dateien höchstens sein?

meine 3 Bilder wären 6,345 kb, 4,997 kb und 5,728 kb groß.

is das okay für die ladezeit?

[Rinaldo]

<p> zeichnet ja in HTML nur einen Absatz aus.
<hX> eine Überschrift.

Das hat mit der Positionierung auf der Seite nichts zu tun.

Deine Texte stehen ja in DIVs - darin kannst Du sie wie gewohnt auch zentrieren, fett, etc. darstellen (mit CSS formatiert ).

Die Ladezeiten bei den kleinen Größen ist völlig ok, da sollten selbst Modem-Benutzer nicht zu lange warten, denke ich jetzt mal.

[soleil83]

Ja wundervoll. Gut, dann habt ihr mir schon mal sehr weitergeholfen. Dann kann ich ja loslegen wie wild ;-)