Anzeige
Tutorialbeschreibung

Erstellen einer Typo3-Seite vom Screendesign zur fertigen Seite

Erstellen einer Typo3-Seite vom Screendesign zur fertigen Seite

Willkommen zum Tutorial „Eine Website erstellen in Typo3“.
Das Tutorial gliedert sich in 3 Abschnitte.
Der erste Abschnitt (Schritt 1/1 bis Schritt 20/1) beschäftigt sich mit der Erstellung eines Screendesign mittels Photoshop.
Im zweiten Abschnitt (Schritt 1/2 bis Schritt 35/2) erstellen wir aus dem Screendesign eine Homepage mittels Dreamweaver.
Im dritten Abschnitt (Schritt 1/3 bis Schritt 29/3) wollen wir dieses nun in Typo3 einbinden und anschließend noch über Typoscript den Seitentitel bzw. Untertitel auslesen und anzeigen lassen sowie ein Brotkrümelmenü anzeigen. Auch die Menüs konfigurieren wir über Typoscript, hier machen wir uns noch die Funktionen vom Gifbuilder zunutze. Zudem erkläre ich noch die wichtigsten Funktionen im Backend.
 


Hier erstmal eine Vorschau darauf, wie das Template aussehen soll:

Bilder

Schritt 1/1:
Als Erstes öffnet ihre eine neue leere Datei mit 1000px Breite und 600px Höhe.
Als Nächstes teilt ihr die Seite mittels Hilfslinien schon mal so ein, wie sie später aufgeteilt sein soll.
Zur besseren Übersicht habe ich die einzelnen Abschnitte beschriftet.

Bilder

Schritt 2/1:
Anhand des Headers zeige ich euch, wie ihr schnell ein einfaches Template erstellen könnt.
Da die Hilfslinien schon gezogen sind, zieht einfach mit dem Auswahlrechteck-Werkzeug (M) einen Rahmen entlang der oberen Hilfslinien. 

Bilder


Schritt 3/1:
Als Nächstes erstellt ihr eine neue Ebene.
Nun legt ihr bei aktivierter Auswahl eine Ebenenmaske an. Dies hat den Vorteil, dass folgende Ebeneneffekte wie ein Farbverlauf nur auf dem gewünschten Teil zum Tragen kommen und nicht auf der ganzen Ebene, da ja durch die Maske nur der vorher ausgewählte Teil sichtbar bleibt.
Jetzt füllen wir die Ebene mit einer beliebigen Farbe (Shift+F5), da sonst der Ebenenstil nicht sichtbar ist.
Jetzt wenden wir den Ebenenstil Verlaufsüberlagerung an.


Bilder


Schritt 4/1:
Schon haben wir den Hintergrund des Headers und des oberen Menüs.

Bilder


Schritt 5/1:
Genauso verfahrt ihr mit den restlichen Teilen des Templates. In meinem Fall sind das noch Headline, Rootline, Seitenmenü und Footer.
Ich habe im Header noch mein Logo und Schriften platziert.
Als Letztes noch einen Verlauf für den Hintergrund.

Bilder

Schritt 6/1:
Nachdem das Template soweit fertig ist, können wir an das Schneiden/Slicen gehen.
Da dieser Schritt immer wieder hinterfragt wird, werde ich diesen etwas genauer erklären.

Auch hier kommen uns die Hilfslinien wieder zugute, da das Slice-Werkzeug an selbigen einrastet.

Wir wechseln zum Slice-Werkzeug (C)


Bilder


Schritt 7/1:

und ziehen damit den ersten Rahmen entlang den oberer Hilfslinien, die den Bereich des oberen Menüs beschreiben.

Bilder

Schritt 8/1:
Wie ihr sehen könnt, hat Photoshop das Dokument in mehrere Teile geteilt und nummeriert. Den von euch gezogenen Slice mit der Nummer 2, links und rechts davon die Nummern 1 und 3 und unterhalb die Nummer 4.
Nummer 2 ist orange umrandet und die Schrift in Blau.
Bevor wir den nächsten Slice ziehen, klicken wir doppelt auf den soeben erstellten und noch aktiven Slice.
Sollte der Slice nicht mehr aktiv sein, so wechselt auf das Slice-Auswahl-Werkzeug (2 mal Shift+C) und klickt das Slice 2 doppelt an.

In dem Fenster, das sich geöffnet hat, geben wir gleich mal einen passenden Namen ein (keine Umlaute und/oder Sonderzeichen verwenden).
Da wir nur die Bilder brauchen, können wir die anderen Felder leer lassen.
Für uns sind nur relevant: Slice-Typ = Bild und der Name sowie die Maße des Bildes (diese benötigen wir später im Dreamweaver).

Bilder


Schritt 9/1:

Nachdem wir das haben, bestätigen wir die Eingabe und ziehen die nächsten Slices um den Header und die Headline und Rootline.
Euer Template sollte jetzt so aussehen:

Bilder

Schritt 10/1:
Die blauen Slice-Nummern sind die von euch angelegten und die grau unterlegten sind die, die Photoshop erstellt, da es keine leeren Flächen gibt in einen Dokument. Das ist dann später beim Abspeichern noch von Bedeutung. Nicht vergessen, die gezogenen Slices gleich entsprechend zu benennen.

Jetzt noch das Menü. Das geht von der unteren Hilfslinie der Rootline zur oberen Hilfslinie des Footers und dann kommt noch der Footer, der wieder über die gesamte Breite gezogen wird.
Da der Content keine Hintergrundgrafik enthält, sondern nur einfarbig ist, brauchen wir diesen nicht extra zu slicen. Die Hintergrundfarbe bestimmen wir später mittels CSS.
Euer Template sollte jetzt in etwa so aussehen:


Bilder

Schritt 11/1:
Das Template haben wir nun soweit vorbereitet und wären fertig zum Speichern.
Was uns allerdings noch fehlt, ist die Grafik für den Hintergrund.
Dafür ziehen wir mit dem Slice-Werkzeug ein Rechteck - in beliebiger Breite - links oder rechts neben dem Template (ihr könnt ruhig oben und unten über den Dokumentenrand ziehen, da das Slice-Werkzeug automatisch an der oberen und unteren Hilfslinie einrastet) und geben im Popup-Fenster eine Breite von 1px an.

Bilder
Bilder


Schritt 12/1:
Das war''s; nun können wir die Grafiken speichern.
Nicht vergessen, die Platzhaltertexte ausblenden.

Dafür gehen wir unter Datei - Für Web und Geräte speichern.

Bilder


Schritt 13/1:

Nun macht sich ein Fenster auf, in dem wir die grundlegenden Einstellungen vornehmen.
Solltet ihr eine andere Ansicht haben, dann habt ihr links oben verschiedene Möglichkeiten für die Ansicht.
Im linken oberen Fenster seht ihr das Original-Dokument; im rechten oberen Fenster hab ich mal auf JPG mit einer Qualität von 60 gestellt.
Links unten GIF 128 und rechts unten PNG 8, um die entstehenden Dateigrößen vergleichen zu können.

Bilder


Schritt 14/1:

Nachdem ihr euch für ein Format entschieden habt, klickt ihr auf Speichern.

Bilder


Schritt 15/1:

Jetzt nicht gleich speichern, sondern erstmal auf Einstellungen und ''Andere'' auswählen.

Bilder


Schritt 16/1:

