Anfängerguide für die eigene Homepage
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
aufbau
beispiel
bild
code
design
effekt
extra
farbe
forum
frage
grafik
header
hintergrund
http
impressum
leute
navigation
paar
text
tip
-
Also hallo erstmals, liebe Limanesier!
Da die Tutorial-Schreiben-Funktion schon vor geraumer Zeit deaktiviert wurde, will ich in einem Thread im Forum ein kleines, aber feines Tutorial für eure eigene Homepage veröffentlichen.
Im Thread kommt deshalb oft \"uploadscripts.de\" vor, da der Originalthread von http://www.uploadscript.de stammt, natürlich wurde dieser von mir geschrieben.
Was wird der Thread beinhalten?
1.: Verschiedene Grundstaturen für die Homepage
2.: Tipps für den Seitenhintergrund
3.: Tipps für die Headergrafik
4.: Tipps für die Navigation
5.: Tipps für den Content-Hintergrund
6.: Tipps für den Seiteninhalt
7.: Ein bisschen Rechtliches
8.: Ein paar Extras
Fangen wir mal mit der Grundstatur an.
Bei einer Homepage gibt es viele verschiedene Aufbaumethoden, aber 2 davon sind sehr bekannt und oft verwendet.
Aufbau 1, der Klassiker:
|#################################|
|#############HEADER##############|
|#############HEADER##############|
|#NAVI########CONTENT#############|
|#NAVI########CONTENT#############|
|#NAVI########CONTENT#############|
|#############FOOTER##############|
|#################################|
Dieser Aufbau ist - wie schon erwähnt wurde - der Klassiker.
Er bietet Übersichtlichkeit in der Navigation und ist dazu ein wenig platzsparend.
Ein Beispiel für diesen Aufbau ist http://cscrack.lima-city.de .
Aufbau 2, der Moderne:
|#################################|
|###############HEADER############|
|###############HEADER############|
|##############NAVIGATION#########|
|###############CONTENT##########|
|###############CONTENT##########|
|###############CONTENT##########|
|###############FOOTER############|
|#################################|
Aufbau 2 ist die modernere und neuere Variante eines Homepage Aufbaus.
Er ist zwar nicht so übersichtlich wie Aufbau 1 und kann auch nicht so viele Links in die Navigation aufnehmen, dafür wirkt er aber neuer und schöner.
Ein Beispiel für diesen Aufbau ist http://raceasse.lima-city.de oder uploadscripts.de selbst.
Diese 2 Aufbauweisen sind die beliebtesten und am öftesten verwendenteten zwei, aber es gibt auch viele verschiedene Kombinationen aus diesen 2 Layouts.
Gehen wir nun zu den Grafiken und Farben über:
Beginnen wir mit dem allgemeinen Seitenhintergrund:
Der Seitenhintergrund ist noch nicht sehr ausschlaggebend für die Homepage, trotzdem kann man mit einem falschen Background schon die ganze Homepage \"zerstören\".
Ein absolutes DON\'T für einen Seitenhintergrund ist ein Foto oder eine knallige Farbe, wie z.B. Giftgrün (#00FF00) oder Giftlila (#FF00FF).
Der Hintergrund legt die Umgebung der Seite fest, ob sie nun dunkel oder hell, knallig oder blass, farbenfroh oder graustufig ist.
Meist wird kein Hintergrundbild verwendet, da es bei schwankenden Bildschirmauflösungen zu Ungleichheiten kommen kann. Daher wird eine einfache Hintergrundfarbe verwendet, die meist zwischen Schwarz und Weiß liegt.
Nun zum Header:
Die Headergrafik ist ein sehr wichtiges Element einer Homepage und sollte Folgendes beinhalten:
* Den Titel der Seite
* Einen Slogan bzw. eine ganz kurze Erklärung der Seite
* Ein paar Grafiken, die mit dem Thema der Seite zu tun haben
* Vielleicht auch noch eine kleine Anmerkung über das Thema selbst
Außerdem sollte der Header sich entweder
1. Vom Design abheben
oder
2. Mit dem Design verschmelzen.
Ein Beispiel für einen vom restlichen Design abgehobenen Header ist uploadscripts.de . Obwohl der Header eine andere Farbe als die Grundfarbe der Seite hat, sollte er sich nicht zu stark abheben und mit den anderen Farben harmonieren.
Ein Beispiel für einen mit dem Design verschmolzenen Header ist: http://raceasse.lima-city.de .
Dort sind die Farben des Headers dieselben wie im restlichen Design, also sticht der Header nicht zu stark heraus, trotzdem fällt er ein bisschen auf.
Besprechen wir nun die Navigation:
Die Navigation ist auch ein sehr wichtiges Element auf einer Homepage. Sie gibt dem Besucher eine Übersicht über die vorhandenen Seiten und sollte sich nicht zu stark vom restlichen Design abheben.
Wie beim Aufbau schon erwähnt wurde, gibt es zwei unterschiedliche Navigationsarten:
1. Die linke, untereinander angereihte Navi.
2. Die mittlere, nebeneinander angereihte Navi.
Die Variante 1 bietet dem User viel Übersicht, Variante 2 bietet ihm Stil.
Beide Arten haben jedoch eine Sache gemeinsam:
Sie sollten sich farblich nicht zu stark vom Design abheben!
Wer will denn schon eine Navigation, die aus dem Design raussticht wie ein weißes Sakko auf einem Begräbnis?
Die Navi sollte also ungefähr die selbe Farbe wie das Design allgemein haben.
Ein oft und gern gesehenes Extra in der Navigation ist der Hover-Effekt oder MouseOver-Effekt.
Bei diesem Effekt ändert sich das Bild bzw. die Farbe der Navigation bei Berührung mit dem Cursor auf ein(e) hellere(s)/andersfabige(s)/veränderte(s) Bild/Farbe ab.
Es gibt 4 sehr oft benutzte Varianten eines Hover-Effekts:
1. Der Hintergrund Bild wird heller
2. Der Hintergrund bekommt eine ganz andere Farbe
3. Es kommt eine kleine Grafik (z.B. ein kleiner Pfeil) hinzu
4. Der Hintergrund wird kleiner oder verschiebt sich ein bisschen
Natürlich kann man diese Arten auch kombinieren.
Auf uploadscripts.de werden die Grafiken in der Navi heller und werden um 1px in der Höhe kleiner.
Beim Hover-Effekt muss man sich aber nicht so sehr an die Farbgebung der restlichen Seite halten, er kann sich stark vom Design abheben, sodass er dem Seitenbesucher sofort auffällt. Trotzdem ist es fast ein grafisches Verbrechen, wenn man auf z.B. einer weiß-blauen Homepage ein giftgrünes Hover-Bild hat.
Wenn man schon eine andere Farbe nimmt, ist es sehr ratsam, eine supplementäre, also eine Farbe die ungefähr dem Negativ der normalen Navi-Farbe entspricht, zu nehmen.
Tipp:
Ein Hover-Effekt lässt sich einfach mit CSS realisieren. Einfach eine Klasse anlegen und dann eine Hover-Klasse der vorher angelegten Klasse anlegen.
Der Code sollte dann ungefähr folgendermaßen aussehen:
.navi { background-image: url(bild1.png); text-decoration: none; color: #000000; } .navi:hover { background-image: url(bild2.png); text-decoration: none; color: #000000; }
Im HTML-Dokument fügt man die Klasse dann folgendermaßen ein:
<div class=\"navi\">Text</div>
Ist also gar nicht so schwer, oder? ;)
Kommen wir nun zum Content-Hintergrund:
Auch der Hintergrund des Seiteninhaltes ist ein wichtiges Element auf einer Homepage, da er den geschriebenen Text gut sichtbar machen soll.
Der Content-Hintergrund oder ContentBG sollte einfach und sehr klassisch designt sein und sollte keinen unnötigen Schnickschnack enthalten. Ein absolutes DON\'T im ContentBG ist eine auffällige Grafik, diese zerstört nur den Inhalt.
Der BG sollte ungefähr das farbliche Gegenteil der Textfarbe darstellen, sodass der Inhalt gut lesbar ist. Außerdem soll er farblich nicht stark herausstechen, ansonsten lenkt er zu sehr vom Text ab.
Nun zum Footer der Seite:
Ein Footer ist kein Muss auf einer Homepage, trotzdem ist er oft verwendet und sieht gut aus.
Der Footer oder ContentEnd bzw. BodyEnd sollte mit dem ContentBG verschmelzen und der Seite einen schönen Abschluss verpassen. Oft und gerne wird ein unten abgerundetes Rechteck verwendet, wie auch auf uploadscripts.de .
Oftmals beinhaltet der Footer auch einen Copyright-Hinweis für den Besucher oder einen \"Powered-By-Link\", wie auch auf uploadscripts.de
Widmen wir uns nun dem Seiteninhalt:
Der Seiteninhalt oder Content ist einer der wichtigsten Bestandteile einer Homepage, ohne ihn wäre die Seite ein leeres Design.
Ein Text sollte ziemlich fehlerfrei und in Standardsprache (auch Hochdeutsch genannt) geschrieben sein, damit dieser seriöser und professioneller wirkt.
Wenn man eine Seite in z.B. einem deutschen Dialekt schreibt, den sonst niemand versteht, sieht es schlecht für die Homepage aus, auch wenn sie noch so schön und praktisch ist.
Außerdem sollte er ausführlich und lang sein, sowie viele wichtige Informationen beinhalten, damit nicht zu viele Fragen offen bleiben.
Nun zum Rechtlichen:
Für eine gewerbliche Seite ist heutzutage ein Impressum Pflicht!
Auf einer privaten Homepage hat man keinen Zwang dazu, trotzdem ist ein Impressum immer gerne gesehen und dadurch wirkt die Seite seriöser und persönlicher.
Ein Impressum sollte folgende Informationen enthalten:
* Den Namen des Autors
* Die E-Mail des Autors
* Die Adresse des Autors
* Vielleicht noch ein paar Copyright-Hinweise
Ein Impressum findet ihr z.B. auf: http://raceasse.lima-city.de/impressum.html oder auf uploadscripts.de unter dem Menüpunkt \"Impressum\".
Last but not least, die Extras:
Auf einer Webseite sind immer gerne Extras, wie z.B. ein Forum oder ein Wiki gesehen.
Ein Forum ist ein wichtiges Diskussions- und Informationszentrum und kann mit vielen Usern auch viele Fragen beantworten. Ein Forum selbst zu coden und zu programmieren ist sehr schwierig, deshalbt empfiehlt sich, ein fertiges, veränderbares Forum zu verwenden, wie z.B. http://www.phpbb.com .
Ein Wiki gibt viele Informationen zu verschiedenen Themen und kann auch viele Fragen beantworten. Jedoch ist es nicht einfach, ein Wiki selbst zu coden und zu programmieren, daher empfiehlt sich auch hier ein fertiges, veränderbares Wiki, wie z.B. http://www.mediawiki.org/wiki/MediaWiki .
Ich hoffe, ich konnte euch ein bisschen bei eurer eigenenen Homepage weiterhelfen! Falls Fragen, Probleme oder Wünsche auftreten, bitte im Forum posten!
LG,
Hellf1ghter
Beitrag geändert: 26.4.2008 18:44:57 von cscrack -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
tja aber für den normalen webmaster ist es ja sicherlich nicht sondern für leute die neu sind und sich ersstmal mti dem thema beschätigen müssen
-
tja aber für den normalen webmaster ist es ja sicherlich nicht sondern für leute die neu sind und sich ersstmal mti dem thema beschätigen müssen
Genau, das Tutorial wurde für Einsteiger geschrieben, wo sie die grundlegendsten Dinge für eine Homepage lernen.
Vielleicht schreibe ich auch noch eins für fortgeschrittenen Webdesigner.
Aber ein Grafik-Design Tut kommt meinerseits sicher noch ;) -
tja aber für den normalen webmaster ist es ja sicherlich nicht sondern für leute die neu sind und sich ersstmal mti dem thema beschätigen müssen
Das ist einer der Schwachpunkte des Tutorials: Die Zielgruppe ist mit „Tipps& Tricks für die eigene Homepage“ zu wenig aussagekräftig. Hinter diesem Titel hätte ich eher so etwas wie eine wild zusammengewürfelte Sammlung von Spezialeffekten und Tools für die selbstgebastelte Homepage erwartet.
Ich bin selber kein Experte in der Namensgebung, finde jedoch so etwas wie „Homepage-Grundwissen“ oder „Homepage-Basics“ treffender für dieses Tutorial, weil es etliche grundsätzliche Punkte anspricht.
Vielleicht fehlen noch ein paar Punkte (in der Praxis fängt man ja nicht mit der Struktur und Einteilung der Seite an, sondern mit dem Layoutentwurf oder der Ideenfindung. Die Homepage ist auch nicht mit ein paar „Extras“ fertig, sondern mit der Validierung des Codes und des Inhalts).
Abgesehen von den paar Punkten, die man vielleicht ändern könnte, finde ich dieses Tutorial, äh, ... erfrischend: Klar strukturiert, kurz und präzise formuliert, nicht Überladen mit Rechtschreibefehlern, insgesamt ziemlich vorbildlich, würde ich meinen. Ich halte einfach mal den Daumen hoch und finde es an sich schade, dass die Tutorial-Sammlung nicht mehr aktualisiert.
-
Du willst anderen Tipps für die Homepage geben, hast aber selber kaum Erfahrung mit professionellem Screendesign und darum haut das nicht hin. Es fehlen viele ausschlaggebende Punkte und die von dir genannten sind nur oberflächling angeritzt.
-
Du willst anderen Tipps für die Homepage geben, hast aber selber kaum Erfahrung mit professionellem Screendesign und darum haut das nicht hin.
Klar, professioneller Webdesigner bin ich keiner, aber ich denke mal, dass ich doch grundlegende Informationen geben kann, so ein Nap bin ich ja auch wieder nicht. ;)
Es fehlen viele ausschlaggebende Punkte und die von dir genannten sind nur oberflächling angeritzt.
Ich weiß, und das ist auch beabsichtigt! Dieses Tutorial ist eben für blutige Anfänger geschrieben und die brauchen nicht unbedingt solche Detailinformationen, ich habe hier eben nur das Grundlegende erläutert. Außerdem wollte ich kein 100000-Wörter-Tut schreiben, sondern nur einen schnellen, einfachen und informativen Text erstellen.
-
Ich sage auch mal was zu:
Du hast dir zwar Mühe gegeben, das Tut zu machen, aber ich muss dich nettäuschen.
Es gibt einfach deutlich bessere Tutorials im Netz. Dazu muss man für das Tut sämtliche Grundlagen (X)HTML und CSS/XSL. Und wenn man das einigermaßen gut kann, hat man schon genug Ahnung von einer guten Seite, sodass man das auch ohne diese Hilfe machen kann. -
Es gibt einfach deutlich bessere Tutorials im Netz.
Das ist mir schon klar, aber ich wollte ja jetzt auch kein \"Überdrüber-Tut\" schreiben.
Ich wollte einfach einen kurzen und bündigen Text zur Homepageerstellung schreiben.
Aber ich lerne daraus und mein nächstes Tutorial wird dadurch besser ;) -
Hm...
...naja, villeicht sehe ich das aus einer ganz falschen Perspektive.
Ich kann das jetzt natürlich nicht so gut nachvollziehen wie das bei anfängern wirkt, villeicht ist es als Grundinformation ganz gut. Für mich ist das alles mehr als selbstverständlich, daher sehe ich das Tut wohl falsch. -
Hm...
...naja, villeicht sehe ich das aus einer ganz falschen Perspektive.
Ich kann das jetzt natürlich nicht so gut nachvollziehen wie das bei anfängern wirkt, villeicht ist es als Grundinformation ganz gut. Für mich ist das alles mehr als selbstverständlich, daher sehe ich das Tut wohl falsch.
Wird hoffentlich so sein, denn ich habe versucht, das Tut extra einfach zu schreiben, damit es auch Anfänger verstehen. Sie sollten hier eben die Grundlagen einer Homepage kennen lernen.
Und zum Hover-Effekt:
Ich weiß, es sieht komisch aus, wenn man ein Tutorial für blutige Anfänger schreibt und dann CSS und HTML vorkommen lässt, aber ich wollte es nebenbei einmal erwähnen, dass man gleich ein kleines Stück CSS bzw HTML lernt, da das nicht der einzige Code sein wird, den sie brauchen werden.
LG,
Hellf1ghter
PS: Danke für eure Kritiken, ich werde daraus lernen ;) -
Jo, ist schon ein bissel seltsam, wenn man in nem Tut wo kein Wort HTML oder CSS steht plötzlich auf Pseudoklassen stößt :D
Dann fangen die Leute sich an ihren gesamten Quellcode nurnoch aus :befor, :after, :hover, :active, :focus, usw. zusammen zu bauen :P -
Jo, ist schon ein bissel seltsam, wenn man in nem Tut wo kein Wort HTML oder CSS steht plötzlich auf Pseudoklassen stößt :D
Dann fangen die Leute sich an ihren gesamten Quellcode nurnoch aus :befor, :after, :hover, :active, :focus, usw. zusammen zu bauen :P
Soll ja auch so sein, bin ein totaler CSS-Fan :D
Ne aber mal im Ernst, ich glaub ich lösch das jetzt aus dem Tut raus, bringt ja echt nichts. Bist du dafür? ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
