Webdesign-Workshop: Professioneller Einsatz von CSS

In diesem Tutorial geht es darum, einen schnellen, effektiven Einstieg in den professionellen Einsatz von CSS zu vermitteln. Professioneller Einsatz von CSS bedeutet, die Vorteile von CSS voll auszuschöpfen, gleichzeitig die wenigen Nachteile gekonnt zu vermeiden. Dieser Workshop richtet sich an Webdesign- Anfänger.Der größte Vorteil von CSS liegt in der Möglichkeit, zentrale Formate für jeden einzelnen Bereich einer Homepage zu definieren. Der größte Nachteil von CSS ist die unterschiedliche Umsetzung von CSS-Formatierungen durch die verschiedenen Browser. Die Vorteile zu nutzen bedeutet also vor allem, eine einfache Definition aller Stile für die gesamte Website zu erreichen. Je einfacher die Definitionen gehalten werden, desto sicherer werden sie in allen Browsern korrekt dargestellt.

Cascading Style Sheets dienen der Trennung von Inhalt und Layout in HTML Seiten. Am Anfang des WWW waren Layout und Inhalt in der Webseite zusammengefasst. Dies hatte den Nachteil, dass keine für die gesamte Homepage einheitlich gültigen Layoutregeln erstellt werden konnten.

HTML-Definitionen Ein Absatz erschien auf der einen Seite mit 12 Pixeln in Schrift Arial, rot, auf der anderen in 10 Pixel Grösse mit der Schrift Times New Roman in grau. Die zugehörigen Formatierungen im HTML-Quellcode lauteten beispielsweise

<font color="#FF0000" size="3" face="Arial">12 Arial rot</font>
<font color="#666666" size="2" face="Times New Roman">10 Times in grau</font>

Hier werden sofort einige Nachteile der Durchmischung von Formatierung und Inhalt im HTML-Quellcode ersichtlich:

• Jeder einzelne Bereich muss extra formatiert werden. Gerade in längeren Tabellendokumenten können die Formatierungen den eigentlichen Inhalt einer Webseite um ein Vielfaches an Länge übertreffen und damit die Seitengröße unnötig aufblähen.
• Es ist nicht möglich, das Erscheinungsbild eines bestimmten Tags für die gesamte Homepage gültig zu definieren. Somit ergibt sich ein großes Problem bei gewünschten Änderungen: Jeder Tag muss einzeln neu definiert werden. Time is money.
• Die Möglichkeiten der Layoutgestaltung mittels HTML-Formatierung sind sehr begrenzt. Es ist beispielsweise nicht möglich, Schriftgrößen absolut in Pixeln anzugeben, Rahmen zu definieren oder Hintergrundgrafiken anzuordnen.

Warum CSS Lernen? Allen diesen Nachteilen der Formatierung von Webseiten direkt in HTML steht nur ein einziger Nachteil bei der Nutzung von CSS gegenüber: das System von CSS ist anfangs etwas schwierig zu begreifen und damit auch komplizierter in der Umsetzung. Aber daran gewöhnt man sich schnell; der Zeitgewinn durch zentrale Formatanweisungen wächst, und die Zeit zum Erstellen der nötigen Stylesheets wird immer geringer.

Viele der Schwierigkeiten, die sich dem Anfänger bei der professionellen Nutzung von CSS in den Weg stellen hängen direkt mit dessen Vorteil zusammen: Cascading Style Sheets bedeutet übersetzt Kaskadierende Formatanweisungen. Es gibt verschiedene Ebenen bei den Formatanweisungen mittels CSS. So können Formatanweisungen für einen bestimmten Tag, z.B. <p> definiert werden. Alle <p>-Tags schauen dann gleich aus. Will man nun erreichen, dass ein <p> anders ausschaut, kann man noch zusätzlich Klassen-Selektoren verwenden. Am einfachsten lässt sich das mit folgendem kurzen HTML-Quellcode-Beispiel erläutern:

<TABLE>
<TR>
<TD>
<P>Ein Absatz, der eine besondere <FONT>Schrift </FONT> beinhaltet</P>
</TD>
</TR>
</TABLE>

CSS: Wo wird was definiert? In CSS können wir das Aussehen des obigen FONT-Tags an verschiedenen Stellen definieren: Wir können das Format dem Tag TABLE, TR, TD, P oder FONT zuweisen. Alles innerhalb des jeweils für die Definition ausgewählten Tags wird nach den im Stylesheet festgelegten Regeln dargestellt. Auch CSS selbst bietet nochmal mehrere Ebenen der Definitionsmöglichkeiten: Sie können das Aussehen aller Tags einer Art, oder aber nur bestimmter Tags definieren. Für Webdesign-Anfänger ist es deswegen anfangs schwer zu erkennen, warum welcher Text auf eine bestimmte Weise dargestellt wird. Sowohl übergeordnete CSS-Definitionen, als auch übergeordnete HTMLTags wirken sich auf untergeordnete Definitionen und Tags aus.

CSS-Datei erstellen Zuerst muss eine HTML-Datei, welche Anweisungen aus einer CSS-Datei umsetzten soll, auch mit jener verknüpft werden. Dies geschieht im Kopfbereich der HTML-Datei mit folgender Anweisung:

<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>

Der Vollständigkeit halber sei angemerkt, dass man CSS-Definitionen durchaus auch direkt im HTML-Quellcode einem Tag zuordnen kann. Damit macht man aber den Hauptvorteil von CSS, die Allgemeingültigkeit der Formate, gleich wieder zunichte. In der Regel verwendet man daher CSS-Definitionen immer in einer separaten Datei, die vom Kopfbereich jeder HTML-Seite aus verlinkt ist.

Legen Sie nun eine neue Datei an, benennen Sie diese formate.css und speichern Sie sie im Stammverzeichnis Ihrer Homepage. Das Grundgerüst jeder CSS-Datei sieht wie folgt aus:

DefinierterTag {
Definitionen;
}
.DefninierteKlasse {
Definitionen;
}

CSS Grundlagen Vor der eigentlichen Definition innerhalb der geschweiften Klammern steht, was definiert wird. Dies kann entweder ein HTML-Tag sein (BODY, TABLE, TD, P etc.), eine Klasse (z.B. .roteSchrift, .großerAbstand, .gelberRahmen) oder ein Mischkonstrukt aus beidem, ein sogenannter Selektor (z.B. P.gelberRahmen). Die Definition ist jeweils gültig für den betreffenden HTML-Tag, oder die jeweilige Klasse. Eine Klasse kann jedem beliebigem HTML-Tag mittels class=“xyz“ zugewiesen werden.

Die CSS-Definitionen ermöglichen bedeutend mehr Layoutkontrolle als die herkömmlichen HTML-Definitionen. Es sind Angaben zur Schriftfarbe, Größe, Stil, Auszeichnung, Abständen, Rahmen, Positionierung und vielem mehr möglich. Eine exzellente Erklärung aller möglichen CSS-Definitionen finden sie bei selfhtml.

Einfache CSS-Definitionen Eine zentrale Rolle bei der einfachen Definition des Erscheinungsbildes sämtlicher Texte einer Website hat der TD-Tag (Tabellenzelle). Da bei praktisch jeder Website unsichtbare Tabellen zur Layoutformatierung verwendet werden, kann man auch davon ausgehen,liegt fast jeder Text auch innerhalb einer Zelle. Eine Formatierung sämtlicher Texte über den höchsten HTML-Tag <BODY> wird leider in älteren Browsern (Netscape 4.x) nicht für alle untergeordneten Tags übernommen. Auch der TABLE-Tag birgt solche Risiken. Verwenden Sie daher zu Definition Ihrer Hauptschriftart stets den TD-Tag. In Ihrem CSS-Stylesheet könnte ein möglicher Eintrag folgendermaßen aussehen:

td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}

Mit dieser einen Anweisung haben Sie im Regelfall das Aussehen sämtlicher Textabschnitte Ihrer Homepage festgelegt.

Kaskadierend? Bedenken Sie, dass CSS „kaskadierend“ ist, d.h., da Sie praktisch alle Texte hiermit formatiert haben, müssen Sie für abweichende Formate nicht wieder alles neu definieren: Alle Tags unterhalb von TD übernehmen automatisch dessen Formatierungen. Wollen Sie einen Bereich innerhalb von TD anders formatieren, müssen Sie nur die abweichenden Formatierungen in der CSS-Datei notieren. Will man eine Liste <ul> in der Schriftart Times New Roman darstellen, muss man nur die Schriftart neu definieren, die Farbe und Größe wird automatisch von der Definition des übergeordneten <TD> übernommen:

ul {
font-family: "Times New Roman", Times, serif;
}

Das Prinzip der Kaskadierung wird auf 2 Arten umgesetzt: Einerseits bewirkt die CSS-Definition eines übergeordneten HTML-Tags automatisch die Übernahme dessen Definitionen für alle untergeordneten Tags. Andererseits besteht die Kaskadierung aber auch schon im CSS-Stylesheet selbst. Definieren Sie TD, so definieren sie alle TD. Wollen Sie erreichen, dass der Text in einer bestimmten TD anders aussieht, als die Standarddefinition vorgibt, so verwenden Sie am besten Klassen:

.rot {
color: #990000;
}

Klassen erkennt man in CSS daran, dass sie immer mit einem Punkt beginnen. Klassen definieren nicht einen bestimmten Tag, sondern beliebige Tags, denen im Quellcode mittels z.B. <TD class=“rot“> eben diese Formatierung zugewiesen wurde. Beachten Sie auch hier wieder das Prinzip der Kaskadierung: Die Schriftart ist in allen TD bereits definiert, sie müssen nur noch das definieren, was von der Standarddefinition abweicht – in diesem Fall also die Schriftfarbe.

Wie man einfache CSS-Definitionen erstellt Prinzipiell gibt es zwei Arten der Stildefinitionen: Klassen- und Typ-Selektoren. Typ-Selektoren definieren das Erscheinungsbild von bestimmten HTML-Tags. Klassen definieren hingegen nur das Erscheinungsbild von HTML-Tags die explizit mit dieser Klasse angezeigt werden sollen. Stildefinition in der .css-Datei:

p {
font-size:12px;
font-style:bold;
}
.grossrot {
font-size:16px;
color:red;
}

Dazugehörige HTML-Seite:

<html><head>
<title>Bsp für Typ-Selektoren und Klassenselektoren in CSS</title>
</head>
<body>
<p>Jeder Absatz wird in der Schriftgrösse 12px fett dargestellt, auch der untige.</p>
<p class="grossrot">Da dieser Absatz jedoch explizit die Klasse .grossrot verwenden soll, wird er in 16px und rot dargestellt</p>
</body>
</html>

Sie sehen: der Einsatz von Typselektoren vereinfacht den Quellcode der Seite. Definieren Sie daher immer zuerst einen Standard für die Homepage durch einige Typselektoren. Klassen-Selektoren sollen nur für vom Standard abweichende Definitionen verwendet werden. Sie vergrößern wie die veralteten Formatierungen mittels HTML den Quellcode nur unnötig. Definieren Sie Ihre Formate immer so einfach wie möglich!

Dynamische Links mit CSS Ein weiterer wichtiger Punkt beim professionellen Einsatz von CSS sind die Links. Zuerst definieren wir ein allgemeines Erscheinungsbild für alle Links. Unsere Links sollen rot sein, fett und nicht unterstrichen. In CSS sieht dies folgendermaßen aus:

a {
color: #ff0000;
text-decoration: none;
font-weight: bold;
}

