von PSD zu HTML

[Alada]

hallo, ich habe eine generelle Frage:
Ich gestalte Webseiten mit Photoshop und kann ja z.B. die "Für Web und Geräte speichern" Funktion benutzen, um die erstellten Slices dann in Bildern abzuspeichern und das Div-Gerüst zu erstellen.
Danach arbeite ich mit dem Dreamweaver und setze die Texte ein und mache das CSS-Sheet. Ist das soweit die "gängige" Vorgehensweise? Oder würde ihr hier schon was besseres empfehlen? Mein Problem ist dann z.B. wenn ich an den Slices bzw. dem Bildaufbau während des Projektes etwas ändere, dann kriege ich Probleme: Photoshop speichert die Bilder neu und erstelle ein neues Gerüst --> das muss ich dann händisch in meine schon abgeänderten Dateien einbasteln bzw. erstmal natürlich in meien CSS-Datei und so weiter.
Gibt es hier eine bessere Lösung / Tools?
Danke für die Beantwortung der Grundsatzfrage :-)

[patrick_l]

Das ist nicht die gängige Vorgehensweise. Der von Photoshop generierte Code ist so in seiner Form (Tabellen-Layout) nicht zu gebrauchen bzw. eigentlich Murks. Man kann ihn höchstens als Mockup gebrauchen, um mal eine schnelle Vorschau im Browser zu haben.

Du solltest dein HTML Grundgerüst sauber per Hand aufbauen und anschließend alle für deine Website bzw. für dein Layout benötigten Grafiken mit CSS einbinden. So bleibt der Code auch schön schlank.

Grüße Patrick

[Alada]

mein problem ist: photoshop positioniert die bilder ja mit genauen pixel-angaben.
ist das unnötig? so kann ich ja gar nicht positionieren.
also schlägst du vor, nur die bilder von photoshop erstellen zu lassen? im übrigen macht ps keine tabelle, sondern kann auf wunsch auch eine schöne css-datei erstellen inklusive divs.

ich bin mir auch mittlerweile nicht mehr so sicher, ob ich njicht mit einem cms-system arbeiten sollte. ich persönlich halte das ja für kleinere projekte für überdimensioniert und ich kann auch das layout nicht 100%ig an meine vorstellungen anpassen (oder eben nur mit viel arbeit).
was meint ihr dazu? cms - ja oder nein?

[leveler]

ich bin mir auch mittlerweile nicht mehr so sicher, ob ich njicht mit einem cms-system arbeiten sollte. ich persönlich halte das ja für kleinere projekte für überdimensioniert und ich kann auch das layout nicht 100%ig an meine vorstellungen anpassen (oder eben nur mit viel arbeit).
was meint ihr dazu? cms - ja oder nei

kommt halt immer darauf an, was man vorhat...auch für kleine Seiten kann ein CMS a la Wordpress sinnvoll sein, muss es aber nicht .

[patrick_l]

Auch wenn Photoshop jetzt keine Tabellen-Layoute mehr ausspuckt, würde ich dein HTML bzw. das Grundgerüst per Hand erstellen. Halt schon allein aus dem Grund weil man so den Quellcode etwas schlanker gestalten kann. Das Grundgerüst ist ja auch schnell erstellt.

Mal meine Frage an dieser Stelle wie allgemein deine Kenntnisse sind. Ich meine was die Grundlagen von HTML und CSS angeht. Zu deiner Frage CMS ja oder nein. Kommt hauptsächlich auf den eigentlichen Content deiner Website an. Sollen regelmäßig neue Inhalte hinzugefügt werden?

Wenn ja, dann macht ein CMS durchaus Sinn. Allein weil (deine) Inhalte einfach verwaltet und neue Inhalte schnell erstellt werden können. Hier würde ich dann für kleine bis mittelgroße Websites WordPress wählen. Erst für größeren Sites Joomla, Drupal oder ein vergleichbares CMS in der Größenordnung einsetzen.

Grüße Patrick

[Alada]

also ich schätze mich so mittelmäßig ein, was die kenntnisse angeht.
ich habe immer alles selbst erstellt, administriere jetzt aber eine word-press und eine drupal-seite un muss feststellen, dass das alles schon eine andere welt ist.
die seite kriegt sicherlich immer mal was neues reingebastelt, aber ich bin eben er administrator, d.h. änderungen mache ich.
vielleicht bin ich einfahc von der alten schule :-)

[MyBad]

Kann meinen Vorrednern nur zustimmen. Vielleicht ergänzend sei noch erwähnt, dass auch die Slices in PS oft völlig daneben sind und mehr Grafik ausspucken als benötigt.

Also nicht nur das Markup von Hand erstellen, sondern auch nur die Grafiken "slicen", die auch wirklich benötigt werden. Spart Ladezeiten.

[patrick_l]

Wenn du dich bereits mit Drupal und WordPress auskennst, würde ich deine Website auch auf eines dieser CMS aufbauen. Wobei ja WordPress kein klassisches CMS (sonder ein Blogsystem) ist.

