Logo Araneae-online

Seitenlayout

Mit einer Internetseite möchte man seine Inhalte zugänglich machen und ein Schlüssel dazu ist ein übersichtliches Seitenlayout. In den vielen Jahren in denen Webseiten veröffentlicht werden hat sich folgende Grundstruktur bewährt: Im oberen Teil einen Kopfteil mit Logo und Navigation, im linken Teil die Navigation und rechts daneben die Inhalte. Dieser Teil ist teilweise nochmal unterteilt. Wie in unserer Grafik zu sehen sind hier häufig die Werbung oder weiterführende Informationen untergebracht.

Ohne weitere Formatierungen wird Text aus einer .html Datei einspaltig und linksbündig dargestellt. Es gibt unterschiedliche Möglichkeiten um Text und grafische Elemente auf der Bildschirmseite zu positionieren. >> Tabellen, die Layout Funktionen der >> Cascading Style sheets oder >> Frames. Besonders bei Angeboten, die aus vielen einzelnen Seiten bestehen, geht leicht die Übersicht verloren. Dann bieten sich Methoden an die es erlauben einzelne Elemente wie Kopfteil oder Hauptnavigation nur einmal zu speichern und für beliebig viele Seiten zu verwenden. >> Frames bieten hierzu einige Möglichkeiten. Alle drei Methoden lassen sich übrigens auch parallel verwenden. Im dynamischen Web werden Inhalte für jeden einzelnen Seitenaufruf zusammengestellt ... voll automatisch, im Hintergrund und so flott, dass die Mehrzahl der Nutzer davon nichts merkt. Seit Jahren werden .cgi und Java verwendet und spätestens seit 2005 sind AJAX-Techniken die auch unter die Überschrift Web 2.0 fallen große Mode. Für alle drei genannten Verfahren ist noch kein Weg gefunden worden, um mit geringem Aufwand nicht nur für verschiedene Browser(versionen), sondern auch für verschiedene Betriebssysteme ansehnliche Ergebnisse zu produzieren (es ist aber möglich ...). Noch schwieriger wird es mit einem Kernbereich der Barrierefreiheit, der Verständlichkeit für Screenreader. Sie verlassen die Homepage PHP hat das Potenzial für noch viel mehr, funktioniert für die Erstellung von dynamischen Internetseiten aber sehr zuverlässig.

Seitenlayout mit Tabellen

Das Seitenlayout mit Tabellen war sehr weit verbreitet. Tabellen sind in jedem HTML Programm, aber auch ganz ohne spezielle Software zu erstellen. Nachteil ist, dass man mit zunehmender Komplexität des Layouts eine immer größer werdende Anzahl von ineinander verschachtelten Tabellen erhält. Dies hat nichts mehr mit Barrierefreiheit zu tun. Um das zu verdeutlichen haben wir hier mal den Quelltext einer solchen Seite dargestellt. Der rot markierte Code ist nur für die Tabellen-Struktur notwendig.

Um Elemente im Hauptfenster zu positionieren (eine Grafik oben rechts, oder eine Fußzeile), müssen weitere Tabellen eingefügt werden.

Beispiel

<!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" lang="de">
<head>
<title>Seitenlayout mit Tabellen</title>
<link href="../seitenlayout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" summary="Layout">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left" summary="Kopf">
<tr>
<td width="180">&nbsp;</td>
<td><img src="../../../grafiken/seitenlayout/kopf_php.jpg" alt="Logo" width="150" height="112" border="0"></td>
<td>
<div align="center">
<h1>Araneae-online.net</h1>
<h3>Ein Seitenlayout mit Tabellen</h3>
</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="Hauptnavigation">
<tr>
<td width="160" valign="top">
<!-- Hauptmenü -->
<ul>
<li><a title="Kundenbereich" href="../../../index.html" target="_self">Kundenbereich</a></li>
<li><a title="Entwürfe" href="../../../index.html" target="_self">Entwürfe</a></li>
<li><a title="Technik" href="../../../index.html" target="_self">Technik</a></li>
<li><a title="Über uns" href="../../../index.html" target="_self">Über uns</a></li>
<li><a title="Referenzen" href="../../../index.html" target="_self">Referenzen</a></li>
<li><a title="Kontakt" href="../../../index.html" target="_self">Kontakt</a></li>
<li><a title="Impressum" href="../../../index.html" target="_self">Impressum</a></li></ul>
</td>
<td valign="top">
<h2>Seitenlayout mit Tabellen</h2>
<p>Text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Klicken Sie hier um sich das Beispiel anzeigen zu lassen

