So wird es am Ende aussehen
Als erstes erstellt ihr deine neue Datei. Das könnt ihr tun, indem ihr einen Texteditor öffnet (zum Beispiel den Windows Editor oder Notepad++) und dort eine neue Datei anlegt.
 |
| Notepad++: neues Dokument anlegen |
Das Grundgerüst von einem HTML Design sieht immer so aus:
<?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" xml:lang="de" lang="de">
<head>
<title>Dein Homepage Titel</title>
</head>
<body>
Hallo
</body>
</html>
Der HTML Tag leitet das HTML ein. Die XML Angaben werden für den verwendeten Zeichensatz gebraucht (hier mehr dazu). Der "Doctype" ist für die Browser wichtig damit sie wissen, in welchem Modus sie die Seite anzeigen müssen. Im Header stehen die Kopfdaten wie der Titel eurer Homepage. Außerdem werden dort externe Dateien eingefügt (später dazu mehr). Body ist der "Körper". Hier muss euer anzuzeigender Inhalt (also euer Text, eure Bilder usw.) rein.
Du kannst das Grundgerüst ruhig in deine .html Datei kopieren und durch einen Doppelklick im Browser aufrufen. Dort steht nun "Hallo".
Nun sieht das Ganze natürlich noch lange nicht so aus wie ein Design. Um der Homepage Farbe zu geben legen wir nun noch eine style.css an. In diesem Stylesheet können wir den verschiedenen HTML Elementen eine Farbe, Größe und mehr geben. Anlegen könnt ihr diese genauso wie eine HTML Datei, nur speichert ihr die Datei nicht als HTML sondern als Cascade Style Sheets File (*.css) ab.
Diese befüllen wir auch gleich mit folgendem Code:
body{
background-color: #CCCCCC;
font-family: Tahoma;
font-size: 12px;
}
Dieser sagt einfach: setze die Hintergrundfarbe von "body", auf grau (#CCCCCC), außerdem soll die Standard Schriftart auf dieser Seite "Tahoma" mit der Schriftgröße 12 sein.
Speichert die Datei ab. Öffnet eure index.html und ihr werdet sehen: es hat sich noch nichts verändert! Schließlich weiß die HTML Datei noch nichts von eurer style.css. Also müssen wir die beiden noch miteinander bekannt machen. Und das geht, indem ihr folgenden Code in den <head> </head> Bereich eures Codes einfügt:
<link href="style.css" rel="stylesheet" type="text/css" />
Damit es funktioniert, muss die style.css im gleichen Ordner liegen wie die index.html. Ansonsten müsst ihr diesen Pfad href="style.css" anpassen!
Nun sieht das Ganze schon so aus:
<?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" xml:lang="de" lang="de">
<head>
<title>Dein Homepage Titel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hallo
</body>
</html>
Speichert die index.html und öffnet sie wieder in eurem Browser. Nun sehr ihr: es hat sich etwas verändert. Die Hintergrundfarbe unseres Fensters ist nun grau!
Nun wollen wir ein einfaches "Standard" Layout erstellen: oben der Header, links die Navigation, daneben der Content und unten der Footer.
Die einzelnen Rechtecke, die ihr auf diesem Bild seht, verwandeln wir nun alle in "DIV-Container". Mit einem DIV legt ihr einfach einen Bereich fest (div = division = Bereich). Alles, was zwischen einem <div> und </div> steht ist ein Bereich und gehört somit zusammen. Wir brauchen also insgesamt 5 DIVs (das Layout insgesamt, den Header, den Content, die Navigation und den Footer). Da wir in diese Blöcke den Inhalt unserer Seite einfügen, kommen diese in den <body> </body> Bereich. Also so:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
4 DIVs liegen dabei in einem äußeren DIV. Das äußere DIV ist einfach eine Verpackung (engl. wrapper), indem euer gesamtes Grundgerüst liegt. Das ist wichtig, damit ihr später eure gesamte Homepage zentrieren könnt.
Habt ihr es schon bemerkt? Die Divs können nun gar nicht unterschieden werden! Da wir aber für jedes DIV eine andere Farbe und Größe verwenden wollen, müssen wir ihnen noch Namen geben. Dabei gibt es zwei Möglichkeiten: ID und Class.
Dabei gibt es einen großen Unterschied: Den Namen, den ihr mit "class" vergebt, könnt ihr häufiger verwenden. Ein Beispiel: Ihr habt Navigations Boxen (3 Stück) die alle gleich aussehen sollen. Also bekommen sie alle den gleichen Namen: "naviboxen". Also wäre richtig:
<div class="naviboxen"></div>
<div class="naviboxen"></div>
<div class="naviboxen"></div>
Einen Namen den ihr mit "ID" vergebt, muss eindeutig sein. Das heißt, nur ein einziges DIV darf diesen Namen besitzen! Und genau das brauchen wir nun, denn die Verpackung, der Content, die Navigation, der Header und der Footer existieren nur einmal! Kein weiteres div soll den gleichen Namen wie diese vier haben.
<div id="wrapper">
<div id="header"> </div>
<div id="navi"> </div>
<div id="content"> </div>
<div class="clear" id="footer"> </div>
</div>
</body>
Und schon können wir die fünf DIVs von einander unterscheiden. Öffnen wir unsere index.html, sehen wir nun wieder nichts (das "Hallo" könnt ihr ruhig aus eurem Code löschen).
Nun wollen wir mal den verschiedenen Divs verschiedene Farben zuweisen, damit wir auch sehen, wo welcher Bereich ist. Deshalb öffnen wir wieder unsere style.css und fügen folgendes ein:
#wrapper{
width: 850px;
margin: 15px auto;
text-align: left;
}
#header{
background-color: #666699;
margin: 15px 0 0 0;
width: 850px;
}
#navi{
width: 140px;
float: right;
background-color: #A9DCF6;
min-height: 500px;
}
#content{
width: 710px;
float: left;
background-color: #ffffff;
min-height: 500px;
}
#footer{
background-color: #6699CC;
}
.clear{
clear: both;
}
Die Raute (#) sagt, dass es sich bei dem Element um eine ID handelt. Der Punkt (.) gibt an, dass es sich um eine "Class" handelt (siehe oben). Wie ihr seht, heißen die Elemente in der css genauso wie die Namen, die wir den verschiedenen Divs gegeben haben. So weiß der Browser nun, was zusammen gehört. Wir haben hier den verschiedenen Divs mithilfe von "width" eine Breite mitgegeben und allen eine andere Hintergrundfarbe verpasst, damit wir sie gleich unterscheiden können. Für die Positionieren der Navigation und des Contents verwenden wir den Befehl "float". Dieser bewirkt, dass alle folgenden Elemente dieses Element umfließen. Auf deutsch: Content und Navigation können nebeneinander angezeigt werden.
Mit "margin" könnt ihr die Elemente positionieren (z.B. margin: 15px auto; um dem Wrapper einen Rand von 15px nach oben und unten zu geben). "min-height" sagt, das der Content und die Navigation mindestens die angegebene Höhe haben muss, egal wie wenig Inhalt es gibt.
Wichtig: Wer floatet muss auch clearen! Wir haben die Navigation und den Content mit der float-Eigenschaft versehen, also müssen wir diese auch aufheben wenn ein Element nicht in den Fluss mit eingehen soll. Da in unserem Beispiel der Footer unter dem Content und unter der Navigation sein soll, müssen wir das Floating aufheben. Das erreichen wir, indem wir dem "Footer" Div zusätzlich die Klasse "Clear" mitgeben.
Um nun auch mal etwas zu sehen wenn wir unsere index.html aufrufen, schreiben wir in die divs verschiedene Texte. So müsste eure index.html dann inzwischen aussehen:
<!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" xml:lang="de" lang="de">
<head>
<title>Dein Homepage Titel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body>
<div id="wrapper">
<div id="header">Das ist der Header</div>
<div id="navi">Das ist die Navigation</div>
<div id="content">Und hier steht nachher der ganze Inhalt</div>
<div class="clear" id="footer">Ich bilde den Schluss</div>
</div>
</body>
</html>
Schon ganz schick, oder? Jedenfalls erkennt man, was es werden soll :) Fangen wir nun von oben an und beginnen mit dem Header.
 |
| Das Grundgerüst steht |
Der Header
Zuerst ersetzen wir den Text durch ein Bild. Ich habe mich für dieses hier von PinkPearl entschieden.
Löscht den Text "Das ist der Header" weg und ersetzt es durch:
<div id="header"><img src="EURE_HEADER_URL.png" /></div>
In meinem Fall wäre es also:
<div id="header"><img src="http://www.thepinkpearl.de/Headers/2624.png" /></div>
(Bitte ladet das Header Bild auf eurem eigenen Server hoch!)
Tada, der Header ist fertig :D Gebt es zu, so schnell habt ihr damit nicht gerechnet oder?
 |
| Der Header ist nun eingefügt |
Die Navigation
Kommen wir nun zu der Navigation. Ich möchte meine Links untereinander darstellen, am Besten noch mit einer Überschrift.
Dazu lösche ich "Das ist die Navigation" und füge folgendes ein:
<div id="navi">
<h2>Main</h2>
<ul class="navigation">
<li><a href="index.html">Start</a></li>
<li><a href="#">Über</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Linkstuff</a></li>
</ul>
</div>
Ziemlich viel Neues auf einmal hm? Das <h2> gibt an, dass der Text eine Überschrift ist. <ul> leitet die Aufzählungsliste ein und mit <li> beginnt ein neuer Punkt in dieser Liste.
Fügen wir dies nun in unsere index.html ein und rufen diese in unserem Browser erneut auf, erkennen wir schon eine Navigation - aber eine ungestylte. Daher öffnen wir nun wieder unsere style.css und fügen folgenden Code ein.
h2
{
text-align: center;
color: #ffffff;
font-family: Times New Roman;
text-decoration: underline;
}
.navigation
{
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 12px;
list-style-type: none;
padding: 0px 10px;
text-align: left;
}
.navigation a
{
color: #ffffff;
text-decoration: none;
padding: 0 25px 0 0;
}
.navigation a:hover
{
text-shadow: 0px 0px 10px #ffffff, -1px -1px #ffffff;
}
Schon wieder so viel Code? Tut mir leid^^ Das "h2" definiert das Aussehen eurer Überschrift in der Navigation."text-align: center;" sagt, das der Text zentriert sein soll. "text-decoration: underline;" sagt, der Text soll unterstrichen sein. Color und Font-Family sind denk ich klar.
In ".navigation" bestimmen wir die Schriftart, Größe und Farbe des Textes (in unserem Fall der Links) die sich in der Navi befinden. Damit wir keine Aufzählungszeichen angezeigt bekommen (wir erinnern uns: <ul> ist eine Aufzählung), geben wir in der Klasse noch "list-style-type: none;" an. Das sagt dem Browser: Zeig keine Aufzählungszeichen an!
Wenn wir nun alle Links stylen wollen, die sich innerhalb der Klasse "navigation" befinden, gibt es dafür einen kleinen Trick: indem wir hinter das .navigation ein "a" hängen (.navigation a) sagen wir den Browser, dass alle "<a" tags innerhalb der Navigation diesen Style bekommen sollen. Hier geben wir nun einfach die Linkfarbe an, sagen das der Text keine "Dekoration" haben soll (nicht unterstrichen usw.) und geben den Links "padding: 0 25px;" mit, damit wir links zum Rand hin einen Abstand haben.
Damit sich der Link verändert, wenn wir oder der Besucher mit der Maus drüber fährt, haben wir nun noch .navigation a:hover. Dort habe ich nun dafür gesorgt, das der Text beim drüber fahren einen weißen Schatten bekommt. So scheint es, als leuchte der Link.
Der Content
Nun folgt der Content. Dort steht momentan noch "Und hier steht nachher der ganze Inhalt". Das sieht aber doch noch sehr gequetscht und nicht sehr stylisch aus. Daher ergänzen wir nun das "content div" um ein "Inhalt div". Wechselt also wieder in eure index.html und ändert/ergänzt folgendes:
<div id="content">
<div id="inhalt">
Und hier steht nachher der ganze Inhalt
</div>
</div>
Ihr könnt euch das so vorstellen, dass das Content Div eine Hülle um den Text bildet, in der der Hintergrund des Inhalts angegeben wird. Im Inhalt steht euer Text und daher werden wir hier nun den Abstand des Textes regeln. Hier könnt ihr jetzt auch eure Schrift Einstellungen definieren, wenn sie sich von euren Allgemeinen Einstellungen unterscheiden. Dies müssen wir wieder in der style.css machen. Wir fügen also eine neue "Regel" ein, die so aussieht:
#inhalt{
padding: 10px;
}
Das sagt eurem Browser ganz einfach, dass der Text an allen Seiten 10px Abstand haben soll. Schriftart und Farbe habe ich hier nun nicht mehr drin, da wir das ja schon Allgemein im body{} erledigt haben.
Der Footer
Was ihr in den Footer macht, ist euch überlassen. Ihr könnt ihr natürlich auch ganz weg lassen oder statt Text einfach nur eine Grafik hinein zaubern. Ich habe mich entschieden, ein bisschen Text in den Footer zu schreiben. Wir wechseln wieder in die index.html und gehen nun gleich wie beim Content vor:
<div class="clear" id="footer">
<div id="footertext">
2013-2013 © Design by <a href="http://pinkpearlinfo.blogspot.de">lulu</a>
</div>
</div>
Wir legen um den Text in unserem Footer wieder ein Div, welches wir in der style.css folgendermaßen stylen:
#footertext{
padding: 10px;
color: #ffffff;
}
Damit sorgen wir wieder für den nötigen Abstand und ändern die Schriftfarbe innerhalb des footertext divs.
Allgemeine Änderungen
Wie euch vielleicht aufgefallen ist, ist der Link im Footer noch ganz schön ungestylt. Das liegt daran, dass wir noch nichts gesagt haben, wie normale Links auszusehen haben. Auch wie ein Text fett (<b></b>), unterstrichen (<u></u>) oder kursiv (<i></i>) auszusehen hat, müssen wir dem Browser noch sagen. Darum schreiben wir jetzt folgendes in die style.css:
Damit wir nun auch sehen, wie das ganze sich auf unsere Homepage auswirkt, ergänzen wir in der index.html folgendes:
<div id="inhalt">
Und hier steht nachher der ganze Inhalt: <br/>
<b>Fett</b>, <i>kursiv</i>, <u>unterstrichen</u> und ein <a href="#">Link</a>
</div>
Zum Schluss...
Nicht mit gekommen? Hier gibt es auch die fertigen Dateien zum Downloaden (rechtsklick: Link speichern unter):
Ihr könnt den Code/die Codes gerne für eure Homepage verwenden und verändern so wie ihr wollt.
Wenn Interesse daran besteht, würde ich nächstes Mal erklären, wie ihr Dateien mithilfe von PHP (ohne IFrame) einbinden könnt und so euren Design Code nicht auf jeder Unterseite haben müsst und euch erklären, was ein meta Text ist und wie ihr ihn in eure Homepage einfügt.
Fragen könnt ihr gerne hier als Kommentar hinterlassen oder schickt mir einfach ne Mail.
Wenn wir nun alle Links stylen wollen, die sich innerhalb der Klasse "navigation" befinden, gibt es dafür einen kleinen Trick: indem wir hinter das .navigation ein "a" hängen (.navigation a) sagen wir den Browser, dass alle "<a" tags innerhalb der Navigation diesen Style bekommen sollen. Hier geben wir nun einfach die Linkfarbe an, sagen das der Text keine "Dekoration" haben soll (nicht unterstrichen usw.) und geben den Links "padding: 0 25px;" mit, damit wir links zum Rand hin einen Abstand haben.
Damit sich der Link verändert, wenn wir oder der Besucher mit der Maus drüber fährt, haben wir nun noch .navigation a:hover. Dort habe ich nun dafür gesorgt, das der Text beim drüber fahren einen weißen Schatten bekommt. So scheint es, als leuchte der Link.
 |
| Beim "drüber fahren" leuchtet der erste Link |
Der Content
Nun folgt der Content. Dort steht momentan noch "Und hier steht nachher der ganze Inhalt". Das sieht aber doch noch sehr gequetscht und nicht sehr stylisch aus. Daher ergänzen wir nun das "content div" um ein "Inhalt div". Wechselt also wieder in eure index.html und ändert/ergänzt folgendes:
<div id="content">
<div id="inhalt">
Und hier steht nachher der ganze Inhalt
</div>
</div>
Ihr könnt euch das so vorstellen, dass das Content Div eine Hülle um den Text bildet, in der der Hintergrund des Inhalts angegeben wird. Im Inhalt steht euer Text und daher werden wir hier nun den Abstand des Textes regeln. Hier könnt ihr jetzt auch eure Schrift Einstellungen definieren, wenn sie sich von euren Allgemeinen Einstellungen unterscheiden. Dies müssen wir wieder in der style.css machen. Wir fügen also eine neue "Regel" ein, die so aussieht:
#inhalt{
padding: 10px;
}
Das sagt eurem Browser ganz einfach, dass der Text an allen Seiten 10px Abstand haben soll. Schriftart und Farbe habe ich hier nun nicht mehr drin, da wir das ja schon Allgemein im body{} erledigt haben.
 |
