.psd in html einbinden

Computer: Software & Programmierung HTML & CSS
#1

Hallo,
ich habe mir vorhin ein Homepagedesign mithilfe von Photoshop erstellt. Es beinhaltet nicht nur Navigation, sondern auch Header, Newsticker etc. Nun stehe ich vor der Frage, wie ich das Ganze in HTML mit eibinden kann?

Muss ich dafür das Design in kleine Teile zerschneiden und dann in Tabellen oder Div-Boxen einfügen oder gibt es da eine andere Möglichkeit?

Im Normalfall würde ich ja alles mithilfe von Frontpage machen, aber ich will noch mein php-Newsscript mit einbinden und glaube nicht, dass das bei Frontpage ohne weiteres möglich ist.

Danke im Voraus

#2

Hallo, wahrscheinlich wird es eine Kombination sein.bitte einfach mal das Design an
[email protected] schicken,dann kann ich besser helfen.gegen kleines Entgelt kann ich auch
die html/CSS Umsetzung übernehmen.

Gruß,

chris

bornidesign.de

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#3

Hallo,

In der Regel werden Designs in Html umgesetzt, d.h.,
wie du bereits richtig vermutet hast, zerteilt und in
Div-Boxen etc. mithilfe von CSS dargestellt.
Eine andere Möglichkeit wäre natürlich, dein
Homepagedesign in Flash umzusetzen, womit ich dir
leider nicht helfen kann, aber da du ja ein fertiges
Newsscript in PHP besitzt, kommt das wohl sowieso nicht
in Frage.

Da dein Design ja im Photoshop-Format vorliegt, kann
ich dir Dreamweaver empfehlen, da beides von Adobe ist
und dementsprechend integriert ist… sprich
Dreamweaver kann die .psd-Dateien direkt importieren.
Achte darauf, dass du die neuste Version von
Dreamweaver benutzt. Du kannst dir auf der offiziellen
Adobe-Website einfach eine Testversion runterladen, die
30 Tage hält um es mal zu testen.

PHP sollte für Dreamweaver auch keine Probleme
darstellen, da du für sowas wohl auch einfach in die
Code-Sicht umschalten kannst (was Frontpage meines
Wissens nach nicht beherrscht).
So genau kann ich dir das aber leider auch nicht sagen,
da ich kein Experte für Dreamweaver bin, aber notfalls
kannst du auch das Grundgerüst in DW bauen und dann
dein PHP-Script „manuell“ mit einem Texteditor direkt
im Code integrieren.

Ich hoffe ich konnte dir behilflich sein.

  • Patrick

Hallo,
ich habe mir vorhin ein Homepagedesign mithilfe von

Photoshop

erstellt. Es beinhaltet nicht nur Navigation, sondern

auch

Header, Newsticker etc. Nun stehe ich vor der Frage,

wie ich

das Ganze in HTML mit eibinden kann?

Muss ich dafür das Design in kleine Teile zerschneiden

und

dann in Tabellen oder Div-Boxen einfügen oder gibt es

da eine

andere Möglichkeit?

Im Normalfall würde ich ja alles mithilfe von

Frontpage

machen, aber ich will noch mein php-Newsscript mit

einbinden

und glaube nicht, dass das bei Frontpage ohne weiteres

möglich

ist.

Danke im Voraus

#4

Hallo Nico,

habe lange nichts mehr gemacht, aber schau doch mal bei
selfhtml.org da findest du eigentlich alles was du über
das erstellen von homepages bzw. html wissen musst.

mehr kann ich dir leider nicht sagen, da ich etwas aus
dem thema raus bin.

viel erfolg

Hallo,
ich habe mir vorhin ein Homepagedesign mithilfe von

Photoshop

erstellt. Es beinhaltet nicht nur Navigation, sondern

auch

Header, Newsticker etc. Nun stehe ich vor der Frage,

wie ich

das Ganze in HTML mit eibinden kann?

Muss ich dafür das Design in kleine Teile zerschneiden

und

dann in Tabellen oder Div-Boxen einfügen oder gibt es

da eine

andere Möglichkeit?

Im Normalfall würde ich ja alles mithilfe von

Frontpage

machen, aber ich will noch mein php-Newsscript mit

einbinden

und glaube nicht, dass das bei Frontpage ohne weiteres

möglich

ist.

Danke im Voraus

#5

Danke erstmal. Habe es jetzt mithilfe der slice-Funktion von Photoshop hinbekommen, aber jetzt hab ich ein anderes Problem.
Bin mir nicht sicher, ob man mir hier helfen kann, aber ich möchte gerne die News über einen der „Slices“ ausgeben. Mit „normalem“ Text geht das ganz gut, auch wenns irgendwo umständlich scheint:

Text

Wenn ich allerdings statt des Texts

<?php include 'news.php';
?\> eingebe, tut sich leider nichts. Zum Verständnis: Die News(Titel, Datum, Text, etc.) werden im Skript nacheinander mit einer while-Schleife ausgegeben. Das Ganze läuft über den echo-Befehl. Am Skript selber liegts jedenfalls nicht. Das hab ich getestet.
#6

sorry, no idea … selfhtml … da findest du mit
sicherheit sowas.

#7

Hallo Nico,

