Wenn ihr eine Seite mit einer statischen größe habt und diese der Form halber für sehr lange Content Bereiche nicht erweitern möchtet, kommt dem einem oder anderen bestimmt der Gedanke den guten alten Frame einzusetzen.

TUT ES NICHT

Frames zu verwenden ist in der heutigen Zeit absolut unnötig, wobei die Problematik von Frames eigentich den meisten klar sein sollte, für diejenigen die sich damit noch nicht befasst haben, gibt es hier einen kleinen Artikel.

Verwendet statt dessen einen kleinen Befehl in eurem Stylesheet, dieser hat dne Namen overflow. Overflow erzeugt einen Frame ohne dass es tatsächlich ein Frame ist. Dieser künstliche Frame hat keinerlei Nachteile des alten Frames und benötigt kein Frameset, lediglich die Definierung im Stylesheet die in etwa wie folgt aussehen sollte:

width:620px;
height:650px;
overflow:auto;

Ihr müsst stets eine Höhe und eine Breite angeben, da sonst der Frame automatisch auf eine Breite und Höhe von 0 gesetzt wird und damit nicht auftaucht.

Falls ihr bei eurem Projekt eine Fehlerseite einbauen möchtet, welche fehlgeleitete Besucher zu eurer Startseite verweist gibt es einen einfachen Meta-Tag, welcher euch die automatische weiterleitung sehr bequem realisiert.

<meta http-equiv="refresh" content="5; URL=index.html">

Die Zahl nach “content=” steht für die Sekunden die gewartet werden soll, bevor der Meta-Tag die Weiterleitung einleiten soll. Nach dem “URL=” folgt dann die das Ziel eurer automatischen Weiterleitung, welches ihr entweder wie hier angegeben auf einer eurer Webseiten machen könnt, oder aber auch in dem ihr “http://www.beispiel.de” angebt, eine externe Seite mit der Weiterleitung verlinken lassen.

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.

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.

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.

Was bei größeren Projekten meist an Bedeutung gewinnt, ist das kommentieren bestimmter Abschnitte, sowohl im Html-Dokument und im Stylesheet. Der Vorteil beim kommentieren von Dokumenten liegt darin das ihr bestimmte wichtige Abschnitte kenntlich machen könnt, oder knifflige Code-passagen so zu kommentieren, dass ihr deren Funktion auch wenn ihr das Projekt später wieder aufnehmt einfach erkennt und wieder bearbeiten könnt.

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

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Roots Headervorlage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="de" />
<meta name="language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="index,follow" />
<meta name="description" content="Hallo Welt" />
<meta name="keywords" content="Keyword 1; Keyword 2;Keyword 3;Keyword 4;" />
<meta name="copyright" content="CSS-Roots 2008" />
<meta name="author" content="CSS-Roots" />
<meta http-equiv="imagetoolbar"        content="no" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/images/favicon.ico" rel="icon"/>
</head>
     <body>
      <div id="banner"></div>  <!--- Dieser Text in den Pfeilen ist ein Kommentar für HTML Dokumente -->
    </body>
</html>

Und hier ein Kommentar für euren Stylesheet

1
2
3
4
5
6
7
8
9
10

 
/*****Dies ist ein Kommentar im Stylesheet******/
#test
{
width:100%;
background: #f3f3f4;
height:112px;
background-image: url(images/greybanner.jpg);
background-repeat:no-repeat;
}

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.

Wenn ihr eine Klasse in eurem Stylesheet erstellen möchtet, dann nehmt einfach statt dem “# ” ein “. ” So sollte dann in etwa euer Stylesheet aussehen:

.bluebig
{
font:18px Arial;
color: blue;
}

Wie ihr seht eigentlich nicht schwer, jetzt zeige ich euch noch wie man das ganze in unser bestehendes Html-Dokument einbindet.

<div id="banner">
<div id="bannert">
            BANNER</div>
</div>
<div id="navi">
<div id="navit">
          Navigation</div>
</div>
<div id="content">
<div id="contentt">
<div class="bluebig">
              text</div>
</div>
</div>

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert

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.