Hallo,
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 ist das Navi "Oben".
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>
So nun haben wir schon mal das Grundgerüst der Homepage.
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;
}
Damit haben wir nun ein Bild eingefügt und es in die mitte gemacht
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;
}
Dort ahben wir jetzt das "header" Bild eingefügt und es wieder in die mitte gesetzt.
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;
}
Nun haben wir das "navi2" in die mitte gemacht, und die Größe von Bild und Text festgelegt.
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;
}
Hier haben wir nun statt einem background-image, eine background-color festgelegt
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;
}
Nun haben wir das "navi2" in die mitte gemacht, und die Größe von Bild und Text festgelegt.
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>
Startseite | Startseite2 | Startseite3 | Startseite4 | Startseite5 | Startseite6 wird auf der Homepage dann ausgegeben !
Das sind deine
Button.
Nun gehen wir in den
<div id="header"></div>
Code:
<div id="header">
</div>
Denn lassen wir so, da wir den schon mit CSS bearbeitet haben.
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>
ist genau das gleiche wie "navi".
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>
Nun komen wir zu dem
<div id="footer"></div>
Code:
<div id="footer">
Copyright © 2011 *DeinName* - All Right Reserved
</div>
Dein Copyright und Dein Name.
So gleich sind wir schon fertig.
Nur noch das Impressum machen.
Code:
<center><a href="index.html">Impressum</a></center>
Das schreibt ihr unter
<div id="footer"></div>
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
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.
CSS
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.
![[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°
