Webdesign - Was nun?!

MrMister · 26.05.2005, 19:39

Hi Jungs, ich habe da ein Problem der eher psychologischen Natur... Seit mehreren Wochen versuche ich mich ins Webdesign einzuarbeiten und komme mittlerweile mit Photoshop ganz gut klar, PHP beherrsche ich auch halbwegs (keine Kunst wenn man C++ kann), die Grundzüge von HTML bekomme ich halbwegs auf die Reihe, nur: Irgendwie will das bei mir nicht harmonieren?! Ich habe eine Website in PS gebaut, ich habe einige Scripte, die ich einbauen will, in PHP realisiert und stehe nun vor einem Haufen von Einzelteilen, die einfach nicht so wirklic zusammenpassen wollen. Da das Erklären in diesem Forum wohl den Rahmen des Machbaren sprengen würde und ich das von niemandem verlangen kann bin ich auf der Suche nach ein wenig Hilfe aus dem Web... Kennt ihr vielleicht irgendein Tutorial oder eine Seite, die sich mit dem kompletten Design einer Seite beschäftigt? Ich finde immer nur Seiten, die entweder Photoshop oder PHP oder sonstiges beinhalten, aber keine Seite, die mir verrät, wie ich das alles zu einer Seite zusammensetzen muss. Mir ist klar dass ich mir als totaler Anfänger sicher einiges vorgenommen habe, aber die einzelnen Teile zu basteln war möglich, also sollte es ja auch die Endrealisierung sein, oder?

Auch ganz hilfreich wäre mal ein wirklich informatives Tutorial zu HTML und CSS, selfhtml ist meiner Meinung nach einfach Mist. Dort wird man mit 1000. Standards bombadiert, quält sich durch 30 Seiten, lernt, wie man eine Seite in einer Suchmaschine platziert und kann dabei noch nichtmal einen Link einbauen.
Wäre toll wenn ihr mir ein paar Ratschläge geben könntet und ein wenig Licht uns Dunkle bringt.

Ein sich im Vorraus bedankender
MrMister

Stefan · 26.05.2005, 19:44

Schau mal auf DrWeb.de. Das ist ein Webdesign Magazin, vielleicht findest du ja ein paar Artikel

walter · 26.05.2005, 20:49

Also erst mal meine Meinung/Hilfe zu dieser Aussagen von Dir:

Zitat:

selfhtml ist meiner Meinung nach einfach Mist

Hmm, hast du von vorne begonnen? Eigentlich wird da von vorne angefangen. War zumindest damals auch meine Startlektüre.
Momentan fällt mir persönlich auch keine einfachere oder bessere ein. Da mußt du durch!

Bei CSS-Lektüren gibts Alternativen:
http://www.css4you.de/
http://barrierefrei.e-workers.de/p_index-praxis.php

Ansonsten wird es schwer ein komplett-Tutorial zu finden. Ich erklär jetzt mal ganz grundlegend wie ichs mache und vermutlich die meisten anderen auch. Muß dazu sagen das ich eher der Programmiertyp bin, wie du vermutlich auch.

1. Erstellen des Designs
Du machst es mit Photoshop ich mit Fireworks. Kenne aber auch PS und daher gehst du so vor:
Erstellung des Designs -> Design wird mit Image Ready in einzelne Grafiken geclict (zerschnitten)

2. Umsetzung des Designs in HTML/CSS
Nun setzt du die einzelnen Grafiken mittels HTML/CSS zusammen. HTML ist für die logische Struktur zuständig, CSS für das Aussehen/Positionierungen.

3. PHP usw.
Was möchtest du mittels PHP einbinden/coden?
Grundsätzlich wird mit PHP auch nur die Ausgabe in HTML beeinflußt. Der Browser versteht nur HTML/CSS, kein PHP. Der PHP-Code wird bereits am Server durch den Parser geschickt und liefert HTML(XHTML) zurück.

So das war die sehr grobe Erklärung. Für weitere Fragen/Antworten einfach die TP-Suche benutzen oder einfach fragen.

Viel Erfolg!

steff11 · 26.05.2005, 21:01

Hi MrMister,
schwer was zu raten. Nur so ´ne Anmerkung: du erzählst, das du mit PS was nachst, mit php, mit html, mit ... das ist schön und gut. Aber: das sind doch alles Werkzeuge, die helfen (können) ein bestimmtes inhaltliches Ziel zu erreichen. Und davon les und seh ich ... NIX. Kann es sein, dass du das Pferd von hinten aufzäumst? Nach dem Motto: ich kann jetzt die Techniken 1 bis 7, was bitte kann ich daraus zusammenschustern? Umgekehrt wirds was:
Ich möchte DIES und DAS erreichen.
Brauch ich php oder reicht statisches html? Was kann ich mit statischen html nicht umsetzen? Brauch ich Frames oder gestalt ich mit Tabellen oder wag ich mich an CSS-Aufbau? hmmmh, nachdenken. Da hab ich doch mal eine Seite gesehen, die gut das rüberbrachte, was mir vorschwebt ... vielleicht mal etwas spicken gehn?

