Anzeige
Tutorialbeschreibung

Vom Photoshop-Layout zum TYPO3-Template - Teil 2

Vom Photoshop-Layout zum TYPO3-Template - Teil 2

Ausgehend von den Schritten im ersten Teil dieses Tutorials, wird nun die mit Photoshop erstellte HTML-Datei mit einem Editor dafür vorbereitet, in TYPO3 eingebunden zu werden.


Schritt 4:

Öffnen Sie mit einem Editor (z.B. Dreamweaver, Notepad, etc.) die erstellte HTML-Datei. Sie sollten nun den, von Photoshop erstellten Quelltext vor sich haben, an dem man noch einige Äderungen vornehmen muss, bevor es für die Anwendung als TYPO3-Template tauglich ist. Zunächst möchte ich jedoch erklären, was Photoshop mit unseren Slices gemacht hat: Photoshop hat das gesamte Layout Bild an den „gesliceten“ Stellen auseinandergeschnitten und anschließend eine Tabelle erstellt, um alle einzelnen Slice-Stücke wieder zusammenzufügen. Um sich das Ganze zu verdeutlichen, suchen Sie im Quelltext die Stelle des „<table>“-TAGs und ändern Sie dort den Wert des Borders von 0 auf 1.

Bilder


Nun speichern Sie das Dokument ab und schauen es sich im Browser wieder an. Sie sollten erneut das Layout sehen können, allerdings sollte nun auch die Tabelle sichtbar sein, in der die einzelnen Slices eingebettet sind (Siehe Bild 10).

Bilder

Bild 10

Schritt 5:

Stellen sie den Border der Tabelle wieder auf 0 und suchen Sie nun den Bereich des Textes, an dem der „<body>“-TAG steht und machen Sie direkt dahinter folgende Eingabe
(<!-- ###DOCUMENT_BODY### start -->):

Bilder


Mit dieser Eingabe sagen sie TYPO3, dass es an dieser Stelle anfangen soll, den Quelltext zu interpretieren. Alle Angaben, die davor stehen, werden von TYPO3 selbst erstellt.

Schritt 6:

Als nächstes müssen wir die Tabelle so einstellen, dass sie KEINE feste Höhe hat. Dies ist dafür wichtig, dass sich die Tabelle „auseianderdehnt“, sobald ein längeres Inhaltselement in eine der Zellen platziert wird. Gehen Sie dafür in den direkt dahinter liegenden „<table>“-TAG und löschen sie den „height“-Eintrag daraus.

Bilder



Schritt 7:

Der soeben erstellte eintrag „DOCUMENT_BODY start“ muss natürlich auch noch geschlossen werden. Suchen Sie also den „</body>“-TAG und fügen Sie den folgenden Text ein
(<!-- ###DOCUMENT_BODY### stop -->) :

Bilder


Schritt 8:


Beim erstellen der HTML-Dateien, weist Photoshop den einzelnen Bildern feste Höhen und Weiten zu. Leider tut Photoshop nicht dasselbe für die einzelnen Tabellen-Zellen, sodass man das nachträglich selber machen muss. Kopieren Sie also die „width“ und „height“-Angaben jedes einzelnen Bildes in den direkt davorstehenden „<td>“-TAG. In meinem Beispiel muss ich dies also für 8 Bilder (wegen der 8 Slices) und noch einigen „Abstandhalter.gif“-Bildern machen. Bilder werden im HTML-Quelltext in einem „<img>“-TAG angegeben. Suchen Sie also das erste „<img>“-TAG und kopieren sie die Größenangaben in den davorstehenden „<td>“-TAG.

Bilder


Schritt 9:

Die Tabellen-Zellen um die Slices 5 und 6 (je nach Layout und Slice-Aufteilung variieren diese Zahlen) bedürfen einer besonderen Behandlung, da diese Zellen in ihrer Höhe variabel sein müssen, je nach dem, wie viel Inhalt sich gerade in ihnen befindet (Siehe Bild 11).

Bilder

Bild 11

Suchen Sie also die Stelle in Ihrem Quelltext, wo die jeweiligen „<img>“-TAGs sind und nehmen Sie folgende Änderungen vor (Siehe Bild 12):

1) Löschen Sie den „height“-Eintrag im direkt davor stehenden „<td>“-TAG.
2) Setzen Sie die Bild-Datei für den „<td>“-TAG als Background (also in meinem Fall „Bilder/tutorial_05.jpg“ und „Bilder/tutorial_06.jpg“)
3) Löschen Sie den „<img>“-TAG