im Grunde ist es die sauberste Lösung erstmal ein css Layout zu erstellen das die Einteilungen so wie Du sie in der PSD hast zur Verfügung stellt. Falls Du das nicht alles selbst schreiben willst würde ich Dir empfehlen Dir mal YAML anzuschauen. Das ist an scih recht schick und mit ein bisschen einarbeitung hast Du schnell ein robustes, barrierefreies Layout. Falls Dir das zu viel Aufwand ist kannst Du auch Frontpage oder Dreamweaver benutzten oder wie sie auch alle heißen. Im Endeffekt müsstest Du für Dein PHP Script nur die entsprechende Seite in .php umbenennen und Deinen Code einbauen. Das sollte kein großer Aufwand sein. für den PHP Code müsstest Du dann aber selbst im Quellcode rumhantieren. Meine Empfehlung ginge dahin, dass Du eine Masterseite erstellst. Diese dann zu einer .php Datei erklärst und dann über PHP Variablen (per $_Post oder $_Get abgefragt) dynamisch deine Inhalte in die Seite lädst. Leider weiß ich nicht wie groß Dein Kenntnisstand ist. Ich helfe aber gerne wenn Du noch weitere Fragen hast.

Gruß
Peter

#8

Hallo Nico,

in diesem Fall kann ich Dir leider nicht weiterhelfen.

Gruß Uli

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#9

Das hatte ich an für sich auch vor. Das Problem ist allerdings, dass ich gestern die Anordnung der Div-Boxen nicht richtig hinbekommen habe.
Zwischen den einzelnen Schnippseln waren immer Lücken und ich wusste nicht wie ich die wegbekomme.
Außerdem ist die Anordnung relativ problematisch. Das läuft, wenn ich mich jetzt nicht irre, über float. Habe leider hier gerade keinen Editor um mir das genau anzuschauen.
Von links nach rechts dürfte das kein Problem sein (solange ich die Länge und Breite richtig angebe), aber wie komm ich in die nächste Zeile? Bin mir nicht sicher ob ich da float:down angeben kann oder sowas.
Müsste dann ja auch erst von rechts nach links, dann nach unten und rechts nach links etc. die einzelnen Schnippsel einfügen.
Denke ich mir das so richtig oder habe ich da ähnlich wie bei den Tabellen Spalten, die ich angeben muss?

#10

Grundsätzlich hast Du mit Deiner Annahme recht. Die Boxen bekommst Du per float nebeneinander. Bei mehreren Boxen in einer Spalte würde ich zuerst eine Box definieren die alle Boxen umschließt. Jenachdem ob Deine Boxen von links oder von rechts angeordnet werden sollen müsstest Du dann die innenliegenden Boxen jeweils mit einem float:left oder float:right definieren und natürlich eine größe angeben. Wenn die innenliegenden Boxen von der gesamtgröße größer sind als die umschließende Box wird es zu Problemen kommen. Das solltest Du bedenken. Eigentlich sollten die Boxen per Default keinen Abstand zu einander haben. Wenn Du jedoch sicher gehen willst könntest Du bei den Boxen jeweils ein padding:0px definieren. Wenn Du dann genug nebeneinander liegende Boxen produziert hast kannst Du die umschließende Box zumachen und dann mit der nächsten Reihe beginnen. Float Eigenschaften sind jetzt aber nicht ganz einfach zu erklären. Wenn Du mal einen komplett Überblick haben möchtest hilft Dir das hier sicherlich weiter http://css.maxdesign.com.au/floatutorial/ . Leider kann ich hier keinen Dateien anhängen. Wenn Du mir mal Deine E-Mail addy oder sowas gibst mach ich Dir mal ein einfaches Beispiel wie ich es hier beschrieben habe und schicke es Dir zu. Leider werde ich aber nicht vor dem Wochenende dazu kommen weil ich momentan im Prüfungsstress Stecke. Andererseits kann ich Dir nur noch mal YAML empfehlen. http://www.yaml.de/ hier bekommst Du quasi einen Layout Baukasten. Kannst es Dir ja mal runterladen (ist kostenlos). Wenn Du nicht viel selbst machen magst oder kannst, kannst Du Dich ja mal durch die Samples klicken die enthalten sind und ein raussuchen, dass Deinen Vorstellungen am nächsten kommt und dieses dann mit Deinen Bildern ausschmücken. Wird zwar Anfangs auch etwas schwieriger aber wenn Du es mal durchschaut hast ist es einfach nur genial :wink:

#11

Nene, mit float an sich hab ich keine Probleme. Nur weiss ich momentan nicht wie ich quasi in die nächste „Zeile“ komme.
Werd mir dann mal yaml anschauen wenn sich die Zeit findet, trotzdem danke.

#12

in die nächste Zeile kommst Du in dem Du einfach kein Float mehr benutzt. z.B.

ertste Zeile mit 3 Boxen (Wrapper umschließt das gebilde)

div#wrapper {width:100%;}
div#links {float:left; width:50px;}
div#mitte {float:left; width:100px;}
div#rechts {float:left; width:50px;}

das konstrukt in HTML sieht dann so aus

Text für die Box ganz links
Text für die Box in der Mitte
Text für die rechte Box

in der nächsten Zeile könntest Du dann so weiter machen

div#wrapper2 {width:100%;}
div#links2 {float:left; width:50px;}
div#mitte2 {float:left; width:100px;}
div#rechts2 {float:left; width:50px;}

das konstrukt in HTML sieht dann so aus

Text für die Box ganz links
Text für die Box in der Mitte
Text für die rechte Box

Natürlich ist das jetzt nicht das schönste. Ist nur mal schnell ein kleines Beispiel zum besseren Verständnis. Was ich noch vergessen habe zu erwähnen was Du aber sciherlich schon weißt. Wenn Du floatest musst Du auch immer wieder aufheben (clear:both). Das kannst Duzum Beispiel im footer (Fußzeile) machen. Wenn Du noch fragen hast frag ruhig :wink:

Gruß

#13

Hallo,

ich weiß es nicht genau. Würde dir die Möglichkeit mit den Divs empfehlen.

Muss ich dafür das Design in kleine Teile zerschneiden und
dann in Tabellen oder Div-Boxen einfügen oder gibt es da eine
andere Möglichkeit?