• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Richtiger Aufbau einer Homepage

Sylnois

Mitglied
Heyho

Es tut mir Leid, dass ich eine Frage stelle, die sicher schon 1000mal beantwortet wurde.
Ich kapiers nur einfach nicht.

So habe ichs im Kurs gelernt:

<div class="main">
<div class="inhalt>
<p class="textinhalt">
Hier kommt der Inhalt rein.
</p>
</div>
</div>

Könnte mir denn niemand ein Beispiel aufstellen, wie eine Homepage aufgebaut sein SOLLTE?

Gruss
Dario
 
Da kann man leider keine allgemeingültige Antwort drauf geben, weil der Aufbau von den jeweiligen individuellen Anforderungen abhängt.
Wichtig ist, dass du die verfügbaren HTML-Elemente entsprechend ihrern Funktionen und Bedeutungen einsetzt.

Mitunter ist es dann sogar überhaupt nicht erforderlich, Divs zu verwenden.
Mach dir eine Skizze wie deine HP aussehen soll und teile die Seite in Bereiche auf, die jeweils eine Einheit bilden (vergleichbar einem Schrank mit mehreren Türen/Schubladen). Für diese Bereiche kannst du dann jeweils einen Div (=division oder Bereich) verwenden; muss/brauchst du aber nicht, wenn es dafür auch andere, spezifischere Elemente gibt wie z.B. eine ul-Liste für die Navi.

In deinem Beispiel ist der main-div nicht zwingend notwendig, weil er selbst keinen unmittelbaren Inhalt hat.

Versuche deshalb, mit so wenig wie möglich Divs auszukommen. Damit zwingst du dich, die oft besser geeigneten und spezifischeren HTML-Elemente zu verwenden, reduzierst die Fehlerquoten und erhöhst di Übersichtlichkeit des Quelltextes.
 
Wie PRM schonge gesagt hat: zuerst ne Skizze, oder kannst auf gleich in einem Bildbearbeitungsprogramm einen Entwurf gestalten. Beginn nie mit dem CSS. Wie das dann endet, sieht man ja leider oft im Netz - zB GMX oder yahoo, die beiden sind Grafisch dermaßen nichtssagend. Eine kompletten Homepage entwurf erstmal erstellen, dann schneidest du eben soviel Teile aus wie du brauchst - zB: header, content, sidebar links, sidebar rechts, footer...

Du kannst zwar mit Tabellen arbeiten, mir persönlich gefallen divs um einiges besser.

Die aufteilung machst dann zb so:

<body>
<div id="container"> //beinhaltet alle weiteren divs und sorgt dafür das die anderen Elemente wie header, footer, main, navi usw. mittig, links - oder rechtsbündig angezeigt werden.
<div id="header"/> //der Kopf der Website, wenn du eine horizontale Navi verwenden willst, kannst sie in den header rein
<div id="content"/> // content der Website, also der Inhalt.
<div id="sidebar"/> // wenn du auch oder nur eine vertikale Navi verwenden willst, eignet sich eine Sidebar gut. Dort kannst dann die Navi rein, wenn unter der Navi noch Platz bleibt, kannst du den für News oder weitere Infos benutzen
<div id="footer"/> // kannst vielleicht noch copyright reinsetzen, oder kleine und eher unwichtigere Links (AGB, Impressum oder sonst was)

<!--hier endet dann der div-container-->
</div>

Verwende ja keine IFrames. Es gab da mal ein Problem, dass die IFs von Browsern nicht oder falsch angezeigt wurden. Das Problem ist zwar nun nicht mehr (glaub ich) vorhanden, aber für eine gute Suchmaschinenoptimierung sind sie definitiv nicht geeignet. Wurden einfach net weiterentwickelt.

Gib img`s einen alt. namen, der Name sollte Schlüsselwörter die was mit dem Website Inhalt zu tun haben, beinhalten - Sorgt für eine bessere Platzierung. Dass CSS immer auslagern, im Kopfbereich.
 
Zuletzt bearbeitet:
Wie PRM schonge gesagt hat....

Hallo.

Anscheinede hast du prm missverstanden.

prm hat gesagt verwende sowenig divs wie möglich, das was du gerade hier gezeigt hast ist ein 1A div Layout bei dem wahrscheinlich mehr als die Hälfte aller divs unnötig sind.

Die alt Namen der Bilder sollten die Bilder beschreiben, denn dazu sind sie eigentlich gedacht.

Das CSS gehört in eine eigene CSS Datei und nicht in den Kopfbereich.

Gruss
Elroy
 
Elroy schrieb:
prm hat gesagt verwende sowenig divs wie möglich, das was du gerade hier gezeigt hast ist ein 1A div Layout bei dem wahrscheinlich mehr als die Hälfte aller divs unnötig sind.

Na ja, ob die div-Elemente überflüssig sind, ist Spekulation. Gut, du schreibst "wahrscheinlich", aber dennoch. ;) So schlimm finde ich die vorgestellten div-Elemente jedenfalls nicht.

Oder um es mit prm zu sagen:

prm schrieb:
Da kann man leider keine allgemeingültige Antwort drauf geben, weil der Aufbau von den jeweiligen individuellen Anforderungen abhängt.

Das hier...

T!P-TOP schrieb:
Beginn nie mit dem CSS. Wie das dann endet, sieht man ja leider oft im Netz - zB GMX oder yahoo, die beiden sind Grafisch dermaßen nichtssagend.

...halte ich dagegen auch für Spekulation. GMX und Yahoo sehen garantiert grafisch nicht so aus, wie sie aussehen, weil da jemand Design nicht beherrscht.

Und das hier...

Eine kompletten Homepage entwurf erstmal erstellen, dann schneidest du eben soviel Teile aus wie du brauchst - zB: header, content, sidebar links, sidebar rechts, footer...

...ist meiner Meinung nach leicht falsch zu verstehen und umzusetzen. Webdesign ist kein Grafikdesign und sollte -- vereinfacht gesagt -- in aller Regel vom HTML-Code, also von der Usability ausgehen und nicht von irgendeinem statischen Grafikentwurf.

Das richtet sich nicht allgemein gegen Grafikvorlagen, sondern eher gegen den Ratschlag, ein Grafikdesign stumpf in Einzelbilder aufzuteilen und diese mit HTML-Mitteln zusammenzupuzzlen. Das wird oft wenig dynamisch.
 
Guckt euch mal meine Seite an: Xoltec Studios - Startseite
Also ist sie doch fehlerfreier, als ich dachte.
Klar die Bilder habe ich noch nicht beschriftet und die Classennamen sind auch nicht optimal gewählt, aber rein vom Aufbau her habs ich doch einigermassen verstanden?

Danke für euere Bemühungen.
 
Dann hast du mich auch missverstanden - ich sagte, eine Skizze ist fast ein muss, wenn die Website grafisch ansprechend sein sollte.

Geschrieben hab ich, das das CSS ausgelagert gehört und dann es im Kopfbereich verlinkt:

<head>
<link rel="stylesheet" href="website.css" type="text/css">

</head>


Eine Seite sollte nicht mehr als 200 KB haben, die Ladezeiten sind störend und nich grad Benutzerfreundlich. Aber ansprechende Grafiken, etwas tolles fürs Auge ist sicher nicht verkehrt.

@mermshaus: GMX hat abgesehen von der Unübersichtlichkeit, auch richtig lange Ladezeiten im IE.

@sylnois: das muss so sein: <body background-color="red">

Lager die Body eigenschaften auch in der CSS.css datei aus.
 
Zurück
Oben