Den Aufbau einer Seite gestalten

Definition eines Navigations- und Inhaltsbereiches

Auf einer einfachen Webseite wie dieser hier, gibt es einen Bereich für das Menü, also die Navigation und einen Bereich für den Inhalt der Seite.
In HTML 5 sind hierfür bestimmte <div>-Tags definiert, die eine semantische Bedeutung haben. In der HTML-Datei wird die Navigation in <nav></nav> eingeschlossen.
Genauso steht das <section>-Tag für einen Bereich, in dem sich ein inhaltlich abgeschlossener Bereich der Seite befindet.

Auf html-seminar.de kannst du nachlesen, welche weiteren HTML-Tags es zur inhaltlichen Strukturierung der Seite gibt.

Diese <nav>- und <section>-Tags usw. sind das gleiche wie Divisions, mit dem Unterschied dass zusätzlich in dem Tag schon die Information steckt, welche Funktion dieser Bereich hat: Inhalt, Menüführung, Randbemerkung ...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="seitenaufbau.css" type="text/css" 
	rel="stylesheet">
<title>Seitenaufbau Beispiel</title>
</head>
<body>
	<nav>Hier kommt das Menü rein</nav>
	<section>Inhalt und noch mehr Inhalt ... 
		Inhalt und noch mehr Inhalt ... 
	</section>
</body>
</html>				
				

Im CSS-File kann dann definiert werden, wie der nav- und section-Bereich dargestellt werden sollen. Z.B. für diese Seite wurden in seitenaufteilung.css definiert:

nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 150px;
	background-color: #ffeeee;
	height: 100%;
	
}
 
und
section {
	position: absolute;
	right: 0;
	top: 0;
	margin-left: 150px;
	background-color: #efefef;
	padding: 10px;
	height: 100%
}

position: absolute; sorgt dafür, dass die Elemente absolut positioniert werden, nicht relativ zu etwas anderem.
Der Navigationsbereich ist also absolut oben (top: 0;) und absolut links(left: 0;).

Für den Navigationsbereich ist eine Breite festgelegt: width: 150px; und damit der Navigationsbereich nicht in den Inhaltsbereich hineinragt, ist für den Inhalt eine linke Grenze (margin-left: 150px;) definiert, genau so breit wie der Navigationsbereich.

Übung 4

Baue diese Seite hier nach.

Übung 5:

Baue auch diese Seite nach.

Übung 5a:

Schreibe eine HTML- und eine separate CSS-Datei. Definiere zwei Divisions, beide 100 px hoch und breit. Positioniere eine Box oben links, die andere unten rechts in der Fensterecke.

Seitenbreite begrenzen

Da es sehr, sehr breite Monitore gibt, soll die Seite so gestaltet sein, dass auch bei Vollbild die Zeilen nicht zu lang werden und der Inhalt lesbar bleibt. Dies wird erreicht, indem um die Navigations- und Inhaltsbereiche ein weiterer Bereich "seite" gelegt wird.
Definition im CSS-File:

#seite {
	position: relative; 
	margin: 0 auto; /* mittig */
	width: 600px;
	background-color: #ddddff;
}	

Hier wird eine maximale Breite der Seite width: 600px; festgelegt.
Wichtig ist hier die Deklaration position: relative;
Dies bedeutet, dass das Element relativ zu der Position platziert wird, an der der Browser das Element im normalen Fluss der Elemente platzieren würde. Wenn die Eigenschaften top, left, bottom, right nicht definiert sind, hat dies als einzige Auswirkung, dass Elemente, die sich in dem relativ positionierten Element befinden, auch relativ zu diesem positioniert werden. Das sind hier die Container <nav> und <section>! Diese werden jetzt nicht mehr an den Fensterrändern ausgerichtet sondern an dem Div-Container "seite".

Beispiele zum Verständnis der Positionierung

Übung 6
Baue diese Seite nach. Der blaue Rand ist übrigens der Desktop und soll die Breite des Browser-Fensters andeuten.
Übung 7 - "Portallayout"
Baue ein sogenanntes "Portallayout". Das heißt, oben auf der Seite gibt es einen Bereich mit einem Logo und links und rechts gibt es weitere Bereiche, in denen sich Menüs befinden, bei kommerziellen Seiten auch Werbung oder anderes. Hier kannst du ein Beispiel sehen.
Übung 8 - Anwendung auf eine reale Webseite

In dieser ZIP-Datei findest du einige Dateien der Webseite individuellesfoerdern.de. Entpacke die ZIP-Datei (Rechtsklick, Entpacken). Die zugehörige CSS-Datei design.css fehlt. Erstelle eine solche Datei und verleih der Seite ein schönes Aussehen.

Lösungen der Übungen

Weiter mit Pseudoklassen