Anzeige
Tutorialbeschreibung

Homepage Workshop #2 - Tag 2

Homepage Workshop #2 - Tag 2

In nur drei Tagen zur fertigen Homepage.

Endlich, es ist soweit. Der legendäre:
Homepage Workshop #2
von eFoX

Nach 9 Monaten ist er fertig!
Ihr lernt hier alles vom Aufbau über CSS + XHTML zur fertigen validen Seite.
Tag 1 - Aufbau
Tag 2 - CSS
Tag 3 - XHTML


Thema:

Kleine CSS-Einführung und Grafikaufbereitung in Photoshop
 

Inhalt:

1. CSS Vorteile
2. Umsetzung
3. Grafikaufbereitung
4. Das CSS schreiben

  

Hallo,

heute ist Tag 2, wir lernen heute etwas über CSS, danach machen wir ein paar Grafiken für die Seite und abschließend schreiben wir das Stylesheet.
Ich kann und werde nicht auf jeden Unterpunkt im CSS eingehen, sonst würde dieser Workshop einfach den zeitlichen Rahmen sprengen, andererseits möchte ich verhindern, dass einfach alles am Ende kopiert und eingefügt wird, ohne dass daraus etwas gelernt wurde.


1. CSS Vorteile:

Und wieder eine einleitende Frage: Was bedeutet CSS?

Cascading Style Sheets = Kaskadierende Stilvorlagen

CSS ist eine Sprache für strukturierte Dokumente und legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dabei zeichnet man in seinem Dokument bestimmte Abschnitte aus, während das Aussehen dieser Bereiche im CSS festgelegt wird. Somit enthält jedes CSS-Dokument Regeln für Elemente, wie beispielsweise ein Hyperlink, der mit:
 
<a href=…>
 
aufgerufen wird, auszusehen hat!
 

Mit anderen Worten, hier trennt sich Inhalt von der optischen Gestaltung.

Vorteile von CSS sind:
  • Einheitliches Aussehen für die gesamte Webseite
  • Möglichkeit für verschiedene Ausgabemedien einer anderen Darstellung
  • Elemente sind frei positionierbar
  • Einfache Einbindung in HTML-Dokument

1.1 CSS in die Homepage einbinden

Dazu gibt es zwei Möglichkeiten. Entweder jede Formatierung direkt in den Quelltext schreiben, dafür aber auf jeder Seite ggf. Parameter anpassen.
 
