![[RELEASE] Tutorial zur Simplen Homepage by DjDEFONE°](https://www.elitepvpers.com/forum/iconimages/tutorials/release-tutorial-zur-simplen-homepage-djdefone_ltr.gif){kind=small}
[RELEASE] Tutorial zur Simplen Homepage by DjDEFONE°
Wollte mich mal ran setzten und wie versprochen ein Homepage Tutorial machen.
Fangen wir mal an
Demo Homepage:
Die Page von unten:
Was brauche ich ?
HTML, CSS Programm - Ich empfehle "Webocton Scriply" diese Programm ist einfach, Super und Kostenlos
HTML Kenntnisse (Grundlagen sollten reichen)
CSS Kenntnisse (Grundlagen sollten reichen)
Photoshop, Paint.NET - Für Header, Navibars and more..
Dann kanns auch schon los gehen !
Dieser Text kommt in euren <header></header> Bereich !
Damit könnt ihr euer HTML Datei sagen das es mit CSS abreiten soll.
<link href="style.css" type="text/css" rel="stylesheet" />
1.)
Als erstes erstellt ihr euch einen Ordner auf dem Desktop oder so
wo eine HTML Datei, eine CSS Datei drinne ist.
Und in diesem Ordner noch ein Ordner der "img" heisst.
HTML Datei = index.html
CSS Datei = style.css
Ordner = img
2.)
Wir gehen zuerst in die HTML Datei und machen und einheiten der Homepage.Wir schreiben zwischen <body></body> folgendes.
Code:
<div id="navi"> </div>
Dies wiederholen wir z.B 5 mal.
Nur halt statt mit "navi" mit "header"
Code:
<div id="header"> </div>
Code:
<div id="navi2"> </div>
Code:
<div id="main"> </div>
Code:
<div id="footer"> </div>
Nun Speichern wir erstmal !
So nun gehen wir in die CSS Datei !
Mit CSS können wir jetzt die ganzen Div´s einzelt so stylen wie wir wollen.
Als erstet bearbeiten wir das erste "navi".
Falls Text in der CSS Datei ist, alles Löschen.
Code:
#navi {
margin: auto;
background-image: url(img/navibar.jpg);
background-repeat: no-repeat;
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}
Dann haben wir noch den Text in die mitte gemacht und die größe verändert.
Das width und height steht für die navi bilder größe !
Nun bearbeiten wir den "header".
Code:
#header {
margin: auto;
background-image: url(img/header.png);
background-repeat: no-repeat;
width: 1024px;
height: 240px;
}
Das width und height steht für die navi bilder größe !
Nun bearbeiten wir "navi2".
Code:
#navi2 {
margin: auto;
background-image: url(img/navibar.jpg);
background-repeat: no-repeat;
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}
Das width und height steht für die navi bilder größe !
Nun bearbeiten wir den "main".
(Das ist der beareich für News, Videos, Impressum etc)
Code:
#main {
margin: auto;
background-color: #C0C0C0;
width: 1024px;
height: 600px;
overflow: auto;
}
overflow: auto; heisst das es wenn ihr zuviel schreibt automatisch scrollt.
Das width und height steht für die navi bilder größe !
Nun bearbeiten wir denn "footer".
Code:
#footer {
margin: auto;
background-image: url(img/navibar.jpg);
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}
Das width und height steht für die navi bilder größe !
Nun speichern wir erstmal die CSS Datei.
So nun öffnen wir wieder die HTML Datei.
Nun gehenw zu <div id="navi"></div>
Code:
<a href="index.html">Startseite</a> | <a href="index.html">Startseite2</a> | <a href="index.html">Startseite3</a> | <a href="index.html">Startseite4</a> | <a href="index.html">Startseite5</a> | <a href="index.html">Startseite6</a> | <a href="index.html">Startseite7</a>
Das sind deine Button.
Nun gehen wir in den <div id="header"></div>
Code:
<div id="header"> </div>
Nun gehen wir in <div id="navi2"></div>
Code:
<a href="index.html">Facebook</a> | <a href="index.html">Twitter</a> | <a href="index.html">YouTube</a>
Wenn ihr "navi2" nicht wollte löscht ihr diesen Div aus der HTML Datei: <div id="navi2"></div>
Und diesen Text aus der CSS Datei
#navi2 {
margin: auto;
background-image: url(img/navibar.jpg);
background-repeat: no-repeat;
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}
Nun gehen wir zu<div id="main"></div>
Code:
<div id="main"> Hier kommt dein Text rein für News, Videos, Impressum etc !</div>
Code:
<div id="footer"> Copyright © 2011 *DeinName* - All Right Reserved </div>
So gleich sind wir schon fertig.
Nur noch das Impressum machen.
Code:
<center><a href="index.html">Impressum</a></center>
Das wars dann auch schon
nun könnt ihr eure Seite per Rechtsklick auf index.html -> öffnen mit... -> z.B FireFox betrachten
Ich hoffe es hilft einigen bei seiner eigenen Homepage.
Ich selber über noch HTML, CSS und PHP
um irgendwann mal ein CMS zu schreiben
Mit Freundlichen Grüßen
PS:
Wenn ihr bei irgendwas hilfe braucht postet es hier rein
Ich bzw. die anderen werden die bestimmt helfen...
Download der oben angezeigten Homepage.
Edit:
Die Befehle der HTML und CSS Datei
HTML
CSS
Code:
[B][I]<link href="style.css" type="text/css" rel="stylesheet" />[/I][/B] Dieser Text weisst drauf hin das der HTML Code mit CSS bearbeitet werden kann. ----------------------------------------------------------------------------------- [B][I]<div id="navi"></div>[/I][/B] Dieser Befehl erzeugt so zu sagen ein Block den ihr individuelle verändern könnt. ----------------------------------------------------------------------------------- [B][I]<a href="index.html">Startseite</a>[/I][/B] Dieser Text leitet zu euer index, news, video.html etc hin Das Wort vor </a> wird auf der Homepage angezeigt. ----------------------------------------------------------------------------------- [B][I]<br />[/I][/B] Dieser Befehl lässt euren Text, Divs etc eine zeile nach unten rutschen.
Code:
[B][I]margin: auto;[/I][/B] Dieser Befehl sagt zu deine Div das es in die mitte soll. ----------------------------------------------------------------------------------- [B][I]background-image: url(img/navibar.jpg);[/I][/B] Dieser Befehlt sagt deine Div das er folgendes Bild haben soll. ----------------------------------------------------------------------------------- [B][I]background-repeat: no-repeat;[/I][/B] Mit diesem Befehl kannst du einstellen ob sich das Bild wiederholen soll. ----------------------------------------------------------------------------------- [B][I]width: 1024px;[/I][/B] Dieser Befehl zieht dein Div in die breite. ----------------------------------------------------------------------------------- [B][I]height: 30px;[/I][/B] Dieser Befehl zieht dein Div in die Länge (nach unten) ----------------------------------------------------------------------------------- [B][I]font-size: 14px;[/I][/B] Dieser Befehl ändert die Schrift größe des Textes in diesem Div. ----------------------------------------------------------------------------------- [B][I]text-align: center;[/I][/B] Setzt dein Text in die Mitte. ----------------------------------------------------------------------------------- [B][I]font-weight: bolder;[/I][/B] Dieser Befehl macht deine text [B]DICK[/B] ----------------------------------------------------------------------------------- [B][I]line-height: 25px;[/I][/B] Mit diesem Befehl kannst du deine Text nach unten und pben bewegen. (z.B 10px) ----------------------------------------------------------------------------------- [B][I]overflow: auto;[/I][/B] Dieser Befehl sagt deine Div wenn zu viel text drauf ist, das er automatisch Scrolen soll.
