Was stets bei einer guten Homepageerstellung wichtig ist, ist die Umwandlung der Sonderzeichen, hiermit sind nicht nur Dinge wie ä, ö, ü oder ß gemeint, sondern sondern auch Sonderzeichen wie <, >, &, “, – und viele mehr. Denn nur durch diese Umwandlung der Sonderzeichen könnt ihr sicher sein dass euer Quellcode vernünftig ausgelesen werden kann, sei es von Validatoren oder Suchmaschinen. Versucht stets Sonderzeichen in Dateinamen oder Ordnernamen zu vermeiden da dies zu einem schlechten Ergebnis in den Suchmaschinen führen kann.

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.

In den ersten beiden Lektionen habt ihr die Divbenennung Id kennengelernt, womit ihr einer ID einen eindeutigen Namen gebt. Was macht ihr aber jetzt wenn ihr eine Div mit genau den gleichen Eigenschaften haben möchtet? Einfach alle Div-Attribute im Stylesheet kopieren und unter einem neuen Div Namen einfügen? Warum so kompliziert? Nutzt doch einfach das Element “class” anstatt dem Element ID. Der Unterschied zwischen ID und Class ist, dass ihr Classen mehrmals innerhalb eines Html-Dokumentes aufführen könnt, ohne dass dieses die validität eurer Seite stört. Das beste an der ganzen Geschichte ist, dass ihr euch nicht unbedingt entscheiden müsst zwischen Klassen und Id´s, sondern beide gleichzeitig in einem Element verwenden könnt, dazu aber später. Durch diesen entscheidenen Vorteil könnt ihr euren Id´s zusätzlich die Werte einer Klasse übergeben wie Schriftfarbe und den üblichen Css-Klammotten.

Im Rahmen dieses kleinen CSS Workshops werdet ihr Grundlegende Techniken erlernen, um diese Informationen für einen guten Start als angehender Webdesigner zu nutzen. Hier lernt ihr von der Pike auf worauf es bei einer richtigen CSS-Programmierung geht.

Der Grund weshalb dieser Workshop entstanden ist, dass einem als Anfänger im Bereich Webdesign bei vielen Informationsseiten noch einige Fragen offen bleiben, die ich hoffe im Rahmen dieses Workshops beantworten zu können, denn ich habe selbst am Anfang einige Probleme gehabt, wo ich für einen einfachen CSS Workshop wie diesen dankbar gewesen wäre.

Solltet ihr Themenwünsche für den CSS Workshop haben, Themen die noch nicht mit im Wokrshop bearbeitet wurden, dann mailt mir einfach und gebt mir eure Wünsche durch, ich versuche dann diese zeitnah umzusetzen und in den CSS Workshop mit aufzunehmen.

Bestandteile des CSS Workshops

• - Das Grundgerüst
• - Stylesheet
• - Punktesystem des Stylesheets
• - Verlinkungen
• - Hintergründe
• - Kommentare
• - Das Boxmodell
• - ID´s und Klassen
• - Textformatierungen
• - Listenelemente
• - Flash valide einbinden
• - Überschriften
• - Divs zentrieren
• - Größeneinheiten

Ihr findet den CSS Workshop auch in der Navigation rechts, bei Fragen zum Workshop oder ergänzungen freue ich mich über Kommentare in den jeweiligen Bereichen des CSS Workshops.

Bis jetzt habt ihr nur eine leere Seite erhalten, jetzt geht es daran eure Lehre Seite zu füllen. Ale erstes eröffnet ihr ein alles umschließendes Body Element, so dass euer HTML Dokument wie folgt aussieht:

        TEST

Jetzt erscheint euer TEST Text erstmalig auf dem Bildschirm.
spätestens jetzt solltet ihr euch eine kleine Skizze anfertigen, wie eure Homepage aussehen soll. Ich habe für den Anfang nur eine ganz einfache Webseite angedacht.

Als erstes solltet ihr wissend das in einer CSS-Programmierung die Homepage aus mehreren “Kisten” besteht. Innerhalb dieser Kisten werdet ihr im Laufe dieser Übung euren Inhalt einbringen, die Kisten belibig hoch und breit machen, sowie noch einiges mehr austesten. Diese Kisten nennt man “Divs”. Divs werden mit einem entsprechenden Element geöffnet und wieder geschlossen, mit dem Element Div. wir werden jetzt ersteinmal 3 Divs erstellen. Damit ihr diesen Kisten bestimmte Attribuzte zuordnen könnt, geben wir Ihnen einen Namen. Wir erstellen jetzt eine Div Navi einen Div Banner und einen Div Content.

Das ganze sieht dann in etwa so aus