CSS Pseudoformate In CSS gibt es sogenannte Pseudoformate. Dies sind Formate, die sich nicht ohne Aktionen des Users auf die Darstellung bestimmter Tags auswirken. Beispiele hierfür sind z.B. ein „noch nicht besuchter Verweis“ oder der „erste Buchstabe eines Absatzes“. Die wichtigsten Pseudoformate betreffen die Links. Über Pseudoformate wie z.B. a:visited oder a:hover hat man die Möglichkeit, bestimmten Links verschiedene Formate zuzuweisen. So kann ein besuchter Link dunkler dargestellt werden, als ein noch nicht besuchter. Noch interessanter ist die Möglichkeit, Links bestimmte Formate zuzuweisen, wenn gerade die Maus darüberfährt (a:hover).

a:hover {
text-decoration: underline;
background-color: #333333;
}

In obigem Beispiel wird jeder Link, über den Sie mit der Maus fahren, temporär unterstrichen und mit hellgrauem Hintergrund dargestellt. Bewegen Sie den Mauszeiger wieder weg vom Link, so erscheint er wieder wie in der Definition für <a> angegeben.

CSS Kompatibilität Beachten Sie stets, dass nicht alle Browser alle CSS-Definitionen richtig umsetzen. Sehr schlecht ist die Implementation in alten Browsern wie z.B. Netscape 4.x. Es werden hier keine Pseudoformate für Links angezeigt. Rahmen werden prinzipiell verkehrt angezeigt, verwendet man Sie für Links, werden diese sogar unklickbar – eine Katastrophe für die Usability. Auch die Positionierung von Hintergrundbildern oder die Innenabstände von Elementen (padding) wird in fast allen Browsern unterschiedlich interpretiert. Testen Sie also immer in allen Browsern, wenn sie komplexere CSS-Definitionen verwenden. Eine gute Übersicht über die Crossbrowser-Kompatibilität aller möglichen CSS-Definitionen finden Sie unter www.css4you.de.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot WDEpro : Webdesign-Entwurf + HTML

Unser Preis: ab 540 €626,40 € incl. MwSt.

Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.

Auftrag erteilen

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:

• saubere Umsetzung des grafischen Entwurfs in HTML
• semantisch korrekter HTML-Code, W3C-valide, barrierefrei
• CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
• Anordnung Dummy-Überschriften / Texte / Bilder
• Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
• ausgeführte Meta-Angaben für Eingangsseite
• Layouttest in alle gängigen aktuellen Browsern und alten Internet-Explorer-Versionen
• Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email

Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Webdesign-Angebot WEA : Webseiten-Ausarbeitung

Unser Preis: ab 360 €417,60 € incl. MwSt.

Für wen? Sie haben einen fertigen Homepage-Entwurf, aber keine Zeit zum Erstellen der einzelnen Seiten.

Auftrag erteilen

Sie liefern als Auftraggeber ein fertiges Masterlayout / Template für Ihre Homepage in HTML. Häufig kommt dieses Layout von einem vorherigen Webdesigner.

• Die ff-webdesigner erstellen Ihnen bis zu 10 HTML-Seiten inclusive Verlinkungen und optimierten Bildern aus dem gelieferten Material.
• Saubere Suchmaschinenoptimierung aller Seiten
• Eingehende Beratung und weitere Tipps Usability, Inhalte und SEO betreffend
• Sie erhalten eine fertige Homepage incl. aller Dateien als .zip per Email.

Das Angebote WEA beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität digital durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten

Unser Preis: 900 € 1.044,00 € incl. MwSt.

Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.

Auftrag erteilen

Komplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!

• Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
• Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
• Erstellen und formatieren von Seiten incl. Impressum und Kontakt
• Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
• Individuelles überzeugendes Layout mit Ihrem Firmenlogo
• Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
• Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
• Saubere Suchmaschinenoptimierung auf relevante Keywords
• Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
• Anmeldung bei den wichtigsten Suchmaschinen
• Einrichtung aller Email-Adressen

Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]