Photoshop-Design jetzt in Dreamweaver integrieren

Girldee · 11.01.2012

Huhu liebe Forumswelt,

Ich habe schon ein wenig gegoogelt und auch hier gesucht, bin aber noch auf keinen richtigen Nenner gekommen.

Ich habe mir jetzt in Photoshop ein Design für eine Website gebastelt. Ich habe bereits die nötigen Unterseiten erstellt und den Text weggelassen(der da irgendwann stehen soll).
Insgesamt habe ich 4 Seiten, die ich gerne so als Website nutzen möchte. Das würde ich gerne über Dreamweaver machen, weil das Programm einfach schon vorhanden ist und mir Programmierung an sich schon etwas fern ist.

Jetzt habe ich gelesen, dass man das Design per PS slicen kann und dann in Dreamweaver integrieren kann.

Gesliced hab ich leider noch nie, würde mich damit aber gern beschäftigen. Wo bloß nur angefangen?

Gibt es dafür irgendwie ein Tutorial oder eine andere Art Anleitung, wie man da am besten Step für Step vorgeht? Also von dem fertigen Design in PS bis zur Integration in Dreamweaver?

Ach so ich nutze übrigens CS 4

Liebe Grüße

patrick_l · 11.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Was das Slicen selbst angeht, findest du hier in den Tutorials mehre Anleitungen die dir Schritt für Schritt erklären, wie es funktioniert. Aber du solltest wissen das Grundkenntnisse einfach dazu gehören. Weil sonst geht später das geheule los.

Mit anderen Worten, man fragt sich nen Wolf. Darum...

HTML und CSS lernen, wenigstens die Basics. Für die Gestaltung vor allem CSS. Denn hiermit wird das Layout umgesetzt. Du fügst nur grafische Teile ein die nicht mit CSS umsetzbar sind.

Du kannst aber auch die Dw-Vorlagen anpassen. Nur wirst du, je nach dem wie dein Layout auf gebaut ist hier und da vielleicht einige Schwierigkeiten haben. Eben weil dir eben die Basics fehlen. Sonst kommt am Ende ne Site im Frontpage-Look raus

Gelöschtes Mitglied 133165 · 11.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Da es mir vor einpaar Jahren ähnlich ging kann ich dir dieses Buch

nur wärmstens ans Herz legen. Damit habe ich CSS schätzen und leieben gelernt.

Girldee · 15.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

DerOtto schrieb:
Was das Slicen selbst angeht, findest du hier in den Tutorials mehre Anleitungen die dir Schritt für Schritt erklären, wie es funktioniert. Aber du solltest wissen das Grundkenntnisse einfach dazu gehören. Weil sonst geht später das geheule los. Mit anderen Worten, man fragt sich nen Wolf. Darum...

HTML und CSS lernen, wenigstens die Basics. Für die Gestaltung vor allem CSS. Denn hiermit wird das Layout umgesetzt. Du fügst nur grafische Teile ein die nicht mit CSS umsetzbar sind.

Du kannst aber auch die Dw-Vorlagen anpassen. Nur wirst du, je nach dem wie dein Layout auf gebaut ist hier und da vielleicht einige Schwierigkeiten haben. Eben weil dir eben die Basics fehlen. Sonst kommt am Ende ne Site im Frontpage-Look raus

Huhu,
PS Basics habe ich ja, nur Slicen hat sich da nie ergeben, weil ich das bisher nicht gebraucht habe.

Ich habe ein gutes Tut gefunden und habe bei meinem Design jetzt die interaktiven Teile gesliced. wenn ich jetzt bei den Buttons in PS selber schon verlinke und alles fürs Web exportiere, läuft es soweit auch echt reibungslos ab.

Ich bin überrascht, wie einfach das über PS eigentlich ist.
Allerdings ist es jetzt mal so gar nicht das Nonplusultra von Webdesign.

Deswegen schon mal DANKE :blumen: für die Siteempfehlungen und die Buchempfehlung.

Was mich aber jetzt ein wenig stutzig macht und wozu ich jetzt noch nichts Tutorialmäßig gefunden habe, ist der Import der Slices in Dreamweaver und die Optimierung der Website.

Ich denke mal, mehrere Leute haben so oder so ähnlich wie ich angefangen, und dass es da kein Tut drüber gibt wundert mich.

bernhard2 · 15.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Die Slices, also die .jpg/.gif/..., verwendest du dann zum Beispiel als Background für die <div>-Boxen des Layouts, natürlich nur wenn notwendig um die Ladezeit gering zu halten.

Myhar · 16.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Girldee schrieb:
Ich denke mal, mehrere Leute haben so oder so ähnlich wie ich angefangen, und dass es da kein Tut drüber gibt wundert mich.

Das mag schon sein, jedoch ist der Weg, die PS Slices in DW einzufügen ein schlechter Weg, wenn man valides und semantisch korrektes HTML erstellen will. Es ist ok für einen Laien, welcher keine Ahnung von der Materie hat.
Es wundert mich, dass man keine Tutorials dafür findet. Aber wenn man "richtige" und "schöne" Webseiten schrieben will, kommt man um das händisch schreiben des Codes nicht herum. Deshalb wird man dazu wohl mehr Tutorials finden.
Mir wurde im Studium auch nur der Weg mit Code selber schreiben beigebracht, ich wüsste nicht einmal, wie man mit Slices und DW arbeitet

patrick_l · 16.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Girldee schrieb:
Huhu,
PS Basics habe ich ja.

Von den PS Basics war auch nicht die rede. Ich meinte damit Basics in HTML und CSS. Damit hast du zumindest die wichtigsten Sprachen zum umsetzen an der Hand.

Myhar schrieb:
Mir wurde im Studium auch nur der Weg mit Code selber schreiben beigebracht, ich wüsste nicht einmal, wie man mit Slices und DW arbeitet

Ist auch die richtige Herangehensweise um es gleich von Anfang an richtig zumachen. Ich muss aber ehrlicher weise zugeben das ich den umgekehrten Weg gegangen bin. Aber dafür auch schön auf die Schnauze gefallen.

Hinterher ist man ja meist etwas schlauer. Allein deshalb Rate ich anderen auch dazu gleich etwas mehr Arbeit zu investieren damit man eben hinterher nicht plötzlich da steht.

Zum TE:
Wenn es doch über Slices laufen soll, empfehle ich die Video2Brain DVD von Roland Pottkämper. In der wird sehr anschaulich das WYSIWYG-Prinzip von Dreamweaver erklärt. Auch wird die Zusammenarbeit von Dw und den anderen Applikationen wie Photoshop näher erläutert.

Girldee · 16.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Hey super vielen Dank, werd ich gleich mal gucken gehen.

Ja bei uns im Studium haben wir Java gelernt, und das nicht mal sehr gut. Der Rest war Homemade und Java war und ist ein Buch mit 7 Siegeln für mich. Mit HTML hab ich eher weniger gemacht, werde mich aber mal bei selfhtml durchkämpfen. Mein Problem ist nur, dass ich die Site bald zum Laufen bekommen muss und mich erst danach ausführlich damit beschäftigen kann.

Deswegen auch mein "Drängeln" wegen den Tutorials

samtron · 22.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

guten Abend zusammen
Ich möchte dir auch was zeigen, als HD Tei zwei und drei kannst du das mal gucken, wenn Probleme, melde dich OK und viel Spass

http://www.youtube.com/watch?v=RnwzoPrmq-k&feature=mfu_in_order&list=UL

Girldee · 24.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Hallo, vielen Dank noch mal für die Tutorials.

Die Website ist soweit durch, läuft, sieht auch nicht ganz so schlimm aus wenn sie läuft-also eigentlich ganz passabel.

Trotzdem habe ich jetzt Blut geleckt und möchte HTML und CSS jetzt richtig lernen. Was könnt ihr mir da empfehlen? Am liebsten ein Buch oder Videotutorials

samtron · 24.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

hier bitte sehr, guck immer alle Teile OK
http://www.youtube.com/watch?v=6nTLRcw_qmw&feature=relmfu
http://www.youtube.com/watch?v=21cymk0XIAA&feature=related
http://www.youtube.com/watch?v=zSYT2T5VR8A&feature=related
http://www.youtube.com/watch?v=euu975j8swY&feature=mfu_in_order&list=UL