Im nächsten Popup-Fenster können wir alle wichtigen Einstellungen vornehmen.

Bilder

Schritt 17/1:
Sehen wir uns die verschiedenen Möglichkeiten kurz an.
Im obersten Auswahlfeld sollte Benutzerdefiniert stehen.
Im Auswahlfeld darunter gehen wir auf Dateien speichern.
Die anderen Möglichkeiten können wir vernachlässigen, da diese nur relevant sind, falls ihr euch von Photoshop eine Html-Datei erzeugen lassen wollt.

Bilder


Schritt 18/1:

Also gehen wir zu den nächsten Auswahlfeldern.
Links oben wählen wir "Slice-Name", die nachfolgenden stellen wir alle auf "ohne" -
die sind wieder nur relevant, wenn wir eine Html-Seite ausgeben lassen.
Beim letzten Auswahlfeld wählen wir noch ".ext" 

Bilder

Schritt 19/1:
Unter Dateinamenkompatibiltät könnt ihr noch einstellen, für welche Plattform die Dateien kompatibel sein sollen.
Es empfiehlt sich, hier alle drei anzuhaken, falls man die Dateien mal weitergeben muss.

Jetzt haben wir noch die Möglichkeit anzugeben, ob die Bilder an den von uns gewählten Pfad oder aber in einen eigenen Ordner gespeichert werden.
Habt ihr die Funktion ''Bilder in Ordner ablegen'' aktiviert, dann könnt ihr noch einen Namen für den Ordner angeben, den Photoshop erstellt und in den es die Bilder speichert.
Jetzt bestätigen wir mit Ok.

Wir müssen nun noch angeben, was gespeichert werden soll und wo.

Bilder

Schritt 20/1:
Wir wählen den Pfad, wo die Bilder gespeichert werden - am besten schon dort, wo ihr euer Homepage-Projekt angelegt habt.
Als Format wählen wir "Nur Bilder".
Einstellung "Benutzerdefiniert" - die haben wir ja gerade vorgenommen.
Und bei Slices darauf achten, dass "Alle Benutzer-Slices" ausgewählt ist, da sonst auch die Teile des Templates gespeichert werden, die Photoshop selbst angelegt hat, die wir aber nicht brauchen.

Nachdem wir alle Einstellungen vorgenommen haben, können wir nun auf Sichern/Speichern klicken.
Wenn ihr alles richtig gemacht habt, habt ihr jetzt einen Ordner mit den einzelnen Grafiken (in meinem Fall 7).


Das war''s für den ersten Teil.
Ich hoffe, es hat euch weitergeholfen.

Im 2ten Teil erstellen wir eine Html-Seite, in welche die erstellten und gespeicherten Grafiken eingebunden werden und die wir anschließend noch für Typo3 vorbereiten.

Schritt 1/2:
Bevor wir jedoch beginnen, sollten wir uns erstmal Gedanken machen über die Ordnerstruktur, wie sie später auch am Server sein wird. Es empfiehlt sich, einen Projektordner anzulegen; in diesen können alle Rohdateien gespeichert werden, die wir für unser Projekt brauchen, wie zum Beispiel unsere PSD-Datei des Templates; Entwürfe, unbearbeitete Grafiken usw. Bei jeder Typo3-Anwendung werdet ihr später einen Ordner Namens fileadmin vorfinden, auf den ihr auch im Backend zugreifen könnt. Also übernehmen wir diese Struktur und legen uns in unserem Projektordner (in meinen Fall typo3_tutorial) einen neuen Ordner Namens fileadmin an. In diesen werden alle Dateien gespeichert, die später auf den Server kommen. Das ist insofern wichtig, da wir damit schon im Vorfeld sicherstellen, dass später auch die Links zu den Grafiken und der CSS-Datei stimmen. Also erstellen oder verschieben wir nun den Ordner mit unseren Grafiken in den Ordner fileadmin. Eure Struktur sollte in etwa so aussehen.
 

Bilder


Schritt 2/2:

Jetzt können wir beginnen.
Wir legen uns gleich mal eine neue Site an.
Dazu gehen wir im Menü auf ''Site'' und wählen ''Neue Site''.
 

Bilder


Schritt 3/2:

In dem eben geöffneten Fenster gehen wir ganz oben auf den Reiter ''Erweitert''.
Wir geben einen Namen für unsere Seite ein und bei ''Lokaler Stammordner'' geben wir den Pfad zu unserem fileadmin-Ordner an, indem wir auf den Ordner klicken und zu unserem fileadmin-Ordner navigieren.
Die Hyperlinks setzen wir relativ zu Dokument und wir aktivieren noch den Cache. Die anderen Felder können wir so belassen.
Nachdem wir das haben, klicken wir auf OK.
 

Bilder


Schritt 4/2:

Wozu der Aufwand im Vorfeld?
Damit wir später keine Probleme bekommen mit den diversen Verlinkungen.
Zudem haben wir jetzt immer gleich einen Überblick über unsere Website-Struktur.
Ihr seht im Reiter Datei schon mal den Stammordner, in dem sich der images-Ordner befindet und die Grafiken, die wir später benötigen.
 

Bilder


Schritt 5/2:
Jetzt ist es endlich soweit.
Wir erstellen eine neue leere HTML-Seite.
Ihr könnt sie entweder über den Begrüßungsbildschirm (falls ihr diesen aktiviert habt) oder über ''Datei - Neu'' anlegen.
Wählt ihr im Begrüßungsbildschirm HTML, dann habt ihr jetzt eine leere Seite.
Habt ihr den Weg über ''Datei - Neu'' - gewählt, dann kommt ihr zu einem weiteren Fenster, das euch verschiedene Auswahlmöglichkeiten bietet.
Wählt hier: ''Leere Seite'' - ''Seitentyp: HTML'' und ''Layout: <Kein>''.
 

Bilder


Schritt 6/2:
Ich empfehle eine geteilte Ansicht. So seht ihr anhand des Quelltextes, was Dreamweaver macht und im zweiten Fenster seht ihr in der grafischen Vorschau, wie die Seite aussieht.
Nachdem wir unsere Seite haben, geben wir gleich mal einen Seitentitel ein und speichern diese in unseren filadmin-Ordner.
Da wir die Seite später in Typo3 einbinden, brauchen wir sie nicht als index.html abzuspeichern. Ich nenne sie für gewöhnlich template.html.
 

Bilder


Schritt 7/2:

Als Erstes brauchen wir ein Div-tag, dem dann alle weiteren Divs untergeordnet werden.
Dafür klickt ihr auf das Symbol ''Div-Tag einfügen'' im Reiter ''Allgemein''.
 

Bilder


Schritt 8/2:

Bei ''Einfügen'' wählt ihr "am Einfügepunkt" (achtet darauf, dass ihr mit dem Cursor zwischen <body> und </body> steht.
Als ID wählt ihr einen geeigneten Namen - dieser ist für die Formatierung mittels CSS wichtig - und bestätigt mit OK.
 

Bilder


Schritt 9/2:
Den Platzhaltertext können wir löschen.
Wenn ihr den Text im Vorschaufenster löscht, seht ihr gleich das Ergebnis. Wenn ihr ihn im Code löscht, müsst ihr erst auf ''Aktualisieren'' klicken, damit ihr die Änderung seht.
 

Bilder


Schritt 10/2:
Jetzt legen wir uns gleich die CSS-Datei an.
Dafür markieren wir die ID "container"
 

Bilder

 und klicken im Reiter ''CSS-Stile'' auf das Symbol für ''Neue CSS-Regel''.
 

Bilder


Schritt 11/2:
Wir wählen oben "ID" und bei Name den Namen des Divs (sollte automatisch geschrieben sein).
Jetzt noch wichtig: Da wir noch keine CSS-Datei erstellt haben und wir den Code schön schlank halten wollen, wählen wir beim unteren Auswahlfeld ''Neue Stylesheet-Datei'' und bestätigen.
 

Bilder


Schritt 12/2:

Jetzt werden wir nach dem Namen und dem Speicherpfad gefragt.
Erstellt einen neuen Ordner im fileadmin-Ordner mit dem Namen CSS (da wir ganz am Anfang den fileadmin-Ordner schon als Stammordner definiert haben, öffnet Dreamweaver
diesen automatisch), gebt oben einen Namen für die Datei ein z.B.: style.css und bestätigt.
 

Bilder


Schritt 13/2:

Im nächsten Fenster können diverse Einstellungen vorgenommen werden.
Wir beschränken uns vorerst auf die Größe des "container-div"; dafür wählen wir "Box" und geben eine Breite von 950px ein.
Dabei belassen wir es fürs Erste und bestätigen.

Bevor wir weitermachen, schauen wir uns an, was Dreamweaver jetzt gemacht hat.
Dazu werfen wir erstmal einen Blick in den Quelltext.
Hier sehen wir, dass Dreamweaver den Pfad zu unserer CSS-Datei geschrieben hat und neben dem Reiter ''Quellcode'' haben wir jetzt noch einen weiteren Reiter mit unserer CSS-Datei.
 

Bilder


Schritt 14/2:
Auf der rechten Seite sehen wir im Reiter CSS-Stile unter ''Alle Regeln'' ebenfalls die style.css, und, wenn wir diese aufklappen,
den angelegten Stil für den #container sowie darunter die Eigenschaften, die wir definiert haben. Vorerst nur die Breite.
 

Bilder


Schritt 15/2:
Um weitere Eigenschaften festzulegen, können wir diese nun händisch in die style.css-Datei schreiben, indem wir auf den Reiter style.css klicken (neben dem Reiter Quellcode).
 

Bilder


Schritt 16/2:
Oder wir klicken rechts im Reiter CSS-Stile auf ''Eigenschaft hinzufügen''.
Nachdem ich schreibfaul bin, bevorzuge ich meistens diese Variante.
Wir klicken also auf ''Eigenschaft hinzufügen'' und bekommen ein kleines Auswahlfenster mit einer enorm langen Liste an Eigenschaften.
Wir scrollen hinunter und wählen ''margin''. Jetzt können wir in dem Fenster rechts noch die Werte eingeben.
Wir wollen zum Beispiel, dass die Seite vom oberen Rand des Browsers 5px Abstand hält und sich mittig zentriert.
Jetzt können wir eingeben ''5px auto''. Wenn ihr die Eingabetaste drückt, seht ihr, dass sich unser Div zentriert hat.
 

Bilder


Schritt 17/2:
Soweit mal dazu, wie ihr neue Eigenschaften anlegen könnt.
Natürlich könnt ihr das auch direkt in die style.css-Datei schreiben.
 

Bilder


Schritt 18/2:

Nun aber weiter.
Wenn wir einen Blick auf unser Template werfen, sehen wir, dass wir noch 7 weitere Ebenen benötigen für:
Menü oben; Header; Headline; Rootline; Menü Seite; Footer und natürlich den Content.
Also markieren wir unseren ersten Div, setzen unseren Cursor VOR </div> - das Container-Div soll ja die folgenden einschließen - und fügen das markierte Div noch sieben Mal ein.
Jetzt sollen natürlich nicht alle Container heißen. Dafür benennen wir sie den folgenden Funktionen entsprechend um.
Nachdem wir auf ''Aktualisieren'' gedrückt haben, sieht der Quellcode folgendermaßen aus.
 

Bilder


Schritt 19/2:
In der Vorschau sehen wir natürlich noch nichts, da wir ja bloß leere Ebenen angelegt haben, und das wollen wir jetzt ändern.
Wir markieren die ID "menu_top" und klicken im Reiter ''CSS-Stile'' auf ''Neue CSS-Regel'' wie wir es schon für den Container gemacht haben.
Jetzt bekommen wir wieder unser Fenster. Wir belassen die Auswahl bei ''Zusammengesetzter Ausdruck'' und unten wählen wir diesmal unsere CSS-Datei aus und bestätigen.
Würdet ihr ''Nur dieses Dokument'' wählen, dann würde Dreamweaver den Code nicht in die CSS-Datei schreiben, sondern direkt in den Quelltext.
 

Bilder


Schritt 20/2:
Als Nächstes wählen wir den Hintergrund und bei ''Background-image'' - ''Durchsuchen'' und geben unsere Grafik für das obere Menü an.
 

Bilder


Schritt 21/2:

Jetzt noch "Box" auswählen und die Maße des Bildes eingeben. In meinen Fall sind das Width: 950px und Height: 20px und bestätigen.
 

Bilder


Schritt 22/2:
Auf die gleiche Weise verfahrt ihr mit den Ebenen Header; Headline; und Rootline;
Nachdem ihr das habt, sollte die Homepage in etwa so aussehen.
 

Bilder


Schritt 23/2:

Da wir die Bilder mittels CSS definiert haben, ist unser Quelltext gleich geblieben, nur unsere CSS-Datei ist angewachsen.
Bis jetzt waren die Ebenen alle gleich breit und stehen untereinander.
Nun wollen wir aber links den Content haben und rechts davon das Menü.
Damit das funktioniert, müssen wir neben der Größe noch einen Float definieren.

Wir nehmen mal den Content.
Dieser hat zwar keine Hintergrundgrafik, aber eine feste Breite. Nämlich die 950px unseres Templates abzüglich der Breite des Menüs.
Das ergibt in meinen Fall eine Breite von 820px.
Also legen wir wieder eine CSS-Regel an und geben bei der Box eine Breite von 820px ein. Zusätzlich noch einen Float: left, damit das Div mit einer Breite von 820px auch auf der linken Seite steht.
 

Bilder


Schritt 24/2:
Ebenso verfahren wir mit dem Div für das Seiten-Menü: ''Neue CSS-Regel'' - Hintergrundbild auswählen - Box Breite und Höhe des Bildes und diesmal einen Float: right, da wir das Menü an der rechten Seite wollen.
 

Bilder


Schritt 25/2:

Wie ihr seht, sitzt unsere Ebene jetzt schön an der rechten Seite und schön langsam nimmt unsere Homepage das gewünschte Design an.

Bilder


Schritt 26/2:

Nun wollen wir aber noch vermeiden, dass sich die Hintergrundgrafik des Seiten-Menüs wiederholt, falls der Inhalt mal mehr Platz benötigt, als wir im Moment zur Verfügung haben.
Dafür gehen wir zu unseren Reiter ''CSS-Stile'' - ''Eigenschaft hinzufügen'' und wählen ''background-repeat'' und im rechten Auswahlfeld wählen wir ''no-repeat''.
 

Bilder
       
Bilder


Schritt  27/2:
Jetzt fehlt nur noch der Footer.
Hier müssen wir neben der Hintergrundgrafik und der Größe noch bestimmen, dass er die Float-Abweisung der Menü-Ebene ignoriert.
Dies machen wir, indem wir ihm eine clear-Anweisung geben. Um sicher zu gehen, dass er auch das Float des Content ignoriert, sagen wir ''Clear: both''.
 

Bilder

Schritt 28/2:
Wenn wir uns die Seite nun im Browser ansehen, sehen wir, dass die Seite schon unseren Vorstellungen entspricht.
Was uns jetzt noch fehlt, ist zum einen der Text im Footer - den möchte ich mittig ausrichten - und die Hintergrundgrafik.

Bilder

Schritt 29/2:
Widmen wir uns als Erstes dem Hintergrund.
Dafür wechseln wir in die style.css und schreiben folgenden Code in die CSS-Datei: body { margin: 0px auto; } Die erste Zahl steht für den Abstand oben und unten und
die zweite - in diesen Fall ''auto'' - steht für links und rechts.
Wie ihr sehen könnt, haben wir nun in unserem Reiter ''CSS-Stile'' auch das body stehen.

Bilder


Schritt 30/2:
Nun aber zum Hintergrund.
Nachdem wir den Body nun auswählen können, gehen wir wieder auf ''Eigenschaft hinzufügen'', scrollen zum ''background-image'' und klicken es an.
Jetzt sehen wir neben der Bezeichnung ''background-image'' ein Fenster und neben diesem 2 Symbole: Ein Kreissymbol und einen Ordner.
Wir haben jetzt 3 Möglichkeiten, um die Grafik zuzuweisen.
1. Wir schreiben den Pfad händisch
2. Wir klicken auf den Ordner und suchen uns unsere Grafik.
3. Wir klicken auf das Kreissymbol, halten die Maustaste gedrückt, nun sehen wir ein Kreissymbol und einen Pfeil. Mit diesen fahren wir nach unten auf unsere Hintergrundgrafik und wenn diese markiert ist lassen wir die Maustaste los.
 

Bilder


Schritt 31/2:
Jetzt fehlen nur noch zwei Kleinigkeiten.
Der Hintergrund soll sich natürlich nur seitwärts aber nicht in der Höhe wiederholen.
Dafür fügt ihr noch die Eigenschaft ''background-repeat'' hinzu und wählt ''repeat-x''. Dies bewirkt, dass sich der Hintergrund von links nach rechts wiederholt.
Sollte es notwendig sein, dass sich eine Grafik von oben nach unten wiederholt, dann wählt ''background-repeat'' und ''repeat-y''.

Was jetzt noch stört, ist der Content. Dem müssen wir erstmal eine Farbe zuweisen. Also ''content'' auswählen und als Eigenschaft ''background-color'' wählen.
Dann habt ihr kleines Farbfeld, wo ihr euch die Farbe aussucht oder ihr schreibt den Hexadezimalcode direkt in das Feld.
Jetzt fehlt ihm nur noch die Höhe. Also geben wir ihm noch die Eigenschaft ''min-height'' mit einer Höhe, die eurem Template entspricht.
 

Bilder


Schritt 32/2:
Zu guter Letzt schreiben wir noch (falls gewünscht) ein Copyright in den Footer und formatieren auch diesen mittels CSS.
text-align = center; font-family = comic sans und font-size = 10px.

Das war''s soweit.
Unsere HTML-Seite ist formatiert und kann so für jeden weiteren Einsatz verwendet werden.
Solltet ihr sie nicht für ein CMS-System verwenden und das eure Startseite sein, so vergesst nicht, diese als index.html zu speichern.
Um die weiteren Textformatierungen sowie die Links kümmern wir uns später direkt in Typo3.
Hier also nochmal unser Ergebnis im Browser:
 

Bilder

 Und ein Blick in die style.css:
 

Bilder

 sowie in den Quelltext:

Bilder


Schritt 33/2:
Damit das Ganze in Typo3 ausgelesen werden kann, müssen wir den Quelltext ein wenig umschreiben bzw. ergänzen.
Wir werden das Ganze mittels Marker auslesen lassen, also müssen wir definieren, wo sich was befindet.
Soll heißen, wir müssen Typo3 noch sagen, wo die Menüs sind, der Content und in weiterer Folge die Headline sowie die Rootline.
Falls ihr auch im Footer noch Links einbauen wollt, empfiehlt es sich, auch diesen zu markieren.
Ihr habt aber später noch jederzeit die Möglichkeit, die HTML-Datei direkt aus dem Backend von Typo3 zu korrigieren.
Gleiches gilt auch für die CSS-Datei.

Nun mal zum Code.
Ein Marker für Typo3 sieht immer so aus, dass wir einen Namen wählen und diesen mit 3# Zeichen davor und danach eingrenzen.
Zum Beispiel ###INHALT### Wichtig!! Achtet auf die Schreibweise! Alles groß und keine Umlaute; Sonderzeichen.
Wählt Namen, die aussagekräftig sind und die ihr euch leicht merkt.

Gehen wir zur Praxis über.
Wir gehen in unseren Quelltext und schreiben nun unsere Marker.
Ich beginne mit dem oberen Menü und schreibe dazu in das Div ###MENU_OBEN###
 

Bilder


Schritt 34/2:
In Typo3 sagen wir später, dass an der Position des Markers ###MENU_OBEN### das obere Menü angezeigt werden soll.

Auf die gleiche Weise verfahren wir mit den Divs Headline; Rootline; Menü-Seite und Content.
Ich habe mich für die Bezeichnungen ###TRAILER### ###ROOTLINE ###SIDEBAR### und ###CONTENT### entschieden.
 

Bilder


Schritt 35/2:
Was uns jetzt noch fehlt, ist die generelle Anweisung für Typo3, ab wo es das Dokument ausliest und bis wohin.
Dafür schreiben wir noch direkt nach <body> <!-- ###DOKUMENT### begin --> und direkt vor </body> <!-- ###DOKUMENT### end -->

Hier nochmal der gesamte Quelltext
 

Bilder


 und ein Blick in den Browser
 

Bilder


Wie ihr seht, hat sich eigentlich nichts geändert, außer dass wir nun unsere Marker sehen, da diese von einer normalen HTML-Seite natürlich als gewöhnlicher Text ausgelesen werden.
Das ändert sich, sobald wir die Seite in Typo3 einbinden und die Bereiche MENU_OBEN; TRAILER, ROOTLINE, CONTENT und SIDEBAR konfigurieren.

Schritt 1/3:
Bevor wir das Template einbinden, legen wir uns ein paar Seiten an.
Klicke auf 1. Seite 2. Weltkugel 3. Neu
 

Bilder

 

Schritt 2/3:
Jetzt hat sich in der rechten Spalte die Ansicht geändert.
Diese kann je nach Version und installierten Extensions variieren.
Wesentlich sind für uns die oberen Einträge 1. Seite und - bei mir - 2. Page oder auch Assistent oder auch Position.
Bei allen gleich ist allerdings, dass ihr bei 1. eine neue Seite anlegt, je nachdem, wo ihr euch im Typo3-Baum gerade befindet.
Bei 2. legt ihr ebenfalls eine neue Seite an, allerdings habt ihr zusätzlich die Möglichkeit, die Position der Seite im Typo3-Baum anzugeben.
Natürlich können die Seiten auch im Nachhinein verschoben werden. Wir nehmen jetzt mal die 1. Seite.
 

Bilder


Schritt 3/3:

Jetzt haben wir erstmal grundsätzliche Einstellungen vorzunehmen.
Als Erstes wählen wir den Typ aus.
Wir belassen diesen auf Standard. Ich werde später noch auf andere Möglichkeiten eingehen.
Nun sehen wir, dass bei "Seite verbergen" ein Haken gesetzt ist; diesen deaktivieren wir, da die Seite sonst nicht angezeigt wird.
Jetzt brauchen wir noch einen Seitentitel.
Ich nehme jetzt für die erste Seite den Projektnamen, da uns diese Seite zur Übersicht im Typo3-Baum dient und nicht im Menü sichtbar sein wird.
Soweit zu unserer ersten Seite; nun speichern und schließen (rechtes Speichersymbol).
 

Bilder



Schritt 4/3:
Jetzt haben wir uns unsere Orientierungsseite im Typo3-Baum angelegt. Das ist hilfreich, wenn ihr in einem Typo3-Baum mehrere Seiten habt.
Nun legen wir die eigentliche Startseite an.
Dafür wiederholen wir Schritt 1-2, allerdings wählen wir nicht die Weltkugel, sondern unsere soeben erstellte Seite (nicht auf den Namen klicken, sondern auf das "Blatt Symbol).
Wie ihr seht, hat sich die Ansicht im rechten Fenster geändert, da wir jetzt von einer Seite ausgehen.
Wir haben jetzt die Auswahlmöglichkeiten Seite (in) Seite (nach) und wie gehabt die Position.
1. erstellt uns eine Unterseite in der bestehenden, 2. erstellt uns eine Seite nach der bestehenden und 3. ist wie gehabt.
 

Bilder


Schritt 5/3:
Wir nehmen die 2 und nennen die Seite ''Menü oben''.
Ihr werden alle Seiten untergeordnet, die im oberen Menü angezeigt werden.
Das hilft uns, einen besseren Überblick zu behalten.
Euer Baum sollte jetzt so aussehen:
 

Bilder


Schritt 6/3:

Als Nächstes legen wir die Seiten für das obere Menü fest.
Dafür nutzen wir die ''Funktionen''.
Die ermöglichen es uns, gleich mehrere Seiten anzulegen.
Wir wählen also ''Menü oben'' - "Funktionen"; jetzt geben wir unsere Seitennamen ein und zum Schluss setzen wir noch einen Haken bei ''Neue Seiten nach existierenden Unterseiten anlegen'', da wir ja die Seiten der Seite "Menü oben" unterordnen wollen. Jetzt noch auf ''Seiten anlegen'' drücken.
 

Bilder


Schritt 7/3:
Wenn wir jetzt einen Blick auf den Typo3-Baum werfen, sehen wir unterhalb der Seite ''Menü oben'' die neu erstellten Seiten, welche eingerückt sind.
Daran erkennen wir, dass die Seiten der oberen untergeordnet sind.
 

Bilder


Schritt 8/3:

Jetzt kommt das Seitenmenü.
Dafür legen wir uns nach ''Menü oben'' wieder eine Seite an und die entsprechenden Unterseiten. Ich habe 5 Seiten angelegt und sie einfach mal Seite 1 - 5 genannt.
Euer Typo3-Baum sollte jetzt in etwa so aussehen:
 

Bilder


Schritt 9/3:

Bevor wir uns um das Template kümmern, wenden wir uns einmal den Seiteneigenschaften zu.
Dazu wählen wir unsere oberste Seite aus und klicken auf ''Seiteneigenschaften bearbeiten''.
 

Bilder


Schritt 10/3:
Jetzt wählen wir im Reiter Allgemein bei Typ: Verweis.
Wie anfangs erwähnt, dient diese Seite ja lediglich der Übersicht.
 

Bilder


Schritt 11/3:

Als Nächstes müssen wir noch sagen, wohin verwiesen werden soll.
Dafür wechseln wir auf den 1. Reiter Verweis.
2. Wir klicken auf den Ordner, worauf sich ein PopUp-Fenster öffnet mit unserem Typo3-Baum.
3. Wir wählen die Seite, auf die verwiesen werden soll.
Wie ihr seht, steht die ausgewählte Seite nun in unserem Fenster und im Typo3-Baum hat die Seite einen kleinen Pfeil bekommen als Symbol dafür, dass die Seite als Verweis definiert wurde.
 

Bilder


Schritt 12/3:
Genauso verfahren wir mit der Seite ''Menü oben'', die wir auf die Home verweisen und mit der'' Menü Seite'', die wir auf Seite 1 verweisen.

Da es oft vorkommt, dass man verschiedene Unterseiten hat, wollen wir auch noch schnell ein paar anlegen.
Ich lege dafür im ''Menü Seite'' unter der Seite 2 noch 2 neue Seiten an.
Der Typo3-Baum sieht nun so aus:
 

Bilder


Schritt 13/3:

Nachdem wir nun die Seitenstruktur angelegt haben, können wir uns um das Template kümmern.
Ich habe die Dateien aus dem Ordner fileadmin schon mal hochgeladen.
Wenn ihr online arbeitet, ladet sie am besten mit einem FTP-Programm hoch.
Ich persönlich bevorzuge Filezilla, da dieses Programm für alle gängigen Plattformen erhältlich ist.
Zudem es ist es Freeware und es arbeitet einwandfrei. Hier könnt ihr euch filezilla downloaden: http://www.filezilla.de/download.htm
Wenn ihr lokal arbeitet, könnt ihr euch die Dateien einfach in den fileadmin-Ordner verschieben/kopieren.

Wir gehen nun auf "Dateiliste" und sehen in der mittleren Spalte unsere Ordnerstruktur.
In der mittleren Spalte werden nur die Ordner angezeigt.
Wir klicken also auf unseren Projektordner und sehen nun in der rechten Spalte die enthaltenen Dateien.
Hier könnt ihr auch Dateien wie die template.html oder die CSS-Datei direkt bearbeiten Dazu aber später.
Soweit eine kurze Einführung in die "Dateiliste".
 

Bilder


Schritt 14/3:
Nun ist es an der Zeit, unserer Seite ein Template zuzuweisen, damit wir auch etwas angezeigt bekommen.
Dafür klicken wir auf Template und wählen unsere Projektseite.
Nun in der rechten Spalte auf ''Create template for a new site''.
 

Bilder


Schritt 15/3:
Jetzt stellen wir im oberen Auswahlfeld noch um auf Info/Modify, damit wir zu dieser Ansicht kommen.
 

Bilder


Schritt 16/3:
Jetzt können wir einen Titel, einen Seitentitel sowie eine Beschreibung eingeben, indem wir auf den Bleistift neben dem jeweiligen Feld klicken.
Für uns ist aber jetzt am wichtigsten das Setup.
Also klicken wir auf den Buntstift neben Setup.
Hier sehen wir, dass es schon einen Eintrag gibt.
Dieser wird standardmäßig von Typo3 angelegt und wenn wir unsere Seite jetzt aufrufen, so sehen wird den Schriftzug HELLO WORLD!
Sehen wir uns die drei Zeilen mal an.
page = PAGE    besagt, dass das Element page eine Seite darstellt. (Anstelle von page könnte da auch Seite oder etwas anderes stehen).
page.10 = TEXT    besagt, dass es sich um einen Text handelt.
page.10.value = HELLO WORLD!    also das Ergebnis/die Ausgabe ist HELLO WORLD!

Typoscript ist ähnlich aufgebaut wie die alte Programiersprache Basic.
Wir nummerieren in 10er Schritten, um Platz zu haben für spätere Änderungen.
 

Bilder


Schritt 17/3:
Wie wir sehen, müssen wir erst sagen, was passiert und wie es passiert.
Um uns ein wenig Schreibarbeit zu ersparen, können wir Anweisungen, die sich auf das gleiche Objekt beziehen, in geschwungene Klammern setzten. So müssen wir zum Beispiel nicht in jede Zeile page. schreiben.

Jetzt wollen wir aber was sehen.
page = PAGE lassen wir stehen und den Rest löschen wir.
Dafür geben wir folgenden Code ein:

page{
stylesheet = fileadmin/templates/Typo3_Tutorial/css/style.css
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/templates/Typo3_Tutorial/template.html
10.workOnSubpart = DOKUMENT
10.typeNum = 0
10.marks{

Obwohl der Code im Großen und Ganzen selbsterklärend ist, erkläre ich mal die einzelnen Zeilen.
 

Bilder


Wenn wir die Seite erneut aufrufen, sehen wir, dass unser Template angezeigt wird.
Allerdings auch mit den Markern, da diese ja noch nicht zugewiesen wurden.

Schritt 18/3:
Fangen wir oben an und erstellen wir das obere Menü.

Hier wieder der Code:

MENU_OBEN = HMENU
MENU_OBEN.special = directory
MENU_OBEN.special.value = 60
MENU_OBEN.1 = TMENU
MENU_OBEN.1.NO = 1
MENU_OBEN.1.NO.ATagParams = class="linkWeiss"
MENU_OBEN.1.NO.linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124; |*| &nbsp;|
MENU_OBEN.1.CUR < .MENU_OBEN.1.RO

Und die Erklärungen:
 

Bilder

Um die ID der Seiten zu ermitteln, braucht ihr nur im Typo3-Baum mit der Maus über der Seite zu bleiben - nicht dem Text, sondern dem Symbol - und ihr bekommt die ID angezeigt.

Wenn wir die Seite nun aufrufen, dann sehen wir anstelle der Marker für das obere Menü unsere Menüeinträge (Seiten Menü oben).
Jetzt steht das Menü noch links und die Farben gefallen mir auch noch nicht.
Darum kümmern wir uns später noch mittels CSS.

Schritt 19/3:
Als Nächstes wollen wir die Marker für den Content loswerden.
Diese dienen uns ja dazu, Typo3 zu sagen, wo wir den Inhalt haben wollen.

Hier wieder der Code:

CONTENT = CONTENT
CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}

CONTENT kann je nach eurer Bezeichnung variieren. Hier könnte auch z.B.: INHALT stehen, je nachdem, was ihr in euer Template geschrieben habt.
Schreibt den Code am besten über das Menü.

Hier mal ein Blick in das aktuelle Setup:

Bilder


Und ein Blick auf das Frontend

Bilder

Schritt 20/3:
Nachdem wir das obere Menü haben und auch festgelegt haben, wo der Inhalt ausgegeben wird, kümmern wir uns als Nächstes um das Menü an der Seite.

Dieses verlangt etwas mehr Schreibarbeit und wir erstellen eine Hintergrundfarbe für die Links sowie eine weiße Trennlinie zwischen den Menüeinträgen mittels Gifbuilder.
Da wir für das Menü den in Typo3 inkludierten Gifbuilder nutzen, können wir auch jede beliebige Schrift verwenden.
Diese muss zuvor lediglich auf den Server geladen werden.
Ich habe also einen neuen Ordner "Fonts" angelegt und in diesen eine Schrift hochgeladen.
In diesem Zusammenhang zeige ich gleich, wie wir das direkt aus dem Backend machen.

Schritt 21/3:
Wir gehen auf "Dateiliste" und wählen unseren Projekt-Ordner.
Wir sehen in der rechten Spalte, wo der Inhalt der Ordner angezeigt wird, links oben zwei Symbole.
Zum einen ein "Blatt mit einem Pfeil" und zum zweiten ein "Blatt mit einem Plus".
Beim linken kann man Dateien hochladen und mit dem rechten kann man bis zu 10 neue Ordner anlegen oder aber auch verschiedene Dateien erstellen.
 

Bilder

Wir legen also einen neuen Ordner (fonts) an.

Bilder


Wir wählen nun in der mittleren Spalte unseren Ordner fonts und klicken diesmal in der rechten Spalte links oben auf das Symbol für ''Dateien hochladen'', wählen über ''Durchsuchen'' die Schrift, die wir verwenden wollen und bestätigen.
Jetzt haben wir einen Ordner für unsere Schriften und in diesem die Schrift, die wir für das rechte Menü verwenden wollen.
 

Bilder


Schritt 22/3:

Nachdem wir die notwendigen Vorbereitungen getroffen haben, können wir nun unser seitliches Menü anlegen.
Beginnen wir mit dem Normalzustand unserer Links.
Zuerst wieder der Code:
Solltet ihr in die Marker für das Menü etwas anderes geschrieben haben, dann müsst ihr natürlich anstelle von SIDEBAR den von euch gewählten Namen verwenden.

SIDEBAR = HMENU
SIDEBAR.special = directory
SIDEBAR.special.value = 59
SIDEBAR.1 = GMENU
SIDEBAR.1.NO = 1
SIDEBAR.1.NO {
wrap = |<br>
XY = 130,25
backColor = #666666

10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/templates/Typo3_Tutorial/fonts/BlueIslandStd.otf
10.fontSize = 14
10.niceText = 1
10.offset = 40,17

In der unten stehenden Grafik erkläre ich die Unterschiede zum oberen Menü.
 

Bilder


Nachdem wir unser Menü erstmal formatiert haben, wollen wir noch eine Trennlinie zwischen den einzelnen Links einfügen und in weiterer Folge definieren wir noch einen Rollover-Effekt und formatieren die Unterseiten, damit sich diese von den normalen Links unterscheiden.

Schritt 23/3:

Beginnen wir mit der Trennlinie.
Hier hab ich wieder den Code für euch und in der Grafik die Erklärungen.

20 = IMAGE
20.file = GIFBUILDER
20.file{
XY = 130,1
backColor = #FFFFFF
}
20.offset = 0,24

} - Diese Klammer schließt übrigens die oben geöffnete Klammer neben SIDEBAR.1NO. Ohne die Klammern müssten wir in jede Zeile noch SIDEBAR.1. schreiben.

Nachdem wir für den Text die 10 genommen haben, verwenden wir jetzt die 20. Typo3 arbeitet das Script der Nummerierung folgend ab.
Es wird also erst der Text und darauf folgend die Grafik erzeugt.
 

Bilder


So sieht unser Menü bis jetzt aus:
 

Bilder


Schritt 24/3:

Im nächsten Schritt legen wir einen Rollover-Effekt fest.
Der Code:

SIDEBAR.1.RO < .SIDEBAR.1.NO
SIDEBAR.1.RO {
backColor = #cccccc
5 < .10
5.fontColor = #ffffff
5.offset = 41,18
}

Und die Erklärung der einzelnen Zeilen:

SIDEBAR.1.RO < .SIDEBAR.1.NO
    Das .1 steht für die erste Ebene, für die Unterseiten schreiben wir später .2; <. bedeutet: entspricht; RO steht für Rollover und NO steht für Normal
    Diese Zeile heißt also: SIDEBAR 1 Ebene; Rollover entspricht der ersten Ebene der SIDEBAR im Normalzustand.

SIDEBAR.1.RO {
    Hier bestimmen wir, was sich gegenüber dem Normalzustand verändert.

backColor = #cccccc
    Hintergrundfarbe

5 < .10
    Da wir die Nummerierungen 10 und 20 schon verwenden, haben wir jetzt die 5 genommen. In dieser Zeile sagen wir, dass 5 der 10 entspricht, also die Formatierung des Textes.

5.fontColor = #660000
    Die Schriftfarbe für den Rollover-Effekt. Da wir zusätzlich gesagt haben, dass die Schrift wie im Normalzustand übernommen wird, können wir durch die 2. Farbe einen "eingelassenen" bzw. einen "hervorgehobenen" Effekt erzielen.
 
5.offset = 10,18
    Den offset versetzen wir gegenüber dem Normalzustand, damit der Effekt zu tragen kommt.

}
    Und natürlich müssen wir die Anweisung wieder schließen.


Schritt 25/3:

Wir definieren gleich den aktiven/current Zustand. Damit wir nicht allzu viel schreiben, sagen wir einfach:

SIDEBAR.1.CUR < .SIDEBAR.1.RO
Aktiver Zustand entspricht dem Rollover-Zustand.

Hier noch ein Screenshot des aktiven = Rollover-Zustands des Links.
Seite 1, 2, 4, 5 sind im Normalzustand, Seite 3 ist aktiv
 

Bilder


Wir haben jetzt verschiedene Zustände kennengelernt. NO = Normalzustand, RO = Rollover und CUR = Aktiv
Nach diesen Beispiel sollte es euch möglich sein - falls gewünscht -, einen eigenen Stil für den aktiven Link zu definieren.
Da wir in diesem Menü auch Unterseiten angelegt haben, müssen wir auch für diese einen Stil definieren.
Wie oben erwähnt, steht SIDEBAR.1 für die erste Ebene, also die Hauptseiten.
Infolgedessen brauchen wir für die Unterseiten SIDEBAR.2 für die 2. Ebene. Solltet ihr die Unterseiten noch tiefer verschachtelt haben, so könnt ihr die mit SIDEBAR.3 usw. definieren.

Schritt 26/3:

Da die Befehle ja bekannt sind - kurze Kommentare in den Zeilen.
Dies ist im übrigen auch eine Möglichkeit, um direkt im Setup Kommentare einzufügen.
Texte hinter dem # Zeichen werden nicht interpretiert.
Hier also die Definition für die Unterseiten:

SIDEBAR.2 < .SIDEBAR.1
SIDEBAR.2 {
  NO.backColor = #ededed                 ####### Hintergrundfarbe ########
  NO.10.fontColor = #660000             ######## Schriftfarbe #######
  NO.20.file.backColor = #335C85    ####### Linienfarbe #######
RO < .NO
RO.backColor = #FFFFFF
CUR < .RO
}

Unser seitliches Menü ist soweit fertig. Hier das Ergebnis mit den verschiedenen Zuständen:
 

Bilder


Bevor wir uns um das Brotkrümelmenü kümmern, formatieren wir das obere Menü.
Das machen wir ganz normal über CSS.

Schritt 27/3:
Dafür navigieren wir direkt im Backend über Dateiliste - Projektordner - CSS-Ordner - zu unserer style.css, klicken einmal das Sybol an und wählen ''Bearbeiten''.
 

Bilder


Jetzt definieren wir verschiedene Linkzustände.
Hier das Beispiel für den Normalzustand.

a:link {
 font-family:Verdana;         ######### Schriftfamilie #######
 font-size:12px;                  ######### Schriftgröße ###########
 color: #999;                      ######### Schriftfarbe ###########
 text-decoration:none;    ######### lässt den Unterstrich weg ######
 font-weight: bold;           ######### Schriftstärke ##########
}

Genauso definiert ihr noch die Zustände für a:hover; a:visited und a:active

Da wir das Menü an der rechten Seite haben wollen, schreiben wir in die CSS-Datei noch für die obere Menü-Ebene:

text-align:right;          ######## positioniert den Text rechts ###########
margin-top: 10px;     ######## schiebt den Text von oben 10px nach unten ########

Jetzt ist auch das obere Menü fertig.
Hier mal ein Zwischenstand:
 

Bilder


Schritt 28/3:
Jetzt erstellen wir das Brotkrümelmenü. Hier lernen wir ein paar neue Typoscript-Funktionen kennen.
Die Schrift formatieren wir wieder über CSS. In der CSS-Regel für das div Rootline.

  ROOTLINE = COA                  ######### COA erlaubt uns den gleichzeitigen Einsatz verschiedener Funktionen ##############
  ROOTLINE { 
  10 = HMENU 
  10 { 
  special = rootline                  ######### special beschreibt verschiedene vordefinierte Funktionen in Typoscript. In unserem Fall rootline ######
  special.range = 1|-1           ######### die erste Zahl steht für den Startpunkt und die 2. Zahl für den Endpunkt ###########
  1 = TMENU 
  1 { 
  NO { 
  doNotLinkIt = |*| 0 |*| 1                         ########## legt fest, dass die letzte Seite nicht verlinkt wird ##########
  allWrap = |*| |&nbsp;&gt;&nbsp; |*| |            ########### und hier, dass hinter der aktuellen Seite kein ? ausgegeben wird ##########

}
}
}
}

Schritt 29/3:
Wenden wir uns also der Headline zu.
Wie gesagt soll hier der Untertitel einer Seite angezeigt werden. Falls kein Untertitel eingegeben wird, wird der Seitentitel ausgelesen.
Hier kommt wieder der Gifbuilder zum Einsatz.
Ich habe meine Marker TRAILER benannt. Im Prinzip kennen wir die verschiedenen Befehle ja schon.
Die neuen sind wieder kommentiert.

TRAILER = IMAGE
TRAILER.file = GIFBUILDER
TRAILER.file{
XY = 950, 34
backColor = #333333
  10 = TEXT 
  10.text.field = subtitle // title         ##### durch den Befehel text.field lassen wir ihn einen Text auslesen, und da wir den subtitel vor den titel geschrieben haben, wird dieser als Erstes ausgelesen ###########
  10.fontSize = 20 
  10.fontFile = fileadmin/templates/Typo3_Tutorial/fonts/BlueIslandStd.otf 
  10.fontColor = #ffffff 
  10.niceText = 1 
  10.align = center                         ########### zentriert den Text #############
10.offset = 0,25
}

So sieht die Seite jetzt aus:
 

Bilder

Wir sind nun fertig.
Jetzt müssen nur noch die Seiten mit Inhalten befüllt werden.

Ich hoffe, dass ich die Tutorials verständlich und ausführlich geschrieben habe.

Viel Spaß beim Ausprobieren und Experimentieren wünscht euch

Wolfgang


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von ChristianPodlewski
Portrait von Matte
  • 29.08.2011 - 18:05

Zitat: "Warum willst du von einen Menü auf ein anderes verweisen?
Wenn ich dich richtig verstehe verweist du auf eine leere Seite der du kein Template zugewiesen hast, darum auch die Fehlermeldung."

Wohin verweist du in deinem Tutorial auf Seite 52? Ich verstehe das so, dass ich die Seite "Typo3 Tutorial" auf die Seite "Menü oben" verweisen soll. Danach kommt bei mir auch die Fehlermeldung "No Template found". Is ja auch klar, auf der Seite ist ja kein Template erstellt.

Ich hänge da grad total dumm davor :o/

Bis dahin ist das Tut aber total genial und gut verständlich.

Portrait von nanga
  • 01.09.2011 - 14:06

Das Problem hatte ich auch. Also zu den Problemen, die ich mir selber gemacht habe. Bei mir war die ganze Seite weg, sobald ich einen Verweis machte. Das Problem löste ich so, dass ich die Menüs nicht "nach" sondern "in" Typo3 Tutorial anlegte. Wie du schon richtig sagst, es gibt auf den Menü-Seiten, auf die ja verwiesen wird kein Template.

Ich hänge dir mal Bilder an, da versteht man es wohl besser.

Hier kommt Bild 1, da geht es nicht, weil das Menü nicht in, sondern unterhalb der übergeordneten Seite "Typo3 Tutorial" liegt.

http://img29.imageshack.us/img29/7194/gehtnicht.jpg

Und dann begann ich rumzufummeln und zu probieren. Auf meine PN, die ich schicken sollte bekam ich leider keine Antwort und so war ich auf mich gestellt. Tatsächlich hatte ich im Reiter "enthält" nichts drinne. Da konnte es schon mal nicht klappen. Aber auch nach Korrektur ging nichts.

Ich habe Typo3 auf meinem Rechner unter xampp laufen. Tja und da hatte ich kein Image Magic drauf. Das korrigierte ich und es ging noch nichts. Ich installierte auf meiner Homepage im Internet und es ging noch immer nichts. Und das Typo3 auf dem Webserver ist definitiv in Ordnung, das hostet ein Profi für Typo3. Also musste es eine andere Ursache haben. Tja und dann fand ich die Lösung:

Die Menüs müssen IN nicht NACH "Typo3 Tutorial" stehen. Dann klappt es wunderbar. Siehe hier:

http://img508.imageshack.us/img508/2726/geht.jpg

Ich hoffe, du kommst jetzt weiter. Wenn nicht, schicke mir eine PN, ich antworte sogar.


Gruß nanga

Portrait von Mysth
  • 04.09.2011 - 05:51

Verzeiht das ich mich jetzt erst melde.
Ich war im Umzugsstress und nur selten online.

Wie nanga richtig gesagt hat stimmt die Hierarchie der Seiten nicht.

Portrait von Matte
  • 04.09.2011 - 18:11

Jau, habe es nach ein bisschen suchen im Netz rauch schon rausgefunden. Hatte mir bei Mttwald die Typo3-Doku runtergeladen.
Eins ist bei mir noch passiert: Wenn ich auf meinem Server(1blu) "niceText = 1" verwende erscheint in den Menüs keine Schrift. ohne niceText, klappts dann aber einwandfrei.

Das soll aber nicht deine Leistung schmälern Mysth, das Tut hat mich erst animiert mich mit Typo3 zu beschäftigen :o)

Gruß

Matte

Portrait von nanga
  • 04.09.2011 - 23:37

Nun ja, wir haben es ja selber rausbekommen. Und es stimmt: Dein Tutorial wird durch diesen kleinen, aber wirkungsvollen Fehler keineswegs geschmälert. Geht es vielleicht, dass du das im Tutorial änderst? Aber eines würde mich interessieren: Wie um alles in der Welt hat es bei den vielen Lob-Schreibern funktioniert? hatten sie es überhaupt ausprobiert? Oder erwähnten sie aus falscher Höflichkeit diese Kleinigkeit nicht?

Und noch was: Wenn es dir nach der Umzieherei langweilig ist, könntest du ja mal ein Tutorial schreiben, mit Accordion Menü und Java Script. Das würde mich brennend interessieren. Da fummel ich nämlich ziemlich erfolglos rum. Mein Problem: Ich kann das Typo Script nicht schreiben. Das Menü habe ich...lach

Gruß Nanga

Portrait von nanga
  • 15.08.2011 - 23:49

Zunächst einmal, das Tutorial hat mit Sicherheit jede Menge Arbeit gemacht und dafür alleine gebührt dir schon mal mein Dank.

Irgendwo mache ich aber einen ganz massiven Fehler. Wo, weiss ich nicht. Also ich versuche mal es zu erklären:

Ich gehe Schritt für Schritt nach deinem Tutorial vor. Wenn die ich html-Datei und die CSS hochlade, die anderen Dateien natürlich auch. alles brav in Fileadmin/templates, so wie ich es angelegt habe, erscheint ab dem Moment gar nichts mehr, wenn ich die Verweise mache. Ohne Verweise wird mir zwar der header angezeigt, kein Menü. Ich weiss nicht, was ich falsch mache. Aber irgendwo übergehe ich einen Schritt, nur welchen?

Gruß nanga

Portrait von Mysth
  • 16.08.2011 - 05:52

Hast du beim erstellen des Template im Backend auch "CSS Styled Content (css_styled_content)" ausgewählt?
Backend - in der linken Spalte auf "Template" die Seite auswählen in der das Template angelegt wurde - "Vollständigen Template-Datensatz bearbeiten" - im Reiter "enthält" "CSS Styled Content (css_styled_content)" auswählen.

Wenn es dann immer noch nicht funktioniert kannst du mir gerne eine PN schicken.

Portrait von snu_snu
  • 01.04.2011 - 15:54

Danke, hat mir sehr weiter geholfen!!!

Danke!

Portrait von toni_87
  • 17.03.2011 - 15:57

Super gut. Dankeschön!

Portrait von Kloppy
  • 11.03.2011 - 15:19

vielen dank für das tut
hat mir sehr geholfen

Portrait von Mysth
  • 07.03.2011 - 07:36

Wo kommst du nicht weiter?
Vielleicht kann ich dir ja helfen.

Portrait von rukash10
  • 06.03.2011 - 20:53

Super tut, komm leider nicht weiter aber das wird schon

DANKE ! :D

Portrait von rukash10
  • 06.03.2011 - 20:53

Super tut, komm leider nicht weiter aber das wird schon

DANKE ! :D

Portrait von BigFish2
  • 10.02.2011 - 15:39

Sehr gutes und ausführlichesTutorial. Auch der Typo3 Teil ist für Anfänger geeignet. Empfehlenswert!

Portrait von EGGC
  • 17.01.2011 - 17:06

vielen dank für das tut
hat mir sehr geholfen

Portrait von Essendra
  • 12.01.2011 - 08:28

Super Tut. Vor allem der Aufwand es auch zu erstellen. Respekt!

Portrait von eyexperience
  • 06.01.2011 - 18:26

Super Tut, gern mehr davon

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 06.11.2010 - 11:15

Danke. Dieses Tutorial ist sehr gut

Portrait von Mysth
  • 06.11.2010 - 10:03

Hallo Stefan
warum willst du von einen Menü auf ein anderes verweisen?
Wenn ich dich richtig verstehe verweist du auf eine leere Seite der du kein Template zugewiesen hast, darum auch die Fehlermeldung.

Les mal deine Privaten Nachrichten :)

x
×
×