Bilder

Bild 12

Schritt 10:

Auch die Tabellen-Zellen, in denen die Navigationsleiste und der Footer erscheinen sollen müssen etwas umgeändert werden. Suchen Sie also die entsprechende Stelle in Ihrem Quelltext (in meinem Fall sind es die Zellen um die Bilder 3 und 8) und nehmen Sie dort folgende Änderungen vor (Siehe Bild 13):

1) Setzen Sie die Bild-Datei in dem direkt davor stehenden „<td>“-TAG als Background (also „Bilder/tutorial_03.jpg“ und „Bilder/tutorial_08.jpg“)
2) Löschen Sie den „<img>“-TAG
3) Löschen Sie diesmal jedoch NICHT den „height“-Eintrag

Bilder

Bild 13

Schritt 11:

Als nächstes muss man in den jeweiligen Zellen (bei mir 3,5,6 und 8) einen Hinweis für TYPO3 setzen, damit später meine Inhalte (Navigationsleiste, Menü, Inhalt und Footer) auch dort platziert werden. Suchen Sie also die Zelle mit dem Slice Nr. 3 und fügen Sie zwischen „<td>“-TAG und „</td>“-TAG folgenden Eintrag ein
(<!-- ###NAVI### start -->&nbsp;<!-- ###NAVI### stop -->). Außerdem fügen Sie in dem „<td>“-TAG noch den Eintrag valign=“top“ hinzu (Siehe Bild 14).

Bilder

Bild 14

Genau dasselbe machen Sie für die Zellen bei Bild 5,6 und 8, mit dem einzigen Unterschied, dass Sie bei Nr. 5 statt „NAVI“ „MENU“ schreiben, bei Nr. 6 „CONTENT“ und bei Nr. 8 „FOOTER“. Am Ende sollte es bei Ihnen so aussehen (Siehe Bild 15):

Bilder

Bild 15

Schritt 12:

Dies ist nun der letzte Schritt. Sämtliche Pfadangaben für die Bild-Dateien sind momentan nur relativ zu dem lokalen Ordner „Bilder“, der sich auf Ihrer Festplatte befindet. Damit kann TYPO3 natürlich nichts anfangen. TYPO3 hat sein eigenes Ordnerverzeichnis und daher müssen wir den Quelltext an diesem Punkt noch anpassen. Der Root-Ordner unter TYPO3 heißt „fileadmin“. Darin werde ich jedoch noch einen Unterordner erstellen, damit die Bilddateien nicht mit meinen bereits vorhandenen Dateien durcheinander kommen. Daher werden die Bilddateien später unter dem Ordner „fileadmin/tutorial/“ zu finden sein. Der letzte Schritt dieses Tutorials besteht also darin, sämtliche Angaben wie z.B. „Bilder/tutorial_04.jpg“ in „fileadmin/tutorial/ tutorial_04.jpg“ umzuwandeln. Das hört sich nach mehr Arbeit, als es ist, denn da gibt es einen kleinen Trick: So gut wie alle Editoren haben die Funktion „Ersetzen“ oder „Suchen und Ersetzen“ oder ähnliches (meistens zu finden unter „Bearbeiten“). Geben Sie also bei Suchen „Bilder/“ ein und bei Ersetzen „fileadmin/tutorial/“ (Siehe Bild 16). Achten Sie darauf, dass Sie kein „/“-Zeichen vergessen!

Bilder

Bild 16


Wenn Sie die HTML-Datei nun speichern, werden Sie sie anschließend nicht mehr im Browser betrachten können, weil die Pfadangaben zu den Bildern nicht mehr stimmen. Daher empfehle ich Ihnen, die Datei nun unter einem anderen Datei-Namen zu speichern (z.B. „tutorial1.html“).

Nun ist die HTML-Datei fertig für das Einbinden unter TYPO3. Alles weitere folgt im nächsten Tutorial, wo es darum geht, die erstellten Dateien in TYPO3 hochzuladen und ein Template in TYPOSCRIPT zu schreiben.

Nachtrag: Ich habe nach erstellung dieses Tutorials bisher keine Zeit gefunden, die Fortsetzung hier zu publizieren. Allerdings steht der dritte Teil der Tutorial-Reihe auf meiner Website:

http://www.sleen-design.de/index.php?id=208


Das hört sich jetzt schwer nach Eigenwerbung an, aber ich habe momentan wirklich keine Zeit!


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von pmaxi
  • 21.05.2014 - 16:31

Vielen Dank für den 2. Teil!

Portrait von MaoMao
  • 15.01.2013 - 20:46

Vielen Dank für den Download.

Portrait von LuigiCanneloni
  • 07.03.2012 - 22:54

Gibt es einen dritten Teil auf Deiner Homepage? Ich bekomme nur eine Fehlermeldung bei dem angegebenen Link :(

Portrait von painteri
  • 15.11.2011 - 18:49

Der zweite Teil ist eine gelungene Fortsetzung. Leider fehlt der 3. Teil, der mir als TYPO3-Anfänger wesentlich geholfen hätte.

Portrait von Laya
  • 12.08.2011 - 09:36

vielen Dank! hat mir sehr viel geholfen!

Portrait von DonKuhn
  • 01.08.2011 - 15:22

Schade as der 3´te Teil nicht mehr da ist :/

Portrait von Kloppy
  • 11.03.2011 - 15:35

Super gemacht, danke!!! Auch für den 3. Teil zum Runterladen von Deiner HP

Portrait von TK814
  • 08.01.2011 - 20:08

Gutes Tutorial. Kann man weiterempfehlen

Portrait von trandi
  • 23.12.2010 - 10:23

Herzlichen Dank für das interessante Tutorial!

Portrait von pcdoktor
  • 03.09.2010 - 13:01

Echt gut das tut

mfg
pcdoktor
http://www.webcompany-kw.de

Portrait von Salvo
  • 11.06.2010 - 14:24

Bitte die Bilder wieder hochladen... echt schade...

Portrait von nils1983
  • 14.06.2010 - 09:24

Tut mir leid, dass die Bilder nicht angezeigt wurden. Der Grund ist mir schleierhaft!
Nun geht es aber wieder und ich hoffe, dass es somit wieder von größerem Nutzen ist! Viel Erfolg

Portrait von burnydoom
  • 28.04.2010 - 07:09

Sehr gutes Tutorial. Aber wie mein Vorschreiber schon geschrieben hat fehlen leider die Bilder.

Portrait von tschinkes
  • 21.04.2010 - 20:57

Schade die Bilder sind alle weg oO Würd mir wünschen der Beitrag wäre komplett!
Bitte wenn es geht die Bilder wieder reinladen, dankööö !!!

Portrait von Endless_Breath
  • 21.04.2010 - 16:52

auch der Zweite, Super Tutorial !!! THX !!!

Portrait von marcmaroc
  • 10.03.2010 - 11:12

Ist sehr gut, warte schon gespannt auf die Fortsetzung!

Portrait von deb
deb
  • 28.01.2010 - 12:29

Vielen Dank, wirklich sehr hilfreich - bin schon gespannt auf Dein Buch!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.10.2009 - 13:07

Danke für das Tut, gefällt mir, aber fehlt leider den Rest!!!

Portrait von pretorianer
  • 02.09.2009 - 17:00

Ist ein guter Einstand in das Thema

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.08.2009 - 22:19

super gemacht! alles super schön erklärt!

x
×
×