Je nach dem wie dein Layout aussieht kannst du ja auch eines der vielen kostenlosen ( fertiges Themes für WordPress verwenden und dieses an deine Bedürfnisse entsprechend anpassen.

Zitat von MyBad

Kann meinen Vorrednern nur zustimmen. Vielleicht ergänzend sei noch erwähnt, dass auch die Slices in PS oft völlig daneben sind und mehr Grafik ausspucken als benötigt.

Gut das du das auch nochmal erwähnst. Was natürlich im Bezug auf Slices klasse ist, ist das ausgeben in unterschiedlichen Formaten. Grafiken etc. als Gif oder Png. Bilder ganz flott in Jpg.

Grüße Patrick

[Plotz]

Zitat von patrick_l

... Der von Photoshop generierte Code ist so in seiner Form (Tabellen-Layout) nicht zu gebrauchen bzw. eigentlich Murks. Man kann ihn höchstens als Mockup gebrauchen, um mal eine schnelle Vorschau im Browser zu haben.

Du solltest dein HTML Grundgerüst sauber per Hand aufbauen und anschließend alle für deine Website bzw. für dein Layout benötigten Grafiken mit CSS einbinden. So bleibt der Code auch schön schlank.

Grüße Patrick

Richtige Vorgehensweise:

1. in den Slice-Optionen grundsätzlich eigene Namen für die zu erzeugenden Bilder vergeben, dann kann es zu keiner Namensrotation durch Neuanlage zusätzlicher Slices kommen.

2. im Modul 'Für Web und Geräte speichern' auf 'Speichern' klicken, dann die 3. Kombobox 'Einstellungen' aufklappen, 'Andere ...' wählen. Es öffnet sich ein Dialog 'Ausgabeeinstellungen'. Mal genau umsehen (!) und dann auf 'weiter' klicken. In dieser zweiten Seite des Optionsdialogs bei 'Slice-Ausgabe' umschalten vom default 'Tabelle erstellen' auf 'CSS generieren'. Auch dort mal richtig umsehen, genauso wie auf der dritten und vierten Seite dieses Optionsdialogs und bei Bedarf Einstellungen nach Gusto anpassen.

Dann bekommt ihr auch vernünftiges tabellenloses CSS generiert. Da muss prinzipiell erst mal nix "händisch" nachgeschustert werden - und statt "Murks" gibts die erwünschten Ergebnisse.

[MyBad]

Zitat von Plotz

Richtige Vorgehensweise:

1. in den Slice-Optionen grundsätzlich eigene Namen für die zu erzeugenden Bilder vergeben, dann kann es zu keiner Namensrotation durch Neuanlage zusätzlicher Slices kommen.

2. im Modul 'Für Web und Geräte speichern' auf 'Speichern' klicken, dann die 3. Kombobox 'Einstellungen' aufklappen, 'Andere ...' wählen. Es öffnet sich ein Dialog 'Ausgabeeinstellungen'. Mal genau umsehen (!) und dann auf 'weiter' klicken. In dieser zweiten Seite des Optionsdialogs bei 'Slice-Ausgabe' umschalten vom default 'Tabelle erstellen' auf 'CSS generieren'. Auch dort mal richtig umsehen, genauso wie auf der dritten und vierten Seite dieses Optionsdialogs und bei Bedarf Einstellungen nach Gusto anpassen.

Dann bekommt ihr auch vernünftiges tabellenloses CSS generiert. Da muss prinzipiell erst mal nix "händisch" nachgeschustert werden - und statt "Murks" gibts die erwünschten Ergebnisse.

Selbst mit angepassten Einstellungen ist das genierierte Markup (nun zwar ohne Tabellen) immer noch Murks! Sauberes Markup und sauberes CSS lässt sich (noch) nur per Hand erreichen. Das setzt natürlich Fachwissen voraus. Ein Anfänger ist sicherlich auch in der Lage schlechteren Code zusammen zuschustern als PS es macht.

[patrick_l]

Zitat von Plotz

Richtige Vorgehensweise:

1. in den Slice-Optionen grundsätzlich eigene Namen für die zu erzeugenden Bilder vergeben, dann kann es zu keiner Namensrotation durch Neuanlage zusätzlicher Slices kommen. [...]Zitat gekürzt

Danke für den Nachtrag. den "Für Web speichern" kenne ich eigentlich sehr gut. Nur halte ich selber nichts von dem was Photoshop dort an Code ausspuckt. Angefangen bei Grafiken die nicht sein müssen bis hin zu aufgeblähten Code mit für mich überflüssigen Kommentaren.

In meinem Workflow trenne ich das Design und die Umsetzung voneinander. Auch findet man sich meiner Meinung nach im eigenen Code schneller zurecht. Vor allem wenn man immer nach einem gewissen Schema vorgeht. Grundgerüst, Namen der ID's und Klassen usw.

Grüße Patrick