Wie ihr gesehen habt, benennt man einen Div mit dem Befehl “div id”. Jetzt wird es Zeit das ihr euren Div Formatiert. Dafür müsst ihr allerdings ereinal eine CSS-Datei erstellen.
Damit diese zu der im Header eingebauten Datei passt, nennt ihr Sie “stylesheet.css”

* {margin:0; padding:0;}
* img { border:0; }
 
body {
  font:12px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;}

Hiermit legt ihr ersteinmal die Schriftart fest, sowie die nötige Schriftfarbe. Die Größe wird definiert mit den Wert “12px”, die Schriftarten mit dem folgendem “Arial, Verdana, Helvetica, sans-serif”, sowie die Schriftfabe mit “color: #515050;”.Jetzt habt ihr für euer gesamtes Layout einen Schrifttyp,Schriftgröße und die Schriftfarbe festgelegt, welche jetzt als Standart verwendet werden.

Jetzt wird es Zeit die Divs zu definieren, wir arbeiten in diesem beispiel mit %-Werten um euer Layout auf jede Bildschirmgröße anzupassen. Ersteinmal hier die Synthax des Banner-Divs.

#banner
{
width:100%;
height:150px;
background-color: #f3c600;
}

Hierbei regelt width die Breite eures Divs und height die Höhe. Background-color regelt hierbei die Hintgergrundfarbe, der Wert mit der Raute ist eine Farbkennzeichnungsnummer, diese könnt ihr auf verschiedenen Webseiten nachschaun. Jetzt regeln wir noch die restlichen Bereiche:

#content
{
position: absolute;
left:10%;
top:150px;
width:90%;
height:600px;
background-color: red;
}
#navi
{
width:10%;
height:800px;
background-color: #f3d400;
}

Was wir jetzt gemacht haben ist an sich nichts neues, bis auf die Tatsache das wir größtenteils mit Prozentwerten-gearbeitet haben, ist aber nichts atemberaubendes. Intressanter wird für ein sein, dass ich 3 neue Elemente im Bereich Content eingebracht habe. Diese 3 Elemente gehören quasi zusammen, denn in dem ich das Element “absolute” verwende entnehme ich die Div aus dem normalen Fluss an dem Sie sich automatisch anordnet und muss nun eine gewisse Position festlegen, an der die Div beginnen soll. Hierfür dienen die Elemente Top und left, es gibt hier auch mehr Elemente auf die ich hier aber nicht weiter eingehe.

Euer Ergebniss müsste etwa so aussehen:

Html

<div id="banner">
      BANNER</div>
<div id="navi">
      Navigation</div>
<div id="content">
      CONTENT</div>

CSS

* {margin:0; padding:0;}
* img { border:0; }
 
body {
  font:12px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;}
 
#banner
{
width:100%;
height:150px;
background-color: #f3c600;
}
#content
{
position: absolute;
left:10%;
top:150px;
width:90%;
height:600px;
background-color: red;
}
#navi
{
width:10%;
height:800px;
background-color: #f3d400;
}

Was euch jetzt auffallen wird ist, dass eure Texte direkt Links am Divrand “kleben”. Das sieht wenig gut aus noch ist es schlecht zu lesen. Hier könnt ihr nun zum Beispiel zusätzliche Divs erstellen und diese innerhalb eurer Hauptelemente integrieren. Ich wähle hierfür “bannert”, “navit”, und “contentt”, wie ihr diese benennt ist eigentlich egal, ihr solltet diese nur einfach zuordnen können um das ganze übersichtlich zu halten.

Html

<div id="banner">
<div id="bannert">
            BANNER</div>
</div>
<div id="navi">
<div id="navit">
          Navigation</div>
</div>
<div id="content">
<div id="contentt">
          CONTENT</div>
</div>

CSS

* {margin:0; padding:0;}
* img { border:0; }
 
body {
  font:12px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;}
 
#banner
{
width:100%;
height:150px;
background-color: #f3c600;
}
#bannert
{
padding-left:10px;
padding-top:10px;
width:99%;
height:140px;
}
 
#content
{
position: absolute;
left:10%;
top:150px;
width:90%;
height:600px;
background-color: red;
}
 
#contentt
{
padding-left:10px;
padding-top:10px;
position: absolute;
width:88%;
height:590px;
}
 
#navi
{
width:10%;
height:800px;
background-color: #f3d400;
}
#navit
{
padding-left:10px;
padding-top:10px;
width:8%;
height:790px;
}

Die Abstände könnt ihr natürlich individuell verändern. Herzlichen Glückwunsch ihr habt euer erstes CSS-Homepage-Gerüst erstellt.