[flatted]

Um auf die ursprüngliche Frage einzugehen:

am Anfang einer Hompagegestalltung ist das "wie" erstmal zweitrangig. Macht man sich am Anfang Gedanken was mann kann und wie man manche Probleme angeht, kommt meistens nichts dabei raus. Diesen Fehler habe ich in meiner Anfangszeit auch gemacht.

1) Sitemap
Als erstes kommt die Sitemap. Diese benötigt mann um den Überblick nicht zu verlieren. Man stellt sicher, dass auch alle Navigationspunkte untergebracht sind und welche Inhalte unter welchem Punkt gehören. (Impressum nicht vergessen)

2) Am Anfang steht das Design!
Gestalte deine komplette Site mit einem Grafikprogramm. Ich nehme dazu Photoshop.
Mache als erstes einen Screenshot von deinem Browser. In diesem wird die Site entworfen, so sieht man immer wie sie fertig und online aussieht. (Achte auf gängige Bildschirmauflösungen, nicht dass bei den meisten Besuchern überall Scrollbalken sind.)

Texte brauchen nicht final sein, hier reichen Blindtexte.

Aber über die Schrift sollte man sich Gedanken machen. Am besten so viel wie möglich mit Standardschriften arbeiten, und höchstens bei der Navigation und Hauptüberschriften mit Grafischer Schrift arbeiten.

3) Umsetzung

Ist die das Design der kompletten Site fertig gehts an die Umsetzung.

Erste Überlegungen: Flash? HTML? (Flash in HTML?)

Falls HTML: CMS?

So nun zur programmierung: Ich programmiere eigentlich immer alles in HTML. Durch das Design im Photoshop kann ich entscheiden wo ich was benötige. (Wo ist mal eine Tabelle sinnvoll, wo ein div, mit h1 und h2 arbeiten (Suchmaschinenoptimierung.))

Alles was ich benötige kann ich aus meiner Photoshopdatei entnehmen (Maße, Abstände, Farben, Bilder wie Logo,...)

Stoße ich an sachen die ich mit HTML nicht mehr lösen kann, greife ich auf eine andere Sprach zurück. z.B. Navigation mal mit JavaScript.

Steht die erste Seite, gliedere ich wiederkehrende Dinge (z.B.Navi...) in eine headerdatei aus. Diese wird dann in jede Seite mit einem include Befehl wieder eingebunden. (Jetzt wurde aus meiner html Datei eine php)

Tauchen Probleme bei der Realisierung des Design´s auf, weil man zum Beispiel kein php kann, setzt man sich jetzt mit diesem Problem auseinander und nicht schon vor dem Anfang.

OK, ich kann z.B. kein php benötige es aber bei der Umsetzung: Nach dem Problem im Internet suchen, es gibt bestimmt etliche Lösungswege. (man braucht zwar am Anfang ein bisschen länger, aber so lernt man und nur Übung macht den Meister.)


Ich hoffe diese Anleitung hilft ein wenig.

P.S. Wer rechtschreib Fehler findet darf sie behalten!

[FRAD]

Hi,

danke für die Beschreibung.

Ich glaube bei mir ist der Groschen gefallen. Ich habe mich immer gefragt, wie machen die immer diese tollen Webseiten mit diesem tollen Design.

Klar - für Grafiken benöigt man in der Regel ein Grafikprogramm )

Wenn ich es richtig verstanden habe, kann ich auch mit einem Grafikprogramm einen Export als HTML inkl. CSS machen richtig? Ist dem so? Vielleicht kannst du darauf mal kurz eingehen, wie der Step zwischen Grafikprogramm und HTML Editor ist.

Was haltet ihr von der Adobe Creative Suite für Web Standard?

Damit hätte ich doch alle Tools die ich benötige oder?

[flatted]

Ja es gibt einen Export als html und css. Habe es aber noch nie benutzt. Mir ist es lieber meinen Code selbst zu erstellen.
Der Stepp zwischen Grafikprogramm und Editor ist der, dass du das was du in der Grafik siehst im Editor genau nachbaust. Die benötigten Grafiken werden dem Grafikentwurf entnommen. Dabei ist darauf zu achten welche Grafik in welches Dateiformat (Ladezeiten). Die Grafik dann in ein html Element legen (div, table, ...) und positionieren (nicht unbedingt absolut).

Die Adobe Creative Suite für Web Standard ist nicht ganz geeignet. Meines wissen fehlt in der Photoshop.

Ich arbeite bei der Webentwicklung mit folgenden Programmen:
- Photoshop
- Dreamweaver (nur in der Codeansicht)
- Flash
- wenn es richtig ans programmieren geht: eclipse (kostenlos)

[FRAD]

ok, kennst du bzw. ihr gute Tutorials die diese Schritte beschreiben?

Simples Grafiklayout und dann die Umsetzung in HTML...

Ich muss es einfach in Bildern sehen, damit ich es mir vorstellen kann

Dann habe ich nochmal eine unabhängige Frage zu dieser Seite hier:

Seite

Wie haben die Das Menü hinbekommen? Laut CSS wird dieses Bild geladen:




Das verstehe ich ganz


Grüße


PS: Wollte hierfür keinen extra Thread aufmachen...

[drosteman79]

[FRAD]

Hi,

gibt es dafür eine bestimmte Bezeichnung bzw. ein Tutorial?

Grüße

[flatted]

Schau mal bei self html
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#javascript

[Mark-Korb]