Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

[kleinLuna]

Hallo Zusammen,

ich hoffe sehr, dass ich nicht den 10.000sten Eintrag dieser Art hier einstelle, aber leider habe ich nicht wirklich was brauchbares zu meinem Problem bisher finden können. Also sorry im Voraus falls ich was übersehen habe!

Ich bin absolut kein Profi in Sachen HTML und CSS, aber dennoch habe ich bereits mehrere Websites in den letzten 11 Jahren erstellt. Angefangen mit dem Programm Frontpage (damals noch in der Schule) und jetzt mittlerweile mit Dreamweaver. Allerdings code ich nicht alles selbst (ich weiß, manche werden sicherlich die Hände über dem Kopf zusammen schlagen - nochmal sorry!), dennoch komme ich für meine Verhältnisse gut zurecht. Damit ihr einen kleinen Eindruck von meinen "Fähigkeiten" bekommt, könnt ihr gerne mal auf http://www.eifel-jumpers.de, http://www.grefensteinerhof.de oder http://www.feybacher-edelstahl.de/ gehen.

Nun zu meiner eigentlichen Frage. Mir ist es bekannt wie ich Webseiten in Photoshop erstellen und das erstellte Layout anschließend slicen und in Dreamweaver einbauen kann. Hierzu hatte ich in einem anderen Forum mal ein deppensicheres (das eigentliche Wort wurde nur mit **** versehen ) Tutorial gefunden, was mir sehr geholfen hat. Nun wurde dort allerdings das ganze Vorgehen in Verbindung mit der Erstellung einer I-Frame Seite beschrieben. Das dies aber mittlerweile total veraltet ist, habe ich auch mitbekommen und möchte deshalb gerne für meine nächste HP eine dynamische Seite (ich weiß nicht, ob das der richtige Begriff dafür ist? Meine eine Seite, welche sich beim Runterscrollen nach unten hin anpasst/weitergeht und nur in der Breite fix ist) erstellen.

Vom Grundgedanken her habe ich mir gedacht, dass es doch eigentlich fast alles ähnlich ablaufen muss. Layout erstellen, slicen, nur die Einbringung in Dreamweaver müsste anders ablaufen und ich denke ich müsste bestimmt auch bei der Layouterstellung schon was beachten, oder? Möchte halt einfach gerne von den Frames weg.

Leider ist es kein reines PS-Thema. Trotzdem würde ich mich sehr über Anregungen, Tipps und gerne auch nützliche Tutorials (deppensicher bevorzugt ) freuen!

Danke euch vielmals für eure Zeit und Mühe! :

Liebe Grüße
kleinLuna

 

[SteveHH]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Hallo

Ich habe in meiner Fortbildung zum Web-Developer von unserem Ausbilder immer "Aufträge" von "Kunden" bekommen, die er als Photoshop-Bild erstellt hatte; unser Kunde wollte also eine Internet-Seite erstellt haben, die exakt so aussehen sollte wie das Bild.
Der Unterschied zu Deiner vorgehensweise: Für uns galt das ganze halt nur als 100%ige Vorlage, wonach wir eine Seite programmieren (!) sollten (glaube mir: Dreamweaver ist nicht gerade "professionell" ^^) - wir hatten das Bild sowie PS, damit konnten wir auf den mm genau diese Seite per Hand (!) nachbauen. Wenn man einigermaßen in der Übung ist dann dauert das ganze nicht wirklich lange und es sieht vor allem GUT aus und ist noch dazu Web-Konform (was man von Seiten die mit Dreamweaver erstellt wurden nicht gerade sagen kann ;-)

LG aus Hamburg,

Steve

 

[kleinLuna]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Hallo Steve,

vielen Dank für deine schnelle Antwort!

Mit mm genau nachbauen meinst du in PS? Auch slicen? Und anschließend dann per Hand den Code schreiben denke ich, oder? Leider fühle ich mich damit irgendwie überfordert... Sicherlich hast du recht, sauber ist es mit Dreamweaver nicht... jedoch reicht es für meine Ansprüche bisher aus und ich wäre froh eine Lösung in Richtung meines vorherigen Weges zu finden ohne wieder ganz bei null anfangen zu müssen.

LG
kleinLuna

 

[patrick_l]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

(glaube mir: Dreamweaver ist nicht gerade "professionell" ^^) [...]

Quatsch! Dreamweaver ist ein sehr guter Editor. Einzig und allein die WYSIWYG-Features stoßen hier und da an ihre Grenzen.

