Um euch das mit der Punkteverteilung etwas besser zu erklären, zeige ich euch hier einmal eine Punktetabelle mit der Ihr die einzelnen Gewichtungen nachvollziehen könnt. Durch diese Punkteverteilung wird dem Stylesheet angegeben welche Elemente über andere Elemente übergeordnet sind und dessen Eigenschaft andere dominiert.

Das nächste was ihr über diese Punkteverteilung wissen solltet ist, dass durch die kombination dieser Eigenschaften, auch die Punktbewertungen kombiniert, oder bessergesagt addiert werden. Auch hierfür ist das beste einfach mal in die folgende Tabelle schauen und verstehen.

Als erstes wird bei euch wahrscheinlich die Frage aufkommen was ein Stylesheet ist. Ein Stylesheet ist eine externe Auslagerung gewisser Elemente in eine Datei. Dies hat zur Folge das euer Quellcode wesentlich schlanker ist, somit einfacher zu bearbeitet ist und auch für Suchmaschinen um einiges interessanter wird.

Nicht zuletzt solltet ihr den Stylesheet allerdings nutzen um euch die erstellung einer Homepage möglichst einfach zu machen, so könnt ihr bestimmte Eigenschaften zu Klassen zusammenfassen, Divs vorformatieren, so dass diese Einheitlich sind und unerwünschte Bildelemente wie Hintergrundbilder nicht im normalen Quellcode anzeigen lassen.

Ein Tipp den ich euch für Bearbeitungen geben möchte, ist dass ihr direkt im Kopf des Stylesheets eine kleine Deklaration einsetzt, mit der Ihr auch noch Monate später etwas anfangen könnt.

Zum Beispiel:

1
2
3

/********* Projekt CSS Roots ***********/
/*** Abweichende Einstellungen in den Bereichen "breitenzusatz","höhenzusatz" da Seite eine abweichende Contentmenge aufweist. ***/
/*** Footer ist variabel eingestellt und benötigt keine weitere konfiguration **/

Hier fasst Ihr euch die wichtigsten Dinge einfach kurz zusammen und habt einen leichteren Wiedereinstieg in euer Projekt.

Da ihr ja wohl kaum eine einseitige Homepage erstellen möchtet, hier eine kleine Anleitung wie ihr Verlinkungen auf eurer Seite plaziert. Und so einfach kann es sein:

<a href="http://www.css-roots.de/category/css-workshop/">Home</a>

Ergebnis:
Home

Aber bei Verlinkungen solltet ihr jedem Hyperlink noch ein title-Attribut hinzufügen, um die barierenfreiheit etwas zu fördern und den Suchmaschinen eine bessere Linkbeschreibung zu bieten. Hierzu fügt ihr vor dem Abschluss des > Elementes also <a href=”index.html” title=”title Text”> euer Title Attribut ein.

<a title="Startseite von CSS Roots" href="Index.html">Home</a>

Das Ergebnis sieht dann so aus, einfach mal mit dem Mauszeiger kurz über die Verlinkung gehen und schon wird der Linktext angezeigt.

Home

Im übrigem Rate ich davon ab, diese Verlinkungen als Navigation zu verwenden, seht euch hierzu lieber den Artikel: “Listenelemente” an.

Falls ihr nicht wisst was man unter barierenfreiheit versteht, im Rahmen der Verlinkungen können sich blinde Personen Hyperlinks von einem Programm vorlesen lassen, was es also empfiehlt den jeweiligen Verlinkungen einen entsprechenden Linktext hinzuzufügen der auch verständlich ist. Der Vorteil für Webdesigner liegt darin dass ihr Suchmaschinen zusätzliche Informationen übermitteln könnt.

Wie der eine oder andere vielleicht schon bemerkt hat, gibt es in CSS mehr als eine Größeneinheit. Die Einheit die allen bekannt sein sollte sind Pixel (px). Jedoch gibt es noch weitere einheiten die ich kurz vorstellen möchte, um euch die Unterschiede aufzuzeigen.

Pixel:

Pixel ist die bekannteste einheit und verhält sich relativ in zur Bildschirmauflösung.

Ein Pixel = ein Pixel

Anwendungsbeispiel:

border: 5px;

em

Ex ist eine Einheit die auf eine bestehende Größe aufbaut, wie zum Beispiel bei der Schriftart. So wird aus einer Schriftgröße mit 10 Pixeln, beim Einsatz der Einheit em mit dem Wert 1.4 eine Schriftgröße mit 14 Pixeln

Bei 10 px und 1.4em = 14 Pixel

Anwendungsbeispiel:

body
{
font-size:10px;
}
#content
{
font-size: 1.4em;
}

Desweiteren gibt es noch einige absolute Längenangaben, welche ihr jedoch stets mit bedacht einsetzen solltet, denn ihr wisst nie welche Bildschirmauflösungen eure Besucher haben, wodurch ungewollte Scrollbalken entstehen können.

Inch:

In ist eine Einheit aus dem amerikanischem und steht für Inch. Ein Inch ist exakt 2,54cm lang, was diese Angabe für den normalen Gebraucht relativ unbrauchbar macht.

1in = 2,54cm

#content
{
height: 10in;
width: 5in;
}

Centimeter und Millimeter:

Ich glaube zu diesen beiden Angaben ist nicht viel zu sagen, daher hier nur das Anwendungsbeispiel:

#content
{
height: 5cm;
}
#footer
{
height: 23mm;
}

Punkte:

Punkte sind auch wieder eine amerikanische Einheit, ein pt ist 1 / 72 Inch groß. Hört sich etwas merkwürdig an deshalb hier mal die umrechnung in cm.

1pt = 1 / 72 Inch = 0,035277777777777777777777777777778 cm

Kurz gesagt ein pt ist seeeeehr klein und deshalb auch nur ein seeeehr kleines Anwendungsbeispiel

#content
{
font-size:10pt;
}

Das sind so die geläufigsten Größenangaben, jedenfalls meines Wissenstandes nach.

Wenn ihr einen Div auf eurer Seite zentrieren möchtet, ohne diese über Position festzulegen, sondern in dynamisch zentrieren wollt könnt ihr dies ganz einfach über den Stylesheet regeln. Diese Zentrierung funktioniert wie folgt:

1
2
3
4
5
6
7

#content
{
margin: auto;
background: black;
color:white;
width:300px;
}

Das wichtige Element hierbei ist der Befehl Margin, dieser zentriert über das Attribut “auto” den Div “content” automatisch in der Bildschirmmitte. Die restlichen Elemente die hier eingebaut sind dienen nur der Darstellung.

Von Suchmaschinen gern gesehen aber meist leider viel zu selten verwendet sind die Überschriften H1-H6. Diese Überschriften signalisieren Suchmaschinen und vor allem auch den Benutzern die Zugehörigkeit der jeweiligen Texte. Generell solltet ihr euch merken das die Überschriften einer gewissen Rangfolge unterliegen, wobei H1 die wichtigste Überschrift ist und sich bis H6 in Überschriften mit abnehmender Priorität unterordnen. Also solltet ihr das Hauptthema eurer Seite in H1 setzen und die Unterthemen dem entsprechend gliedern. Scheut euch nicht diese Überschriften effektiv einzusetzen.

Der häufigste Grund warum die Überschriften nicht verwendet werden ist, weil bei diesen die Schriftgrößen schon vorgegeben sind. Aber keine Sorge diese kann man noch umdefinieren.  Dazu erstellt ihr in eurem Stylesheet einfach ein Element wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

h1
{
  font:15px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h2
{
  font:14px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h3
{
  font:13px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h4
{
  font:12px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h5
{
  font:11px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h6
{
  font:10px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}

Ich rate euch mit absteigender wertigkeit der Überschriften auch die Textgrößen zu verringern, dies dient den Usern dazu die Unterthemen eurer Texte zu erkennen und eventuell zu den relevanten Texten zu springen ohne den vielleicht unnötigen Vorspann lesen zu müssen.

Leider habe ich oft in der Praxis Seiten mit Flash-Elementen gefunden, in denen die Flash-Elemente nicht valide eingebunden wurden, was zu einer negativen Wertung der Homepage bei Suchmaschinen geführt hat. durch die folgenden Code-Segmente könnt ihr euren Flash-Film einfach und valide einbinden.

1
2
3
4
5

<object width="500" height="500"
    data="flashmovie.swf"
    type="application/x-shockwave-flash">
  <param name="movie" value="flashmovie.swf">
</object>

Wichtig ist es auch dass ihr im Anschluss noch diesen Code-Schnippsel mit einbindet, damit auch der Internet Explorer damit zurecht kommt.

<param name="movie" value="flashmovie.swf">

Das wars schon mehr als das braucht ihr nicht machen um euer Flash-Element Valide einzubinden. Nur noch ein Tipp von mir, vermeidet es auf jeden Fall eure Navigation oder euren Text-Content in Flash Datein einzubinden, denn für Suchmaschinen bedeutet das in etwa soviel wie ein weißes Blatt Papier.

Kommen wir jetzt zu einen wichtigen Teil einer anständigen Homepageprogrammierung, den Listenelementen. Generell solltet ihr euch zweier Dinge bewusst machen, es gibt geordnete Listen und ungeordnete Listen. Die Unterschiede zwischen beiden Listenarten werde ich euch hier einmal deutlich machen.

Ungeordnete Listen:
Ungeordnete Listen führen vor dem jeweiligen Listentext ein einheitliches Aufzählungszeichen.
Ungeordnete Listen werden mit dem Element <ul> eingeleitet und mit einem Element </ul> abgeschlossen. In den Zeilen zwischen diesen beiden Elementen fügt ihr li-Elemente ein, welche natürlich von einem schließendem li-Element wieder geschlossen werden. Hier ein kleines Beispiel:

1
2
3
4

<ul>
<li><a href="index.htm" title="Startseite von CSS-Roots">Startseite</a></li>
<li><a href="about.htm" title="N&auml;here Informationen &uuml;ber CSS-Roots">Startseite</a></li>
</ul>

Das Ergebnis sieht dann so aus:

Geordnete Listen:
Bei geordneten Listen läft der Hase etwas anders, hier wird das ganze von einem ol-Element eingeleitet und wieder geschlossen, das ist jedoch das einzige was sich in der Programmierung ändert. Das Ergebnis ist aber deutlich anders, hier erscheint eine Aufzählung mit Zahlen statt einem festen Aufzählungszeichen. So sieht der dazugehörige Quellcode aus:

1
2
3
4

<ol>
<li><a href="index.htm" title="Startseite von CSS-Roots">Startseite</a></li>
<li><a href="about.htm" title="N&auml;here Informationen &uuml;ber CSS-Roots">Startseite</a></li>
</ol>

Ergebnis:

Diese beiden Aufzählungen eignen sich sehr gut für eine Menüführung oder bei Aufzählungen innerhalb eines Textes.