Cascading Style Sheets

CSS wurden zuerst in erster Linie benutzt, um Text zu formatieren. Sie bieten inzwischen aber auch umfassende Layout - Optionen. Die Verwendung von CSS erlaubt die weitgehende Trennung von Inhalten/Text einerseits und Layout Anweisungen andererseits. CSS gestattet einzelne 'Container' mit verschiedenen Inhalten (Kopf, Text und Navigation) Pixelgenau auf der Bildschirmseite zu positionieren. Am Ende bekommt man klar strukturierte Seiten, die auch für einen Screenreader optimal zugänglich sind >> Barrierefreiheit. Zusätzlich hat man den Vorzug, dass die Inhalte/Texte von den Suchmaschinen indiziert und vollständig angezeigt werden können. Leider werden die Angaben in einer CSS Datei von Internet Explorer und Firefox unterschiedlich interpretiert, wordurch es meist unumgänglich ist eine separate CSS Datei für den Internet Explorer zu importieren. Der entzsprechende Code wird im Header eingefügt:

<!--[if IE]> <style type="text/css">@import url(css/basic_ie.css);</style> <![endif]-->

Wir möchten Ihnen hier ein Beispiel für ein zweispaltiges Seitenlayout mit Kopfteil vorstellen. Sie verlassen die Homepage weitere Informationen zum Thema Style sheets

HTML Code

<!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" lang="de">
<head>
<title>Seitenlayout mit Cascading Style sheets</title>
<link href="../style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<!-- Kopfnavigation -->
<div id="navigation_kopf">
<h1>Araneae-online.net</h1>
<h3>Ein Seitenlayout mit PHP</h3>
</div>
<!-- Hauptmenü -->
<div id="menue">
<ul>
<li><a title="Kundenbereich" href="../../../index.html" target="_self">Kundenbereich</a></li>
<li><a title="Entwürfe" href="../../../index.html" target="_self">Entwürfe</a></li>
<li><a title="Technik" href="../../../index.html" target="_self">Technik</a></li>
<li><a title="Über uns" href="../../../index.html" target="_self">Über uns</a></li>
<li><a title="Referenzen" href="../../../index.html" target="_self">Referenzen</a></li>
<li><a title="Kontakt" href="../../../index.html" target="_self">Kontakt</a></li>
<li><a title="Impressum" href="../../../index.html" target="_self">Impressum</a></li></ul>
</div>
<!-- Text -->
<div id="text">
<h2>Seitenlayout mit Cascading Style sheets</h2>
<p>Text</p>
</div>
</body>
</html>

CSS Datei