sieht vor allem GUT aus und ist noch dazu Web-Konform (was man von Seiten die mit Dreamweaver erstellt wurden nicht gerade sagen kann ;-)

Dann hast du scheinbar keine Ahnung vom Dreamweaver. Alle Seiten die ich mit Dreamweaver erstellt habe sind semantisch korrekt (valide). Es kommt eben nicht nur auf das Werkzeug an, sondern auch auf denjenigen, der es einsetzt.

@kleinLuna:
Optisch sehen deinen Websites jetzt gar nicht mal so schlimm aus. Wenn man allerdings einen Blick in den Quellcode wirft, wird einem ganz anders. Fehlender Doctype (Dokumenttyp) und andere Tags sowie der ganze Aufbau sind nur auf die schnelle ein paar Punkte.

Der Dreamweaver ist unter anderem durch seine WYSIWYG-Features (what you see is what you get) bekannt. Auch wenn man sicher das ein oder andere damit umsetzen kann, rate ich dir dazu, dich mit HTML und CSS auseinanderzusetzen. Ohne Grundlagen wirst nicht weit kommen.

HTML ist zum Strukturieren von Inhalten gedacht. Mit CSS werden diese formatiert (»gestylt«). Das solltest du stets bei der Umsetzung deines Layouts berücksichtigen. Erstelle per Hand ein sauberes Grundgerüst, füge deine Inhalte ein und passe diese mit CSS an.

Für den Anfang kannst du auch auf die Dreamweaver Vorlagen zurückgreifen. Trotz alle dem solltest du zumindest das Lernen von HTML und CSS vorziehen. Wenn du beides beherrscht, ist das Umsetzen eigener Layouts eigentlich »easy going«.

Zum Lernen gibt es im Internet viele hilfreiche und vor allem freie Ressourcen. Ein paar empfehlenswerte Quellen habe ich dir hier verlinkt:

- HTML5-Handbuch - Webkompetenz
- Mozilla Developer Network | Lerne HTML, CSS & JS
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- Little Boxes | Webseiten gestalten - HTML & CSS (Peter Müller)
- CSS 4 You - The Finest in Stylesheets

Wenn du sehen möchtest, was allein durch CSS (Cascading Stylesheets) möglich ist, solltest du einmal auf CSS Zen Garden vorbei schauen. Das HTML Grundgerüst ist immer das selbe. Die Inhalte wurde allein mit CSS angepasst. So wird es für vielleicht nochmal etwas deutlicher, wieso die Strukturierung (HTML - Inhalte) und Formatierung (CSS - Gestaltung) voneinander getrennt werden sollten.

- css Zen Garden: Die Schönheit der CSS-Gestaltung

Zu guter Letzt noch der Tipp, vielleicht zunächst erst einmal ein CMS (Content-Management System) einzusetzen. Fertige Templates gibt es eigentlich wie Sand am Meer und die Installation ist in der Regel schnell erledigt. Vor allem Wordpress möchte ich dir an dieser Stelle empfehlen.

