Wir haben das Glück, dass sich die
Unterseiten nur geringfügig von der Startseite
unterscheiden. Die Unterseite sieht nahezu identisch aus: Es
ändern sich nur die Inhalte des Hauptinhaltsbereichs
#content und Details an der
Navigation.
Wir erstellen eine Kopie der index.html und
nennen sie ueber-uns.html – so wie wir
es bei der Auszeichnung der Navigation vorgesehen haben;
anschließend nehmen wir alle Änderungen vor und
fügen den neuen Content ein. Folgendes ist zu tun:
- Wir müssen den Titel anpassen.
Verschiedene Seiten brauchen verschiedene Titel. Heute ist es
üblich, den Seitentitel so zu gestalten, dass er eine
Art umgekehrten Ariadne-Faden ergibt, beginnend bei der
aktuellen Seite. Als Trennzeichen haben sich der Trennstrich
(
-) und der senkrechte Strich (|) bewährt, wobei ich den Trennstrich vorziehe. Unser Titel für die »Über uns«-Seite lautet somit:Über uns – Kochbar. - Ebenso wie den Titel müssen wir
auch die Beschreibung ändern und an die aktuelle Seite
anpassen. In Ermangelung eines geeigneten Texts lassen wir
das entsprechende
meta-Element einfach weg – das ist nicht weiter schlimm, Suchmaschinen werden die Seite auch so finden. - Es ist üblich, das Logo auf Unterseiten mit der Startseite zu verlinken. Wohlgemerkt, auf Unterseiten! Die Regel, dass eine Seite niemals auf sich selbst verlinken sollte, gilt auch für dieses Detail. Deswegen haben wir das Logo auf der Homepage unverlinkt ausgezeichnet, müssen die Verlinkung jedoch jetzt nachholen.
- Der Content besteht nur aus der Hauptüberschrift und drei Absätzen. Das können wir mittlerweile mit einer gewissen Routine auszeichnen.
Der Quelltext der Website sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Über uns - Kochbar</title>
<meta name="author-personal" content="Michael Jendryschik" />
<meta name="author-mail" content="mailto:michael@jendryschik.de" />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="head">
<h1><a href="index.html"><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></a></h1>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><strong title="Hier befinden Sie sich gerade.">Kochbar</strong></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="main">
<div id="main-inner">
<div id="sidebar">
<!-- Sidebar -->
</div>
<div id="content">
<h1>In die Töpfe geschaut…</h1>
<p>Die Philosophie der Kochbar ist denkbar einfach: An unserem Essen sollt Ihr uns messen! Keine großen Inszenierungen, kein unnötiger Schnickschnack: Was bei uns auf den Teller kommt, lebt von seiner außergewöhnlichen Qualität sowie einer perfekten Zubereitung.</p>
<p>Damit das so ist, verwenden wir einen großen Teil unserer Zeit auf die sorgfältige Auswahl erlesener Produkte. Wir orientieren uns dabei am Rhythmus der Jahreszeiten, denn schließlich soll alles stets ganz frisch auf den Teller kommen. Was dem Essen dann noch fehlt, schaffen ein wenig Phantasie bei der Zubereitung sowie eine kräftige Portion Mut bei der Zusammenstellung der Zutaten.</p>
<p>Unser Chefkoch Jim Stelzer ist Absolvent der Pariser Elitekochschule »Le Cordon Bleu« und hat bereits in vielen renommierten Restaurants als »Sous Chef« und »Chef de Cuisine« wirken können. Mit der Kochbar, die er gemeinsam mit seinem Jugendfreund Jonathan Quayle Higgins führt, hat er sich einen persönlichen Kindheitstraum erfüllt.</p>
</div>
</div>
<div id="footer">
<!-- Fußzeile (unverändert) -->
</div>
</div>
</body>
</html>
Übung: Über die Kochbar, Markup
- Erstellen Sie ein neues leeres Dokument
und speichern Sie es in Ihrem Ordner als
»ueber-uns.html«. Oder speichern Sie eine Kopie der
index.htmlunter diesem Namen. Denken Sie beim Speichern daran, UTF-8 als Kodierung einzustellen. - Fügen Sie den Quelltext aus Listing 8.37 ein.
- Speichern Sie und betrachten Sie das Ergebnis im Browser. Es sollte so aussehen wie Abbildung 8.34.
- Funktionieren die Links in der Navigation und das verlinkte Logo? Können Sie von der »Über uns«-Seite zur Startseite navigieren und zurück?
- Validieren Sie das Dokument. Ist es fehlerfrei?
Sicherlich sehen Sie den Rahmen um das Logo und die Lücke zwischen Kopfbereich und Illustration. Die Lücke entsteht dadurch, dass die Dicke des Rahmens zur Höhe des Bilds addiert wird und das Logo dadurch insgesamt höher ist als die 100 px, auf die wir das Hintergrundbild zurechtgeschnitten haben.
Verlinkte Bilder erhalten
standardmäßig einen Rahmen, der einem Nutzer
signalisieren soll, dass er auf das Bild klicken kann. Dieser
Rahmen ist allerdings ziemlich hässlich und häufig
überflüssig, da aus anderen Gründen klar ist, dass
das Bild verlinkt ist. Nutzer erwarten, auf ein Logo klicken zu
können, wir brauchen es also nicht zusätzlich deutlich
zu machen. Mittels border: 0; können wir den Rahmen
entfernen.
/**
* @section Bilder
*/
/* Rahmen verlinkter Bilder entfernen */
a img { border: 0; }
Übung: Über die Kochbar, Styling
- Ergänzen Sie Ihre
default.css. - Speichern Sie und betrachten Sie das Ergebnis im Browser. Der Rahmen um das Logo und somit auch die Lücke sollten jetzt weg sein.