<head>
<style type="text/css">
body { color: blue; background-color: #f0f0aa }
</style>

</head>

Oder wir erstellen uns eine externe CSS-Datei, die jegliche von uns gewünsche Formatierung enthält. Der Aufruf dazu sieht so aus:
 
<link rel="stylesheet" type="text/css" href="default.css" />
 

1.2 Tipps zum grundlegenden Aufbau von Style-Sheets
  • Grundstruktur des Style-Sheets festlegen
So wie das HTML Dokument aufgebaut ist, sollte man sein CSS von oben (Head) nach unten (Body) aufbauen. Sprich: Wir legen zuerst das Layout fest und zum Schluss noch typografische Feinheiten oder/und Regeln für Listen/Tabellen/eigene Selektoren.
  • Übersicht bewahren
Jeder Selektor eines Attributes wird linksbündig geschrieben, danach Klammer auf.
Jede Deklaration dieses Selektors wird mit 1x [TAB] eingerückt, ist die Deklaration zu Ende, wird in einer neuen Zeile die Klammer geschlossen.

  • Regeln und Definitionen
Es werden nur Regeln festgelegt, die gebraucht werden, aber dafür alle Definitionen, die für das HTML Dokument nötig sind.
  • Kommentieren

Es gibt nichts Schlimmeres als unkommentierten Quellcode. Deshalb immer, wenn es an eine komplizierte Stelle geht oder es angebracht scheint, den jeweiligen Abschnitt kommentieren. Im CSS sieht ein Kommentar so aus:
/* CSS-Kommentar */


1.3 Das Box-Modell
Dazu möchte euch noch kurz diese Grafik zeigen

Bilder

(Quelle: http://www.thestyleworks.de)

Ihr seht also, die Seite wird wie eine Grafik in Photoshop mit „Ebenen“ aufgebaut. Im nächsten Kapitel, Umsetzung, wird so jeder Div. (= Box) aufgebaut werden.


2. Umsetzung:

Nach der ganzen Theorie bin ich froh, euch mal wieder ein paar Bilder zu zeigen.
Wir erinnern uns an Tag 1:

Bilder


Body:

Zu Beginn unseres CSS teilen wir also dem Body-Tag folgendes mit:

- Hintergrundfarbe für die Seite komplett grau
- Weiterhin: Lila Grafik, die sich horizontal wiederholen soll (Body-Header)

Code:
body {
            font:10px verdana;
            color:#555;
            margin:20px;
            background:url(../images/body.gif) top repeat-x #333;
} 

1 Ihr seht, ich habe für die gesamte Seite die Schriftart Verdana mit 10px gewählt.
2 Danach wird die Hintergrundfarbe gewählt, grau #55555 bzw. periodisch-kurz #555
3 Der gesamte Body soll einen Außenabstand von 20px haben, siehe Wrapper
4 Die Grafik wird eingefügt, falls nicht ladbar, wird die Farbe #33333: dunkelgrau angezeigt

  

Wrapper:

Dann soll unsere Seite noch vertikal im Browserfenster zentriert werden, diese Eigenschaft legen wir im Wrapper fest. Der Wrapper „umhüllt“ quasi unseren Content. Auf den meisten Seiten im Netz gibt es diesen nützlichen Container, der meist unsichtbar ist.

Bilder


Damit dieser vertikal zentriert ist, bedient man sich eines einfachen Tricks, man benutzt den Außenabstand (margin).

Dazu sollten wir erstmal wissen, wie Margin (analog: Padding) überhaupt funktioniert:

- (margin: 1px) jede Seite den gleichen Außenabstand von 1px
- (margin: 1px 5px) Abstand nach oben & unten 1px, nach rechts & links 5px
- (margin: 1px 2px 3px 4px) Abstand oben 1px, rechts 2px, unten 3px, links 4px.

 
Margin und Padding nicht mit 3 Parametern angeben, das ist schlechter Code-Stil!

Merktipp: Parameter im Uhrzeigersinn für die Ausrichtung zählen:
Oben (margin-top) --> Rechts (margin-right) --> Unten (margin-bottom) --> Links (margin-left)
 

Code:
#wrapper {
            margin:0 auto;
            background:#fff;
            padding:5px;
            border:4px solid #555;
            width:760px;
} 

1 Außenabstand oben & unten 0, rechts & links auto = bewirkt Zentrierung
2 Hintergrundfarbe Weiß
3 Innenabstände überall 5px
4 Eine durchgezogene Umrandung, 4px breit, mit der Farbe unseres Body-Background
5 Der Wrapper soll 760px breit sein
 

Header:

Jetzt kommt unser Header und die Navigation dran… 

Bilder


Gleichsam dem Wrapper, wird hier der Header auch als Div. geschrieben.

Wie man vielleicht auf dem Bild erkennen kann, werde ich später eine Grafik erstellen, die sowohl unsere Header-Hintergrundfarbe Rosa, als auch unser populäres Grau enthält.

Warum? Weniger Arbeit!

Code:
#header {
            height:110px;
            background:url(../images/header.gif) top repeat-x;
}

 

1 Höhe von 110px gewählt. Kann willkürlich festgelegt werden
2 Hintergrundgrafik einbinden, wird wieder in x-Richtung wiederholt


Seitenbox:

Die Seitenbox soll direkt unter dem Header linksbündig platziert sein. Des Weiteren eine kleinere Schriftgröße, ein leichter Hintergrund-Grauton sowie Trennung zum Content.

Um zu gewährleisten, dass der Text im Content immer rechts um die linksbündig ausgerichtete Seitenbox fließt, benutzen wir die Eigenschaft (float)

Damit können wir einen Bereich bestimmen und die nachfolgenden Elemente werden diesen Bereich umfließen.

