Layout

Question

Hallo,
wie schaffe ich es, dass das layout so ist, wie bei dieser Seite http://kita-consulting.de ??? Also das oben und links an der seite das bleibt und wenn man auf einen link klickt, dass sich nur die mitte verändert?

Answer 1

mach es so wie die Seitenersteller: nutze immer dasselbe Grundgerüst für die Seite. Und wenn du es besser machst als dein Vorbild erreichst du wirklich den gewünschten Effekt (bei mir springt das Bild bei jedem Unterseitenaufruf lustig über den Bildschirm, was ich als sehr unprofessionel empfinde)

katy

Answer 2

ja, aber wenn dus so unprofessionel empfindest, dann sag mir doch bitte, wie ich es eben professionel mache =)

Answer 3

Ist kita-consulting deine Seite? Falls nicht sollten wir uns nicht weiter damit befassen!

Wie du ein vernünftiges Seitenlayout hinbekommst kann ich dir natürlich nicht mal eben im Supportnet erklären.
Aber ich gebe dir einen Tipp: Lies SelfHTML und CSS4You.

katy

Answer 4

Hallo Lars,


zuerst solltest Du Dir darüber bewusst werden, wie groß Deine Seite werden soll.

Wenn Du jetzt sagst "2 bis 3 Seiten, die sich extrem selten ändern", dann empfehle ich den Aufbau der Seite über ein selbstgeschriebenes Grundgerüst auf Basis von html, css und php, mehr dazu später.

Sollte die Seite etwas grösser werden, empfehle ich Dir, Dich direkt mit einem sog. "Content Management System" - kurz CMS - vertraut zu machen. Für kleinere bis mittlere Seiten habe ich da mit "moziloCMS" gute Erfahrungen gemacht, für grössere Seiten mit mehreren Autoren schaue ich mir gerade "Joomla! an.
Vorgehensweise bei einem CMS ist immer gleich:
[list]
[*]Das CMS wird auf dem Webspace installiert (eventuell benötigt es MySQL-Datenbanken)
[*]Ein sog. Template (Design-Vorlage für alle Seiten) wird erstellt
[*]Inhalte werden eingepflegt (das sind dann die einzelnen Seiten)
[*]Besucher rufen die Seite auf, die Inhalte werden vom CMS in das Template geladen und der Besucher sieht eine hübsche Seite
[/list]
Du siehst, ein CMS erfordert etwas mehr Einstiegsarbeit, ist danach aber wesentlich pflegeleichter...

Für eine kleine private Seite würde ich "moziloCMS" nutzen, wenn Du die Einarbeitung nicht scheust, ansonsten funktioniert auch das selbstgeschriebene Grundgerüst.

Die Vereinsseite www.malteser-emsdetten.de habe ich z. B. mit einem solchen Grundgerüst aufgebaut. Im Grunde habe ich die Bereiche, die auf jeder Seite gleich auftauchen, in einzelne Dateien ausgelagert. In einem Ordner "includes habe ich also die Dateien "header.php", "menu.php" und "footer.php" für die Kopfzeile, das Menü und für die Fußzeile.
Die einzelnen Inhalts-Seiten binden diese Dateien über folgende Zeile ein:

<?php include (/includes/header.php'); ?>

Das ist php-Code, den sollte jeder Webserver interpretieren können. Diese Zeile holt praktisch den Inhalt der eingebundenen Datei an genau diese Stelle der Inhalts-Seite. Natürlich müssen die anderen beiden Dateien auf gleiche Art und Weise eingebunden werden.
Wichtig für eine korrekte Darstellung der Seite ist dann noch die Ausrichtung der Inhalte. Ich arbeite nur noch mit sog. div-Containern (siehe selfhtml.org), diese haben je eine ID, der per css (lies hier: www.css4you.de/)eine bestimmte Formatierung und Positionierung innerhalb der Seite zugewiesen wird. Wenn man das erst einmal verstanden hat, ist es eigentlich ganz leicht!


MfG, Jan

Answer 5

@JanSchmitte:

Das ist php-Code, den sollte jeder Webserver interpretieren können.

nein, das sollte er nicht. Genau genommen sollte PHP-Quellcode niemals beim Browser ankommen.

Wozu braucht eine statische Seite mit 2-3 Unterseiten deiner Meinung nach überhaupt PHP?

Und wenn du behauptest, dass das SelfHTML-Team DIV-Container befürwortet befindest du dich mächtig auf dem Holzweg (sorry für die Wortwahl). So etwas wird bei SelfHTML als DIV-Suppe bezeichnet - und das ist nicht positiv gemeint. Die Alternative dazu ist semantisches HTML. Und das bedeutet: zuerst schauen, ob es nicht ein Element gibt, das genau das beschreibt, was an dieser Stelle auf der Seite stehen soll, also eine Überschrift (in korrekter Hierarche), eine Liste, ein Absatz, ein Zitat, usw. Danach sind schon so viele Tags auf der Seite, dass DIVs fast überflüssig sind.

katy

Answer 6

Hallo Katy,


nur für's Protokoll:

Ich habe niemals geschrieben, dass php vom Browser interpretiert wird. Wie ich geschrieben habe, der php-Code wird vom Webserver interpretiert und - platt gesagt - in html umgewandelt. Dieses html-Dokument wird dann an den anfragenden Browser geschickt, der dieses dann "zuhause" darstellt.

Wozu ich das php benutze, habe ich eigentlich recht ausführlich beschrieben: Zur Einbindung immer wiederkehrender Inhalte in eine Seite (ohne Framesets). Hat den ganz entscheidenden Vorteil, dass man Änderungen an diesen wiederkehrenden Teilen auch nur in einer einzigen Datei - nämlich der eingebundenen - machen muss und nicht in jeder Inhaltsseite auf's neue!

Ich habe ebenfalls nie behauptet, dass DIV-Container von selfhtml oder sonst wem empfohlen werden, das ist meine Empfehlung.
Trotzdem wird - soweit ich mich erinnere - die Positionierung von bestimmten Inhalten per DIV-Container auch von selfhtml zumindest bevorzugt, man korrigiere mich, falls ich falsch liege...


Wie jetzt bereits mehrfach geschrieben, das ist meine Meinung. Ich behaupte nicht, dass dies der eine, richtige Weg ist. Viele Wege führen zum Ziel, manche eher, manche später...


MfG, Jan

Answer 7

Hallo Jan,

na, du hast hier ja wohl einen Fan für die "Gute Antwort"-Klicks. Bzgl. PHP und Webbrowser lag wirklich ein Lesefehler meinerseits vor. Sorry.

Wozu du hier aber überhaupt PHP bei statischen Seiten ins Spiel bringst bleibt mir immer noch verborgen. Bei wenigen Seiten (bis 10 halte ich für praktikabel) reicht es meiner Erfahrung nach, die wiederkehrenden Teile einfach per Copy&Paste in den einzelnen Dokumenten anzupassen. Gute Editoren erlauben dabei die simultane Änderung an mehreren offenen Dateien.
Auch CMS ist nicht für alles die Lösung, es schafft anfänglich eher zusätzliche Probleme. So vermute ich, dass die 48 HTML-Fehler auf deiner Startseite eher ein CMS-Problem sind.

Bei SelfHTML gibt es in der Tat viele Beispiele, die CSS-Eigenschaften speziell an DIVs darstellen. Das ist aber alles andere als so zu interpretieren, dass DIV und CSS zusammengehören. DIVs sind eine Krücke, die genutzt wird, wenn nix anderes passt. Und als solche sind sie natürlich auch prädestiniert für Beispiele in CSS oder JavaScript - als eine Krücke, die passend gemacht werden kann. Wie so vieles bei SelfHTML ist das generell zu hinterfragen, weil es Anfänger auf den Holzweg führen kann, und vielleicht wird es im gerade entstehenden SelfHTML 9 ja auch geändert.
Semantisches HTML hat gegen DIV-Suppe den Vorteil, dass Suchmaschinen eher das Wesentliche finden, zB. in den Überschriften.

katy

Answer 8

Wir haben beide unsere "Gute-Antwort"-Fans... ;-P


Ich denke, wir sollten die Diskussion an dieser Stelle abbrechen, da sie Major Lars wohl eher verwirrt als hilft...

Was jetzt letztendlich als "richtige" Lösung anzusehen ist, weiss ich nicht, ich habe nur dargestellt, wie ich ein ähnliches Problem angegangen bin...
Und die 48 Fehler auf meiner Startseite rühren noch von meinem selbstgeschriebenen php-Grundgerüst, die Seite ist noch nicht auf ein CMS umgestellt.


MfG, Jan