Anzeige
Tutorialbeschreibung

Homepage mit Hilfe von CSS

Homepage mit Hilfe von CSS

Kurze Anfangserklärung:
Ich werde immer einen Teil des Quellcodes schreiben und danach kurz die Bedeutung erklären.
Die Codes müssen natürlich am Schluss noch zusammengesetzt werden, dies kann man im Head jeder HTML-Datei machen,
oder eine extra CSS-Datei anlegen. Wie das geht erkläre ich euch am Schluss des Tutorials.

CSS-Style:


body {
font-family:Arial;
font-size:12px;
background-color:#003399;
text-align:center;
}

 

In diesem Teil legt man nur fest, in welcher Schriftart (font-family), welche Schriftgröße (font-size), mit welcher Hintergrundfarbe (background-color) und wie der Text ausgerichtet werden soll.


a:link, a:visited, a:active, a:hover
{
text-decoration:underline;
font-weight:bold;
color:#000099;
font-size:12px;
}
a:active, a:hover
{
color:#ffffff;
}

Das ist für die Links, die ihr in den normalen Texten habt.
Der Teil sollte sich von selbst verstehen. Geht wieder darum die Schriftgröße, usw. festzulegen.


a.menu:link, a.menu:visited
{
color:#ff9200;
text-decoration:none;
}
a.menu:active, a.menu:hover
{
color:#ffffff;
}

Wie ihr seht kommt nochmal was über Links, dies ist nun allerdings für das Linkmenü.


h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;}
h3 {font-size:14px;color:#000000;}
p {margin-top:0px;}

Das sind jetzt ein paar zusätzliche Sachen zu den Überschriften usw., die überschreiben automatisch die eigentliche Größe usw. einer Überschrift.
Das ist etwas, was nicht zwingend notwendig ist, ich finde es aber nützlich, weil man dadurch das Gesamtbild der Page verbessern kann.


#title {
height:30px;
padding:5px;
text-align:center;
background-color:#0099FF;
}

Das ist, mit den 2 nachfolgenden Teilen, der wichtigste Teil unseres Designs.
Hier bestimmen wir die Größe, Farbe, und Anordnung unserer Titelleiste.
height ist die Höhe in Pixeln
padding ist der Innenabstand in Pixeln


#menu {
color:#ffffff;
background-color:#000099;
text-align:center;
padding:10px 0px;
}

Kommen wir zu unserer Menueleiste: Hier gibts nur eine neue Sache und zwar stehen bei padding plötzlich 2 Werte. Das ist kein Fehler von mir, sondern voll und ganz beabsichtigt :-)
Der erste Wert ist nämlich für den Abstand oben und unten, der Zweite für links und rechts.


#content {
border-top:1px solid #000000;
background-color:#0099FF;
padding:5px;
color:#000000;
}

Nun der letzte Teil unseres CSS-Styles. Er ist für den Bereich in dem der eigentliche Text stehen soll da.
Um diesen Teil habe ich noch zusätzlich einen Rand gemacht, der aber eigentlich nur dazu dient, dass ihr seht, dass man dies auch machen kann :-)


HTML-Code:


Kommen wir nun zum eigentlichen Teil, nämlich das Einbinden in den HTML-Code:

Bilder

Die div-spalte bei "Gesamter Inhalt" legt fest, welche Größe usw. der Bereich haben soll, in dem unsere anderen Teile eingebracht werden.

Danach werden einfach die Teile wie wir sie später haben wollen der Reihe nach angeordnet. Zuerst die Titelzeile, dann das Menü und zu guter Letzt der Inhalt, welcher sich automatisch an die Menge die ihr hineinschreibt anpasst.

Hier noch ein Bild wie das CSS-Style-Sheet am Stück aussieht:

Bilder

Wenn ihr dieses Style-sheet einfach nur in jede HTML-Datei einfügen wollt, müsst ihr es so wie ihr es auf dem Bild seht in den Head-Bereich einfügen (der Anfang und das Ende sind wichtig).

