Unser Konzept II

Wir geben bei Seitentitel root ein und speichern die Seite.

Für die weiteren Seiten wollen wir ein praktisches Typo3-Tool kennenlernen.
Wir wählen Web > Funktionen und klicken auf unsere Seite root.
Nebenbei bemerken wir noch folgendes: wenn wie mit der Maus über das Seitenicon von root fahren, wird uns die id der Seite eingeblendet. Diese Information ist an vielen Stellen von Typo3 wichtig, da intern die Seiten über diese id angesprochen werden und nicht über ihren Namen.

Gut, im Aktionsteil des BE sehen wir ein Eingabeformular - Ein Assistent zum Anlegen mehrerer Seiten. Diese werden in der Unterebene von root erzeugt.
Wir brauchen 2: oberes Menü und linkes Menü

Haben wir diese angelegt, so legen wir auf die gleiche Art die Unterseiten für diese beiden Seiten an.

Unser Seitenbaum sollte jetzt so aussehen:

Um noch ein wenig Übung mit dem Backend zu bekommen, wählen wir den Filebrowser (Datei > Dateiliste) und erstellen unter fileadmin folgende Ordner:

templates
css
images
fonts
scripts

Diese sind später die Ordner für die notwendigen Dateien unserer Site.

Da nicht alle das CSS sofort hinbekommen, habe ich hier ein Basic-Template. Es kann beliebig an eigene Wünsche angepasst werden.
Die template.html (kommt in den Ordner templates)

Die HTML-Vorlage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="../css/site.css" media="screen,projection">
<title></title>
 
</head>
 
<body>
 
<div id="komplett">
	<div id="header">Logo etc</div>
	<div id="menuline">Platz für das obere Menü</div>
	<div id="left">Das ist der linke Menüteil und darunter Platz für News etc.</div>
	<div id="content">Hier kommt unser Inhalt rein</div>
	<div id="footer">etwas Text in der Fußzeile</div>
</div>
 
</body>
</html>

und die site.css (kommt in den Ordner css)

Das Stylesheet

body {
	text-align:center;
	background:#fff;
}
 
#komplett {
	margin:30px auto;
	width:788px;
	text-align:left;
}
 
#header {
	height:70px;
	background: green;
}
#menuline {
	height:18px;
	color: #fff;
	background: blue;;
}
#left {
	width:140px;
	float:left;
	background:#ffffcc;
}
#content {
	float:left;
}
#footer {
	clear:left;
	background:#000;
	color:#fff;
	height:16px;
}