body {font-family: Verdana; background-image: url("../../../grafiken/seitenlayout/kopf_css.jpg"); background-repeat: no-repeat; background-position: 180px 15px; padding-right: 25px; padding-left: 25px }
p { color: #000; font-size: 10pt; font-family: Verdana; line-height: 14pt; text-align: left; margin-left: 30px }
h1 { color: #006; font-size: 22pt; font-family: Verdana; font-weight: bold; line-height: 16pt; text-align: center; margin-top: 30pt }
h2 { color: #006; font-size: 14pt; font-family: Verdana; font-weight: bold; line-height: 12pt; margin-top: 14pt }
h3 { color: #000; font-size: 12pt; font-family: Verdana; font-weight: bold; line-height: 12pt; text-align: center; margin-top: 5pt }
li { font-size: 10pt; font-family: Verdana; line-height: 13pt; text-align: left; list-style-type: none; margin: 0; width: 100% }
li a:link { color: #009; font-weight: bold; text-decoration: none; display: block; padding: 3px }
li a:visited { color: #999; font-weight: bold; text-decoration: none; display: block; padding: 3px; border-bottom: solid; border-left: solid }
i a:hover { color: #fff; font-weight: bold; background-color: #009; display: block; padding: 3px }
li a:active { color: #000000; font-weight: bold; text-decoration: none; display: block; padding: 3px }

#navigation_kopf /* Kopfnavigation */ { color: #000; font-family: Verdana; text-align: left; position: absolute; top: 10px; left: 350px; width: 350px }
#menue /* Hauptmenue */ { background-repeat: repeat; visibility: visible; margin: 0; padding: 10px 0; position: absolute; top: 140px; left: 0; width: 155px; height: 90%; border-color: #ccc }
#text { color: #000; position: absolute; top: 150px; left: 200px; width: 50%; height: auto }

Bitte klicken Sie hier um sich das Beispiel anzeigen zu lassen

Frames

Seitenlayout mit FramesBei den Frames wird eine Bildschirmseite in Rahmen unterteilt, in denen einzelne Dateien dargestellt werden. Die Inhalte jedes Rahmens können einzeln ausgetauscht werden. In unserem Beispiel braucht man nur eine Datei für den Kopf und die Navigation, während die Inhalte für das Textfenster unabhängig davon ausgetauscht werden können. Diese Technik ist eine schöne Sache und hat lange Zeit viele Anhänger gehabt. Für einen Screenreader ist der äußere Rahmen nicht sichtbar, für den Betreffenden sind nur die einzelnen Dateien vorhanden, die schwer in einen Zusammenhang gebracht werden können. Auch für die Suchmaschinen sind die Frames nur einzelne Dateien, die auch einzeln beim Suchergebnis aufgeführt und auch meist ohne Frames angezeigt werden. Sie verlassen die Homepage weitere Informationen zum Thema Frames.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Seitenlayout mit Frames</title>
</head>

<frameset rows="115,*" border="0">
<frame src="kopf.html" name="oben" noresize scrolling="no">
<frameset cols="190,*" border="0">
<frame src="navigation.html" name="links" noresize>
<frame src="text.html" name="rechts" noresize>
</frameset>
</frameset>
<noframes>

<body>
</body>

</noframes>
</html>

Bitte klicken Sie hier um sich das Beispiel anzeigen zu lassen

PHP

Seitenlayout mit PHPDynamische Seiten mit .php erlauben nicht nur den Inhalt von der Formatierung zu trennen, sondern zergliedern die Layout Strukturen. Die Datei mit dem Haupttext wird ergänzt, um Referenzen zu weiteren Dateien, die Kopf und Navigation enthalten. Die php Funktionen des Internetservers fügen die einzelnen Elemente zusammen und generieren daraus HTML Code (parsen), dieses Ergebnis wird an den Browser des Benutzers geschickt. Normalerweise werden nur Dateien mit der Endung .php geparst, damit der Server weiss, dass auch die .html Seiten ausgeführt werden sollen muss eine .htaccess Datei angelegt werden >> Beispiel. Für unterschiedliche Browser oder Screenreader ist der Unterschied zwischen einer normalen und einer dynamisch mit PHP zusammengestellten .html-Datei nicht erkennbar. Suchmaschinen verlinken die 'Haupttextdatei', der Mausklick löst den parsing-Vorgang aus und die Besucher bekommen ein vernünftiges Layout.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<title>Navigation mit PHP</title>
<link href="../seitenlayout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td>
<!-- Kopfnavigation -->
<?php
include ("kopf.php");
?></td>
</tr>
<tr>
<td id="links" valign="top">
<!-- Hauptnavigation -->
<?php
include ("navigation.php");
?>
</td>
<td>
<!-- Text -->
<h2>Navigation mit PHP</h2>
<p>Text</p>
</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Seitenlayout mit Frames</title>
</head>

<frameset rows="115,*" border="0">
<frame src="kopf.html" name="oben" noresize scrolling="no">
<frameset cols="190,*" border="0">
<frame src="navigation.html" name="links" noresize>
<frame src="text.html" name="rechts" noresize>
</frameset>
</frameset>
<noframes>

<body>
</body>

</noframes>
</html>

Beispiel für eine navigation.php

<br>
<ul>
<li>Kundenbereich
<li>Entw&uuml;rfe
<li>Technik
<li>&Uuml;ber uns
<li>Referenzen
<li>Kontakt
<li>Impressum</ul>

Bitte klicken Sie hier um sich das Beispiel anzeigen zu lassen

Beispiel für eine .htaccess Datei

AddType x-mapp-php5 .php .htm .html

Links zum Thema

Sie verlassen die Homepage http://www.php.net/manual/de/
Sie verlassen die Homepage http://aktuell.de.selfhtml.org/links/php.htm


Letzte Aktualisierung: Donnerstag, 18.01.2018