Wenn du allerdings eigene Layouts realisieren möchtest, solltest du die weiter oben genannten Tipps beherzigen, und dir nötiges Grundlagenwissen aneignen. (Meiner Meinung ist es vor allem in durch die neuen und vor allem eindeutigen semantischen Elemente in HTML5 einfacher geworden.

Liebe Grüße, Patrick

 

[SteveHH]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Hallo Steve,

vielen Dank für deine schnelle Antwort!

Mit mm genau nachbauen meinst du in PS? Auch slicen? Und anschließend dann per Hand den Code schreiben denke ich, oder? Leider fühle ich mich damit irgendwie überfordert... Sicherlich hast du recht, sauber ist es mit Dreamweaver nicht... jedoch reicht es für meine Ansprüche bisher aus und ich wäre froh eine Lösung in Richtung meines vorherigen Weges zu finden ohne wieder ganz bei null anfangen zu müssen.

LG
kleinLuna

Ne- Man hat aber dadurch, das Du eine genaue Vorlage als digitales Bild besitzt 100% korrekte Maße so das nichts schief und krumm wird, wenn also irgend etwas merkwürdig aussieht und Du 100% die Größen der Vorlage genommen hast dann liegt es an dem Designer und Du kannst den schwarzen Peter gleich weitergeben
Das kann man natürlich machen, aber glaub' mir: Wenn man sieht was man mit der eigenen Hand gemacht hat (wenn man die Webseite nach- und nach selber baut !) ist das ein wahnsinnig befriedigendes Gefühl ... Man weiß einfach das es SELBER geschafft hat und man nicht irgendwelche Tools "bemüht" hat. Zumindest hier in Hamburg kommst Du mit der Aussage "Ich kann Webseiten mit Dreamweaver erstellen" nicht sehr weit ... Umgekehrt wird ein Schuh draus: Ich kann "per Hand" Webseiten programmieren und kann noch dazu mit Programmen wie Dreamweaver und Co. umgehen ...
Es ist wirklich nicht soooooooooooo schwer. Auf Seiten wie http://de.selfhtml.org/ Wirst Du sehr schön über alles aufgeklärt; das war unter anderem bei uns im Kurs die Hauptquelle wo wir unser Wissen "aufgesaugt" haben
Vielleicht macht es mehr Sinn wenn man das ganze hier privat (Nachrichten) weiter diskutiert, da das ganze sonst denke ich wohl etwas ausufert und ich nicht weiß ob dieses Forum für solche Fragestellungen das richtige ist (ich bin auch "neu", daher möchte ich mir nicht unbedingt einen Rüffel einfangen ^^).
Aber vielleicht meldet sich ja noch der ein- oder andere "alte Hase" zu Wort

Und zum Schluss: Dinge wie Dreamweaver etc. mögen ja schön und gut sein - das Blöde ist nur, das Du faktisch kaum "Hintergrundwissen" hast welches man braucht um z.B. eine Seite zu verändern (wenn diese z.B. von jemand anderem komplett anders erstellt wurde !). Vielleicht hast Du ja Lust "zweigleisig" zu fahren ?

Liebe Grüße aus Hamburg (und ich werde jetzt endlich mal in die Falle gehen :muede::muede,

Steve

 

[MyBad]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Bitte den Hinweis auf selfhtml umgehend wieder verwerfen! Die Links von Patrick sind sehr gut und auch zu gebrauchen, selfhtml hingegen ist alles andere als up-to-date.

Man muss sich echt wundern, was hier manche anscheinend in Fortbildungen beigebracht bekommen. Wenn ich das so lese, spricht das nicht gerade für die Ausbilder. Bitte nicht persönlich nehmen. Stelle das nur immer wieder fest.

 

[cythux]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Kann mich Da nur anschliessen, was mein Vorposter patrick_l schon gepostet hat bzw. geschrieben.

Dreamweaver ist ein gutes Programm, was wysiwgh angeht - jedoch für eine Programmier/Script Sprache zu lernen tut es schon ein normaler Editor oder mit Codehighlighter notepad++

Damit lernst mehr, und ich rate Dir auch die Links von patrick_l alle durch zu gehen - diese hätte ich Dir ebenfalls empfohlen

http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/ so wie diesen hier, dieser ist jedoch auf English.

Bitte Finger weg von Selfhtml, diese ist total veraltet

 

[d4y]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Ich kann mich auch nur Patrick und cythux anschliessen, wenn Du die Grundlagen kennst, kannst du Dreamweaver voll ausnutzen.

@SteveHH sag bitte allen Designern hier das man nichts kann wenn man Plugins und Filter benutzt und ein in Assembler programmiertes Bild ist eh besser als ein mit PS erstelltes, da weiss man wenigstens was man geschaffen hat.... Bin auch ein grosser Befürworter des Bleisatzes. Wer keine Schriften giessen kann ist dem nach kein Graphikdesigner.

 

[rodemund]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Vielleicht macht es mehr Sinn wenn man das ganze hier privat (Nachrichten) weiter diskutiert, da das ganze sonst denke ich wohl etwas ausufert und ich nicht weiß ob dieses Forum für solche Fragestellungen das richtige ist (ich bin auch "neu", daher möchte ich mir nicht unbedingt einen Rüffel einfangen ^^).

Wo diskutiert wird, muss jeder selbst wissen. Du bist nach eigener Auskunft neu im Forum – und du möchtest beurteilen, was ins Forum gehört und was nicht. Darüber hinaus steht deine Meinung hier in der Kritik. Das verleiht dieser Einlassung einen etwas seltsamen Beigeschmack.

Die alten Hasen sind längst da: Mit patrik_I, cythux und MyBad sind schon drei ausgewiesene Experten am Start, auf deren Meinung ich bei dieser Fragestellung keinesfalls verzichten wollte.

Ich sehe das Ganze übrigens genauso: Dreamweaver ist ein prima Editor, und SelfHTML nutzt man besser nicht zum Lernen.

 

[vincitore]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Bei Photoshop gibt es übrigens auch die Einstellung das Ganze in divs und nicht in Tabellen zu exportieren, ob das dann immernoch das ist was man eigentlich haben will, habe ich noch nie ausprobiert ;D.

bevor ich jetzt meine eigene Vorgehensweise hier reinklatsch, mit der wahrscheinlich eh niemand was anfangen kann, weil man da seinen eigenen Workflow finden muss, hier ein Tutorial, was mir zumindest damals beim Umstieg geholfen hat:

Teil 1 - Erstellung des Layouts in Photoshop:
http://www.psd-tutorials.de/video-t...ness-webseite-im-animal-stil-erstellen-layout
Teil 2 - Umsetzung in xhtml und css:
http://www.psd-tutorials.de/video-t...animal-stil-erstellen-coding-in-xhtml-und-css

Da das Ganze mit html5 und css3 schon wieder nicht Topaktuell ist, solltest du dir auch mal die aktuellen Videotutorials ansehen, da ist garantiert auch was dabei.

 

[monika_g]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Und zum Schluss: Dinge wie Dreamweaver etc. mögen ja schön und gut sein - das Blöde ist nur, das Du faktisch kaum "Hintergrundwissen" hast welches man braucht um z.B. eine Seite zu verändern

Ich weiß ja nicht, auf welchen Dreamweaver Du Dich beziehst, eine aktuelle Version kann es keinesfalls sein. Denn die könnte man ohne Hintergrundwissen über HTML und Co. kaum bedienen.

 

[kleinLuna]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Wow, so viele Tipps von euch allen! Vielen Dank! :

Ich weiß, es wird sicherlich sehr mühsam werden, aber ihr habt auf jeden Fall recht... sich richtig durchzuarbeiten wäre das Beste! Ich werde mir die genannten Tipps auf jeden Fall nach und nach alle mal anschauen!

Das große Problem ist einfach, welche von den vielen vielen Infos benötige ich für mein Vorhaben zwingend und welche davon sind vielleicht wirklich für Profis gedacht und deshalb aktuell noch viel "too much" für mich. Das zu selektieren fällt mir unglaublich schwer.

 

[cythux]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Die Patrick_l gepostet hat, wurde ich Dir wärmsten empfehlen, das welches ich gepostet habe ist auch interessant für Anfänger jedoch solltest du English können, da diese alles Video sind von ca +/- 10min wo alles erklärt wird und auch der Beispiel Code ebenfalls vorhanden ist bzw gepostet ist.

 

[patrick_l]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Das große Problem ist einfach, welche von den vielen vielen Infos benötige ich für mein Vorhaben zwingend und welche davon sind vielleicht wirklich für Profis gedacht und deshalb aktuell noch viel "too much" für mich.

Ganz klar HTML. Die Auszeichnungssprache HTML (Hypertext Markup Language) ist die Basis von allem. Weil die Inhalte auch gestaltet werden wollen, sollte CSS auf keinem Fall fehlen. Daher solltest du dich zunächst mit diesen beiden vertraut machen. Hilfreiche Quellen wurden ja von mir verlinkt.

Wenn du dich in diese beide »Sprachen« eingearbeitet hast, kannst du nach und nach dein Wissen weiter vertiefen. Also dich mit JS (JavaScript) sowie PHP (inkl. MySQL) für dynamische Inhalte auseinandersetzen. Um dich nicht unnötig zu verwirren, solltest du die Letzten erst einmal nicht berücksichtigen.

Die WYSIWYG-Features des Dreamweavers erlauben zwar einem Anwender mit geringen Kenntnissen kleine Projekte umzusetzen, bei denen man aber schnell an die Grenzen stoßen wird. Die Features nutzen einem schließlich nichts, wenn man beispielsweise die semantischen Elemente von HTML nicht kennt.

Was ist eine Div? Was und wofür ist eine Tabelle? Wann werden Listen eingesetzt? Wie werden Text, Absätze und Überschriften richtig ausgezeichnet? Um diese Frage zu beantworten zu können, sollte entsprechendes Grundlagenwissen da sein.

Setze dich also jetzt erst einmal mit HTML und CSS auseinander.

Liebe Grüße, Patrick

 

[kleinLuna]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Lieben Dank noch mal für das weitere Feedback!

Hatte es mir auch jetzt genau so vorgenommen, wie Patrick es auch vorschlägt... HTML- und CSS-Kenntnisse erwerben (ich kenne zwar ein bisschen was, aber als basiertes Wissen kann man das nicht bezeichnen ).

Ich hab auf Youtube den Kanal von HTMLworld gefunden. Die Videos zu den DIV und Positionierungen im CSS habe ich mir gerade angeschaut, fand ich super gut und für mich verständlich erklärt. Kennt ihr diesen Channel? Könnt ihr ihn empfehlen? Leider verliert man als Laie auch den Überblick "was ist noch up to date?"?!

Zudem war ich auch auf der Suche nach einer Übersicht der ganzen HTML-Befehle. Gibt es da auch etwas? Wo man auch mal nachschauen kann, welcher Befehl für was verwendet wird?

 

[cythux]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

HTMLworld ist alles veraltet,

Vom Code her basiert dies noch aus Selfhtml Zeiten

Als Nachschlage der HTML Befehle kannst du hier schauen
http://www.w3schools.com/html/html5_intro.asp

Nicht jeden Code dort unter der Goldwagge legen
http://www.w3fools.com/

 

[patrick_l]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Ich hab auf Youtube den Kanal von HTMLworld gefunden. Die Videos zu den DIV und Positionierungen im CSS habe ich mir gerade angeschaut, fand ich super gut und [...]

Ich kenne diesen Channel nicht, möchte aber dir allgemein etwas zu Youtube und anderen Videoplattformen, auf denen Tutorials angeboten werden sagen. Bei den meisten sind die Inhalte mit Vorsicht zu genießen.

Vor allem auf Youtube gibt es eine Menge Videos, die alles andere als empfehlenswert sind. Zumindest was das die semantisch korrekte Umsetzung einer Website angeht. Daher auch von mir der Verweis brauchbare Quellen.

Wenn dir das Lernen mit Videos leichter fällt, solltest vielleicht den ein oder anderen Taler in eine gute Trainings-DVD investieren. In Kombination mit den oben verlinkten Seiten, wirst du nach und nach weiterkommen.

Das Internet schläft nicht. Soll heißen was heute noch aktuell ist, kann in ein paar Wochen, Monaten oder Jahren schon ein alter Hut sein. Es gibt weltweit wohl nichts anders, was sich eben so schnell weiterentwickelt als das Internet.
HTML wird mit Sicherheit auch immer ein wichtiger Bestandteil sein.

Zudem war ich auch auf der Suche nach einer Übersicht der ganzen HTML-Befehle.

Dann such mal hier nach HTML5 Referenzkarte. Mit selbigen Suchwort wirst du auch bei Tante G einiges finden. Einfach nach Referenzkarte oder Sheets suchen. Dir werden diese Referenzkarten jedoch anfangs nicht all zu viel nutzen, da du wahrscheinlich den richtigen Einsatz der selbigen nicht kennst.

HTMLworld ist alles veraltet,
Vom Code her basiert dies noch aus Selfhtml Zeiten

So wie ich es vermutet habe.

Liebe Grüße, Patrick

 

[kleinLuna]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Super Jungs! Danke für die weiteren Tipps!

Gut, dass ich wegen HTMLworld gefragt habe und danke für den Hinweis mit dem Suchwort "HTML5 Referenzkarte". Ohne diese genaue Bezeichnung war es kein Wunder, dass ich nix finden konnte ;-).

 

[cythux]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

Das sind Youtube Channels dir so empfehlen kann

https://www.youtube.com/channel/UCADyUOnhyEoQqrw_RrsGleA CSS Tricks

https://www.youtube.com/channel/UCADyUOnhyEoQqrw_RrsGleA Video2Brain

https://www.youtube.com/channel/UCqHktcPJV7C7T3e9Cg4T4iw Treehouse

 

[rodemund]

AW: Website-Layout in Photoshop erstellen + in Dreamweaver einbinden

https://www.youtube.com/channel/UCADyUOnhyEoQqrw_RrsGleA Video2Brain

Das kann ich bestätigen - die anderen kenne ich noch nicht.

... klicke das Link an, das ich bestätigen will, und lande bei CSS Tricks ... das kommt davon, wenn man was ungeprüft übernimmt.

video2brain: https://www.youtube.com/user/videotubebrain?feature=watch