Photoshop Layout in CSS umsetzen


  • Th4R4t
  • 2217 Aufrufe 15 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Photoshop Layout in CSS umsetzen

    Hallo miteinander,

    habe als relativer Neuling was HTML und Co angeht mal eine Frage: Meine Freundin hat ein komplettes Website Layout in Photoshop entworfen (mit Menüs, Buttons,Banner,Navbar etc.)

    Als erster Versuch wurde alles gesliced und dann probiert mit frameset das ganze per HTML zusammenzusetzen was allerdings nicht so wirklich geklappt hat (frames haben sich verschoben, bei unterschiedlichen Auflösungen Probleme etc.)

    Habe mich per Google informiert und es wurde sehr oft erwähnt, dass CSS für das Layout verwendet werden soll.

    So nun die Frage: Wie schaffe ich es, dass ich das Layout was per Photoshop vorliegt 1:1 in CSS verwenden kann? (wie slicen-wenn überhaupt-, wie anfangen etc.)

    Es sollen keine großartigen Effekte oder Features auf der Seite (im Moment vorhanden sein)

    -Die Seite soll nur mit jedem Browser, Auflösung identisch aussehen (zentriert in der Mitte des Bildschirmes und fixiert)
    - Die Links sollen sich alle in der "Inhaltbox" (HTML target=)
    - eventuell wenn nicht so schwer die Möglichkeit, dass man in der Galerie auf das Bild klicken kann und das dann vergrößert wird als popup

    Wäre wirklich sehr dankbar wenn mir jemand helfen könnte, da ich im Moment keine Ahnung habe, wie ich am besten mit dem Photoshop Layout anfangen soll.

    Danke!

    Max

  • Hallo Th4R4t,

    es wäre einfacher wenn du hier ein Bild oder sowas posten könntest. So tappe ich nur im dunkeln und weiß nicht wirklich wie es aussehen soll :(

    Ein Tipp: vergiss es eine Seite mit Frames zu machen. Frames sollten heutzutage nicht mehr genutzt werden (Siehe Nachteile - wikipedia.org).
    Nutze lieber PHP und include die (html/php) Seiten (bei Interesse schicke ich dir gerne ein Script dazu).

    mfg
    Snip3r
    Rechteübersicht * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion * Chat * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)

  • Ja schliße mich Snip3er an. Bitte ein Bild posten.Habe mich auch mal an Frames versucht, und würde nur abraten.

    Du kannst auch Bild als Hintergrund etc. machen. ( Ich meine damit, dass dir dein Bild zwar angezeigt wird, darauf kannst du aber schreiben und deine Besucher können die Schrift auch kopieren, markieren etc.)

    Und das mit deinem Bild, dafür gibt es schätze ich spezielle Anbieter. Ich weiß es momentan nicht genau.

    mfg. h4wX

    Die Buttons müsstest du irgendwo platzieren und mit Hyperlinks versehen.

  • sorry, dass ich erst jetzt antworte, war aber nicht zuhause und hatte keine Möglichkeit ans Netz zu kommen.

    Wegen .psd Datei oder andersweitiger Bilddatei frage ich meine Freundin heute nachmittag.

    Zum ersten Verständnis hier mal die von Photoshop erstelle html Seite (das ist auch im Moment das einzige was ich da habe :) )

    Unbenannt-1 (die wurde allerdings schon gesliced von daher gehts nur erstmal ums Prinzip)

    Benutzt wurde Photoshop CS2

    Mfg,

    Th4R4t

  • Solltest du mir die .psd-Datei zukommen lassen, dann kann ich die Slices mit Sicherheit wieder rausmachen.;)
    Würde mir wie gesagt das mal anschauen und soweit mir möglich in CSS umwandeln.
    Über alles weitere sollten wir dann sprechen (per PN) wenn ich das soweit fertig habe.:)

    Edit:
    Hast du die Auflösung kleiner als 1024x768 gesetzt oder warum ist bei mir rechts nichts mehr im Browser zu sehen?:confused:
    1024x768 ist Standard außer wenn es dynamisch sein soll.
    Weil wer hat heut zu Tgae noch eine kleinere Auflösung?!

  • Eigentlich sollte das Design sich nicht verschieben, ob nun CSS oder nicht, sofern ihr %-Angaben gemacht habt. Die sind nämlich gerade dafür da, da Design in etwa in jeder Auflösung gleich aussehen zu lassen.
    Solltet ihr das gemacht habt und so ein Design zur Hand haben, dann würde ich das auf 1024x768 normen. Viele User laufen noch mit der Auflösung rum und man kann das auch prima bei höherer Auflösung betrachten.

    Zu eure Frame-Aufteilung. Wie habt ihr das gemacht?

    Mir würde bei dem Design spontan einfallen: 2 Frames (oben, unten)
    Oben: Tabellen mit Navi und Co. bis kurz unter die Hände rechts
    Unten: Content auch in einer Tabelle also ein großer <table>-Tag, dann kannst du den Content entsprechend anpassen und er sieht bei jeder Auflösung gleich aus.
    Ich bin mir nicht sicher, ob das mit deiner Target-Anweisung noch geht, wenn du der Tabelle ne Variable oder soetwas verpasst, aber ich denke eher nicht. Deswegen: Seite immer neuladen, also den unteren Frame


    Wäre jetzt meine Idee dazu ;)

    Und entschuldige bitte, wenn ich Dinge wiederhole ^^

  • Habe das Ding in 3 Frames aufgeteilt (oben, links, rechts) und dann noch 2 Frames in Grün links und rechts davon, damit es zentriert ist. Jedoch verschob es sich immer trotz % Angaben (manches musste mit fixem Wert festgelegt werden da es sonst total falsch dimensioniert war. Bei mir auf dem Macbook sah es 1A aus, dafür auf nem Windows Rechner mit Firefox total zusammengeschoben.
    Leider kann man ja auch keine Target auf eine Tabelle legen :(

  • Guck dir mal css4you.de an, die haben dort super CSS-Layouts!

    Im PRimzip gehen die so:

    Als erstes ein Wrapper (#wrap im Style), der das ganze umrundet.

    Da drinnen dann das #menu, der #header und der #content-Bereich(alles IDs die im Style_Tag definiert werden).

    Und die musst du dann alle ausrichten, Höhe(bei Header), Länge und obs float:left oder float:right ist.

    Naja, schau dir einfach die Seite an, irgendwo ist da ein Menüpunkt "Tabellenloses LAyout".

  • ---> das müsste eigentlich auch alles mit HTMl funktionieren.. wenn du mir die .psd mal zukommen lässt probier ichs mal für dich (-> bin mir ziemlich sicher das es funktioniert ;) )