Fr34k
Ah okay... das mit dem Endergebnis kannst du streichen ;) war wohl gleichzeitig mit deinem Edit, sorry :)
am 18.09.2008 um 17:13 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
5x bewertet
Hallo.
Dieses Tutorial ist aus der Wishlist und ich hoffe es beantwortet die dort aufgeworfenen Fragen von simplyinsane.
-----------------------------------------------------------------------------
Ein Endless-Layout zu erstellen ist im Prinzip wirklich nicht schwer, doch empfiehlt es sich hier auf "PHP include" zurück zu greifen. So ist dann auch der Inhalt vom Layout getrennt.
Das Layout wird auf CSS basieren und sehr simpel gehalten sein!
Wir werden folgende Dateien erstellen:
header.php
footer.php
index.php
1.Schritt
Erstelle die drei Dateien "header.php", "footer.php" und "index.php".
2.Schritt
Öffne die Datei "index.php" mit dem Texteditor oder einem Programm deiner Wahl.
Schreibe nun folgende Zeilen:
Speichere die Datei.
3.Schritt
Öffne "header.php" und schreibe folgendes Grundgerüst:
4.Schritt
Öffne "footer.php" und füge die Tags ein, die noch nicht geschlossen sind - also:
5.Schritt
Nun beginnen wir mit der Erstellung eines einfachen Designs, das ohne Grafiken auskommt.
Bearbeite die header.php.
Gehe in den Kopf-Bereich, wir bearbeiten jetzt die CSS-Information.
[<style type="text/css">HIER</style>]
Setzt Abstand auf 0. Ist nicht unbedingt notwendig.
6.Schritt
Jetzt müssen wir nur noch im Body-Bereich der header.php die entsprechenden Div-Tags setzen.
Das geschieht schnell und einfach:
Wir haben in den DIV mit der Klasse "Content" unser Menü eingefügt, alternativ könnten wir das Menü auch über dem Content setzten.
WICHTIG: Der Div-Tag (class=content) ist noch nicht geschlossen! Wir müssen ihn in der footer.php schließen, sonder haben wir einen schweren Fehler in unserem HTML-Gerüst der gleich oder spätestens bei Erweiterungen zu unschönen Darstellungen führen kann.
7.Schritt
Um zu sehen, dass das Layout auch wirklich "endless" ist ... einfach in der index.php einen gaaaanz langen Text einfügen.
Wir sind FERTIG!
--> Hier könnt ihr das script ein wenig erweitert betrachtetn
Noch ein kleiner Hinweis:
Um weiter Unterseiten zu erstellen reicht es, wenn ihr eine neue php-datei mit dem gewünschten Namen erstellt und header und footer included :)
-----------------------------------------------------------------------------
* ich würde mir wünschen, dass es ein tut gibt bzw. eine liste, wo steht wie groß ein layout für ne bestimmte auflösung & bestimmten browser sein muss?
Ich denke, dass man diese Frage nicht einfach beantworten kann, da der tatsächliche Platz, an dem die Seiten dargestellt werden sehr variiert.
Das kann abhängen von:
* Betriebsystem und vorgenommene Einstellungen
z.B. Größe und Position der Windows-Taskleiste (oder anderes Betriebssystem)
* Browser
z.B. für Mozilla gibt es Styles, die den Browser optisch verkleinern; Suchmaschinen-leisten können aber auch Platz wegnehmen.
Ich ziehe von der bevorzugten Auflösung ~300px in der Höhe (sofern das Layout kein "Endless "ist) und ~200-250px in der breite ab. Genau sagen kann man es aber nie.
Ich kann aber folgenden Link sehr empfehlen:
Browsershots.org
Hier werden Screenshots, je nach gewünschter Einstellung, aus verschiedenen Betriebssystemen, Browsern und Bildschirmauflösungen erstellt. Es braucht etwas, bis alle Bilder erstellt und abrufbar sind.
Dieses Tutorial ist aus der Wishlist und ich hoffe es beantwortet die dort aufgeworfenen Fragen von simplyinsane.
-----------------------------------------------------------------------------
Ein Endless-Layout zu erstellen ist im Prinzip wirklich nicht schwer, doch empfiehlt es sich hier auf "PHP include" zurück zu greifen. So ist dann auch der Inhalt vom Layout getrennt.
Das Layout wird auf CSS basieren und sehr simpel gehalten sein!
Wir werden folgende Dateien erstellen:
header.php
footer.php
index.php
1.Schritt
Erstelle die drei Dateien "header.php", "footer.php" und "index.php".
2.Schritt
Öffne die Datei "index.php" mit dem Texteditor oder einem Programm deiner Wahl.
Schreibe nun folgende Zeilen:
<?php include 'header.php'; ?>
Hier kommt der Inhalt
<?php include 'footer.php'; ?>
Speichere die Datei.
3.Schritt
Öffne "header.php" und schreibe folgendes Grundgerüst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> /* Legt den Dokumententyp XHTML fest*/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
/* Legt die Art des Inhalts fest - wichtig für Umlaute */
<style type="text/css">
</style>
<title>Seitentitel</title>
</head>
<body>
4.Schritt
Öffne "footer.php" und füge die Tags ein, die noch nicht geschlossen sind - also:
</body>
</html>
5.Schritt
Nun beginnen wir mit der Erstellung eines einfachen Designs, das ohne Grafiken auskommt.
Bearbeite die header.php.
Gehe in den Kopf-Bereich, wir bearbeiten jetzt die CSS-Information.
[<style type="text/css">HIER</style>]
* {
margin:0;padding:0;
}
Setzt Abstand auf 0. Ist nicht unbedingt notwendig.
html, body {
margin: 0; padding: 0;
text-align:center; /*Zentrierung im IE*/
background-color:#333333;
color: white; /*Schriftfarbe*/
font-size: 12px; font-family:"Arial", Helvetica, sans-serif;
}
.content {
width: 500px; /*Breite des Bereichs, indem der Inhalt gezeigt werden soll */
margin: 10px auto; /*sorgt für horizontale Zentrierung und einem Abstand von 10px von oben*/
padding: 3px;
background-color: #999999;
border: 5px #000000 solid;
text-align:left; /*Ohne diese Angabe wäre der Text zentriert!*/
}
.menu {
width: 100%; height: 18px;
margin-bottom: 5px; /*Damit der Content nicht am Menü klebt*/
background-color: #323556;
}
.menu a {
margin-left: 4px; margin-right: 4px; /*Wir müssen Abstände nicht manuell eingeben*/
background-color: #3399FF;
border: thin #006C91 dotted;
color: navy;
text-decoration: none;
text-transform: capitalize;
}
.menu a:hover {
color: #FFFFFF;
}
6.Schritt
Jetzt müssen wir nur noch im Body-Bereich der header.php die entsprechenden Div-Tags setzen.
Das geschieht schnell und einfach:
<div class="content">
<div class="menu">
<a href="index.php" target="_self">Home</a>
</div>
Wir haben in den DIV mit der Klasse "Content" unser Menü eingefügt, alternativ könnten wir das Menü auch über dem Content setzten.
WICHTIG: Der Div-Tag (class=content) ist noch nicht geschlossen! Wir müssen ihn in der footer.php schließen, sonder haben wir einen schweren Fehler in unserem HTML-Gerüst der gleich oder spätestens bei Erweiterungen zu unschönen Darstellungen führen kann.
7.Schritt
Um zu sehen, dass das Layout auch wirklich "endless" ist ... einfach in der index.php einen gaaaanz langen Text einfügen.
Wir sind FERTIG!
--> Hier könnt ihr das script ein wenig erweitert betrachtetn
Noch ein kleiner Hinweis:
Um weiter Unterseiten zu erstellen reicht es, wenn ihr eine neue php-datei mit dem gewünschten Namen erstellt und header und footer included :)
-----------------------------------------------------------------------------
* ich würde mir wünschen, dass es ein tut gibt bzw. eine liste, wo steht wie groß ein layout für ne bestimmte auflösung & bestimmten browser sein muss?
Ich denke, dass man diese Frage nicht einfach beantworten kann, da der tatsächliche Platz, an dem die Seiten dargestellt werden sehr variiert.
Das kann abhängen von:
* Betriebsystem und vorgenommene Einstellungen
z.B. Größe und Position der Windows-Taskleiste (oder anderes Betriebssystem)
* Browser
z.B. für Mozilla gibt es Styles, die den Browser optisch verkleinern; Suchmaschinen-leisten können aber auch Platz wegnehmen.
Ich ziehe von der bevorzugten Auflösung ~300px in der Höhe (sofern das Layout kein "Endless "ist) und ~200-250px in der breite ab. Genau sagen kann man es aber nie.
Ich kann aber folgenden Link sehr empfehlen:
Browsershots.org
Hier werden Screenshots, je nach gewünschter Einstellung, aus verschiedenen Betriebssystemen, Browsern und Bildschirmauflösungen erstellt. Es braucht etwas, bis alle Bilder erstellt und abrufbar sind.
9 Kommentare
Nobi
Super erklärt, jup das mit externen css und margin zusammen zufügen also margin: 0px 4px 0px 4px; aber das ist nun nicht so wichtigfinde es super erklärt und gehst super auf die frage aus der wishlist ein - perfekt
am 18.09.2008 um 19:38 Uhr
Flügel
hm ... es freut mich, dass das tutorial gut ankommt
Ich habe es nur auf meinem Script erwähnt ... CSS ist nicht extern, damit jetzt nicht so viele Daten erstellt werden. Es gibt hier doch bestimmt ein Tutorial für so etwas
Und margin ... hm ... es stimmt, man könnte es zusammenfügen, aber wenn ich nur eine Angabe habe, finde ich es so übersichtlicher ... ^^'
am 18.09.2008 um 23:10 Uhr
Tolle Tut, voll punktzahl, aber eine fragen wofür steht den das hier:
Ich versteh das nicht mit den sternchen, wäre schön wenn du mir das sagen könntest.
LG Katjana
* { margin:0;padding:0; }
Ich versteh das nicht mit den sternchen, wäre schön wenn du mir das sagen könntest.
LG Katjana
am 21.09.2008 um 13:31 Uhr
Flügel
das ist ein "Universalselektor" ... (lol, was für ein Wort), er markiert Eigenschaften, die für -alle- Elemente gelten :)(--> http://de.selfhtml.org/css/formate/zentrale.htm)
am 21.09.2008 um 16:13 Uhr
Aso, dankeschön
am 21.09.2008 um 22:25 Uhr
pixelprinzessin
So gut ist das garniht, dass man den ganzen Head included... So hast du auf jeder Seite immer den gleichen Titel, und auch Meta-Tags sollten auf jeder Seite unterschiedlich sein.. Aber ansonsten schönes Tut!
am 09.12.2008 um 22:51 Uhr
Mauri
Das wollte ich schon immer mal wissen!Gut gemacht & weiter so
6 Sterne
am 30.04.2009 um 00:18 Uhr
Fr34k
Wäre schön, wenn du hierzu noch dein Endergebnis posten würdest, wie das mit den Divs dann aussehen würde.Wie immer schön erklärt (warum keine externe CSS, wenn du schon mit includen arbeitest?)
Zur zweiten Frage:
Das ist doch im Endeffekt ganz einfach, die kleinste Monitorgröße die heutzutage noch genutzt wird, ist die, mit der Auflösung 800x600 px...
Mit diesen Maßen mache ich eine neue Datei in meinem Grafikprogramm und in dem Rahmen bastel ich mein Layout (meistens ist das max. 700px breit), so kann man diese auch mit einem 15" Monitor problemlos anschauen!
CiAO Fr34k