Eine profi homepage designen? z.b. www.worldofwar.de

[Crazy Leg]

Hallo

Ich hätte da eine Frage und ich hoffe ihr könnt einem Anfänger etwas weiter helfen.

Ich besuche desöfteren diese homepage www.worldofwar.de. Es ist eine homepage über das Blizzard Onlinespiel World of WarCraft.
Die homepage finde ich ziemlich gut.

Vor einigen Wochen hatte ich die idee selber mal so eine homepage zu entwerfen. War mir natürlich klar, dass das von profis gemacht wurde, aber jeder fängt halt klein an. Sollte auch ein längerfristiges hobby werden. html, php gelesen mit dreamweaver, fireworks probiert, aber war natürlich alles nix.

Vorallem habe ich versucht die Navigationsleiste links und rechts irgendwie zu basteln. nach einigen tagen und schlaflosen nächten aufgegeben, bis ich heute dieses forum fand .

Jetzt würde ich doch gerne von euch, (sowie ich das in einigen der threads bemerkt habe, gibt es doch einige profis und erfahrene webdesigner hier) erfahren, wie man so eine homepage überhaupt macht. Der Banner wurde aus wowscreenshots zusammengebastelt, doch wie macht man die papierähnliche Navi links und rechts??? und wie bekomme ich text da rein?

Ich hoffe es nimmt sich wer paar mins zeit und hilft mir.

grüße

[webmichl]

ein paar Minuten? Optimist...

Zur Navi: Das "Papier" wurde mit einem Grafikprogramm ( Photoshop oä ) gestaltet:





Diese Grafik wird als Hintergrundgrafik für das entsprechende HTML_Element ( Body, Tabelle(nzelle), Layer ) genommen. Das es so schmal ist, macht nix, da der Browser das Teil automatisch kachelt.

In dieses Element kommt dann der Text. Die Mouseover-Effekte werden mit CSS realisiert.

Alles klar?

[matthias]

das ist ein normales tabellenlayout. unter dem banner eine tabelle mit 3 spalten. als hintergrunds bild über alle spaltenwurde diese grafik in der haupttabelle eingefügt.
als abschluss diese grafik eingesetzt und oben im banner diese grafik als bg eingesetzt.

kopiere doch einfach mal den quelltext und füge ihn im dreamweaver oder in deinem editor ein. dann kannst du am ziemlich gut nachvollziehen wie das gemacht wurde. als "einfache" seite kann man das html mässig aufbauen ...

[Crazy Leg]

Danke webmichl und eruption. Mein Webdesigner Horizont hat sich schon um einiges erweitert.

Habe die hp auch dl, aber bei mir wird sie im dreamweaver nicht wie im internet dargestellt. Wahrscheinlich weil die Sachen nicht richtig verlinkt sind. pfade unterscheiden sich nun. Außerdem ist bei mir der background nun "grau" (also kein gelbes "papier" und keine "steinoberfläche" in der mitte. Banner auch nicht angezeigt.

nach drücken von f12 wird das grau zu nem schwarz.

Die 3 Spalten sind die Layouttabelle, die in 3 Teile/Spalten geteilt wurde? Braucht man keine Layoutzellen?

Die Navigationsleisten links/rechts sind also mit PS gemacht worden und nicht mit Fireworks?

[jph]

also mein vorschlag wäre.. fang mit was einfacherem an... das ganze ist vielleicht für den anfang doch etwas komplex. und wenn du versuchst durch den quelltext zu steigen wirst du nach einiger zeit verzweifeln! ich würde dir eine einfache seite empfehlen!

[BlueAppleNet]

Eigentlich ist Fireworks genauso gut wie PhotoShop. Man muss halt nur wissen wie das geht - was du nicht weißt. Mein Tipp! Kaufe dir lieber ein Buch über HTML, CSS und DHTML und JavaScript und lies es dir durch, danach kannst du bestimmt schon viel viel mehr. Und bei Fireworks braucht man halt Gedult. Also nicht aufgeben. Ich programmiere und designer schon seit 1em Jahr und kann jetzt einiges. Schau einfach mal unter http://www.blue-apple.net, was ich mit meiner Erfahrung schon alles gemacht habe. Dies wirst du dann auch mal machen können.

Das habe ich heute erst designer - ist eines der beste, was ich bis jetzt gemacht habe. Wie gesagt. Fireworks ist nicht schlecht.

http://www.traum-projekt.com/forum/a...&postid=250283

[Philip Fuchslocher]

Hi CrazyLeg!

Meinerseits ein kurzer Beitrag zu dem Erstellen der Grafiken- beim Thema Programmierung halte ich mich raus. Will nicht wie mancher hier im Forum auf wichtig machen, ohne überhaupt Ahnung der Materie zu haben!

Ob die grafischen Elemente nun mit Fireworks oder Photoshop, oder Photopaint, GIMP etc. gemacht wurden, spielt an sich keine Rolle. Im Grunde kriegst du es mit all diesen (Pixel)Programmen hin. Du musst eben nur damit umgehen können.

Wenn du noch mit keinem der Programme klar kommst, aber evtl. Photoshop dein eigen nennst, dann kannst du dir im Photoshop Forum einmal die obersten Links betrachten. Du findest hier eine Grundlagenschulung zu Photoshop sowie eine Grundlagenschulung zum Thema Webdesign mit Photoshop.

Für gezielte grafische Fragen steht dir natürlich auch das Photoshop oder das Fireworks Forum mit Rat und Tat zur Seite.

Ich behaupte einmal, der wichtigste Schritt bevor du anfängst zu designen ist die Überlegung, wie du das Design aufbauen willst.
Fames oder Tabellen und dann eben, wie die Aufteilung geschehen soll. Generell erstellst du das Design in einem Pixelbasierenden Grafikprogramm wie oben bereits erwähnt. Anschliessend zerschneidest (sliced) du dies in Einzelteile, die du dann im HTML Editor zusammensetzen kannnst.

Klicke dich einfach einmal etwas bewußter durch die vielen Seiten im Internet. Achte darauf, wie die Seiten aufgebaut sind, wie sie sich beim Vergrößern und Verkleinern verhalten, wie die Menüs aufgebaut sind.
Wenn du mit gedrückter Maustaste über den Bildschirm ziehst, kannst du erkennen, wie die Bilder verteilt sind, wo sie beginnen und wo sie enden.

Mir persönlich hat es bei meinen Webdesign Anfängen viel geholfen- evtl. bringt es auch dir etwas.
Ein paar Amateurtips können doch manchmal weiterhelfen!

Lieber Gruß,
BSE!

[Papzt]

Ich hab mir das alles jetz durchgelesen und will auch sowas machen. Ich kann aber nur einfaches html.
Für unsere Clanpage hab ich alles in Tabellen gepappt.
Wenn ich jetz so ein Bild wie das von WOW nehm ( das mit dem Papier ), welchen Befehl muss ich verwenden oder wie muss ich das machen, dass mir das über die ganzen 3 Spalten schön aufgeteilt wird ?
Etwa gar mit colspan = 3 oder wie ??

[dallasstar]

Um noch mal auf die WoW HP zurückzukommen. Ich versteh nicht so ganz warum die Entwickler der Seite das mit tabellen machen, frames sind doch viel praktischer da man nicht immer alles neuladen muss bzw. alle immer in den quelltext schreiben muss!

[Terry]

... frames sind doch viel praktischer da man nicht immer alles neuladen muss bzw. alle immer in den quelltext schreiben muss!

Dass Frames praktischer sind, finden aber nur noch Anfänger, die keine anderen Methoden kennen!

Hier die Nachteile von Frames:http://www.traum-projekt.com/forum/s...31&postcount=6

Auf der WoW ist alles per PHP includet, da braucht man dann keine Frames mehr und muß trotzdem nicht alles mehrfach schreiben oder copy/paste einsetzen. Die Seiten werden dann einfach mit PHP zusammengebaut!

Zugegeben: das muß man auch erstmal können und bei komplexeren Seiten ist das erstmal ziemlich verwirrend (ich übe gerade...)..

[dallasstar]

freut mich das es was gibt was selbst du nicht perfekt kannst *g*

[Boris]

Ich kann mich meinen Vorrednern nur anschließen. Fang klein an! Es ist für relative Anfänger schlichtweg unmöglich, von heute auf morgen plötzlich super Designs und Webseiten zu erstellen. Das kommt mit den Monaten und Jahren an Erfahrung ;-)

Der VW Golf ist auch nicht an einem Tag enstanden *g*

[Exusu]

Wenn Du sehen möchtest, wie eine andere seite aufgebaut ist, kann ich Die Firefox mit der Webmaster-Erweiterung nur sehr empfehlen! Ich habe Dir mal einen Screenshot vom Objekt Deiner Begierde angehängt . Dies und vieles mehr kann man so klasse analisieren...

Die roten Linien markieren die Tabellenzellen
Die gelben Kästen zeigen die Bilder an
Die letzte Toolbar zeigt das Obermenü der WebmasterTools

Im übrigen würde ich das besser mit CSS statt mit Tabellen machen.

Hoffe das hilft etwas...
exusu