Also vom Ziel her denken und danach die Mittel wählen.

Grüssle, Steff

MrMister · 26.05.2005, 23:17

@steff11: Naja, ich habe schon klare Vorstellungen (habe ja schon das Design realisiert) von dem, was ich auf der Seite haben möchte und wie es ausschauen soll, nur fehlt mir einfach die Verbindung von all diesen Elementen. Mag sein dass das nicht der Standardweg ist, über den die meisten gegangen sind, was mir fehlt ist einfach ein kleiner Schubser. Denke das Problem ist einfach die mangelnde Erfahrung mit HTML und CSS, genau deswegen suche ich nach einem passablen Tutorial, nur ist dafür selfhtml wenig geeignet, wie ich finde. Dort wird mir in 2 Zeilen ein Tag präsentiert, nur um mir dann zu sagen, dass es so nicht mehr benutzt werden soll, der und der Browser damit nicht klarkommt, ich das Ganze mit CSS viel viel besser hinbekommen würde und wann der Erfinder dieses Tags das erste Mal Bohnen gegessen hat (ums mal übertrieben zu sagen)... Fände es viel praktischer ein Tutorial zu haben, das mir sagt: "Hey, hier ist ein Tag, damit kann man das und das machen, wenn man es so und so einsetzt", so wie es bei den meisten Tutorials zu anderen Themen, die ich gelesen habe, auch der Fall war. Wenn es keine Alternative gibt werde ich mich durch selfhtml wühlen, aber irgendwie befriedigt mich das nicht

@walter: Danke für die Links, die werde ich mir demnächst zu Gemüte führen.

designfanatiker · 27.05.2005, 00:12

Bei der gezielten Suche nach bestimmten Themen führt eigentlich kein Weg an SelfHTML vorbei. Als Einstieg würde ich aber eher die Einführung in XHTML, CSS und Webdesign von Michael Jendryschik empfehlen.

Ironwhistle · 27.05.2005, 00:13

Ok, wie fügst du nun PS, PHP und HTML zusammen?
Einfach

PHP benutzt du als Container in welchem du HTML einbindest:

<?
echo ' <HTML TAGS> ';
?>

Und deine Bilder (PS) fügst du wiederum in HTML ein:

<img src=deinegrafiken/deinbild0001.jpg>

Das Ganze sieht dann so aus:

Code:

<?
echo ' <img src=deinegrafiken/deinbild0001.jpg> ';
echo ' <p class=formatierung>Hier ein bisschen blabla</p>';
echo ' <a href=deinprogramm.php?beispiel=definition>blabla</a>';

/* Bei Externen Dateien, kannst die Dateiendung selbst definieren
    bist also nicht auf Text Angewiesen...*/
if ($beispiel== 'definition') { include('inhalte/datei.txt'); }
/* Oder du bindest deinen Inhalt direkt ein, dann hast du nur eine Datei.*/
if ($beispiel== "definition") { echo("<HTML TAGS>Blabla, Bilder, etc</HTML TAGS>''); }

?>

Code:

Inhalt des Beispiels datei.txt
<p><center>Hier der Ganze Code der reingehört, mit Formatierungen, mit Bildern und so weiter<br>
Wichtig natürlich auch die <a href=http://www.irgendwo.net target=_blank>Hyperlinks</a></center></p>

Du kannst das ganze natürlich in eine Zeile schreiben, aber dann wird's schnell unübersichtlich. Und je nach Größe solltest du vielleicht besser auf eine Datenbank zurückgreifen...

Was die externen Daten angeht, so schreibst du nur die HTML Befehle rein und fertig. Durch Include werden die automatisch in Browsergerechten Quelltext umgesetzt...

War es das was du meintest?

MrMister · 27.05.2005, 00:17

Hey, vielen dank Ironwhistle, war zwar nicht ganz das, was ich gesucht hatte, aber hat mir schonmal sehr weiter geholfen

Werde mir nun mal den Link von Duke anschauen, auch dafür vielen herzlichen Dank

Ironwhistle · 27.05.2005, 00:21

Freut mich wenn ich helfen kann ...

Micha2 · 27.05.2005, 20:51

hallo,

wenn du in Photoshop (mindestens 6.0?!) ein Design hast, das du für eine Webseite verwenden möchtest, dann kannst du das tun, wie oben von jemandem angedeutet. Man muss slices definieren und ein paar Bereiche markieren und mit "abspeichern fürs Web" kannst du eine fertige Webseite erzeugen.

Das hilft dir vermutlich jetzt noch nicht genau weiter, ABER :ich habe eine movie-Datei dazu, da ist in einem kleinen Filmchen, genau beschrieben wies geht!
(bei Interesse pn)
Viele Grüße
Micha