Myhar · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Das erste Video ist einmal unbrauchbar, da wird nichts erklärt. Bzw. es werden nur veraltete Techniken eingesetzt.
Das zweite ist schon besser, aber immer noch nicht gut. Da wird auch am Anfang gleich etwas falsch erklärt (Nämlich so etwas unwichtiges, wozu HTML überhaupt gut ist). Aber so schlecht ist das auch nicht. Ich verstehe, was er tut... Aber ob man danach lernen kann weiß ich nicht.
Das dritte ist auch ganz ok. Geht aber hauptsächlich um CSS.
Das letzte Video erläutert einfach nur, wie man einen CSS Generator verwendet. Das hat meiner Meinung nach nicht wirklich was mit dem lernen von HTML + CSS zu tun.

Gelöschtes Mitglied 133165 · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Dann steuere ich mal den "Evergreen" bei:
http://little-boxes.de/little-boxes-teil1-online.html

samtron · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

hast du alle Teie gesehen?
hier geht es um erfahrungen, damit man sich das vorstellen kann
MfG

Myhar · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Nein, ich habe mir nicht immer alle Teile angesehen. Mir hat das gereicht, was ich gesehen habe. Es ist eben nicht empfehlenswert veraltete Techniken zu erlernen.

samtron · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Ich möchte gerne beiden lesen, sehen, hören wie ist die unterschiede und kannst du die Neue Techniken mal zeigen?

Myhar · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Die alte Technik kommt im ersten Video innerhalb der ersten Minute vor (und es wird nicht wirklich besser in den nächsten Teilen)

HTML:

<!-- Don't try this at home :D -->
<center>

</center>

Die zeitgemäße Technik wäre, dies über CSS zu lösen. Des Weiteren werden Bilder zB ohne alt Tag eingebunden. Auch vermisse ich in den Tutorials eine Erklärung, welche Tags es eigentlich gibt und wofür man diese verwendet. Das 10 teilige Tutorial hat das im Ansatz, aber dort wird auch nur gesagt "Verwende jetzt das damit es so aussieht".

patrick_l · 25.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Myhar schrieb:
Es ist eben nicht empfehlenswert veraltete Techniken zu erlernen.

Man sollte sich immer an die aktuellen Standard halten bzw. danach orientieren. Nebenbei kann man sich durch aus auch alte Herangehensweisen u. Techniken anschauen, anwenden sollte man diese jedoch nicht. Wenn man sich dafür interessiert kann man so auch die Nachteile alter Techniken nachvollziehen.

Was Video-Trainings angeht kann ich an dieser Stelle die PSD-Tutorials DVD zu HTML5 und CSS3 empfehlen. Hier mal der Link zum Shop.

HTML5- & CSS3- Training von PSD-Tutorials

Und wenn es wenn es ein Buch sein soll würde ich mich mal auf der Mark&Technik Website umschauen. Hier gibt es unter anderem mehre aus der Little Boxes Reihe, das Website Handbuch in mehren Auflagen und viele weitere. Mal ein bisschen in der Kategorie Programmiersprachen/Websprachen stöbern. Ich schaue da auch immer wieder gerne vorbei. Hier jetzt auch der Link für dich:

Zu guter Letzt noch ein paar nützliche / hilfreiche Links:

Little Boxes Website
Einführung in xHTML, CSS und Webdesign (Michael Jendryschik)
HTML5 Handbuch (Kaufen oder online lesen

)
CSS Grundlagen (CSS Referenz, Tutorials, etc.)
Deutschsprachige CSS Referenz - CSS4You

Grüße Patrick

Girldee · 31.01.2012

AW: Photoshop-Design jetzt in Dreamweaver integrieren

Hallo ich noch mal, vielen lieben Dank für die ganzen Videos und Links. Damit habt ihr mir sehr weitergeholfen :danke:

Ich habe mich jetzt für ein Buch ( ) entschieden. Die ersten Seiten Probelesen haben mich überzeugt. Es scheint einfach erklärt worden zu sein und ist für mich zum Einstieg wohl am besten. Und mit 2010 (hoffentlich) noch nicht zu alt was die Technik angeht.

Ich bin gespannt was es wirklich ist, wenn es dann hier ankommt.

Vielen Dank noch mal