Benutzer:EEL/Homepage mit CSS
Verwendung von CSS Bearbeiten
Formatierung einzelner Elemente Bearbeiten
CSS kann verwendet werden, um in einem HTML-Dokument alle Elemente (wie z.B. Absätze, Überschriften, etc.) zentral zu formatieren. Das heisst: Die Eigenschaften wie Schriftgröße, Farbe, möglicherweise Darstellungseffekte des Elements <p>...</p> (normaler Absatz) werden einmal im Dokument festgelegt und treffen daraufhin auf alle solchen Elemente auf der Homepage zu. Gerade bei aufwändigen Seiten kann das bereits eine Menge Arbeit ersparen, wenn nicht jedes Mal alle Eigenschaften erneut eingegeben werden müssen.
Alle Angaben in <spitzen Klammern> dienen im wesentlichen zur Textstrukturierung und werden "tag" (= Auszeichnung) genannt. Es muss fast immer zwei davon geben: Mit dem ersten wird angezeigt, dass ein Element beginnt, das zweite enthält noch den Schrägstrich und gibt das Ende eines Elements an. Die tags selbst kann man im Browser nicht mehr sehen, aber dafür die Formatierung zu der sie dienen.
Eine besondere Rolle haben dabei die Elemente <html>...</html>, <head>...</head> und <body>...</body>, die gewissermaßen "über" der für uns sichtbaren Struktur der Seite stehen. Die <html>-tags geben immer Anfang und Ende des HTML-Dokuments an, <body> umfasst alle Informationen die für uns im Browser sichtbar sind, also den eigentlichen Kern der Seite, während <head> allgemeine Angaben zur Seite enthält, z.B. für die Titelleiste des Browsers oder Stichworte für Suchmaschinen und auch alle CSS-Formatierungen.
Zwischen den beiden <head>-tags und nach dem <title>-Element können nun Angaben zur Formatierung eingegeben werden, beispielsweise folgendermaßen:
<head>
<title>Rezeption Japanischer Schriftzeichen</title>
<style type="text/css">
<!--
h1 { color:#FFFFFF; margin:56px 56px; }
h2 { font-size:16px; margin:2px; }
p { font-size:14px; }
//-->
</style>
</head>
Wichtig dabei sind zunächst nur die Zeilen 5-7. Dort wird festgelegt, dass Überschriften der ersten Ordnung (h1) schwarz sind und einigen Abstand von vorhergehendem und nachfolgendem Text haben. Überschriften der sechsten Ordnung (h2) haben dagegen nur einen kleinen Abstand von anderen Textelementen und sind auch nur wenig größer als Text der in gewöhnlichen Absätzen (p) zu finden ist.
Wie diese einzelnen Angaben nun genau funktionieren werde ich später weiter erklären. Wichtig ist zuerst nur die prinzipielle Anordnung: Element { Eigenschaft1:Wert1; Eigenschaft2:Wert2; } usw.
Absätze und Überschriften können aber ersteinmal genau so bleiben, wie es die Standardeinstellungen vorgeben. Die Gliederung einer Seite in verschiedene Bereiche, funktioniert aber nach dem gleichen Prinzip und soll deswegen jetzt genauer unter die Lupe genommen werden.
Elemente zur Strukturierung Bearbeiten
Auf ähnliche Weise können auch ganz neue Elemente definiert werden, denen eine bestimmte Position im Dokument zugewiesen werden kann. Diese Elemente werden mit einem # am Anfang notiert und sind damit als einzigartige Elemente ausgezeichnet. Eine bestimmte Position kann ihnen folgendermaßen gegeben werden:
#logo { position:absolute; top:0px; width:150px; height:80px; }
#titel { position:absolute; left:158px; width:776px; height:64px; }
#nav { position:absolute; top:100px; width:138px; height:428px; }
#inhalt { position:absolute; top:90px; left:158px; width:784px; height:434px; }
position:absolute besagt dabei, dass sich die Position nur auf das Gesamtdokument bezieht und nicht von anderen Elementen abhängig ist. top gibt den Abstand in Pixeln/Punkten nach oben an, left den Abstand nach links, width die Breite und height die Höhe.
In diesem Beispiel wurden also vier Elemente definiert, auf die der Inhalt einer Seite aufgeteilt werden kann. Ein kleines Logo in der Ecke bei logo, der Name der Seite bei titel, die Navigationsleiste bei nav und der ganz normale Text bei inhalt.
Wären die Bereiche eingefärbt, würden sie mit den gegebenen Einstellungen Positionen in einem HTML-Dokument so aussehen. Wie hier erkennbar ist, müssen sich die einzelnen Bereiche nicht streng an das Raster einer Tabelle sein, sondern können vollkommen frei versetzt werden - sogar überlappend.
In das Dokument eingebunden werden die Bereiche schließlich wieder ähnlich wie die bisher bekannten Elemente, nur das der Name nach der # in Anführungszeichen nach div id= eingegeben wird. Innerhalb der <div>-tags können dann wiederum andere Elemente verwenden werden, z.B. Absätze oder auch Überschriften. Der Quelltext zum oben gezeigte Beispiel würde also folgendermaßen aussehen:
<html>
<head>
<style type="text/css">
<!--
#logo { background-color:#D7C9FF; position:absolute; top:0px; width:150px; height:80px; }
#titel { background-color:#B1F6FF; position:absolute; left:158px; width:776px; height:64px; }
#nav { background-color:#B1F6FF; position:absolute; top:100px; width:138px; height:428px; }
#inhalt { background-color:#D7C9FF; position:absolute; top:90px; left:158px; width:784px; height:434px; }
//-->
</style>
</head>
<body>
<div id="titel">
<p>titel = Gesamtüberschrift</p>
</div>
<div id="logo">
<p>Logo</p>
</div>
<div id="nav">
<p>nav = Navigationsleiste</p>
</div>
<div id="inhalt">
<p>inhalt = normaler Text</p>
</div>
</body>
</html>
Den Text entsprechend den geöffneten und geschlossenen tags einzurücken ist nicht notwendig, kann den Text aber übersichtlicher und einfacher bearbeitbar machen.
Umsetzung für die Projekt-Homepage Bearbeiten
Jetzt könnt ihr gleich mal die Elemente, die ihr bei der ersten Homepage-Rundmail bereits kennengelernt habt, hier wieder verwenden. Der Projektname kann ruhig etwas hervorgehoben werden, und den Text im Textfeld könnt ihr in Absätze gliedern.
Die Navigationsleiste kann vorerst mit einfachen Zeilenumbrüchen <br> zu einem mehrzeiligen Bereich gemacht werden. Für das Logo kann etwas neues verwendet werden, das Bild-Element: Genau wie <br> besteht <img> nur aus einem tag. Alle Informationen dazu werden noch in den spitzen Klammern angegeben: style definiert in erster Linie die Größe des Bildes, src gibt die Adresse (URL) des Bildes an, das verwendet werden soll, und nach alt könnte noch ein alternativer Text eingegeben werden, bzw. ein Kommentar zum Bild. Wenn ihr also das IPK-Logo in der Ecke eurer Homepage angezeigt haben wollt, könnt ihr diesen Text anstelle vom Text "Logo" einfügen.
<img style="border:0;width:87px;height:80px" src="http://www.ku-eichstaett.de/Fakultaeten/SLF/romanistik/didaktik/Forschung/ipk/bilder/logo.gif" alt="">
Ergänzt jetzt noch die vorläufigen Gliederungspunkte in der Navigationsleiste und die Aufgaben wären soweit erledigt!
So in etwa sollte der Quelltext schließlich aussehen - als Internetseite könnt ihr den folgenden Text hier betrachten.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
Rezeption Japanischer Schriftzeichen
<img style="border:0;width:87px;height:80px"
src="http://www.ku-eichstaett.de/Fakultaeten/SLF/romanistik/didaktik/Forschung/ipk/bilder/logo.gif"
alt="">
Hauptseite: Rezeption japanischer Schriftzeichen
Hier entsteht die Homepage der Japan-Gruppe des IPK-Kurses (Sommersemester 2006).
Unsere Arbeit beschäftigt sich mit der deutschen/europäischen Rezeption japanischer
Schriftzeichen und deren Verwendung, beispielsweise als dekorative Elemente. Der Kurs
"Internet- und Projektkompetenz" (IPK) ist ein Angebot der Virtuellen Hochschule
Bayerns.
</body>
</html>