nicht angemeldet
Zwickmüle
Schönen guten Tag zusammen
Mit Photoshop ein tolles Design zu kreieren ist nicht schwierig. Die Schwierigkeit besteht darin, das Design in einem Code sinnvoll umzusetzen.
Meine Design.psd ist nun fertig, alles klar soweit. Nur, wie setze ich das ganze sinnvoll und strukturiert um?
Natürlich könnte ich das ganze nun simpel slicen und als HTML als ganzes exportieren. das ganze mag dann auch schlussendlich gut "aussehen", aber wer die Quelltextdatei nachher anschaut, greift sich wahrscheinlich an den Kopf. (Nicht, das solche Konstrukte heutzutage nicht immernoch weitverbreitet wären)
Nun könnte ich das ganze slicen, die Grafiken exportieren (einzeln) und das ganze in einem Div-Layout verarbeiten. Dann gäbe es aber wieder die anderen üblichen Komplikationen: Pixelabstände, (optische) Fehler hier und dort, und ich müsste u.U. das ganze wieder mit Browserhacks und -weichen umschiffen, oder was auch immer.
Die Website ist sehr Grafiklastig, da es sich um eine Spielewebsite handeln soll. Dementsprechend ist das Design.
Nur wie ich das jetzt am sinnvollsten umsetze, ist mir noch schleierhaft.
Für Meinungen und Vorschläge wäre ich offen und dankbar.
Liebe Grüße,
A.lias
-
Wenn Du uns eine verkleinerte Darstellung des Layouts zeigen könntest, könnten wir Dir sagen, wie Du welche Elemente am Besten in semantisches HTML umwandelst und mit CSS formatierst.
Ansonsten gilt: benutze Deinen gesunden Menschenverstand: eine Liste ist je nach Priorisierung der Einträge als ul oder ol umzusetzen, Tabellarische Daten (mit mehr als einer Dimension - denn dann wäre es ja wieder eine Liste) kommen in table und Hintergrundbilder werden mittels CSS als background des jeweiligen divs gesetzt, welche logische Zusammenhänge nachbildet.
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes-
Ja, genau so habe ich es auch immer umgesetzt.
Nur habe ich niemals zuvor eine Website gemacht, die so stark - überwiegend - grafikorientiert ist. Und dann potenzieren sich die Probleme sehr schnell.http://img257.imageshack.us/my.php?image=vorlagekopiere2.jpg
Ganz fertig bin ich nicht, aber der Rest geht von alleine.
Du erkennst direkt die üblichen Elemente: Logo, banner, Navi Links, Topnavi... und der leerstehende Bereich wird durch "Fenster" ergänzt, in denen News angezeigt werden, Toplisten oder ähnlichen. (Das Design ist frisch, also Änderungen vorbehalten).LG
Wenn Du uns eine verkleinerte Darstellung des Layouts zeigen könntest, könnten wir Dir sagen, wie Du welche Elemente am Besten in semantisches HTML umwandelst und mit CSS formatierst.
Ansonsten gilt: benutze Deinen gesunden Menschenverstand: eine Liste ist je nach Priorisierung der Einträge als ul oder ol umzusetzen, Tabellarische Daten (mit mehr als einer Dimension - denn dann wäre es ja wieder eine Liste) kommen in table und Hintergrundbilder werden mittels CSS als background des jeweiligen divs gesetzt, welche logische Zusammenhänge nachbildet.
Gruß, LX
-
-
Hallo Adam,
Mit Photoshop ein tolles Design zu kreieren ist nicht schwierig. Die Schwierigkeit besteht darin, das Design in einem Code sinnvoll umzusetzen.
Meine Design.psd ist nun fertig, alles klar soweit. Nur, wie setze ich das ganze sinnvoll und strukturiert um?Erst mal überlegen, wie der Inhalt strukturiert in HTML umgesetzt wird: Überschriften, Navilisten, Textblöcke etc.
Dann überlegen, welche Deiner grafischen Elemente Inhalt transportieren: diese gehören mit ins HTML.
Dann ggf. Elemente mit divs so zusammenfassen, wie sie zusammengehören.
Grafische Elemente, die reine Deko sind, kannst Du - ggf. kachelnd (background-repeat) oder fest positioniert als CSS-Hintergründe an die bereits existierenden HTML-Elemente klemmen. Dabei helfen Dir meist sinnvolle margins und paddings für diese Elemente.
Erst wenn Du dann nicht hinkommst mit den existierenden HTML-Elementen, evtl. weitere divs oder spans in den HTML-Code einbauen, die weitere Deiner Grafikelemente transportieren können.
Das sind natürlich sehr allgemeine Tipps, aber ums Ausprobieren und nach einer Weile Erfahrungsammelns schon beim "scharf Draufschauen" sehen, wie's gehen könnte, wirst Du vermutlich nicht herumkommen.
Gruß aus Köln-Ehrenfeld,
Elya
--
We are drowning in information but starved for knowledge. John Naisbitt-
Servus :)
Wie gesagt, ich habe einige Erfahrung in Webeitenentwicklung. Aber bei diesem Design, absolut Grafiklastig... Sowas habe ich noch nicht gemacht.
Ich bin eigentlich überzeugter Purist, was das Webdesign angeht. Grafiken in Headern, und als Navihintergründe - ja. Ansonsten habe ich bisher zu 95% CSS Styles entwickelt.
Das "Projekt" jetzt ist privat, und ich möchte mich jetzt einfach austoben.Ich hoffe, das sich die Erfahrung, wie ich am besten mit grafiklastigen Designs umgehe, auch bald einstellt. Ich, als Privatperson, finde das nämlich sowohl spaßig als auch reizvoll. :)
LG
-