Tipp: Artikel über (float) auf Selfhtml nachlesen.
 
Bilder


 

Code:
#seitenbox_links {
            float:left;
            width:180px;
            padding:0 10px;
            background:#EBEAEA;
            font:100% Verdana;
            border-right:1px solid #CCC;
            margin:0 15px 0 0;
}


1 Die Seitenbox ist hiermit links neben dem Text im Content angeordnet.
2 Breite von 180px
3 Innenabstand oben & unten 0px, links & rechts 10px
4 Hintergrundfarbe in leichtem Grauton ‚EBEAEA’
5 Prozentuale Schriftgrößenangabe von 100%, Typ: Verdana
6 Rand nach rechts, durchgezogene Linie (solid), 1px breit in Grau
7 Außenabstand nach rechts von 15px


Content:

Hier gibt es nicht viel zu erzählen, viele Möglichkeiten der Textformatierung, die ich im Content benutze, erwähne ich nicht gesondert, sondern diese sind am Ende dieses Workshops mit einem kleinen Kommentar im Stylesheet enthalten. Natürlich kann man diese sehr individuell anpassen.

Code:
#content {
            padding:0 15px;
            font-size:120%;
}

Da wir aber die Seite dynamisch halten wollen, sprich die Option uns offen lassen, ob wir eine Seitenbox haben wollen oder keine, müssen wir später zwangsläufig unserem Content mitteilen, ob eine Seitenbox vorhanden ist oder nicht. Diese Mitteilung schreiben wir als Klasse und fügen zum Content-Div diesen Klassenaufruf auf eine Seitenbox ein.


Die Klasse:
.mit_seitenbox {
            margin:0 0 0 200px;
} 

1 Außenabstand nach links von 200px
 

Footer:

Hier haben wir genug Platz, um später einen Copyright-Verweis anzubringen oder den Hinweis auf ein validiertes HTML Dokument bzw. Stylesheet. Wir möchten den Footer über den gesamen unteren Teil des Wrappers legen, natürlich wieder in einem Grauton.
Dafür müssen wir jedoch den Innenabstand (padding) des Wrappers wieder ausgleichen.
 

Bilder


 
Solltet ihr nun das Kapitel über (float) auf Selfhtml nachgelesen haben, ist euch sicher nicht entgangen, dass wir diese spezielle Formatierung auch wieder aufheben müssen.
Das geschieht mit einem (clear), das entweder auf links/ rechts oder auf beide Richtungen definiert wird.


Code:
#footer {
            margin:30px -5px -5px -5px;
            padding:15px;
            background:#f6f6f6;
            border-top:2px solid #eee;
            clear:left;
}

1 Außenabstand nach oben 30px, Rest -5px um die (+)5px vom Wrapper auszugleichen

2 Innenabstand 15px

3 Yeeh… schon wieder Grau!

4 Rand nach oben, 2px breit, durchgezogene Linie

5 Das (clear) hebt den (float) der Seitenbox auf

 
3. Grafikaufbereitung:

Wird Zeit, um ein bisschen Farbe und Grafiken auf die Seite zu bekommen. Zuerst erstellen wir den Header, danach die Hintergrundgrafik für den Body-Bereich.

Bilder


Erstellt ein neues Photoshopdokument mit 50x110px

Bilder


Hilfslinie auf 75% horizontal anlegen

Bilder


