Web Layout mit Photoshop für mich als dummen;-)

[Uwe1475]

Hallo
ich schon wieder;-)
Wie der Titel schon sagt brauche ich Hilfe was das erstellen eines web Layouts oder Templets, wie das jetzt auch immer genau heißt.
Habe hier im Tutorial berich mal eine Anleitung gefunden die beschreibt wie man das Layout in PS macht was ich soweit noch nachvollziehen kann bis auf den Punkt mit dem Slicen..wozu soll das gut sein? nach dem speichern als HTML habe ich dann zwar meine Bereiche aber leider als Tabellen was ich ja gar nicht will.
Mein Problem ist jetzt wie ich dieses Layout in Dreamweaver übernehme?
Die Platzierung der einzelnen Elementen mache ich ja per CSS,warum also die Slices?dadurch habe ich auch keine angaben wo ich welches Element platzieren muss.
habe etliche Tut's im Netz gelesen aber keines hat mir weitergeholfen..leider...
Wo liegt mein Denkfehler bei der sache oder gehe ich das ganze falsch an?
wer von euch kann mir da den berühmten schlag auf den Hinterkopf geben;-)

Grüße und Frohe Ostern,

Uwe

 

[Samuelll]

AW: Web Layout mit Photoshop für mich als dummen;-)

Definition Template :
Für mich ist das "Bild einer Homepage in Photoshop" ein GDesign.
Erst wenn das Bild zB mittels HTML und CSS webtauglich gemacht wird, würde ich es als Template bezeichnen.

Wieso Slicen ?

Wie du selbst schon erkannt hast wirft PS als HTML ziemlichen Schrott raus.
Zweitens muss ich nicht alle Elemente aus Photoshop als Bild darstellen. Einfarbige Rahmen und Flächen zB kann ich locker mit CSS erstellen. Wofür also Bilder nehmen die Ladezeit brauchen ?
Weiterhin bestimme ich mit dem Slicen natürlich welche Bildbestandteile GENAU ich will. Ich könnte einen Button zB in ein Oberteil und ein Unterzeil zerschneiden um ihn auch bei mehrzeiligem Inhalt nutzen zu können. So intelligent zerschneidet PS das Design nicht.

Übernamhe in DW ?
Glaube, dass kann man automatisch machen.
Allerdings bin ich nie diesen Weg gegangen. Mal abgesehen davon,dass ich DW eh nicht nutzen würde empfehle ich Dir Dein Layout mittels HTML und CSS direkt selber auf zu bauen, dir Deine Bilder zu slicen wie du sie brauchst und auf diese ganze Automatisierung zu verzichten !!!!!

 

[kleinerVampir]

AW: Web Layout mit Photoshop für mich als dummen;-)

nach dem speichern als HTML habe ich dann zwar meine Bereiche aber leider als Tabellen was ich ja gar nicht will.

Dann solltest du die Ausgabeoptionen richtig einstellen.

Wenn du mit dem Slicen fertig bist gehst du auf: Datei -> Für Web und Geräte speichern

Im sich öffnenden Fenster gibt es rechts oben ein kleines Symbol (ein Pfeil nach unten mit 4 Linien daneben) - da klickst du drauf

Es öffnet sich ein Menü - daraus wählst du den Punkt "Ausgabeeinstellung bearbeiten"

Jetzt öffnet sich ein weiteres Fenster hier stellst du alles so ein wie auf folgendem Screen zu sehen.



Dann klickst du auf weiter und stellst im folgenden Fenster alles ein wie auf dem nächsten Screen




Jetzt klickst du "ok" und landest wieder im "Speichern Dialog" - da stellst du alles wie folgt ein (die Bereiche wo du nichts ändern musst/solltest habe ich geschwärzt)



Nun klickst du auf speichern

Damit ist dein Tabellen Layout verschwunden und Ps erzeugt dir XHTML/CSS Code

 

[Uwe1475]

AW: Web Layout mit Photoshop für mich als dummen;-)

Hallo,
WOW Danke jetzt bin ich schon bissele Klüger;-)
Ja mit dem Slicen dachte ich eben das mir dann die geslicten teile per CSS korrekt vor Positioniert werden. Und ich dann nurnoch den Inhalt eintragen muss und der bereich immer an dieser Position und in dieser größe ist.
Aber werde mal das Versuchen was kleiner Vampir meint.
Und zur not mache ich per PS mein Layout und tu mir die Koordinaten für meine "CSS Boxen"per linial aus diesem Bild rausmesen und gut ist.

Danke Jungs

EDIT*
Hey kleinerVampir...DANKE genau so wollte ich das haben absolut Klasse!!
Danke wusste doch das auf dieses Forum verlass ist;-)

 

[sabine7766]

AW: Web Layout mit Photoshop für mich als dummen;-)

Warum slicen? Ich erstelle fr jedes einzelne Element der Webseite (Grafik, Text, Hintergründe etc...) einzelne Ebenen. Diese optimiere, speichere ich (ausser Text natürlich) für das Web. Dann können die Elemente über CSS genau angeordnet und gefloatet werden. Diese Handarbeit ist meiner Meinung nach immer noch nötig. Besser als PS ist Fireworks geeignet. Das "wirft" recht brauchbares CSS aus. Aber auch hier muss noch angepasst werden!