Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von MaoMao

    MaoMao

    15.01.2013 - 20:46

    Vielen Dank für den Download.

  • Alternative Portrait von LuigiCanneloni

    LuigiCanneloni

    07.03.2012 - 22:54

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

  • Alternative Portrait von painteri

    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.

  • Alternative Portrait von Laya

    Laya

    12.08.2011 - 09:36

    vielen Dank! hat mir sehr viel geholfen!

  • Alternative Portrait von DonKuhn

    DonKuhn

    01.08.2011 - 15:22

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

  • Alternative Portrait von Kloppy

    Kloppy

    11.03.2011 - 15:35

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

  • Alternative Portrait von TK814

    TK814

    08.01.2011 - 20:08

    Gutes Tutorial. Kann man weiterempfehlen

  • Alternative Portrait von trandi

    trandi

    23.12.2010 - 10:23

    Herzlichen Dank für das interessante Tutorial!

  • Portrait von pcdoktor

    pcdoktor

    03.09.2010 - 13:01

    Echt gut das tut

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

  • Alternative Portrait von Salvo

    Salvo

    11.06.2010 - 14:24

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

    • Portrait von nils1983

      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

  • Alternative Portrait von burnydoom

    burnydoom

    28.04.2010 - 07:09

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

  • Alternative Portrait von tschinkes

    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

    Endless_Breath

    21.04.2010 - 16:52

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

  • Alternative Portrait von marcmaroc

    marcmaroc

    10.03.2010 - 11:12

    Ist sehr gut, warte schon gespannt auf die Fortsetzung!

  • Alternative Portrait von deb

    deb

    28.01.2010 - 12:29

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

  • Alternative Portrait von karlos1809

    karlos1809

    23.10.2009 - 13:07

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

  • Alternative Portrait von pretorianer

    pretorianer

    02.09.2009 - 17:00

    Ist ein guter Einstand in das Thema

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    12.08.2009 - 22:19

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

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    12.08.2009 - 10:32

    ein dickes Merci an nils1983... die kompletten tutorials findet man auf seiner page www.sleen-design.de unter codingCMS/tutorials

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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!

vBulletin 0.046 • ZF-App 0.612 • Total 0.658