Ich habe einen Verlauf erstellt, ihr könnt ihn auf dem Bild oben sehen. Den Bereich unter der Hilfslinie habe mich mit einem dunklen Grau gefüllt (#555), darüber mit dem Bleistift 1px in schwarz eine Linie gezogen, darunter eine Linie in hellerem Grau.


Bilder
               
Bilder
Bilder
Bilder
Bilder
Bilder
Bilder


 

Fertig! Ein Stück, und das Ganze als wiederholte Version durch (repeat-x)

In den grauen Bereich schreibe ich später die einzelnen Unterpunkte für die Navigation.

Nun fehlt noch die Hintergrundgrafik für den Body.

Bilder


Abmessungen: 300x140px 

Bilder


Auf einer neuen, transparenten Ebene habe ich mit dem Ahornblattpinsel mit der Farbe lila (7B0874) ein paar Blätter aufgetupft. Das Ganze in verschiedenen Deckkraftstärken zwischen 30-80% variiert und die Farbe später auf Magenta (E70565) gewechselt und weitergetupft. Die beiden Farben entsprechen meiner Farbwahl aus Tag 1. Beachtet, dass ihr an den Rändern möglichst keine Blätter haben solltet wegen (repeat-x) der Grafik.
 

Bilder


Den Hintergrund, Ebene 3, färbe ich in Lila ein und schiebe beide Ebenen ein Stück nach oben. Dazu wählt ihr Ebene 2 aus, klickt die Klammer neben dem Auge in Ebene 3, drückt „V“ (=Verschiebungswerkzeug) und tippt ein paar Mal auf die Pfeiltaste nach oben. Alternativ: „V“ drücken, SHIFT gedrückt halten (gerade horizontale/vertikale Verschiebung) und mit der Maus ein Stück nach oben fahren.

Bilder


Den freien Spalt habe ich wieder mit unserem Body-Background grau (#555) gefüllt, dann mit dem Buntstift in 1px Breite eine Linie in 80% Deckkraft darüber gezogen, eine Linie darüber dann in 60% Deckkraft, und die nächste in 40% und die letzte in 20%.

Bilder
         
 
Fertig! Ein Stück, und das Ganze wieder mit (repeat-x) wiederholt

 
Anm. des Autors:

Die Frage an dieser Stelle von aufmerksamen Lesern; warum nehme ich den hässlichen Blattpinsel, benutze komische lila/rosa Farbtöne und mache so einen komischen Header, der überhaupt nix mit der Thematik zu tun hat, lasse ich mal offen. Bitte nehmt eure eigenen Pinsel, Bilder und Kacheln – irgendwas musste ich euch doch zeigen!


4. Das CSS schreiben

Bis jetzt gab es nur grobe Code-Fetzen. Im Endeffekt können wir damit jedoch zu 100% die Seite schon aufbauen, fehlen nur noch ein paar grobe Textformatierungen sowie die Hover-Effekte für die Navigation.

Jetzt kommt der Nachteil aus der Variante: Tag 2 = CSS, Tag 3 = HTML zum Vorschein.

Hier fehlt euch nun das ständige Wechseln zwischen CSS-Anpassung und Anschauen, wie das HTML Gerüst damit im Browser aussieht. Während ich also den Workshop schreibe, habe ich die ganze Zeit gewechselt, hier was ausgebessert und dort und so kann ich euch nur ein paar Fetzen kommentieren.

Den Rest übernehmt ihr einfach von unten, er ist mit einem kleinen Kommentar versehen. Den Code für Body, Wrapper, Header, Seitenbox, Content und Footer könnt ihr von oben einfach einfügen.

 

/* Jeder Selektor wird hiermit auf 0 gesetzt */
* {
            margin:0;
            padding:0;
}
 
/* Hier Body */
 
/* Hier Wrapper */
 
/* Hier Header */
 
/* Das ist die Formatierung für eine Überschrift im Header */
#header h1 {
            height:45px;
            font:250% Trebuchet MS;
            padding:30px 20px 10px 20px;
            color:#fff;
}
 
/* Hier beginnt die Formatierung für das Navigationsmenü */
#nav {
            margin:0 0 0 0;
}
 
#nav li {
            list-style:none;
            display:inline;
            padding:7px 0;
}
 
#nav li a {
            padding:7px;
            color:#EBEAEA;
            text-decoration:none;
}
 
#nav li a:hover {
            background:#333;
            border-bottom: 4px solid #E70565;
            color:#E70565;
}

/* Hier Seitenbox_links */
 
/* Überschriftformatierung für Seitenbox */
#seitenbox_links h2 {
            font:140% Arial;
            color:#222;
            border-top:1px solid #f6f6f6;
            border-bottom:1px solid #f6f6f6;
            padding:5px;
}
 
/* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */
#seitenbox_links p {
            line-height:20px;
}
 
