Antworten auf deine Fragen:
Neues Thema erstellen

Homepage (Hilfe bei der Umsätzung)

macapple

Noch nicht viel geschrieben

Schön guten Abend zusammen,
Ich sitze seit einigen Tage an einem Homepage Design und beiße mir gerade die Zähne dabei aus, aus der Photoshop Datei eine Homepage zu machen.
Mein Design hat glaube ich keinen ganz typischen Aufbau, alleine schon weil ich einen Verlauf im Hintergrund habe und darauf einen Hintergrund meiner Seite mit einem Muster (also nicht einfarbig). Sämtliche Tutorials die ich gefunden habe, hier oder bei youtube, erläutern die Erstellung einer Homepage anhand der ganz einfachen Design's, sprich alles einfarbig, keine Muster und alles gradlinig. So kann man die Homepage relativ schnell mit Tabellen in Form bringen. Nur das Funktioniert bei mir nicht. Habe schon alles zerschnitten, und müsste so viele Tabellen anlegen um mein Bild da unter zu bekommen. Auch an Flash Catalyst habe ich mich ran gewagt, nur da bin ich mit dem Ergebnis überhaupt nicht zufrieden.
Ich vermute ich bräuchte eine Kombination aus html/css und Flash um den Hintergrund da rein zu bekommen.

Um euch eine groben Überblick zu verschaffen was ich mir vorgestellt habe, hier einmal eine kleine Skizze:

Ich hoffe das ist irgendwie realisierbar und das ihr mir hier weiter helfen könnt.

Schönen Abend,

Gruß Nils
 

gonzo6969

Internetschrauber

AW: Homepage (Hilfe bei der Umsätzung)

Nix Tabellen, dies ist ein einfaches Boxmodell das du mit CSS realisieren kannst. Dein Muster wird als Hintergrundbild der Boxen angelegt.

Gockel mal nach CSS Boxen, dann wird dir geholfen
 

Herr_D

offline

AW: Homepage (Hilfe bei der Umsätzung)

Naja 'n Verlauf im Hintergrund + Muster ist ja nun nicht so spektakulär...


Zeig mal deinen richtigen Entwurf, dann können wir dir sagen, wie viele Bilder du wirklich brauchst und was du allein mit html/css umsetzt...
 

piepel

LocalDurst

AW: Homepage (Hilfe bei der Umsätzung)

Was meinst du mit Muster? Den Trenner in dem roten Bereich? Und sollen die schwarzen Boxen genau so auf dem weißen Grund sein?
Falls das so ist:
Du brauchst 2 Hintergrundbilder. Einmal den Verlauf 1px breit, die Höhe die du brauchst, genauso auch für das rote Muster. Diese bindest du als Hintergrundbild per CSS ein - zwar so wie gonzo6969 schon sagte - in dein Boxmodell.
Du brauchst Photoshop höchstens um die Hintergrundbilder herzustellen, aber nicht für das Layout. Falls du dich mit PHP beschäftigst, brauchst du nicht mal ein Bild für den Verlauf.
Kann man auch per PHP erstellen.
Abgesehen davon, beschäftige dich mit HTML und CSS und wie du die Boxen erstellst.
 

macapple

Noch nicht viel geschrieben

Erst einmal vielen Dank für die vielen Antworten.
Zu meinem Beispiel-Muster; Der rote Bereich steht für mein Musterhintergrund ( ein Wirrwarr aus kleinen strichen, die eine stoffähnliche Struktur bewirken ).
Auf diesem Hintergrund habe ich 2 Felder positioniert (die weißen Bereiche). In dem oberen habe ich links eine Grafik und rechts 3, ich nenne sie jetzt mal "Banner". ich möchte das die Banner anzuklicken sind und das wenn man mit der maus über eines der Banner geht sich das Bild links ändert. Also quasi ein Rollover-Effekt.
Im unteren Bereich habe ich links einen Rahmen vorgesehen, in dem ein Bild positioniert werden soll. Rechts ebenfalls ein Rahmen in dem ich dann den Text darstellen möchte.
Zwischen den zwei weißen Feldern habe ich zusätzlich noch Grafiken untergebracht die sich vom "Muster-Hintergrund" abheben. Ich weiß nicht ob das hier einen unterschied macht. Ich hoffe meine Grafik ist jetzt besser zu verstehen.

Ich habe mal nach dem Boxenmodell bei CSS gegoogelt und irgendwie hat mir das nicht weiter geholfen. Gelandet bin ich bei selfhtml und w3 usw. und hier gab es immer wieder das selbe zu lesen, nämlich der Aufbau von rahmen, Innenseite, abstand. Nur bekomme ich da keinen richtigen Ansatz hin, der mich meinem Problem näher bringt.
Um die Datenmenge gering zu halten habe ich meinen "Muster-Hintergrund" ausgeschnitten, d.h. die breite entspricht der Homepage große, allerdings nicht in der länge. Ich müsste also die Grafik in Y-Richtung wiederholen lassen nur das habe ich schon nicht geschafft.

