[Tutorial]Wie schreibe ich eine Homepage?

Page 1 of 2 1 2
02/21/2012 13:39 Jay Niize#1
Hallo liebe Elite Deutschlands.

Heute mal wieder mit einem kleinen Tutorial, wie ihr eure eigene kleine Homepage coden könnt. Fangen wir mal an. Vorerst werde ich alles in HTML schreiben, später mit den Funktionen in PHP.

Inhalt:

1. Die Idee
2. Grob Umsetzen
3. Verfeinern
4. Das Menü
5. Schlusswort


1. Die Idee

Zuerst benötigen wir einwenig Fantasie um uns ein einfaches Design auszudenken. Ihr könnt Paint benutzen um eure Vorstellungen wahr werden zulassen. Es sollte nur ein grober Einblick sein. Das könnte z.B so aussehen :
[Only registered and activated users can see links. Click Here To Register...]

2. Grob Umsetzen

Zuerst erstellen wir uns ein Stylesheet, eine *.css Datei. Diese könnt ihr beliebig nennen, ich nenne sie jetzt einfach mal style.css.

Fangen wir jetzt mal an. Also wie ihr oben gesehn habt, wollen wir den Hintergrund in einem netten Dunkelgrau haben. Ich habe den Wert herausgesucht, dieser ist : #464646. Dieser ist der allgemeine Hintergrund. legen wir ihn doch schonmal fest.

Code:
body //Ganze Seite (vordefiniert)
{ // Öffnen
background-color:#464646; // Hintergrund-Farbe: FARBCODE (Dunkelgrau)
}// Schließen
Der Hintergrund ist schonmal dunkelgrau, sehr schön. :)

Jetzt wollen wir noch den Contenthintergrund erstellen. Dieser ist eigentlich eine normale Box die wir nochmal in drei andere Bereiche unterteilen. Erstellen wir ersteinmal die Hauptbox.
Code:
body //Ganze Seite (vordefiniert)
{ // Öffnen
background-color:#464646; // Hintergrund-Farbe: FARBCODE (Dunkelgrau)
}// Schließen

#Hauptbox // Die Box (neudefiniert)
{// Öffnen
width: 900px;
position:relative; // Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben
left:50%; //Mittig
margin-left:-400px;//400px vom Rand entfernt
}// Schließen
Jetzt ist unsere Contentbox mittig, aber immer noch oben. Deshalb sollte man ein margin einbauen, um es ca. 200 Pixel von oben zu entfernen. Also fügen wir in unseren Quellcode noch margin-top:200px; in die Hauptbox. (noch vor dem }).

Uns fällt auch auf, das wir auf dem "Ideenblatt" die Ecken abgerundet haben. Also runden wir jetzt die Ecken ab. Zuerst mal brauchen wir einen Rahmen, den wir überhaupt "biegen" können. Also benutzen wir den Befehl border-radius:5px; um einen 5 Pixel Dicken Rahmen anzufertigen. Jetzt gibt es zwei Varianten um ihn zu biegen. Einmal mit khtml, welcher auf dem IE läuft und noch die MOZ-Variante, welche auf anderen Browsern gut läuft. Wir brauchen beide um möglichst viele Browser zu unterstützen.
Code:
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
Nun sieht unser Quellcode also so aus :

Code:
body 
{ 
background-color:#464646; 
}

#Hauptbox 
{
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
Jetzt unterteilen wir unsere Hauptbox in 3 Abschnitte. Den Header, den Inhalt & die Info. Die unterteilten Bereiche nennt man auch Klassen.

Erstellen wir uns nun die Klasse Header. Dieser soll auch rund sein und ein Hellgrau hervorbringen. Im Endeffekt ist es egal, da man dort meistens das Logo unterbringt. Wenn aber der Header genauso rund ist, wie die Box sieht das leicht verwirrend aus, also biegen wir es um 10Pixel weniger. Nach unten hin soll es nicht gleich an dem Inhalt anstoßen, also bauen wir noch eine Funktion mit ein, welche 20 Pixel nach unten freilässt. -> Margin-bottom!

Code:
.header
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
Nun brauchen wir noch den Inhalt, welcher, wie oben im "Ideenblatt" gezigt wurde, neben der Info links ist. Also brauchen wir aufjeden fall ein Float, welches nach links verweist. Zudem brauchen wir noch die Breite, da die Rechte Hälfte auch noch was braucht. 250 Pixel sollten für die Info reichen. Also 900px - 250px = 650px. Die restlichen Einstellung könnt ihr von oben übernehmen.

Code:
.inhalt
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
Für die Info können wir das jetzt vom Inhalt übernehmen, bloß die 250 Pixel anpassen und es auf rechts schieben.

Code:
.info
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}
Nun sollte der Gesamte Css Code so aussehen :
Code:
body 
{ 
background-color:#464646; 
}

#Hauptbox 
{
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
.header
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
.inhalt
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
.info
{
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

Jetzt kommen wir zum HTML (später PHP)

Wir brauchen einen Kopf, der Informationen enthält. Der Titel heißt dort dann z.B "Zeraki Tutorial". Auch müssen wir im Kopf angeben wovon wir den "Style" haben. Diesen haben wir ya von unserer Css Datei. Und es ist ein Style, keine Funktion also brauchen wir für den Ref "Stylesheet". Auch ist es kein Javascript oder ähnliches, nein, es ist Css, also brauchen wir dort "text/css" Unser Kopf, also Head-Bereich sieht also so aus :

HTML Code:
<head>
<title>Zeraki Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Jetzt brauchen wir den Body Bereich, den wir vorhin ya mit der Farbe Dunkelgrau versehen haben. In diesem Bereich ist nun unsere Box, mit den 3 Klassen. In dieser Box sind die Klassen, deshalb müssen wir auch die Klassen in die Box schreiben. Das sähe so aus. Am Schluss, wie gehabt unser Copyright.

HTML Code:
<body>

<div id="Hauptbox">

<div class="header">
Hier kommt der Header rein. Egal ob Bild oder ähnliches.
</div>

<div class="inhalt">
Hier der Inhalt, oder die News, je nachdem.(:
</div>
<div class="info">
Dort ist die Info.
</div>
Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten. (Euer Copyright)
</div>

</body>
Glückwunsch! Ihr habt das "Grundgerüst" selbst programmiert. So sieht es bei mir aus :
[Only registered and activated users can see links. Click Here To Register...]

3. Verfeinern
Da das noch nicht wirklich wie eine Homepage aussieht, geben wir der Homepage noch einen kleinen Feinschliff.

Wir sehen, es ist gar kein Rand da, sondern alles nur so eklig draufgeklatscht. Das ändern wir natürlich mit Padding. Mit 20 Pixel Abstand sollte es funktionieren. Also schreiben wir in unsere Hauptbox das hier : padding:20px;

In den anderen Boxen ist es auch so nah am Rand, also fügen wir auch dort das Padding ein, aber mit 10 -15 Pixeln, da es sonst zu breit wird.
Jetzt sieht es doch schon ordentlicher aus. Was aber doch noch fehlt ist eine gescheite Schriftart, Arial. Doch wenn wir einfach nur Arial nehmen ist sie zu groß. Also schrumpfen wir die Größe auf 10-12px. Das fügen wir in unseren Body-Tag :
Code:
font-size:12px;
font-family: "Arial", Verdana, sans;
Nun fügen wir das Copyright unten mal in die Mitte, da es sonst etwas "unbeholfen", will ich sagen, aussieht.
Also Centern wir es mit, wer hätte es gedacht <center>.

Das sieht in unserer HTML Datei dann so aus :
HTML Code:
<center>Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten.</center>
Die Überschriften wollen wir auch noch ändern, da diese uns nicht gefallen. Wir legen die h1 auf 17px fest und gehen dann immer einen 2px Schritt nach unten.
Code:
h1 {
font-size:17px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h4 {
font-size:11px;
}
h5 {
font-size:9px;
}
h6 {
font-size:7px;
}
Jetzt sieht die Überschrift auch annehmbar aus.

Was wir jetzt reinhauen ist ein kleines Feature, damit ihr bei viel Text nicht 3 Kilometer lange Seiten habt. Es ist eine Art Textarea (große Textbox) welche wir modifizieren. Es wird wie oben in einer Div geschrieben,also nenne ich sie mal Scrolldiv.

Code:
.scrolldiv {                             
height:400px;                       
overflow:auto;                       
border: 3px  #000000;          
padding:8px;                         
color:black;                      
background-color:#B4B4B4;                   
}

Sieht schon gut aus. Jetzt braucht ihh nur noch einen Header (Bild), einen Server & News und dann könnt ihr aus diesem Thread, viele Funktionen einbauen :
[Only registered and activated users can see links. Click Here To Register...]

Style.css
Code:
body 
{ 
font-size:12px;
font-family: "Arial", Verdana, sans;
background-color:#464646; 
}

#Hauptbox 
{
overflow:auto;
padding:20px;
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
.header
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
.inhalt
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
.info
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

h1 {
font-size:17px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h4 {
font-size:11px;
}
h5 {
font-size:9px;
}
h6 {
font-size:7px;
}


.scrolldiv {                             
height:400px;                       
overflow:auto;                       
border: 3px  #000000;          
padding:8px;                         
color:black;                      
background-color:#B4B4B4;                   
}
Index.html :
HTML Code:
<head>
<title>Zeraki Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="Hauptbox">

<div class="header">
Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein 

Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein 

Bild, oder ein Slogan.<p>
</div>

<div class="inhalt">
<h1>.:News - Flyff Server:.</h1>
<div class="scrolldiv">
Langer Text.
</div>
</div>
<div class="info">
<h1>Info</h1><hr> Infos kommen hierrein, bro!
</div>
<center>Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten.</center>
</div>

</body>
Idee :
[Only registered and activated users can see links. Click Here To Register...]

Ergebnis :
[Only registered and activated users can see links. Click Here To Register...]

Und so kann man dann mit den PHP Skripten aufbauen.
4. Das Menü
Quote:
Originally Posted by Vacation.
Hi :>
Erstmal: Danke, sehr nice Tutorial! :3 Das einzigste was fehlt, ist das Menü. Ja ich weis, dass wurde schon gepostet, dass das fehlt ;) So jetzt meine Frage: Fügst du das noch ein, wenn du Zeit hast? Weil hab' alles mögliche probiert, bin eindeutig zu dämlich :D Das ist dann immer alles verschoben usw.
Danke schonmal im vorraus ;D
Das Menü ist eigentlich recht simpel aufgebaut. Das Menü an sich besteht aus reinem HTML, nur das Design werden wir mit CSS machen. Fangen wir an :
Da unser Menü nicht so SP-Like werden soll, machen wir ein recht simples Menü, welches auch zum Design passt.
HTML Code:
<a href="LINK">TEXT</a>
So sieht ein normaler Link aus, welchen wir auch in einem Menü finden. Nun werden wir mehrere Links horizontal erstellen & mit dem | Zeichen trennen. Das könnte dann so aussehen :

HTML Code:
<a href="#">HOME</a>|<a href="#">REGISTER</a>|<a href="#">RANK</a>|<a href="#">TEAM</a>|<a href="#">FORUM</a>
Wenn wir dies jetzt in unsere Index.html, zwischen dem Headerdiv und dem Inhaltsdiv, werden wir schnell merken, dass es ein wenig Buggy aussieht, da das Menü nun über der Infodiv ist. Also centern wir es, damit es in der Mitte steht.

HTML Code:
<center>
<a href="#">HOME</a>|<a href="#">REGISTER</a>|<a href="#">RANK</a>|<a href="#">TEAM</a>|<a href="#">FORUM</a>
</center>
Nun ist das Menü eigentlich schon funktionsfähig, aber das Design sieht schrecklich aus, hässliches blau. Wir ändern es also in unserer css-Datei so, dass die Immer die gleiche Farbe haben, außer sie werden mit der Maus berührt. Es soll natürlich nur ein Text sein und keine Verzierungen, wie Unterstrichen oder Fett. Also Text-decoration:none;

Code:
a:link{
color:#464646;
text-decoration: none
}
a:visited{
color:#464646;
text-decoration: none
}
a:hover{color:#B4B4B4;
text-decoration: none
}
a:active{color:#464646;
text-decoration: none
}
Jetzt sieht es doch schon annehmbar aus. Was uns aber stört ist, dass zwischen den Trennlinien und den Links gar kein Platz ist, was etwas, ich sage mal beschämend aussieht. Also schmieren wir ein bisschen, was den Code angeht und erstellen eine neue Div in eurer Css-Datei. Meine sieht so aus :

Code:
#menu {
word-spacing: 3px;
}
Und das Menü fügt ihr wie oben schon dutzende mal erwähnt zwischen <div id ="menu"> und </div> ein.

So und um das Chaos noch zu vervollständigen, legt ihr in eurer CSS-Datei im Menüdiv noch float:right; fest, und löscht in eurer HTML Datei das Center. Jetzt sieht es doch annehmbar aus, nicht?

CSS CODE :
Code:
body 
{ 
font-size:12px;
font-family: "Arial", Verdana, sans;
background-color:#464646; 
}

#Hauptbox 
{
overflow:auto;
padding:20px;
background-color:white;
width: 900px;
position:relative; 
left:50%; 
margin-left:-400px;
margin-top:200px;
border-radius: 5px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
}
.header
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
margin-bottom:20px;
}
.inhalt
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:600px;
float:left;
}
.info
{
padding:10px;
background-color:#B4B4B4;
border-radius: 5px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
width:250px;
float:right;
}

h1 {
font-size:17px;
}
h2 {
font-size:15px;
}
h3 {
font-size:13px;
}
h4 {
font-size:11px;
}
h5 {
font-size:9px;
}
h6 {
font-size:7px;
}


.scrolldiv {                             
height:400px;                       
overflow:auto;                       
border: 3px  #000000;          
padding:8px;                         
color:black;                      
background-color:#B4B4B4;                   
}


a:link{
color:#464646;
text-decoration: none
}
a:visited{
color:#464646;
text-decoration: none
}
a:hover{color:#B4B4B4;
text-decoration: none
}
a:active{color:#464646;
text-decoration: none
}

#menu {
float:right;
word-spacing: 3px;
}
HTML CODE :
HTML Code:
<head>
<title>Zeraki Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="Hauptbox">

<div class="header">
Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein 

Slogan.<p>Hier komtm der Header hin, sprich ein Bild, oder ein Slogan.<p>Hier komtm der Header hin, sprich ein 

Bild, oder ein Slogan.<p>
</div>

<div id="menu">
<a href="#">HOME</a> | <a href="#">REGISTER</a> | <a href="#">RANK</a> | <a href="#">TEAM</a> | <a 

href="#">FORUM</a>
</div>

<div class="inhalt">
<h1>.:News - Flyff Server:.</h1>
<div class="scrolldiv">
Langer Text.
</div>
</div>
<div class="info">
<h1>Info</h1><hr> Infos kommen hierrein, bro!
</div>
<center>Copyright &copy; Zeraki 2012. Alle Rechte vorbehalten.</center>
</div>

</body>
Jetziges Ergebnis :

5. Schlusswort
Ich hoffe es hat euch gefallen + geholfen. Bei fragen einfach Feedback + Frage geben und dann passt des.

~Greetings
02/21/2012 13:48 Deda94#2
Nettes Tutorial, jetzt nurnoch Erweitern und es wäre Optimal :)
02/21/2012 13:48 Lucky´s#3
Sehr schönes Tutorial!

MfG Lucky´s
02/21/2012 14:16 Rakinzon#4
Gefällt mir, auch für die die nicht so fit in Html und CSS sind
02/21/2012 14:27 Jay Niize#5
@Toxic : Inwiefern Erweitern? Neue Funktionen? Skripts? Was denn?
02/21/2012 15:08 dennisdra#6
Vielleicht meint er die inkludierung Von php skripten etc
02/21/2012 15:58 ©ross#7
wenn ich an dein erstes tut denke... wow :) hast dich gemacht^^

Aufgrund dieser Vorlage, bzw aufgrund dieses HTML-Gerüstes kann man viel bewerkstelligen.

Klar, manche werden sagen das es eine "oft gesehenes" Struktur ist aber das ist nebensächlich da jeder das Gerüst selbst noch modifizieren kann.

Für HTML/PHP Quereinsteiger könntest du noch Links anhängen wie zb zu [Only registered and activated users can see links. Click Here To Register...] oder aber [Only registered and activated users can see links. Click Here To Register...]
Ebenso zu CSS-Tutorialen (spez: -moz_* / -khtml_* etc also den Browserspezifizierungen)

Finde es ehrlichgesagt das jemand, neben dem sinnfreien geflame hier auf epvp, noch etwas nützliches für unsere Neueinsteiger zeigt.


So ihr dürft diesen post nun mit steinen bewerfen das ich quark rede und es kacka ausschaut ABER es ist meine Meinung und nicht die eure ;)
02/21/2012 16:06 Deda94#8
Quote:
Originally Posted by .Zeraki' View Post
@Toxic : Inwiefern Erweitern? Neue Funktionen? Skripts? Was denn?
Mehr in PHP eingehen, paar Skripte als Beispiele.
02/21/2012 16:18 ©ross#9
@Toxic: Vom prinzip her ist es ja:
Script A in datei B unter /script/
in der index.php (hier muss bzw sollte die dateiendung geändert werden)
an der stelle wo man die ausgabe haben möchte ein:
PHP Code:
include("/script/b.php"); 
und fertig währe es.

Aber ich weis was du meinst bzw worauf du hinaus möchtest^^ Sollte nur ein beispiel sein wie man es sich als anfänger logisch nachvollziehbar machen kann
02/21/2012 16:20 yannickFlyff#10
Sollte geclosed werden.

Was ist der Unterschied zwischen einer Flyff homepage und einer Metin2 Homepage? Rein vom HTML / CSS / PHp Code her? Gibt keinen!

Gehört in den Web Programmierungsbereich.
02/21/2012 16:57 Jay Niize#11
@Yannick : Das hier ist nur nen normaler Thread. Schau mal im Main Forum nach, da is nen Thread wie man die SuFu benutzt & der is sticked Oo

@Topic : Falls ich demnächst mal Zeit habe, werde ich auch auf die PHP Skripte näher zugehen. Danke schonmal für euer Feedback.

btw. Ich seh' grad ich hab des Menü vergessen hab. ;p
02/21/2012 18:46 .Akiro™#12
Super Tutorial!

Mfg .Akiro™.
02/21/2012 23:28 .Twiz#13
Wirklich gutes Tutorial , schön dass sich jemand noch so die Mühe für etwas gibt ;)
02/22/2012 00:40 xFruchti.#14
Mal jmd der nix releast oder was macht um anzugeben ;D

Villt könntes du das mit dem #slider u.s.w zeigen das ist doch auch nicht schwer ;)
02/23/2012 09:57 Jay Niize#15
So.. Ich hab das Menü mal mit rein geschrieben, ich werde bald auch noch ne kleine Einführung in PHP machen. Bitte Feedback geben.

@Tremby : Der Slide bezieht sich ja hauptsächlich auf Javaskript, was ich nur in kleinen Mengen behersche.
Page 1 of 2 1 2