SetaPDF
-


Hinweise


Antwort
 
LinkBack Themen-Optionen Thema durchsuchen Thema bewerten
Alt 19.09.2003, 19:14   #1
TP-Junior
 
Registriert seit: Sep 2003
Crazy Leg macht alles soweit korrekt

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


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
Crazy Leg ist offline   Mit Zitat antworten


Alt 19.09.2003, 19:31   #2
TP-Special Mod
 
Benutzerbild von webmichl
 
Registriert seit: Jun 2001
Ort: 8°21' O 49°1' N
webmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine Userwebmichl lebt für das TP und seine User
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?
__________________

webmichl ist offline   Mit Zitat antworten
Alt 19.09.2003, 19:32   #3
TP-Specialist
 
Registriert seit: Jul 2002
matthias hilft, wo's gehtmatthias hilft, wo's gehtmatthias hilft, wo's gehtmatthias hilft, wo's geht
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 ...

Geändert von matthias (19.09.2003 um 19:37 Uhr).
matthias ist offline   Mit Zitat antworten
Alt 19.09.2003, 20:04   #4
TP-Junior
 
Registriert seit: Sep 2003
Crazy Leg macht alles soweit korrekt
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?
Crazy Leg ist offline   Mit Zitat antworten
Alt 19.09.2003, 21:11   #5
jph
TP-Veteran
 
Benutzerbild von jph
 
Registriert seit: Apr 2001
Ort: Münster und gerade aus Brisbane
jph ist auf einem guten Weg
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!
__________________
Internetprojekte & Webdesign
www.janheck.de
post@janheck.de
jph ist offline   Mit Zitat antworten
Alt 20.09.2003, 00:30   #6
TP-Member
 
Registriert seit: Jun 2003
Ort: Schwandorf
BlueAppleNet macht alles soweit korrekt
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
BlueAppleNet ist offline   Mit Zitat antworten
Alt 20.09.2003, 03:34   #7
TP-Moderator
 
Benutzerbild von BSE Royal
 
Registriert seit: Aug 2002
Ort: München
BSE Royal lebt für das TP und seine UserBSE Royal lebt für das TP und seine UserBSE Royal lebt für das TP und seine UserBSE Royal lebt für das TP und seine UserBSE Royal lebt für das TP und seine UserBSE Royal lebt für das TP und seine UserBSE Royal lebt für das TP und seine User
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!
BSE Royal ist offline   Mit Zitat antworten
Alt 20.10.2004, 17:12   #8
TP-Newbie
 
Registriert seit: Oct 2004
Papzt macht alles soweit korrekt
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 ??
Papzt ist offline   Mit Zitat antworten
Alt 30.10.2004, 12:40   #9
TP-Insider
 
Benutzerbild von dallasstar
 
Registriert seit: Jul 2004
Ort: Ingolstadt
dallasstar ist auf einem guten Weg
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!
dallasstar ist offline   Mit Zitat antworten
Alt 30.10.2004, 13:17   #10
TP-Veteran
 
Benutzerbild von Terry
 
Registriert seit: Mar 2004
Terry hilft, wo's gehtTerry hilft, wo's gehtTerry hilft, wo's geht
Zitat:
Zitat von dallasstar
... 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...)..
__________________
Grüße, Terry
Terry ist offline   Mit Zitat antworten
Alt 30.10.2004, 14:33   #11
TP-Insider
 
Benutzerbild von dallasstar
 
Registriert seit: Jul 2004
Ort: Ingolstadt
dallasstar ist auf einem guten Weg
freut mich das es was gibt was selbst du nicht perfekt kannst *g*
dallasstar ist offline   Mit Zitat antworten
Alt 30.10.2004, 15:48   #12
TP-Greis
 
Benutzerbild von Boris
 
Registriert seit: Mar 2001
Ort: Berlin, Germany
Boris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKE
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*
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris
Boris ist offline   Mit Zitat antworten
Alt 07.11.2004, 20:50   #13
TP-Senior
 
Benutzerbild von Exusu
 
Registriert seit: Apr 2003
Ort: Neuenhagen bei Berlin
Exusu macht sich hier sehr viel Mühe

Probiers doch mal so...


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
Miniaturansicht angehängter Grafiken
profi-homepage-designen-z-b-bild-1.jpg  

Geändert von Exusu (07.11.2004 um 20:52 Uhr).
Exusu ist offline   Mit Zitat antworten
Antwort

  Aktuelles Thema
  TP Hilfe Forum > Traum-Talk > Webdesign & Co.
Eine profi homepage designen? z.b. www.worldofwar.de Eine profi homepage designen? z.b. www.worldofwar.de
« Aller Anfang ist schwer... | Seite mit CMS-Eigenschaften ohne PHP & Co entwerfen? »

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:04 Uhr.

Powered by: vBulletin Version 3.7 (Deutsch)
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd. / Search Engine Friendly URLs by vBSEO 3.2.0 ©2008, Crawlability, Inc.
Traum-Projekt.com | Suchen | Archiv | Impressum | Kontakt | | | Nach oben |



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67