Tutorial zur Simplen Homepage by enkor16

enkor16 · 15. Juni 2011

Hallo,

Wollte mich mal ran setzten und wie versprochen ein Homepage Tutorial machen.
Fangen wir mal an

Demo Homepage: http://www.djcuebaseexample.de.gp/
Die Homepage die ihr sehr: http://onemilliondj.lima-city.de/
Habe bei der Homepage noch ein Hintergrund bild gemacht und den Main auch ncoh ein Bild verpasst
damit ihr sehen könnt was ihr alles so machen könnt...

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.

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;
}

Alles anzeigen

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;
}

Alles anzeigen

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>

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.
http://www.megaupload.com/?d=J36WD7WA

HTML und CSS Befehle der 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.

Alles anzeigen

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.

Alles anzeigen

enkor16 · 16. Juni 2011

Hallo,

Sorry erstmal wegen Doppel poste.
habe diese Tutorial auch in Epvp gepostet und
mir wurde gesagt das es nicht grade sehr gut ist zum lernen da
man die befehle ja nicht kennt.

Da hab ich mcih eben mal ran gemacht und alle Befehle mit Effect
aufgelistet.

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.

Alles anzeigen

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.

Alles anzeigen

Bäumchen · 16. Juni 2011

Kannst du und ne Beispielseite zeigen?

Aber sehr nettes Tut.

mfg Baum

enkor16 · 16. Juni 2011

Demo Homepage: http://www.djcuebaseexample.de.gp/

Danke
Sowas z.B kann man machen und viel mehr.
Kannst auch PHP ncoh einbauen und so
aber PHP bin ich ncoh am lernen...

Mfg

trytokillme · 16. Juni 2011

Sieht sehr gut aus (finde ich hab mal drüber geguckt und versuch mal was zu machen)

könntest du mal die seite so wie so dort ist online bringen?

enkor16 · 16. Juni 2011

trytokillme schrieb:

Sieht sehr gut aus (finde ich hab mal drüber geguckt und versuch mal was zu machen)

könntest du mal die seite so wie so dort ist online bringen?

kann ich machen.
Suchen eben ein Webhoster bei dem ich noch nicht angemeldet bin

Mfg

Auf wunsch die oben angezeigt Homepage auf ein Server geladen

http://onemilliondj.lima-city.de/

Mfg

Edit:
Lob an euch alle und Forum.stagetwo
hier wird man wenigstens Nett behandelt net wie bei Epvp
da bekommt man nur blöde antworten

Esamu · 16. Juni 2011

Dann kommt jetzt halt ein blöder Kommentar. Zu viel Lob ist nicht gut.
Wenn du schon versuchst, einen Guide zu schreiben, dann auch bitte mit korrektem HTML. In deinem Code fehlt der komplette Head-Teil mit metas, Encoding und son Kram.
Und die Liste der Befehle ist auch ziemlich lustig, da fehlt eigentlich alles und du sagst, du hättest alle Befehle aufgelistet lol.
Alles in allem ist jedes Tutorial, das man bei Google findet, besser und vollständiger.
Bei SelfHTML sollte man auch alle Befehle finden.

take · 16. Juni 2011

Hab es nur kurz überflogen - weil ich muss jetzt schlafen (fix und fertig)

Ich finde du verdienst ein Lob für die Mühe die du gemacht hast.

Kannst du bei den "Codes" die bb-codes entfernen?

Ansonsten: ich editier...wenn ich fertig geguckt hab^^

Casi0 · 16. Juni 2011

meine buttons funktionieren nicht.. woran kann es liegen ?

meine .css

Spoiler anzeigen

Code

#navi {
margin: auto;
background-image: url(img/navibar.jpg);
background-repeat: no-repeat;
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}
#header {
margin: auto;
background-image: url(img/header.png);
background-repeat: no-repeat;
width: 1024px;
height: 240px;
}
#navi2 {
margin: auto;
background-image: url(img/navibar.jpg);
background-repeat: no-repeat;
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}
#main {
margin: auto;
background-color: #C0C0C0;
width: 1024px;
height: 600px;
overflow: auto;
}
#footer {
margin: auto;
background-image: url(img/navibar.jpg);
width: 1024px;
height: 30px;
font-size: 14px;
text-align: center;
}

Alles anzeigen

Html

Spoiler anzeigen

HTML

<!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>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="navi">
<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>  
</div>
<div id="header">
</div>
<div id="navi2">
<a href="index.html">Facebook</a>  |  
<a href="index.html">Twitter</a>  |  
<a href="index.html">YouTube</a> 
</div>
<div id="main">
<div id="main"> Hier kommt dein Text rein für News, Videos, Impressum etc !</div>
</div>
<div id="footer">
</div>
<center><a href="index.html">Impressum</a></center>
</body>
</html>

Alles anzeigen

enkor16 · 16. Juni 2011

Casi0 schrieb:

meine buttons funktionieren nicht.. woran kann es liegen ?

meine .css

Spoiler anzeigen

Code

#navi {

margin: auto;

background-image: url(img/navibar.jpg);

background-repeat: no-repeat;

width: 1024px;

height: 30px;

font-size: 14px;

text-align: center;

}

#header {

margin: auto;

background-image: url(img/header.png);

background-repeat: no-repeat;

width: 1024px;

height: 240px;

}

#navi2 {

margin: auto;

background-image: url(img/navibar.jpg);

background-repeat: no-repeat;

width: 1024px;

height: 30px;

font-size: 14px;

text-align: center;

}

#main {

margin: auto;

background-color: #C0C0C0;

width: 1024px;

height: 600px;

overflow: auto;

}

#footer {

margin: auto;

background-image: url(img/navibar.jpg);

width: 1024px;

height: 30px;

font-size: 14px;

text-align: center;

}

Alles anzeigen

Html

Spoiler anzeigen

Code

Titel

Startseite |

Startseite2 |

Startseite3 |

Startseite4 |

Startseite5 |

Startseite6 |

Startseite7

Facebook |

Twitter |

YouTube

Hier kommt dein Text rein für News, Videos, Impressum etc !

Copyright © 2011 *DeinName* - All Right Reserved

Impressum

Alles anzeigen

Was meinst du mit funktionieren net?
Bei mir gehen die^^

die button sind halt alle mit index.html belegt

Alles anzeigen

trytokillme · 16. Juli 2011

Bei mir sind die zeilen umbrüche sehr groß, woran liegt das? will das es wie hier ist also beispiel:

Blablabla
blalablblabla
blablalblaslgfaslfgasldfldlfgsaldgfsaldgdgfadssg
asdfgdgsadsafgasd
aad
sadfgsadg

und nicht so

sdfgsdffgsdfsdf

sdffgsdgfsdgssssssshhh

sfsertsetsfsd

sdfsa

guck hier:
http://95.223.222.5/project-valentine/news_de.html

Awesome · 16. Juli 2011

Vielleich sind in der *.css datei die Divs zu deklariert, dass sie einen zeilenumbruch schon machen bzw. platzt lassen
Notfalls ein paar <br> löschen und schauen wie es dann ausschaut.

trytokillme · 16. Juli 2011

ja habs gefunden danke !

Teilen