/* Hier Content */
 
/* Überschriften im Content stylen */
#content h2 {
            font:150% Trebuchet MS;
            color:#222;
            border-bottom:1px solid #eee;
}
 
#content h3 {
            font:140% Arial;
            color:#222;
            border-top:1px solid #f6f6f6;
            border-bottom:1px solid #f6f6f6;
            padding:5px;
}
 
/* Hier Klasse „Mit_Seitenbox */
 
/* Ein paar Selektoren des Contents gesammelt und formatiert */
/* ACHTUNG: Line-Height ändern auch hier den Zeilenabstand im gesamten Text!! */
#content h1,h2,h3,h4,p,ul,ol {
            margin:15px 0;
            line-height:20px;
}
 
/* Hier Footer */
 
/* AB HIER: FORMATIERUNGEN, DIE HTML-TAGS ÜBERSCHREIBEN FÜR TEXT IM CONTENT */
 
/* Zum Zitieren bzw. hier nur für HTML Code verwendet */
code {
            background:#f6f6f6;
}


 
________________________________________________________________________

Arbeitsdateien: CSS, Body und Header Grafik
 

Weiter geht es mit Tag 3: HTML
 
Morgen wird die Seite aufgebaut. Ich empfehle, eine angenehme Musik einzulegen, sich einen schönen Tee aufzusetzen und die Tastatur für viele kleine HTML Befehle vorzubereiten.

 


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von rabbitdesign
  • 22.12.2013 - 19:48

Echt super gemacht, klasse bescchrieben!

Portrait von shenja91
  • 04.04.2013 - 23:37

super Tutorial, alles gut verständlich :)

Portrait von Manyra
  • 01.01.2012 - 15:02

Tolles Tutorial, hab zwar schon einige Grundkenntnisse, aber es waren sehr viele nützliche Tipps dabei, die mir weitergeholfen haben.

Portrait von Abendsegler
  • 05.12.2011 - 20:12

Auch in diesem Tutorial wieder: Super erklärt. Die kleinen, aber oft wichtigen Kommentare dazwischen finde ich toll.

Portrait von apeljuice
  • 01.12.2011 - 06:21

Super Beschreibungen, die es einem einfach machen alles nachvollziehen zu können! Danke!

Portrait von Elchblender
Portrait von Slyzza
  • 14.07.2011 - 11:45

ist sehr interessant geschrieben und durchaus für anfänger verständlich

Portrait von christian_kurz
Portrait von Feddmund
  • 16.04.2011 - 17:00

TOP! einfach TOP! =)

Portrait von Non_Stop
  • 13.04.2011 - 21:35

Nochmals vielen Dank für die Mühe, hat mir schon geholfen.

Portrait von snu_snu
  • 01.04.2011 - 15:52

Danke, hat mir sehr weiter geholfen!!!

Danke!

Portrait von Sasha
  • 28.03.2011 - 16:08

Gut erklärt, danke für die Mühe, die Du Dir gegeben hast.

Portrait von pcjette
  • 15.03.2011 - 12:51

Super, ich kann für Anfänger dieses Tut nur empfehlen, werde weiter lesen. vielen Dank für Deine Mühe.

Portrait von mcmoneysack
  • 11.03.2011 - 16:10

Sauber, gut geschrieben. Endlich mal ein verständliches Tutorial, mit dem auch ein Anfänger was machen kann.

Portrait von Kloppy
  • 26.02.2011 - 22:51

echt super und verständlich geschrieben! Vielen, vielen Dank dafür!!!

Portrait von nichtvorhanden
Portrait von Hundefreund88
  • 25.01.2011 - 16:44

Mir gefällt der klare Aufbau. Bin gespannt, wies weitergeht

Portrait von Sportsnaps
  • 04.01.2011 - 13:56

super workshop, freue mich schon auf das selber Basteln

Portrait von E_Bear
  • 10.12.2010 - 15:02

Mal eine Frage, welches Programm benutzt du für CSS ?

Portrait von Benric
  • 13.11.2010 - 18:53

klasse sache suppi aufgelistet

x
×
×