Wenn ihr nur eine CSS-Datei anlegen wollt (was sinnvoll ist, dann müsst ihr, wenn ihr was verändern wollt, nur eine Datei bearbeiten), dann fügt alles in eine CSS-Datei (ohne den Anfang <style type="text/css"><!-- und das Ende //--></style>) und schreibt in den Head-Breich nur: <link rel="Stylesheet" type="text/css" href="namederdatei.css">

 

So das wars,

da dies mein erstes Tutorial ist, hoff ich mal, ich habe alles verständlich geschrieben und habe euch weitergeholfen.

MFG

Blade


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von EleaNor
  • 27.06.2014 - 06:14

Nettes Tutorial, Danke!

Portrait von JayJay87
  • 27.02.2014 - 18:57

hey...also ich muss mich leider den Kommentaren anschließen,das für Anfänger eher n bisschen schwer ist...ich hab mich schon etwas mit css beschäftig...weiß demnach schon was das so passiert...aber die erstellung des Tut´s is ja schon ein bisschen her ^^...wäre vielleicht cool gewesen wenn du ein paar pic´s mit eingefügt hättest wo man hätte sehen können wo was passiert...

Portrait von Kalypso
  • 26.10.2013 - 14:27

Alles schöhn und gut aber für eine Kurze Anfangserklärung: gleich 10 Punkte abziehen ?

Portrait von AngievP
  • 17.04.2013 - 18:36

Das werde ich mal ausprobieren...

Portrait von Abendsegler
  • 05.12.2011 - 20:14

Mir ging es wie marit. Komme trotzdem nicht weiter.

Portrait von rocklaydee
  • 07.09.2011 - 10:51

Gute, kurze Einführung!

Portrait von renes
  • 02.08.2011 - 22:43

Vielen Dank für die kleine Einführung

Portrait von marit6114491
  • 29.06.2011 - 17:46

Echt schade, aber kann mit dem Tutorial überhaupt nichts anfangen. Sind ja eigentlich nur Grundbegriffe von HTML eklärt.

Portrait von Susan99
  • 28.05.2011 - 15:47

Simple und gut beschrieben für den Anfänger!
Danke.

Portrait von tholuema
  • 15.05.2011 - 23:14

für mich als Einsteiger etwas komplex, aber da komm ich schon mit klar.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.05.2011 - 16:56

Ein wenig sehr komplex für Anfänger, mehr Bilder oder ein Video würden helfen.

Portrait von raspos
  • 02.03.2011 - 12:03

In aller Kürze gut erklärt.

Portrait von Gininho
  • 11.02.2011 - 05:48

völlig ok. ein einfacher aber sinnvoller einblick in css

Portrait von smartand
  • 03.12.2010 - 20:45

Für mich nicht verständlich und bringt einem nicht viel. Ich danke dennoch für die Mühe, ein Tutorial zu erstellen.

Portrait von sophie67
  • 17.11.2010 - 20:24

Vielen Dank! Für mich als Anfänger sehr hilfreich.

Portrait von base1985
  • 11.11.2010 - 09:20

super vielen Dank! Als Anfänger bin ich über alle tipps dankbar!

Portrait von hoth
  • 05.10.2010 - 11:57

aber als kurze einführung ist das scho ok so...

Portrait von Quaxi
  • 03.10.2010 - 19:22

Naja - Seit wann wird Code als Bilder eingefügt?
Sonst kann ich nichts beanstanden.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.08.2010 - 12:16

Also,
für Anfänger vielleicht ganz gut um zuverstehen worum es geht, aber da man deine Bilder nicht kopieren kann, werde von der Seite noch als pdf, ist es sehr deinen text nachzuvollziehen. Ein fertiges Bild, wie es am ende Aussieht, wäre auch nicht schlecht gewesen. Ansonsten OK:-)

Portrait von julchenu
  • 19.07.2010 - 17:56

Weniger ist mehr - aber leider nicht immer. Hätte mir mehr versprochen!

x
×
×