Newbie: Layout bekommen, wie fang ich an?

[Lengen1971]

Hi,

ich hab ein Layout bekommen wie in der Grafik. Ich hab mir die Video2Brain Typolight Sachen alle angesehen, aber weiß trotzdem nicht, wie ich jetzt beginnen soll. Typolight ist installiert, DB eingerichtet, ich bin im Back-End...

*puh

Grüße

[n!ck]

Grüß Dich,

die TYPOlight DVD ist schonmal ein guter Anfang um einen Überblick zu bekommen. Wenn es um eigene Layouts geht empfehle ich Dir noch das "Design-Buch zu TYPOlight: Mit TYPOlight Webseiten erfolgreich gestalten" als PDF - lohn sich wirklich!

Um Dich aber nicht nur auf eine Lektüre zu verweisen hier die ersten Schritte:

Seitenlayout anlegen und Seitenstruktur festlegen (= Seiten anlegen). Dann legst Du Dir ein neues Stylesheet an in welchem Du dann die IDs und Klassen entsprechend anpasst. Tolles Plugin hierzu ist FireBug für Mozilla Firefox.

Ich bevorzuge es allerdings nach wie vor das Layout erst von Hand zu schreiben. Dann übernehme ich Step-by-Step HTML und CSS in TL.

Ich kann Dir wirklich nur anraten obiges PDF zu kaufen. Mir hat es wirklich super geholen. Meine erste TYPOlight Seite hat einen recht komplexen Aufbau was ich ohne große Probleme hinbekommen habe.

[StephanP]

Hi,

ich hab ein Layout bekommen wie in der Grafik. Ich hab mir die Video2Brain Typolight Sachen alle angesehen, aber weiß trotzdem nicht, wie ich jetzt beginnen soll. Typolight ist installiert, DB eingerichtet, ich bin im Back-End...

*puh

Grüße

Hallo Lengen,

um deine Vorlage so umzusetzten muesstest Du dir ein Template erstellen - schau dir unter templates die fe_page.tpl an und modifizer sie dir mit eigenen Layoutbereichen. Dann geht das relativ schnell von der Hand.

Gruß und viel Erfolg,

Stephan

[MacKP]

Ne, da brauch man keine eigenes Template (kann man aber machen).
Die 2 Bereiche Logo und Navi kommen einfach in den Linken Div. Der große oben mit den Bildern ist der Header. Dann noch #main und right für die weiteren Bereiche.
Der rest ist CSS geschubse, damit der Header nicht die ganze Breite einnimmt.
#links brauchst du dann nur 2 Module hinzufügen (einmal für Logo und einem für Navi), dann hast du das auch da passend.

Hier ist auch noch mal ein Schnelleinstieg wie man anfängt -> http://de.contaowiki.org/Die_erste_Webseite

Viele Grüße

[psren]

Wenn du dich noch nicht so auskennt mach am besten mal eine Art Testseite, ohne das Template fe_page selber zu verändern

[Lengen1971]

Hallo Community,

danke für eure vielen Tips, ich bin ja überwältigt ;-)

Ich hab die komplette Video2Brain Lehrgang durchgemacht, das kann man aber kaum auf ein realistisches Projekt anwenden.

- fe_page hab ich eingebunden, kann aber nix sehen... äh, wo änder ich jetzt die Bereiche?
- FireBug läuft mit, was ja vom V2B auch empfohlen wurde.

@MacKP: ich versteh nur Bahnhof, aber ich geh mal deinem Link nach...

Bis bald (im Irrenhaus...)
Gruß
Michel

[psren]

MacP meint (wenn ich das richtig deute) dass du eben nicht wie im V2B video an der fe_page ändern musst.

Im Seitenlayout:
Logo, Navigation -> Linke Spalte
content -> Hauptspalte
weiterer Content -> rechte Spalte
Header (grafiken...) -> Kopfzeile
dann mit CSS den Header (#header) verkleinern und rechts anordnen
dann mit CSS die Linke Spalte (#left) nach oben schieben

So meinte er es glaube ich?!

[MacKP]

Jap, so meinte Er das ;-)

Viele Grüße

[Lengen1971]

Hi,
ich hab jetzt den #header nach rechts verschoben. Was jetzt natürlich passiert ist, dass mir ein "echter" Header fehlt. Also, eine Zeile ganz oben drüber.

neues Layout anbei.

Gruß
Michel

[MacKP]

Ah, da soll noch ein Header sein...
Hmmm...
Dann würde ich den kleinen 2. Header im Main Bereich unterbringen und mit Position (CSS)arbeiten. Dann natürlich den rechten Bereich mit margin-top auch etwas anders schieben.
Oder: Du machst nur 2 Spalten und dann den Mitteleren und Rechten Bereich in die Mitte. Da kannst du dann mit Subcolumns trennen.. ist nur etwas mehr Aufwand wie ich finde, da man das dann überall machen muss. Wäre dann aber flexiebel wenn jede Unterseite da anders sein soll.

Viele Grüße