Vielleicht könntet ihr mir das ganz etwas nähe beschreiben und Mithilfe meiner Skizze mich der Lösung meines Problemen näher bringen.

Kleiner Nachtrag. Auf Youtube bin ich fündig geworden, allerdings geht man hier bei der Überlagerung von Boxen immer von der linken oberen ecke aus. meine homepage soll allerdings zentriert sein und dann müssen sich die boxen quasi am Hintergrund orientieren. geht das auch?
 
Zuletzt bearbeitet von einem Moderator:

adomait

Gelegenheitsamateur...

AW: Homepage (Hilfe bei der Umsätzung)

Um Dein Layout zu zentrieren, beginnst Du Dein Gerüst dann einfach mit einer zentrierten Box, in die Du dann alle anderen Inhalte (Boxen/Container/Divs, wie auch immer man das dann nennen mag...) einbaust.
Ich empfehle Dir, ein paar Stunden mit Little Boxes zu verbingen, danach bist Du zwar immer noch kein Profi, weißt aber, wie der generelle Aufbau funktioniert und was Du beachten musst.

Grüße,

Boris.
 

lexip

Nicht mehr ganz neu hier

AW: Homepage (Hilfe bei der Umsätzung)

Vielleicht auch einfacher, wenn Du erstmal Beispiele siehst und daran lernst.
Da gibt es zB folgende Website intensivstation :: CSS Templates
Relativ einfach nachvollziehbare Beispiele des Zusammenwirken von Css und Boxmodel.
(findbar dies und weiteres unter Suchworteingabe bei google: "website css layout templates")
 

macapple

Noch nicht viel geschrieben

AW: Homepage (Hilfe bei der Umsätzung)

Also mit den Div Boxen komme ich jetzt langsam klar. Das Einzige was mir absolut nicht gelingt ist, das ich eine Box bündig mit dem oberen Browserrand schließen lasse. Egal ob ich 0px einstelle, es bleibt immer ein kleiner Abstand. Wie bekommt man den denn weg?
 

macapple

Noch nicht viel geschrieben

AW: Homepage (Hilfe bei der Umsätzung)

Super danke!
jetzt habe ich noch was. Und zwar habe ich einen verlauf im Hintergrund angelegt mit der Eigenschaft sich in x Richtung zu wiederholen und die Hintergrund Farbe auf weiß gestellt. jetzt habe ich die div box für den Hintergrund auf eine breite von 1024px und eine höhe von 2000px gestellt. was jetzt passiert ist, ist das ab der hälfte der Box sich der verlauf auf einmal wiederholt. Verstehe nicht ganz wieso das so ist und wie ich das ändere
 

kaaaay

Lissitzky

AW: Homepage (Hilfe bei der Umsätzung)

du brauchst für den Hintergrund keine eigenen Div Container und wieso eine feste größe? Was bei Auflösungen jenseits der 1024px? Dort hört er dann einfach auf.

Das ganze kannst du genauso in die html, body schreiben.

z.B.:

background-image:url(images/background.jpg);
background-repeat:repeat-x;


Außerdem wäre da immer der Code und eventuell ein Screen von Vorteil um besser zu sehen wo dein Problem liegt.

Gruß
 

piepel

LocalDurst

AW: Homepage (Hilfe bei der Umsätzung)

Es geht auch noch kürzer

background: white url(images/background.jpg) repeat-x;

Wenn du dir TopStyle Lite lädst, hast du auf der rechten Seite einen Inspektor, wo du solche Sachen einstellen kannst.
 

dragobert

Nicht mehr ganz neu hier

AW: Homepage (Hilfe bei der Umsätzung)

"Zum Beispiel den grauen nach weiß verlaufenden Hintergrund
kann man mit purem CSS erstellen.."
Habe den Test gemacht, habe mir den Standard-Verlauf
den die Seite anbietet erstellen lassen.

14,3 KB gross... Das muss man sich mal vorstellen.
Nur die CSS-Datei wird um 14 KB zusätzlich aufgebläht.
Eine Verlaufgrafik für den Hintergrund (jpg, gif, oder png)
ist etwa 1-2 KB gross und mir einem "Malprogramm" wie Photoshop
schnell erstellt. ;)

14 KB ist nicht gross. Aber bei einer CSS-Datei, bei der es sich
um eine reine Textdatei handelt, spielen 14 KB eine grosse Rolle.
Das merkt man dann, wenn man die CSS-Datei bearbeiten will.

Oder wenn man den Verlauf ändern will, andere Farben...
 

macapple

Noch nicht viel geschrieben

AW: Homepage (Hilfe bei der Umsätzung)

Also ich bin habe es jetzt mit den div boxen geschafft meine startseite so zu erstellen, wie ich sie mit photoshop designt habe. Nur ich fände das jetzt ziemlich zeitaufwändig zumal mir noch einige Seiten fehlen. Gibt es eine Möglichkeit aus meinem design ein Template für CMS Systeme zu machen? damit ist die Pflege meiner Seite sicherlich einfacher.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben