E-Book Startseite Karteikarten-Programm
0

Allgemeines

Nun ist es endlich soweit: Sie haben den CSS-Kurs nun fast absolviert. Der letzte Teil dieses Kurses sind die Beispielseiten. Hier im CSS-Kurs haben wir 2 CSS Beispielseiten erstellt. Wir wollen diese Webseiten für Sie Schritt für Schritt erklären. Wir machen nur aus diesem Grund eine Schritt für Schritt Anleitung um Ihnen das Programmieren etwas näher zu bringen und dass Sie dafür ein Gefühl bekommen, wie man Webseiten im Gesamten programmiert. Bei der 1. Webseite werden alle Elemente untereinander angeordnet (Kopfbild, Navigation, Inhalt und Fußzeile). Bei der 2. Webseite werden die Elemente teilweise nebeneinander angeordnet (Zeile 1: Kopf mit Bild und Link - Zeile 2: Bradcrumb - Zeile 3: Navigation und Inhalt - Zeile 4: Fußzeile). Wir haben als Kopfbild unseren Banner verwendet und im 2. Beispiel einen animierten Banner. Diese beide Dateien können Sie in unserem Download-/ZIP-Paket herunterladen: Hier klicken zum Downloaden... Diese 2 Dateien können Sie dann entpacken, in das Root-Verzeichnis laden und den Ordner Bilder erstellen oder ändern Sie einfach die Verzeichnisangabe der Bild-Dateien. Bei beiden Beispielseiten haben wir folgende Unterseiten: Startseite (index.php), Firmengeschichte (geschichte.html), Über uns (ueber.html), Dienstleistungen (leistungen.html), Produkte (produkte.html), News (news.html), Kontakt (kontakt.html) und Impressum (impressum.html). Die Styles werden in einer Datei mit dem Namen style.css programmiert. Wir erklären Ihnen lediglich den Aufbau und die Schritt für Schritt Erklärung bei der Startseite. Die anderen Unterseiten können Sie dann für sich alleine machen. Dazu können Sie den alten Inhalt übernehmen und nur die Texte und, bei der 2. Beispiel-Seite, die Breadcrumb ändern.


Beispielseite 1

Als erstes müssen wir das Grundgerüst eines HTML-Dokumentes erstellen.

<!DOCTYPE HTML>
<html>
 
  <head>
  </head>
 
  <body>
  </body>
 
</html>

Wir stellen nun verschiedene Angaben für den Head-Bereich. Wir verwenden dazu die gleichen Angaben, wie die, die wir schon bei den HTML-Beispielwebseiten genutzt haben. Die 2 einzigsten Unterschiede sind, dass wir aus dem Titel "HTML Beispielwebseite" "CSS Beispielwebseite" machen und, dass wir zusätzlich noch einen Link für eine externe CSS-Datei erstellen. Im fertigen sieht, dass dann so aus:

<title>CSS Beispielwebseite</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<meta name="author" content="Benjamin Jung" />
<meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das CSS programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
<meta name="keywords" content="CSS, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />

Der Head-Bereich wäre damit erstmals fertig. Jetzt geht es weiter mit dem Body-Bereich. Ganz oben auf der Webseite gibt es ein Kopfbereich, indem sich das Bild "Banner.jpg" versteckt. Um in unserem HTML-Dokument ein gute Übersicht zu haben erstellen wir davor einen kleinen HTML-Kommentar.

<-- Banner als Kopf -->
<div id="kopf"><img src="/Bilder/Banner.jpg" alt="Banner" /></div>

Für diesen Kopfbereich erstellen wir nun die CSS-Anweisungen, d. h. wir müssen als erstes Mal die Datei style.css erstellen und für den Kopf ein paar Anweisungen programmieren. Wir geben dem Kopfbereich und allen Bildern im Kopfbereich ein bestimme Höhe und Breite. Des Weiteren legen wir fest, dass es kein Rahmen geben soll. So sieht das Ganze dann aus:

/* Einstellung Kopfbereich
    Einstellung Bild im Kopfbereich */
#kopfbereich {
    height: 214px;
    width: 856px;
    border: 0;
}
 
#kopfbereich img {
    height: 214px;
    width: 856px;
    border: 0;
}

Nun geht es weiter mit der Steuerung: Die Steuerung wird mit einzelnen DIV-Elementen erstellt. Diese einzelnen Elemente bekommen dann ihre Einstellung über die Klassifizierung "steuerungsboxen". Zusätzlich dazu müssen wir noch Links erstellen, die später per CSS formatiert werden.

<-- Steuerung -->
<div id="steuerung">
  <div class="steuerungsboxen"><a href="index.php">Startseite</a></div>
  <div class="steuerungsboxen"><a href="geschichte.html">Firmengeschichte</a></div>
  <div class="steuerungsboxen"><a href="ueber.html">&Uuml;ber uns</a></div>
  <div class="steuerungsboxen"><a href="leistungen.html">Dienstleistungen</a></div>
  <div class="steuerungsboxen"><a href="produkte.html">Produkte</a></div>
  <div class="steuerungsboxen"><a href="news.html">News</a></div>
  <div class="steuerungsboxen"><a href="kontakt.html">Kontakt</a></div>
  <div class="steuerungsboxen"><a href="impressum.html">Impressum</a></div>
</div>

Zu diesem HTML-Code werden nun in die CSS-Datei die Steuerungseinstellungen eingefügt. Für die allgemeine Einstellungen der Steuerung (#steuerung) legen wir folgende Werte fest: Breite 850px - Höhe 74px - Hintergrundfarbe #F8F8F8 - Außenabstand (oben) 7px - Innenabstand 3px. Für die Klassifizierung "steuerungsboxen" legen wir folgendes fest: Hintergrundfarbe #0000FF - Breite 180px - Höhe 22px - Außenabstand (links) 3px - Außenabstand (rechts) 3px - Außenabstand (unten) 5px - Innenabstand 5px - Text-Ausrichtung zentriert - Rahmen (links) einfache Linie, #FF0000 und 10px - Rahmen (rechts) einfache Linie, #00FF00 und 3px - Rahmen (oben) einfache Linie, #FFFF00 und 1px - Rahmen (unten) einfache Linie, #FFFF00 und 1px - Schriftart serif - Schriftfarbe #FFFF00 - Ausrichtung links. Des Weiteren fügen wir für die Klassifizierung noch Eigenschaften für die Pseudoklassen hinzu. Bei allen Pseudoklassen wird die Schriftfarbe #FFFF00 festgelegt, als Text-Dekoration nichts und als Schriftgröße 20px. Beim MouseOver-Effekt (a:hover) ändern wir die Text-Dekoration in überstreichen (overline) und die Größe in 25px.

/* Einstellung Steuerung
    Einstellung der Steuerungsteile
    Einstellung Linkeffekte für Steuerung */
#steuerung {
    width: 850px;
    height: 74px;
    background-color: #F8F8F8;
    margin-top: 7px;
    padding: 3px; 
}
 
.steuerungsboxen {
    background-color: #0000FF;
    width: 180px;
    height: 22px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 5px;
    text-align: center;
    border-left: solid 10px #FF0000;
    border-right: solid 3px #00FF00;
    border-top: solid 1px #FFFF00;
    border-bottom: solid 1px #FFFF00;
    font-family: serif;
    color: #FFFF00;
    float: left;
}
 
.steuerungsboxen a:link { color: #FFFF00; text-decoration: none; font-size: 20px; }
.steuerungsboxen a:visited { color: #FFFF00; text-decoration: none; font-size: 20px; }
.steuerungsboxen a:focus { color: #FFFF00; text-decoration: none; font-size: 20px; }
.steuerungsboxen a:hover { color: #FFFF00; text-decoration: overline; font-size: 25px; }
.steuerungsboxen a:active { color: #FFFF00; text-decoration: none; font-size: 20px; }

Als nächsten Teilbereich erstellen wir den Inhaltsbereich. Hierfür müssen wir in der HTML-Datei nicht sehr viel einfügen. Wir geben dem Bereich lediglich seine ID-Zuweisung und einen Kommentar. Den Text können Sie selbst einfügen. Wir empfehlen eine Überschrift (in h1), einen Text-Absatz und einen Link zu erstellen, da wir an diesen Elementen bestimmten Einstellungen vorgenommen haben (dazu gleich mehr).

<-- Inhaltsbereich -->
<div id="inhalt">
...
</div>

Nun fügen wir dem Inhaltsbereich noch die CSS-Eigenschaft hinzu. Wir erstellen Einstellungen für die Breite, für die Schriftart, für die Schriftgröße (für Absätze und Überschriften in Größe 1), für die Textausrichtung und für die Linkeffekte.

/* Einstellung des Inhaltsbereichs
    Einstellung Absätze im Inhaltsbereich
    Einstellung Überschriften im Inhaltsbereich
    Einstellung Linkeffekte im Inhaltsbereich */
#inhalt {
    width: 856px;
    height: auto;
    font-family: Times;
}
 
#inhalt p {
    font-size: 19px;
    text-align: justify;
}
 
#inhalt h1 {
    font-size: 24px;
}
 
#inhalt a:link { color: #0000FF; text-decoration: underline; font-size: 19px; }
#inhalt a:visited { color: #0000FF; text-decoration: underline; font-size: 19px; }
#inhalt a:focus { color: #0000FF; text-decoration: underline; font-size: 19px; }
#inhalt a:hover { color: #0000FF; text-decoration: none; font-size: 19px; border: medium solid #FAA526; }
#inhalt a:active { color: #0000FF; text-decoration: underline; font-size: 19px; }

Nun kommen wir zum letzten Teil der Webseite: die Fußzeile. In der Fußzeile gibt es ein Bild und ein kleinen Text. In HTML sieht das nicht sehr spektakulär aus.

<-- Fußzeile -->
<div id="fusszeile">
  <img src="/Bilder/Banner.jpg" alt="Banner" />
  <a>design by Homepage-Webhilfe</a>
</div>

Nun fügen wir der Fußzeile noch ein paar Styles hinzu.

/* Einstellung für Fußzeile
    Einstellung Bild in Fußzeile
    Einstellung Text in Fußzeile */
#fusszeile {
    background-color: #F8F8F8;
    width: 856px;
}
 
#fusszeile img {
    float: left;
    width: 80px;
    height: 20px;
    padding: 2px;
    border: 0;
}
 
#fusszeile a {
    font-family: Arial;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

Das war es nun auch schon. Wenn wir alle HTML- bzw. CSS-Codes zusammenfügen, erhalten wir folgende 2 Dokumente (1. HTML - 2. CSS):

<!DOCTYPE HTML>
<html>
 
<head>
  <title>CSS Beispielwebseite</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das CSS programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
  <meta name="keywords" content="CSS, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
  <link href="style.css" type="text/css" rel="stylesheet" />
  <link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
 
<body>
  <-- Banner als Kopf -->
  <div id="kopf"><img src="/Bilder/Banner.jpg" alt="Banner" /></div>
  <-- Steuerung -->
  <div id="steuerung">
    <div class="steuerungsboxen"><a href="index.php">Startseite</a></div>
    <div class="steuerungsboxen"><a href="geschichte.html">Firmengeschichte</a></div>
    <div class="steuerungsboxen"><a href="ueber.html">&Uuml;ber uns</a></div>
    <div class="steuerungsboxen"><a href="leistungen.html">Dienstleistungen</a></div>
    <div class="steuerungsboxen"><a href="produkte.html">Produkte</a></div>
    <div class="steuerungsboxen"><a href="news.html">News</a></div>
    <div class="steuerungsboxen"><a href="kontakt.html">Kontakt</a></div>
    <div class="steuerungsboxen"><a href="impressum.html">Impressum</a></div>
  </div>
  <-- Inhaltsbereich -->
  <div id="inhalt">
  ...
  </div>
  <-- Fußzeile -->
  <div id="fusszeile">
    <img src="/Bilder/Banner.jpg" alt="Banner" />
    <a>design by Homepage-Webhilfe</a>
  </div>
</body>
 
</html>
/* Einstellung Kopfbereich
    Einstellung Bild im Kopfbereich */
#kopfbereich {
    height: 214px;
    width: 856px;
    border: 0;
}
 
#kopfbereich img {
    height: 214px;
    width: 856px;
    border: 0;
}
 
 
/* Einstellung Steuerung
    Einstellung der Steuerungsteile
    Einstellung Linkeffekte für Steuerung */
#steuerung {
    width: 850px;
    height: 74px;
    background-color: #F8F8F8;
    margin-top: 7px;
    padding: 3px;
}
 
.steuerungsboxen {
    background-color: #0000FF;
    width: 180px;
    height: 22px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 5px;
    text-align: center;
    border-left: solid 10px #FF0000;
    border-right: solid 3px #00FF00;
    border-top: solid 1px #FFFF00;
    border-bottom: solid 1px #FFFF00;
    font-family: serif;
    color: #FFFF00;
    float: left;
}
 
.steuerungsboxen a:link { color: #FFFF00; text-decoration: none; font-size: 20px; }
.steuerungsboxen a:visited { color: #FFFF00; text-decoration: none; font-size: 20px; }
.steuerungsboxen a:focus { color: #FFFF00; text-decoration: none; font-size: 20px; }
.steuerungsboxen a:hover { color: #FFFF00; text-decoration: overline; font-size: 25px; }
.steuerungsboxen a:active { color: #FFFF00; text-decoration: none; font-size: 20px; }
 
 
/* Einstellung des Inhaltsbereichs
    Einstellung Absätze im Inhaltsbereich
    Einstellung Überschriften im Inhaltsbereich
    Einstellung Linkeffekte im Inhaltsbereich */
#inhalt {
    width: 856px;
    height: auto;
    font-family: Times;
}
 
#inhalt p {
    font-size: 19px;
    text-align: justify;
}
 
#inhalt h1 {
    font-size: 24px;
}
 
#inhalt a:link { color: #0000FF; text-decoration: underline; font-size: 19px; }
#inhalt a:visited { color: #0000FF; text-decoration: underline; font-size: 19px; }
#inhalt a:focus { color: #0000FF; text-decoration: underline; font-size: 19px; }
#inhalt a:hover { color: #0000FF; text-decoration: none; font-size: 19px; border: medium solid #FAA526; }
#inhalt a:active { color: #0000FF; text-decoration: underline; font-size: 19px; }
 
 
/* Einstellung für Fußzeile
    Einstellung Bild in Fußzeile
    Einstellung Text in Fußzeile */
#fusszeile {
    background-color: #F8F8F8;
    width: 856px;
}
 
#fusszeile img {
    float: left;
    width: 80px;
    height: 20px;
    padding: 2px;
    border: 0;
}
 
#fusszeile a {
    font-family: Arial;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}
Anzeigebeispiel
Anzeigebeispiel



Beispielseite 2

Auch bei der 2. Beispiel-Seite benötigen wir wieder das HTML-Grundgerüst:

<!DOCTYPE HTML>
<html>
 
  <head>
  </head>
 
  <body>
  </body>
 
</html>

In den Head-Bereich tragen wir nun wieder dieselben Informationen ein, wie diejenigen von der 1. Beispielseite.

<title>CSS Beispielwebseite</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<meta name="author" content="Benjamin Jung" />
<meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das CSS programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
<meta name="keywords" content="CSS, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />

Wir wollen nun mit dem Body-Bereich weitermachen. Diese Webseite ist in einem Bereich mit dem Namen "webseite" eingebaut. Innerhalb dieses Elementes befinden sich dann weitere Elemente, wie z. B. der Kopfbereich. Der erste Teil der Seite ist der Kopfbereich. In den Kopfbereich wird ein Bild einprogrammiert und ein DIV-Bereich, der nachher (mit Hilfe von CSS) wie ein Button aussieht. In HTML sieht der Code so aus:

<div id="webseite">
<div id="kopf">
  <img src="/Bilder/WebBsp1-Kopf.gif" alt="Kopfbild" />
  <div id="kopfbutton"><a href="index.html">zur startseite...</a></div>
</div>
<!--Hier kommen die weitere HTML-Befehle-->
</div>

In der CSS-Datei speichern wir als erstes Informationen über die Webseite (allgemein). Danach fügem wir die Einstellungen für den Kopfbereich hinzu. Dabei konfigurieren wir den Bereich an sich, das Bild im Kopfbereich, den Button im Kopfbereich und die Links im Kopf-Button. Wir wollen den Bereich nicht genauer erklären, schauen Sie sich einfach die Quellcodes an und betrachten Sie die Auswirkungen:

/* Einstellungen für komplette Webseite */
#webseite {
    width: 850px;
    height: auto;
    background-color: #E1E1E1;
}
 
 
/* Einstellungen für Kopfbereich */
#kopf {
    width: 850px;
    height: 217px;
}
 
#kopf img {
    width: 846px;
    height: 209px;
    margin-top: 2px;
    border: 2px solid #00FFFF;
}
 
#kopfbutton {
    position: absolute;
    top: 12px;
    left: 691px;
    width: 150px;
    height: auto;
    border-bottom: solid #FF0000 4px;
    border-left: solid #FF0000 4px;
    border-right: solid #FF0000 1px;
    border-top: solid #FF0000 1px;
    font-family: sans-serif;
    text-align: center;
    background-color: #4B4B4B;
    padding: 5px;
    -webkit-border-top-left-radius: 25px;
    -moz-border-top-left-radius: 25px;
    -ms-border-top-left-radius: 25px;
    -o-border-top-left-radius: 25px;
    border-top-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-bottom-left-radius: 25px;
    -ms-border-bottom-left-radius: 25px;
    -o-border-bottom-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
 
#kopfbutton a:link { font-size: 15px; text-decoration: none; color: #FFFF00; }
#kopfbutton a:visited { font-size: 15px; text-decoration: none; color: #FFFF00; }
#kopfbutton a:focus { font-size: 15px; text-decoration: none; color: #FFFF00; }
#kopfbutton a:hover { font-size: 16px; text-decoration: underline; color: #FFFF00; }
#kopfbutton a:active { font-size: 15px; text-decoration: none; color: #FFFF00; }

Nun machen wir mit der Navigationsleiste am oberen Rand weiter, der sogenannten Breadcrumb. Wir machen dazu ein einfachen Aufbau in HTML: Fettgedruckter Text (Sie befinden sich zurzeit auf...), Leerzeichen, Link zur Startseite, Leerzeichen, Trennzeichen (»), Leerzeichen und Link zur aktuellen Seite. Das Ganze befindet sich in dem DIV-Bereich mit der ID "breadcrumb", der später mit CSS formatiert wird.

<div id="breadcrumb">
  <b>Sie befinden sich zurzeit auf...</b>&nbsp;
    <a href="index.php">CSS Beispielwebseite</a>
    &nbsp;&raquo;&nbsp;
    <a href="index.php">Startseite</a>
<div>

Als Ergänzung dazu benötigen wir nun den CSS-Teil. Das ganze sieht dann so aus:

/* Einstellungen für Breadcrumb */
#breadcrumb {
    background-color: #00FF00;
    margin-top: 20px;
    margin-left: 8px;
    margin-right: 8px;
    width: 826px;
    height: auto;
    padding: 3px;
    font-family: Times;
    font-size: 18px;
    color: #FF00FF;
}
 
#breadcrumb a:link { color: #FF00FF; text-decoration: underline; }
#breadcrumb a:visited { color: #FF00FF; text-decoration: underline; }
#breadcrumb a:focus { color: #FF00FF; text-decoration: underline; }
#breadcrumb a:hover { color: #FF00FF; text-decoration: none; }
#breadcrumb a:active { color: #FF00FF; text-decoration: underline; }

Der nächste Teil der Webseite ist die Navigation an der linken Seite. Dazu verwenden wir in HTML eine einfach Aufzählungsliste mit Links. Diese Liste packen wir in das DIV-Element mit der ID "steuerung", durch den wir später Formatierungen per CSS durchführen.

<div id="steuerung">
  <ul>
    <li><a href="index.php">Startseite</a></li>
    <li><a href="geschichte.html">Firmengeschichte</a></li>
    <li><a href="ueber.html">Über uns</a></li>
    <li><a href="leistungen.html">Dienstleistungen</a></li>
    <li><a href="produkte.html">Produkte</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul>
</div>

Als neuen Schritt für die CSS-Datei fügen wir viele Anweisungen für die Navigation hinzu. Bei der Navigationsleiste handelt es sich um eine Abwandlung von der Navigationsleiste, die im Unterthema "Navigations- und Steuerungsleisten" vorgestellt wurde. Es wurden hier lediglich ein paar Anweisungen hinzugefügt (z. B. runde Ecken) und ein paar Werte angepasst.

/* Einstellungen für Navigationsleiste */
#steuerung {
    background-color: #E1E1E1;
    border: #E1E1E1 solid 4px;
    float: left;
    width: 250px;
    height: 351px;
}
 
#steuerung li {
    background-color: #7C7C7C;
    border-top: red solid 2px;
    border-left: #0000FF solid 15px;
    margin-top: 5px;
    margin-left: -35px;
    font-family: Times;
    font-size: 15px;
    padding: 4px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-top-right-radius: 25px;
    -ms-border-top-right-radius: 25px;
    -o-border-top-right-radius: 25px;
    border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-bottom-right-radius: 25px;
    -ms-border-bottom-right-radius: 25px;
    -o-border-bottom-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
 
#steuerung ul {
    list-style: none;
}
 
#steuerung a:link { color: #FFFFFF; text-decoration: none; }
#steuerung a:visited { color: #FFFFFF; text-decoration: none; }
#steuerung a:focus { color: #FFFFFF; text-decoration: none; }
#steuerung a:hover { color: #FF00FF; text-decoration: none; }
#steuerung a:active { color: #FFFFFF; text-decoration: none; }

Nun kommen wir noch zum Inhaltsbereich. In HTML ist der Inhaltsbereich nichts Besonderes. Den Text können Sie dann zum Testen selber hinein schreiben.

<div id="inhalt">
...
</div>

In der CSS-Datei ist der Inhaltsbereich, gar nicht so unaufwendig, denn wir legen verschiedene Texteinstellungen in verschiedenen Situationen (h1, p, ...) fest. Als neue Eigenschaft verwenden wir hier die "Minimale Höhe" (min-height).

/* Einstellungen für Inhaltsbereich */
#inhalt {
    background-color: #E1E1E1;
    float: right;
    width: 571px;
    height: auto;
    min-height: 350px;
    padding-top: 4px;
}
 
#inhalt img {
    float: right;
    border: 2px solid #00FFFF;
    width: 100px;
    height: 100px;
}
 
#inhalt h1 {
    font-family: Arial;
    font-size: 20px;
}
 
#inhalt p {
    font-family: Times;
    font-size: 16px;
    text-align: justify;
    color: black;
}
 
#inhalt p a:link { color: blue; text-decoration: underline; }
#inhalt p a:visited { color: blue; text-decoration: underline; }
#inhalt p a:focus { color: blue; text-decoration: underline; }
#inhalt p a:hover { color: blue; text-decoration: none; }
#inhalt p a:active { color: blue; text-decoration: underline; }

Als letztes erstellen wir noch den Fußbereich. Im Fußbereich können Sie z. B. einen Copyright-Hinweis hinterlassen. In unserem Fall ist der Fußbereich wirklich nur ein Zeile und nicht wirklich ein großer Bereich. In HTML haben wir nun einen DIV-Bereich der auf die CSS-Programmierung mit dem ID-Link aufmerksam macht.

<div id="fuss">...</div>

In der CSS-Datei machen wir nun, nur noch ein paar Einstellungen, wie z. B. Hintergrundfarbe, Schriftformatierung oder Abstände. Das Ganze sieht dann so aus:

/* Einstellungen für Fußleiste */
#fuss {
    background-color: #0000FF;
    margin: 0 auto;
    width: 826px;
    height: auto;
    font-family: sans-serif;
    font-size: 14px;
    color: #FFFF00;
    padding: 4px;
    line-height: 18px;
    text-align: center;
}

Nun haben wir alles erledigt. Im Ganzen sieht, dass nun folgendermaßen aus:

<!DOCTYPE HTML>
<html>
 
<head>
  <title>CSS Beispielwebseite</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  <meta name="author" content="Benjamin Jung" />
  <meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das CSS programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
  <meta name="keywords" content="CSS, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
  <link href="style.css" type="text/css" rel="stylesheet" />
  <link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
 
<body>
  <div id="webseite">
  <div id="kopf">
    <img src="/Bilder/WebBsp1-Kopf.gif" alt="Kopfbild" />
    <div id="kopfbutton" ><a href="index.html">zur startseite...</a></div>
  </div>
  <div id="breadcrumb">
    <b>Sie befinden sich zurzeit auf...</b>&nbsp;
      <a href="index.php">CSS Beispielwebseite</a>
      &nbsp;&raquo;&nbsp;
      <a href="index.php">Startseite</a>
  <div>
  <div id="steuerung">
    <ul>
      <li><a href="index.php">Startseite</a></li>
      <li><a href="geschichte.html">Firmengeschichte</a></li>
      <li><a href="ueber.html">Über uns</a></li>
      <li><a href="leistungen.html">Dienstleistungen</a></li>
      <li><a href="produkte.html">Produkte</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
      <li><a href="impressum.html">Impressum</a></li>
    </ul>
  </div>
  <div id="inhalt">
   ...
  </div>
  <div id="fuss">...</div>
  </div>
</body>
 
</html>
/* Einstellungen für komplette Webseite */
#webseite {
    width: 850px;
    height: auto;
    background-color: #E1E1E1;
}
 
 
/* Einstellungen für Kopfbereich */
#kopf {
    width: 850px;
    height: 217px;
}
 
#kopf img {
    width: 846px;
    height: 209px;
    margin-top: 2px;
    border: 2px solid #00FFFF;
}
 
#kopfbutton {
    position: absolute;
    top: 12px;
    left: 691px;
    width: 150px;
    height: auto;
    border-bottom: solid #FF0000 4px;
    border-left: solid #FF0000 4px;
    border-right: solid #FF0000 1px;
    border-top: solid #FF0000 1px;
    font-family: sans-serif;
    text-align: center;
    background-color: #4B4B4B;
    padding: 5px;
    -webkit-border-top-left-radius: 25px;
    -moz-border-top-left-radius: 25px;
    -ms-border-top-left-radius: 25px;
    -o-border-top-left-radius: 25px;
    border-top-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-bottom-left-radius: 25px;
    -ms-border-bottom-left-radius: 25px;
    -o-border-bottom-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
 
#kopfbutton a:link { font-size: 15px; text-decoration: none; color: #FFFF00; }
#kopfbutton a:visited { font-size: 15px; text-decoration: none; color: #FFFF00; }
#kopfbutton a:focus { font-size: 15px; text-decoration: none; color: #FFFF00; }
#kopfbutton a:hover { font-size: 16px; text-decoration: underline; color: #FFFF00; }
#kopfbutton a:active { font-size: 15px; text-decoration: none; color: #FFFF00; }
 
 
/* Einstellungen für Breadcrumb */
#breadcrumb {
    background-color: #00FF00;
    margin-top: 20px;
    margin-left: 8px;
    margin-right: 8px;
    width: 826px;
    height: auto;
    padding: 3px;
    font-family: Times;
    font-size: 18px;
    color: #FF00FF;
}
 
#breadcrumb a:link { color: #FF00FF; text-decoration: underline; }
#breadcrumb a:visited { color: #FF00FF; text-decoration: underline; }
#breadcrumb a:focus { color: #FF00FF; text-decoration: underline; }
#breadcrumb a:hover { color: #FF00FF; text-decoration: none; }
#breadcrumb a:active { color: #FF00FF; text-decoration: underline; }
 
 
/* Einstellungen für Navigationsleiste */
#steuerung {
    background-color: #E1E1E1;
    border: #E1E1E1 solid 4px;
    float: left;
    width: 250px;
    height: 351px;
}
 
#steuerung li {
    background-color: #7C7C7C;
    border-top: red solid 2px;
    border-left: #0000FF solid 15px;
    margin-top: 5px;
    margin-left: -35px;
    font-family: Times;
    font-size: 15px;
    padding: 4px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-top-right-radius: 25px;
    -ms-border-top-right-radius: 25px;
    -o-border-top-right-radius: 25px;
    border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-bottom-right-radius: 25px;
    -ms-border-bottom-right-radius: 25px;
    -o-border-bottom-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
 
#steuerung ul {
    list-style: none;
}
 
#steuerung a:link {color: #FFFFFF; text-decoration: none;}
#steuerung a:visited {color: #FFFFFF; text-decoration: none;}
#steuerung a:focus {color: #FFFFFF; text-decoration: none;}
#steuerung a:hover {color: #FF00FF; text-decoration: none;}
#steuerung a:active {color: #FFFFFF; text-decoration: none;}
 
 
/* Einstellungen für Inhaltsbereich */
#inhalt {
    background-color: #E1E1E1;
    float: right;
    width: 571px;
    height: auto;
    min-height: 350px;
    padding-top: 4px;
}
 
#inhalt img {
    float: right;
    border: 2px solid #00FFFF;
    width: 100px;
    height: 100px;
}
 
#inhalt h1 {
    font-family: Arial;
    font-size: 20px;
}
 
#inhalt p {
    font-family: Times;
    font-size: 16px;
    text-align: justify;
    color: black;
}
 
#inhalt p a:link { color: blue; text-decoration: underline; }
#inhalt p a:visited { color: blue; text-decoration: underline; }
#inhalt p a:focus { color: blue; text-decoration: underline; }
#inhalt p a:hover { color: blue; text-decoration: none; }
#inhalt p a:active { color: blue; text-decoration: underline; }
 
 
/* Einstellungen für Fußleiste */
#fuss {
    background-color: #0000FF;
    margin: 0 auto;
    width: 826px;
    height: auto;
    font-family: sans-serif;
    font-size: 14px;
    color: #FFFF00;
    padding: 4px;
    line-height: 18px;
    text-align: center;
}
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de