| Der Inhalt des Contents ist nun nicht mehr gequetscht |
Der Footer
Was ihr in den Footer macht, ist euch überlassen. Ihr könnt ihr natürlich auch ganz weg lassen oder statt Text einfach nur eine Grafik hinein zaubern. Ich habe mich entschieden, ein bisschen Text in den Footer zu schreiben. Wir wechseln wieder in die index.html und gehen nun gleich wie beim Content vor:
<div class="clear" id="footer">
<div id="footertext">
2013-2013 © Design by <a href="http://pinkpearlinfo.blogspot.de">lulu</a>
</div>
</div>
Wir legen um den Text in unserem Footer wieder ein Div, welches wir in der style.css folgendermaßen stylen:
#footertext{
padding: 10px;
color: #ffffff;
}
Damit sorgen wir wieder für den nötigen Abstand und ändern die Schriftfarbe innerhalb des footertext divs.
Allgemeine Änderungen
Wie euch vielleicht aufgefallen ist, ist der Link im Footer noch ganz schön ungestylt. Das liegt daran, dass wir noch nichts gesagt haben, wie normale Links auszusehen haben. Auch wie ein Text fett (<b></b>), unterstrichen (<u></u>) oder kursiv (<i></i>) auszusehen hat, müssen wir dem Browser noch sagen. Darum schreiben wir jetzt folgendes in die style.css:
a:link, a:visited, a:active
{
color: #4A395A;
text-decoration: none;
}
a:hover {
color: #B6CAEC;
text-decoration: underline;
}
u {
color: #417491;
}
i {
color: #CCCCCC;
}
b{
color: #B6CAEC;
}
Damit wir nun auch sehen, wie das ganze sich auf unsere Homepage auswirkt, ergänzen wir in der index.html folgendes:
<div id="inhalt">
Und hier steht nachher der ganze Inhalt: <br/>
<b>Fett</b>, <i>kursiv</i>, <u>unterstrichen</u> und ein <a href="#">Link</a>
</div>
Zum Schluss...
Nicht mit gekommen? Hier gibt es auch die fertigen Dateien zum Downloaden (rechtsklick: Link speichern unter):
Ihr könnt den Code/die Codes gerne für eure Homepage verwenden und verändern so wie ihr wollt.
Wenn Interesse daran besteht, würde ich nächstes Mal erklären, wie ihr Dateien mithilfe von PHP (ohne IFrame) einbinden könnt und so euren Design Code nicht auf jeder Unterseite haben müsst und euch erklären, was ein meta Text ist und wie ihr ihn in eure Homepage einfügt.
Fragen könnt ihr gerne hier als Kommentar hinterlassen oder schickt mir einfach ne Mail.
Huhu Lulu :)
AntwortenLöschenAlso mir gefällt der Post sehr sehr gut! Du hast das super erklärt und auch gut mit den Beispielen unterlegt :D
Gefällt mir wirklich klasse <3
Hoffe bald auf mehr von solchen Posts <3
Gut erklärt für Anfänger sicher gut gemacht. Es gibt zwar einige Neuerungen wie zum Beispiel die Kopfzeile. Da müsste mittlerweile ein ausreichen. Die hat mich am Anfang immer total verwirrt. ^^' Und ein paar Zusatz-Tags wie header (mit er wichtig!), nav und footer.
AntwortenLöschenAbgesehen von dem Pippikram sehr schön gemacht. ^^
Oh sorry das wird nicht angezeig. Gemeint war in der Kopfzeile: DOCTYPE html
LöschenSuper Tutorial und erklärt schön Schritt für Schritt, wie man das ganze aufbaut ^^. Für Anfänger gut geeignet!
AntwortenLöschenFreu mich schon auf die Erklärungen zum Includen ^^. Den ganzen Text nicht auf jede Unterseite kopieren zu müssen ist schon sehr praktisch, vor allem, wenn man auch mal ein Wechsellayout anbieten möchte. Meta-Tags .... kann man auch erklären. Ich überlege grad, was man da noch machen könnte ... aber da wichtigste wäre damit definitiv abgedeckt o.o.
Finde das auch alles sehr schön erklärt. Gefällt mir sehr gut. Aber eine Frage noch... was sind meta-tags??? & wie wird ein Newssystem gecodet & wie werden Affis oder Sister oder generell Grafiken in einem Footer oder im Header mit eingecodet?? Zu einem Tutorial über solche Dinge würde ich mich au noch sehr freuen da ich deine Erklärungen wirklich sehr hilfreich finde um das ganze Coding endlich zu verstehen.
AntwortenLöschenHilfe... ich verzweifele gerade :/ habe mir einer von euren Design runtergeladen & wollte das vorübergehend als Design wir meine HP verwenden allerdings ist das alles nur in html geschrieben und es gibt noch keine header & footer datei. beim versuch ein in php zu ändern hab ichs design zerstört T-T irgendwie will der Content sich von der Navi net trennen und der Footer ist verrutscht. T-T
AntwortenLöschenneed help T-T